:root{
  --bg:#eef2f6; --card:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  /* Paleta corporativa LOLIMSA (Manual de Identidad, pags. 12-13).
     Principal #009469 (el que debe predominar) y secundario #174681.
     Se conservan los nombres --teal* para no reescribir 40 reglas; el valor es el oficial. */
  --teal:#009469; --teal-d:#00704f; --teal-l:#e0f5ef;
  --azul:#174681; --azul-d:#0f3260; --azul-l:#e8eef7;
  /* Texto pequeño sobre blanco: el verde de marca da 3.4:1 y WCAG AA pide 4.5:1.
     Este tono cumple 4.6:1 y se reserva para TEXTO; la marca no cambia. */
  --teal-txt:#00674a;
  /* Fondo de boton con texto blanco encima: el verde de marca da 3,86:1 y AA
     pide 4,5:1. Este tono da 5,36:1. Mismo matiz, solo mas oscuro. */
  --teal-btn:#007a56;
  --green:#009469; --amber:#d97706; --red:#dc2626;
  --shadow:0 6px 22px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);
  color:var(--ink);-webkit-text-size-adjust:100%;line-height:1.45}
.wrap{max-width:560px;margin:0 auto;padding:14px 14px 40px}

/* header */
.app-header{display:flex;align-items:center;gap:10px;padding:6px 2px 10px}
.logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--teal),#0891b2);
  display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.app-header h1{font-size:19px;margin:0;letter-spacing:.2px}
