/* Well Done — Food Manager EN/ES */

:root{
  /* paleta El Tarantin: rojo del toldo, verde de la hoja, crema del sitio */
  --bg:#fbf6ee; --card:#ffffff; --tinta:#141414; --suave:#6b645c;
  --linea:#eae0d0; --acento:#d4181c; --acento-suave:#fdeeed;
  --hoja:#99c22b; --hoja-tinta:#4f7a12;
  --verde:#15803d; --verde-bg:#eefbf2;
  --ambar:#b45309; --ambar-bg:#fff8ea;
  --rojo:#b91c1c; --rojo-bg:#fef2f2;
  --sobre-acento:#ffffff;
  --r:14px; --sombra:0 1px 2px rgba(28,25,23,.06), 0 8px 24px rgba(28,25,23,.05);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14110f; --card:#1f1b18; --tinta:#f5f1ec; --suave:#a8a09a;
    --linea:#332d28; --acento:#ff7a72; --acento-suave:#2e1614;
    --hoja:#99c22b; --hoja-tinta:#b8d95a;
    --verde:#4ade80; --verde-bg:#0f2417;
    --ambar:#fbbf24; --ambar-bg:#2a2110;
    --rojo:#f87171; --rojo-bg:#2a1414;
    --sobre-acento:#1c1917;   /* tinta oscura sobre los acentos claros del modo oscuro: 7,7:1 en vez de 2,3:1 */
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tinta);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ── cabecera ── */
.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--linea);
}
.marca{height:32px; width:auto; flex-shrink:0}
.brand{display:flex; flex-direction:column; line-height:1.15; flex:1}
.logo{font-family:Poppins,-apple-system,system-ui,sans-serif; font-weight:800; font-size:19px; letter-spacing:-.01em}
.tag{font-size:11px; color:var(--suave); letter-spacing:.06em; text-transform:uppercase}
.ghost{
  background:none; border:1px solid var(--linea); color:var(--suave);
  width:38px; height:38px; border-radius:11px; font-size:17px; cursor:pointer;
  flex-shrink:0;
}
.ghost:active{background:var(--linea)}

main{max-width:720px; margin:0 auto; padding:20px 16px 60px}
.view[hidden]{display:none}

h1,h2,h3{font-family:Poppins,-apple-system,system-ui,sans-serif}
h1{font-size:29px; line-height:1.15; letter-spacing:-.02em; margin:0 0 10px; font-weight:700}
h2{font-size:21px; letter-spacing:-.01em; margin:0 0 6px; font-weight:700}
.sub{color:var(--suave); margin:0 0 18px; font-size:14.5px}

/* ── inicio ── */
.hero{margin:8px 0 22px}
.hero p{color:var(--suave); margin:0; font-size:15.5px; max-width:34ch}

.semaforo-card{
  background:var(--card); border:1px solid var(--linea); border-radius:var(--r);
  padding:16px; margin-bottom:20px; box-shadow:var(--sombra);
}
.semaforo-card.vacia{color:var(--suave); font-size:14px; text-align:center; padding:20px}
.sem-fila{display:flex; gap:8px; margin:12px 0 6px; height:10px; border-radius:99px; overflow:hidden; background:var(--linea)}
.sem-seg{height:100%}
.sem-v{background:var(--verde)} .sem-a{background:var(--ambar)} .sem-r{background:var(--rojo)} .sem-s{background:var(--suave)}
.sem-leyenda{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--suave)}
.sem-leyenda b{color:var(--tinta)}
.punto{display:inline-block; width:8px; height:8px; border-radius:99px; margin-right:5px}

.menu{display:grid; gap:10px}
.tile{
  display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto;
  gap:2px 12px; text-align:left; cursor:pointer;
  background:var(--card); border:1px solid var(--linea); border-radius:var(--r);
  padding:16px; color:inherit; font:inherit; box-shadow:var(--sombra);
  transition:transform .12s ease, border-color .12s ease;
}
.tile:active{transform:scale(.985); border-color:var(--acento)}
.tile .ico{grid-row:1/3; font-size:24px; align-self:center}
.tile .t{font-weight:650; font-size:16px}
.tile .d{color:var(--suave); font-size:13.5px}

