/* Confianza Driving — prototipo del tutor personal
   Paleta oficial: crema #FAF7F0 · verde #3E8E4F · azul marino #1E3A5F */
:root{
  --crema:#FAF7F0;
  --crema-2:#F3EDDF;
  --verde:#3E8E4F;
  --verde-osc:#2F6E3D;
  --marino:#1E3A5F;
  --marino-suave:#33517A;
  --tinta:#2B2B28;
  --tinta-suave:#6B6B64;
  --linea:#E4DCC9;
  --blanco:#FFFFFF;
  --ambar:#F2B33D;
  --rojo:#C0392B;
  --sombra:0 2px 10px rgba(30,58,95,.08);
  --radio:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--crema);
  color:var(--tinta);
  line-height:1.5;
  padding-bottom:84px;
}
button{font:inherit;cursor:pointer}
img{max-width:100%}

/* ---------- barra superior ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;
  background:var(--crema);
  border-bottom:1px solid var(--linea);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-icon{width:40px;height:40px;border-radius:10px}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-weight:700;color:var(--marino);font-size:17px;letter-spacing:.2px}
.brand-sub{font-size:12px;color:var(--tinta-suave)}
.lang-toggle{
  border:1.5px solid var(--marino);color:var(--marino);background:transparent;
  border-radius:999px;padding:5px 14px;font-weight:700;font-size:13px;
}
.lang-toggle:active{background:var(--marino);color:#fff}

/* ---------- contenedor ---------- */
.app{max-width:560px;margin:0 auto;padding:20px 16px 8px}
.view{display:flex;flex-direction:column;gap:16px}
h1{font-size:24px;color:var(--marino);line-height:1.25}
h2{font-size:19px;color:var(--marino)}
p.lead{color:var(--tinta-suave);font-size:15px}
.small{font-size:13px;color:var(--tinta-suave)}

/* ---------- bienvenida ---------- */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding-top:14px}
.hero img{width:110px;height:110px;border-radius:26px;box-shadow:var(--sombra)}
.proto-label{
  display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.4px;
  color:var(--marino-suave);background:var(--crema-2);
  border:1px solid var(--linea);border-radius:999px;padding:4px 12px;text-transform:uppercase;
}
.phrase{font-style:italic;color:var(--verde-osc);font-size:15px;max-width:42ch}

/* ---------- botones ---------- */
.btn{
  display:block;width:100%;text-align:center;text-decoration:none;
  border:none;border-radius:var(--radio);padding:15px 18px;
  font-size:16.5px;font-weight:700;transition:transform .05s ease;
}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--verde);color:#fff}
.btn-navy{background:var(--marino);color:#fff}
.btn-ghost{background:transparent;color:var(--marino);border:1.5px solid var(--marino)}
.btn-danger{background:transparent;color:var(--rojo);border:1.5px solid var(--rojo)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- tarjetas de guía ---------- */
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:430px){.guide-grid{grid-template-columns:1fr}}
.guide-card{
  background:var(--blanco);border:2px solid var(--linea);border-radius:var(--radio);
  padding:18px 14px;text-align:left;display:flex;flex-direction:column;gap:8px;width:100%;
}
.guide-card.selected{border-color:var(--verde);box-shadow:var(--sombra)}
.guide-avatar{
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:25px;font-weight:800;color:#fff;
}
.guide-avatar.diego{background:var(--marino)}
.guide-avatar.lucia{background:var(--verde)}
.guide-name{font-size:18px;font-weight:700;color:var(--marino)}
.guide-desc{font-size:13.5px;color:var(--tinta-suave)}
.guide-greet{font-size:13.5px;font-style:italic;color:var(--tinta)}

/* ---------- acciones de inicio ---------- */
.action-card{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--blanco);border:1.5px solid var(--linea);border-radius:var(--radio);
  padding:18px;box-shadow:var(--sombra);
}
.action-ico{
  flex:0 0 52px;width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;
}
.action-ico.chat{background:var(--verde)}
.action-ico.quiz{background:var(--marino)}
.action-ico.signals{background:var(--ambar);color:var(--marino)}
.action-txt{display:flex;flex-direction:column}
.action-title{font-size:17px;font-weight:700;color:var(--marino)}
.action-sub{font-size:13.5px;color:var(--tinta-suave)}
.hello-card{
  background:var(--blanco);border:1.5px solid var(--linea);border-radius:var(--radio);
  padding:16px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--sombra);
}
.hello-card .guide-avatar{width:44px;height:44px;font-size:19px;flex:0 0 44px}
.linklike{background:none;border:none;color:var(--verde-osc);font-weight:700;text-decoration:underline;padding:0;font-size:14px}

