/* =====================================================================
   ESTILOS PROPIOS DEL COTIZADOR
   =====================================================================

   Lo que el motor necesita y el panel no da: su stepper, sus tarjetas
   de tipo de instalacion, sus tablas de precios, su hoja de resultado.

   TODO va acotado bajo #cot-zona, el contenedor donde el panel pinta el
   cotizador. Asi el motor no puede tocar el resto del sistema.

   ── DOS COSAS QUE SE APRENDIERON HACIENDO ESTO ──

   1. Los comentarios se quitan ANTES de prefijar. El CSS del motor esta
      minificado, con varias reglas por linea y comentarios en medio; al
      prefijar sin quitarlos, los comentarios partian las reglas y la
      primera de cada linea quedaba SIN prefijo — sueltas sobre todo el
      panel. Se veia bien hasta que no.

   2. Lo que el panel ya define NO se copia: label, input, select, las
      tarjetas, los botones y los avisos. Traerlos acotados bajo
      #cot-zona los hacia MAS especificos que el panel, asi que ganaban
      siempre y el cotizador seguia viendose como antes.

   El ALGORITMO no se toca. Esto es ropa.
   ===================================================================== */

/* =====================================================================
   LOS COLORES DEL COTIZADOR, EN CLARO Y EN OSCURO
   =====================================================================

   El motor escribia los colores a mano: #fff para las tarjetas,
   #fee2e2 para el fondo de un aviso rojo, #991b1b para su letra. En
   claro se ve bien; en oscuro quedaban tarjetas blancas y letras
   oscuras sobre fondo oscuro.

   Aqui cada uno pasa a ser una variable con SIGNIFICADO, y cada
   significado tiene sus dos caras.

   ── LA REGLA ──

   Texto claro sobre fondo oscuro, texto oscuro sobre fondo claro. Y el
   significado no cambia: el rojo sigue siendo rojo, el verde verde y el
   ambar ambar. Lo que cambia es la INTENSIDAD:

     · en claro  el fondo es un tinte palido y la letra va oscura;
     · en oscuro el fondo es el mismo tono en translucido sobre el
       fondo de la app, y la letra va clara.

   Asi un aviso rojo se sigue leyendo como alarma en los dos temas, sin
   quemar la vista en oscuro ni desaparecer.
   ===================================================================== */
#cot-zona,#cot-oper-zona{
  /* Neutros: cuelgan de los del panel, que ya cambian solos. */
  --c-sup:var(--superficie);
  --c-sup2:var(--superficie-2);
  --c-sup3:var(--superficie-3);
  --c-fondo:var(--bg);
  --c-borde:var(--border);

  /* Peligro */
  --c-rojo-bg:#fee2e2; --c-rojo-bd:#fca5a5; --c-rojo-tx:#991b1b;
  /* Exito */
  --c-verde-bg:#dcfce7; --c-verde-bd:#86efac; --c-verde-tx:#14532d;
  /* Aviso */
  --c-ambar-bg:#fef3c7; --c-ambar-bd:#fde68a; --c-ambar-tx:#854F0B;
  /* Informacion */
  --c-azul-bg:#dbeafe; --c-azul-bd:#bae6fd; --c-azul-tx:#1e40af;
  /* Categorias del motor */
  --c-morado-bg:#ede9fe; --c-morado-bd:#e9d5ff; --c-morado-tx:#5b21b6;

  /* ── EL NAVY COMO FONDO ──
     En claro, el navy de la marca es el fondo de lo seleccionado y de
     las barras: destaca porque alrededor es claro.

     En oscuro el fondo de la app YA es navy, asi que un navy sobre
     navy desaparece: lo seleccionado dejaba de verse seleccionado.
     Ahi la pieza sube un escalon de luz —la misma superficie elevada
     del panel— y el borde amarillo hace el resto. */
  --c-sel-bg:var(--text);
  --c-sel-tx:#fff;
  /* Blanco de verdad, para lo que va sobre navy, rojo o amarillo:
     fondos que son iguales en los dos temas. */
  --blanco-fijo:#fff;

  /* ── LOS NOMBRES VIEJOS DEL MOTOR ──
     El motor escribe --surface, --muted, --rad, --yellow… Vivian en su
     propio :root, que se descarto porque tambien traia el body y el
     tema claro pegado. Sin ellos, `var(--surface)` no resuelve nada y
     el navegador se queda con el color que hubiera: asi quedaron las
     metricas con fondo casi blanco en modo oscuro.

     Aqui se atan a los del sistema, que si saben cambiar de tema. */
  --surface:var(--superficie-2);
  --border-soft:var(--superficie-3);
  --muted:var(--text-2);
  --label:var(--text-2);
  /* El gris que NO se lee: puntos de leyenda y bordes apagados.
     Antes estos tiraban de `--text-3`, que es un color de TEXTO del
     panel. Al subirle el contraste a `--text-3` (para que se leyera)
     se le oscurecieron de rebote al documento que ve el cliente. Son
     dos cosas distintas y ahora tienen dos nombres distintos. */
  --c-trazo:var(--trazo-neutro);
  --yellow:var(--amar);
  --rad:var(--r-md); --rad-sm:var(--r-sm); --rad-lg:var(--r-lg);
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --info-bg:var(--c-azul-bg); --info-border:var(--c-azul-bd); --info-text:var(--c-azul-tx);
  --warn-bg:var(--c-ambar-bg); --warn-border:var(--c-ambar-bd); --warn-text:var(--c-ambar-tx);
  --c-rosa-bg:#fce7f3;   --c-rosa-tx:#9d174d;

  /* ── LOS COLORES QUE EL MOTOR ESCRIBE A MANO ──
     El motor no solo pinta desde esta hoja: arma HTML con los colores
     metidos dentro del propio JavaScript. Esa parte no la alcanzaba
     ningun barrido de CSS, y por eso quedaban tarjetas blancas y letra
     oscura sobre fondo oscuro en todo lo que aparece DESPUES de tocar
     algo: los accesos que agregas, la cobertura del rol, los uniformes.

     Cada color de ahi paso a ser una variable. La cara CLARA es el hex
     original, identico: en claro no cambia un pixel. La cara oscura se
     deriva del mismo tono, de modo que un aviso rojo se siga leyendo
     como rojo y un exito como verde.

     Lo que NO voltea: la letra que va encima de un chip de color fijo
     (los turnos, las insignias de riesgo). Si el fondo no cambia, su
     letra tampoco puede cambiar sin perder el contraste. */
  --navy-fijo:#0E1A2E;                        /* letra oscura sobre chip fijo */
  --m-azul-bd-3:#bfdbfe;                      /* era fijo por error */
  --m-morado-tx-5:#6b21a8;                    /* era fijo por error */
  --m-morado-bd-1:#ddd6fe;                    /* era fijo por error */
  --m-rojo-tx-6:#7c2d12;                      /* era fijo por error */
  --m-sobre-amar:rgba(6,42,39,.6);            /* letra sobre el acento: FIJA */
  --m-sobre-navy-30:rgba(255,255,255,.46);     /* letra sobre la banda navy */
  --m-sobre-navy-40:rgba(255,255,255,.4);     /* letra sobre la banda navy */
  --m-sobre-navy-45:rgba(255,255,255,.45);    /* letra sobre la banda navy */
  --m-sobre-navy-50:rgba(255,255,255,.5);     /* letra sobre la banda navy */
  --m-sobre-navy-55:rgba(255,255,255,.55);    /* letra sobre la banda navy */
  --m-sobre-navy-60:rgba(255,255,255,.6);     /* letra sobre la banda navy */
  --m-sobre-navy-70:rgba(255,255,255,.7);     /* letra sobre la banda navy */
  --m-sobre-navy-75:rgba(255,255,255,.75);    /* letra sobre la banda navy */
  --m-sobre-navy-80:rgba(255,255,255,.8);     /* letra sobre la banda navy */
  --m-sobre-navy-90:rgba(255,255,255,.9);     /* letra sobre la banda navy */
  --m-foco-anillo:rgba(14,26,46,.08);         /* anillo al enfocar un campo */
  --m-tip-bg:rgba(14,26,46,.08);              /* fondo del icono de ayuda */
  --m-tip-bd:rgba(14,26,46,.18);              /* borde del icono de ayuda */
  --m-sev-a1-bd:#ca8a04;                      /* borde severidad 1 */
  --m-sev-a2-bd:#ea580c;                      /* borde severidad 2 */
  --m-sev-a4-bd:#db2777;                      /* borde severidad 4 */
  --m-perfil-lobo-bd:#ffc107;                 /* borde perfil Lobo */
  --m-perfil-aguila-bd:#bee5eb;               /* borde perfil Aguila */
  --m-perfil-jaguar-bd:#c3e6cb;               /* borde perfil Jaguar */
  --m-perfil-halcon-bd:#f5c6cb;               /* borde perfil Halcon */
  --m-perfil-buho-bd:#c8b8e8;                 /* borde perfil Buho */
  --m-indigo-bd:#6366f1;                      /* borde SKU elegido */
  --m-amar-hover:#e6af06;                     /* amarillo al pasar el raton (fijo) */
  --m-ambar-FG:#eab308;                       /* FG */
  --m-ambar-bd-1:#fcd34d;                     /* bd */
  --m-ambar-bd-2:#fde68a;                     /* bd */
  --m-ambar-bg-1:#fef9c3;                     /* bg */
  --m-ambar-bg-2:#FEF3C7;                     /* bg */
  --m-ambar-bg-3:#fef3c7;                     /* bg */
  --m-ambar-bg-4:#fefce8;                     /* bg */
  --m-ambar-bg-5:#fffbeb;                     /* bg */
  --m-ambar-tx:#fde68a;                       /* tx */
  --m-azul-FG-4:#E6F1FB;                      /* FG */
  --m-azul-bd-1:#534AB7;                      /* bd */
  --m-azul-bd-2:#bae6fd;                      /* bd */
  --m-azul-bg-1:#185FA5;                      /* bg */
  --m-azul-bg-2:#4338ca;                      /* bg */
  --m-azul-bg-3:#7F77DD;                      /* bg */
  --m-azul-bg-4:#dbeafe;                      /* bg */
  --m-azul-bg-5:#EEEDFE;                      /* bg */
  --m-azul-bg-6:#eef2ff;                      /* bg */
  --m-azul-bg-7:#eff6ff;                      /* bg */
  --m-azul-bg-8:#f0f9ff;                      /* bg */
  --m-azul-tx-1:#26215C;                      /* tx */
  --m-azul-tx-2:#075985;                      /* tx */
  --m-azul-tx-3:#0369a1;                      /* tx */
  --m-azul-tx-4:#3C3489;                      /* tx */
  --m-azul-tx-5:#1e40af;                      /* tx */
  --m-azul-tx-6:#3730a3;                      /* tx */
  --m-morado-bd:#ede9fe;                      /* bd */
  --m-morado-bg-1:#ede9fe;                    /* bg */
  --m-morado-bg-2:#f3e8ff;                    /* bg */
  --m-morado-bg-3:#f5f3ff;                    /* bg */
  --m-morado-bg-4:#faf5ff;                    /* bg */
  --m-morado-tx-1:#5b21b6;                    /* tx */
  --m-morado-tx-2:#6d28d9;                    /* tx */
  --m-morado-tx-3:#7c3aed;                    /* tx */
  --m-morado-tx-4:#c4b5fd;                    /* tx */
  --m-naranja-FG-1:#412402;                   /* FG */
  --m-naranja-FG-4:#f97316;                   /* FG */
  --m-naranja-bd:#FF9F1C;                     /* bd */
  --m-naranja-bg-1:#713f12;                   /* bg */
  --m-naranja-bg-2:#92400e;                   /* bg */
  --m-naranja-bg-3:#C45B00;                   /* bg */
  --m-naranja-bg-4:#EF9F27;                   /* bg */
  --m-naranja-bg-5:#ffedd5;                   /* bg */
  --m-naranja-bg-6:#fff7ed;                   /* bg */
  --m-naranja-tx-1:#713f12;                   /* tx */
  --m-naranja-tx-2:#78350f;                   /* tx */
  --m-naranja-tx-3:#854F0B;                   /* tx */
  --m-naranja-tx-4:#92400e;                   /* tx */
  --m-rojo-FG-5:#FF4D4F;                      /* FG */
  --m-rojo-bd-1:#C9302C;                      /* bd */
  --m-rojo-bd-2:#fca5a5;                      /* bd */
  --m-rojo-bg-1:#C9302C;                      /* bg */
  --m-rojo-bg-2:#fee2e2;                      /* bg */
  --m-rojo-bg-3:#fef2f2;                      /* bg */
  --m-rojo-bg-4:#fff1f2;                      /* bg */
  --m-rojo-tx-1:#7f1d1d;                      /* tx */
  --m-rojo-tx-2:#9a3412;                      /* tx */
  --m-rojo-tx-3:#991b1b;                      /* tx */
  --m-rojo-tx-4:#C9302C;                      /* tx */
  --m-rojo-tx-5:#fca5a5;                      /* tx */
  /* ── EL NIVEL MAS BAJO NO VA EN VERDE ──
 El verde
     dice "todo bien" en una propuesta donde le pedimos al cliente que
     contrate vigilancia, y encima ese nivel cobra 0 % de ajuste: el
     mensaje era doble --no lo necesitas, y ademas no vale mas--.
     Teal de Lykos: ni bien ni mal, VIGILADO. Y encadena en frio ->
     ambar -> naranja -> rojo. */
  --m-teal-FG:#2E6E77; --m-teal-bg:#E6F1F2; --m-teal-tx:#1C4C53;
  --m-verde-FG-3:#16C47F;                     /* FG */
  --m-verde-bd-1:#0E8F5C;                     /* bd */
  --m-verde-bd-2:#86efac;                     /* bd */
  --m-verde-bd-3:#bbf7d0;                     /* bd */
  --m-verde-bg-1:#0E8F5C;                     /* bg */
  --m-verde-bg-2:#d1fae5;                     /* bg */
  --m-verde-bg-3:#dcfce7;                     /* bg */
  --m-verde-bg-4:#f0fdf4;                     /* bg */
  --m-verde-tx-1:#14532d;                     /* tx */
  --m-verde-tx-2:#059669;                     /* tx */
  --m-verde-tx-3:#0E8F5C;                     /* tx */
  --m-verde-tx-4:#86efac;                     /* tx */
}

