/**
 * Metrópoli 360 — Tableros de servicio.
 */

.m360t{
  --t-obsidiana:var(--m360-obsidiana,#12100E);
  --t-humo:var(--m360-humo,#1C1916);
  --t-cal:var(--m360-cal,#DED8C8);
  --t-tenue:var(--m360-cal-tenue,#9C9484);
  --t-oro:var(--m360-oro,#C89B3C);
  --t-arco:var(--m360-arco,#58C4EE);
  --t-linea:rgba(222,216,200,.2);

  border:1px solid var(--t-linea);
  background:var(--t-humo);
  color:var(--t-cal);
  overflow:hidden;
}
.m360t *{box-sizing:border-box}

/* Cabeza compartida */
.m360t-cabeza{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:20px 26px;border-bottom:1px solid var(--t-linea);
}
.m360t-titulo{
  font-family:'Limelight',cursive;font-size:18px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t-oro);margin:0;line-height:1.2;
}
.m360t-patrocinio{display:flex;align-items:center;gap:12px}
.m360t-patrocinio-etiqueta{
  font-family:'Archivo',sans-serif;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--t-tenue);
}
.m360t-patrocinio-marca{
  font-family:'Big Shoulders Display','Archivo',sans-serif;font-weight:700;font-size:20px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--t-cal);
}
.m360t-patrocinio-logo{max-height:32px;width:auto;display:block}

/* Pie compartido */
.m360t-pie{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 26px;border-top:1px solid var(--t-linea);
  font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-tenue);line-height:1.6;
}
.m360t-sello{color:var(--t-oro);white-space:nowrap}

/* ---------- Hoy No Circula ---------- */
.m360t-controles{display:grid;grid-template-columns:1fr auto;gap:0;border-bottom:1px solid var(--t-linea)}
.m360t-campo{padding:20px 26px}
.m360t-campo + .m360t-campo{border-left:1px solid var(--t-linea)}
.m360t-campo-etiqueta{
  display:block;font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t-tenue);margin-bottom:12px;
}
.m360t-placas{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.m360t-placa{
  aspect-ratio:1;background:none;border:1px solid var(--t-linea);color:var(--t-tenue);
  font-family:'Big Shoulders Display','Archivo',sans-serif;font-weight:700;font-size:20px;
  cursor:pointer;transition:all .18s;padding:0;
}
.m360t-placa:hover{border-color:var(--t-oro);color:var(--t-cal)}
.m360t-placa.m360t-activa{background:var(--t-oro);border-color:var(--t-oro);color:var(--t-obsidiana)}
.m360t-hologramas{display:flex;gap:6px}
.m360t-holograma{
  min-width:48px;padding:10px 12px;background:none;border:1px solid var(--t-linea);
  color:var(--t-tenue);cursor:pointer;transition:all .18s;
  font-family:'Big Shoulders Display','Archivo',sans-serif;font-weight:700;font-size:18px;
}
.m360t-holograma:hover{border-color:var(--t-oro);color:var(--t-cal)}
.m360t-holograma.m360t-activa{background:var(--t-oro);border-color:var(--t-oro);color:var(--t-obsidiana)}
.m360t-placa:focus-visible,.m360t-holograma:focus-visible{outline:2px solid var(--t-arco);outline-offset:2px}

.m360t-resultado{padding:0}
.m360t-instruccion{
  padding:44px 26px;text-align:center;font-family:'Archivo',sans-serif;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-tenue);
}

.m360t-veredicto{display:flex;align-items:center;gap:24px;padding:26px;flex-wrap:wrap}
.m360t-sello-grande{
  width:88px;height:88px;flex-shrink:0;border:3px solid;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.m360t-sello-grande svg{width:46px;height:46px}
.m360t-veredicto-txt{flex:1;min-width:200px}
.m360t-veredicto-titulo{
  font-family:'Big Shoulders Display','Archivo',sans-serif;font-weight:900;
  font-size:clamp(34px,5.5vw,50px);line-height:.9;text-transform:uppercase;
}
.m360t-veredicto-detalle{
  font-family:'Archivo',sans-serif;font-size:12.5px;color:var(--t-tenue);
  margin-top:10px;letter-spacing:.04em;line-height:1.6;
}
.m360t-engomado{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t-tenue);
}
.m360t-engomado-punto{width:12px;height:12px;border-radius:50%;display:inline-block}

.m360t-semana{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--t-linea)}
.m360t-dia{
  padding:14px 4px;text-align:center;border-right:1px solid var(--t-linea);
  display:flex;flex-direction:column;gap:8px;align-items:center;
}
.m360t-dia:last-child{border-right:0}
.m360t-dia-rotulo{
  font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t-tenue);
}
.m360t-dia-marca{width:26px;height:26px}
.m360t-dia-marca svg{width:100%;height:100%;display:block}
.m360t-dia--hoy{background:rgba(200,155,60,.1)}
.m360t-dia--hoy .m360t-dia-rotulo{color:var(--t-oro)}

