/*
    ui-refresh.css
    Capa de presentacion sobre Bootstrap 4 + SmartAdmin.

    Se carga al final de Admin.Master para ganar por orden de cascada.

    REGLA IMPORTANTE: todo va acotado a #main, el contenedor de contenido.
    El chrome de SmartAdmin (#header, #left-panel, el menu lateral) NO se toca:
    sus medidas estan encadenadas entre si -- #left-panel calcula su
    padding-top contra la altura del header, y el menu minificado depende del
    tamano de fuente heredado -- y cualquier cambio ahi descuadra el menu.

    No depende de ninguna clase nueva: actua sobre las que el markup ya tiene.
    Por eso no requiere tocar ningun .aspx ni ningun ID de control.
*/

:root {
    --ui-verde: #2e9e6b;
    --ui-verde-oscuro: #248055;
    --ui-verde-claro: #eef7f2;
    --ui-texto: #33383e;
    --ui-texto-suave: #6c757d;
    --ui-borde: #e3e7eb;
    /* Los botones necesitan un borde mas marcado que las cajas: es lo unico
       que delimita su superficie, porque no llevan fondo de color. */
    --ui-borde-btn: #bcc5ce;
    --ui-radio: 6px;
    --ui-sombra: 0 1px 3px rgba(16, 24, 40, .06);
}

/* ------------------------------------------------------------------- base */

#main {
    font-size: 14px;
    color: var(--ui-texto);
}

/* Solo los encabezados de dentro de una tarjeta. Los de primer nivel viven
   sobre el fondo oscuro de la pagina y conservan su color claro. */
#main .card h1, #main .card h2, #main .card h3,
#main .card h4, #main .card h5 {
    font-weight: 600;
    color: var(--ui-texto);
}

/* -------------------------------------------------------------- formulario */

#main label {
    font-weight: 600;
    font-size: 13px;
    color: var(--ui-texto-suave);
    margin-bottom: .3rem;
}

#main .form-group {
    margin-bottom: .9rem;
}

#main .form-control,
#main select.form-control,
#main .input-group-text {
    height: calc(2.15rem + 2px);
    font-size: 14px;
    color: var(--ui-texto);
    border: 1px solid var(--ui-borde);
    border-radius: var(--ui-radio);
    box-shadow: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#main .form-control:focus {
    border-color: var(--ui-verde);
    box-shadow: 0 0 0 3px rgba(46, 158, 107, .15);
}

/* Los textarea no llevan la altura fija de los campos de una linea: deben
   respetar sus filas y poder crecer. Sin esto quedaban aplastados a una
   sola linea en todo el sistema. */
#main textarea.form-control,
.Popup textarea.form-control {
    height: auto;
    min-height: 5rem;
    line-height: 1.45;
    resize: vertical;
}

/* Calculados o bloqueados: que se note que no se escriben */
#main .form-control[readonly],
#main .cssTxtReadonly,
#main input[type="text"][disabled],
#main select[disabled] {
    background-color: #f4f6f8;
    color: var(--ui-texto-suave);
}

/* Los label ocupan su propia columna del grid y quedaban pegados arriba
   mientras el input se centraba. Se alinean con el campo que acompanan. */
#main .row > [class*="col-"] > label:only-child {
    display: flex;
    align-items: center;
    min-height: calc(2.15rem + 2px);
    margin-bottom: 0;
}

/* ----------------------------------------------------------------- botones */

#main .btn {
    border-radius: var(--ui-radio);
    font-size: 11.5px;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

#main .btn:active {
    transform: translateY(1px);
}

/* Todas las acciones de una barra se ven igual: fondo claro y borde suave.
   Son operaciones del mismo rango y no compiten entre si. */
#main .card-header .btn,
#main .verde .btn {
    background: #fff;
    border: 1px solid var(--ui-borde-btn);
    font-weight: 300;
}