/* En oscuro el fondo es el MISMO tono, translucido, para que el color
   se lea sobre el fondo de la app en vez de tapar un cuadro claro. Y
   la letra sube de luminosidad hasta separarse de ese fondo. */
@media (prefers-color-scheme: dark){:root:not([data-tema="claro"]) #cot-zona,:root:not([data-tema="claro"]) #cot-oper-zona{
    --c-rojo-bg:rgba(255,77,79,.14);    --c-rojo-bd:rgba(255,77,79,.42);   --c-rojo-tx:#FF9E9C;
    --c-verde-bg:rgba(22,196,127,.14);  --c-verde-bd:rgba(22,196,127,.45); --c-verde-tx:#5FE3AC;
    --c-ambar-bg:rgba(255,159,28,.16);  --c-ambar-bd:rgba(255,159,28,.45); --c-ambar-tx:#FFD666;
    --c-azul-bg:rgba(59,130,246,.16);   --c-azul-bd:rgba(59,130,246,.45);  --c-azul-tx:#9EC5FE;
    --c-morado-bg:rgba(139,92,246,.18); --c-morado-bd:rgba(139,92,246,.45); --c-morado-tx:#C9B6FD;
    --c-rosa-bg:rgba(236,72,153,.16);   --c-rosa-tx:#F9A8D4;
    --c-sel-bg:var(--navy-light);
    --c-sel-tx:var(--text);
    --m-azul-bd-3:rgba(13,119,251,.42);         /* #bfdbfe */
    --m-morado-tx-5:#C090E9;                    /* #6b21a8 */
    --m-morado-bd-1:rgba(56,16,249,.42);        /* #ddd6fe */
    --m-rojo-tx-6:#EEA48B;                      /* #7c2d12 */
    --m-sobre-navy-30:rgba(255,255,255,.52);    /* la banda se aclara: mas cuerpo */
    --m-sobre-navy-40:rgba(255,255,255,.60);    /* la banda se aclara: mas cuerpo */
    --m-sobre-navy-45:rgba(255,255,255,.64);    /* la banda se aclara: mas cuerpo */
    --m-sobre-navy-50:rgba(255,255,255,.68);    /* la banda se aclara: mas cuerpo */
    --m-sobre-navy-55:rgba(255,255,255,.72);    /* la banda se aclara: mas cuerpo */
    --m-sobre-navy-60:rgba(255,255,255,.76);    /* la banda se aclara: mas cuerpo */
    --m-sobre-navy-70:rgba(255,255,255,.84);    /* la banda se aclara: mas cuerpo */
    --m-sobre-navy-75:rgba(255,255,255,.88);    /* la banda se aclara: mas cuerpo */
    --m-sobre-navy-80:rgba(255,255,255,.90);    /* la banda se aclara: mas cuerpo */
    --m-sobre-navy-90:rgba(255,255,255,.96);    /* la banda se aclara: mas cuerpo */
    --m-foco-anillo:rgba(232,238,246,.20);      /* anillo al enfocar un campo */
    --m-tip-bg:rgba(232,238,246,.12);           /* fondo del icono de ayuda */
    --m-tip-bd:rgba(232,238,246,.28);           /* borde del icono de ayuda */
    --m-sev-a1-bd:rgba(202,138,4,.60);          /* #ca8a04 */
    --m-sev-a2-bd:rgba(234,88,12,.60);          /* #ea580c */
    --m-sev-a4-bd:rgba(219,39,119,.60);         /* #db2777 */
    --m-perfil-lobo-bd:rgba(255,193,7,.55);     /* #ffc107 */
    --m-perfil-aguila-bd:rgba(31,168,186,.45);  /* #bee5eb */
    --m-perfil-jaguar-bd:rgba(56,171,91,.45);   /* #c3e6cb */
    --m-perfil-halcon-bd:rgba(214,63,79,.45);   /* #f5c6cb */
    --m-perfil-buho-bd:rgba(126,84,205,.45);    /* #c8b8e8 */
    --m-indigo-bd:rgba(129,132,246,.75);        /* #6366f1 */
    --m-ambar-bd-1:rgba(252,211,77,.55);        /* #fcd34d */
    --m-ambar-bd-2:rgba(253,230,138,.55);       /* #fde68a */
    --m-ambar-bg-1:rgba(250,230,14,.16);        /* #fef9c3 */
    --m-ambar-bg-2:rgba(250,203,14,.16);        /* #FEF3C7 */
    --m-ambar-bg-3:rgba(250,203,14,.16);        /* #fef3c7 */
    --m-ambar-bg-4:rgba(244,224,20,.16);        /* #fefce8 */
    --m-ambar-bg-5:rgba(255,206,10,.16);        /* #fffbeb */
    --m-azul-bd-1:rgba(83,74,183,.55);          /* #534AB7 */
    --m-azul-bd-2:rgba(17,168,248,.42);         /* #bae6fd */
    --m-azul-bg-4:rgba(16,116,248,.16);         /* #dbeafe */
    --m-azul-bg-5:rgba(35,23,242,.16);          /* #EEEDFE */
    --m-azul-bg-6:rgba(10,67,255,.16);          /* #eef2ff */
    --m-azul-bg-7:rgba(10,117,255,.16);         /* #eff6ff */
    --m-azul-bg-8:rgba(10,157,255,.16);         /* #f0f9ff */
    --m-azul-tx-1:#9E98E1;                      /* #26215C */
    --m-azul-tx-2:#84CDF5;                      /* #075985 */
    --m-azul-tx-3:#84CDF5;                      /* #0369a1 */
    --m-azul-tx-4:#9F98E1;                      /* #3C3489 */
    --m-azul-tx-5:#8DA3EB;                      /* #1e40af */
    --m-azul-tx-6:#9C98E1;                      /* #3730a3 */
    --m-morado-bd:rgba(63,20,244,.42);          /* #ede9fe */
    --m-morado-bg-1:rgba(63,20,244,.16);        /* #ede9fe */
    --m-morado-bg-2:rgba(127,10,255,.16);       /* #f3e8ff */
    --m-morado-bg-3:rgba(51,10,255,.16);        /* #f5f3ff */
    --m-morado-bg-4:rgba(132,10,255,.16);       /* #faf5ff */
    --m-morado-tx-1:#B28EEA;                    /* #5b21b6 */
    --m-morado-tx-2:#B28EEB;                    /* #6d28d9 */
    --m-morado-tx-3:#AE85F3;                    /* #7c3aed */
    --m-naranja-bd:rgba(255,159,28,.55);        /* #FF9F1C */
    --m-naranja-bg-5:rgba(255,150,10,.16);      /* #ffedd5 */
    --m-naranja-bg-6:rgba(255,146,10,.16);      /* #fff7ed */
    --m-naranja-tx-1:#ECBA8C;                   /* #713f12 */
    --m-naranja-tx-2:#F0AE89;                   /* #78350f */
    --m-naranja-tx-3:#F4C384;                   /* #854F0B */
    --m-naranja-tx-4:#F3AF86;                   /* #92400e */
    --m-rojo-bd-1:rgba(201,48,44,.55);          /* #C9302C */
    --m-rojo-bd-2:rgba(252,165,165,.55);        /* #fca5a5 */
    --m-rojo-bg-2:rgba(246,18,18,.16);          /* #fee2e2 */
    --m-rojo-bg-3:rgba(237,27,27,.16);          /* #fef2f2 */
    --m-rojo-bg-4:rgba(255,10,27,.16);          /* #fff1f2 */
    --m-rojo-tx-1:#E69393;                      /* #7f1d1d */
    --m-rojo-tx-2:#F1A288;                      /* #9a3412 */
    --m-rojo-tx-3:#EB8E8E;                      /* #991b1b */
    --m-rojo-tx-4:#E79492;                      /* #C9302C */
    --m-verde-bd-1:rgba(14,143,92,.55);         /* #0E8F5C */
    --m-verde-bd-2:rgba(134,239,172,.55);       /* #86efac */
    --m-verde-bd-3:rgba(35,229,103,.42);        /* #bbf7d0 */
    --m-verde-bg-2:rgba(34,231,130,.16);        /* #d1fae5 */
    --m-verde-bg-3:rgba(29,235,100,.16);        /* #dcfce7 */
    --m-verde-bg-4:rgba(38,226,96,.16);         /* #f0fdf4 */
    --m-verde-tx-1:#94E5B4;                     /* #14532d */
    --m-verde-tx-2:#84F5D2;                     /* #059669 */
    --m-verde-tx-3:#86F3C8;                     /* #0E8F5C */
  }
}:root[data-tema="oscuro"] #cot-zona,:root[data-tema="oscuro"] #cot-oper-zona{
  --m-azul-bd-3:rgba(13,119,251,.42);         /* #bfdbfe */
  --m-morado-tx-5:#C090E9;                    /* #6b21a8 */
  --m-morado-bd-1:rgba(56,16,249,.42);        /* #ddd6fe */
  --m-rojo-tx-6:#EEA48B;                      /* #7c2d12 */
  --c-rojo-bg:rgba(255,77,79,.14);    --c-rojo-bd:rgba(255,77,79,.42);   --c-rojo-tx:#FF9E9C;
  --c-verde-bg:rgba(22,196,127,.14);  --c-verde-bd:rgba(22,196,127,.45); --c-verde-tx:#5FE3AC;
  --c-ambar-bg:rgba(255,159,28,.16);  --c-ambar-bd:rgba(255,159,28,.45); --c-ambar-tx:#FFD666;
  --c-azul-bg:rgba(59,130,246,.16);   --c-azul-bd:rgba(59,130,246,.45);  --c-azul-tx:#9EC5FE;
  --c-morado-bg:rgba(139,92,246,.18); --c-morado-bd:rgba(139,92,246,.45); --c-morado-tx:#C9B6FD;
  --c-rosa-bg:rgba(236,72,153,.16);   --c-rosa-tx:#F9A8D4;
  --c-sel-bg:var(--navy-light);
  --c-sel-tx:var(--text);
  --m-sobre-navy-30:rgba(255,255,255,.52);    /* la banda se aclara: mas cuerpo */
  --m-sobre-navy-40:rgba(255,255,255,.60);    /* la banda se aclara: mas cuerpo */
  --m-sobre-navy-45:rgba(255,255,255,.64);    /* la banda se aclara: mas cuerpo */
  --m-sobre-navy-50:rgba(255,255,255,.68);    /* la banda se aclara: mas cuerpo */
  --m-sobre-navy-55:rgba(255,255,255,.72);    /* la banda se aclara: mas cuerpo */
  --m-sobre-navy-60:rgba(255,255,255,.76);    /* la banda se aclara: mas cuerpo */
  --m-sobre-navy-70:rgba(255,255,255,.84);    /* la banda se aclara: mas cuerpo */
  --m-sobre-navy-75:rgba(255,255,255,.88);    /* la banda se aclara: mas cuerpo */
  --m-sobre-navy-80:rgba(255,255,255,.90);    /* la banda se aclara: mas cuerpo */
  --m-sobre-navy-90:rgba(255,255,255,.96);    /* la banda se aclara: mas cuerpo */
  --m-foco-anillo:rgba(232,238,246,.20);      /* anillo al enfocar un campo */
  --m-tip-bg:rgba(232,238,246,.12);           /* fondo del icono de ayuda */
  --m-tip-bd:rgba(232,238,246,.28);           /* borde del icono de ayuda */
  --m-sev-a1-bd:rgba(202,138,4,.60);          /* #ca8a04 */
  --m-sev-a2-bd:rgba(234,88,12,.60);          /* #ea580c */
  --m-sev-a4-bd:rgba(219,39,119,.60);         /* #db2777 */
  --m-perfil-lobo-bd:rgba(255,193,7,.55);     /* #ffc107 */
  --m-perfil-aguila-bd:rgba(31,168,186,.45);  /* #bee5eb */
  --m-perfil-jaguar-bd:rgba(56,171,91,.45);   /* #c3e6cb */
  --m-perfil-halcon-bd:rgba(214,63,79,.45);   /* #f5c6cb */
  --m-perfil-buho-bd:rgba(126,84,205,.45);    /* #c8b8e8 */
  --m-indigo-bd:rgba(129,132,246,.75);        /* #6366f1 */
  --m-ambar-bd-1:rgba(252,211,77,.55);        /* #fcd34d */
  --m-ambar-bd-2:rgba(253,230,138,.55);       /* #fde68a */
  --m-ambar-bg-1:rgba(250,230,14,.16);        /* #fef9c3 */
  --m-ambar-bg-2:rgba(250,203,14,.16);        /* #FEF3C7 */
  --m-ambar-bg-3:rgba(250,203,14,.16);        /* #fef3c7 */
  --m-ambar-bg-4:rgba(244,224,20,.16);        /* #fefce8 */
  --m-ambar-bg-5:rgba(255,206,10,.16);        /* #fffbeb */
  --m-azul-bd-1:rgba(83,74,183,.55);          /* #534AB7 */
  --m-azul-bd-2:rgba(17,168,248,.42);         /* #bae6fd */
  --m-azul-bg-4:rgba(16,116,248,.16);         /* #dbeafe */
  --m-azul-bg-5:rgba(35,23,242,.16);          /* #EEEDFE */
  --m-azul-bg-6:rgba(10,67,255,.16);          /* #eef2ff */
  --m-azul-bg-7:rgba(10,117,255,.16);         /* #eff6ff */
  --m-azul-bg-8:rgba(10,157,255,.16);         /* #f0f9ff */
  --m-azul-tx-1:#9E98E1;                      /* #26215C */
  --m-azul-tx-2:#84CDF5;                      /* #075985 */
  --m-azul-tx-3:#84CDF5;                      /* #0369a1 */
  --m-azul-tx-4:#9F98E1;                      /* #3C3489 */
  --m-azul-tx-5:#8DA3EB;                      /* #1e40af */
  --m-azul-tx-6:#9C98E1;                      /* #3730a3 */
  --m-morado-bd:rgba(63,20,244,.42);          /* #ede9fe */
  --m-morado-bg-1:rgba(63,20,244,.16);        /* #ede9fe */
  --m-morado-bg-2:rgba(127,10,255,.16);       /* #f3e8ff */
  --m-morado-bg-3:rgba(51,10,255,.16);        /* #f5f3ff */
  --m-morado-bg-4:rgba(132,10,255,.16);       /* #faf5ff */
  --m-morado-tx-1:#B28EEA;                    /* #5b21b6 */
  --m-morado-tx-2:#B28EEB;                    /* #6d28d9 */
  --m-morado-tx-3:#AE85F3;                    /* #7c3aed */
  --m-naranja-bd:rgba(255,159,28,.55);        /* #FF9F1C */
  --m-naranja-bg-5:rgba(255,150,10,.16);      /* #ffedd5 */
  --m-naranja-bg-6:rgba(255,146,10,.16);      /* #fff7ed */
  --m-naranja-tx-1:#ECBA8C;                   /* #713f12 */
  --m-naranja-tx-2:#F0AE89;                   /* #78350f */
  --m-naranja-tx-3:#F4C384;                   /* #854F0B */
  --m-naranja-tx-4:#F3AF86;                   /* #92400e */
  --m-rojo-bd-1:rgba(201,48,44,.55);          /* #C9302C */
  --m-rojo-bd-2:rgba(252,165,165,.55);        /* #fca5a5 */
  --m-rojo-bg-2:rgba(246,18,18,.16);          /* #fee2e2 */
  --m-rojo-bg-3:rgba(237,27,27,.16);          /* #fef2f2 */
  --m-rojo-bg-4:rgba(255,10,27,.16);          /* #fff1f2 */
  --m-rojo-tx-1:#E69393;                      /* #7f1d1d */
  --m-rojo-tx-2:#F1A288;                      /* #9a3412 */
  --m-rojo-tx-3:#EB8E8E;                      /* #991b1b */
  --m-rojo-tx-4:#E79492;                      /* #C9302C */
  --m-verde-bd-1:rgba(14,143,92,.55);         /* #0E8F5C */
  --m-verde-bd-2:rgba(134,239,172,.55);       /* #86efac */
  --m-verde-bd-3:rgba(35,229,103,.42);        /* #bbf7d0 */
  --m-verde-bg-2:rgba(34,231,130,.16);        /* #d1fae5 */
  --m-verde-bg-3:rgba(29,235,100,.16);        /* #dcfce7 */
  --m-verde-bg-4:rgba(38,226,96,.16);         /* #f0fdf4 */
  --m-verde-tx-1:#94E5B4;                     /* #14532d */
  --m-verde-tx-2:#84F5D2;                     /* #059669 */
  --m-verde-tx-3:#86F3C8;                     /* #0E8F5C */
}

