/* ==========================================================================
   Comex Estadisticas - estilos propios sobre Bootstrap 5.3
   Solo aplica a las pantallas remodeladas (body.app-layout, lib/applayout.php).
   Las demas siguen con sus hojas viejas (dyn/*.css).
   Colores: los del sitio en produccion. Tipografia: tamano fijo como Interdespachos.
   Archivo en ASCII puro.
   ========================================================================== */

:root {
    --app-primary: #044F92;          /* azul institucional: titulos, links, boton principal */
    --app-primary-rgb: 4, 79, 146;
    --app-petroleo: #005058;         /* barras de resultados, navbar */
    --app-turquesa: #008A84;         /* franja de criterios y opciones */
    --app-celeste: #D7ECFF;          /* recuadros activos */
    --app-verde: #CFF5D1;            /* recuadro de visualizacion */
    --app-gris: #E7E8E9;
    --app-texto-off: #6B6B6B;        /* recuadros sin usar */
    --app-hover: #FF6600;            /* hover de links */
    --app-bg: #F3F5F8;
    --app-border: #D7DDE5;

    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-link-color: var(--app-primary);
    --bs-link-color-rgb: var(--app-primary-rgb);
    --bs-link-hover-color: var(--app-hover);
    --bs-link-hover-color-rgb: 255, 102, 0;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
body.app-layout {
    background: var(--app-bg) none;     /* home.css le pone una guarda de imagen al body */
    font-size: .875rem;
    color: #212529;
}

/* Las hojas viejas (criterio.css) ponen td/th en 1px (truco de las tablas de imagenes) y fuentes
   en px. :where() deja la especificidad en 0: pisa solo esas reglas sueltas, no las de clase. */
:where(body.app-layout) td,
:where(body.app-layout) th {
    font-size: inherit;
}
:where(body.app-layout) select,
:where(body.app-layout) input {
    font-family: inherit;
}
/* El reboot de Bootstrap pone border-collapse: collapse en todas las tablas, y con eso se pierde el
   padding de las tablas-boton viejas (boton6...). Las del editor de condiciones y los dialogos siguen
   armadas asi. */
#lmask table,
[id$="dialogdiv"] table {
    border-collapse: separate;
}

.app-navbar {
    background-color: var(--app-petroleo);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}
.app-navbar .navbar-brand {
    font-size: 1rem;
    font-weight: 600;
}
.app-navbar .app-brand-comex {
    font-style: italic;
    font-weight: 700;
}
.app-navbar .nav-link {
    font-size: .875rem;
}
.app-navbar .nav-link.active {
    color: #fff;
    border-bottom: 2px solid #fff;
}

.app-titulo {
    color: #fff;
    padding: .65rem 0;
}
.app-titulo-criterios {
    background-color: var(--app-turquesa);
}
.app-titulo-resultados {
    background-color: var(--app-petroleo);
    border-top: 1px solid rgba(255, 255, 255, .15);
}
.app-titulo h1 {
    font-weight: 600;
}
.app-titulo .app-titulo-sub {
    font-size: .8125rem;
    color: rgba(255, 255, 255, .8);
}

.app-pie {
    text-align: center;
    font-size: .75rem;
    padding: 1rem 0 1.5rem;
    color: var(--app-texto-off);
}
.app-pie a {
    color: var(--app-primary);
    text-decoration: none;
}
.app-pie a:hover {
    color: var(--app-hover);
}
.app-pie-sep {
    margin: 0 .5rem;
}

/* Botonera fija abajo: la accion principal siempre a la vista */
.app-botonera {
    position: sticky;
    bottom: 0;
    z-index: 6;                      /* debajo de las mascaras de los dialogos (lmask*, z-index 8+) */
    background-color: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--app-border);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .06);
    padding: .5rem 0;
}

/* Botones: tamano chico como Interdespachos */
body.app-layout .btn {
    --bs-btn-font-size: .8125rem;
}
.btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: #033e73;
    --bs-btn-hover-border-color: #033e73;
    --bs-btn-active-bg: #02325d;
    --bs-btn-active-border-color: #02325d;
}
.btn-outline-primary {
    --bs-btn-color: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-bg: var(--app-primary);
    --bs-btn-active-border-color: var(--app-primary);
}

.app-ayuda {
    color: var(--app-turquesa);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    border: 0;
    background: none;
}
.app-ayuda:hover {
    color: var(--app-primary);
}