.firma{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:30px; padding-top:18px; border-top:1px solid var(--linea)}
.firma img{height:40px; width:auto}
.firma .f1{font-family:Poppins,-apple-system,system-ui,sans-serif; font-weight:700; font-size:14px; line-height:1.2}
.firma .f2{font-size:12px; color:var(--hoja-tinta); font-weight:600}
.legal-link{color:var(--acento); text-decoration:underline}
.legal{margin-top:14px; font-size:11.5px; color:var(--suave); line-height:1.5; text-align:center}

/* ── dominios ── */
.lista-dominios{display:grid; gap:9px}
.dom{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 12px;
  background:var(--card); border:1px solid var(--linea); border-left-width:4px;
  border-radius:var(--r); padding:14px 16px; cursor:pointer; text-align:left;
  color:inherit; font:inherit; width:100%;
}
.dom:active{background:var(--acento-suave)}
.dom-n{font-weight:600; font-size:15px}
.dom-m{grid-column:1/2; font-size:12.5px; color:var(--suave)}
.dom-pct{font-weight:700; font-size:17px; font-variant-numeric:tabular-nums}
.dom.v{border-left-color:var(--verde)} .dom.v .dom-pct{color:var(--verde)}
.dom.a{border-left-color:var(--ambar)} .dom.a .dom-pct{color:var(--ambar)}
.dom.r{border-left-color:var(--rojo)}  .dom.r .dom-pct{color:var(--rojo)}
.dom.n{border-left-color:var(--linea)} .dom.n .dom-pct{color:var(--suave)}

/* ── pregunta ── */
.q-top{display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:12.5px}
.q-dominio{color:var(--acento); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:11px; flex:1}
.q-contador{color:var(--suave); font-variant-numeric:tabular-nums}
.q-timer{font-variant-numeric:tabular-nums; font-weight:700; color:var(--tinta); background:var(--linea); padding:3px 9px; border-radius:99px}
.q-timer.poco{background:var(--rojo-bg); color:var(--rojo)}
/* el reloj también vive en la cabecera pegajosa: se ve aunque bajes a las opciones */
.hdr-timer{font-variant-numeric:tabular-nums; font-weight:700; font-size:16px; color:var(--tinta); background:var(--linea); padding:6px 12px; border-radius:99px; margin-right:8px}
.hdr-timer.poco{background:var(--rojo-bg); color:var(--rojo)}
.aviso-tiempo{background:var(--rojo-bg); color:var(--rojo); border-radius:var(--r); padding:10px 14px; font-weight:600; margin:0 0 12px}
.tile.continuar{border-color:var(--acento)}
.simulacros{margin-top:12px; background:var(--card); border:1px solid var(--linea); border-radius:var(--r); padding:10px 14px}
.simulacros h3{margin:0 0 4px; font-size:14px}
.sim-fila{display:flex; gap:10px; align-items:center; font-size:14px; padding:6px 0; border-top:1px solid var(--linea)}
.sim-fila small{color:var(--suave); margin-left:auto; text-align:right}
.aviso-instalar{font-size:13px; color:var(--suave); background:var(--card); border:1px dashed var(--linea); border-radius:var(--r); padding:10px 12px; margin:12px 0 0}
.respaldo{display:flex; gap:8px; margin-top:14px}
.secundario.chico{font-size:13px; padding:9px 10px; flex:1}
/* ── puerta de instalación ── */
.puerta{position:fixed; inset:0; z-index:50; background:var(--bg); overflow:auto; padding:calc(24px + env(safe-area-inset-top)) 16px 40px}
.puerta[hidden]{display:none}
body.con-puerta{overflow:hidden}
.puerta-caja{max-width:440px; margin:0 auto; display:flex; flex-direction:column; gap:14px; text-align:center}
.puerta-caja img{height:48px; width:auto; align-self:center}
.puerta-caja h2{font-size:24px; margin:0}
.puerta-caja .sub{margin:0}
.puerta-pasos{text-align:left; background:var(--card); border:1px solid var(--linea); border-radius:var(--r); padding:14px 16px; box-shadow:var(--sombra)}
.puerta-pasos p{margin:0 0 10px; font-size:14.5px}
.puerta-pasos ol{margin:0; padding-left:22px; display:grid; gap:9px}
.puerta-pasos li{font-size:15px; line-height:1.45}
.puerta-pasos .ic{display:inline-block; vertical-align:-4px; width:19px; height:19px; margin:0 2px}
.puerta-pasos b{color:var(--tinta)}
.puerta-nota{font-size:12.5px; color:var(--suave); margin:0}
#puerta-seguir{align-self:center}
.beta{background:var(--ambar-bg); color:var(--ambar); border:1px solid color-mix(in srgb, var(--ambar) 35%, transparent); border-radius:10px; padding:7px 12px; font-size:12.5px; font-weight:600; text-align:center; margin:-6px 0 14px}
.aviso-banco{width:100%; border:0; background:var(--acento); color:var(--sobre-acento); padding:9px 12px; font-weight:600; font-size:14px; cursor:pointer}

