/* Prototipo visual · Taller BD Guidance · Congreso ASENOF 2026
   Paleta y tipografía tomadas de «Plantilla BDG WHITE.pptx» (ver GUIA_VISUAL.md). */

@font-face{font-family:"Roboto";src:url("../recursos/fuentes/Roboto-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Roboto";src:url("../recursos/fuentes/Roboto-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Roboto";src:url("../recursos/fuentes/Roboto-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Roboto";src:url("../recursos/fuentes/Roboto-Black.ttf") format("truetype");font-weight:900;font-display:swap}

:root{
  /* Marca BDG (obligatorio) */
  --marino:#12324F;      /* azul marino profundo: fondos oscuros, texto principal */
  --azul:#034F85;        /* azul institucional: color dominante, botones primarios */
  --azul-titulo:#1C4587; /* títulos sobre blanco */
  --celeste:#1E89E5;     /* acento azul brillante */
  --verde:#82B428;       /* acento verde: solo relleno, nunca texto sobre blanco */
  --naranja:#E99400;     /* acento naranja: solo relleno, nunca texto sobre blanco */
  --gris:#8C9EAB;        /* gris azulado: bordes y bloques decorativos */
  --fondo:#F2F2F2;
  --fondo-azul:#F0F5FA;
  --blanco:#FFFFFF;
  /* Derivados (para legibilidad) */
  --texto:#12324F;
  --texto-2:#46596B;     /* texto secundario: 7:1 sobre blanco */
  --borde:#C5D0DA;
  --azul-suave:#E3EDF7;
  --error:#B3261E;
  --morado:#6B4FA0;      /* PROVISIONAL: 4.ª zona del networking; no está en la marca (ver GUIA_VISUAL.md) */
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--texto);background:#DCE3EA;display:flex;flex-direction:column}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--celeste);outline-offset:2px}

/* ───────── Barra del prototipo (no es parte del producto) ───────── */
.proto-barra{background:var(--marino);color:#fff;padding:10px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.proto-barra .marca{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:.02em;margin-right:6px}
.proto-barra .marca img{height:28px;background:#fff;border-radius:6px;padding:3px 8px}
.proto-barra .marca small{display:block;font-weight:400;font-size:12px;color:#B9C7D4}
.momentos{display:flex;gap:6px;flex-wrap:wrap}
.momentos button,.vistas button{border:1px solid #2F5070;background:transparent;color:#DCE6EF;border-radius:999px;padding:7px 12px;font-size:14px;cursor:pointer;white-space:nowrap}
.momentos button b{color:#fff;margin-right:4px}
.momentos button.on{background:#fff;color:var(--marino);border-color:#fff;font-weight:700}
.momentos button.on b{color:var(--azul)}
.vistas{display:flex;gap:6px;margin-left:auto}
.vistas button.on{background:var(--verde);border-color:var(--verde);color:var(--marino);font-weight:700}
.proto-pasos{background:#fff;border-bottom:1px solid var(--borde);padding:8px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px}
.proto-pasos .lbl{color:var(--texto-2);font-weight:500}
.proto-pasos button{border:1px solid var(--borde);background:var(--fondo-azul);color:var(--marino);border-radius:8px;padding:6px 10px;font-size:14px;cursor:pointer}
.proto-pasos button.on{background:var(--azul);color:#fff;border-color:var(--azul);font-weight:700}
.proto-pasos .nota{flex-basis:100%;color:var(--texto-2);font-size:13.5px;line-height:1.4}
.proto-pasos .nota b{color:var(--marino)}
.proto-pasos .flechas{margin-left:auto;display:flex;gap:6px}

/* Escenario */
.escenario{flex:1;display:flex;gap:28px;padding:22px;align-items:flex-start;justify-content:center;min-height:0}
.col-cel{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.col-pg{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.rotulo{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2)}
.pg-marco{width:100%;position:relative;background:#000;border-radius:6px;box-shadow:0 10px 30px rgba(18,50,79,.25);overflow:hidden}
.pg-marco>.pg{position:absolute;left:0;top:0;transform-origin:0 0}
body[data-vista="celular"] .col-pg,body[data-vista="pantalla"] .col-cel{display:none}
body[data-vista="panel"] .col-pg,body[data-vista="panel"] .col-cel{display:none}
body:not([data-vista="panel"]) .col-panel{display:none}
.col-panel{flex:1;max-width:1280px}

/* Controles que solo existen en el prototipo, dentro de las vistas */
.solo-proto{border:2px dashed var(--naranja);border-radius:10px;padding:8px 10px;margin:0 0 14px;font-size:14px;background:#FFF8ED;color:var(--marino)}
.solo-proto b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8A5A00;margin-bottom:4px}
.solo-proto select{width:100%;font:inherit;font-size:15px;padding:6px;border-radius:6px;border:1px solid var(--borde)}

/* ───────── Celular ───────── */
.cel{width:390px;height:800px;border-radius:46px;background:#0B1A2A;padding:12px;box-shadow:0 18px 40px rgba(18,50,79,.35)}
.cel-pant{width:100%;height:100%;border-radius:36px;background:#fff;overflow:hidden;display:flex;flex-direction:column;position:relative}
.cel-estado{height:30px;flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 26px;font-size:13px;font-weight:700;color:var(--marino)}
.cel-cab{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:8px 18px 10px;border-bottom:1px solid var(--borde)}
.cel-cab img{height:22px}
.cel-cab .mom{font-size:13px;font-weight:700;color:var(--azul);background:var(--azul-suave);border-radius:999px;padding:4px 10px}
.cel-cont{flex:1;overflow-y:auto;padding:20px 20px 28px;font-size:18px;line-height:1.45}
.cel-pie{flex:0 0 auto;padding:12px 20px 18px;border-top:1px solid var(--borde);background:#fff}
.cel h2{font-size:26px;line-height:1.15;margin:0 0 10px;color:var(--azul-titulo);font-weight:900}
.cel h3{font-size:19px;margin:22px 0 8px;color:var(--marino);font-weight:700}
.cel p{margin:0 0 14px}
.cel .sub{color:var(--texto-2);font-size:16px}
.cel .eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--azul);margin-bottom:6px}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:58px;border:0;border-radius:12px;background:var(--azul);color:#fff;font-size:19px;font-weight:700;cursor:pointer;padding:10px 16px;text-align:center}
.btn:active{background:var(--marino)}
.btn[disabled]{background:#AFC0CE;cursor:not-allowed}
.btn-sec{background:#fff;color:var(--azul);border:2px solid var(--azul)}
.btn-sec:active{background:var(--azul-suave)}
.btn+.btn{margin-top:10px}

.campo{margin-bottom:16px}
.campo label{display:block;font-size:16px;font-weight:700;margin-bottom:6px}
.campo label span{font-weight:400;color:var(--texto-2)}
.campo input,.campo select{width:100%;min-height:54px;font:inherit;font-size:18px;border:2px solid var(--gris);border-radius:10px;padding:8px 12px;color:var(--texto);background:#fff}
.campo input:focus,.campo select:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px #BBD8F5}
.campo .err{color:var(--error);font-size:15px;margin-top:4px;font-weight:500}
.campo.mal input{border-color:var(--error)}
.lista-inst{border:2px solid var(--borde);border-radius:10px;margin-top:6px;max-height:190px;overflow:auto}
.lista-inst button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--borde);background:#fff;padding:12px;font-size:17px;color:var(--texto);cursor:pointer;min-height:48px}
.lista-inst button:last-child{border-bottom:0}
.lista-inst button.otra{color:var(--azul);font-weight:700}

.op{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;border:2px solid var(--borde);border-radius:12px;background:#fff;padding:10px 14px;font-size:18px;color:var(--texto);text-align:left;cursor:pointer;margin-bottom:10px}
.op .marca-op{flex:0 0 26px;height:26px;border-radius:50%;border:2px solid var(--gris);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff}
.op.multi .marca-op{border-radius:6px}
.op.sel{border-color:var(--azul);background:var(--azul-suave);font-weight:700}
.op.sel .marca-op{background:var(--azul);border-color:var(--azul)}
.op.correcta{border-color:var(--verde);background:#F1F8E5}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:46px;border:2px solid var(--borde);border-radius:999px;background:#fff;padding:8px 14px;font-size:16px;color:var(--texto);cursor:pointer}
.chip.sel{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:700}

.chk{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--borde);font-size:16px;cursor:pointer}
.chk input{width:28px;height:28px;flex:0 0 28px;accent-color:var(--azul);margin:0}
.chk small{display:block;color:var(--texto-2);font-size:14px;margin-top:2px}
.chk .obl{color:var(--error);font-weight:700}

.aviso{background:var(--fondo-azul);border-left:5px solid var(--celeste);border-radius:8px;padding:12px 14px;font-size:15.5px;line-height:1.4;margin:0 0 16px;color:var(--marino)}
.aviso.naranja{border-left-color:var(--naranja);background:#FFF8ED}
.aviso.verde{border-left-color:var(--verde);background:#F3F9E8}
.tag-ej{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#FFF1D6;color:#7A4E00;border-radius:6px;padding:3px 7px;vertical-align:middle}
.tag-pend{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#FDE7E5;color:var(--error);border-radius:6px;padding:3px 7px;vertical-align:middle}

.espere{text-align:center;padding-top:40px}
.espere .icono{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;background:var(--azul-suave);display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--azul)}
.espere .icono.ok{background:#EAF4D8;color:#4C7212}

.puja{display:flex;align-items:stretch;border:2px solid var(--azul);border-radius:12px;overflow:hidden;margin-bottom:6px}
.puja input{flex:1;min-width:0;border:0;font:inherit;font-size:34px;font-weight:900;padding:8px 12px;color:var(--marino);text-align:right}
.puja input:focus{outline:none}
.puja .unidad{flex:0 0 118px;background:var(--azul);color:#fff;font-size:14px;font-weight:700;line-height:1.15;padding:8px 10px;display:flex;align-items:center}

.progreso{height:8px;background:var(--azul-suave);border-radius:4px;overflow:hidden;margin:4px 0 14px}
.progreso i{display:block;height:100%;background:var(--verde)}
.nav-diag{display:flex;gap:10px}
.nav-diag .btn{flex:1}
.nav-diag .btn+.btn{margin-top:0}

/* Ficha del departamento */
.cifra-grande{font-size:38px;font-weight:900;color:var(--azul-titulo);line-height:1.05}
.cifra-sub{color:var(--texto-2);font-size:16px;margin-bottom:6px}
.fila{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--borde);font-size:15.5px;line-height:1.3}
.fila .n{flex:1}
.fila .v{flex:0 0 auto;font-weight:700;color:var(--marino);white-space:nowrap}
.fila small{display:block;color:var(--texto-2);font-size:13.5px}
.barra-h{margin:8px 0}
.barra-h .e{display:flex;justify-content:space-between;font-size:15px;margin-bottom:4px}
.barra-h .t{height:12px;background:var(--azul-suave);border-radius:6px;overflow:hidden}
.barra-h .t i{display:block;height:100%;background:var(--azul)}
.pie-fuente{font-size:13.5px;color:var(--texto-2);border-top:1px solid var(--borde);padding-top:10px;margin-top:18px}

/* Mi grupo */
.zona-banda{border-radius:16px;padding:18px 20px;margin:-4px 0 18px;text-align:center}
.zona-banda .g{font-size:20px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.zona-banda .num{font-size:96px;font-weight:900;line-height:1}
.zona-banda .z{font-size:24px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.tarjeta{border:2px solid var(--borde);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.tarjeta b{display:block;font-size:18px}
.contacto{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--borde)}
.contacto .w{font-size:15px;color:var(--texto-2)}
.contacto button{min-height:46px;border:2px solid var(--azul);background:#fff;color:var(--azul);border-radius:10px;font-weight:700;font-size:15px;padding:6px 12px;cursor:pointer}

/* Modal del botón Preguntar */
.modal{position:absolute;inset:0;background:rgba(18,50,79,.55);display:flex;align-items:flex-end;z-index:5}
.modal .hoja{background:#fff;width:100%;border-radius:22px 22px 0 0;padding:20px}
.modal textarea{width:100%;min-height:130px;font:inherit;font-size:18px;border:2px solid var(--gris);border-radius:10px;padding:10px}
.burbuja-resp{background:var(--fondo-azul);border-radius:14px;padding:12px 14px;margin-bottom:10px;font-size:16px}
.burbuja-resp.mia{background:#fff;border:2px solid var(--borde)}
.burbuja-resp small{display:block;font-weight:700;color:var(--azul);font-size:13px;margin-bottom:2px}

.voto{display:flex;gap:12px;align-items:center;border:2px solid var(--borde);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.voto p{margin:0;flex:1;font-size:16.5px}
.voto button{flex:0 0 64px;min-height:58px;border:2px solid var(--azul);border-radius:10px;background:#fff;color:var(--azul);font-weight:900;font-size:16px;cursor:pointer;line-height:1.05}
.voto button.sel{background:var(--azul);color:#fff}

/* ───────── Pantalla grande (lienzo fijo de 1600 × 900; se escala) ───────── */
.pg{width:1600px;height:900px;background:#fff;color:var(--marino);overflow:hidden;font-size:30px;line-height:1.3}
.pg .logo{position:absolute;left:64px;top:44px;height:50px}
.pg .evento{position:absolute;right:64px;top:54px;font-size:21px;font-weight:500;color:var(--texto-2)}
.pg .cuerpo{position:absolute;left:96px;right:96px;top:140px;bottom:90px}
.pg h1{font-size:62px;line-height:1.06;font-weight:900;text-transform:uppercase;color:var(--azul-titulo);margin:0 0 16px}
.pg h2{font-size:40px;line-height:1.15;font-weight:700;color:var(--marino);margin:0 0 12px}
.pg .pie{position:absolute;left:96px;right:300px;bottom:34px;font-size:18px;color:var(--texto-2)}
.pg .deco{position:absolute;right:0;bottom:0;width:216px;height:144px}
.pg .deco i{position:absolute;width:72px;height:72px}
.pg .contador{display:inline-flex;flex-direction:column;align-items:flex-start}
.pg .contador b{font-size:96px;font-weight:900;color:var(--azul);line-height:1;font-variant-numeric:tabular-nums}
.pg .contador span{font-size:26px;color:var(--texto-2)}
.pg .ej{position:absolute;right:64px;top:96px;font-size:16px}
.pg.oscura{background:var(--marino);color:#fff}
.pg.oscura h1{color:#fff}
.pg.oscura h2{color:#fff}
.pg.oscura .pie,.pg.oscura .evento{color:#B9C7D4}
.placa-logo{position:absolute;left:64px;top:40px;background:#fff;border-radius:12px;padding:10px 18px}
.placa-logo img{height:44px;display:block}

/* Subasta */
.escala{position:absolute;left:96px;right:96px;bottom:150px;height:520px}
.escala .eje{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--marino)}
.escala .marca-eje{position:absolute;bottom:-44px;transform:translateX(-50%);font-size:22px;color:var(--texto-2);font-variant-numeric:tabular-nums}
.escala .marca-eje::before{content:"";position:absolute;left:50%;top:-14px;width:2px;height:10px;background:var(--marino)}
.punto{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--celeste);border:2px solid #fff;transform:translateX(-50%);animation:aparece .35s ease-out}
.punto.lejos{background:#9FB2C2}
.punto.top{background:var(--naranja);width:42px;height:42px;z-index:3;box-shadow:0 0 0 6px rgba(233,148,0,.25);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;color:var(--marino)}
.cinta{display:flex;gap:12px;margin-top:22px;height:44px;overflow:hidden}
.cinta span{flex:0 0 auto;border:2px solid var(--celeste);border-radius:999px;padding:4px 16px;font-size:22px;color:var(--marino);animation:aparece2 .4s}
.cinta span:first-child{background:var(--celeste);color:#fff;font-weight:700}
.etq-puja{position:absolute;transform:translate(-50%,-100%);background:#fff;border:2px solid var(--celeste);border-radius:999px;padding:4px 14px;font-size:20px;white-space:nowrap;z-index:4;animation:aparece .35s ease-out;color:var(--marino)}
.etq-puja.top{border-color:var(--naranja);font-size:24px;font-weight:700;padding:6px 16px}
.linea-real{position:absolute;top:-30px;bottom:0;width:6px;background:var(--verde);transform:translateX(-50%);z-index:2}
.linea-real span{position:absolute;top:-62px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:30px;font-weight:900;color:var(--marino);background:#fff;padding:2px 12px;border-radius:8px;border:3px solid var(--verde)}
@keyframes aparece{from{opacity:0;transform:translate(-50%,10px) scale(.6)}}
.punto.top,.etq-puja{animation-name:aparece2}
@keyframes aparece2{from{opacity:0}}

/* Barras de la pantalla */
.barras-v{display:flex;gap:60px;align-items:flex-end;height:430px;padding:0 40px;border-bottom:4px solid var(--marino)}
.barras-v .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative}
.barras-v .b i{display:block;width:100%;background:var(--azul);border-radius:8px 8px 0 0;transition:height .6s}
.barras-v .b.ok i{background:var(--verde)}
.barras-v .b em{font-style:normal;font-size:44px;font-weight:900;margin-bottom:8px;font-variant-numeric:tabular-nums}
.barras-v-lbl{display:flex;gap:60px;padding:0 40px;margin-top:14px}
.barras-v-lbl span{flex:1;text-align:center;font-size:28px;font-weight:700}
.apilada{display:flex;height:120px;border-radius:12px;overflow:hidden;margin:24px 0 18px}
.apilada div{display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;color:#fff}
.leyenda-ap{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;font-size:24px}
.leyenda-ap span i{display:inline-block;width:22px;height:22px;border-radius:4px;margin-right:10px;vertical-align:-3px}

.comparada{display:grid;grid-template-columns:420px 1fr;gap:18px 30px;align-items:center}
.comparada .preg{font-size:28px;font-weight:700;line-height:1.2}
.comparada .par .l{display:flex;align-items:center;gap:14px;margin:6px 0}
.comparada .par .l span{flex:0 0 250px;font-size:20px;color:var(--texto-2)}
.comparada .par .l i{display:block;height:36px;border-radius:0 8px 8px 0}
.comparada .par .l b{font-size:28px;font-variant-numeric:tabular-nums}

/* Pantalla de presentación (diapositivas de Diego) */
.diapo{position:absolute;inset:140px 96px 90px;border:3px dashed var(--borde);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--texto-2)}
.diapo b{font-size:44px;color:var(--marino)}

/* Grupos por zona */
.zonas{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;height:100%}
.zona-col{border-radius:16px;background:var(--fondo);overflow:hidden;display:flex;flex-direction:column}
.zona-col h3{margin:0;padding:16px 20px;font-size:30px;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
.zona-col .gr{margin:14px 16px 0;background:#fff;border-radius:12px;padding:14px 16px;font-size:22px;line-height:1.35}
.zona-col .gr b{display:block;font-size:30px;font-weight:900;color:var(--marino)}
.zona-col .vacia{margin:18px;font-size:20px;color:var(--texto-2)}

/* ───────── Panel del presentador ───────── */
.panel{background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(18,50,79,.18);overflow:hidden}
.panel-cab{background:var(--marino);color:#fff;padding:14px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.panel-cab img{height:30px;background:#fff;border-radius:6px;padding:4px 8px}
.panel-cab h2{margin:0;font-size:20px}
.panel-cab .ops{margin-left:auto;font-size:14px;color:#B9C7D4}
.panel-cab .ops b{color:#fff}
.contadores{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--borde)}
.contadores div{padding:14px 20px;border-right:1px solid var(--borde)}
.contadores b{display:block;font-size:34px;font-weight:900;color:var(--azul);font-variant-numeric:tabular-nums}
.contadores span{font-size:14px;color:var(--texto-2)}
.panel-grid{display:grid;grid-template-columns:1.35fr 1fr}
.lista-mom{border-right:1px solid var(--borde)}
.mom-fila{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:12px 18px;border-bottom:1px solid var(--borde);align-items:start}
.mom-fila .n{width:36px;height:36px;border-radius:8px;background:var(--fondo);display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--marino)}
.mom-fila.vig{background:var(--fondo-azul)}
.mom-fila.vig .n{background:var(--azul);color:#fff}
.mom-fila h4{margin:4px 0 8px;font-size:17px}
.mom-fila h4 small{font-weight:400;color:var(--texto-2);margin-left:6px}
.acc{display:flex;gap:6px;flex-wrap:wrap}
.acc button{min-height:40px;border:1px solid var(--borde);background:#fff;color:var(--marino);border-radius:8px;padding:6px 12px;font-size:14px;font-weight:500;cursor:pointer}
.acc button.on{background:var(--azul);color:#fff;border-color:var(--azul)}
.acc button.fuerte{background:var(--marino);color:#fff;border-color:var(--marino);font-weight:700}
.acc button.alerta{border-color:var(--error);color:var(--error);font-weight:700}
.lateral{padding:16px 18px}
.lateral h3{font-size:16px;margin:4px 0 10px;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-2)}
.preg-mod{border:1px solid var(--borde);border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:15px}
.preg-mod small{color:var(--texto-2);display:block;margin-bottom:4px}
.preg-mod .acc{margin-top:8px}
.preg-mod .acc button{min-height:34px;font-size:13px;padding:4px 9px}
.preg-mod.hecha{opacity:.55}
.export{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}

/* En un celular real, el prototipo muestra la vista del participante a pantalla completa (sin marco). */
@media (max-width:600px){
  .proto-barra{padding:8px 10px;gap:8px}
  .proto-barra .marca div{display:none}
  .momentos{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:2px}
  .vistas{margin-left:0;overflow-x:auto;max-width:100%}
  .proto-pasos{overflow-x:auto;flex-wrap:nowrap;padding:8px 10px}
  .proto-pasos .nota{display:none}
  .proto-pasos button{white-space:nowrap}
  .escenario{padding:0;gap:0}
  .col-cel{width:100%}
  .col-cel .rotulo{display:none}
  .cel{width:100%;height:calc(100vh - 150px);height:calc(100dvh - 150px);border-radius:0;padding:0;background:none;box-shadow:none;zoom:1!important}
  .cel-pant{border-radius:0}
  .cel-estado{display:none}
  .col-panel{padding:10px}
  .panel-grid{grid-template-columns:1fr}
  .contadores{grid-template-columns:1fr 1fr}
}

/* Caso práctico (momento 5) */
.tag-ficticio{font-size:20px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--naranja);color:var(--marino);border-radius:8px;padding:6px 14px}
.caso-req{font-size:19px;line-height:1.36;display:grid;gap:6px;border-left:8px solid var(--azul);background:var(--fondo-azul);padding:12px 18px;border-radius:0 10px 10px 0}
.caso-tabla{width:100%;border-collapse:collapse;font-size:17px;line-height:1.28}
.caso-tabla th{text-align:left;background:var(--marino);color:#fff;padding:8px 10px;font-size:18px}
.caso-tabla td{padding:5px 10px;border-bottom:1px solid var(--borde);vertical-align:top}
.caso-tabla td.id{font-size:30px;font-weight:900;color:var(--azul);width:46px;text-align:center}
.caso-tabla td.f{white-space:nowrap;font-weight:500}
.caso-preg{margin-top:6px;font-size:26px;font-weight:900;color:var(--azul-titulo)}
.caso-eti{font-size:24px;font-weight:700;color:var(--texto-2);text-transform:uppercase;letter-spacing:.06em}
.dist{display:grid;grid-template-columns:560px 1fr 110px;gap:24px;align-items:center;margin-bottom:22px;font-size:30px}
.dist .t{height:52px;background:var(--fondo);border-radius:8px;overflow:hidden}
.dist .t i{display:block;height:100%;background:var(--gris)}
.dist b{font-size:38px;font-variant-numeric:tabular-nums}
.dist.ok .o{font-weight:900;color:var(--marino)}
.dist.ok .t i{background:var(--verde)}
.leccion{display:inline-block;margin-top:26px;font-size:34px;font-weight:700;color:var(--marino);border-left:10px solid var(--verde);padding:8px 22px;background:#F3F9E8;border-radius:0 10px 10px 0}
.tl{position:relative;height:360px;margin-top:20px}
.tl-anio{position:absolute;top:0;font-size:22px;color:var(--texto-2);border-left:2px solid var(--borde);height:350px;padding-left:8px}
.tl-fila{position:absolute;left:0;right:0;height:56px}
.tl-id{position:absolute;left:30px;top:6px;font-size:36px;font-weight:900;color:var(--azul)}
.tl-barra{position:absolute;top:0;height:56px;border-radius:8px;background:var(--azul);color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:flex-end;padding:0 14px;white-space:nowrap;overflow:hidden}
.tl-barra.no{background:repeating-linear-gradient(135deg,#D5DDE4 0 12px,#C2CDD7 12px 24px);color:var(--marino)}
.tl-traslape{position:absolute;top:188px;height:152px;background:transparent;border:5px solid var(--naranja);border-radius:10px;z-index:2;box-shadow:0 0 0 4px rgba(233,148,0,.25)}
.tl-traslape span{position:absolute;top:-40px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:22px;font-weight:700;color:var(--marino)}
.tl-suma{font-size:40px;margin-top:6px}
.tl-suma b{color:var(--azul-titulo);font-weight:900}
.chips-tarjeta{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.chips-tarjeta span{width:54px;height:54px;border-radius:10px;background:var(--fondo);color:var(--texto-2);font-size:30px;font-weight:900;display:flex;align-items:center;justify-content:center}
.chips-tarjeta span.on{background:var(--azul);color:#fff}
.chips-tarjeta em{font-style:normal;margin-left:16px;font-size:22px;color:var(--texto-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.tarjeta-caso{border:3px solid var(--borde);border-radius:18px;overflow:hidden}
.tc-cab{display:flex;gap:22px;align-items:center;background:var(--marino);color:#fff;padding:14px 24px}
.tc-cab>b{font-size:64px;font-weight:900;line-height:1}
.tc-obj{font-size:26px;font-weight:700;line-height:1.2}
.tc-f{font-size:21px;color:#B9C7D4;margin-top:2px}
.tc-capa{display:grid;grid-template-columns:330px 1fr;border-top:2px solid var(--borde);min-height:82px}
.tc-q{background:var(--fondo-azul);padding:14px 22px;font-size:25px;font-weight:700;color:var(--azul-titulo);display:flex;align-items:center}
.tc-v{padding:12px 24px;font-size:25px;line-height:1.3;display:flex;align-items:center}
.tc-v.grande{font-size:38px;font-weight:900}
.tc-capa.oculta .tc-q{color:#9FB2C2}
.tc-capa.oculta .tc-v{background:repeating-linear-gradient(135deg,#F4F6F8 0 14px,#ECF0F3 14px 28px)}
.cadena-suma{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:30px}
.paso-suma{display:inline-flex;flex-direction:column;background:var(--fondo-azul);border-radius:10px;padding:8px 16px}
.paso-suma b{font-size:34px;font-weight:900;color:var(--marino)}
.paso-suma small{font-size:17px;color:var(--texto-2)}
.flecha-suma{font-size:34px;color:var(--gris)}
.parcial-suma{font-size:30px;color:var(--texto-2);margin-left:10px}
.total-suma{font-size:48px;font-weight:900;color:#fff;background:var(--azul);border-radius:12px;padding:6px 22px}

/* Mi grupo v2: razones por contacto */
.bloque-razon{border:2px solid var(--borde);border-left:6px solid var(--azul);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.bloque-razon.n2,.bloque-razon.n3,.bloque-razon.n0{border-left-color:var(--gris)}
.br-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.br-cab b{font-size:18px}
.br-tipo{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--azul-suave);color:var(--azul);border-radius:6px;padding:3px 7px;white-space:nowrap}
.bloque-razon.n2 .br-tipo,.bloque-razon.n3 .br-tipo{background:var(--fondo);color:var(--texto-2)}
.bloque-razon p{font-size:16px;margin:0 0 8px}

/* Modo incrustado (#embed): solo la vista, sin la barra del prototipo */
body.embed{background:transparent}
body.embed .proto-barra,body.embed .proto-pasos,body.embed .rotulo{display:none}
body.embed .escenario{padding:0}
body.embed .pg-marco{border-radius:0;box-shadow:none}
body.embed .cel{box-shadow:none}
body.embed *{animation:none!important;transition:none!important}
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
body.embed .solo-proto{display:none}
.revision{border:2px solid var(--naranja);background:#FFF8ED;border-radius:10px;padding:10px 14px;margin:0 0 10px;font-size:14px}
.revision ul{margin:6px 0;padding-left:18px}
.revision li{margin:3px 0}
.revision .nota-rev{margin:6px 0 0;color:var(--texto-2)}
.revision .rev-sub{margin-top:8px;font-weight:700;color:var(--marino)}
.revision .rev-met{margin:8px 0 0;font-weight:700;color:var(--azul)}
.aviso-error{background:#FDECEA;border-left:5px solid var(--error);border-radius:8px;padding:12px 14px;font-size:16px;font-weight:500;color:#7A1A14;margin-top:14px}
.ops-off .op{opacity:.45;cursor:not-allowed}
.salida-honesta{margin-top:18px;padding-top:14px;border-top:2px dashed var(--borde)}
.campo input.codigo{font-size:30px;letter-spacing:.35em;text-align:center;font-weight:700}
.enlace{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--azul);text-decoration:underline;cursor:pointer}
.enlace[disabled]{color:#8C9EAB;text-decoration:none;cursor:not-allowed}
.chk-mal{background:#FDECEA}
.nota-pres{font-size:14px;color:var(--texto-2);margin:0 0 8px}