/* --------------------------------------------------------------------------
   Criterios de busqueda (dyn/criterio.php)
   El JS (setactive en criterio1.js) reemplaza la clase entera de los elementos con id cond*:
   zonamenu/zonamenuOff, zmtitle/zmtitleOff, zmtext/zmtextOff, zme/zmeOff, zmeleft/zmeleftOff.
   Por eso las clases de Bootstrap van en la tarjeta de afuera y aca se redefinen esas clases.
   -------------------------------------------------------------------------- */
.app-crit {
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
}
.app-crit > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.app-crit .zonamenu,
.app-crit .zonamenuOff,
.app-crit .zonamenuv {
    border: 0;
    background: #fff;
}
.app-crit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--app-border);
}
.app-crit .zonamenu .app-crit-head {
    background-color: var(--app-celeste);
}
.app-crit .zonamenuOff .app-crit-head {
    background-color: #fff;
}
.app-crit .zonamenuv .app-crit-head {
    background-color: var(--app-verde);
}
.app-crit h2,
.app-crit .zmtitle,
.app-crit .zmtitleOff {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    height: auto;
    background: none;
    color: var(--app-primary);
}
.app-crit .zmtitleOff {
    color: var(--app-texto-off);
}
.app-crit-body {
    padding: .75rem .9rem;
    flex: 1 1 auto;
}
.app-crit .zmtext,
.app-crit .zmtextOff {
    font-size: .8125rem;
    color: #3d5257;
    padding: 0 0 .6rem;
    background: none;
}
.app-crit .zmtextOff {
    color: var(--app-texto-off);
}
.app-crit .zme,
.app-crit .zmeOff,
.app-crit .zmev {
    padding: 0;
    background: none;
}
.app-crit .zmeleft,
.app-crit .zmeleftOff {
    display: none;                   /* era la guarda de imagen entre texto y datos */
}
.app-crit-foot {
    padding: .5rem .9rem;
    border-top: 1px solid var(--app-border);
    background-color: #fafbfc;
    text-align: right;
}
.app-crit .zmeoblig {
    font-family: inherit;
    background: none;
    padding: 0;
    margin-top: .35rem;
    font-size: .75rem;
    color: #8a6d00;
}
.app-crit .form-check {
    margin-bottom: .3rem;
}
.app-crit .form-check-label {
    font-size: .8125rem;
}
.app-crit .app-crit-sep {
    border-top: 1px dashed var(--app-border);
    margin: .5rem 0;
}
.app-crit .app-vis-icono {
    color: var(--app-primary);
    margin-right: .25rem;
}
.app-crit .app-vis-sub {
    margin-left: 1.6rem;
}
.app-crit .form-control-sm,
.app-crit .form-select-sm {
    max-width: 14rem;
}

/* Listas que arma genupdate() (tablas con las clases viejas de criterio.css) */
.app-crit #listapai,
.app-crit #listapos,
.app-crit #listaimp,
.app-crit #listaoper {
    margin-top: .25rem;
    max-height: 14rem;
    overflow: auto;
}

/* --------------------------------------------------------------------------
   Opciones de agrupado y de grafico (lib/opciones.php)
   -------------------------------------------------------------------------- */
.app-crit .app-agr-texto p {
    margin-bottom: .5rem;
}
.app-agr-campos {
    border: 1px solid var(--app-border);
    border-radius: .375rem;
    margin-bottom: .5rem;
}
.app-agr-campos .list-group-item {
    font-size: .8125rem;
    color: var(--app-primary);
    padding: .45rem .75rem;
}
.app-agr-campos .list-group-item img {
    vertical-align: -2px;
    margin-right: .35rem;
}
/* Niveles de agrupacion que arma buildgbdesc() (opcagr.js) */
.app-crit .agroptions {
    font-size: .8125rem;
    margin-bottom: 0;
}
.app-crit .grpcoldiv,
.app-crit .noagrdata {
    padding-left: .25rem;
    margin: .75rem 0;
}
.app-crit .grpcolck,
.app-crit .grpwholeck {
    top: 1px;
}
.app-crit input.textolineas {
    font-family: inherit;
    font-size: .8125rem;
    width: 3.5em;
    margin: 0 .2em;
    padding: .05rem .25rem;
    border: 1px solid var(--app-border);
    border-radius: .25rem;
    background: #fff;
    top: 0;
}
/* Resumen de condiciones (getquerydesc): las clases viejas lo ponen en 9px */
.app-crit .zmenote,
.app-crit #consdesc,
.app-crit #consdesc * {
    font-size: .8125rem;
}
.app-aviso {
    font-size: .8125rem;
}