#main .card-header .btn:hover,
#main .verde .btn:hover {
    background: #f4f6f8;
    border-color: #9aa6b2;
    color: var(--ui-texto);
}

/* La unica excepcion es el interruptor que despliega el panel de filtros.
   Se distingue por su data-toggle, no por su posicion: en estas barras
   conviven <a> y <button>, y :first-of-type cuenta por tipo de elemento
   -- por eso senalaba a Filtros en vez de a la primera accion. */
#main .card-header .btn[data-toggle="collapse"],
#main .verde .btn[data-toggle="collapse"] {
    background: var(--ui-verde);
    border-color: var(--ui-verde);
    color: #fff;
}

#main .card-header .btn[data-toggle="collapse"]:hover,
#main .verde .btn[data-toggle="collapse"]:hover {
    background: var(--ui-verde-oscuro);
    border-color: var(--ui-verde-oscuro);
    color: #fff;
}

#main .btn .fa {
    margin-right: .35rem;
    opacity: .75;
}

/* ---------------------------------------------------------------- tarjetas */

#main .card {
    border: 1px solid var(--ui-borde);
    border-radius: var(--ui-radio);
    box-shadow: var(--ui-sombra);
    margin-bottom: 1.1rem;
}

/* Cabecera con acciones: es una barra de botones, no un titulo. Sin filete,
   sin mayusculas y sin fondo de color, para que los botones se lean. */
#main .card-header:has(.btn) {
    background: #fff !important;
    color: var(--ui-texto) !important;
    border-bottom: 1px solid var(--ui-borde);
    border-radius: var(--ui-radio) var(--ui-radio) 0 0;
    padding: .7rem .9rem;
    text-transform: none;
}

/* Cabecera de titulo. No es una barra: es la etiqueta de la seccion. Sin
   fondo propio, ligera y en gris, para que nombre el bloque sin competir
   con el contenido que hay debajo. */
#main .card-header:not(:has(.btn)) {
    background: transparent !important;
    border-bottom: 1px solid var(--ui-borde);
    border-radius: var(--ui-radio) var(--ui-radio) 0 0;
    padding: .85rem 1rem .6rem;
}

/* El texto suele venir dentro de un h3, que trae su propio peso y color y
   por eso ignoraba el color de la cabecera. */
#main .card-header:not(:has(.btn)),
#main .card-header:not(:has(.btn)) h1,
#main .card-header:not(:has(.btn)) h2,
#main .card-header:not(:has(.btn)) h3,
#main .card-header:not(:has(.btn)) h4,
#main .card-header:not(:has(.btn)) h5,
#main .card-header:not(:has(.btn)) h6 {
    color: rgb(33, 37, 41) !important;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.4;
}

#main .card-header a,
#main .card-header.text-white {
    color: var(--ui-texto) !important;
}

/* ------------------------------------------------- barra de items (.verde)

   .verde pinta un bloque #30c976 solido. Encima van checkboxes blancos que
   resultan ilegibles. Se neutraliza para que se lea el contenido.          */

#main .verde {
    background: #fafbfc;
    border: 1px solid var(--ui-borde);
    border-radius: var(--ui-radio);
    padding: .6rem .8rem;
    font-size: 14px;
    color: var(--ui-texto);
    margin-bottom: .9rem;
}

#main .verde label,
#main .verde .verde3 {
    color: var(--ui-texto);
    font-weight: 600;
    margin-bottom: 0;
}

/* El contenedor del mensaje existe siempre, tenga o no mensaje. Vacio dejaba
   una franja de color suelta encima de las pestanas. */
#main .verde:has(.alert:empty) {
    display: none;
}

/* --------------------------------------------------------------- mensajes */

/* Sin texto no debe pintar nada: el borde heredaba el ForeColor="red" del
   control y dibujaba una barra roja suelta. */
#main .alert:empty {
    display: none !important;
    padding: 0;
    border: 0;
}

