/* ═══════════════════════════════════════════════════════════════
   akResponsive.css — Aukera layout responsivo
   ───────────────────────────────────────────────────────────────
   ARQUITECTURA: CSS es la fuente de verdad para posición y tamaño.
   jQuery (.css({...})) escribe inline styles → especificidad alta.
   Para ganarle a jQuery se requiere !important en cada regla.
   PHP inline styles también requieren !important para ser sobreescritos.
   NUNCA modificar inline styles en PHP — solo agregar reglas aquí.

   JERARQUÍA DE PRIORIDAD (menor → mayor):
     1. Clase CSS (.contents, .maquetaDetalle, etc.)
     2. ID CSS sin !important (#id { ... })
     3. Inline style HTML (PHP style="...")  ← jQuery también escribe aquí
     4. ID CSS con !important (#id { ... !important })  ← GANA SIEMPRE

   BREAKPOINTS (por ancho de viewport):
     ≤ 1281px   →  MacBook 13" y similares
     1282–1366px →  Laptops 1366×768
     1367–1440px →  MacBook Pro 14" / pantallas 1440p
     1441–1920px →  Monitor 21" Full-HD (1920×968)
     > 1920px   →  Monitor 27" (2560×1440)
   ═══════════════════════════════════════════════════════════════ */


/* ── CONTRATOS GLOBALES (aplican a todos los breakpoints) ────────
   Estos valores son independientes del ancho — no van en media queries.
   ──────────────────────────────────────────────────────────────── */

/* mapaBase: altura base para pantallas donde JS no interviene en top.
   En 1441–1920px JS sets top=7.8vh → 7.8 + 92.2 = 100vh llega exacto al fondo.
   Los breakpoints donde JS cambia top sobreescriben este valor con su propio !important. */
#mapaBase { height: 92.2vh !important; }

/* ak-panel-largo: modo panel expandido (ej. tablas largas), altura fija en px. */
#mapaBase.ak-panel-largo { height: 1800px !important; }

/* plicaMetricaDashBoard A/B: paneles laterales izquierdos del dashboard.
   Valores empíricos calibrados en pantalla base — verificar con DevTools si se ajustan. */
#plicaMetricaDashBoardA { height: 49.4vh; }
#plicaMetricaDashBoardB { height: 23vh; }

/* Menú avanzado: posición horizontal por defecto para pantallas medianas.
   Sobreescrito en breakpoints extremos (≤1281px usa JS, >1920px tiene su propia regla). */
#barraMenuNavegacionAvanzada { left: 52.9vw; }

/* ── CONTRATO: inner divs de contenedores A, AD y B ──────────────
   subDetalleContenedorGenericoA (dentro de contenedorGenericoA),
   subDetalleContenedorGenericoB (dentro de contenedorGenericoB) y
   divtablaContenedorGenericoAD  (dentro de contenedorGenericoAD)
   comparten la misma regla de margen izquierdo:
     left : 0  (PHP fija left:8px en A y B — sobreescrito aquí; cambia solo en CSS)
   divtablaContenedorGenericoAD también lleva el contrato top/height:
     top  : 40px (reserva espacio para el header interno del contenedor)
     height: 90% (del padre, deja 10% superior para header → no desborda)
   Estos valores son constantes en todos los breakpoints porque son
   porcentajes/px del padre, no del viewport. */
#subDetalleContenedorGenericoA { left: 0 !important; }
#subDetalleContenedorGenericoB { left: 0 !important; }
#divtablaContenedorGenericoAD  { left: 0 !important; top: 40px !important; height: 90% !important; }

/* ── CONTRATO: ancho de contenedorGenericoB = ancho de plicaMetricaDashBoardD ──
   plicaMetricaDashBoardD (PHP: width:98.1%) define el ancho del área inferior.
   contenedorGenericoB debe coincidir: usa el mismo ancho que el grupo genérico
   en cada breakpoint (ver reglas de grupo por breakpoint abajo).
   No se requiere regla global porque el ancho varía con el viewport. */