/* --------------------------------------------------------------------------
   Inicio (dyn/home.php)
   -------------------------------------------------------------------------- */
.app-bienvenida {
    font-size: .9375rem;
    padding: 1rem 0;
}
.app-crit h2 a {
    color: inherit;
    text-decoration: none;
}
.app-crit h2 a:hover {
    color: var(--app-hover);
}
.app-crit .app-login-texto .loginlink {
    color: var(--app-turquesa);
}
/* Consultas almacenadas que arma consultas_personalizadas() (lib/userhomeq.php, filas sueltas) */
/* home.css las pone en Georgia/Verdana */
.app-consultas,
.app-consultas * {
    font-family: inherit;
}
.app-consultas .zmptitle {
    font-style: normal;
    font-size: .875rem;
    font-weight: 600;
    padding-top: .6rem;
}
.app-consultas .zmptitle img {
    margin-right: .3rem;
}
.app-consultas .zmpdesc {
    font-size: .8125rem;
    color: #3d5257;
}
.app-consultas .zmpdesc ul {
    padding-left: 1.2rem;
}
.app-consultas .zmtitle2 {
    font-size: .875rem;
    font-weight: 600;
    color: var(--app-primary);
}
.app-consultas .botonimg {
    cursor: pointer;
}
.app-crit .zmpnosaved {
    font-size: .8125rem;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Dialogos comunes (error, ayuda, aviso) y mascaras: lib/common.php + dyn/error|help|notice.html
   El HTML se copia del iframe "loader" a la pagina (showcommondialog de common.js). Desde que todas las
   pantallas tienen el layout nuevo, el HTML de los avisos tambien es nuevo (.app-dialogo).
   -------------------------------------------------------------------------- */
body.app-layout [id^="lmask"] {
    background: rgba(0, 32, 40, .45) !important;   /* era mascara.gif (rayado); el estilo esta en linea */
}
/* Contenedores (lib/common.php): common.js les pone ancho, top y left en px; aca solo el aspecto */
#errdialogdiv,
#helpdialogdiv,
#noticedialogdiv {
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .3);
    background: #fff;
}
@media (max-width: 575.98px) {
    #errdialogdiv,
    #helpdialogdiv,
    #noticedialogdiv {
        left: .75rem !important;
        right: .75rem;
        width: auto !important;
    }
}

/* Aviso (dyn/error.html, help.html, notice.html). Sin clases de Bootstrap: tambien lo muestra la ventanita
   NCM (tinyncm.php), que solo carga este archivo */
