:root{
  --tinta:#0E1620;
  --panel:#16212E;
  --panel2:#1E2A38;
  --campo:#0B121B;
  --linea:#26364B;
  --papel:#EEF2F6;
  --gris:#8FA3B8;
  --adentro:#F0B429;
  --afuera:#3FBFA8;
  --mensual:#7AA7FF;
  --alerta:#E2603F;
  --sombra:0 2px 10px rgba(0,0,0,.18);
}

/* ---------- Modo claro ---------- */
[data-tema="claro"]{
  --tinta:#F1F4F7;
  --panel:#FFFFFF;
  --panel2:#E8EDF2;
  --campo:#F7F9FB;
  --linea:#DCE3EA;
  --papel:#14202C;
  --gris:#5D7085;
  --sombra:0 2px 10px rgba(20,32,44,.07);
}
[data-tema="claro"] .tarjeta{box-shadow:var(--sombra)}
[data-tema="claro"] .marcador.entrar{color:#04241F}
[data-tema="claro"] .marcador.salir{color:#2A1D00}
[data-tema="claro"] button{background:var(--papel);color:#fff}
[data-tema="claro"] button.secundario{background:transparent;color:var(--papel)}
[data-tema="claro"] .pestanas button.activa{background:var(--papel);color:#fff;border-color:var(--papel)}
[data-tema="claro"] .aviso{background:rgba(226,96,63,.08);color:#8C2E14}
[data-tema="claro"] .aviso.ok{background:rgba(63,191,168,.10);color:#0B5A4C}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  background:var(--tinta);color:var(--papel);
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;padding:18px 16px 40px;font-size:15px;line-height:1.5;
}
a{text-decoration:none;color:inherit}
.envoltorio{max-width:560px;margin:0 auto}
.envoltorio.ancho{max-width:860px}

.rotulo{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-weight:600;font-size:12px;color:var(--gris);
}
h1{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.04em;font-weight:700;font-size:30px;line-height:1.05;
}
h2{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-weight:600;font-size:15px;color:var(--gris);margin-bottom:10px;
}
.cabecera{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px}
.cabecera .sede{margin-top:4px}
.cabecera-marca{display:flex;align-items:center;gap:12px;min-width:0}
.cabecera-acciones{display:flex;gap:6px;flex:0 0 auto}
.logo{width:52px;height:52px;object-fit:contain;border-radius:10px;flex:0 0 auto}
button.icono{width:42px;padding:0;height:38px;font-size:17px;line-height:1}

.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:16px;margin-bottom:14px}
.doble{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:720px){.doble{grid-template-columns:1fr 1fr}.doble .tarjeta{margin-bottom:0}}

label{display:block;margin-bottom:14px}
label span{display:block;margin-bottom:6px}
input,select{
  width:100%;background:var(--campo);border:1px solid var(--linea);border-radius:10px;
  color:var(--papel);padding:13px 14px;font-size:16px;font-family:inherit;
}
input:focus,select:focus{outline:2px solid var(--afuera);outline-offset:1px;border-color:transparent}

button{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;font-size:16px;border:0;border-radius:10px;padding:14px 18px;
  background:var(--papel);color:var(--tinta);cursor:pointer;width:100%;
}
button:focus-visible{outline:2px solid var(--afuera);outline-offset:2px}
button.secundario{background:transparent;color:var(--papel);border:1px solid var(--linea)}
button.chico{width:auto;padding:9px 14px;font-size:13px}
button[disabled]{opacity:.6;cursor:not-allowed}
.fila-botones{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

/* Botón grande del escaneo */
.marcador{width:100%;border:0;border-radius:20px;padding:34px 20px;text-align:center;cursor:pointer;transition:transform .12s ease}
.marcador:active{transform:scale(.985)}
.marcador.entrar{background:var(--afuera);color:#06231F}
.marcador.salir{background:var(--adentro);color:#2A1D00}
.marcador.bloqueado{background:var(--panel2);color:var(--gris)}
.marcador .accion{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:700;
  font-size:44px;line-height:1;letter-spacing:.02em;display:block;
}
.marcador .detalle{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;margin-top:10px;opacity:.75;display:block}

.casilla{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;cursor:pointer}
.casilla input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--afuera)}
.casilla span{display:inline;margin:0;font-size:14px;color:var(--gris);line-height:1.45}

/* Selección de actividad */
.opcion{margin-bottom:10px}
.boton-actividad{
  width:100%;text-align:left;background:var(--panel);color:var(--papel);
  border:1px solid var(--linea);border-radius:14px;padding:16px;
  display:flex;flex-direction:column;gap:4px;text-transform:none;letter-spacing:0;
}
.boton-actividad:hover{border-color:var(--afuera)}
.boton-actividad.mensual{border-left:4px solid var(--mensual)}
.boton-actividad.bajo{border-left:4px solid var(--adentro)}
.boton-actividad:not(.mensual):not(.bajo){border-left:4px solid var(--afuera)}
.nombre-actividad{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em;
  font-weight:700;font-size:26px;line-height:1.05;
}
.estado-actividad{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--gris);letter-spacing:.04em}
.flecha{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:13px;color:var(--afuera);margin-top:6px;
}

.boton-actividad.sin-reserva{border-left:4px solid var(--gris)}
.boton-actividad.sin-reserva .flecha{color:var(--gris)}

/* Agenda de clases */
.dia-titulo{margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--linea)}
.clase{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px}
.clase-datos{display:flex;flex-direction:column;gap:2px;min-width:0}
.clase-hora{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;color:var(--afuera)}
.clase-nombre{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:20px;line-height:1.1}
.clase-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gris)}
.clase-accion{flex:0 0 auto;text-align:right}
.clase-accion form{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.clase.reservada{border-color:var(--afuera)}
.clase.completa{opacity:.6}
.clase.completa .clase-hora{color:var(--gris)}
.clase.cancelada{opacity:.5}
.clase.cancelada .clase-nombre{text-decoration:line-through}
.proxima{border-color:var(--mensual)}
.proxima .estado{color:var(--mensual)}

/* Saldo */
.saldo{text-align:center;border-color:var(--afuera)}
.saldo-numero{font-family:'IBM Plex Mono',monospace;font-size:52px;font-weight:600;line-height:1;margin:6px 0 4px;color:var(--afuera)}
.saldo-texto{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:40px;font-weight:700;line-height:1;margin:6px 0 4px;color:var(--mensual)}
.saldo.mensual{border-color:var(--mensual)}
.saldo.bajo{border-color:var(--adentro)}
.saldo.bajo .saldo-numero{color:var(--adentro)}
.saldo.vacio{border-color:var(--alerta)}
.saldo.vacio .saldo-numero{color:var(--alerta)}

.estado{font-size:18px;font-weight:600;margin:4px 0 6px}
.cronometro{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--adentro);letter-spacing:.08em}

/* Ficha de contadores */
.ficha{display:grid;grid-template-columns:1fr 1fr;border:1px dashed var(--linea);border-radius:12px;overflow:hidden;margin-bottom:14px}
.ficha div{padding:14px 16px}
.ficha div+div{border-left:1px dashed var(--linea)}
.ficha .numero{font-family:'IBM Plex Mono',monospace;font-size:30px;font-weight:600;line-height:1.1;display:block;margin-top:2px}
.ficha .numero.chico{font-size:20px}

/* Listas */
.lista{list-style:none}
.lista li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--linea);font-size:14px}
.lista li:last-child{border-bottom:0}
.lista form{width:auto}
.meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--gris)}
.etiqueta{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:12px;padding:3px 8px;border-radius:20px;border:1px solid var(--linea);white-space:nowrap}
.etiqueta.ingreso,.etiqueta.vigente{color:var(--afuera);border-color:var(--afuera)}
.etiqueta.egreso{color:var(--adentro);border-color:var(--adentro)}
.etiqueta.mensual{color:var(--mensual);border-color:var(--mensual)}
.etiqueta.consumida,.etiqueta.anulada{color:var(--gris)}
.etiqueta.vencida{color:var(--alerta);border-color:var(--alerta)}