#main .alert:not(:empty) {
    display: block;
    background: #fdf2f2;
    border: 0;
    border-left: 4px solid #d64545;
    border-radius: var(--ui-radio);
    color: #a62828 !important;
    padding: .7rem 1rem;
    margin-bottom: 0;
}

/* ------------------------------------------------------------------- tabs */

#main .ui-tabs .ui-tabs-nav,
#main .nav-tabs {
    border-bottom: 1px solid var(--ui-borde);
    background: transparent;
}

#main .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--ui-texto-suave);
    font-weight: 600;
    padding: .55rem 1rem;
}

#main .nav-tabs .nav-link:hover {
    color: var(--ui-texto);
}

#main .nav-tabs .nav-link.active {
    color: var(--ui-verde);
    border-bottom-color: var(--ui-verde);
    background: transparent;
}

/* ----------------------------------------------------------------- tablas */

#main .table {
    background: #fff;
    font-size: 13.5px;
}

#main .table thead th {
    background: #fafbfc;
    border-bottom: 1px solid var(--ui-borde);
    border-top: 0;
    color: var(--ui-texto-suave);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

#main .table td,
#main .table th {
    vertical-align: middle;
    border-top: 1px solid #f0f2f5;
}

#main .table tbody tr:hover {
    background-color: var(--ui-verde-claro);
}

/* Con scrollX activo, DataTables envuelve la tabla en .dataTables_scrollBody
   y le pone un border-left sin su pareja a la derecha. Al ser un contenedor
   alto, ese borde suelto se lee como una linea vertical que cruza la tarjeta.
   Los limites ya los marcan el borde de la .card y la cabecera. */
#main div.dataTables_scrollBody,
#main div.dataTables_scrollHead,
#main div.dataTables_scrollFoot {
    border-left: 0;
    border-right: 0;
}

/* En pantallas estrechas TODAS las columnas de la rejilla que arma DataTables
   salian con 100px de alto clavados, midiera su contenido 100px o 989px. La
   que envuelve la tabla quedaba recortada a 100px, y como el contador de
   registros y la paginacion van detras en el flujo, se dibujaban a la altura
   donde el contenedor "creia" que terminaba la tabla: encima de las filas.

   Se midio en el navegador con el volcado de alturas; la regla que las fija
   no esta en ninguna hoja propia, asi que viene de alguna del CDN y no se
   puede leer desde el navegador por ser de otro dominio. Da igual el origen:
   una columna que envuelve una tabla no debe tener altura fija nunca. */
#main .dataTables_wrapper .row > [class*="col-"] {
    height: auto;
}

/* Importes: alineados a la derecha y con cifras de ancho fijo */
#main .table td.text-right,
#main .table th.text-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Los inputs de las grillas de items no necesitan tanto alto */
#main .table .form-control,
#main .table input[type="text"] {
    height: calc(1.8rem + 2px);
    padding: .2rem .45rem;
    font-size: 13px;
}

/* --------------------------------------------------- grilla de detalle

   La grilla de items llega con table-bordered, que dibuja un recuadro en
   cada celda. Se dejan solo separadores horizontales: las columnas ya se
   distinguen por el espacio y por la cabecera.                          */

#main .table-bordered,
#main .table-bordered thead th,
#main .table-bordered thead td,
#main .table-bordered tbody th,
#main .table-bordered tbody td,
#main .table-bordered tfoot th,
#main .table-bordered tfoot td {
    border-left: 0;
    border-right: 0;
}

#main .table-bordered {
    border-top: 0;
    border-bottom: 0;
}

#main .table-bordered thead th {
    border-top: 0;
    border-bottom: 1px solid var(--ui-borde);
}

#main .table-bordered tbody td {
    border-top: 1px solid #f0f2f5;
}

/* Franjas mas tenues: deben guiar la lectura, no dividir la tabla */
#main .table-striped tbody tr:nth-of-type(odd) {
    background-color: #fbfcfd;
}