.app-dialogo {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: .875rem;
    color: #212529;
    background: #fff;
}
.app-dialogo-cabecera {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    background: var(--app-primary);
}
.app-dialogo-cabecera > span {
    flex: 1 1 auto;
}
.app-dialogo-error .app-dialogo-cabecera {
    background: #990000;
}
.app-dialogo-ayuda .app-dialogo-cabecera {
    background: #FFF4B0;
    color: #4a4000;
}
.app-dialogo-aviso .app-dialogo-cabecera {
    background: var(--app-turquesa);
}
.app-dialogo-cerrar,
.app-dialogo-cerrar:link,
.app-dialogo-cerrar:visited {
    color: inherit;
    opacity: .8;
    text-decoration: none;
    line-height: 1;
}
.app-dialogo-cerrar:hover {
    opacity: 1;
    color: inherit;
}
.app-dialogo-cuerpo {
    padding: 1.1rem 1.25rem;
    line-height: 1.55;
}
.app-dialogo-cuerpo .helptitle {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .5rem;
    color: var(--app-primary);
}
.app-dialogo-cuerpo .helptext {
    padding: 0;
    font-size: .875rem;
}
.app-dialogo-pie {
    display: flex;
    justify-content: flex-end;
    padding: .65rem 1rem;
    background: #F7F9FB;
    border-top: 1px solid var(--app-border);
}
.app-dialogo-boton,
.app-dialogo-boton:link,
.app-dialogo-boton:visited {
    display: inline-block;
    padding: .375rem 1.5rem;
    border-radius: .375rem;
    background: var(--app-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.app-dialogo-boton:hover,
.app-dialogo-boton:focus {
    background: #033e73;
    color: #fff;
    outline: 2px solid rgba(var(--app-primary-rgb), .35);
    outline-offset: 2px;
}
body.app-layout #waitdiv td {
    border: 0 !important;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
    font-family: inherit !important;
    font-size: .95rem !important;
    padding: 1rem 1.5rem !important;
}

/* --------------------------------------------------------------------------
   Resultados (listado, declaracion, agrupado, grafico): encabezado y pie. La tabla y los menues los
   arma consulta.js con las clases de consulta.css.
   -------------------------------------------------------------------------- */
.app-btn-opciones {
    --bs-btn-padding-y: .15rem;
    --bs-btn-padding-x: .6rem;
}
.app-titulo #imgconsdata {
    cursor: help;
    border-radius: 3px;
}
/* consulta.css: fondo de guarda en #detalle y #declaracion */
body.app-layout div#detalle,
body.app-layout div#declaracion {
    background: var(--app-bg) none;
}
body.app-layout div#detalle.detalledecla {
    background: #fff;
}
/* Filas de relleno del paginador (mantenian el alto de la tabla en la ultima pagina): no se muestran */
body.app-layout td.pagefiller {
    display: none;
}
/* Unidad y valor ("KG. 123,45"): en un mismo renglon. Antes la unidad flotaba y el numero bajaba */
body.app-layout td:has(> div.uvunit) {
    white-space: nowrap;
}
body.app-layout div.uvunit {
    float: none;
    display: inline-block;
}
body.app-layout div.uvvalue {
    display: inline-block;
}
.app-resfoot {
    background-color: var(--app-petroleo);
    color: #fff;
    padding: .4rem 1rem;
    font-size: .8125rem;
}
.app-resfoot-fila {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem 1rem;
}
/* Menues de consulta.js (opciones, cada fila, sufijos): por encima de la cabecera fija de la grilla (z-index 2)
   y de la botonera (6), por debajo de las mascaras de los dialogos (8 en adelante) */
body.app-layout #menuopciones,
body.app-layout #dynmenu,
body.app-layout #dynover {
    z-index: 7;
}
/* Menu de cada fila (400px fijos en consulta.css): aunque este oculto cuenta para el ancho de la pagina */
body.app-layout #dynmenu {
    max-width: 100vw;
}
body.app-layout #dynmenu .ftabdynmenu {
    width: min(400px, 100vw);
}
/* Paginador (tabla de numeros de consulta.js): en celular scrollea solo, no ensancha la pagina */
.app-resfoot .pagelist {
    max-width: 100%;
    min-width: 0;                        /* item flex: sin esto no se achica */
    overflow-x: auto;
}
.app-resfoot .groupcols {
    padding-bottom: .2rem;
}
/* Tablas anchas (listado de 11 columnas): scroll propio en pantallas chicas, no de toda la pagina.
   Solo ahi: un contenedor con scroll anula la cabecera fija (sticky) de la grilla */
@media (max-width: 991.98px) {
    body.app-layout div#detalle {
        overflow-x: auto;
    }
}

/* --------------------------------------------------------------------------
   Grilla de resultados (getTable / header / line de consulta.js: table.tconsulta, th/td.consfield).
   Mismo HTML; solo cambia el aspecto: tarjeta, cabecera fija, sin bordes verticales, numeros tabulares.
   -------------------------------------------------------------------------- */