/* ── intraViewLayer: cortina de viewport completo ────────────────
   PHP: display:none; z-index:1450; background-color:$backgroundColor.
   JS (fxContextoA.js:13662/13703) lo muestra; CSS lo posiciona.
   z-index:1450 = entre A(1400) y B(1500) → tapa A, queda debajo de B. */
#intraViewLayer {
  position: fixed;
  top:    0;
  left:   0;
  width:  100vw;
  height: 100vh;
}

/* ── CONTRATO: alineación horizontal con deFormulaPiezaPie (master) ──
   deFormulaPiezaPie define los bordes horizontales de la zona de trabajo:
     left  = 1% del viewport  (≈ 14px a 1440px)
     right = 98.8% del viewport (1% + 97.8% de su width)

   contenedorGenericoA  (slave-izquierdo): su left = 1% del viewport vía JS
     → ya alineado con el master sin regla extra.
   contenedorGenericoAD (slave-derecho): su left = 82.8vw (jQuery akWidth*0.828)
     → width = 98.8vw − 82.8vw = 16vw para que su right coincida con el master.
   Esta fórmula es constante en todos los breakpoints. */
#contenedorGenericoAD { width: 16vw !important; }

/* ── CONTRATO: barras internas de contenedorGenericoB ────────────
   barraOpciones : 28% del ancho de contenedorGenericoB; left = 0.
   separación    : 0.02vw (mínima, entre ambas barras).
   barraFuncion  : ocupa el ancho restante.
     left  = 28% + 0.02vw
     width = 72% − 0.02vw
   !important necesario: PHP fija left/width inline en ambos divs;
   JS (fxContextoA.js lines 3985,4333,4341,5570,5579) sobreescribe left de barraFuncion.
   Estas reglas reemplazan todos los valores por breakpoint anteriores.

   Texto en barraFuncion — escala por factor = viewport / 1920px (21" Full-HD = referencia):
     base=15px → 0.78125vw; floor 12" (≈1024px) = 8px
     base=22px → 1.14583vw; floor 12" (≈1024px) = 11.73px
   Clases afectadas: .labelBarraFunciones, .labelBarraFuncionesObscuro, .labelBarraFunciones22 */

#barraOpcionesContenedorGenericoB {
  left:  0   !important;
  width: 28% !important;
}

#barraFuncionContenedorGenericoB {
  left:  calc(28% + 0.02vw) !important;
  width: calc(72% - 0.02vw) !important;
}

#barraFuncionContenedorGenericoB .labelBarraFunciones,
#barraFuncionContenedorGenericoB .labelBarraFuncionesObscuro {
  font-size: max(8px, 0.78125vw) !important;
}

#barraFuncionContenedorGenericoB .labelBarraFunciones22 {
  font-size: max(11.73px, 1.14583vw) !important;
}

/* ── CONTRATO: barras internas de contenedorGenericoA ────────────
   Mismo contrato que B: barraOpciones=28%, separación=0.02vw, barraFuncion=resto.
   PHP: barraOpciones left:7px (sin width explícito — clase .barraOpciones pone 350px).
   JS (fxContextoA.js lines 3950,4016,4121,4213,4219,4421,4427) sobreescribe left/width.
   !important necesario para ganar a ambos.

   Texto: mismas clases que B — escalado por factor = viewport/1920; floor 12" (≈1024px). */

#barraOpcionesContenedorGenericoA {
  left:  0   !important;
  width: 28% !important;
}

#barraFuncionContenedorGenericoA {
  left:  calc(28% + 0.02vw) !important;
  width: calc(72% - 0.02vw) !important;
}

#barraFuncionContenedorGenericoA .labelBarraFunciones,
#barraFuncionContenedorGenericoA .labelBarraFuncionesObscuro {
  font-size: max(8px, 0.78125vw) !important;
}

#barraFuncionContenedorGenericoA .labelBarraFunciones22 {
  font-size: max(11.73px, 1.14583vw) !important;
}