/* Celdas de la grilla: todo en una sola linea y centrado verticalmente.
   form-control es display:block, asi que el icono de descuentos y el
   asterisco de los validadores caian debajo del campo y estiraban la fila,
   dejando unas celdas mas altas que otras. */
#main .table td .form-control,
#main .table td input[type="text"],
#main .table td select {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

/* Excepcion: dentro de un input-group el campo debe seguir siendo flexible,
   o el prefijo (el recuadro "IGV") se descuelga del campo. */
#main .input-group > .form-control,
#main .table td .input-group > .form-control {
    display: block;
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    max-width: none;
}

/* Prefijo y campo tienen que medir lo mismo para quedar a ras */
#main .table td .input-group-text,
#main .table td .input-group > .form-control {
    height: calc(1.8rem + 2px);
}

#main .input-group-text {
    font-size: 12px;
    color: var(--ui-texto-suave);
    background-color: #f4f6f8;
}

/* Las esquinas que se tocan van planas, o el campo y el recuadro del icono se
   ven como dos cajas sueltas en vez de un solo control.

   Bootstrap ya lo hace, pero con selectores del tipo
   .input-group > .form-control:not(:last-child), sin id. La regla de mas arriba
   -- #main .form-control -- redondea las cuatro esquinas y le gana por el id,
   asi que hay que repetir aqui el aplanado con el mismo peso. Es el precio de
   haber acotado toda la hoja a #main. */
#main .input-group > .form-control:not(:last-child),
#main .input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#main .input-group > .form-control:not(:first-child),
#main .input-group > .custom-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#main .input-group > .input-group-append > .input-group-text,
#main .input-group > .input-group-append > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#main .input-group > .input-group-prepend > .input-group-text,
#main .input-group > .input-group-prepend > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#main .table td > a,
#main .table td > span {
    vertical-align: middle;
    margin-left: .3rem;
}

#main .table td > a {
    color: var(--ui-texto-suave);
}

#main .table td > a:hover {
    color: var(--ui-verde);
}

/* Densidad compacta: son bandejas de trabajo y lo que importa es cuantos
   registros caben en pantalla. El aire se consigue con el interlineado y
   los separadores, no con el relleno de la celda. */
#main .table td,
#main .table th {
    padding: .3rem .5rem;
    line-height: 1.35;
}

/* ---------------------------------------------------------------- select2 */

#main .select2-container--bootstrap4 .select2-selection--single {
    height: calc(2.15rem + 2px);
    border-color: var(--ui-borde);
    border-radius: var(--ui-radio);
}

/* ----------------------------------------------------- ventanas modales

   Excepcion deliberada a la regla de acotar todo a #main: el
   ModalPopupExtender del AjaxControlToolkit puede reubicar el panel fuera
   del contenedor de contenido, asi que estos selectores no llevan prefijo.

   .Popup y .Background vienen de wf.css con un borde negro de 3px y un
   tamano fijo de 400x370 que recortaba el contenido. Se sustituyen por el
   aspecto de un modal de Bootstrap.                                       */

.Popup {
    background: #fff;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 12px 44px rgba(16, 24, 40, .28);
    width: 460px;
    max-width: 94vw;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
    text-align: left;
}

.Background {
    background-color: #101828;
    opacity: .55;
    filter: none;
}

.Popup .modal-header {
    border-bottom: 1px solid var(--ui-borde);
    padding: .9rem 1.15rem;
}

.Popup .modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ui-texto);
    margin: 0;
}

.Popup .modal-body {
    padding: 1.15rem;
}

.Popup .modal-footer {
    border-top: 1px solid var(--ui-borde);
    padding: .8rem 1.15rem;
    background: #fafbfc;
}

.Popup label {
    font-weight: 600;
    font-size: 13px;
    color: var(--ui-texto-suave);
    margin-bottom: .35rem;
}

.Popup .form-control {
    border: 1px solid var(--ui-borde);
    border-radius: var(--ui-radio);
    font-size: 14px;
}