body.app-layout #detalle {
    padding: 1rem;
}
body.app-layout #detalle table.tconsulta {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
/* Cabecera */
body.app-layout #detalle th.consfield {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #F6F8FA;
    color: #51606a;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25;
    padding: .65rem .6rem;
    border: 0;
    border-bottom: 1px solid var(--app-border);
    vertical-align: bottom;
}
body.app-layout #detalle th.consfieldfirst {
    border-top-left-radius: .5rem;
}
body.app-layout #detalle th.consfieldlast {
    border-top-right-radius: .5rem;
}
body.app-layout #detalle th.montos,
body.app-layout #detalle th.valores {
    text-align: right;                   /* alineada con los numeros (era centrada) */
}
body.app-layout #detalle a.ordenactivo,
body.app-layout #detalle a.ordeninactivo {
    color: inherit;
    background: none;
    font-weight: 600;
    text-decoration: none;
}
body.app-layout #detalle a.ordenactivo {
    color: var(--app-primary);
}
body.app-layout #detalle a.ordenactivo:hover,
body.app-layout #detalle a.ordeninactivo:hover {
    color: var(--app-hover);
}
/* Flecha del orden: el enlace de la columna activa lleva "or=-campo" cuando hoy esta ascendente */
body.app-layout #detalle a.ordenactivo::after {
    font-family: "bootstrap-icons";
    content: "\f124";                    /* bi-arrow-down-short */
    vertical-align: -.15em;
    margin-left: .1rem;
}
body.app-layout #detalle a.ordenactivo[href*="or=%2d"]::after {
    content: "\f145";                    /* bi-arrow-up-short */
}
/* Celdas */
body.app-layout #detalle td.consfield {
    font-family: inherit;
    font-size: .8125rem;
    color: #212529;
    padding: .5rem .6rem;
    border: 0;
    border-bottom: 1px solid #EDF0F3;
    vertical-align: middle;
}
/* Codigos y CUIT sin cortes ("(no disponible)" partido en dos renglones hacia las filas el doble de altas) */
body.app-layout #detalle td.codigos {
    white-space: nowrap;
}
/* Pais, razon social: un minimo para que "(no disponible)" o "ESTADOS UNIDOS" no se partan */
body.app-layout #detalle td.descripciones {
    min-width: 6.5rem;
}
/* Separador despues del total general del agrupado: dentro de la tarjeta quedaba como franja vacia */
body.app-layout #detalle td.grouplevelspacetotal {
    display: none;
}
body.app-layout #detalle td.totalfield div.uvunit {
    color: inherit;
    opacity: .7;
}
/* Totales y subtotales del agrupado (td.totalfield): la letra de la grilla */
body.app-layout #detalle td.totalfield {
    font-family: inherit;
    font-size: .8125rem;
    padding: .5rem .75rem;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
body.app-layout #detalle td.consfieldodd,
body.app-layout #detalle td.consfieldeven {
    background: #fff;                    /* sin cebra: la fila se marca al pasar el mouse */
}
body.app-layout #detalle tr:last-child > td.consfield,
body.app-layout #detalle tr:has(+ tr > td.pagefiller) > td.consfield {
    border-bottom: 0;
}
body.app-layout #detalle tr.consfieldodd:hover > td,
body.app-layout #detalle tr.consfieldeven:hover > td {
    background: #EEF5FC;
}
/* Los textos con menu (lcontrolOff/On los cambia consulta.js al pasar el mouse) */
body.app-layout #detalle .lcontrolOff,
body.app-layout #detalle .lcontrolOn {
    font-weight: normal;
    color: inherit;
}
body.app-layout #detalle .lcontrolOn {
    color: var(--app-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Nro. de despacho: la referencia de cada fila */
body.app-layout #detalle td.iddt .lcontrolOff,
body.app-layout #detalle td.iddt .lcontrolOn {
    font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .78rem;
    font-weight: 600;
    color: var(--app-primary);
}
/* Numeros: cifras de ancho fijo para que los importes se lean en columna; la unidad, chica y gris */
body.app-layout #detalle td.montos,
body.app-layout #detalle td.valores {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.app-layout #detalle div.uvunit {
    color: #8A949B;
    font-size: .6875rem;
    margin-right: .3rem;
}
/* Totales y subtotales del agrupado: tonos de la paleta en lugar de gris/negro */
body.app-layout #detalle td.grouplevel1 {
    background: #F6F8FA;
    color: #51606a;
    font-weight: 600;
}
body.app-layout #detalle td.grouplevel2, body.app-layout #detalle td.grouplevel3,
body.app-layout #detalle td.grouplevel4, body.app-layout #detalle td.grouplevel5,
body.app-layout #detalle td.grouplevel6, body.app-layout #detalle td.grouplevel7,
body.app-layout #detalle td.grouplevel8 {
    background: #E3EEF9;
    color: var(--app-primary);
    font-weight: 600;
}
/* Paginador (barra petroleo de abajo) */
.app-resfoot td.pagenum {
    padding: 0 1px;
}
.app-resfoot a.pagenum,
.app-resfoot span.pagenum {
    display: inline-block;
    min-width: 1.75rem;
    padding: .15rem .4rem;
    border-radius: .375rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.app-resfoot a.pagenum {
    color: #fff;
}
.app-resfoot a.pagenum:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}
.app-resfoot span.pagenum {
    background: #fff;
    color: var(--app-petroleo);
    font-weight: 600;
}
.app-resfoot img.ppbutton,
.app-resfoot img.npbutton {
    vertical-align: middle;
    margin: 0 .2rem;
}