/* ── EL RESET QUE SE HABIA PERDIDO ──
   Aqui vivia el @import de Inter del motor. Al prefijar el CSS, el
   script partio esa linea por los `;` de los pesos de la fuente y
   dejo un selector invalido; la regla siguiente —el reset— quedo
   atrapada dentro de el y el navegador la descartaba entera.

   Sin `box-sizing:border-box`, un campo con width:100% mide su ancho
   MAS su relleno y su borde, y se sale del contenedor. Eso era lo que
   deformaba los campos en movil.

   El @import no se repone: el panel ya carga Inter (400-900). */
#cot-zona,#cot-oper-zona,#cot-zona *,#cot-oper-zona *,#cot-zona *::before,#cot-oper-zona *::before,#cot-zona *::after,#cot-oper-zona *::after{box-sizing:border-box;}
/* ══════════════════════════════════════════════════════════════════
   EL RESET DEL COTIZADOR NO ENTRA AL DOCUMENTO
   ──────────────────────────────────────────────────────────────────

   No lo estaba, y la causa es esta linea. El formulario del cotizador
   arranca con un reset universal --margen y relleno a cero para todo
   lo que viva dentro de `#cot-zona`--, que es lo normal en un
   formulario. Pero desde que el DOCUMENTO se dibuja ahi dentro, ese
   reset tambien lo alcanzaba.

   Y gana: `#cot-zona *` pesa un id mas un universal (1,0,0), contra
   los dos nombres de clase de `.doc .pad` (0,2,0). O sea que las tres
   medidas de respiro del diseño aprobado --24/20 en telefono, 38/48 en
   tablet, 46/68 en escritorio, que SON la reticula-- se anulaban una
   por una.

   Medido el 9/oct en la vista previa real: `.pad` computaba `0px` con
   las tres reglas del diseño presentes en la hoja y perdiendo. El
   documento salia pegado al borde, sin un solo margen, como un bloque
   de texto corrido. En la liga del cliente nunca paso, porque alli no
   existe `#cot-zona`: de ahi que la misma pagina se viera bien en un
   lado y mal en el otro.

   `:not(.doc *)` deja el reset intacto para el formulario y lo aparta
   del documento. Se toca UNA regla en vez de reescribir las 343 del
   diseño, que ademas alimentan el visor archivado y no deben llevar
   el prefijo del panel. */