/* El campo de observaciones es el principal del modal: se le da altura
   suficiente para escribir un comentario sin tener que desplazarse. */
.Popup textarea.form-control {
    min-height: 9rem;
}

.Popup .form-control:focus {
    border-color: var(--ui-verde);
    box-shadow: 0 0 0 3px rgba(46, 158, 107, .15);
}

.Popup .btn {
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--ui-radio);
    padding: .4rem 1.1rem;
}

.Popup .btn .fa {
    margin-right: .35rem;
}

.Popup .btn-primary {
    background: var(--ui-verde);
    border-color: var(--ui-verde);
}

.Popup .btn-primary:hover {
    background: var(--ui-verde-oscuro);
    border-color: var(--ui-verde-oscuro);
}

.Popup .btn-secondary {
    background: #fff;
    border: 1px solid var(--ui-borde-btn);
    color: var(--ui-texto);
}

.Popup .btn-secondary:hover {
    background: #f4f6f8;
    border-color: #9aa6b2;
    color: var(--ui-texto);
}

/* Mensaje del validador, cuando el campo obligatorio queda vacio */
.Popup .DDValidator {
    display: block;
    color: #a62828;
    font-size: 12.5px;
    margin-top: .35rem;
}

/* ------------------------------------------------------------------ varios */

#main hr {
    border-top-color: var(--ui-borde);
}

/* Botones heredados de la etapa anterior, para que no desentonen */
#main .btn_buscar,
#main .btn_buscar2 {
    background-color: #fff;
    border: 1px solid var(--ui-borde);
    border-radius: var(--ui-radio);
    color: var(--ui-texto);
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 600;
    height: auto;
    width: auto;
    padding: .3rem .7rem;
}

#main .btn_buscar:hover,
#main .btn_buscar2:hover {
    background-color: #f4f6f8;
}

/* =============================================================================
   Modal de busqueda de documentos (wucBuscarListaDocumentos.ascx)

   Va colgado de #dlgDocumentListado y no de #main como el resto de esta hoja:
   es un modal de Bootstrap y, aunque se declara dentro del contenido, conviene
   que su estilo no dependa de donde quede en el arbol. El id es unico.
   ============================================================================= */

/* Ancho explicito: la grilla trae ocho columnas y con los 800px de .modal-lg
   se iba en scroll horizontal. Se fija aqui, con el id por delante, en vez de
   confiar en modal-xl. */
#dlgDocumentListado .modal-dialog {
    width: auto;
    max-width: 1100px;
    margin: 1.75rem auto;
}

#dlgDocumentListado .modal-content {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

#dlgDocumentListado .modal-header {
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-radius: 10px 10px 0 0;
}

#dlgDocumentListado .modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
}

#dlgDocumentListado .modal-body {
    padding: 1.25rem;
}

/* ---------- Filtros ---------- */

#dlgDocumentListado .dlg-doc-filtros {
    margin-bottom: .75rem;
}

#dlgDocumentListado .dlg-doc-filtros label {
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
}

#dlgDocumentListado .dlg-doc-ayuda {
    margin: 0 0 .625rem;
    font-size: .8125rem;
    color: #6c757d;
}

/* El aviso solo ocupa lugar cuando el servidor escribio algo. */
#dlgDocumentListado .dlg-doc-mensaje:empty {
    display: none;
}

#dlgDocumentListado .dlg-doc-mensaje {
    display: block;
    margin-bottom: .75rem;
    padding: .5rem .75rem;
    font-size: .8125rem;
    color: #842029;
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 6px;
}

/* ---------- Grilla ---------- */

/* Desplaza dentro de su caja, no la pagina entera: la seleccion de abajo y los
   botones del pie quedan siempre a la vista. */
#dlgDocumentListado .dlg-doc-grilla {
    max-height: 44vh;
    overflow: auto;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

#dlgDocumentListado .dlg-doc-grilla .table-responsive {
    margin: 0;
    border: 0;
}