/* ══════════════════════════════════════════════════════════════
   ≤ 1281px  —  MacBook 13" y laptops pequeños (1025–1280px)
   JS flowSize(): ejeX=h*0.1, ancho=w*0.981, alto=h*0.476, xOfset=w*-0.490
   JS akPantalla fxEkationW: mapaBase top=h*0.1 (768<h≤800) o h=h*0.73 (h≤768)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1281px) {

    /* Contenedores principales: dimensiones para pantalla pequeña.
       top=10vh coincide con JS ejeX=h*0.1 para este rango de altura.
       Sin !important en height/top porque JS y CSS convergen en los mismos valores. */
    #contenedorGenericoA,
    #contenedorGenericoB,
    #contenedorGenericoC,
    #contenedorGenericoW,
    #contenedorGenericoP,
    #contenedorGenericoY,
    #contenedorGenericoZ,
    #modalGenericoD {
        width:  98.1vw;
        height: 47.6vh;
        top:    10vh;
    }

    /* plicaMetricaDashBoardC: franja horizontal superior — altura calibrada para este tamaño */
    #plicaMetricaDashBoardC { height: 6.2vh; }

    /* plicaMetricaDashBoardD: CONTRATO — top = B.bottom + 2vh
       B.top(10vh) + B.height(65vh) = B.bottom(75vh) → D.top = 77vh
       height = 99vh − 75vh − 2vh = 22vh  (1vh margen inferior ✓) */
    #plicaMetricaDashBoardD { top: 77vh !important; height: 22vh !important; }

    /* deFormulaPiezaPie: contrato — top = A.bottom_viewport + 2.5vh − mapaBase.top
       A.bottom = 10vh+47.6vh = 57.6vh  |  mapaBase.top = 10vh
       top_css = 57.6 + 2.5 − 10 = 50.1vh
       height = 99vh − 57.6vh − 2.5vh = 38.9vh
       bottom_viewport = 10vh + 50.1vh + 38.9vh = 99vh → 1vh margen inferior ✓ */
    #deFormulaPiezaPie { top: 50.1vh !important; height: 38.9vh !important; }

    /* contenedorGenericoB (idTabla 100.052): altura que cubre fondo de 100.049. */
    #contenedorGenericoB { height: 65vh !important; }


    /* subDetalle heights: altura del área de tabla dentro de cada contenedor.
       Empírico — verificar con DevTools en pantalla objetivo. */
    #subDetalleContenedorGenericoA { height: 38vh; }
    #subDetalleContenedorGenericoB { height: 40vh; }
    #subDetalleContenedorGenericoW { height: 38vh; }
    #subDetalleContenedorGenericoP { height: 38vh; }
    #subDetalleContenedorGenericoY { height: 38vh; }
    #subDetalleContenedorGenericoZ { height: 38vh; }

    /* Barras de función: posición left y ancho ajustados para pantalla angosta.
       Empírico — verificar con DevTools en pantalla objetivo. */
    #barraFuncionContenedorGenericoK { left: 57vw;  width: auto; }
    #barraFuncionContenedorGenericoW { left: 25vw;  width: 71vw; }
    #barraFuncionContenedorGenericoP { left: 25vw;  width: 71vw; }
    #barraFuncionContenedorGenericoY { left: 25vw;  width: 71vw; }
    #barraFuncionContenedorGenericoZ { left: 25vw;  width: 71vw; }
}