@media print {
    .app-navbar,
    .app-titulo,
    .app-resfoot,
    .app-pie,
    .app-botonera {
        display: none !important;
    }
    body.app-layout {
        background: #fff none;
    }
    body.app-layout div#detalle {
        overflow: visible;                  /* sin el scroll de pantalla: que la tabla no salga cortada */
    }
}

/* --------------------------------------------------------------------------
   Dialogo "Modificar las columnas desplegadas" (lib/common_consulta.php; consulta.js lo muestra
   poniendo #lmask en display: block). Modal centrado, la lista scrollea sola.
   -------------------------------------------------------------------------- */
body.app-layout #lmask.app-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 1050;
    height: auto !important;
    overflow-y: auto;
    cursor: default;
}
.app-columnas {
    max-width: 44rem;
    max-height: calc(100vh - 3rem);
    margin: 1.5rem auto;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .3);
}
.app-columnas > .card-header {
    background-color: var(--app-turquesa);
    color: #fff;
    border-bottom: 0;
}
.app-columnas-cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    background: #fff;
}
.app-columnas-lista .app-columna {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem .75rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid #EDF0F3;
}
.app-columnas-lista .app-columna:last-child {
    border-bottom: 0;
}
.app-columnas-lista .app-columna:hover {
    background: #F6F9FC;
}
.app-columna-nombre {
    font-size: .8125rem;
    font-weight: 600;
    color: #212529;
}
.app-columna-opciones .btn {
    --bs-btn-font-size: .75rem;
    --bs-btn-padding-x: .55rem;
    --bs-btn-padding-y: .2rem;
}
@media (max-width: 575.98px) {
    .app-columna-opciones {
        width: 100%;
    }
    .app-columna-opciones .btn {
        flex: 1 1 0;
    }
}

/* --------------------------------------------------------------------------
   Nomenclador (dyn/browsencm.php): busqueda y resultados que arma cposicion.php (lrlh / lrld)
   -------------------------------------------------------------------------- */
body.app-layout #detalle.app-ncm {
    background: transparent;
    padding: 1rem .75rem;
}
.app-ncm .app-ncm-sugerencia {
    font-size: .75rem;
    color: var(--app-texto-off);
    background: #F6F8FA;
    border-radius: .375rem;
    padding: .5rem .65rem;
}
.app-ncm-resultados {
    padding: .75rem .9rem;
    max-height: calc(100vh - 14rem);
    min-height: 16rem;
    overflow: auto;
}
.app-ncm .Lresult {
    background: none;
}
.app-ncm .LresultExplain {
    font-size: .8125rem;
    color: #3d5257;
    background: #F6F8FA;
    border-radius: .375rem;
    padding: .5rem .65rem;
    margin-bottom: .5rem;
}
.app-ncm #ceditres table {
    width: 100%;
    border-collapse: collapse;
}
.app-ncm #ceditres th.lrlh {
    font-size: .75rem;
    font-weight: normal;
    color: var(--app-texto-off);
    background: #F6F8FA;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--app-border);
}
.app-ncm #ceditres td.lrld {
    font-size: .8125rem;
    color: #212529;
    padding: .45rem .6rem;
    border-bottom: 1px solid #EDF0F3;
    vertical-align: top;
}
.app-ncm #ceditres tr:hover > td.lrld {
    background: #EEF5FC;
}
.app-ncm #ceditres td.lrld:first-child,
.app-ncm #ceditres th.lrlh:first-child {
    width: 0;
    padding: 0;
}
.app-ncm #ceditres .lcontrolOff,
.app-ncm #ceditres .lcontrolOn {
    font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .78rem;
    font-weight: 600;
    color: var(--app-primary);
    margin-right: .35rem;
}
.app-ncm #ceditres .lcontrolOn {
    text-decoration: underline;
}
.app-ncm #ceditres a.lrld-a {
    color: var(--app-turquesa);
    font-size: .75rem;
    white-space: nowrap;
}
.app-ncm #ceditres a.lrld-a:hover {
    color: var(--app-hover);
}

