/* ALBA v89 · ajuste visual compartido para Chrome Ubuntu, iPad y APK.
   Las reglas del test, la Oca y los datos de progreso no se modifican. */

/* Panel de seguimiento: alto contraste, sin fondos transparentes. */
.dashboard-body .report-intro{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,325px);
  gap:20px;align-items:center;isolation:isolate;overflow:hidden;
  padding:26px 28px!important;border-radius:20px!important;
  background:linear-gradient(140deg,#051b3d 0%,#082c61 57%,#0b4481 100%)!important;
  border:2px solid #397dbc!important;
  box-shadow:0 13px 30px rgba(2,15,35,.3)!important;
  color:#fff!important;
}
.dashboard-body .report-intro::before{opacity:.35}
.dashboard-body .report-intro .report-kicker{
  color:#ffdd59!important;font-weight:950!important;
  font-size:clamp(11px,2.6vw,14px)!important;letter-spacing:1px;
  line-height:1.35;
}
.dashboard-body .report-intro .report-dot{
  background:#ffdb54!important;box-shadow:0 0 0 4px #ffe06129!important;flex-shrink:0;
}
.dashboard-body .report-intro h1{
  color:#fff!important;font-size:clamp(25px,4.4vw,34px)!important;
  line-height:1.19!important;font-weight:950!important;
  letter-spacing:-.55px!important;margin:11px 0 10px!important;
}
.dashboard-body .report-intro h1 span{color:#fff!important}
.dashboard-body .report-intro p{
  color:#fff!important;font-size:clamp(13px,3.1vw,16px)!important;
  line-height:1.55!important;font-weight:800!important;
  opacity:1!important;max-width:700px;
}
.dashboard-body .report-intro .report-backup{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:center;gap:10px;width:100%;max-width:490px;
}
.dashboard-body .report-intro .report-btn{
  color:#fff!important;border-radius:12px!important;min-height:52px;
  white-space:normal;font-size:clamp(12px,2.8vw,15px);
  font-weight:950!important;text-align:center;padding:10px 8px;
  text-shadow:none!important;
}
.dashboard-body .report-intro .report-btn.outline{
  background:#05070c!important;border:1px solid #a5b7cd!important;color:#fff!important;
}
.dashboard-body .report-intro .report-btn.solid{
  background:linear-gradient(160deg,#082d65,#061f48)!important;
  border:1px solid #68a8ed!important;color:#fff!important;
}
.dashboard-body .report-intro .backup-status{grid-column:1 / -1;color:#fff!important}

/* Pantalla de acceso al entrenamiento: imagen aportada y textos centrados. */
#home .hero:not(.welcome-screen){
  grid-template-columns:1fr!important;display:flex!important;flex-direction:column;
  align-items:center!important;justify-content:center!important;
  text-align:center!important;min-height:0!important;
  padding:183px 22px 26px!important;
  background:radial-gradient(ellipse at 50% 8%,#154980 0%,#061f48 53%,#062147 100%)!important;
  border:1px solid #3779bc;border-radius:20px;position:relative;overflow:hidden;
}
#home .hero::before{
  content:"";position:absolute!important;display:block!important;
  left:0!important;top:0!important;right:0!important;width:100%!important;height:175px!important;
  background:url("coche.png") center 9px / auto 172px no-repeat!important;
  filter:drop-shadow(0 3px 13px #248ce43c);
  -webkit-mask-image:radial-gradient(ellipse 55% 67% at 50% 41%,black 48%,transparent 98%);
  mask-image:radial-gradient(ellipse 55% 67% at 50% 41%,black 48%,transparent 98%);
  z-index:1;pointer-events:none;
}
#home .hero::after{
  content:"";position:absolute!important;inset:auto 0 0!important;
  left:0!important;right:0!important;top:auto!important;
  width:100%!important;height:34px!important;border:0!important;border-radius:0!important;
  background:linear-gradient(0deg,#061e42,transparent)!important;pointer-events:none;
}
#home .hero > div{position:relative;z-index:2;width:100%;text-align:center!important}
#home .hero .eyebrow,#home .hero h1,#home .hero h1 em,#home .hero p{
  text-align:center!important;margin-left:auto!important;margin-right:auto!important;
}
#home .hero .eyebrow{color:#85f4ff!important}
#home .hero h1{color:#fff!important;line-height:1.19!important}
#home .hero h1 em{color:#a3eaff!important}
#home .hero p{max-width:600px!important;color:#e2eeff!important;font-weight:700}
#home .hero-flags{justify-content:center!important;gap:8px 13px}
#home .hero-flags span{justify-content:center}

/* Tablero nuevo inspirado en la referencia policial: recorrido en espiral,
   40 casillas reales, colores vivos y escudo central. */
#oca .oca-top{justify-content:space-between}
#oca .oca-top h1{color:#fff;font-weight:950}
#oca .oca-boardwrap{
  margin:17px auto!important;padding:10px!important;
  background:linear-gradient(155deg,#041633,#0b3876 45%,#03142f)!important;
  border:2px solid #4c95d9!important;border-radius:20px!important;
  box-shadow:0 14px 32px #0008,inset 0 0 20px #3196ff22!important;
}
#oca .oca-board{
  display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
  grid-template-rows:repeat(7,minmax(0,1fr))!important;
  width:100%;max-width:580px;margin:0 auto;
  aspect-ratio:0.9;gap:clamp(2px,0.65vw,5px)!important;
  padding:clamp(5px,1.2vw,11px);
  background:radial-gradient(circle at 50% 48%,#0a4b9b,#031635 73%)!important;
  border:2px solid #efc76a;border-radius:17px;
  box-shadow:inset 0 0 28px #0009;
  box-sizing:border-box;
}
#oca .oca-board > .oca-cell{
  position:relative;box-sizing:border-box;
  min-width:0;width:auto;min-height:0;height:100%!important;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  overflow:hidden;isolation:isolate;
  border-radius:clamp(5px,.9vw,11px)!important;
  border:1.5px solid #ffffff77!important;
  box-shadow:inset 0 2px 4px #ffffff29,0 2px 4px #0008!important;
  color:#fff;background:linear-gradient(160deg,#0c74c6,#074180);
}
#oca .oca-board > .oca-cell.oca-color-red{background:linear-gradient(155deg,#e03953,#9b183c)!important}
#oca .oca-board > .oca-cell.oca-color-blue{background:linear-gradient(155deg,#268bd6,#0b4c98)!important}
#oca .oca-board > .oca-cell.oca-color-teal{background:linear-gradient(155deg,#15b8aa,#097968)!important}
#oca .oca-board > .oca-cell.oca-color-sun{background:linear-gradient(155deg,#ffe476,#e2ac22)!important}
#oca .oca-board > .oca-cell.oca-color-green{background:linear-gradient(155deg,#68c46a,#267d42)!important}
#oca .oca-board > .oca-cell.oca-color-sun b,
#oca .oca-board > .oca-cell.oca-color-sun > small{color:#08254b!important;text-shadow:none}
#oca .oca-board > .oca-cell.oca-special[aria-label*="CÁRCEL"]{
  background:linear-gradient(155deg,#842948,#4e152f)!important;
  border-color:#f6a7c4!important;
}
#oca .oca-board > .oca-cell.oca-special[aria-label*="TRIPLE"]{
  background:linear-gradient(155deg,#693cc0,#351968)!important;
  border-color:#bd9dff!important;
}
#oca .oca-board > .oca-cell.oca-special[aria-label*="OCA"]{
  background:linear-gradient(155deg,#f9e28e,#d49b12)!important;
}
#oca .oca-board > .oca-cell.oca-final{
  background:linear-gradient(165deg,#fad985,#c58c1b)!important;
  border:2px solid #fff7c6!important;
}
#oca .oca-board > .oca-cell.oca-patrol{
  background:linear-gradient(155deg,#69cbf0,#1165a0)!important;
}
#oca .oca-board > .oca-cell b{
  position:absolute;z-index:3;top:clamp(1px,.45vw,4px);left:clamp(2px,.6vw,6px);
  color:#fff!important;text-shadow:0 2px 3px #001933;
  font-weight:950;font-size:clamp(9px,1.8vw,16px)!important;line-height:1;
}
#oca .oca-board > .oca-cell > small{
  position:absolute;bottom:2px!important;left:1px;right:1px;
  z-index:4;margin:0!important;white-space:nowrap;
  overflow:hidden;text-overflow:clip;text-align:center;
  color:#fff!important;font-size:clamp(5.5px,1.05vw,10px)!important;
  line-height:1.05!important;font-weight:950!important;
  text-shadow:0 1px 3px #00172e;letter-spacing:-.15px;
}
#oca .oca-board > .oca-cell .oca-symbol{
  font-size:clamp(17px,4vw,34px)!important;
  line-height:1;color:#fff!important;
}
#oca .oca-board > .oca-cell .oca-player-piece{
  width:86%!important;height:72%!important;left:7%!important;top:12%!important;
  object-fit:contain;filter:drop-shadow(0 2px 4px #06142f)!important;
}
#oca .oca-board > .oca-cell.oca-current{
  z-index:5!important;outline:3px solid #fbff97!important;outline-offset:-1px!important;
  box-shadow:0 0 0 2px #fff,0 0 15px #ffd949!important;
}
#oca .oca-board > .oca-cell.oca-final .oca-plaque-icon{
  width:82%!important;height:72%!important;left:9%!important;top:9%!important;object-fit:contain;
}
#oca .oca-board > .oca-cell.oca-patrol .oca-patrol-icon{
  width:90%!important;height:65%!important;left:5%!important;top:19%!important;object-fit:contain;
}
#oca .oca-center{
  grid-column:3 / span 3;grid-row:3 / span 3;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:2px;text-align:center;min-width:0;padding:5px;
  border-radius:20px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,#155ab5,#061e49 82%);
  box-shadow:0 0 0 2px #b89042,inset 0 0 27px #0007;
  color:#fff;pointer-events:none;
}
#oca .oca-center img{display:block;object-fit:contain;width:60%;max-height:48%;filter:drop-shadow(0 5px 9px #000a)}
#oca .oca-center strong{font-size:clamp(9px,1.9vw,17px);line-height:1.12;font-weight:950;letter-spacing:.2px}
#oca .oca-center small{color:#e8d297;font-size:clamp(6px,1vw,10px);font-weight:900;letter-spacing:.55px}
#oca .oca-boardwrap::after{
  content:"INICIO  ·  FICHA: GORRA POLICIAL  ·  META: PLACA";
  margin-top:9px;padding:9px 7px;display:block;
  border:1px solid #5e9cda;border-radius:10px;
  color:#fff;text-align:center;font-weight:950;letter-spacing:.3px;
  font-size:clamp(9px,2vw,13px);
  background:#082b5b!important;min-height:auto;
}
#oca .oca-bottom button,#oca .oca-exit{
  background:linear-gradient(160deg,#1069c5,#063c8b)!important;
  border:1px solid #519fe3!important;color:#fff!important;font-weight:900;
}
@media(max-width:750px){
  .dashboard-body .report-intro{
    grid-template-columns:minmax(0,1fr)!important;
    padding:20px 18px!important;gap:18px!important;
  }
  #home .hero:not(.welcome-screen){padding-top:174px!important}
  #home .hero::before{height:165px!important;background-size:auto 162px!important}
  #oca .oca-boardwrap{padding:5px!important;border-radius:12px!important}
  #oca .oca-board{aspect-ratio:.91}
  #oca .oca-board > .oca-cell .oca-symbol{font-size:clamp(15px,4.1vw,26px)!important}
  #oca .oca-board > .oca-cell > small{font-size:clamp(5px,1.45vw,8px)!important}
  #oca .oca-board > .oca-cell b{font-size:clamp(8px,2.3vw,13px)!important}
}
@media(max-width:390px){
  #home .hero:not(.welcome-screen){padding-top:160px!important}
  #home .hero::before{height:151px!important;background-size:auto 149px!important}
  #oca .oca-board{padding:4px;gap:2px!important}
  #oca .oca-board > .oca-cell > small{font-size:5px!important}
  #oca .oca-center strong{font-size:11px}
}