/* ══════════════════════════════════════════════════════════════
   1282 – 1366px  —  Laptops 1366×768
   JS flowSize(): ejeX=h*0.1102, ancho=w*0.980, alto=h*0.453, xOfset=w*-0.490
   JS akPantalla: no interviene en mapaBase top para este rango → CSS global 92.2vh aplica.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1282px) and (max-width: 1366px) {

    /* Contenedores principales: top=11.02vh ≈ JS ejeX=h*0.1102 a 768px altura.
       Sin !important — JS y CSS convergen en valores similares. */
    #contenedorGenericoA,
    #contenedorGenericoB,
    #contenedorGenericoC,
    #contenedorGenericoW,
    #contenedorGenericoP,
    #contenedorGenericoY,
    #contenedorGenericoZ,
    #modalGenericoD {
        width:  98vw;
        height: 45.3vh;
        top:    11.02vh;
    }

    /* plicaMetricaDashBoardC: altura calibrada para este rango */
    #plicaMetricaDashBoardC { height: 6.5vh; }

    /* plicaMetricaDashBoardD: CONTRATO — top = B.bottom + 2vh
       B.top(11.02vh) + B.height(65vh) = B.bottom(76.02vh) → D.top = 78.02vh
       height = 99vh − 76.02vh − 2vh = 20.98vh  (1vh margen inferior ✓) */
    #plicaMetricaDashBoardD { top: 78.02vh !important; height: 20.98vh !important; }

    /* deFormulaPiezaPie: contrato — top = A.bottom_viewport + 2.5vh − mapaBase.top
       A.bottom = 11.02vh+45.3vh = 56.32vh  |  mapaBase.top = 0 (h≤768, JS no toca top)
       top_css = 56.32 + 2.5 − 0 = 58.82vh
       height = 99vh − 56.32vh − 2.5vh = 40.18vh
       bottom_viewport = 0 + 58.82vh + 40.18vh = 99vh → 1vh margen inferior ✓ */
    #deFormulaPiezaPie { top: 58.82vh !important; height: 40.18vh !important; }

    /* contenedorGenericoB (100.052): altura que cubre fondo de 100.049. */
    #contenedorGenericoB { height: 65vh !important; }

    /* subDetalle heights: empírico para este breakpoint */
    #subDetalleContenedorGenericoA { height: 38vh; }
    #subDetalleContenedorGenericoB { height: 38vh; }
    #subDetalleContenedorGenericoW { height: 38vh; }
    #subDetalleContenedorGenericoP { height: 38vh; }
    #subDetalleContenedorGenericoY { height: 38vh; }
    #subDetalleContenedorGenericoZ { height: 38vh; }

    /* Barras de función: empírico para pantalla 1366px */
    #barraFuncionContenedorGenericoC { left: 55vw;  width: auto; }
    #barraFuncionContenedorGenericoK { left: 55vw;  width: auto; }
    #barraFuncionContenedorGenericoW { left: 25vw;  width: 71vw; }
    #barraFuncionContenedorGenericoP { left: 25vw;  width: 71vw; }
    #barraFuncionContenedorGenericoY { left: 25vw;  width: 71vw; }
    #barraFuncionContenedorGenericoZ { left: 25vw;  width: 71vw; }

    /* Ajustes específicos de fxLiquidW.js (tipoPantalla/tipoTabla) para 1366px:
       estos elementos se desplazan porque el viewport es más angosto que el diseño base. */
    #popUpReportes               { left: 7%; }
    .iconoX                      { background-size: 90%; }
    #contenedorGenericoADTituloA { left: 40%; }
    .texto2BarraFunciones        { left: -24%; }
    #cajaAlertasParrafo1         { top: 10%; }
}