#cot-zona *:not(.doc *),#cot-oper-zona *:not(.doc *){margin:0;padding:0;}#cot-zona .topbar,#cot-oper-zona .topbar{background:var(--c-sel-bg);padding:13px 24px;position:sticky;top:0;z-index:200;display:flex;align-items:center;box-shadow:0 2px 10px rgba(4,30,66,.18);}#cot-zona .topbar img,#cot-oper-zona .topbar img{height:38px;width:auto;display:block;}
@media screen and (max-width:860px){#cot-zona .topbar,#cot-oper-zona .topbar{padding:10px 16px;}#cot-zona .topbar img,#cot-oper-zona .topbar img{height:30px;}}#cot-zona .stepper,#cot-oper-zona .stepper{background:var(--c-sel-bg);padding:0 24px 18px;display:flex;align-items:center;}#cot-zona .step,#cot-oper-zona .step{display:flex;align-items:center;gap:9px;cursor:pointer;padding:8px 14px;border-radius:6px;flex:1;justify-content:center;transition:all .2s;}#cot-zona .step-circle,#cot-oper-zona .step-circle{width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--m-sobre-navy-50);flex-shrink:0;}#cot-zona .step-label,#cot-oper-zona .step-label{font-size:11px;color:var(--m-sobre-navy-50);font-weight:500;white-space:nowrap;letter-spacing:.2px;}#cot-zona .step.done .step-circle,#cot-oper-zona .step.done .step-circle{background:rgba(255,194,7,.15);border-color:var(--yellow);color:var(--yellow);}#cot-zona .step.done .step-label,#cot-oper-zona .step.done .step-label{color:var(--m-sobre-navy-70);}#cot-zona .step.active .step-circle,#cot-oper-zona .step.active .step-circle{background:var(--yellow);border-color:var(--yellow);color:var(--navy-fijo);}#cot-zona .step.active .step-label,#cot-oper-zona .step.active .step-label{color:var(--blanco-fijo);font-weight:700;}#cot-zona .step-line,#cot-oper-zona .step-line{flex:1;height:1px;background:rgba(255,255,255,.12);max-width:40px;}#cot-zona .content,#cot-oper-zona .content{padding:24px;max-width:1080px;margin:0 auto;min-width:0;}#cot-zona .module,#cot-oper-zona .module{display:none;}#cot-zona .module.active,#cot-oper-zona .module.active{display:block;}#cot-zona .fg input,#cot-oper-zona .fg input,#cot-zona .fg select,#cot-oper-zona .fg select,#cot-zona .fg textarea,#cot-oper-zona .fg textarea{width:100%;height:40px;border:1px solid var(--c-borde);border-radius:var(--rad-sm);padding:0 14px;font-size:13px;font-family:'Inter',sans-serif;color:var(--text);background:var(--c-sup);outline:none;transition:border-color .15s,box-shadow .15s;}#cot-zona .fg textarea,#cot-oper-zona .fg textarea{height:88px;padding:11px 14px;resize:none;line-height:1.5;}#cot-zona .fg input:focus,#cot-oper-zona .fg input:focus,#cot-zona .fg select:focus,#cot-oper-zona .fg select:focus,#cot-zona .fg textarea:focus,#cot-oper-zona .fg textarea:focus{border-color:var(--text);box-shadow:0 0 0 3px var(--m-foco-anillo);}#cot-zona .fg input[readonly],#cot-oper-zona .fg input[readonly]{background:var(--c-sup2);color:var(--muted);cursor:not-allowed;}#cot-zona .phone-wrap,#cot-oper-zona .phone-wrap{display:flex;gap:6px;}#cot-zona .phone-wrap select,#cot-oper-zona .phone-wrap select{width:110px;flex-shrink:0;}#cot-zona .phone-wrap input,#cot-oper-zona .phone-wrap input{flex:1;}#cot-zona .colonia-wrap,#cot-oper-zona .colonia-wrap{display:none;}#cot-zona .tip-icon,#cot-oper-zona .tip-icon{width:16px;height:16px;border-radius:50%;background:var(--m-tip-bg);border:1px solid var(--m-tip-bd);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--text);cursor:pointer;position:relative;flex-shrink:0;user-select:none;}#cot-zona .tip-icon:hover .tip-box,#cot-oper-zona .tip-icon:hover .tip-box{display:block;}#cot-zona .tip-box,#cot-oper-zona .tip-box{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--navy-fijo);color:var(--blanco-fijo);font-size:11px;font-weight:400;line-height:1.5;padding:10px 13px;border-radius:6px;width:280px;z-index:400;box-shadow:0 4px 20px rgba(0,0,0,.2);pointer-events:none;font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0;}#cot-zona .tip-box::after,#cot-oper-zona .tip-box::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--navy-fijo);}#cot-zona .score-row,#cot-oper-zona .score-row{display:flex;gap:6px;align-items:center;margin-top:6px;}#cot-zona .sb,#cot-oper-zona .sb{width:42px;height:38px;border:1px solid var(--c-borde);background:var(--c-sup);border-radius:var(--rad-sm);font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;}#cot-zona .sb:hover,#cot-oper-zona .sb:hover{border-color:var(--text);color:var(--text);}#cot-zona .sb.a0,#cot-oper-zona .sb.a0{background:var(--c-verde-bg);border-color:var(--c-verde-tx);color:var(--c-verde-tx);}#cot-zona .sb.a1,#cot-oper-zona .sb.a1{background:var(--c-ambar-bg);border-color:var(--m-sev-a1-bd);color:var(--c-ambar-tx);}#cot-zona .sb.a2,#cot-oper-zona .sb.a2{background:var(--c-ambar-bg);border-color:var(--m-sev-a2-bd);color:var(--c-ambar-tx);}#cot-zona .sb.a3,#cot-oper-zona .sb.a3{background:var(--c-rojo-bg);border-color:var(--c-rojo-tx);color:var(--c-rojo-tx);}#cot-zona .sb.a4,#cot-oper-zona .sb.a4{background:var(--c-rosa-bg);border-color:var(--m-sev-a4-bd);color:var(--c-rosa-tx);}#cot-zona .score-lbl,#cot-oper-zona .score-lbl{font-size:11px;color:var(--text);margin-left:6px;flex:1;font-weight:500;}#cot-zona .risk-strip,#cot-oper-zona .risk-strip{background:var(--c-sel-bg);border-radius:var(--rad);padding:18px 22px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}#cot-zona .rs-lbl,#cot-oper-zona .rs-lbl{font-size:10px;letter-spacing:1px;color:var(--m-sobre-navy-55);text-transform:uppercase;margin-bottom:4px;font-weight:600;}#cot-zona .rs-val,#cot-oper-zona .rs-val{font-size:24px;font-weight:700;color:var(--yellow);}#cot-zona .rs-sub,#cot-oper-zona .rs-sub{font-size:11px;color:var(--m-sobre-navy-55);margin-top:3px;font-weight:400;}#cot-zona .risk-badge,#cot-oper-zona .risk-badge{padding:6px 16px;border-radius:14px;font-size:11px;font-weight:700;letter-spacing:.3px;}#cot-zona .risk-bar-track,#cot-oper-zona .risk-bar-track{background:rgba(255,255,255,.1);border-radius:4px;height:5px;overflow:hidden;margin-top:8px;}#cot-zona .risk-bar-fill,#cot-oper-zona .risk-bar-fill{height:100%;border-radius:4px;transition:width .5s ease;}#cot-zona .metrics,#cot-oper-zona .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px;}#cot-zona .metric,#cot-oper-zona .metric{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--rad-sm);padding:14px 16px;}#cot-zona .metric .ml,#cot-oper-zona .metric .ml{font-size:10px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:5px;font-weight:600;}#cot-zona .metric .mv,#cot-oper-zona .metric .mv{font-size:22px;font-weight:700;color:var(--text);line-height:1.1;}#cot-zona .metric .mu,#cot-oper-zona .metric .mu{font-size:11px;color:var(--muted);margin-top:3px;font-weight:400;}#cot-zona .metric.hi,#cot-oper-zona .metric.hi{background:var(--c-sel-bg);border-color:var(--text);}#cot-zona .metric.hi .ml,#cot-oper-zona .metric.hi .ml{color:var(--m-sobre-navy-60);}#cot-zona .metric.hi .mv,#cot-oper-zona .metric.hi .mv{color:var(--yellow);}#cot-zona .metric.hi .mu,#cot-oper-zona .metric.hi .mu{color:var(--m-sobre-navy-50);}#cot-zona .metric.gso,#cot-oper-zona .metric.gso{background:var(--warn-bg);border-color:var(--warn-border);}#cot-zona .metric.gso .mv,#cot-oper-zona .metric.gso .mv{color:var(--c-ambar-tx);}#cot-zona .tipo-grid,#cot-oper-zona .tipo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px;}#cot-zona .tipo-opt,#cot-oper-zona .tipo-opt{border:1px solid var(--c-borde);border-radius:var(--rad-sm);padding:12px 12px;cursor:pointer;transition:all .15s;background:var(--c-sup);text-align:center;}#cot-zona .tipo-opt:hover,#cot-oper-zona .tipo-opt:hover{border-color:var(--text);}#cot-zona .tipo-opt.sel,#cot-oper-zona .tipo-opt.sel{border-color:var(--text);background:var(--c-sel-bg);}#cot-zona .tipo-opt.sel .tipo-opt-name,#cot-oper-zona .tipo-opt.sel .tipo-opt-name{color:var(--blanco-fijo);}#cot-zona .tipo-opt.sel .tipo-opt-desc,#cot-oper-zona .tipo-opt.sel .tipo-opt-desc{color:var(--m-sobre-navy-70);}#cot-zona .tipo-opt-name,#cot-oper-zona .tipo-opt-name{font-size:13px;font-weight:500;color:var(--text);}#cot-zona .tipo-opt-desc,#cot-oper-zona .tipo-opt-desc{font-size:11px;color:var(--muted);margin-top:3px;font-weight:400;}#cot-zona .chip-grid,#cot-oper-zona .chip-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}#cot-zona .chip,#cot-oper-zona .chip{border:1px solid var(--c-borde);border-radius:14px;padding:6px 14px;cursor:pointer;transition:all .15s;background:var(--c-sup);font-size:12px;font-weight:500;color:var(--text);}#cot-zona .chip:hover,#cot-oper-zona .chip:hover{border-color:var(--text);color:var(--text);}#cot-zona .chip.sel,#cot-oper-zona .chip.sel{border-color:var(--text);background:var(--c-sel-bg);color:var(--blanco-fijo);}#cot-zona .consultoria-opts,#cot-oper-zona .consultoria-opts{display:none;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--rad-sm);padding:14px;margin-top:10px;}#cot-zona .consultoria-opts.show,#cot-oper-zona .consultoria-opts.show{display:block;}#cot-zona .jornada-grid,#cot-oper-zona .jornada-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}#cot-zona .jopt,#cot-oper-zona .jopt{border:1px solid var(--c-borde);border-radius:var(--rad-sm);padding:12px;cursor:pointer;transition:all .15s;background:var(--c-sup);text-align:center;}#cot-zona .jopt:hover,#cot-oper-zona .jopt:hover{border-color:var(--text);}#cot-zona .jopt.sel,#cot-oper-zona .jopt.sel{border-color:var(--text);background:var(--c-sel-bg);}#cot-zona .jopt.sel .jopt-name,#cot-oper-zona .jopt.sel .jopt-name,#cot-zona .jopt.sel .jopt-sub,#cot-oper-zona .jopt.sel .jopt-sub{color:var(--blanco-fijo);}#cot-zona .jopt.sel .jopt-desc,#cot-oper-zona .jopt.sel .jopt-desc{color:var(--m-sobre-navy-75);}#cot-zona .jopt-name,#cot-oper-zona .jopt-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px;}#cot-zona .jopt-desc,#cot-oper-zona .jopt-desc{font-size:11px;color:var(--muted);font-weight:400;}#cot-zona .jopt-sub,#cot-oper-zona .jopt-sub{font-size:11px;font-weight:600;color:var(--text);margin-top:4px;}#cot-zona .jopt-tag,#cot-oper-zona .jopt-tag{font-size:9px;padding:2px 7px;border-radius:3px;margin-top:6px;display:inline-block;font-weight:600;letter-spacing:.3px;}#cot-zona .tag-nl,#cot-oper-zona .tag-nl{background:var(--c-azul-bg);color:var(--c-azul-tx);}#cot-zona .tag-st,#cot-oper-zona .tag-st{background:var(--c-rosa-bg);color:var(--c-rosa-tx);}#cot-zona .tag-ev,#cot-oper-zona .tag-ev{background:var(--c-morado-bg);color:var(--c-morado-tx);}#cot-zona .jopt.sel .jopt-tag,#cot-oper-zona .jopt.sel .jopt-tag{background:rgba(255,255,255,.2);color:var(--blanco-fijo);}#cot-zona .pos-grid,#cot-oper-zona .pos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:14px;}#cot-zona .popt,#cot-oper-zona .popt{border:1px solid var(--c-borde);border-radius:var(--rad-sm);padding:11px 13px;cursor:pointer;transition:all .15s;background:var(--c-sup);}#cot-zona .popt:hover,#cot-oper-zona .popt:hover{border-color:var(--text);}#cot-zona .popt.sel,#cot-oper-zona .popt.sel{border-color:var(--text);background:var(--c-sel-bg);}#cot-zona .popt.sel .popt-name,#cot-oper-zona .popt.sel .popt-name{color:var(--blanco-fijo);}#cot-zona .popt.sel .popt-desc,#cot-oper-zona .popt.sel .popt-desc{color:var(--m-sobre-navy-75);}#cot-zona .popt-name,#cot-oper-zona .popt-name{font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px;}#cot-zona .popt-desc,#cot-oper-zona .popt-desc{font-size:10px;color:var(--muted);font-weight:400;}#cot-zona .perfil-badge,#cot-oper-zona .perfil-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:700;margin-top:8px;}#cot-zona .pb-lobo,#cot-oper-zona .pb-lobo{background:var(--c-ambar-bg);color:var(--c-ambar-tx);border:1px solid var(--m-perfil-lobo-bd);}#cot-zona .pb-aguila,#cot-oper-zona .pb-aguila{background:var(--c-azul-bg);color:var(--c-azul-tx);border:1px solid var(--m-perfil-aguila-bd);}#cot-zona .pb-jaguar,#cot-oper-zona .pb-jaguar{background:var(--c-verde-bg);color:var(--c-verde-tx);border:1px solid var(--m-perfil-jaguar-bd);}#cot-zona .pb-halcon,#cot-oper-zona .pb-halcon{background:var(--c-rojo-bg);color:var(--c-rojo-tx);border:1px solid var(--m-perfil-halcon-bd);}#cot-zona .pb-buho,#cot-oper-zona .pb-buho{background:var(--c-morado-bg);color:var(--c-morado-tx);border:1px solid var(--m-perfil-buho-bd);}#cot-zona .tbl,#cot-oper-zona .tbl{width:100%;border-collapse:collapse;font-size:11px;}#cot-zona .tbl th,#cot-oper-zona .tbl th{background:var(--surface);padding:11px 14px;text-align:left;font-weight:600;color:var(--label);font-size:10px;border-bottom:0.5px solid var(--border);text-transform:uppercase;letter-spacing:.5px;}#cot-zona .tbl td,#cot-oper-zona .tbl td{padding:13px 14px;border-bottom:0.5px solid var(--border-soft);vertical-align:middle;color:var(--text);}#cot-zona .tbl tr:last-child td,#cot-oper-zona .tbl tr:last-child td{border-bottom:none;}#cot-zona .tbl tr:hover td,#cot-oper-zona .tbl tr:hover td{background:var(--surface);}#cot-zona .pill,#cot-oper-zona .pill{display:inline-block;font-size:10px;padding:3px 9px;border-radius:3px;font-weight:600;letter-spacing:.3px;}#cot-zona .p-fpc,#cot-oper-zona .p-fpc{background:var(--c-ambar-bg);color:var(--c-ambar-tx);}#cot-zona .p-fpr,#cot-oper-zona .p-fpr{background:var(--c-verde-bg);color:var(--c-verde-tx);}#cot-zona .p-jt,#cot-oper-zona .p-jt{background:var(--c-ambar-bg);color:var(--c-ambar-tx);}#cot-zona .p-js,#cot-oper-zona .p-js{background:var(--c-verde-bg);color:var(--c-verde-tx);}#cot-zona .p-dom,#cot-oper-zona .p-dom{background:var(--c-morado-bg);color:var(--c-morado-tx);}#cot-zona .p-na,#cot-oper-zona .p-na{background:var(--c-sup3);color:var(--muted);}#cot-zona .p-veh,#cot-oper-zona .p-veh{background:var(--c-morado-bg);color:var(--c-morado-tx);font-weight:700;}#cot-zona .sku-chip,#cot-oper-zona .sku-chip{font-size:10px;color:var(--muted);background:var(--c-sup3);padding:2px 7px;border-radius:3px;font-weight:500;}#cot-zona .apost-card,#cot-oper-zona .apost-card{background:var(--c-sup);border:0.5px solid var(--border);border-radius:var(--rad);padding:0;margin-bottom:14px;overflow:hidden;}#cot-zona .apost-hdr,#cot-oper-zona .apost-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--surface);border-bottom:0.5px solid var(--border);}#cot-zona .apost-num,#cot-oper-zona .apost-num{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:10px;}#cot-zona .apost-del,#cot-oper-zona .apost-del{background:transparent;border:none;color:var(--c-rojo-tx);cursor:pointer;font-size:12px;font-weight:500;display:flex;align-items:center;gap:4px;}#cot-zona .apost-del:hover,#cot-oper-zona .apost-del:hover{color:var(--c-rojo-tx);}#cot-zona .apost-card .g2,#cot-oper-zona .apost-card .g2,#cot-zona .apost-card .slbl,#cot-oper-zona .apost-card .slbl,#cot-zona .apost-card .pos-grid,#cot-oper-zona .apost-card .pos-grid,#cot-zona .apost-card .jornada-grid,#cot-oper-zona .apost-card .jornada-grid,#cot-zona .apost-card .fg,#cot-oper-zona .apost-card .fg{padding-left:18px;padding-right:18px;}#cot-zona .apost-card > .g2:first-of-type,#cot-oper-zona .apost-card > .g2:first-of-type{padding-top:18px;}#cot-zona .phase-grid,#cot-oper-zona .phase-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;}#cot-zona .phase-card,#cot-oper-zona .phase-card{border-radius:var(--rad);border:0.5px solid var(--border);overflow:hidden;background:var(--c-sup);}#cot-zona .phase-card.ideal,#cot-oper-zona .phase-card.ideal{border-color:var(--text);}#cot-zona .phase-card.f1,#cot-oper-zona .phase-card.f1{border-color:var(--yellow);}#cot-zona .phase-hd,#cot-oper-zona .phase-hd{padding:14px 18px;}#cot-zona .phase-card.ideal .phase-hd,#cot-oper-zona .phase-card.ideal .phase-hd{background:var(--c-sel-bg);}#cot-zona .phase-card.f1 .phase-hd,#cot-oper-zona .phase-card.f1 .phase-hd{background:var(--yellow);}#cot-zona .phase-htxt,#cot-oper-zona .phase-htxt{font-size:13px;font-weight:600;line-height:1.3;}#cot-zona .phase-card.ideal .phase-htxt,#cot-oper-zona .phase-card.ideal .phase-htxt{color:var(--yellow);}#cot-zona .phase-card.f1 .phase-htxt,#cot-oper-zona .phase-card.f1 .phase-htxt{color:var(--navy-fijo);}#cot-zona .phase-body,#cot-oper-zona .phase-body{padding:16px 18px;}#cot-zona .phase-total,#cot-oper-zona .phase-total{font-size:26px;font-weight:700;color:var(--text);margin-bottom:2px;letter-spacing:-.5px;}#cot-zona .phase-sub,#cot-oper-zona .phase-sub{font-size:11px;color:var(--muted);margin-bottom:14px;font-weight:400;}#cot-zona .prow,#cot-oper-zona .prow{display:flex;justify-content:space-between;margin-bottom:6px;padding:3px 0;}#cot-zona .prow span:first-child,#cot-oper-zona .prow span:first-child{font-size:12px;color:var(--muted);font-weight:400;}#cot-zona .prow span:last-child,#cot-oper-zona .prow span:last-child{font-size:12px;font-weight:600;color:var(--text);}#cot-zona .trow,#cot-oper-zona .trow{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--rad-sm);border:0.5px solid var(--border);background:var(--c-sup);cursor:pointer;margin-bottom:6px;transition:all .15s;}#cot-zona .trow.on,#cot-oper-zona .trow.on{background:var(--c-azul-bg);border-color:var(--c-azul-bd);}#cot-zona .tck,#cot-oper-zona .tck{width:16px;height:16px;border:1.5px solid var(--c-borde);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}#cot-zona .trow.on .tck,#cot-oper-zona .trow.on .tck{background:var(--c-sel-bg);border-color:var(--text);}#cot-zona .tck-dot,#cot-oper-zona .tck-dot{width:8px;height:8px;background:var(--yellow);border-radius:1px;display:none;}#cot-zona .trow.on .tck-dot,#cot-oper-zona .trow.on .tck-dot{display:block;}#cot-zona .trow-lbl,#cot-oper-zona .trow-lbl{font-size:12px;color:var(--text);flex:1;font-weight:500;}#cot-zona .trow-badge,#cot-oper-zona .trow-badge{font-size:11px;font-weight:600;color:var(--muted);}#cot-zona .trow.on .trow-badge,#cot-oper-zona .trow.on .trow-badge{color:var(--text);}#cot-zona .crit-grid,#cot-oper-zona .crit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}#cot-zona .crit-card,#cot-oper-zona .crit-card{border:0.5px solid var(--border);border-radius:var(--rad-sm);padding:14px 16px;background:var(--c-sup);cursor:pointer;transition:all .15s;position:relative;}#cot-zona .crit-card.vuln,#cot-oper-zona .crit-card.vuln{border-color:var(--c-rojo-tx);background:var(--c-rojo-bg);}#cot-zona .crit-card.safe,#cot-oper-zona .crit-card.safe{border-color:var(--c-verde-tx);background:var(--c-verde-bg);}#cot-zona .crit-num,#cot-oper-zona .crit-num{font-size:22px;font-weight:700;color:var(--text);opacity:.1;position:absolute;top:10px;right:14px;}#cot-zona .crit-title,#cot-oper-zona .crit-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:5px;}#cot-zona .crit-card.vuln .crit-title,#cot-oper-zona .crit-card.vuln .crit-title{color:var(--c-rojo-tx);}#cot-zona .crit-body,#cot-oper-zona .crit-body{font-size:11px;color:var(--muted);line-height:1.5;font-weight:400;}#cot-zona .crit-fail,#cot-oper-zona .crit-fail{font-size:10px;color:var(--c-rojo-tx);font-weight:600;margin-top:8px;background:var(--c-rojo-bg);padding:4px 9px;border-radius:3px;display:inline-block;}#cot-zona .crit-card.vuln .crit-fail,#cot-oper-zona .crit-card.vuln .crit-fail{background:var(--c-rojo-tx);color:var(--blanco-fijo);}#cot-zona .crit-status,#cot-oper-zona .crit-status{font-size:10px;font-weight:600;margin-top:6px;display:block;}#cot-zona .contract-bar,#cot-oper-zona .contract-bar{background:var(--info-bg);border:0.5px solid var(--info-border);border-radius:var(--rad-sm);padding:14px 18px;margin-bottom:18px;display:none;flex-wrap:wrap;gap:18px;align-items:center;}#cot-zona .contract-bar.show,#cot-oper-zona .contract-bar.show{display:flex;}#cot-zona .cb-lbl,#cot-oper-zona .cb-lbl{font-size:10px;font-weight:600;color:var(--info-text);letter-spacing:.5px;text-transform:uppercase;margin-bottom:3px;}#cot-zona .cb-val,#cot-oper-zona .cb-val{font-size:14px;font-weight:700;color:var(--text);}#cot-zona .contract-cal,#cot-oper-zona .contract-cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:14px;}#cot-zona .month-card,#cot-oper-zona .month-card{border-radius:10px;border:1.5px solid var(--border);background:var(--c-sup);overflow:hidden;cursor:pointer;transition:all .15s;}#cot-zona .month-card:hover,#cot-oper-zona .month-card:hover{border-color:var(--text);}#cot-zona .month-card.has-gso,#cot-oper-zona .month-card.has-gso{border-color:var(--c-ambar-bd);background:var(--c-ambar-bg);}#cot-zona .month-card.has-crit,#cot-oper-zona .month-card.has-crit{border-color:var(--c-rojo-bd);background:var(--c-rojo-bg);}#cot-zona .month-hd,#cot-oper-zona .month-hd{padding:6px 10px;display:flex;align-items:center;justify-content:space-between;}#cot-zona .month-hd.norm,#cot-oper-zona .month-hd.norm{background:var(--c-sel-bg);}#cot-zona .month-hd.gso-hd,#cot-oper-zona .month-hd.gso-hd{background:var(--c-ambar-tx);}#cot-zona .month-hd.crit-hd,#cot-oper-zona .month-hd.crit-hd{background:var(--c-rojo-tx);}#cot-zona .month-hd span,#cot-oper-zona .month-hd span{font-size:10px;font-weight:700;color:var(--blanco-fijo);}#cot-zona .month-body,#cot-oper-zona .month-body{padding:8px 10px;}#cot-zona .month-day,#cot-oper-zona .month-day{display:inline-block;font-size:9px;padding:1px 5px;border-radius:4px;margin:1px;font-weight:700;}#cot-zona .mday-gso,#cot-oper-zona .mday-gso{background:var(--c-ambar-bg);color:var(--c-ambar-tx);}#cot-zona .mday-crit,#cot-oper-zona .mday-crit{background:var(--c-rojo-bg);color:var(--c-rojo-tx);}#cot-zona .taps-block,#cot-oper-zona .taps-block{border:1.5px solid var(--border);border-radius:8px;padding:10px;text-align:center;background:var(--c-sup);transition:all .15s;}#cot-zona .taps-block.active,#cot-oper-zona .taps-block.active{border-color:var(--c-rojo-tx);background:var(--c-rojo-bg);}#cot-zona .desc-toggle,#cot-oper-zona .desc-toggle{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--c-sup2);border:1.5px solid var(--border);border-radius:8px;cursor:pointer;margin-bottom:8px;}#cot-zona .desc-toggle .dt-lbl,#cot-oper-zona .desc-toggle .dt-lbl{font-size:12px;font-weight:700;color:var(--text);}#cot-zona .desc-box,#cot-oper-zona .desc-box{display:none;background:var(--c-verde-bg);border:1.5px solid var(--m-verde-bd-2);border-radius:10px;padding:14px 16px;margin-bottom:12px;}#cot-zona .desc-box.show,#cot-oper-zona .desc-box.show{display:block;}#cot-zona .info-tabs,#cot-oper-zona .info-tabs{display:flex;gap:0;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:14px;}#cot-zona .info-tab,#cot-oper-zona .info-tab{flex:1;padding:8px 4px;text-align:center;font-size:9px;font-weight:700;color:var(--muted);background:var(--c-sup2);cursor:pointer;border-right:1px solid var(--border);transition:all .15s;text-transform:uppercase;}#cot-zona .info-tab:last-child,#cot-oper-zona .info-tab:last-child{border-right:none;}#cot-zona .info-tab.on,#cot-oper-zona .info-tab.on{background:var(--c-sel-bg);color:var(--yellow);}#cot-zona .info-panel,#cot-oper-zona .info-panel{display:none;}#cot-zona .info-panel.on,#cot-oper-zona .info-panel.on{display:block;}#cot-zona .resumen-block,#cot-oper-zona .resumen-block{background:var(--c-sel-bg);border-radius:var(--rad);padding:20px;margin-bottom:16px;}#cot-zona .resumen-title,#cot-oper-zona .resumen-title{font-size:14px;font-weight:900;color:var(--yellow);margin-bottom:16px;letter-spacing:.5px;}#cot-zona .rrow,#cot-oper-zona .rrow{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);}#cot-zona .rrow-lbl,#cot-oper-zona .rrow-lbl{font-size:11px;color:var(--m-sobre-navy-60);font-weight:500;}#cot-zona .rrow-val,#cot-oper-zona .rrow-val{font-size:12px;font-weight:700;color:var(--blanco-fijo);text-align:right;}#cot-zona .rrow-val.gold,#cot-oper-zona .rrow-val.gold{color:var(--yellow);}#cot-zona .rtotal,#cot-oper-zona .rtotal{border-top:2px solid var(--yellow);margin-top:12px;padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;}#cot-zona .rtotal-lbl,#cot-oper-zona .rtotal-lbl{font-size:13px;color:var(--m-sobre-navy-70);font-weight:700;}#cot-zona .rtotal-val,#cot-oper-zona .rtotal-val{font-size:32px;font-weight:900;color:var(--yellow);}#cot-zona .btn-primary,#cot-oper-zona .btn-primary{height:44px;background:var(--yellow);border:none;border-radius:var(--rad-sm);font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:var(--navy-fijo);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 24px;letter-spacing:.8px;text-transform:uppercase;}#cot-zona .btn-primary:hover,#cot-oper-zona .btn-primary:hover{background:var(--m-amar-hover);}#cot-zona .btn-sec,#cot-oper-zona .btn-sec{height:44px;background:transparent;border:1px solid var(--text);border-radius:var(--rad-sm);font-size:12px;font-weight:600;color:var(--text);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;padding:0 20px;letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:6px;}#cot-zona .btn-sec:hover,#cot-oper-zona .btn-sec:hover{background:var(--c-sel-bg);color:var(--blanco-fijo);}#cot-zona .btn-add,#cot-oper-zona .btn-add{height:38px;background:var(--c-sup);border:1px dashed var(--c-borde);border-radius:var(--rad-sm);font-size:12px;color:var(--muted);cursor:pointer;width:100%;margin-bottom:14px;transition:all .15s;font-family:'Inter',sans-serif;font-weight:500;display:flex;align-items:center;justify-content:center;gap:6px;}#cot-zona .btn-add:hover,#cot-oper-zona .btn-add:hover{border-color:var(--text);color:var(--text);border-style:solid;}#cot-zona .btn-row,#cot-oper-zona .btn-row{display:flex;gap:12px;margin-top:8px;}#cot-zona .btn-row .btn-primary,#cot-oper-zona .btn-row .btn-primary{flex:1;}#cot-zona .btn-row .btn-sec,#cot-oper-zona .btn-row .btn-sec{flex:1;}#cot-zona .presencial-note,#cot-oper-zona .presencial-note{background:var(--info-bg);border:0.5px solid var(--info-border);border-radius:var(--rad-sm);padding:12px 16px;margin-bottom:16px;display:flex;align-items:flex-start;gap:10px;}#cot-zona .presencial-note-txt,#cot-oper-zona .presencial-note-txt{font-size:12px;color:var(--info-text);font-weight:500;line-height:1.5;}#cot-zona .ft,#cot-oper-zona .ft{text-align:center;font-size:10px;color:var(--text-2);letter-spacing:.5px;margin-top:32px;padding-bottom:28px;font-weight:400;}
@media print{#cot-zona #resumen-wrap,#cot-oper-zona #resumen-wrap{display:block!important;margin:0!important;padding:0!important;}#cot-zona .btn-row,#cot-oper-zona .btn-row{display:none!important;}#cot-zona .btn-primary,#cot-oper-zona .btn-primary{display:none!important;}#cot-zona .btn-sec,#cot-oper-zona .btn-sec{display:none!important;}#cot-zona .content,#cot-oper-zona .content{padding:0!important;max-width:100%!important;margin:0!important;}#cot-zona .pdf-section,#cot-oper-zona .pdf-section{page-break-inside:avoid;margin-bottom:10px!important;}#cot-zona .resumen-block,#cot-oper-zona .resumen-block{-webkit-print-color-adjust:exact;print-color-adjust:exact;border-radius:6px!important;}#cot-zona #pdf-header,#cot-oper-zona #pdf-header{display:flex!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;margin-bottom:16px!important;}#cot-zona #pdf-footer,#cot-oper-zona #pdf-footer{display:flex!important;}#cot-zona #firma-block,#cot-oper-zona #firma-block{display:block!important;}#cot-zona table,#cot-oper-zona table{width:100%!important;font-size:10px!important;}#cot-zona th,#cot-oper-zona th,#cot-zona td,#cot-oper-zona td{padding:5px 7px!important;}#cot-zona #resumen-wrap td,#cot-oper-zona #resumen-wrap td,#cot-zona #resumen-wrap th,#cot-oper-zona #resumen-wrap th{font-size:11px!important;}#cot-zona #resumen-wrap .pdf-field-label,#cot-oper-zona #resumen-wrap .pdf-field-label{font-size:10px!important;}#cot-zona #resumen-wrap .pdf-field-value,#cot-oper-zona #resumen-wrap .pdf-field-value{font-size:13px!important;}#cot-zona #resumen-content .pdf-section-title,#cot-oper-zona #resumen-content .pdf-section-title,#cot-zona #resumen-content-2 .pdf-section-title,#cot-oper-zona #resumen-content-2 .pdf-section-title{font-size:14px!important;}#cot-zona #resumen-content .pdf-note,#cot-oper-zona #resumen-content .pdf-note,#cot-zona #resumen-content-2 .pdf-note,#cot-oper-zona #resumen-content-2 .pdf-note{font-size:11px!important;}#cot-zona #resumen-content [style*="font-size:9px"],#cot-oper-zona #resumen-content [style*="font-size:9px"],#cot-zona #resumen-content [style*="font-size:10px"],#cot-oper-zona #resumen-content [style*="font-size:10px"],#cot-zona #resumen-content-2 [style*="font-size:9px"],#cot-oper-zona #resumen-content-2 [style*="font-size:9px"],#cot-zona #resumen-content-2 [style*="font-size:10px"],#cot-oper-zona #resumen-content-2 [style*="font-size:10px"],#cot-zona #plan-pagos-content [style*="font-size:9px"],#cot-oper-zona #plan-pagos-content [style*="font-size:9px"],#cot-zona #plan-pagos-content [style*="font-size:10px"],#cot-oper-zona #plan-pagos-content [style*="font-size:10px"]{font-size:11px!important;}#cot-zona @page,#cot-oper-zona @page{size:Letter;margin:12mm 12mm 15mm 12mm;}}#cot-zona #pdf-header,#cot-oper-zona #pdf-header{display:none;}#cot-zona #pdf-footer,#cot-oper-zona #pdf-footer{display:none;}#cot-zona #firma-block,#cot-oper-zona #firma-block{display:none;}
@media(max-width:640px){#cot-zona .phase-grid,#cot-oper-zona .phase-grid,#cot-zona .jornada-grid,#cot-oper-zona .jornada-grid,#cot-zona .crit-grid,#cot-oper-zona .crit-grid,#cot-zona .tipo-grid,#cot-oper-zona .tipo-grid,#cot-zona .pos-grid,#cot-oper-zona .pos-grid{grid-template-columns:1fr!important;}}/* ── EL DOCUMENTO NUEVO NO LLEVA MARCO ──

   Este bloque viste a `#resumen-wrap` como la tarjeta del documento
   VIEJO: fondo de la superficie del panel, borde, sombra, esquinas
   redondeadas, 1036 px y 24 px de relleno. Y lo hace con DOS ids,
   asi que le gana a cualquier `.doc` del diseño aprobado por mucho
   que la hoja diga otra cosa --la misma leccion de
   [[un-estilo-en-linea-pierde-contra-important]], pero por
   especificidad--.

   Medido el 9/oct en la vista previa real: el documento salia con
   fondo #132540 --el oscuro del panel-- y texto navy encima, casi
   ilegible, aunque su propia paleta decia `--sup:#fff`.

   No se borra, porque la cotizacion operativa y las propuestas
   viejas siguen usando el documento de antes y ese SI es una
   tarjeta. Se acota: cuando `#resumen-wrap` es `.doc` --o sea el
   diseño aprobado-- este traje no aplica y manda su hoja. */
#cot-zona #resumen-wrap:not(.doc),#cot-oper-zona #resumen-wrap:not(.doc){
  width:100%;
  max-width:1036px;
  margin:20px auto 0;
  box-sizing:border-box;
  overflow:hidden;
  background:var(--c-sup);
  border:0.5px solid var(--border);
  border-radius:var(--rad);
  box-shadow:var(--shadow-sm);
  padding:24px 22px;
  min-width:0;
}#cot-zona #resumen-wrap:not(.doc) *,#cot-oper-zona #resumen-wrap:not(.doc) *{
  max-width:100%;
  box-sizing:border-box;
}#cot-zona #resumen-wrap > *,#cot-oper-zona #resumen-wrap > *,#cot-zona #resumen-wrap .card,#cot-oper-zona #resumen-wrap .card,#cot-zona #resumen-wrap .pdf-section,#cot-oper-zona #resumen-wrap .pdf-section{
  min-width:0;
}#cot-zona #resumen-wrap .card-body,#cot-oper-zona #resumen-wrap .card-body,#cot-zona #resumen-wrap #master-staffing-content,#cot-oper-zona #resumen-wrap #master-staffing-content,#cot-zona #resumen-wrap #resumen-content,#cot-oper-zona #resumen-wrap #resumen-content,#cot-zona #resumen-wrap #resumen-content-2,#cot-oper-zona #resumen-wrap #resumen-content-2,#cot-zona #resumen-wrap:not(.doc) #plan-pagos-content,#cot-oper-zona #resumen-wrap:not(.doc) #plan-pagos-content{
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
  min-width:0;
}#cot-zona #resumen-wrap table,#cot-oper-zona #resumen-wrap table{
  max-width:100%;
}
@media print{#cot-zona #resumen-wrap,#cot-oper-zona #resumen-wrap{overflow:visible!important;background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;margin:0!important;max-width:100%!important;}#cot-zona #resumen-wrap *,#cot-oper-zona #resumen-wrap *{max-width:none!important;}#cot-zona #resumen-wrap .card-body,#cot-oper-zona #resumen-wrap .card-body,#cot-zona #resumen-wrap #master-staffing-content,#cot-oper-zona #resumen-wrap #master-staffing-content,#cot-zona #resumen-wrap #resumen-content,#cot-oper-zona #resumen-wrap #resumen-content,#cot-zona #resumen-wrap #resumen-content-2,#cot-oper-zona #resumen-wrap #resumen-content-2,#cot-zona #resumen-wrap #plan-pagos-content,#cot-oper-zona #resumen-wrap #plan-pagos-content{overflow:visible!important;}}#cot-zona .pdf-section,#cot-oper-zona .pdf-section{background:var(--c-sup);border:1px solid var(--c-borde);border-radius:10px;padding:16px 18px;margin-bottom:14px;page-break-inside:avoid;}#cot-zona .pdf-section-title,#cot-oper-zona .pdf-section-title{font-size:12px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.5px;padding-bottom:10px;border-bottom:2px solid var(--text);margin-bottom:12px;}#cot-zona .pdf-subsection,#cot-oper-zona .pdf-subsection{margin-bottom:12px;}#cot-zona .pdf-subsection-title,#cot-oper-zona .pdf-subsection-title{font-size:10px;font-weight:800;color:var(--text-2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;}#cot-zona .pdf-text-block,#cot-oper-zona .pdf-text-block{font-size:10px;color:var(--text-2);line-height:1.7;white-space:pre-line;}#cot-zona .pdf-grid2,#cot-oper-zona .pdf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}#cot-zona .pdf-grid3,#cot-oper-zona .pdf-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}#cot-zona .pdf-field,#cot-oper-zona .pdf-field{background:var(--c-fondo);border-radius:6px;padding:7px 10px;}#cot-zona .pdf-field-label,#cot-oper-zona .pdf-field-label{font-size:9px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;}#cot-zona .pdf-field-value,#cot-oper-zona .pdf-field-value{font-size:11px;font-weight:600;color:var(--text);}#cot-zona .pdf-gold,#cot-oper-zona .pdf-gold{color:var(--c-ambar-tx)!important;font-weight:800!important;}#cot-zona .pdf-full,#cot-oper-zona .pdf-full{grid-column:1/-1;}#cot-zona .pdf-note,#cot-oper-zona .pdf-note{font-size:10px;font-weight:600;color:var(--c-ambar-tx);background:var(--c-ambar-bg);border:1px solid var(--c-ambar-bd);border-radius:6px;padding:7px 10px;margin-top:8px;}#cot-zona .pdf-note-warn,#cot-oper-zona .pdf-note-warn{color:var(--c-rojo-tx)!important;background:var(--c-rojo-bg)!important;border-color:var(--c-rojo-bd)!important;}#cot-zona .pdf-phase-card,#cot-oper-zona .pdf-phase-card{border:1.5px solid var(--c-borde);border-radius:8px;overflow:hidden;}#cot-zona .pdf-phase-ideal,#cot-oper-zona .pdf-phase-ideal{border-color:var(--text);}#cot-zona .pdf-phase-f1,#cot-oper-zona .pdf-phase-f1{border-color:var(--amar);}#cot-zona .pdf-phase-head-dark,#cot-oper-zona .pdf-phase-head-dark{background:var(--navy-fijo);padding:10px 14px;font-size:11px;font-weight:800;color:var(--amar);}#cot-zona .pdf-phase-head-yellow,#cot-oper-zona .pdf-phase-head-yellow{background:var(--amar);padding:10px 14px;font-size:11px;font-weight:800;color:var(--navy-fijo);}#cot-zona .pdf-calc-row,#cot-oper-zona .pdf-calc-row{display:flex;justify-content:space-between;font-size:10px;padding:3px 0;border-bottom:1px solid var(--c-sup3);color:var(--text-2);}#cot-zona .sku-card,#cot-oper-zona .sku-card{border:2px solid var(--border);border-radius:var(--rad-sm);padding:12px;background:var(--c-sup);cursor:pointer;transition:all .15s;text-align:center;}#cot-zona .sku-card:hover,#cot-oper-zona .sku-card:hover{border-color:var(--m-indigo-bd);background:var(--c-azul-bg);}#cot-zona .sku-card.sel,#cot-oper-zona .sku-card.sel{border-color:var(--m-indigo-bd);background:var(--c-azul-bg);box-shadow:0 0 0 3px rgba(99,102,241,.15);}#cot-zona .sku-card-name,#cot-oper-zona .sku-card-name{font-size:11px;font-weight:800;color:var(--text);margin-bottom:3px;}#cot-zona .sku-card-sku,#cot-oper-zona .sku-card-sku{font-size:9px;color:var(--muted);font-weight:600;letter-spacing:.4px;margin-bottom:6px;text-transform:uppercase;}#cot-zona .sku-card-price,#cot-oper-zona .sku-card-price{font-size:15px;font-weight:900;color:var(--c-azul-tx);}#cot-zona .sku-card-price span,#cot-oper-zona .sku-card-price span{font-size:10px;font-weight:500;color:var(--muted);}#cot-zona .sku-card-day,#cot-oper-zona .sku-card-day{font-size:10px;color:var(--muted);font-weight:600;margin-top:2px;}#cot-zona .sku-card.sel .sku-card-name,#cot-oper-zona .sku-card.sel .sku-card-name{color:var(--c-azul-tx);}#cot-zona .sku-card.sel .sku-card-price,#cot-oper-zona .sku-card.sel .sku-card-price{color:var(--c-azul-tx);}#cot-zona .sku-card-desc,#cot-oper-zona .sku-card-desc{font-size:9px;color:var(--muted);margin-top:4px;line-height:1.4;font-weight:500;}#cot-zona .sku-popular,#cot-oper-zona .sku-popular{border-color:var(--c-ambar-tx)!important;background:var(--c-ambar-bg)!important;position:relative;}#cot-zona .sku-popular-badge,#cot-oper-zona .sku-popular-badge{font-size:9px;font-weight:800;color:var(--c-ambar-tx);background:var(--c-ambar-bg);border-radius:4px;padding:2px 6px;display:inline-block;margin-bottom:6px;letter-spacing:.3px;}#cot-zona .sku-card-day,#cot-oper-zona .sku-card-day{font-size:22px;font-weight:900;color:var(--c-azul-tx);line-height:1;}#cot-zona .sku-card-day span,#cot-oper-zona .sku-card-day span{font-size:11px;font-weight:500;color:var(--muted);}#cot-zona .sku-card-price,#cot-oper-zona .sku-card-price{font-size:13px;font-weight:700;color:var(--text-2);margin-top:2px;margin-bottom:6px;}#cot-zona .sku-card-price span,#cot-oper-zona .sku-card-price span{font-size:10px;font-weight:400;}#cot-zona .sku-card.sel .sku-card-day,#cot-oper-zona .sku-card.sel .sku-card-day{color:var(--c-azul-tx);}#cot-zona .sku-card.sel .sku-popular-badge,#cot-oper-zona .sku-card.sel .sku-popular-badge{background:var(--c-ambar-bg);}#cot-zona .markup-def,#cot-oper-zona .markup-def{font-size:11px;color:var(--muted);display:block;margin-top:3px;font-weight:400;}

/* =====================================================================
   EL PUENTE
   =====================================================================

   El motor escribe <input> y <label> a secas; el panel viste `.fi` y
   `.field`. Aqui se traduce: los elementos del cotizador toman los
   MISMOS valores del panel, copiados de apps/panel/index.html.

   Se pone al final a proposito, para ganar sobre lo que queda del CSS
   viejo sin tener que borrarlo de un tiron.
   ===================================================================== */

/* ── Campos ── */
#cot-zona input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),#cot-oper-zona input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),#cot-zona select,#cot-oper-zona select,#cot-zona textarea,#cot-oper-zona textarea{
  width:100%; min-height:var(--tap); padding:12px 14px;
  border:1px solid var(--campo-borde); border-radius:var(--r-md);
  background:var(--campo-bg); font-family:inherit; font-size:15px;
  color:var(--text); outline:none;
}#cot-zona textarea,#cot-oper-zona textarea{ min-height:96px; resize:vertical; }#cot-zona input:focus,#cot-oper-zona input:focus,#cot-zona select:focus,#cot-oper-zona select:focus,#cot-zona textarea:focus,#cot-oper-zona textarea:focus{
  border-color:var(--marca-principal); box-shadow:0 0 0 3px color-mix(in srgb, var(--marca-principal) 18%, transparent);
}#cot-zona input[readonly],#cot-oper-zona input[readonly],#cot-zona input[disabled],#cot-oper-zona input[disabled],#cot-zona select[disabled],#cot-oper-zona select[disabled]{ background:var(--superficie-2); color:var(--text-2); }#cot-zona label,#cot-oper-zona label{
  display:block; font-size:12px; font-weight:800; color:var(--text-2);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px;
}#cot-zona .hint,#cot-oper-zona .hint{ font-size:12.5px; color:var(--text-2); margin-top:6px; }