.app-header .tag{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* banner */
.banner{background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;padding:11px 13px;border-radius:12px;
  font-size:13px;margin-bottom:14px;display:flex;gap:9px;align-items:flex-start}
.banner svg{flex:0 0 auto;margin-top:1px}

/* stepper */
.steps{display:flex;align-items:center;gap:6px;margin:2px 0 16px;font-size:12px}
.step{display:flex;align-items:center;gap:6px;color:var(--muted);font-weight:600}
.step .dot{width:22px;height:22px;border-radius:50%;background:#cbd5e1;color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:12px;flex:0 0 auto}
.step.active{color:var(--teal)} .step.active .dot{background:var(--teal)}
.step.done .dot{background:var(--green)}
.steps .bar{flex:1;height:2px;background:var(--line);border-radius:2px}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;
  margin-bottom:14px;box-shadow:var(--shadow)}
.card h2{font-size:15px;margin:0 0 12px;color:var(--teal-d)}
.hint{font-size:13px;color:var(--muted);margin:6px 0 12px}

/* inputs & buttons */
label{display:block;font-size:13px;color:#334155;margin:10px 0 4px;font-weight:600}
input,select{width:100%;font-size:16px;padding:12px;border:1px solid #cbd5e1;border-radius:10px;
  background:#fff;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-l)}
.row{display:flex;gap:10px}.row>div{flex:1}
.btn{width:100%;font-size:16px;font-weight:600;padding:14px;border:0;border-radius:12px;cursor:pointer;
  background:var(--teal-btn);color:#fff;min-height:50px;margin-top:12px;transition:.15s;
  display:flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background:var(--teal-d)} .btn:disabled{background:#94a3b8;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--teal-txt);border:1.5px solid var(--teal)}
.btn.ghost:hover{background:var(--teal-l)}

/* segmented toggle */
.seg{display:flex;background:#eef2f6;border:1px solid var(--line);border-radius:11px;padding:3px;margin-bottom:12px}
.seg-btn{flex:1;border:0;background:transparent;color:var(--muted);font-weight:600;font-size:13.5px;
  padding:9px;border-radius:8px;cursor:pointer;min-height:auto;margin:0}
.seg-btn.active{background:#fff;color:var(--teal-d);box-shadow:0 1px 4px rgba(15,23,42,.1)}

/* capture */
.dropzone{border:2px dashed #cbd5e1;border-radius:14px;padding:22px;text-align:center;color:var(--muted);
  cursor:pointer;transition:.15s;background:#f8fafc}
.dropzone:hover{border-color:var(--teal);background:var(--teal-l);color:var(--teal-d)}
.dropzone svg{display:block;margin:0 auto 8px}
#fileInput{display:none}
.canvas-wrap{position:relative;margin-top:12px;display:none}
#canvas{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);touch-action:none;
  cursor:crosshair;display:block;background:#000}
.roi-tip{font-size:12px;color:var(--muted);margin-top:8px;display:flex;justify-content:space-between}

/* result */
.verdict{border-radius:14px;padding:16px;color:#fff;text-align:center;margin-bottom:14px}
.verdict.pos{background:linear-gradient(135deg,#dc2626,#b91c1c)}
.verdict.neg{background:linear-gradient(135deg,#16a34a,#15803d)}
.verdict .big{font-size:22px;font-weight:800;margin:2px 0}
.verdict .sub{font-size:13px;opacity:.95}
.gauge{height:16px;border-radius:9px;background:#e5e7eb;overflow:hidden;position:relative;margin:14px 0 6px}
.gauge .gfill{height:100%;border-radius:9px;transition:width .35s ease}
.gauge .gfill.pos{background:linear-gradient(90deg,#f59e0b,#dc2626)}
.gauge .gfill.neg{background:linear-gradient(90deg,#16a34a,#22c55e)}
.gauge-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.metric{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.metric .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.metric .v{font-size:17px;font-weight:700;margin-top:2px}
.note{font-size:12px;color:var(--muted);background:#f1f5f9;border-radius:10px;padding:10px 12px;margin-top:6px}

/* misc */
.hidden{display:none!important}
.muted{color:var(--muted);font-size:13px}
.err{color:var(--red);font-size:14px;margin-top:8px}
.ok{color:var(--green)}
.spinner{width:18px;height:18px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.center{display:flex;align-items:center;justify-content:center;gap:8px}
footer{text-align:center;color:#94a3b8;font-size:11px;margin-top:18px}

/* guia de uso */
details.guide{padding:14px 16px}
details.guide>summary{cursor:pointer;font-size:15px;font-weight:700;color:var(--teal-d);
  list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
details.guide>summary::-webkit-details-marker{display:none}
details.guide .g-hint{font-size:11px;color:var(--muted);font-weight:600;margin-left:auto}
details.guide[open]>summary{margin-bottom:4px}
.guide-steps{margin:10px 0 8px;padding-left:20px;font-size:13.5px;color:#334155}
.guide-steps li{margin:5px 0}
.guide-tips{background:#f0f9ff;border:1px solid #bae6fd;border-radius:12px;padding:11px 13px;margin-top:6px}
.guide-tips .gt-title{font-size:13px;font-weight:700;color:var(--teal-d);margin-bottom:6px}
.guide-tips ul{margin:0;padding-left:20px;font-size:12.5px;color:#334155}
.guide-tips li{margin:4px 0}
.guide-diagram{width:100%;height:auto;margin-top:10px;max-height:120px}
.guide-foot{font-size:11.5px;color:var(--muted);margin-top:10px}

/* aviso: foto no fiable */
.guide-valid{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:9px 11px;margin-top:8px;font-size:11.5px;line-height:1.5}
#capWarn .warn-card{background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:13px 15px;margin-top:10px}
#capWarn .warn-card>b{color:#b91c1c;font-size:14.5px}
#capWarn .warn-sub{font-size:12.5px;color:#7f1d1d;margin:5px 0 6px}
#capWarn ul{margin:0 0 10px;padding-left:20px;font-size:13px;color:#7f1d1d}
#capWarn li{margin:3px 0}

/* barra superior: idioma + ajustes */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:2px 0 4px;gap:8px}
.lang-quick{display:flex;gap:4px}
.langbtn{font-size:12px;font-weight:700;padding:5px 10px;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:8px;cursor:pointer;min-height:auto;margin:0}
.langbtn.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.iconbtn{font-size:18px;background:#fff;border:1px solid var(--line);border-radius:8px;width:34px;height:32px;cursor:pointer;line-height:1;padding:0}
.iconbtn:hover{background:var(--teal-l)}
#settingsCard .lang-options{display:flex;flex-direction:column;gap:8px;margin-top:4px}
#settingsCard .lang-options .langbtn{font-size:14px;padding:11px 13px;text-align:left}

/* cámara web */
#btnCam{margin-top:8px}
#camBox{margin-top:10px}
#camVideo{width:100%;max-height:55vh;border-radius:12px;background:#000;display:block}
#camBox .cam-actions{display:flex;gap:10px;margin-top:8px}
#camBox .cam-actions .btn{margin-top:0}

/* registro clínico */
.intake{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px;padding:12px;background:#f7f9fc;border-radius:12px;border:1px solid #e6ebf2}
.intake label{font-size:.82rem;font-weight:600;display:block;margin-bottom:3px;color:#334155}
.intake input,.intake select{width:100%;padding:9px 10px;border:1px solid #d5dce6;border-radius:9px;font-size:.95rem;background:#fff;box-sizing:border-box}
.intake-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.intake-doc{display:grid;grid-template-columns:auto 1fr;gap:8px}
.intake-chk{display:flex;align-items:flex-start;gap:8px;font-weight:500;font-size:.85rem;color:#334155}
.intake-chk input{width:auto;margin-top:3px;flex:0 0 auto}
.intake-chk.consent{background:#fff7ed;border:1px solid #fed7aa;border-radius:9px;padding:10px}
.hb-note{font-size:.8rem;color:#64748b;margin-top:8px}

.cam-status{font-size:.82rem;color:#475569;text-align:center;margin:6px 0;font-weight:500}

/* guard: captcha / bloqueo */
.guard-box{margin:0 0 12px}
.guard-box .warn-card{background:#fff7ed;border:1px solid #fdba74;border-radius:12px;padding:14px}
.guard-box .warn-card.block{background:#fef2f2;border-color:#fca5a5}
.guard-box .cap-q{margin:8px 0;font-size:1.05rem}
.guard-box .cap-inp{width:110px;padding:8px;border:1px solid #d5dce6;border-radius:8px;font-size:1rem;margin-right:8px}

/* ===== Guia visual paso a paso (6-ago) ===== */
.vguide{padding:16px 16px 14px}
.vg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.vg-title{font-size:15px;font-weight:700;color:var(--teal-d)}
.vg-count{font-size:12px;font-weight:600;color:var(--muted);background:var(--bg);
  border:1px solid var(--line);border-radius:20px;padding:3px 10px;font-variant-numeric:tabular-nums}
.vg-stage{position:relative;min-height:262px}
.vg-slide{display:none}
.vg-slide.active{display:block;animation:vgIn .22s ease}
@keyframes vgIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.vg-slide.active{animation:none}}
.vg-step-name{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:9px}
.vg-art{width:100%;height:auto;max-height:150px;border-radius:10px;background:#f8fafc;border:1px solid var(--line)}
.vg-list{margin:11px 0 0;padding-left:19px;font-size:12.5px;color:#334155;line-height:1.55}
.vg-list li{margin:5px 0}
.vg-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vg-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vg-ex{margin:0}
.vg-ex svg{width:100%;height:auto;display:block;border-radius:9px}
.vg-ex figcaption{font-size:11px;color:#475569;margin-top:6px;text-align:center;line-height:1.35}
.vg-tag{display:inline-block;font-weight:800;margin-right:2px}
.vg-tag.ok{color:var(--green)} .vg-tag.bad{color:var(--red)}
.vg-note{margin-top:11px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;
  border-radius:10px;padding:9px 11px;font-size:11.5px;line-height:1.5}
.vg-dots{display:flex;justify-content:center;gap:7px;margin:13px 0 11px}
.vg-dot{width:8px;height:8px;border-radius:50%;background:var(--line);cursor:pointer;transition:.2s}
.vg-dot.active{background:var(--teal);transform:scale(1.25)}
.vg-nav{display:flex;gap:9px}
.vg-btn{padding:11px;font-size:14px}
.vg-btn:disabled{opacity:.45}
/* contador de intentos en el resultado */
.try-count{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--teal-d);background:var(--teal-l);border:1px solid #bae6fd;
  border-radius:20px;padding:4px 11px;margin-top:10px;font-variant-numeric:tabular-nums}
.try-count.warn{color:#92400e;background:#fef3c7;border-color:#fcd34d}

/* ===== UX movil: guia como overlay, acceso sin scroll (6-ago) ===== */
.vg-overlay{position:fixed;inset:0;z-index:60;background:rgba(15,23,42,.55);
  display:flex;align-items:center;justify-content:center;padding:14px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;backdrop-filter:blur(2px)}
.vg-overlay.hidden{display:none}
.vg-overlay .vguide{position:relative;width:100%;max-width:440px;margin:auto;
  max-height:calc(100dvh - 28px);overflow-y:auto;box-shadow:0 18px 50px rgba(15,23,42,.3)}
.vg-overlay .vg-head{padding-right:38px}   /* la X no pisa el contador de pasos */
.vg-close{position:absolute;top:9px;right:10px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--muted);font-size:19px;line-height:1;
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:2}
.vg-close:hover{background:var(--bg);color:var(--ink)}
.help-btn{width:100%;display:flex;align-items:center;gap:9px;text-align:left;
  background:var(--teal-l);border:1px solid #bae6fd;border-radius:13px;
  padding:12px 14px;margin-bottom:12px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--teal-d);font-family:inherit}
.help-btn:hover{background:#cdeafd}
.help-btn .hb-arrow{margin-left:auto;font-size:19px;opacity:.6}
@media(max-width:520px){
  .app-header{gap:9px;margin-bottom:11px}
  .app-header h1{font-size:19px}
  .app-header .tag{font-size:10.5px;line-height:1.35}
  .banner{padding:9px 11px;font-size:11.5px;line-height:1.45;margin-bottom:11px}
  .banner svg{width:15px;height:15px;flex-shrink:0}
  .steps{margin-bottom:12px}
  .step span:not(.dot){font-size:11px}
  .card{padding:15px}
  .vg-overlay{padding:8px}
  .vg-overlay .vguide{max-height:calc(100dvh - 16px)}
}
/* Pantallas BAJAS (iPhone SE): el acceso entra sin scroll. El aviso "no es
   diagnostico" SE MANTIENE; solo su segunda linea pasa al footer y a la guia. */
@media(max-height:620px){
  .app-header{margin-bottom:8px;padding:2px 2px 6px}
  .app-header h1{font-size:17px}
  .app-header .tag{font-size:10px}
  .app-header .logo{width:34px;height:34px}
  .banner{padding:7px 10px;margin-bottom:8px;font-size:11px;line-height:1.4}
  .banner .b-detail{display:none}
  .steps{margin-bottom:9px}
  .help-btn{padding:10px 12px;margin-bottom:9px;font-size:12.5px}
  .card{padding:13px}
  footer{margin-top:10px;font-size:10px;line-height:1.35}
}

/* fotos reales dentro de la guia */
.vg-photo{width:100%;height:auto;display:block;border-radius:10px;object-fit:cover;
  border:2px solid var(--line)}
.vg-photo.ok{border-color:var(--green)}
.vg-photo.bad{border-color:var(--red)}
.vg-art-row{display:flex;align-items:center;gap:12px;background:#f8fafc;
  border:1px solid var(--line);border-radius:10px;padding:10px}
.vg-art-row .vg-photo{flex:1 1 auto;max-width:200px;border-color:#cbd5e1}
.vg-sun{flex:0 0 84px}
.vg-sun svg{width:100%;height:auto;display:block}
.vg-grid3 .vg-photo{aspect-ratio:1/1}
.vg-grid3 .vg-ex svg{aspect-ratio:1/1}

/* ===== Flujo en 2 pasos (6-ago) ===== */
.datos-sub{font-size:12px;margin:-6px 0 12px}
.form-err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:10px;
  padding:9px 11px;font-size:12px;margin:10px 0;line-height:1.45}
.quien{display:flex;align-items:center;gap:10px;background:var(--teal-l);
  border:1px solid #bae6fd;border-radius:11px;padding:9px 12px;margin-bottom:12px}
.quien-info{display:flex;flex-direction:column;min-width:0;flex:1}
.quien-nom{font-size:13.5px;font-weight:700;color:var(--teal-d);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quien-doc{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.quien-edit{flex:0 0 auto;background:#fff;border:1px solid var(--teal);color:var(--teal);
  border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.quien-edit:hover{background:var(--teal);color:#fff}
#btnOtraPersona{margin-top:9px}

/* ===== Ubicacion opcional + pista de zona (7-ago) ===== */
.geo-box{margin:10px 0 2px}
.geo-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;border:1.5px dashed var(--teal);color:var(--teal);border-radius:11px;
  padding:11px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.geo-btn:hover{background:var(--teal-l)}
.geo-btn.listo{border-style:solid;background:var(--teal-l)}
.geo-estado{font-size:11.5px;color:var(--muted);margin-top:6px;text-align:center;min-height:14px}
.geo-estado.ok{color:var(--green)}
.geo-estado.err{color:var(--amber)}
.hint-zona{font-size:11.5px;color:var(--teal-d);background:var(--teal-l);
  border:1px solid #bae6fd;border-radius:8px;padding:6px 9px;margin-top:6px}
.hint-zona.hidden{display:none}

/* ===== Marca LOLIMSA en la cabecera (R7) ===== */
.app-header{position:relative}
.marca{margin-left:auto;flex:0 0 auto;display:flex;align-items:center}
.marca-img{max-height:26px;max-width:96px;width:auto;display:block}
.marca-txt{display:none;font-size:12px;font-weight:800;letter-spacing:.06em;
  color:var(--teal-d);background:var(--teal-l);border:1px solid #bae6fd;
  border-radius:7px;padding:4px 9px}
@media(max-width:520px){.marca-img{max-height:22px;max-width:78px}.marca-txt{font-size:11px;padding:3px 7px}}


/* ===== Contraste WCAG AA en textos pequeños (7-ago) ===== */
.app-header .tag{color:#4a5b6b}          /* era var(--muted): 3.9:1 -> 5.4:1 */
.step span:not(.dot){color:#44566a}      /* rótulos del indicador de pasos */
.step.active span:not(.dot){color:var(--teal-txt)}
.langbtn.active{background:var(--teal-txt)}
.help-btn{color:var(--teal-txt)}
.quien-nom{color:var(--teal-txt)}
.vg-title{color:var(--teal-txt)}
footer{color:#5b6b7a}
.muted{color:#5b6b7a}

/* Textos pequeños en verde: el de marca no llega a 4,5:1 (ver --teal-txt) */
.geo-btn{color:var(--teal-txt)}
.geo-btn span{color:inherit}
.step.active{color:var(--teal-txt)}
.dropzone:hover{color:var(--teal-txt)}

/* La advertencia médica del resultado ("es un rango aproximado, no un valor
   exacto") daba 4,34:1 sobre su fondo gris y AA pide 4,5:1. Es justo el texto
   que NO puede costar leer: se oscurece a 5,66:1. */
.note{color:#556274}