/* ══════════════════════════════════════════════════════════════
   1367 – 1440px  —  MacBook Pro 14" / pantallas 1440p (788px alto)
   JS flowSize(): ejeX=h*0.122, ancho=w*0.978, alto=h*0.480, xOfset=w*-0.490, altoV=h*0.495
   JS akPantalla fxEkationW: mapaBase top=h*0.1 (768<h≤800) → 10vh a 788px.
   mapaBase global 92.2vh + JS top 10vh = 102.2vh → overflow. Fix: height: 90vh aquí.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1367px) and (max-width: 1440px) {

    /* JS pone top=10vh → global 92.2vh causaría overflow de 2.2vh.
       Fix: 10vh + 90vh = 100vh llega exacto al fondo del viewport. */
    #mapaBase { height: 90vh !important; }

    /* Contenedores principales.
       top=12.2vh = JS ejeX=h*0.122 a 788px. !important necesario para ganarle al resize. */
    #contenedorGenericoA,
    #contenedorGenericoB,
    #contenedorGenericoC,
    #contenedorGenericoW,
    #contenedorGenericoP,
    #contenedorGenericoY,
    #contenedorGenericoZ,
    #modalGenericoD {
        width:  97.8vw;
        height: 48vh !important;
        top:    12.2vh !important;
    }

    /* contenedorGenericoAD: mismo top y height que contenedorGenericoA → bottoms alineados.
       width controlado por regla global (16vw). */
    #contenedorGenericoAD { top: 12.2vh !important; height: 48vh !important; }

    /* plicaMetricaDashBoardC: franja superior calibrada */
    #plicaMetricaDashBoardC { height: 6.5vh; }

    /* contenedorGenericoB: top = grupo(12.2vh) − 1vh = 11.2vh.
       B.bottom = 11.2vh + calc(45.2vh+38px) = calc(56.4vh+38px) */
    #contenedorGenericoB { height: calc(45.2vh + 38px) !important; }

    /* plicaMetricaDashBoardD: CONTRATO — top = B.bottom + 2vh
       B.top(12.2vh) + B.height(calc(45.2vh+38px)) = B.bottom(calc(57.4vh+38px))
       D.top = calc(57.4vh+38px) + 2vh = calc(59.4vh+38px)
       height = 99vh − D.top = calc(39.6vh−38px)  (1vh margen inferior ✓) */
    #plicaMetricaDashBoardD { top: calc(59.4vh + 38px) !important; height: calc(39.6vh - 38px) !important; }

    /* deFormulaPiezaPie: contrato — top = A.bottom_viewport + 2.5vh − mapaBase.top
       A.bottom = 12.2vh+48vh = 60.2vh  |  mapaBase.top = 10vh (JS h*0.1 a 788px)
       top_css = 60.2 + 2.5 − 10 = 52.7vh
       height = 99vh − 60.2vh − 2.5vh = 36.3vh
       bottom_viewport = 10vh + 52.7vh + 36.3vh = 99vh → 1vh margen inferior ✓ */
    #deFormulaPiezaPie { top: 52.7vh !important; height: 36.3vh !important; }

    /* Elementos del panel D: posición interna calibrada para este breakpoint */
    #plicaMetricaDashBoardDGrafica { top: 3.8vh; }
    #boxPresupuetoCuenta           { top: 3.8vh; }
    #boxExcedenteCuenta            { top: 16.8vh; }
    #boxSimula                     { top: 3.8vh; }
    #boxConcilia                   { top: 3.8vh; }

    /* subDetalle heights: área de tabla dentro de cada contenedor — calibrado para 788px alto */
    #subDetalleContenedorGenericoA   { height: 43vh; }
    #subDetalleContenedorGenericoB   { height: 43vh; }
    #subDetalleContenedorGenericoC   { height: 43vh; }
    #subDetalleContenedorGenericoW   { height: 43vh; }
    #subDetalleContenedorGenericoP   { height: 43vh; }
    #subDetalleContenedorGenericoY   { height: 43vh; }
    #subDetalleContenedorGenericoZ   { height: 43vh; }

    /* subDetalle del contenedor B — sub-paneles internos (presupuesto, cheques, etc.) */
    #subDetalleContenedorGenericoBSi { height: 19vh; }
    #subDetalleContenedorGenericoBC  { height: 19vh; }
    #subDetalleContenedorGenericoBBP { top: 4.5vh;  height: 21vh; }
    #subDetalleContenedorGenericoBB  { top: 26.5vh; height: 21vh; }

    /* Barras de función: posición izquierda y ancho ajustados para 1440px */
    #barraFuncionContenedorGenericoC { left: 18vw;  width: 78vw; }
    #barraFuncionContenedorGenericoK { left: 60vw;  width: auto; }
    #barraFuncionContenedorGenericoQ { left: 60vw;  width: auto; }
    #barraFuncionContenedorGenericoW { left: 23vw;  width: 73vw; }
    #barraFuncionContenedorGenericoP { left: 23vw;  width: 73vw; }
    #barraFuncionContenedorGenericoY { left: 23vw;  width: 73vw; }
    #barraFuncionContenedorGenericoZ { left: 23vw;  width: 73vw; }

    #deFormulaCuadroCheques           { height: 20vh; }

    /* divtablaContenedorGenericoAD: el contrato global (left:0, top:40px, height:90%)
       aplica aquí también — no se sobreescribe en este breakpoint. */
}


