/* publico/css/marca.css — Manual SecPro INS-GEST-02 V1 */
:root{ --azul:#001D7E; --rojo:#FF0000; --tinta:#2E3440; --tenue:#6B7683; --banda:#F2F4F9; --linea:#D5DAE3 }
*{ box-sizing:border-box; margin:0 }
body{ font-family:"Segoe UI",system-ui,-apple-system,sans-serif; color:var(--tinta); background:#fff;
      -webkit-text-size-adjust:100%; padding:16px }
h1,h2,h3{ color:var(--azul); line-height:1.15 }
button{ font:inherit; border:0; border-radius:6px; padding:12px 16px; background:var(--azul); color:#fff;
        cursor:pointer; transition:transform .06s ease, box-shadow .08s ease, filter .08s ease }
button.secundario{ background:#fff; color:var(--azul); border:1px solid var(--linea) }
button:hover:not(:disabled){ filter:brightness(.94) }
/* El click tiene que verse: el botón se hunde y recibe una sombra interior. */
button:active:not(:disabled){ transform:translateY(2px); filter:brightness(.88);
        box-shadow:inset 0 3px 6px rgba(0,0,0,.28) }
button:disabled{ opacity:.4; cursor:default }
.panel{ background:var(--banda); border-left:3px solid var(--azul); padding:12px 14px; border-radius:4px }
.error{ color:var(--rojo); font-weight:600; min-height:1.4em }
/* La consigna de la fase de resolución, en el teléfono y en la pantalla del operador:
   les toca pararse a defender su jugada. Va en banda azul, como la de «a quién le
   dicta», porque es lo que manda en esa pantalla; debajo va su propio razonamiento. */
/* Lo que le queda al equipo por gastar. Es el dato que condiciona cada decisión de la
   fase de compra, y en una lista de dieciocho ataques con sus precios en rojo pasaba
   desapercibido. Cifra grande, y el gasto al lado para que nadie tenga que restar. */
.saldo{ background:#fff; border:2px solid var(--azul); border-radius:6px;
        padding:10px 14px; margin:10px 0 }
.saldo-rotulo{ display:block; font-size:13px; text-transform:uppercase; letter-spacing:.06em;
               color:var(--tenue) }
.saldo-cifra{ display:block; font-size:30px; font-weight:800; color:var(--azul);
              line-height:1.1; font-variant-numeric:tabular-nums }
.saldo-de{ display:block; font-size:14px; color:var(--tenue) }

/* A quien ya designaron operador, antes de que haya algo que operar. Más apagado que
   la banda azul del dictado: es un aviso de lo que viene, no una instrucción de ahora. */
.designado{ background:#fff; border:2px solid var(--azul); border-radius:6px;
            padding:12px 14px; margin:12px 0; font-size:15px; line-height:1.35;
            color:var(--tenue) }
.designado .quien{ display:block; font-size:19px; font-weight:800; color:var(--azul);
                   margin-bottom:3px }

/* Las evaluaciones. Se responden de pie o sentado en una mesa, desde el celular, y son
   la única pantalla de la app en la que cada persona transacciona por su cuenta. Las
   opciones son cajas grandes y no radios pelados: se marcan con el pulgar y tienen que
   verse marcadas de un vistazo, sin acercarse el teléfono a la cara. */
.cues{ background:var(--banda); border-left:3px solid var(--azul); border-radius:4px;
       padding:14px 16px; margin:12px 0 }
.cues-titulo{ margin:0 0 10px }
.cues-reintento{ background:#FFF4E5; border-left:4px solid #F6A609; border-radius:4px;
                 padding:8px 12px; font-size:15px; margin:0 0 12px }
.cues-pregunta{ margin:0 0 18px }
.cues-enunciado{ font-weight:600; margin:0 0 8px; line-height:1.3 }
.cues-opcion{ display:flex; align-items:center; gap:10px; background:#fff;
              border:1px solid var(--linea); border-radius:6px; padding:12px 14px;
              margin-bottom:6px; cursor:pointer; line-height:1.3 }
.cues-opcion:has(input:checked){ border-color:var(--azul); border-width:2px;
                                 background:#f3f6ff; font-weight:600 }
.cues-opcion input{ width:20px; height:20px; flex:none }
.cues button{ width:100%; min-height:52px; font-size:17px }
.cues-hecho{ border-left-color:#1a7f37 }
.cues-nota{ font-size:40px; font-weight:800; color:var(--azul); margin:0;
            font-variant-numeric:tabular-nums }
.cues-aprueba{ color:#1a7f37; font-weight:700; margin:0 0 6px }
.cues-reprueba{ color:var(--rojo); font-weight:700; margin:0 0 6px }
.cues-falladas{ font-size:15px; margin:0 0 6px }

/* La cadena de ataque: entrar, avanzar, cobrar. La usan el teléfono, la pantalla del
   operador y la proyección, así que vive aquí y no en una de las tres.
   El eslabón cubierto y el vacío no se distinguen solo por el color: el cubierto lleva
   fondo sólido y el vacío queda hueco y punteado, y debajo el aviso lo dice con
   palabras. En una sala hay quien no distingue el verde del gris. */
.cadena{ display:flex; align-items:stretch; gap:6px; margin:10px 0 6px }
.cadena-paso{ flex:1; border-radius:6px; padding:10px 12px; text-align:center;
              border:2px dashed var(--linea); color:var(--tenue) }
.cadena-paso.cubierto{ background:#e6f4ea; border:2px solid #1a7f37; color:#15612a }
.cadena-paso.vacio{ background:#fff }
.cadena-titulo{ font-weight:700; font-size:16px }
.cadena-sub{ font-size:12px; line-height:1.2; margin-top:2px }
.cadena-flecha{ align-self:center; color:var(--tenue); font-size:20px }
.cadena-aviso{ background:#FFF4E5; border-left:4px solid #F6A609; border-radius:4px;
               padding:8px 12px; font-size:15px; line-height:1.35; margin:0 0 6px }
.cadena-lista{ color:#1a7f37; font-weight:600; font-size:15px; margin:0 0 6px }

.presentar{ background:var(--azul); color:#fff; border-radius:6px; padding:14px 16px;
            margin:12px 0; font-size:17px; line-height:1.35 }
.presentar-titulo{ display:block; font-size:22px; font-weight:800; margin-bottom:3px }
.reloj{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--rojo) }
.alarma{ background:var(--rojo); color:#fff; font-weight:700; font-size:22px;
         padding:10px 16px; border-radius:6px; margin-bottom:16px; text-align:center }
.aviso{ background:#F6A609; color:#2E3440; font-weight:700; font-size:22px;
        padding:10px 16px; border-radius:6px; margin-bottom:16px; text-align:center }
/* La pregunta que enmarca la valoración de controles es el eje del ejercicio: es la
   única pregunta de la hora que la junta responde con su juicio y no compitiendo. Se
   lee de pie y desde un teléfono, así que tiene que ganarle a todo lo demás que hay
   en la pantalla, incluido el catálogo que acaba de desaparecer. */
.pregunta{ background:var(--azul); color:#fff; font-weight:700; font-size:20px;
           line-height:1.35; padding:14px 16px; border-radius:6px; margin:12px 0 }

/* "Más información": el desplegable que amplía en lenguaje llano cada control, cada
   ataque y cada perfil de banco. Discreto cerrado (no debe competir con el nombre del
   elemento) y claramente legible abierto. Ver publico/js/explicacion.js. */
.quees{ margin:2px 0 0 }
.quees > summary{ display:inline-block; color:var(--azul); font-size:14px; font-weight:600;
                  text-decoration:underline; cursor:pointer; padding:4px 0; list-style:none }
.quees > summary::-webkit-details-marker{ display:none }
.quees[open] > summary{ color:var(--tenue) }
.quees > p{ background:var(--banda); border-left:3px solid var(--linea); border-radius:4px;
            padding:10px 12px; margin:2px 0 6px; font-size:15px; line-height:1.45;
            font-weight:400; color:var(--tinta) }

/* La cuenta atrás tapa la proyección entera. El rótulo va encima del número porque un
   número solo no dice a quién hay que mirar: la sala tiene que saber si es el minuto de
   preparación de todos o los noventa segundos de un equipo, y de cuál. */
.presentacion{ position:fixed; inset:0; background:var(--azul); color:#fff; z-index:10;
               display:flex; flex-direction:column; align-items:center; justify-content:center }
.presentacion .quien{ font-size:4vw; font-weight:700; text-align:center; padding:0 4vw }
.presentacion .cuenta{ font-variant-numeric:tabular-nums; font-weight:700; font-size:26vw;
                       line-height:1 }

/* La antesala: lo que la pared enseña entre el cambio de fase y el arranque del reloj.
   Fondo blanco y no azul a propósito: las cajas azules de esta app tapan para que la
   sala MIRE la pantalla (la cuenta atrás, el agradecimiento), y esta es justo al revés,
   es el rato en que tienen que mirar a quien está explicando. */
.antesala{ position:fixed; inset:0; background:#fff; z-index:9; padding:0 8vw;
           display:flex; flex-direction:column; align-items:flex-start; justify-content:center }
.antesala-rotulo{ font-size:1.6vw; text-transform:uppercase; letter-spacing:.12em;
                  color:var(--tenue) }
.antesala-fase{ font-size:6vw; font-weight:800; color:var(--azul); line-height:1.05;
                margin:1vh 0 2vh }
.antesala-que{ font-size:2.4vw; line-height:1.35; max-width:52em }
.antesala-dura{ font-size:1.8vw; color:var(--tenue); margin-top:3vh }

/* La última pantalla de la hora. Misma caja azul que la cuenta atrás, para que la sala
   reconozca que algo tapa el tablero, pero con texto y no con un número. */
.final{ position:fixed; inset:0; background:var(--azul); color:#fff; z-index:11;
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        text-align:center; padding:0 6vw }
.final-gracias{ font-size:8vw; font-weight:800; line-height:1.05 }
.final-linea{ font-size:3vw; margin-top:3vh; font-weight:400; line-height:1.3 }