.barra{height:3px; background:var(--linea); border-radius:99px; overflow:hidden; margin-bottom:18px}
.barra-fill{height:100%; background:var(--hoja); width:0; transition:width .3s ease}

.q-card{
  background:var(--card); border:1px solid var(--linea); border-radius:var(--r);
  padding:20px; box-shadow:var(--sombra);
}
.q-stem{font-size:17px; line-height:1.6; margin:0 0 16px; font-weight:450}

.ayuda{
  display:flex; align-items:baseline; gap:8px; width:100%;
  background:var(--acento-suave); border:1px dashed var(--acento); color:var(--acento);
  border-radius:10px; padding:9px 14px; cursor:pointer; font:inherit; font-size:14px;
  margin-bottom:14px;
}
.ayuda span{font-weight:600}
.ayuda small{opacity:.75; font-size:12px}
.ayuda[hidden]{display:none}
.ayuda.chica{padding:7px 12px; font-size:13px; margin:0 0 10px; border-style:dotted}

.q-es{
  background:var(--acento-suave); border-radius:10px; padding:14px 16px; margin-bottom:16px;
  border-left:3px solid var(--acento);
}
.q-stem-es{margin:0 0 10px; font-size:15px; line-height:1.55}
.opciones-es{list-style:none; margin:0; padding:0; font-size:14px; color:var(--suave)}
.opciones-es li{margin:4px 0}

.opciones{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.opcion{
  display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start;
  background:var(--bg); border:1.5px solid var(--linea); border-radius:11px;
  padding:13px 14px; cursor:pointer; font:inherit; font-size:15px; line-height:1.45;
  color:inherit; text-align:left; width:100%;
  transition:border-color .12s ease, background .12s ease;
}
.opcion:active{border-color:var(--acento)}
.opcion .letra{
  font-weight:700; color:var(--suave); width:24px; height:24px; border-radius:7px;
  background:var(--linea); display:grid; place-items:center; font-size:12.5px;
}
.opcion.buena{border-color:var(--verde); background:var(--verde-bg)}
.opcion.buena .letra{background:var(--verde); color:var(--sobre-acento)}
.opcion.mala{border-color:var(--rojo); background:var(--rojo-bg)}
.opcion.mala .letra{background:var(--rojo); color:var(--sobre-acento)}
.opcion.elegida{border-color:var(--acento); background:var(--acento-suave)}
.opcion:disabled{cursor:default}

/* ── feedback ── */
.feedback{margin-top:16px; border-radius:var(--r); padding:18px; border:1px solid var(--linea); background:var(--card)}
.feedback.ok{border-color:var(--verde); background:var(--verde-bg)}
.feedback.ok-es{border-color:var(--ambar); background:var(--ambar-bg)}
.feedback.no{border-color:var(--rojo); background:var(--rojo-bg)}
.f-titulo{font-weight:700; font-size:16px; margin:0 0 4px; display:flex; align-items:center; gap:8px}
.f-sub{margin:0 0 14px; font-size:13.5px; color:var(--suave)}
.cambia-idioma{
  background:color-mix(in srgb, var(--tinta) 6%, transparent); border:1px solid var(--linea);
  color:var(--suave); border-radius:9px; padding:7px 12px; font:inherit; font-size:13px;
  cursor:pointer; margin:0 0 14px;
}
.cambia-idioma:active{background:var(--linea)}
.f-bloque{margin:0 0 12px}
.f-bloque h4{margin:0 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--suave)}
.f-bloque p{margin:0; font-size:14.5px; line-height:1.55}
.f-malas{margin:0; padding-left:18px; font-size:13.5px; color:var(--suave); line-height:1.5}
.f-malas li{margin:4px 0}
.f-trampa{
  margin-top:14px; padding:11px 13px; border-radius:9px;
  background:color-mix(in srgb, var(--tinta) 5%, transparent);
  font-size:13.5px; line-height:1.5;
}
.f-trampa b{color:var(--acento)}