/* ══════════════════════════════════════════════════════════════
   1441 – 1920px  —  Monitor 21" Full-HD (referencia: 1920×968)
   JS flowSize(): ejeX=h*0.078, ancho=w*0.983, alto=h*0.520, xOfset=w*-0.49075, altoV=h*0.495
   JS akPantalla fxEkationW: mapaBase top=h*0.078 (900<h≤1080) → 7.8vh a 968px.
   mapaBase: global 92.2vh + JS top 7.8vh = 100vh exacto → no se sobreescribe aquí.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) and (max-width: 1920px) {

    /* Contenedores principales.
       top=7.8vh = JS ejeX=h*0.078 a 968px. !important para ganarle al resize. */
    #contenedorGenericoA,
    #contenedorGenericoB,
    #contenedorGenericoC,
    #contenedorGenericoW,
    #contenedorGenericoP,
    #contenedorGenericoY,
    #contenedorGenericoZ,
    #modalGenericoD {
        width:  98.3vw;
        height: 52vh !important;
        top:    7.8vh !important;
    }

    /* contenedorGenericoAD: mismo top y height que contenedorGenericoA → bottoms alineados.
       width controlado por regla global (16vw). */
    #contenedorGenericoAD { top: 7.8vh !important; height: 52vh !important; }

    /* deFormulaPiezaPie: contrato — top = A.bottom_viewport + 2.5vh − mapaBase.top
       A.bottom = 7.8vh+52vh = 59.8vh  |  mapaBase.top = 7.8vh (JS h*0.078 a 968px)
       top_css = 59.8 + 2.5 − 7.8 = 54.5vh
       height = 99vh − 59.8vh − 2.5vh = 36.7vh
       bottom_viewport = 7.8vh + 54.5vh + 36.7vh = 99vh → 1vh margen inferior ✓ */
    #deFormulaPiezaPie { top: 54.5vh !important; height: 36.7vh !important; }

    /* contenedorGenericoB: B.height = D.top − B.top − 2vh (derivado del contrato de D).
       B.bottom = calc(57.4vh+38px), D.top = B.bottom + 2vh = calc(59.4vh+38px) */
    #contenedorGenericoB    { height: calc(49.6vh + 38px) !important; }

    /* plicaMetricaDashBoardD: CONTRATO — top = B.bottom + 2vh
       B.top(7.8vh) + B.height(calc(49.6vh+38px)) = B.bottom(calc(57.4vh+38px))
       D.top = calc(57.4vh+38px) + 2vh = calc(59.4vh+38px)
       height = 99vh − D.top = calc(39.6vh−38px)  (1vh margen inferior ✓) */
    #plicaMetricaDashBoardD { top: calc(59.4vh + 38px) !important; height: calc(39.6vh - 38px) !important; }

    /* Barras de función: posición ajustada para pantalla Full-HD */
    #barraFuncionContenedorGenericoC { left: 18vw;    width: auto; }
    #barraFuncionContenedorGenericoK { left: 49.27vw; width: auto; }
    #barraFuncionContenedorGenericoL { left: 18vw;    width: auto; }
    #barraFuncionContenedorGenericoW { left: 18vw;    width: auto; }
    #barraFuncionContenedorGenericoY { left: 20vw;    width: auto; }
    #barraFuncionContenedorGenericoP { left: 95vw;    width: auto; }
    #barraFuncionContenedorGenericoZ { left: 18vw;    width: auto; }

    /* divtablaContenedorGenericoAD: el contrato global (left:0, top:40px, height:90%)
       aplica aquí también — no se sobreescribe en este breakpoint. */
}