/* ---------- chat ---------- */
.chat-log{display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;padding:11px 14px;border-radius:16px;font-size:15px;white-space:pre-wrap;word-wrap:break-word}
.msg.guide{background:var(--blanco);border:1px solid var(--linea);border-bottom-left-radius:4px;align-self:flex-start;box-shadow:var(--sombra)}
.msg.user{background:var(--verde);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.msg .who{display:block;font-size:11.5px;font-weight:700;color:var(--marino-suave);margin-bottom:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1.5px solid var(--verde);color:var(--verde-osc);background:#fff;
  border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:600;
}
.chip:active{background:var(--verde);color:#fff}
.chat-form{display:flex;gap:8px;position:sticky;bottom:84px;background:var(--crema);padding-top:6px}
.chat-form input{
  flex:1;border:1.5px solid var(--linea);border-radius:999px;padding:12px 16px;
  font:inherit;font-size:15px;background:#fff;min-width:0;
}
.chat-form button{
  border:none;background:var(--marino);color:#fff;border-radius:999px;
  padding:12px 18px;font-weight:700;font-size:15px;
}

/* ---------- examen ---------- */
.quiz-meta{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--tinta-suave)}
.progressbar{height:8px;background:var(--crema-2);border-radius:99px;overflow:hidden}
.progressbar > div{height:100%;background:var(--verde);border-radius:99px;transition:width .3s ease}
.q-card{background:var(--blanco);border:1.5px solid var(--linea);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:12px}
.q-theme{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--verde-osc)}
.q-text{font-size:17px;font-weight:600;color:var(--tinta)}
.q-opts{display:flex;flex-direction:column;gap:9px}
.q-opt{
  text-align:left;background:var(--crema);border:1.5px solid var(--linea);
  border-radius:12px;padding:13px 15px;font-size:15.5px;width:100%;
}
.q-opt.correct{border-color:var(--verde);background:#EAF4EC;font-weight:700}
.q-opt.wrong{border-color:var(--rojo);background:#FBEDEC}
.q-opt[disabled]{cursor:default}
.q-explain{font-size:14.5px;background:var(--crema-2);border-radius:12px;padding:12px 14px}
.q-explain strong{color:var(--marino)}
.score-big{font-size:44px;font-weight:800;color:var(--marino);text-align:center}
.state-pill{
  display:inline-block;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700;
}
.state-0{background:#EAF4EC;color:var(--verde-osc)}
.state-1{background:#FFF4DC;color:#8A5E00}
.state-2{background:#FBEDEC;color:var(--rojo)}
.state-none{background:var(--crema-2);color:var(--tinta-suave)}

/* ---------- avance ---------- */
.theme-row{
  background:var(--blanco);border:1.5px solid var(--linea);border-radius:var(--radio);
  padding:14px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sombra);
}
.theme-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.theme-name{font-weight:700;color:var(--marino);font-size:15.5px}
.state-btns{display:flex;gap:6px;flex-wrap:wrap}
.state-btn{
  border:1.5px solid var(--linea);background:var(--crema);border-radius:999px;
  padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--tinta-suave);
}
.state-btn.on{border-color:var(--marino);color:var(--marino);background:#EAF0F7}
.danger-zone{border:1.5px dashed var(--rojo);border-radius:var(--radio);padding:16px;display:flex;flex-direction:column;gap:10px;background:#FFF9F8}

/* ---------- señales ---------- */
.sig-cats{display:flex;gap:8px;flex-wrap:wrap}
.sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:380px){.sig-grid{grid-template-columns:1fr}}
.sig-card{background:var(--blanco);border:1.5px solid var(--linea);border-radius:var(--radio);padding:14px;text-align:center;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:8px;align-items:center}
.sig-card img{width:96px;height:96px;object-fit:contain}
.sig-name{font-weight:700;color:var(--marino);font-size:15px}
.sig-text{font-size:13px;color:var(--tinta-suave);text-align:left}
.ceda-tri{
  width:0;height:0;border-left:48px solid transparent;border-right:48px solid transparent;
  border-top:84px solid var(--rojo);position:relative;margin:6px auto;
}
.ceda-tri::after{
  content:"";position:absolute;left:-34px;top:-76px;width:0;height:0;
  border-left:34px solid transparent;border-right:34px solid transparent;border-top:60px solid #fff;
}

/* ---------- cabina: tablero / consola (inicio) ---------- */
.cockpit{
  background:linear-gradient(180deg,#2A4A73 0%,var(--marino) 58%,#18324F 100%);
  border-radius:22px;padding:14px 14px 16px;color:#EAF0F7;
  box-shadow:0 10px 24px rgba(30,58,95,.28);
  display:flex;flex-direction:column;gap:14px;
}
.dash{display:flex;align-items:center;gap:12px}
.gauge{
  flex:0 0 96px;width:96px;height:96px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 50% 42%,#F7F3E7 0 56%,#E9E2CE 57% 70%,#CBBF9F 71% 100%);
  box-shadow:inset 0 0 0 3px rgba(30,58,95,.18),0 3px 8px rgba(0,0,0,.30);
}
.gauge-num{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--marino);line-height:1;
}
.gauge-num b{font-size:23px;font-weight:800}
.gauge-num span{font-size:8.5px;font-weight:700;letter-spacing:.5px;margin-top:3px;color:var(--tinta-suave);white-space:nowrap}
.dash-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.dash-hello{font-size:16.5px;font-weight:700;color:#fff;line-height:1.25}
.dash-sub{font-size:13px;color:#C7D5E6}
.pill{
  display:inline-block;align-self:flex-start;border-radius:999px;padding:3px 11px;
  font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  background:rgba(242,179,61,.18);color:var(--ambar);border:1px solid rgba(242,179,61,.55);
}
.pill.ok{background:rgba(62,142,79,.28);color:#BFE6C7;border-color:rgba(120,200,140,.5)}
.dash .linklike{color:#EBD28A;font-size:13.5px;align-self:flex-start}
.console{
  background:rgba(10,22,38,.45);border:1px solid rgba(234,240,247,.16);
  border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:10px;
}
.console-label{font-size:10.5px;font-weight:800;letter-spacing:1.4px;color:#9FB8D2;text-transform:uppercase}
.glove{
  background:linear-gradient(180deg,#F3EDDF,#EAE1C9);color:var(--tinta);
  border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.65);
}
.glove-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px}
.glove-row b{color:var(--marino)}
.glove .btn{padding:11px 14px;font-size:14.5px;border-radius:12px}

@keyframes encender{
  0%{box-shadow:0 10px 24px rgba(30,58,95,.28),inset 0 0 0 rgba(242,179,61,0)}
  35%{box-shadow:0 10px 34px rgba(242,179,61,.45),inset 0 0 42px rgba(242,179,61,.28)}
  100%{box-shadow:0 10px 24px rgba(30,58,95,.28),inset 0 0 0 rgba(242,179,61,0)}
}
.cockpit.arranca{animation:encender 1.1s ease}
.gauge-wrap{position:relative;flex:0 0 96px;width:96px;height:96px}
.gauge-needle{
  position:absolute;left:50%;bottom:50%;width:3px;height:34px;border-radius:3px;
  background:var(--rojo);transform-origin:50% 100%;transform:translateX(-50%) rotate(-115deg);
  transition:transform .8s cubic-bezier(.3,1.4,.5,1);
}
@keyframes barrido{
  0%{transform:translateX(-50%) rotate(-115deg)}
  55%{transform:translateX(-50%) rotate(115deg)}
  100%{transform:translateX(-50%) rotate(var(--fin,-115deg))}
}
.gauge-needle.go{animation:barrido 1s cubic-bezier(.4,0,.3,1) forwards}
.gauge-hub{
  position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;
  background:var(--marino);transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px #F7F3E7;
}
.start-btn{
  flex:0 0 56px;width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  background:radial-gradient(circle at 35% 30%,#57A968,var(--verde) 62%,var(--verde-osc));
  color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.6px;line-height:1.15;
  box-shadow:0 4px 12px rgba(0,0,0,.35),inset 0 2px 3px rgba(255,255,255,.35);
}
.start-btn:active{transform:scale(.94)}
.dash-controls{display:flex;flex-direction:column;align-items:center;gap:4px}
.dash-controls .small{color:#9FB8D2;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:700}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;background:var(--blanco);border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  flex:1;background:none;border:none;padding:9px 2px 8px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11.5px;font-weight:600;color:var(--tinta-suave);
}
.tab-ico{font-size:18px;line-height:1}
.tab.active{color:var(--verde-osc)}

.voice-btn{display:inline-block;margin-top:9px;padding:7px 14px;border-radius:999px;border:1.5px solid var(--verde,#3E8E4F);background:#fff;color:var(--verde,#3E8E4F);font-size:13.5px;font-weight:700;cursor:pointer}
.voice-btn.playing{background:var(--verde,#3E8E4F);color:#fff}