/* Mensajes */
.aviso{border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:14px;border:1px solid var(--alerta);color:#FFD9CE;background:rgba(226,96,63,.12)}
.aviso.ok{border-color:var(--afuera);color:#CFF4EC;background:rgba(63,191,168,.12)}
.oculto{display:none}

/* Pestañas */
.contenedor-pestanas{position:relative;margin-bottom:14px}
.hamburguesa{display:none;margin-bottom:10px}
.pestanas{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:2px}
.pestanas button{width:auto;flex:0 0 auto;background:transparent;color:var(--gris);border:1px solid var(--linea);padding:9px 14px;font-size:13px;white-space:nowrap}
.pestanas button.activa{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
@media (max-width:720px){
  .hamburguesa{display:block}
  .pestanas{display:none;flex-direction:column;gap:6px}
  .pestanas.abierto{display:flex}
  .pestanas a{display:block;width:100%}
  .pestanas button{width:100%;text-align:center}
}
@media (min-width:721px){
  .layout-admin{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:start}
  .contenedor-pestanas{position:sticky;top:20px;margin-bottom:0}
  .pestanas{flex-direction:column;gap:8px}
  .pestanas a{display:block;width:100%}
  .pestanas button{width:100%;text-align:left;white-space:normal}
}

.pie{margin-top:22px;text-align:center}
.qr{background:#fff;padding:14px;border-radius:12px;display:inline-block}
.qr img,.qr svg{display:block;width:100%;max-width:260px;height:auto}
.centro-qr{display:flex;justify-content:center;margin:16px 0 4px}
.url{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gris);word-break:break-all;margin-top:10px;text-align:center}

/* ---------- Campo de contraseña con botón de mostrar/ocultar ---------- */
.con-ojo{display:flex;gap:6px;align-items:stretch}
.con-ojo input{flex:1;min-width:0}
.con-ojo .ojo{
  flex:0 0 auto;width:46px;padding:0;font-size:16px;line-height:1;
  background:transparent;color:var(--papel);border:1px solid var(--linea);border-radius:10px;
  cursor:pointer;
}
.con-ojo .ojo:hover{background:var(--panel2)}
.con-ojo .ojo.activo{border-color:var(--afuera);color:var(--afuera)}
code{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--papel)}

/* ---------- Ajustes para pantallas chicas ---------- */
@media (max-width:430px){
  body{padding:14px 12px 34px;padding-bottom:calc(34px + env(safe-area-inset-bottom))}
  h1{font-size:26px}
  .logo{width:44px;height:44px}
  .tarjeta{padding:14px;border-radius:12px}
  .marcador{padding:28px 16px;border-radius:18px}
  .marcador .accion{font-size:36px}
  .nombre-actividad{font-size:22px}
  .saldo-numero{font-size:44px}
  .ficha .numero{font-size:26px}
  .lista li{flex-direction:column;align-items:flex-start;gap:8px}
  .lista li form,.lista li>span:last-child{width:100%}
  .lista li>span:last-child{justify-content:flex-start}
  .lista li button{width:100%}
  .clase{flex-direction:row;align-items:center}
  .clase-accion form{align-items:stretch}
  .fila-botones button,.fila-botones a{flex:1 1 auto}
  .fila-botones a button{width:100%}
  .pestanas{margin-left:0;margin-right:0;padding:0}
}
@media (max-width:360px){
  .marcador .accion{font-size:31px}
  .clase-nombre{font-size:17px}
}

/* Área táctil mínima cómoda en el teléfono */
@media (pointer:coarse){
  button,select,input[type="date"],input[type="time"]{min-height:46px}
  .lista li{padding:14px 0}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Marca, profesores y acciones ---------- */
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--linea)}
.acciones-fila{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.acciones-fila form{width:auto}
.vista-previa{display:flex;align-items:center;gap:12px;background:var(--campo);border:1px solid var(--linea);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.vista-previa img{width:52px;height:52px;object-fit:contain;border-radius:8px}
.colores{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.colores label{margin-bottom:14px}
input[type="color"]{padding:4px;height:48px;cursor:pointer}
.muestra{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:13px;font-weight:600;padding:8px 16px;border-radius:20px}
.clase-encabezado{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
input[type="file"]{padding:10px;font-size:14px}
@media (max-width:430px){
  .colores{grid-template-columns:1fr 1fr}
  .acciones-fila{width:100%}
  .acciones-fila form,.acciones-fila a{flex:1 1 auto}
  .acciones-fila a button{width:100%}
}