/* ── Tarjetas del motor, con el aire del panel ── */
#cot-zona .card,#cot-oper-zona .card{
  background:var(--superficie); border:0.5px solid var(--border);
  border-radius:var(--r-lg); padding:17px 19px; margin-bottom:14px;
}#cot-zona .card-head,#cot-oper-zona .card-head{
  display:flex; align-items:center; gap:9px; margin:0 0 12px;
  background:none; padding:0; border:0; color:var(--text);
}#cot-zona .card-head-left,#cot-oper-zona .card-head-left{ display:flex; align-items:center; gap:9px; flex:1; min-width:0; }#cot-zona .card-head-icon,#cot-oper-zona .card-head-icon{ color:var(--amar); font-size:17px; }#cot-zona .card-title,#cot-oper-zona .card-title{ font-size:15px; font-weight:800; letter-spacing:-.2px; color:var(--text); }#cot-zona .card-badge,#cot-oper-zona .card-badge,#cot-zona .card-modbadge,#cot-oper-zona .card-modbadge{
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px;
  border-radius:var(--r-full); font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.3px;
  background:var(--superficie-3); color:var(--text-2);
}#cot-zona .card-body,#cot-oper-zona .card-body{ padding:0; background:none; }

/* ── Rejillas ── */
#cot-zona .g2,#cot-oper-zona .g2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:12px; }#cot-zona .g3,#cot-oper-zona .g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }#cot-zona .fg,#cot-oper-zona .fg{ margin-bottom:0; min-width:0; }
@media (max-width:1080px){#cot-zona .g3,#cot-oper-zona .g3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){#cot-zona .g2,#cot-oper-zona .g2,#cot-zona .g3,#cot-oper-zona .g3{ grid-template-columns:1fr; } }

/* ── Separador y subtítulo ── */
#cot-zona .sep,#cot-oper-zona .sep{ height:1px; background:var(--border); border:0; margin:18px 0 14px; }#cot-zona .slbl,#cot-oper-zona .slbl{
  font-size:11px; font-weight:800; color:var(--text-2);
  text-transform:uppercase; letter-spacing:.5px; margin:0 0 12px;
}