/* ══════════════════════════════════════════════════════════════
   > 1920px  —  Monitor 27" (referencia: 2560×1440)
   JS flowSize(): ejeX=h*0.101, ancho=w*0.835, alto=h*0.495, xOfset=w*-0.350
   JS akPantalla fxEkationW: NO interviene en mapaBase para height>1080 → CSS owns top y height.
   mapaBase: top=10.1vh (CSS), height=89.9vh → 10.1+89.9=100vh exacto.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1921px) {

    /* mapaBase: JS nunca toca top/height para height>1080 → CSS es dueño.
       10.1vh = JS ejeX=h*0.101. 10.1 + 89.9 = 100vh exacto al fondo. */
    #mapaBase { top: 10.1vh !important; height: 89.9vh !important; }

    /* Menú avanzado: se desplaza más a la derecha en pantalla ultra-ancha */
    #barraMenuNavegacionAvanzada { left: 66.9vw; }

    /* Contenedores principales: ancho reducido a 83.5vw porque en 27" los contenedores
       no llenan todo el viewport — JS usa ancho=w*0.835. Sin !important porque
       JS y CSS convergen en los mismos valores para este rango. */
    #contenedorGenericoA,
    #contenedorGenericoB,
    #contenedorGenericoC,
    #contenedorGenericoW,
    #contenedorGenericoP,
    #contenedorGenericoY,
    #contenedorGenericoZ,
    #modalGenericoD {
        width:  83.5vw;
        height: 49.5vh;
        top:    10.1vh;
    }

    /* contenedorGenericoAD: mismo top y height que contenedorGenericoA → bottoms alineados.
       !important necesario porque JS sigue ejecutando akWidth*0.828 como left y altoV como height. */
    #contenedorGenericoAD { top: 10.1vh !important; height: 49.5vh !important; }

    /* deFormulaPiezaPie: contrato — top = A.bottom_viewport + 2.5vh − mapaBase.top
       A.bottom = 10.1vh+49.5vh = 59.6vh  |  mapaBase.top = 10.1vh (CSS owns it aquí)
       top_css = 59.6 + 2.5 − 10.1 = 52vh
       height = 99vh − 59.6vh − 2.5vh = 36.9vh
       bottom_viewport = 10.1vh + 52vh + 36.9vh = 99vh → 1vh margen inferior ✓ */
    #deFormulaPiezaPie { top: 52vh !important; height: 36.9vh !important; }

    /* contenedorGenericoB (100.052): cubre fondo, D queda encima con z-index mayor. */
    #contenedorGenericoB    { height: 65vh !important; }

    /* plicaMetricaDashBoardD: CONTRATO — top = B.bottom + 2vh
       B.top(10.1vh) + B.height(65vh) = B.bottom(75.1vh) → D.top = 77.1vh
       height = 99vh − 75.1vh − 2vh = 21.9vh  (1vh margen inferior ✓) */
    #plicaMetricaDashBoardD { top: 77.1vh !important; height: 21.9vh !important; }


    /* Barras de función: posición ajustada para pantalla ultra-ancha */
    #barraFuncionContenedorGenericoC { width: auto; }
    #barraFuncionContenedorGenericoK { width: auto; }
    #barraFuncionContenedorGenericoW { width: auto; }
    #barraFuncionContenedorGenericoP { width: auto; }
    #barraFuncionContenedorGenericoY { width: auto; }
    #barraFuncionContenedorGenericoZ { width: auto; }

    /* divtablaContenedorGenericoAD: el contrato global (left:0, top:40px, height:90%)
       aplica aquí también — no se sobreescribe en este breakpoint. */
}


/* ══════════════════════════════════════════════════════════════
   TELON.PHP — landing page / login screen   (body.telonPage)
   ──────────────────────────────────────────────────────────────
   Factor de escala: sf = viewport_width / 1920
   Referencia 21" (1920px): valores px diseñados para esa base.
   Conversión: dim_px → (dim_px / 1920 * 100)vw

   Valores tomados de los inline styles de telon.php:
     #contenedorGenericoA              width=890  margin-left=-445  height=550
     #barraOpcionesContenedorGenericoA top=17     left=7
     #barraFuncionContenedorGenericoA  top=17     (left/width via contratos globales)
     #subDetalleContenedorGenericoA    top=40     left=4    width=879  height=495
     .labelTabla                       font-size=13

   POR QUÉ .telonPage en <body>:
     Los breakpoints de imagina.php (dashboard) tienen !important en height/top
     de #contenedorGenericoA (ej. height:52vh para 1441–1920px). Sin este scope,
     esos !important bloquean al JS de telon.php que pone height/top en %.
     Especificidad class+ID (0,1,1,0) supera al ID solo (0,1,0,0) del breakpoint
     cuando ambas reglas tienen !important → .telonPage gana siempre.

   CONSECUENCIA de !important aquí:
     jQuery .css() escribe inline style="" que pierde ante CSS !important.
     height y top quedan bajo control de CSS. Si un diálogo necesita override
     en tiempo de ejecución, JS debe usar
     element.style.setProperty('height', valor, 'important').
   ══════════════════════════════════════════════════════════════ */