#dlgDocumentListado .dlg-doc-grilla table {
    margin-bottom: 0;
    font-size: .8125rem;
    border: 0;
}

#dlgDocumentListado .dlg-doc-grilla th,
#dlgDocumentListado .dlg-doc-grilla td {
    padding: .4rem .6rem;
    vertical-align: middle;
    border-left: 0;
    border-right: 0;
    white-space: nowrap;
}

/* Cabecera fija: al desplazar 20 filas se pierde de vista enseguida. */
#dlgDocumentListado .dlg-doc-grilla thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #495057;
    background-color: #f1f3f5;
    border-top: 0;
    box-shadow: inset 0 -1px 0 #dee2e6;
}

#dlgDocumentListado .dlg-doc-grilla tbody tr:hover {
    background-color: #eafaf1;
}

/* El enlace del numero era naranja con subrayado, por estilo incrustado en la
   grilla. Aqui se lleva al verde de la aplicacion. */
#dlgDocumentListado .dlg-doc-grilla tbody a {
    color: #22a86c !important;
    font-weight: 600;
    text-decoration: none !important;
}

#dlgDocumentListado .dlg-doc-grilla tbody a:hover {
    color: #1b8756 !important;
    text-decoration: underline !important;
}

/* ---------- Paginacion ---------- */

/* .cssPaging no estaba definida en ninguna hoja: los numeros de pagina salian
   como texto suelto. */
#dlgDocumentListado .cssPaging {
    padding: .625rem .25rem .25rem;
    font-size: .8125rem;
    color: #6c757d;
}

#dlgDocumentListado .cssPaging a {
    display: inline-block;
    min-width: 26px;
    margin: 0 2px;
    padding: .15rem .4rem;
    text-align: center;
    color: #495057;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    text-decoration: none;
}

#dlgDocumentListado .cssPaging a:hover {
    color: #fff;
    background-color: #30c976;
    border-color: #30c976;
}

/* ---------- Seleccion ---------- */

#dlgDocumentListado .dlg-doc-seleccion {
    margin-top: 1rem;
    padding-top: .875rem;
    border-top: 1px solid #e9ecef;
}

#dlgDocumentListado .dlg-doc-seleccion-titulo {
    display: block;
    margin-bottom: .375rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
}

#dlgDocumentListado .content-tag-input {
    margin: 0;
}

#dlgDocumentListado .content-tag-input ul {
    min-height: 44px;
    margin: 0;
    padding: .35rem;
    background-color: #f8f9fa;
    border: 1px dashed #ced4da;
    border-radius: 8px;
}

#dlgDocumentListado .content-tag-input ul li {
    background: #e8f7f0;
    border: 1px solid #b7e4cd;
    border-radius: 999px;
    font-size: .8125rem;
}

#dlgDocumentListado #error-area {
    margin-bottom: .5rem;
}

#dlgDocumentListado #p-error-area:not(:empty) {
    display: block;
    padding: .5rem .75rem;
    font-size: .8125rem;
    color: #664d03;
    background-color: #fff3cd;
    border: 1px solid #ffecb5;
    border-radius: 6px;
}

/* El JS agrega la clase "ocultar" para esconder el aviso pasados dos segundos.
   Esa clase se define en un <style> del propio .ascx con un solo punto de
   especificidad, asi que la regla de arriba -- que lleva dos id -- le ganaba y
   el aviso se quedaba fijo. Se repite aqui con el mismo peso para que gane. */
#dlgDocumentListado #p-error-area.ocultar {
    display: none !important;
}

/* ---------- Pie ---------- */

#dlgDocumentListado .modal-footer {
    padding: .875rem 1.25rem;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    border-radius: 0 0 10px 10px;
}

