/* ALBA APK 1.2.0 — interfaz inspirada en la referencia de nueve pantallas.
   Capa Android únicamente. Prioriza legibilidad y accesibilidad de 45 temas. */
:root { --mobile-accent:#0666d6; --mobile-accent-deep:#07449b; }
html { scroll-behavior:smooth; }
body:not(.dashboard-body) { background:#061937; color:#fff; }
.app:not(.welcome-active) { background:#061937; color:#fff; min-height:100dvh; }
.app:not(.welcome-active) .masthead {
  background:linear-gradient(180deg,#061937,#08264e);
  padding: max(31px,env(safe-area-inset-top)) 15px 15px;
  border-bottom:1px solid #204774;
  box-shadow:0 6px 25px #0002;
}
.app .masthead .brand strong { color:#fff; font-weight:950; font-size:clamp(12px,3.4vw,17px); }
.app .masthead .brand small { color:#cad9ee; font-weight:600; }
.app .masthead .brand-logo { width:53px; height:59px; flex-basis:53px; }
.app .masthead #openProgress { display:none!important; }
.mobile-settings-top {
  display:grid; place-items:center; flex:0 0 43px;
  height:43px; font-size:28px; line-height:1;
  color:#fff; background:#174a84; border:1px solid #3578b6;
  border-radius:12px;
}
.app:not(.welcome-active) main { padding:12px 14px 40px; }
#welcome .welcome-cta { background:linear-gradient(180deg,var(--mobile-accent),var(--mobile-accent-deep)); }
#welcome .welcome-credit { margin-top:18px; font-size:clamp(11px,2.8vw,14px); }

/* Portada principal: coche de patrulla y bloque de entrenamiento. */
#home .hero:not(.welcome-screen) {
  min-height:0;
  margin:0 0 16px; border-radius:19px;
  padding:145px 19px 21px;
  background: radial-gradient(circle at 50% 9%,#2b82d6 0%,#0a3766 29%,transparent 52%),
    linear-gradient(145deg,#05224d,#092c5c 69%,#062854);
  box-shadow:0 11px 25px #0004; position:relative;
  overflow:hidden; border:1px solid #255b8f;
}
#home .hero::before {
  content:""; pointer-events:none; position:absolute;
  width:100%;height:175px;left:0;top:0;
  background:url("COCHE_POLICIA.svg") center 26px / 77% auto no-repeat;
  filter:drop-shadow(0 10px 9px #0009);
}
#home .hero::after {
  content:"";position:absolute;inset:126px 0 0;border:0;border-radius:0;
  width:auto;height:auto;pointer-events:none;
  background:linear-gradient(180deg,transparent,#09284b 18%,#092c53 75%,#082551);
}
#home .hero > div { position:relative;z-index:2; }
#home .hero .eyebrow { color:#3be8eb; font-size:11px; }
#home .hero h1 { font-size:clamp(26px,7vw,36px); margin:9px 0 12px; }
#home .hero h1 em { color:#7de2fd; }
#home .hero p { color:#d6e7fd; font-size:clamp(12px,3.3vw,15px);line-height:1.45;margin:7px 0; }
#home .hero-flags { gap:9px 13px;font-size:11px;color:#d1ecff; }
#home .hero-flags span {display:inline-flex;max-width:100%;}

/* Acceso principal de cuatro opciones: navegación real. */
.mobile-tiles {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;margin:10px 0 16px;
}
.mobile-tile {
  border:1px solid #4582c4; border-radius:16px;
  min-height:111px; padding:15px 8px 13px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  box-shadow:inset 0 1px #ffffff2a,0 5px 12px #0005;
  color:#fff; text-align:center;font-size:clamp(12px,3.4vw,16px);font-weight:950;
}
.mobile-tile .tile-icon {font-size:34px;line-height:1.1;}
.tile-blue {background:linear-gradient(145deg,#056ddd,#044296);}
.tile-gold {background:linear-gradient(145deg,#cf8f18,#a66604);border-color:#efb955;}
.tile-teal {background:linear-gradient(145deg,#0e9eae,#056375);}
.tile-purple {background:linear-gradient(145deg,#7053d4,#463a9d);}
.mobile-tile:active {transform:scale(.98);}
#home .stats article {
  border-radius:15px;border-color:#2d6597;
  background:linear-gradient(130deg,#0a2b5a,#10467b);
}
#home .stats article label { color:#e5f5ff; }
#home .panel.settings {
  background:linear-gradient(135deg,#092953,#0c3b72);
  color:white;border:1px solid #2c669c;
}
#home .section-heading h2,#home .section-heading small {color:white;}
#home .theme-fields label,#home .fields label,#home #poolInfo {color:#e6f2ff;}
#home .theme-full-title {color:#ade2ff;}
#home select,#home .theme-trigger {background-color:#fff;color:#112e50;}
#home #start {background:linear-gradient(135deg,var(--mobile-accent),var(--mobile-accent-deep));}
#home .notes {color:#f4f8ff;}
#home .notes p {color:#b3cfe7;}
#home footer {color:#b0d1e7;border-color:#2f6093;}
#home footer .text-btn {color:#85c9ff;}
#home footer .text-btn.danger {color:#ffbdc4;}
/* Las funciones ya están en las cuatro tarjetas; ocultar el segundo acceso redundante. */
#home .oca-entry {display:none!important;}

/* Test: conservar campos blancos como en la referencia, sobre azul oscuro. */
#quiz {background:linear-gradient(155deg,#061a3b,#092b5f 55%,#071c3e);border:0;padding:5px 3px 27px;box-shadow:none;}
#quiz .quiz-header {margin-top:4px;}
#quiz .mode-tag {background:linear-gradient(130deg,var(--mobile-accent),var(--mobile-accent-deep));border-color:#438dee;}
#quiz #topicLabel {color:#fff!important;}
#quiz .progress {background:#1c4b85;}
#quiz .question-card {background:#edf5fe;border-radius:18px;border:1px solid #aac9ea;padding:15px 11px;}
#quiz .question-card #questionText {font-size:clamp(20px,5.5vw,26px);padding:14px 12px;color:#07192f;font-weight:950;}
#quiz .answer {border-radius:12px;line-height:1.45;font-size:clamp(14px,3.75vw,16px);padding:14px 11px;}
#quiz .answer .letter {width:30px;height:30px;flex-basis:30px;font-size:16px;}
#quiz #skip {background:#fff;color:#111;border-color:#c3d3e1;font-weight:950;}
#quiz #next {background:linear-gradient(135deg,#059a77,#005f50);color:#fff;}
#quiz .feedback {color:#113453;}
.explanation-open {
  width:100%;margin:13px 0 0;min-height:43px;
  background:#dcf0ff;color:#0751a7;border:1px solid #9fc8ed;border-radius:12px;
  font-weight:900;letter-spacing:.2px;
}

/* Pantallas TEMAS, CONFIGURACIÓN y EXPLICACIÓN. */
.mobile-screen { color:#fff; min-height:calc(100dvh - 120px); }
.mobile-screen-heading {display:flex;align-items:center;gap:9px;justify-content:space-between;margin:9px 0 17px;}
.mobile-screen-heading h1 {font-size:clamp(18px,5.1vw,25px);font-weight:950;line-height:1.15;letter-spacing:.2px;margin:0;}
.mobile-back {
  min-height:43px;border-radius:10px;padding:10px 15px;color:#fff;font-weight:900;
  background:linear-gradient(135deg,var(--mobile-accent),var(--mobile-accent-deep));
  border:1px solid #397ec5;
}
.theme-search-bar {display:grid;gap:6px;font-size:12px;color:#cde3f9;font-weight:800;margin-bottom:13px;}
.theme-search-bar input {
  min-height:49px;border-radius:12px;border:1px solid #528bb9;
  color:white;background:#174e87;font-size:15px;padding:12px 14px;outline:none;
}
.theme-search-bar input::placeholder {color:#c7d9ea;}
.mobile-theme-list {display:grid;gap:7px;}
.mobile-theme-choice {
  display:flex;align-items:center;text-align:left;gap:10px;min-height:54px;
  width:100%;color:white;border:1px solid #235c9a;border-radius:12px;
  background:linear-gradient(110deg,#0b2b58,#0b396e);
  padding:9px 12px;font-size:13px;font-weight:700;
}
.mobile-theme-choice:active {background:#154f9d;}
.mobile-theme-number {
  display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;
  background:var(--mobile-accent);border-radius:50%;font-weight:950;font-size:14px;
}
.mobile-theme-name {flex:1;min-width:0;line-height:1.35;}
.mobile-theme-arrow {font-size:24px;color:#a7c8eb;}
.mobile-note {font-size:12px;color:#c4ddf8;line-height:1.6;margin:17px 5px;}

/* Ajustes: valores persistentes, conectados a controles reales. */
.mobile-setting-list {display:grid;gap:9px;}
.mobile-setting-row {
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:linear-gradient(135deg,#0b2e5c,#0d427b);
  color:white;border:1px solid #2a639c;border-radius:14px;
  min-height:67px;padding:13px 13px;
}
.mobile-setting-row > span {display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
.mobile-setting-row b {font-size:14px;font-weight:900;}
.mobile-setting-row small {font-size:11px;line-height:1.3;color:#bdd6f2;}
.mobile-setting-row select {
  max-width:145px;min-width:96px;border-radius:11px;min-height:43px;
  border:1px solid #6999c6;color:#06305d;background:#f4faff;
  font-size:12px;font-weight:800;padding:7px;
}
.mobile-setting-row input[type=checkbox] {
  flex:0 0 auto;width:43px;height:24px;accent-color:var(--mobile-accent);
}
.mobile-setting-buttons {display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0;}
.mobile-setting-buttons button {
  min-height:38px;padding:8px 10px;border-radius:10px;
  border:1px solid #72a6db;background:var(--mobile-accent);
  color:#fff;font-size:11px;font-weight:900;
}

/* Explicación autónoma: misma pregunta, referencia y fundamentación del banco. */
.explanation-card {
  border-radius:17px;background:#f7fbff;color:#082444;padding:12px;
  border:1px solid #b7d2ef;box-shadow:0 8px 20px #0004;
}
.explanation-status {
  display:flex;align-items:center;min-height:57px;border-radius:12px;
  background:linear-gradient(135deg,#039c75,#05765c);color:white;
  font-size:17px;font-weight:950;padding:13px 16px;
}
.explanation-status.bad {background:linear-gradient(135deg,#bd4855,#963340);}
.explanation-body {
  background:#fff;color:#0d233d;font-size:15px;line-height:1.6;
  border-radius:11px;padding:17px 13px;margin:9px 0;
  white-space:pre-line;
}
.explanation-reference {background:#dceeff;border-radius:12px;color:#12365e;padding:14px;}
.explanation-reference strong {font-size:13px;line-height:1.4;color:#0c4f9c;}
.explanation-reference p {font-size:13px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap;}
.explanation-reference a {color:#004eab;display:inline-block;font-size:13px;font-weight:850;margin-top:5px;}
.explanation-next {
  display:block;width:100%;min-height:54px;margin:13px 0 30px;
  border:1px solid #2788ea;border-radius:13px;
  background:linear-gradient(135deg,var(--mobile-accent),var(--mobile-accent-deep));
  color:#fff;font-weight:950;font-size:16px;
}

/* Resultados: identidad visual equivalente a la referencia, cifras reales. */
#results {color:#fff;padding-bottom:30px;}
#results .result-hero {
  background:linear-gradient(145deg,#039e77,#00664f);
  border:1px solid #4fdaa8;border-radius:18px;
  padding:20px 14px 19px;margin:10px 0 11px;
}
#results .result-hero::before {content:"✓";display:grid;place-items:center;
  width:52px;height:52px;border-radius:50%;background:#ecfff8;
  color:#028461;font-size:32px;font-weight:950;margin:0 auto 10px;}
#results .result-hero .eyebrow {color:#ccfff0;}
#results .result-hero h1 {font-size:25px;line-height:1.2;}
#results .result-hero .grade {font-size:61px;color:#fff;letter-spacing:-1px;}
#results .result-hero>span {color:#d4fff2;}
#results .result-stats {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
#results .result-stats article {
  border-radius:12px;min-height:105px;border:1px solid #3c78ad;
  background:linear-gradient(130deg,#0d4482,#0b3065);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:13px;color:white;
}
#results .result-stats article:nth-child(1){background:linear-gradient(135deg,#068570,#045b52);border-color:#24b29a;}
#results .result-stats article:nth-child(2){background:linear-gradient(135deg,#ae3d53,#8f3046);border-color:#ca6e79;}
#results .result-stats label{color:#fff;font-weight:850;text-align:center;}
#results .result-stats b{color:#fff;font-size:31px;}
#results .panel {background:#0b3161;color:white;border:1px solid #2a659e;padding:17px 14px;}
#results .review-card {color:#eaf5ff;border-color:#275789;}
#results .review-card p,#results .review-card .ref {color:#cee1f6;}
#results .review-card .correct-text {color:#83ffe0;}
#results .review-card summary {color:#86c9ff;}
#results .section-heading h2 {color:white;}
#results .mobile-result-actions {display:grid;gap:9px;margin:17px 0 22px;}
#results .mobile-result-actions button {
  min-height:53px;border-radius:12px;border:1px solid #abc9eb;
  background:#fff;color:#073d83;font-weight:950;letter-spacing:.1px;
}
#results .mobile-result-actions #resultHome {
  background:linear-gradient(135deg,var(--mobile-accent),var(--mobile-accent-deep));
  border-color:#4d97dc;color:white;
}
#results .legacy-new-test {display:none!important;}

/* Oca: conservar las reglas y escudos reales; mejorar la presentación oscura. */
#oca {color:#fff;padding-bottom:25px;}
#oca .oca-top h1 {color:white;font-weight:950;}
#oca .oca-top small {color:#a4cfff;}
#oca .oca-top .oca-exit,#oca .oca-bottom #ocaReset {
  background:linear-gradient(135deg,var(--mobile-accent),var(--mobile-accent-deep));
  border:1px solid #4c99dc;color:#fff;
}
#oca .oca-setup {background:linear-gradient(135deg,#0b305e,#135a87);border:1px solid #3975a4;}
#oca .oca-scorebar {background:linear-gradient(115deg,#12365e,#0a5592);}
#oca .oca-boardwrap {
  background:linear-gradient(155deg,#0c4f8a,#041e47);
  border:2px solid #387dd2;box-shadow:0 11px 26px #0006;
}
#oca .oca-cell {border-radius:8px;}
#oca .oca-statuspanel {background:#11396d;border:1px solid #3975ac;color:#fff;}
#oca #ocaStatus {color:#e8f4ff;}
#oca .oca-die {background:#e6f4ff;color:#063468;}
#oca .oca-question {background:#f1f8ff;color:#123155;}
#oca .oca-bottom small {color:#b4d6fa;}
#oca .oca-gold {background:linear-gradient(135deg,var(--mobile-accent),var(--mobile-accent-deep));color:#fff;box-shadow:none;}
#oca .oca-feedback {color:#09294a;}

/* Mi progreso: modo oscuro y menú de entradas reales. */
.dashboard-body {
  background:linear-gradient(165deg,#061a3a,#092855 68%,#051a36);color:white;
}
.dashboard-body .report-nav {
  background:linear-gradient(160deg,#06172f,#0b2a57);
  padding:max(30px,env(safe-area-inset-top)) 15px 15px;
  border-bottom:1px solid #275d94;
}
.dashboard-body .report-brand strong {color:white;font-weight:950;}
.dashboard-body .report-brand small {color:#bfd5f1!important;}
.dashboard-body .report-back {background:linear-gradient(135deg,var(--mobile-accent),var(--mobile-accent-deep));color:white;}
.dashboard-body .report-main {padding:10px 14px 50px;}
.dashboard-body .report-intro {padding:19px 17px;background:transparent;border:0;box-shadow:none;}
.dashboard-body .report-intro h1 {font-size:28px;margin:7px 0;}
.dashboard-body .report-intro p {color:#d2e5ff;}
.dashboard-body .report-kpis {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.dashboard-body .kpi {min-width:0;min-height:112px;padding:12px 8px;text-align:center;
  background:linear-gradient(145deg,#1050a5,#07366f);border:1px solid #4781c3;
}
.dashboard-body .kpi:nth-child(2){background:linear-gradient(140deg,#058671,#045c54);border-color:#30b29b;}
.dashboard-body .kpi:nth-child(3){background:linear-gradient(140deg,#b23d54,#7f2d45);border-color:#cf7385;}
.dashboard-body .kpi:nth-child(4){grid-column:1 / -1;min-height:78px;}
.dashboard-body .kpi small {color:#fff!important;font-size:11px;font-weight:800;line-height:1.3;}
.dashboard-body .kpi strong {font-size:clamp(20px,5.4vw,28px);color:#fff!important;}
.dashboard-body .kpi .kpi-sub {font-size:9px;color:#e1ecfb!important;}
.dashboard-body .report-intro .report-backup {grid-template-columns:repeat(2,minmax(0,1fr));}
.mobile-progress-menu {display:grid;gap:8px;margin:16px 0 18px;}
.mobile-progress-menu a {
  display:flex;align-items:center;justify-content:space-between;gap:11px;
  min-height:51px;padding:12px 14px;color:#f3f8ff;text-decoration:none;
  border:1px solid #2b649e;border-radius:12px;
  background:linear-gradient(135deg,#0b3269,#08234c);
  font-size:14px;font-weight:850;
}
.mobile-progress-menu a span:last-child {font-size:24px;color:#8dcaff;}
.dashboard-body .report-card,.dashboard-body .topic-panel {
  background:linear-gradient(155deg,#e8f4ff,#cee5fb);
  border:1px solid #9fc8ef;box-shadow:none;
}
.dashboard-body .report-card h2,.dashboard-body .topic-panel h2 {color:#0d3563!important;}
.dashboard-body .report-card p,.dashboard-body .chart-subtitle {color:#294e72!important;}
.dashboard-body .report-disclaimer {color:#a3c3e8;}
@media(max-width:550px){
  #home .hero:not(.welcome-screen){padding-top:125px;}
  #home .hero::before{height:155px;background-size:80% auto;}
  #home .hero::after{top:108px;}
  #home .hero h1{font-size:clamp(26px,6.3vw,32px);}
  #oca .oca-board{gap:2px;}
  #oca .oca-cell{height:54px;}
  #oca .oca-cell small{font-size:6px;}
  .mobile-screen-heading h1{font-size:18px;}
  .mobile-setting-row{padding:12px 10px;}
  .mobile-setting-row b{font-size:12px;}
  .mobile-setting-row small{font-size:10px;}
}
/* Ajustes opcionales funcionales. */
html.alba-light .app:not(.welcome-active),html.alba-light body:not(.dashboard-body) {background:#e6f1ff;color:#10355f;}
html.alba-light .app:not(.welcome-active) .masthead {background:linear-gradient(160deg,#0c3868,#174f92);}
html.alba-light #quiz {background:linear-gradient(140deg,#2b6cb0,#16477e);}
html.alba-large .question-card h2,html.alba-large .oca-question h3 {font-size:26px!important;}
html.alba-large .answer,html.alba-large .oca-answer{font-size:18px!important;}
html.alba-xlarge .question-card h2,html.alba-xlarge .oca-question h3{font-size:29px!important;}
html.alba-xlarge .answer,html.alba-xlarge .oca-answer{font-size:21px!important;}


/* Afinado visual tras capturas reales en Xiaomi 24094RAD4G. */
.app:not(.welcome-active) .masthead #openProgress {
  display:none!important;
}
.app:not(.welcome-active) .masthead {
  padding-top: max(26px, env(safe-area-inset-top));
  padding-bottom:12px; gap:9px;
}
.app:not(.welcome-active) .masthead .brand small {display:none;}
.app:not(.welcome-active) .masthead .brand strong {
  max-width:none; font-size:clamp(13px,3.5vw,17px);
  line-height:1.22;letter-spacing:0;
}
.mobile-settings-top {width:42px;height:42px;flex-basis:42px;}
#home .hero::before {
  background-position:center 16px;
  background-size:auto 118px;
}
#home .hero:not(.welcome-screen) {padding-top:154px;}
#home .hero::after {top:130px;}
#home .hero .eyebrow {position:relative;}
#quiz .qchips {align-items:flex-start;}
#quiz .qchips #levelLabel {flex:0 0 auto;align-self:flex-start;}
#quiz .qchips #refLabel {flex:1 1 175px;align-self:flex-start;}
#quiz .question-card #questionText {
  font-size:clamp(18px,4.8vw,22px);line-height:1.46;
}
#quiz .answer {font-size:clamp(14px,3.7vw,16px);}
@media(max-width:550px){
 #home .hero::before {background-position:center 15px;background-size:auto 110px;}
 #home .hero:not(.welcome-screen){padding-top:140px;}
 #home .hero::after {top:117px;}
 #quiz .question-card #questionText {font-size:clamp(18px,4.8vw,21px);}
}


/* Casillas de la Oca: rótulos legibles sin invadir casillas vecinas. */
#oca .oca-board .oca-cell { overflow:hidden; isolation:isolate; }
#oca .oca-board .oca-cell > b { font-size:10px; top:3px; left:4px; z-index:3; }
#oca .oca-board .oca-cell .oca-symbol { font-size:21px; line-height:1; }
#oca .oca-board .oca-cell > small,
#oca .oca-board .oca-cell.oca-patrol > small {
  position:absolute; z-index:3;
  bottom:1px; left:1px; right:1px;
  display:block; max-width:100%; width:auto; margin:0;
  padding:0; text-align:center; overflow:hidden; text-overflow:clip;
  white-space:nowrap; font-size:6px!important; line-height:1.05!important;
  letter-spacing:-.25px; font-weight:950!important;
}
#oca .oca-board .oca-cell .oca-patrol-icon {top:15%;height:59%;width:83%;left:8%;}
#oca .oca-board .oca-cell.oca-current > small {color:#064c39!important;}
#oca .oca-boardwrap { position:relative; }
#oca .oca-boardwrap::after {
  content:'INICIO  ·  GORRA DE POLICÍA';
  display:flex;align-items:center;justify-content:flex-start;
  margin-top:9px;padding:8px 9px 8px 45px;
  min-height:36px;border:1px solid #5595d5;border-radius:10px;
  background:#093562 url('GORRA.PNG') left 7px center / 31px 26px no-repeat;
  color:#e8f3ff;font-size:10px;font-weight:900;letter-spacing:.3px;
}