/* Contenedor — centrado via left:50% (clase .contents) + margin-left negativo.
   top:0 cancela los tops del dashboard (7.8 / 12.2 / 10.1 vh !important). */
.telonPage #contenedorGenericoA {
    width:       46.354vw !important;   /* 890/1920*100 */
    margin-left: -23.177vw !important;  /* 445/1920*100, negativo */
    height:      28.646vw !important;   /* 550/1920*100; cancela 52vh/48vh/49.5vh */
    top:         0         !important;  /* cancela 7.8vh/12.2vh/10.1vh dashboard */
}

/* Barra de opciones — top y left escalados; width y height via contrato global. */
.telonPage #barraOpcionesContenedorGenericoA {
    top:  0.885vw !important;   /* 17/1920*100 */
    left: 0.365vw !important;   /* 7/1920*100  */
}

/* Barra de funciones — solo top; left y width via contrato global calc(28%+/72%-). */
.telonPage #barraFuncionContenedorGenericoA {
    top: 0.885vw !important;    /* 17/1920*100 */
}

/* Subdetalle — zona de tabla. width:879px PHP hardcodeado desbordaba el contenedor
   en viewports < 1920px; 45.781vw mantiene la proporción del diseño original. */
.telonPage #subDetalleContenedorGenericoA {
    top:    2.083vw !important;   /* 40/1920*100  */
    left:   0.208vw !important;   /* 4/1920*100   */
    width:  45.781vw !important;  /* 879/1920*100 */
    height: 25.781vw !important;  /* 495/1920*100 */
}

/* ── .label* dentro de #contenedorGenericoA — idModal 100.001 y 100.002 ──────
   Clases confirmadas en fxModales.php → modalRegistro() y modalFirma().
   Referencia: valor del archivo akEstilo.css (CSS class definition).
   .label15Naranja tiene inline style='font-size:16px' en PHP →
   !important lo cancela y normaliza a la definición de clase (15px).
   Floors: proporcional a la escala mínima razonable por rol tipográfico.
   ────────────────────────────────────────────────────────────────────── */

/* "Bienvenido" / "De Regreso" — heading de ambos modales. 30px ref. */
.telonPage #contenedorGenericoA .labelNaranja30 {
    font-size: max(15px, 1.563vw) !important;  /* 30/1920*100=1.563vw */
}

/* Párrafo descriptivo de ambos modales. 16px ref. */
.telonPage #contenedorGenericoA .label16Gris {
    font-size: max(11px, 0.833vw) !important;  /* 16/1920*100=0.833vw */
}

/* Botones de acción (Condiciones / Siempre no / Registrame / Listo).
   CSS class = 15px; PHP inline 16px cancelado por !important. */
.telonPage #contenedorGenericoA .label15Naranja {
    font-size: max(11px, 0.781vw) !important;  /* 15/1920*100=0.781vw */
}

/* Mensaje de alerta/validación — solo 100.001. 15px ref. */
.telonPage #contenedorGenericoA .label2Concepto {
    font-size: max(11px, 0.781vw) !important;  /* 15/1920*100=0.781vw */
}

/* Links "Olvide mi usuario/contraseña" — solo 100.002. 13px ref. */
.telonPage #contenedorGenericoA .label4Menu {
    font-size: max(10px, 0.677vw) !important;  /* 13/1920*100=0.677vw */
}

/* labelTabla — texto de celdas dentro del contenedor en telon.php.
   floor=10px evita ilegibilidad en viewports muy angostos. */
.telonPage #contenedorGenericoA .labelTabla {
    font-size: max(10px, 0.677vw) !important;  /* 13/1920*100=0.677vw */
}