/* ------------------------------------------- secciones con lista y "Agregar"

   El patron es: un <h4> de titulo, y debajo una .card cuya cabecera solo lleva
   el boton Agregar y cuyo cuerpo es una grilla. Se usa en la creacion de guias
   de remision para items, documentos adicionales, choferes, precintos e
   indicadores.

   Los botones Agregar eran LinkButton sin clase. Como la regla de mas arriba
   distingue la cabecera de acciones de la de titulo por :has(.btn), una
   cabecera con un enlace pelado caia del lado equivocado y el "Agregar" se
   renderizaba con el tratamiento de encabezado: mayusculas, 11px y letra
   espaciada. Ya llevan btn en el markup, asi que ahora entran por la rama
   correcta.
   ---------------------------------------------------------------------------- */

/* El titulo iba en h4 con el tamano por defecto de Bootstrap: demasiado grande
   y demasiado claro, y separado de la tarjeta que nombra. */
#main h4.font-weight-normal {
    margin-bottom: .5rem;
    font-size: .95rem;
    font-weight: 600 !important;
    color: var(--ui-texto);
    letter-spacing: -.005em;
}

/* Aire entre secciones, que es lo que las separa cuando las listas estan
   vacias y no hay nada mas que las delimite. */
#main h4.font-weight-normal + .card {
    margin-bottom: 1.6rem;
}

/* La cabecera solo contiene el boton: se ajusta al alto del boton en vez de
   ocupar como una barra de titulo. */
#main .card-header:has(> .btn:only-child) {
    padding: .5rem .6rem;
    background-color: #fbfcfd !important;
}

/* Cuerpo con grilla: el p-1 del markup dejaba la tabla pegada al borde. */
#main .card > .card-body.p-1 {
    padding: 0 !important;
}

#main .card > .card-body.p-1 > div > .table,
#main .card > .card-body.p-1 .table {
    margin-bottom: 0;
    border-left: 0;
    border-right: 0;
}

#main .card > .card-body.p-1 .table thead th {
    background-color: #f6f8fa;
    border-top: 0;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-texto-suave);
    white-space: nowrap;
}

/* Las grillas de estas secciones traen controles de formulario en cada celda;
   sin esto quedan con el alto de una fila de texto y se ven apretados. */
#main .card > .card-body.p-1 .table td {
    vertical-align: middle;
}

/* Campos dentro de las grillas de estas secciones.

   Cada columna traia su propio ancho incrustado en el markup -- 85% la unidad,
   65% el documento referenciado y la cantidad, nada las demas -- asi que los
   campos no alineaban entre si ni con la cabecera. Se normalizan al ancho de la
   celda. El !important es necesario porque ese ancho llega en el atributo style
   del propio control, y un atributo gana a cualquier hoja. */
#main .card > .card-body.p-1 .table td .form-control,
#main .card > .card-body.p-1 .table td input[type="text"],
#main .card > .card-body.p-1 .table td select {
    width: 100% !important;
    height: calc(1.6rem + 2px);
    min-height: 0;
    padding: .15rem .45rem;
    font-size: 12.5px;
    line-height: 1.35;
}

/* La celda se vuelve el marco de referencia del asterisco de validacion. */
#main .card > .card-body.p-1 .table td {
    position: relative;
    padding: .3rem .4rem;
}

/* Los RequiredFieldValidator no declaran Display, asi que ASP.NET los pinta en
   modo Static: se ocultan con visibility:hidden, que NO libera el espacio. Ese
   asterisco fantasma se sumaba al ancho del campo dentro de la misma celda y
   descuadraba la fila. Se saca del flujo y se apoya en la esquina. */
#main .card > .card-body.p-1 .table td > span[style*="color:Red"] {
    position: absolute;
    top: 1px;
    right: 3px;
    z-index: 2;
    font-size: 11px;
    line-height: 1;
}

/* El boton de eliminar es la primera celda y no lleva campo: se centra para que
   no quede colgado a la izquierda de una fila mas alta que el. */
#main .card > .card-body.p-1 .table td:first-child {
    width: 34px;
    text-align: center;
}

#main .card > .card-body.p-1 .table td:first-child img {
    vertical-align: middle;
}