.m360t-verificacion{padding:20px 26px;border-top:1px solid var(--t-linea)}
.m360t-verificacion-etiqueta{
  font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t-tenue);display:block;margin-bottom:10px;
}
.m360t-verificacion-valor{
  font-family:'Big Shoulders Display','Archivo',sans-serif;font-weight:700;
  font-size:23px;line-height:1.15;text-transform:uppercase;color:var(--t-cal);
}
.m360t-verificacion-valor span{color:var(--t-oro)}

.m360t-alerta{
  padding:16px 26px;background:rgba(193,69,47,.16);border-top:1px solid rgba(193,69,47,.5);
  font-family:'Archivo',sans-serif;font-size:12px;color:#E8A290;line-height:1.6;
}
.m360t-alerta strong{display:block;color:#F0B8A6;letter-spacing:.14em;text-transform:uppercase;font-size:11px;margin-bottom:5px}

/* ---------- Indicadores ---------- */
.m360t-cargando,.m360t-error{
  padding:44px 26px;text-align:center;font-family:'Archivo',sans-serif;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-tenue);
}
.m360t-error{color:#D97A5E}
.m360t-divisas{display:grid;grid-template-columns:repeat(2,1fr)}
.m360t-divisa{
  padding:24px 26px;border-right:1px solid var(--t-linea);
  display:flex;flex-direction:column;gap:6px;
}
.m360t-divisa:last-child{border-right:0}
.m360t-divisa-etiqueta{
  font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t-tenue);
}
.m360t-divisa-valor{
  font-family:'Big Shoulders Display','Archivo',sans-serif;font-weight:900;
  font-size:clamp(34px,5vw,46px);line-height:.9;color:var(--t-cal);
}
.m360t-divisa-valor sup{font-size:.4em;vertical-align:super;color:var(--t-oro);font-weight:600}
.m360t-divisa-nota{font-family:'Archivo',sans-serif;font-size:11px;color:var(--t-tenue)}

.m360t-manuales{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  border-top:1px solid var(--t-linea);
}
.m360t-indicador{
  padding:16px 12px;text-align:center;border-right:1px solid var(--t-linea);
  display:flex;flex-direction:column;gap:6px;
}
.m360t-indicador:last-child{border-right:0}
.m360t-indicador-etiqueta{
  font-family:'Archivo',sans-serif;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--t-tenue);
}
.m360t-indicador-valor{
  font-family:'Big Shoulders Display','Archivo',sans-serif;font-weight:700;
  font-size:23px;line-height:1;color:var(--t-cal);
}

/* Movimiento */
@keyframes m360t-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.m360t-veredicto,.m360t-semana,.m360t-verificacion,.m360t-divisa{animation:m360t-entra .45s ease both}
@media (prefers-reduced-motion:reduce){.m360t *{animation:none !important;transition:none !important}}

/* Responsivo */
@media(max-width:760px){
  .m360t-controles{grid-template-columns:1fr}
  .m360t-campo + .m360t-campo{border-left:0;border-top:1px solid var(--t-linea)}
  .m360t-placas{grid-template-columns:repeat(5,1fr)}
  .m360t-divisas{grid-template-columns:1fr}
  .m360t-divisa{border-right:0;border-bottom:1px solid var(--t-linea)}
}
@media(max-width:520px){
  .m360t-cabeza,.m360t-campo,.m360t-veredicto,.m360t-verificacion,.m360t-alerta{padding-left:18px;padding-right:18px}
  .m360t-pie{padding:12px 18px;font-size:9px}
  .m360t-veredicto{gap:16px;justify-content:center;text-align:center}
  .m360t-semana{grid-template-columns:repeat(4,1fr)}
  .m360t-dia:nth-child(4n){border-right:0}
  .m360t-dia:nth-child(-n+4){border-bottom:1px solid var(--t-linea)}
}