/* ── Avisos. `.show` es lo que los ENCIENDE: sin esa regla el motor
      cree que los mostró y no se ve nada. ── */
#cot-zona .alert,#cot-oper-zona .alert{ display:none; padding:12px 15px; border-radius:var(--r-md);
  font-size:13.5px; margin:0 0 14px; border:0.5px solid var(--border);
  background:var(--superficie-2); color:var(--text-2); }#cot-zona .alert.show,#cot-oper-zona .alert.show{ display:block; }#cot-zona .alert-title,#cot-oper-zona .alert-title{ font-weight:800; font-size:13px; margin-bottom:4px; }#cot-zona .alert-body,#cot-oper-zona .alert-body{ font-size:13px; line-height:1.55; }#cot-zona .alert-yellow,#cot-oper-zona .alert-yellow{ background:rgba(255,159,28,.12); border-color:rgba(255,159,28,.35); color:var(--amar-dark); }#cot-zona .alert-green,#cot-oper-zona .alert-green{ background:rgba(22,196,127,.10); border-color:rgba(22,196,127,.30); color:var(--ok-txt); }#cot-zona .alert-red,#cot-oper-zona .alert-red{ background:rgba(255,77,79,.09);  border-color:rgba(255,77,79,.28);  color:var(--danger-txt); }#cot-zona .alert-blue,#cot-oper-zona .alert-blue{ background:var(--superficie-2);  border-color:var(--border);        color:var(--text-2); }