/* --------------------------------------------------------------------------
   Ventana de descarga Excel (dyn/form_excel.html, dyn/anuncio_excel.html, static/nomem.htm): 600x400
   -------------------------------------------------------------------------- */
body.app-excel {
    background: #fff;
}
.app-excel-titulo {
    background-color: var(--app-petroleo);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    padding: .75rem 1rem;
}
.app-excel-titulo .bi-file-earmark-excel {
    color: #7ee2a8;
}
.app-excel-titulo-error {
    background-color: #990000;
}
.app-excel .form-check {
    margin-bottom: .4rem;
}
.app-excel-espera {
    display: flex;
    align-items: flex-start;
}
.app-excel-espera .spinner-border {
    flex: 0 0 auto;
    margin-top: .2rem;
}
.app-excel-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 1rem;
    background: #f8f9fa;
    border-top: 1px solid var(--app-border);
}
.app-excel-copyright {
    font-size: .6875rem;
    color: var(--app-texto-off);
}

/* Administraciones aduaneras del mundo (static/osaduanas.htm) */
.app-aduanas {
    columns: 2 10rem;
    margin: 0;
    padding-left: 1.1rem;
    font-size: .8125rem;
}
.app-aduanas li {
    break-inside: avoid;
    padding: .1rem 0;
}

/* --------------------------------------------------------------------------
   Editor de condiciones (dyn/criterio.php #lcedit; lo arman lib/ccondedit.php y los handlers
   cpais/cposicion/cimportador/ctipodest con las clases viejas de criterio.css). Solo CSS: mismo HTML.
   -------------------------------------------------------------------------- */
body.app-layout #lcedit {
    border-collapse: separate;
    border-radius: .5rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .3);
    background: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.app-layout #lcedit td.Lborder {
    border: 0;
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    padding: 0;
}
/* el espaciador de 740px fija el ancho minimo en escritorio (sin alto: dejaba una franja blanca arriba);
   en pantallas chicas, nada */