.q-acciones{display:flex; gap:10px; margin-top:18px}
.primario{
  font-family:Poppins,-apple-system,system-ui,sans-serif;
  flex:1; background:var(--acento); color:var(--sobre-acento); border:none; border-radius:12px;
  padding:15px; font:inherit; font-weight:650; font-size:16px; cursor:pointer;
}
.primario:active{filter:brightness(.92)}
.primario.grande{padding:18px; font-size:17px}
.secundario{
  background:none; border:1px solid var(--linea); color:var(--suave);
  border-radius:12px; padding:15px 18px; font:inherit; font-size:14px; cursor:pointer;
}

/* ── examen ── */
.reglas{background:var(--card); border:1px solid var(--linea); border-radius:var(--r); padding:20px; margin-bottom:20px; box-shadow:var(--sombra)}
.reglas ul{margin:12px 0; padding-left:20px; font-size:15px; line-height:1.7}
.reglas .nota{margin:14px 0 0; padding-top:14px; border-top:1px solid var(--linea); font-size:14px; color:var(--suave)}

/* ── resultado ── */
.puntaje{text-align:center; padding:26px 0 20px}
.puntaje .num{font-size:60px; font-weight:800; letter-spacing:-.04em; line-height:1}
.puntaje .num.aprobado{color:var(--verde)}
.puntaje .num.reprobado{color:var(--rojo)}
.puntaje .de{color:var(--suave); font-size:15px; margin-top:6px}
.veredicto{font-size:19px; font-weight:700; margin-top:12px}

.diag{
  background:var(--card); border:1px solid var(--linea); border-radius:var(--r);
  padding:18px; margin:18px 0; box-shadow:var(--sombra);
}
.diag h3{margin:0 0 12px; font-size:16px}
.diag-fila{display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--linea); font-size:14.5px}
.diag-fila:last-child{border:0}
.diag-fila b{font-variant-numeric:tabular-nums}
.veredicto-idioma{
  margin-top:14px; padding:14px; border-radius:10px; background:var(--ambar-bg);
  border-left:3px solid var(--ambar); font-size:14.5px; line-height:1.55;
}

.tabla-dom{width:100%; border-collapse:collapse; font-size:14.5px}
.tabla-dom td{padding:9px 0; border-bottom:1px solid var(--linea)}
.tabla-dom td:last-child{text-align:right; font-weight:700; font-variant-numeric:tabular-nums}
.tabla-dom tr:last-child td{border:0}

/* ── glosario ── */
#buscar-glosario{
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--linea);
  background:var(--card); color:inherit; font:inherit; font-size:16px; margin-bottom:16px;
}
#buscar-glosario:focus{outline:2px solid var(--acento); outline-offset:1px; border-color:transparent}
.glosario{display:grid; gap:8px}
.termino{
  background:var(--card); border:1px solid var(--linea); border-radius:11px; padding:13px 15px;
}
.termino .en{font-weight:650; font-size:15px}
.termino .es{color:var(--suave); font-size:14px; margin-top:2px}
.termino.ojo{border-color:var(--ambar); background:var(--ambar-bg)}

/* ── números ── */
.num-grupo{background:var(--card); border:1px solid var(--linea); border-radius:var(--r); padding:18px; margin-bottom:12px; box-shadow:var(--sombra)}
.num-grupo h3{margin:0 0 12px; font-size:15px; color:var(--acento)}
.num-fila{display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--linea); font-size:14.5px}
.num-fila:last-child{border:0}
.num-fila b{text-align:right; font-variant-numeric:tabular-nums}
.escalera{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; line-height:1.9; white-space:pre-wrap; margin:0}

@media (min-width:600px){
  h1{font-size:38px}
  .menu{grid-template-columns:1fr 1fr}
  .tile:first-child{grid-column:1/3}
}