/* ── El panel del módulo reconstruido ── */
#cot-zona .panel,#cot-oper-zona .panel{
  background:var(--superficie); border:0.5px solid var(--border);
  border-radius:var(--r-lg); padding:17px 19px; margin-bottom:14px; font-size:14px;
}#cot-zona .panel > h2,#cot-oper-zona .panel > h2{
  font-size:15px; font-weight:800; margin:0 0 12px; letter-spacing:-.2px;
  display:flex; align-items:center; gap:9px; color:var(--text);
}#cot-zona .panel > h2::before,#cot-oper-zona .panel > h2::before{
  content:""; width:3px; height:15px; background:var(--amar);
  border-radius:2px; flex:0 0 auto;
}#cot-zona .ch-g2,#cot-oper-zona .ch-g2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:12px; }#cot-zona .ch-g3,#cot-oper-zona .ch-g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }#cot-zona .ch-g4,#cot-oper-zona .ch-g4{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }#cot-zona .ch-tel,#cot-oper-zona .ch-tel{ display:grid; grid-template-columns:110px 1fr; gap:8px; }#cot-zona .ch-region,#cot-oper-zona .ch-region{ display:grid; grid-template-columns:2fr 1fr; gap:8px; }
@media (max-width:1080px){#cot-zona .ch-g3,#cot-oper-zona .ch-g3{ grid-template-columns:repeat(2,1fr); }#cot-zona .ch-g4,#cot-oper-zona .ch-g4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){#cot-zona .ch-g2,#cot-oper-zona .ch-g2,#cot-zona .ch-g3,#cot-oper-zona .ch-g3,#cot-zona .ch-g4,#cot-oper-zona .ch-g4,#cot-zona .ch-region,#cot-oper-zona .ch-region{ grid-template-columns:1fr; }
}

/* ── ESPECIFICIDAD ──
   El motor escribia `.fg label` (dos clases) y el puente `label` (una):
   ganaba el motor y los labels seguian en minusculas. Aqui se iguala o
   se sube el peso, en vez de recurrir a !important, que solo traslada
   el problema al siguiente que tenga que tocar esto. */
#cot-zona .fg label,#cot-oper-zona .fg label,#cot-zona .field label,#cot-oper-zona .field label,#cot-zona .panel label,#cot-oper-zona .panel label{
  display:block; font-size:12px; font-weight:800; color:var(--text-2);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px;
}#cot-zona .card .card-head,#cot-oper-zona .card .card-head,#cot-zona .card .card-head .card-title,#cot-oper-zona .card .card-head .card-title{ color:var(--text); }#cot-zona .card .card-head,#cot-oper-zona .card .card-head{ background:none; padding:0; border:0; }#cot-zona .card .card-head .card-badge,#cot-oper-zona .card .card-head .card-badge,#cot-zona .card .card-head .card-modbadge,#cot-oper-zona .card .card-head .card-modbadge{
  background:var(--superficie-3); color:var(--text-2);
}

/* =====================================================================
   EL CANDADO CONTRA LAS REGLAS GLOBALES DE KRYPTOS
   =====================================================================

   kryptos-motor.css define clases genericas SIN acotar y con
   !important: `.card-head`, `.card-head *`, `.btn-primary`, `.chip`…
   El panel las carga siempre, asi que alcanzan a cualquier pantalla
   que use esos nombres — y el cotizador usa veinte de ellos.

   El sintoma fue el titulo de las tarjetas del Modulo 2 en BLANCO sobre
   tarjeta blanca: invisible. No venia del cotizador ni del panel, sino
   de una regla pensada para las cabeceras navy de KRYPTOS.

   Lo correcto seria que kryptos-motor.css se acotara a #kryptos-engine,
   igual que se hizo aqui. Eso es una limpieza aparte y toca una
   pantalla que hoy funciona; queda anotado.

   Mientras tanto, se le gana con su propia arma pero acotada: dentro de
   #cot-zona manda el cotizador, y ahi se acaba.
   ===================================================================== */
#cot-zona .card-head,#cot-oper-zona .card-head,#cot-zona .card-head *,#cot-oper-zona .card-head *{
  color:var(--text) !important;
  background:none !important;
}#cot-zona .card-head i.ti,#cot-oper-zona .card-head i.ti,#cot-zona .card-head-icon,#cot-oper-zona .card-head-icon{ color:var(--amar) !important; }#cot-zona .card-head .card-badge,#cot-oper-zona .card-head .card-badge,#cot-zona .card-head .card-modbadge,#cot-oper-zona .card-head .card-modbadge{
  background:var(--superficie-3) !important;
  color:var(--text-2) !important;
}
/* Los botones del cotizador son suyos, no los de KRYPTOS. */
#cot-zona .btn-primary,#cot-oper-zona .btn-primary,#cot-zona .btn-primary:hover,#cot-oper-zona .btn-primary:hover{
  background:var(--amar) !important; color:var(--navy-fijo) !important;
  border-color:var(--amar) !important;
}#cot-zona .btn-primary i.ti,#cot-oper-zona .btn-primary i.ti{ color:var(--navy-fijo) !important; }

/* ── LAS OPCIONES DE LOS SELECT ──
   Un <option> no hereda el color de su <select>: el navegador lo pinta
   con el tema del sistema. En oscuro quedaban con fondo blanco y letra
   clara — ilegibles al desplegar la lista. Se les dice explicitamente. */
#cot-zona select option,#cot-oper-zona select option,#cot-zona select optgroup,#cot-oper-zona select optgroup{
  background:var(--campo-bg);
  color:var(--text);
}

/* ── EL AMARILLO DE LA MARCA ──
   Es el mismo en los dos temas, asi que su texto tampoco puede cambiar:
   sobre amarillo siempre va navy. Si usara --text, en oscuro quedaria
   letra clara sobre amarillo. */
#cot-zona [style*="--amar"],#cot-oper-zona [style*="--amar"],#cot-zona .step-circle.active,#cot-oper-zona .step-circle.active,#cot-zona .btn-primary,#cot-oper-zona .btn-primary{ color:var(--sobre-amar); }

/* =====================================================================
   EN TELEFONO
   =====================================================================

   El cotizador se diseno para una pantalla ancha: rejillas de tres
   columnas, botones uno al lado del otro y campos que dan por hecho
   que sobra espacio. En un telefono eso se deforma.

   Aqui NO se reescribe el diseno: se le dice que a partir de cierto
   ancho las cosas van una debajo de otra y ocupan la linea entera.
   ===================================================================== */

/* El campo de fecha se estiraba hacia la derecha y sacaba el icono del
   calendario fuera de su caja: Safari e iOS le dan ancho propio a
   input[type=date] y hay que quitarselo a mano. */
#cot-zona input[type="date"],#cot-oper-zona input[type="date"],#cot-zona input[type="time"],#cot-oper-zona input[type="time"],#cot-zona input[type="month"],#cot-oper-zona input[type="month"]{
  -webkit-appearance:none; appearance:none;
  min-width:0; max-width:100%; width:100%;
  display:block; box-sizing:border-box;
}#cot-zona input[type="date"]::-webkit-date-and-time-value,#cot-oper-zona input[type="date"]::-webkit-date-and-time-value{ text-align:left; }#cot-zona input[type="date"]::-webkit-calendar-picker-indicator,#cot-oper-zona input[type="date"]::-webkit-calendar-picker-indicator{
  margin-left:auto; opacity:.65; cursor:pointer;
}

/* Nada se sale de su caja, pase lo que pase con un texto largo. */
#cot-zona,#cot-oper-zona,#cot-zona *,#cot-oper-zona *{ min-width:0; }#cot-zona table,#cot-oper-zona table{ width:100%; }

@media (max-width:768px){
  /* Rejillas: una sola columna. */
#cot-zona .g2,#cot-oper-zona .g2,#cot-zona .g3,#cot-oper-zona .g3,#cot-zona .ch-g2,#cot-oper-zona .ch-g2,#cot-zona .ch-g3,#cot-oper-zona .ch-g3,#cot-zona .ch-g4,#cot-oper-zona .ch-g4,#cot-zona .ch-region,#cot-oper-zona .ch-region,#cot-zona .crit-grid,#cot-oper-zona .crit-grid,#cot-zona .jornada-grid,#cot-oper-zona .jornada-grid,#cot-zona .tipo-grid,#cot-oper-zona .tipo-grid,#cot-zona .pos-grid,#cot-oper-zona .pos-grid,#cot-zona .contract-cal,#cot-oper-zona .contract-cal{
    grid-template-columns:1fr !important;
  }
  /* La lada y el telefono si caben juntos: son un solo dato. */
#cot-zona .ch-tel,#cot-oper-zona .ch-tel,#cot-zona .phone-wrap,#cot-oper-zona .phone-wrap{
    grid-template-columns:104px 1fr !important;
    display:grid !important;
  }
  /* Tarjetas y avisos con menos aire, que la pantalla es angosta. */
#cot-zona .card,#cot-oper-zona .card,#cot-zona .panel,#cot-oper-zona .panel{ padding:14px 13px; }#cot-zona .alert,#cot-oper-zona .alert{ padding:11px 13px; }
  /* Botones: uno debajo de otro y a lo ancho, para no partir su texto. */
#cot-zona .btn,#cot-oper-zona .btn,#cot-zona .btn-primary,#cot-oper-zona .btn-primary,#cot-zona .btn-sec,#cot-oper-zona .btn-sec{
    width:100%; white-space:normal;
  }#cot-zona .nav-btns,#cot-oper-zona .nav-btns,#cot-zona .row-actions,#cot-oper-zona .row-actions{
    display:flex; flex-direction:column; gap:8px;
  }
  /* Las tablas anchas se deslizan en vez de desbordar la pantalla. */
#cot-zona .tabla-wrap,#cot-oper-zona .tabla-wrap,#cot-zona .table-wrap,#cot-oper-zona .table-wrap{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  /* El stepper, en pastillas que caben. */
#cot-zona .stepper,#cot-oper-zona .stepper{ flex-wrap:wrap; gap:6px; padding:12px 14px; }#cot-zona .step,#cot-oper-zona .step{ flex:1 1 auto; padding:6px 9px; }#cot-zona .step-line,#cot-oper-zona .step-line{ display:none; }
  /* El tooltip cabia por la derecha de la pantalla. */