body.app-layout #ceditpart1 > div:first-child {
    height: 0;
    overflow: hidden;
    line-height: 0;
}
@media (max-width: 991.98px) {
    body.app-layout #lcedit { width: 96% !important; }
    body.app-layout #ceditpart1 > div:first-child { display: none; }
}
body.app-layout #lcedit .LmenuTitle {
    background: var(--app-turquesa);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: .75rem 1rem;
}
/* Paneles de arriba: busqueda (izquierda) y resultados (derecha) */
body.app-layout #ceditcampos > tbody > tr > td[width="6"] {
    width: .75rem;
}
body.app-layout #lcedit .Lmenu,
body.app-layout #lcedit .LmenuExplain,
body.app-layout #lcedit .Lresult,
body.app-layout #lcedit .LresultExplain {
    background: #F6F8FA;
}
body.app-layout #lcedit .LmenuExplain,
body.app-layout #lcedit .LresultExplain {
    color: #3d5257;
    font-size: .8125rem;
    line-height: 1.45;
    padding: .65rem .75rem;
    border-radius: .375rem;
    margin-top: .75rem;
}
body.app-layout #lcedit .LresultSep {
    display: none;
}
body.app-layout #lcedit .Lzme {
    background: #fff;
    padding: .75rem 0 .5rem;
}
body.app-layout #lcedit .Lingreso {
    margin: 0;
}
body.app-layout #lcedit .LingCampos {
    font-size: .8125rem;
    color: #212529;
    padding: .3rem .4rem .3rem 0;
    vertical-align: middle;
}
body.app-layout #lcedit input[type=text],
body.app-layout #lcedit input:not([type]) {
    font-family: inherit;
    font-size: .8125rem;
    padding: .25rem .5rem;
    border: 1px solid var(--app-border);
    border-radius: .375rem;
    min-width: 10rem;
}
body.app-layout #lcedit input:focus {
    outline: 0;
    border-color: rgba(var(--app-primary-rgb), .45);
    box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .18);
}
/* Botones viejos (consultar, agrupar, desagrupar): con aspecto de boton de Bootstrap */
body.app-layout #lcedit td.boton8,
body.app-layout #lcedit td.boton5,
body.app-layout #lcedit td.boton5o {
    background: none;
    padding: 0;
}
body.app-layout #lcedit a.boton8-a,
body.app-layout #lcedit a.boton5-a {
    display: inline-block;
    padding: .2rem .7rem;
    font-size: .8125rem;
    border: 1px solid var(--app-primary);
    border-radius: .375rem;
    color: var(--app-primary);
    background: #fff;
    text-decoration: none;
    white-space: nowrap;
}
body.app-layout #lcedit a.boton8-a:hover,
body.app-layout #lcedit a.boton5-a:hover {
    background: var(--app-primary);
    color: #fff;
}
/* Resultados (lrlh / lrld): filas con separador y resaltado */
body.app-layout #lcedit #ceditresult {
    border: 1px solid var(--app-border);
    border-radius: .375rem;
}
body.app-layout #lcedit .lrld,
body.app-layout #lcedit .lrldG,
body.app-layout #lcedit .lrldGA,
body.app-layout #lcedit .lrlh {
    font-size: .8125rem;
    color: #212529;
    padding: .3rem .5rem;
    border-bottom: 1px solid #EDF0F3;
    vertical-align: middle;
}
body.app-layout #lcedit .lrlh {
    color: var(--app-texto-off);
    background: #F6F8FA;
}
body.app-layout #lcedit tr:hover > td.lrld,
body.app-layout #lcedit tr:hover > td.lrldG {
    background: #EEF5FC;
}
body.app-layout #lcedit .lrld img,
body.app-layout #lcedit .LmenuCData img {
    vertical-align: -2px;
}
body.app-layout #lcedit .LresMessage {
    font-size: .8125rem;
    color: var(--app-texto-off);
    padding: .75rem;
}
/* Condiciones elegidas: sin el verde con guarda rayada */
body.app-layout #lcedit .LmenuCondTD {
    background: #fff;
    padding: .75rem;
}
body.app-layout #lcedit .LmenuCondDIV,
body.app-layout #lcedit .LmenuCondDIV2 {
    background: #fff none;
}
body.app-layout #lcedit .LmenuCondDIV {
    border: 1px solid var(--app-border);
    border-radius: .375rem;
}
body.app-layout #lcedit .LmenuCondDIV2 > table > tbody > tr > td:first-child img {
    display: none;                       /* hguarda3.gif */
}
body.app-layout #lcedit .LmenuCData,
body.app-layout #lcedit .LmenuCDataG {
    font-size: .8125rem;
    color: #212529;
    vertical-align: middle;
}
/* "marcar" (casilla con imagen, cedit.checkclick lee el src): como un boton chico con borde */
body.app-layout #lcedit td.boton10 {
    font-size: .75rem;
    color: #51606a;
    border: 1px solid var(--app-border);
    border-right: 0;
    border-radius: .375rem 0 0 .375rem;
    padding: .1rem .45rem;
    background: #fff;
}
body.app-layout #lcedit td.boton10check {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 0 .375rem .375rem 0;
    padding: .1rem .4rem;
}
body.app-layout #lcedit table.clickeable:hover td.boton10,
body.app-layout #lcedit table.clickeable:hover td.boton10check {
    border-color: var(--app-primary);
    color: var(--app-primary);
}
/* Pie: agrupar bajo un nombre y recordar grupos */
body.app-layout #lcedit #ceditfooter {
    background: #F7F9FB;
    border-top: 1px solid var(--app-border);
    padding: .6rem .75rem 0;
}
body.app-layout #lcedit #ceditfooter td[height="21"] {
    height: .5rem;
}
body.app-layout #lcedit .LMenuRecordar {
    font-size: .8125rem;
    color: #212529;
}
body.app-layout #lcedit img.check {
    background: #fff;
    border: 1px solid #51606a;
    border-radius: 2px;
    padding: 2px;
}
/* Botonera de abajo (Aceptar / Cancelar) */
.app-cedit-botones {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .6rem .75rem;
    background: #F7F9FB;
}
.app-cedit-botones .btn-light {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-color: #fff;
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: #033e73;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #033e73;
}
.app-cedit-botones .btn-outline-light {
    --bs-btn-color: #51606a;
    --bs-btn-border-color: var(--app-border);
    --bs-btn-hover-bg: #E9EDF1;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-border-color: var(--app-border);
}

/* Personalizacion (guardar la busqueda) */
.app-guardar {
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background: #fff;
    padding: .75rem .9rem;
}
.app-guardar h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-primary);
    margin: 0 0 .35rem;
}