#cot-zona .tip-box,#cot-oper-zona .tip-box{ width:min(260px, 76vw); }
}

/* ── LAS TABLAS EN TELEFONO ──
   La de personal asignado tiene once columnas: en un telefono no cabe
   de ninguna forma y se salia de la tarjeta. Se desliza a lo ancho
   dentro de su caja, que es lo que hace cualquier app seria con una
   tabla que no cabe: no se achica la letra hasta volverla ilegible. */
@media (max-width:768px){#cot-zona table,#cot-oper-zona table{ display:block; width:100%; overflow-x:auto;
    -webkit-overflow-scrolling:touch; white-space:nowrap; }#cot-zona table th,#cot-oper-zona table th,#cot-zona table td,#cot-oper-zona table td{ white-space:nowrap; }
}

/* ── TODOS LOS BOTONES, DE LA MISMA FAMILIA ──
   El cotizador traia botones con clase propia (.btn-add, .sb) y otros
   sin ninguna, que salian con el aspecto por defecto del navegador:
   gris de sistema, esquinas cuadradas, otra tipografia. Aqui todos
   toman la forma del panel, y cada uno su papel:
     principal  amarillo solido
     secundario contorno
     terciario  sin fondo */
#cot-zona button:not([class]),#cot-oper-zona button:not([class]),#cot-zona .btn-add,#cot-oper-zona .btn-add,#cot-zona .sb,#cot-oper-zona .sb{
  min-height:44px; padding:0 15px; border-radius:var(--r-md);
  font-family:inherit; font-size:13px; font-weight:800; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--superficie); border:1px solid var(--border); color:var(--text);
}#cot-zona button:not([class]):hover,#cot-oper-zona button:not([class]):hover,#cot-zona .btn-add:hover,#cot-oper-zona .btn-add:hover,#cot-zona .sb:hover,#cot-oper-zona .sb:hover{ border-color:var(--amar); }#cot-zona .btn-add,#cot-oper-zona .btn-add{ border-style:dashed; color:var(--text-2); }#cot-zona .btn-primary,#cot-oper-zona .btn-primary{
  background:var(--amar); border:1px solid var(--amar); color:var(--sobre-amar);
  min-height:var(--tap); padding:0 18px; border-radius:var(--r-md);
  font-family:inherit; font-size:14px; font-weight:800; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}#cot-zona .btn-sec,#cot-oper-zona .btn-sec{
  background:var(--superficie); border:1px solid var(--border); color:var(--text);
  min-height:var(--tap); padding:0 18px; border-radius:var(--r-md);
  font-family:inherit; font-size:14px; font-weight:800; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}#cot-zona .btn-sec:hover,#cot-oper-zona .btn-sec:hover{ border-color:var(--amar); background:var(--superficie-2); }#cot-zona button i.ti,#cot-oper-zona button i.ti{ font-size:16px; line-height:1; }

/* ── IMPRIMIR SOLO LA COTIZACION ──
   El cotizador ya no vive en su propia pagina: vive DENTRO del panel,
   con su barra lateral, su encabezado y —al terminar— el modal del
   resultado abierto encima. Las reglas de impresion del motor sabian
   esconder lo suyo, pero no sabian nada del panel, asi que el menu y
   el modal saldrian impresos en la cotizacion del cliente.

   Mientras dura la impresion el <body> se marca, y con esa marca se
   esconde TODO menos el documento. Se usa `visibility` y no `display`
   para no recalcular la pagina entera a media impresion, que es lo que
   parte las tablas a la mitad entre dos hojas. */
@media print{
  /* Fuera de @media esta regla apagaria la PANTALLA, no el papel. */
  body.lyk-imprimiendo *{ visibility:hidden !important; }body.lyk-imprimiendo #cot-zona #resumen-wrap,body.lyk-imprimiendo #cot-oper-zona #resumen-wrap,body.lyk-imprimiendo #cot-zona #resumen-wrap *,body.lyk-imprimiendo #cot-oper-zona #resumen-wrap *{ visibility:visible !important; }body.lyk-imprimiendo #cot-zona #resumen-wrap,body.lyk-imprimiendo #cot-oper-zona #resumen-wrap{
    position:absolute; left:0; top:0; width:100%;
    margin:0 !important; padding:0 !important; box-shadow:none !important;
  }
}

/* ── EL PAPEL NO SE DESLIZA (tambien en el cotizador) ────────────────
   Las tablas son `display:block; overflow-x:auto` abajo de 768 px para
   que en un celular se deslicen de lado. Pero una hoja carta mide ~725
   px en CSS, asi que al IMPRIMIR esa regla tambien entra: la tabla se
   queda en modo riel y el papel la corta por donde termina.

   Se descubrio en la liga del cliente —ahi el cliente recibia la tabla
   de apostamientos sin $/mes, sin Subtotal y sin el TOTAL—, pero la
   causa es la misma de este lado, asi que se tapa aqui tambien: el PDF
   que manda el ejecutivo no puede salir cortado.

   En papel no hay a donde deslizar. La tabla vuelve a ser tabla, se
   reparte el ancho de la hoja y la letra baja a 10px, que es lo que ya
   hacia el bloque de impresion de arriba. */
@media print{
  #cot-zona table, #cot-oper-zona table{
    display:table !important;
    width:100% !important;
    table-layout:auto !important;
    white-space:normal !important;
    overflow:visible !important;
  }
  #cot-zona th, #cot-oper-zona th,
  #cot-zona td, #cot-oper-zona td{ white-space:normal !important; }
  #cot-zona #resumen-content, #cot-zona #resumen-content-2,
  #cot-zona #plan-pagos-content,
  #cot-oper-zona #resumen-content, #cot-oper-zona #resumen-content-2,
  #cot-oper-zona #plan-pagos-content{ overflow:visible !important; }
}

/* ── LOS COLORES SE IMPRIMEN (tambien en el cotizador) ───────────────
   Por omision el navegador no imprime fondos. Aqui los fondos
   SIGNIFICAN: la barra del TOTAL CONTRATADO es navy, el encabezado de
   "Inversion Ideal - recomendacion CTPAT" es navy con LETRA AMARILLA, y
   las notas de GSO y de decision optima son ambar y verde.

   Sin fondo, el total sale gris lavado y ese encabezado queda amarillo
   sobre blanco: invisible. La propiedad ya estaba, pero solo en
   `.resumen-block`. Se extiende a todo el documento. */
@media print{
  #cot-zona, #cot-zona *, #cot-oper-zona, #cot-oper-zona *{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   QUE CADA CLIC SE SIENTA · regla única para todos los botones


   La auditoría del 3/oct le dio la razón con números: 141 selectores de
   botón en los cuatro archivos del sistema y solo 7 tenían `:active`.

   Y el detalle que lo explica: casi todos tenían `:hover`, que en una
   pantalla táctil NO EXISTE. En computadora el botón se iluminaba al
   pasar el mouse y daba la sensación de estar vivo; en el teléfono no
   pasaba absolutamente nada. El mismo botón, dos experiencias
   distintas, y la peor era la del que anda en campo.

   ── POR QUÉ UNA SOLA REGLA Y NO 141 PARCHES ──
   Porque un botón que se agregue mañana nace con esto puesto. Arreglar
   141 selectores a mano garantiza que el 142 salga muerto otra vez.

   ── QUÉ HACE, EN ORDEN DE IMPORTANCIA ──
   1. `:active` — el botón se hunde un poco y se oscurece. Es lo que la
      mano espera: que la cosa ceda cuando la aprietas.
   2. `tap-highlight` transparente — iOS y Android pintan un recuadro
      gris encima que no es nuestro y se ve ajeno. Se quita, pero SOLO
      porque lo reemplazamos por algo mejor; quitarlo sin dar nada a
      cambio dejaría el botón peor que antes.
   3. `touch-action: manipulation` — quita los ~300 ms que el navegador
      espera por si el toque era un doble-tap para hacer zoom. Es la
      razón de que un botón "tarde en responder" sin estar lento.
   4. `:focus-visible` — quien usa teclado ve dónde está parado. Solo
      con teclado: `:focus` a secas deja el anillo pegado tras un clic.
   5. `:disabled` — no reacciona. Un botón apagado que se hunde al
      tocarlo miente sobre lo que va a pasar.
   ═══════════════════════════════════════════════════════════════════ */
button, .btn, a.btn, label.btn, [role="button"],
input[type="submit"], input[type="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .09s ease, filter .09s ease,
              background-color .14s ease, border-color .14s ease;
}

button:not(:disabled):not([aria-disabled="true"]):active,
.btn:not(:disabled):not([aria-disabled="true"]):active,
a.btn:active, label.btn:active, [role="button"]:active,
input[type="submit"]:not(:disabled):active,
input[type="button"]:not(:disabled):active {
  transform: scale(.96);
  filter: brightness(.92);
}

button:focus-visible, .btn:focus-visible, a.btn:focus-visible,
label.btn:focus-visible, [role="button"]:focus-visible,
input[type="submit"]:focus-visible, input[type="button"]:focus-visible {
  outline: 2px solid var(--marca-principal);
  outline-offset: 2px;
}

button:disabled, .btn:disabled, [aria-disabled="true"] {
  cursor: not-allowed;
}
button:disabled:active, .btn:disabled:active, [aria-disabled="true"]:active {
  transform: none;
  filter: none;
}

/* El `:hover` solo donde hay un puntero de verdad. En una pantalla
   táctil el navegador lo deja "pegado" después de tocar: el botón se
   queda iluminado como si el dedo siguiera encima. */
@media (hover: none) {
  button:hover, .btn:hover, a.btn:hover, label.btn:hover {
    filter: none;
  }
}

/* Para quien pidió menos movimiento en su teléfono, el color sigue
   avisando aunque el botón no se mueva. */
@media (prefers-reduced-motion: reduce) {
  button, .btn, a.btn, label.btn, [role="button"] { transition: filter .09s ease; }
  button:active, .btn:active, a.btn:active, label.btn:active, [role="button"]:active {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LAS REGLAS DE CORTE DE LAS SECCIONES NUEVAS
   ══════════════════════════════════════════════════════════════════


   Arriba hay un `.pdf-section{page-break-inside:avoid}` que vale para
   TODAS. Funciona mientras la sección quepa en una hoja — y las tres
   nuevas no caben: la comparativa son seis filas largas, el valor
   agregado ocho tarjetas, y la metodología cuatro etapas más los
   frentes del sitio.

   Y aquí está la trampa que ya costó caro en la liga del cliente:
   cuando un bloque con `avoid` NO cabe, el navegador brinca de hoja Y
   SE DESBORDA IGUAL. Sale la hoja con el puro encabezado y el resto
   cortado. Así que a las largas se les deja fluir y se protege lo que
   sí cabe: una fila, una tarjeta, una etapa. Nunca a media caja.
   ══════════════════════════════════════════════════════════════════ */
@media print{
  /* las tres largas fluyen… */
  #cot-zona .pdf-larga, #cot-oper-zona .pdf-larga{
    page-break-inside:auto !important; break-inside:auto !important;
  }
  /* …y se protege la PIEZA, que es lo que pierde sentido partido */
  #cot-zona .vs-fila, #cot-oper-zona .vs-fila,
  #cot-zona .val-card, #cot-oper-zona .val-card,
  #cot-zona .eb-paso, #cot-oper-zona .eb-paso,
  #cot-zona .rej-card, #cot-oper-zona .rej-card,
  #cot-zona .pdf-field, #cot-oper-zona .pdf-field,
  #cot-zona tr, #cot-oper-zona tr{
    page-break-inside:avoid !important; break-inside:avoid !important;
  }
  /* una tabla repartida repite su encabezado: una columna de dinero sin
     nombre no se puede leer */
  #cot-zona thead, #cot-oper-zona thead{ display:table-header-group !important; }
  #cot-zona tfoot, #cot-oper-zona tfoot{ display:table-footer-group !important; }
  /* y un título jamás se queda solo al pie de la hoja */
  #cot-zona .pdf-section-title, #cot-oper-zona .pdf-section-title,
  #cot-zona .pdf-subsection-title, #cot-oper-zona .pdf-subsection-title{
    page-break-after:avoid !important; break-after:avoid !important;
  }
  /* el resumen ejecutivo abre el documento: empieza hoja */
  #cot-zona .sec-vs, #cot-oper-zona .sec-vs{ page-break-before:auto; }
}


/* ══════════════════════════════════════════════════════════════════
   EL DISEÑO APROBADO YA NO VIVE AQUI
   ══════════════════════════════════════════════════════════════════
   Aqui estaba pegada una copia entera de la hoja del documento --unas
   343 reglas bajo `.doc`--, que era la TERCERA: las otras dos estaban
   en `propuesta/index.html` y en `propuesta/_diseno.acotado.css`.

   Un cambio de diseño habia que escribirlo tres veces. El 9/oct se
   comprobo que las tres coincidian, pero por disciplina, no por
   construccion. Ahora la hoja es una sola y vive en
   `propuesta/_diseno.acotado.css`.

   Quien la necesite la carga aparte:
     · el panel, en `index.html`, DESPUES de este archivo
     · la liga, en `propuesta/index.html`
     · el visor archivado, que `hacer-visor.py` arma pegando los dos

   En este archivo se queda SOLO lo del formulario del cotizador, que
   es lo acotado bajo `#cot-zona`.
   ══════════════════════════════════════════════════════════════════ */