/* =========================================================
   CLUB MÓNACO · Estilo de lujo sobre concreto
   Rojo #D21C24 · Plata #C9CCD4 · Grafito #232325 · Blanco #F5F5F5
   ========================================================= */
/* Tipografía alojada en el propio servidor (no se envían datos a terceros) */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fuentes/poppins-300.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fuentes/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fuentes/poppins-700.woff2') format('woff2'); }

:root {
  --rojo: #D21C24;
  --rojo-hondo: #9a1219;
  --plata: #C9CCD4;
  --plata-suave: rgba(201, 204, 212, .62);
  --blanco: #F5F5F5;
  --grafito: #232325;
  --linea: rgba(201, 204, 212, .16);
  --linea-fuerte: rgba(201, 204, 212, .34);
  --cromo: linear-gradient(140deg, #f7f8fa 0%, #a7aab2 32%, #eef0f4 52%, #868991 76%, #d4d7de 100%);
  --sombra: 0 30px 60px -24px rgba(0, 0, 0, .85);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #161617; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--blanco);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* Fondo: concreto de la marca, oscurecido para que todo respire */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(22,22,23,.35) 0%, rgba(14,14,15,.82) 70%, rgba(10,10,11,.95) 100%),
    url("fondo.webp") center / cover no-repeat,
    #222;
}
a { color: var(--blanco); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--plata); outline-offset: 3px; border-radius: 6px; }
.ico { width: 1.25em; height: 1.25em; flex: none; }

.pagina {
  max-width: 460px; margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
}

/* ---------- Logo ---------- */
.marca { text-align: center; margin: 4px 0 18px; }
.marca a { display: inline-block; }
.logo { display: block; width: 128px; height: auto; margin: 0 auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,.7)); }
.vista-inicio .logo { width: 236px; margin-top: 18px; }

/* ---------- Portada (inicio) ---------- */
.portada { text-align: center; margin: 6px 0 34px; }
.portada h1 {
  font-size: clamp(30px, 8.6vw, 38px); font-weight: 600; line-height: 1.12;
  letter-spacing: -.025em; margin: 0 0 14px;
}
.portada p { font-weight: 300; color: var(--plata); margin: 0 auto; max-width: 30ch; }

.pasos {
  list-style: none; padding: 0; margin: 0 0 36px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center;
}
.pasos li { display: grid; justify-items: center; gap: 2px; }
.paso-ico {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px;
  color: var(--blanco); font-size: 22px;
  background: radial-gradient(circle at 30% 25%, #3a3a3d, #1b1b1d 70%);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte), 0 10px 20px -8px rgba(0,0,0,.8);
}
.pasos li:first-child .paso-ico { background: radial-gradient(circle at 30% 25%, #ef3a42, var(--rojo-hondo) 75%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 10px 22px -8px rgba(210,28,36,.6); }
.pasos b { font-weight: 600; font-size: 15px; }
.pasos small { font-size: 13px; color: var(--plata-suave); }

/* ---------- Botones ---------- */
.botones { display: grid; gap: 12px; }
.boton {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 60px; padding: 14px 22px;
  font: inherit; font-weight: 600; font-size: 17px; letter-spacing: .005em;
  color: #fff; text-decoration: none; cursor: pointer;
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #e0262e 0%, var(--rojo) 45%, #b5151c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 28px -12px rgba(210,28,36,.75);
  transition: transform .12s ease, filter .12s ease;
}
.boton:active { transform: scale(.98); filter: brightness(.95); }
.boton-claro {
  background: rgba(255,255,255,.03); color: var(--blanco);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
}
.boton-claro .ico { color: var(--plata); }

.enlace {
  background: none; border: 0; padding: 12px; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--plata-suave); text-decoration: underline; text-underline-offset: 3px;
}
.volver {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px -4px;
  color: var(--plata); text-decoration: none; font-size: 16px; padding: 6px 4px;
}

/* ---------- Hoja (formularios) ---------- */
.hoja {
  background: linear-gradient(180deg, rgba(38,38,40,.78), rgba(24,24,25,.86));
  border-radius: 26px; padding: 30px 22px 24px;
  box-shadow: inset 0 0 0 1px var(--linea), var(--sombra);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hoja h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.hoja-sub { color: var(--plata); font-weight: 300; margin: 6px 0 24px; }
.form { display: grid; gap: 18px; }
.form .boton { margin-top: 6px; }
.campo, .form label { display: grid; gap: 8px; }
.campo > span, .form label { font-size: 15px; font-weight: 500; color: var(--plata); }
.ayuda { font-size: 14px; color: var(--plata-suave); margin: -6px 0 0; }
.hoja .ayuda.centro { margin: 16px 0 0; }

input:not([type=checkbox]):not([type=hidden]) {
  width: 100%; min-height: 60px; padding: 0 18px;
  font: inherit; font-size: 19px; font-weight: 500; color: #fff; letter-spacing: .01em;
  background: rgba(0,0,0,.28); border: 1px solid var(--linea-fuerte); border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: rgba(201,204,212,.35); font-weight: 400; }
input:focus { outline: none; border-color: var(--plata); box-shadow: 0 0 0 4px rgba(201,204,212,.12); }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--rojo); }

/* Casillas de clave */
.pin { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pin i { display: none; }
.pin.js i {
  display: grid; place-items: center; height: 68px; font-style: normal;
  font-size: 28px; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.28); border: 1px solid var(--linea-fuerte); border-radius: 14px;
  transition: border-color .15s ease;
}
.pin.js i.llena { border-color: var(--plata); }
.pin.js i.actual { border-color: var(--rojo); box-shadow: 0 0 0 4px rgba(210,28,36,.18); }
.pin input { grid-column: 1 / -1; }
.pin.js input {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; min-height: 0;
  opacity: 0; font-size: 16px; cursor: text;
}

/* ---------- Avisos ---------- */
.aviso {
  border-radius: 16px; padding: 14px 18px; margin: 0 0 16px; font-size: 15px;
  background: rgba(30,30,32,.9); box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  animation: entra .35s ease both;
}
.aviso a { color: #fff; font-weight: 600; }
.aviso-error { box-shadow: inset 0 0 0 1px rgba(210,28,36,.7); background: rgba(70,14,17,.75); }
.aviso-gratis {
  background: linear-gradient(180deg, #e0262e, var(--rojo-hondo)); text-align: center; font-size: 17px;
  box-shadow: 0 16px 32px -12px rgba(210,28,36,.7);
}
.aviso-premio { background: var(--cromo); color: #1a1a1b; text-align: center; box-shadow: none; }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }

/* =========================================================
   TARJETA DE LUJO (la pieza principal)
   ========================================================= */
.tarjeta {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 24px; padding: 22px 22px 20px;
  border: 1px solid transparent;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px) padding-box,
    radial-gradient(90% 70% at 100% 0%, rgba(210,28,36,.22), transparent 60%) padding-box,
    linear-gradient(150deg, #2e2e31 0%, #19191b 52%, #232326 100%) padding-box,
    var(--cromo) border-box;
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255,255,255,.08);
}
.tarjeta-brillo {
  position: absolute; inset: -40% -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.10) 50%, transparent 58%);
  transform: translateX(-60%);
  animation: brillo 1.6s .25s cubic-bezier(.3,.6,.2,1) both;
}
@keyframes brillo { to { transform: translateX(60%); } }

.tarjeta-cab { display: flex; justify-content: space-between; align-items: center; }
.tarjeta-club { font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--plata); }
.tarjeta-total { font-size: 13px; color: var(--plata-suave); }
.tarjeta-nombre {
  font-size: 26px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15;
  margin: 6px 0 20px; overflow-wrap: anywhere;
}

.sellos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }
.sello {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.34);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.06);
  color: rgba(201,204,212,.38);
}
.sello small { font-size: 13px; font-weight: 500; }
.sello .ico { width: 44%; height: 44%; }
.sello.lleno {
  color: #fff;
  background: radial-gradient(circle at 32% 28%, #f2434b 0%, var(--rojo) 45%, #8d1016 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.2), 0 6px 14px -4px rgba(210,28,36,.65);
  animation: sello .45s cubic-bezier(.3,1.5,.5,1) both;
  animation-delay: calc(.35s + var(--i) * .07s);
}
@keyframes sello { from { transform: scale(.4); opacity: 0; } }
.sello.gratis:not(.lleno) {
  background: var(--cromo); color: #1b1b1d;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.6);
}
.sello.gratis b { font-size: 11px; font-weight: 600; letter-spacing: .02em; }

.tarjeta-pie { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linea); }
.faltan { display: flex; align-items: center; gap: 16px; margin: 0; }
.faltan-num { font-size: 58px; font-weight: 600; line-height: .9; letter-spacing: -.04em; }
.faltan-texto { font-size: 16px; line-height: 1.35; color: var(--plata); }
.faltan-texto strong { color: #fff; font-weight: 600; }
.faltan-ya { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 18px; color: #fff; }
.faltan-ya .ico { color: var(--rojo); width: 34px; height: 34px; }
.faltan-ya strong { color: #ff4a52; }

/* ---------- Metas: gorra y colonia ---------- */
.metas { display: grid; gap: 18px; margin: 26px 4px 0; }
.meta { display: flex; gap: 14px; align-items: flex-start; }
.meta-ico {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 19px; color: var(--plata); box-shadow: inset 0 0 0 1px var(--linea-fuerte);
}
.meta-cuerpo { flex: 1; min-width: 0; padding-top: 2px; }
.meta-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.meta-num { color: var(--plata-suave); font-weight: 400; white-space: nowrap; }
.barra { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8d1016, var(--rojo) 70%, #f2434b); }
.meta-nota { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 8px 0 0; color: var(--plata); }
.meta-lista .meta-ico { background: var(--cromo); color: #1b1b1d; box-shadow: none; }
.meta-lista .meta-nota { color: #fff; font-weight: 600; }
.meta-lista .barra i { background: var(--cromo); }
.meta-hecha .meta-ico { color: #fff; }

/* ---------- Debajo de la tarjeta ---------- */
.vista-tarjeta .metas + .boton { margin: 30px 0 20px; }
.plegable { border-top: 1px solid var(--linea); }
.plegable:last-of-type { border-bottom: 1px solid var(--linea); }
.plegable summary {
  list-style: none; cursor: pointer; padding: 18px 2px; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center;
}
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary::after {
  content: ""; width: 9px; height: 9px; margin-right: 6px;
  border-right: 1.8px solid var(--plata); border-bottom: 1.8px solid var(--plata);
  transform: translateY(-3px) rotate(45deg); transition: transform .2s ease;
}
.plegable[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.plegable > :not(summary) { margin: 0 2px 18px; }
.reglas { padding-left: 18px; color: var(--plata); }
.reglas li { padding: 3px 0; }
.reglas li::marker { color: var(--rojo); }

.historial { list-style: none; padding: 0; margin: 0; }
.historial li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; font-size: 15px; border-bottom: 1px solid var(--linea); }
.historial li:last-child { border-bottom: 0; }
.chip {
  font-style: normal; font-size: 12px; font-weight: 600; color: #fff;
  background: var(--rojo); border-radius: 99px; padding: 2px 9px; margin-left: 4px;
}
.chip-premio { background: var(--cromo); color: #1b1b1d; }

.centro { text-align: center; }
.tenue { color: var(--plata-suave); font-size: 14px; }
.vista-tarjeta form.centro { margin-top: 18px; }

/* ---------- Pie ---------- */
.pie { text-align: center; color: rgba(201,204,212,.45); font-size: 13px; margin-top: 44px; }
.pie p { margin: 4px 0; }

/* =========================================================
   PANEL DE LA BARBERÍA
   ========================================================= */
.caja {
  background: linear-gradient(180deg, rgba(38,38,40,.78), rgba(24,24,25,.86));
  border-radius: 22px; padding: 20px; margin: 16px 0;
  box-shadow: inset 0 0 0 1px var(--linea), 0 20px 40px -24px rgba(0,0,0,.8);
}
.caja h2 { font-size: 20px; font-weight: 600; margin: 0 0 14px; }
details.caja summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; align-items: center; gap: 8px; }
details.caja summary::-webkit-details-marker { display: none; }
details.caja[open] summary { margin-bottom: 16px; }
.form .check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--blanco); font-weight: 400; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.stats div { text-align: center; padding: 12px 4px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linea); background: rgba(24,24,25,.7); }
.stats b { display: block; font-size: 24px; font-weight: 600; line-height: 1.1; }
.stats span { display: block; font-size: 11px; line-height: 1.25; color: var(--plata-suave); margin-top: 2px; }
.stats .alerta { box-shadow: inset 0 0 0 1px var(--plata); }

.buscar { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 16px 0; }
.buscar .boton { width: auto; min-height: 60px; padding: 0 22px; }

.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lista li {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px;
  border-radius: 18px; background: rgba(24,24,25,.78); box-shadow: inset 0 0 0 1px var(--linea);
}
.lista-info { flex: 1; min-width: 0; color: #fff; text-decoration: none; display: grid; gap: 1px; }
.lista-info b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.chips .chip { margin: 0; }

.boton-mini { width: auto; min-height: 48px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
.boton-grande { min-height: 66px; font-size: 18px; margin: 22px 0 14px; }
.boton-wa { background: rgba(255,255,255,.03); color: #fff; box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.boton-gris { background: rgba(255,255,255,.03); color: var(--plata); box-shadow: inset 0 0 0 1px var(--linea); font-weight: 500; font-size: 16px; }
.boton-premio { background: var(--cromo); color: #1b1b1d; box-shadow: 0 12px 24px -12px rgba(0,0,0,.8); }
.acciones { display: grid; gap: 10px; }
.peligro { color: #ff6b70; }

/* =========================================================
   PIEZAS NUEVAS: legal, fechas, menores, datos, precios, cumpleaños
   ========================================================= */
select {
  width: 100%; min-height: 60px; padding: 0 14px; appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 17px; font-weight: 500; color: #fff;
  background: rgba(0,0,0,.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CCD4' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat;
  border: 1px solid var(--linea-fuerte); border-radius: 14px; padding-right: 34px;
}
select:focus { outline: none; border-color: var(--plata); box-shadow: 0 0 0 4px rgba(201,204,212,.12); }
select option { background: #1d1d1f; color: #fff; }
.fecha { display: grid; grid-template-columns: .8fr 1.4fr 1fr; gap: 8px; }
.ayuda-campo { font-size: 13px; color: var(--plata-suave); }

.aviso-legal {
  display: flex; gap: 10px; margin: 2px 0 0; padding: 14px; border-radius: 14px;
  font-size: 13px; line-height: 1.5; color: var(--plata); background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--linea);
}
.aviso-legal .ico { color: var(--plata); margin-top: 2px; }
.aviso-legal a, .casilla a { color: #fff; }
.casilla { display: flex !important; gap: 12px; align-items: flex-start; font-size: 15px !important; font-weight: 400 !important; color: var(--blanco) !important; line-height: 1.45; cursor: pointer; }
.casilla input { margin-top: 1px; flex: none; }

.menor { border: 1px solid rgba(210,28,36,.55); border-radius: 16px; padding: 16px; margin: 0; display: grid; gap: 14px; }
.menor[hidden] { display: none; }
.menor legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.4; }
.menor legend + * { clear: both; }

.atajos { display: flex; justify-content: center; gap: 6px; margin-top: 22px; flex-wrap: wrap; }
.atajos a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; color: var(--plata); text-decoration: none; font-size: 15px; }
.atajos a:active { background: rgba(255,255,255,.06); }

.botones-tarjeta { margin: 30px 0 22px; }
.vista-tarjeta .metas + .boton { margin: 0; }
.plegable-link { display: block; padding: 18px 2px; color: var(--blanco); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--linea); position: relative; }
.plegable-link::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 1.8px solid var(--plata); border-bottom: 1.8px solid var(--plata); transform: translateY(-50%) rotate(-45deg); }
.plegable + .plegable-link { border-top: 1px solid var(--linea); }
.plegable:last-of-type { border-bottom: 0; }

.cumple {
  display: flex; gap: 14px; align-items: center; margin: 16px 0 0; padding: 16px 18px; border-radius: 18px;
  background: var(--cromo); color: #1b1b1d; box-shadow: var(--sombra);
}
.cumple p { margin: 0; font-size: 15px; line-height: 1.4; }
.cumple-ico { font-size: 26px; display: grid; }

.hoja + .hoja { margin-top: 14px; }
.hoja h2 { font-size: 19px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.hoja h2 + .hoja-sub { margin-bottom: 16px; }
.hoja-peligro summary { cursor: pointer; font-weight: 600; list-style: none; color: #ff8a8f; }
.hoja-peligro summary::-webkit-details-marker { display: none; }
.hoja-peligro[open] summary { margin-bottom: 8px; }
.boton-peligro { background: rgba(210,28,36,.16); color: #ffb3b6; box-shadow: inset 0 0 0 1px rgba(210,28,36,.7); }

.datos { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0 0 16px; font-size: 16px; }
.datos dt { color: var(--plata-suave); }
.datos dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }

.precios { list-style: none; padding: 0; margin: 0 0 22px; }
.precios li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.precios li:last-child { border-bottom: 0; }
.precios b { font-weight: 600; white-space: nowrap; }
.hoja .precios + h2 { margin-bottom: 4px; }

.legal { font-size: 15px; line-height: 1.6; }
.legal h1 { font-size: 24px; }
.legal h2 { font-size: 16px; margin: 26px 0 6px; color: #fff; }
.legal p, .legal li { color: #d6d8dd; }
.legal ul { padding-left: 20px; margin: 6px 0; }
.legal li { margin: 4px 0; }
.legal li::marker { color: var(--rojo); }
.legal a { color: #fff; }

.pie-legal { display: flex; justify-content: center; gap: 18px; margin-top: 14px !important; }
.pie-legal a { color: rgba(201,204,212,.7); font-size: 13px; }

/* ----- Panel: piezas nuevas ----- */
.sesion { display: flex; justify-content: space-between; align-items: center; margin: -6px 0 10px; font-size: 14px; color: var(--plata); }
.sesion span { display: inline-flex; align-items: center; gap: 6px; }
.sesion .enlace { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 8px 0; }
.pestanas { display: flex; gap: 4px; overflow-x: auto; margin: 0 -20px 16px; padding: 0 20px; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { flex: none; padding: 10px 16px; border-radius: 999px; color: var(--plata); text-decoration: none; font-size: 15px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--linea); }
.pestanas a.activa { background: var(--blanco); color: #161617; box-shadow: none; }

.servicios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.servicio {
  min-height: 64px; padding: 10px 12px; border: 0; border-radius: 16px; cursor: pointer; text-align: left;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.25; color: #fff;
  background: linear-gradient(180deg, rgba(210,28,36,.28), rgba(210,28,36,.14)); box-shadow: inset 0 0 0 1px rgba(210,28,36,.55);
}
.servicio:active { transform: scale(.98); }
.servicio-limp { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.boton-avance { margin: 0 0 16px; background: linear-gradient(180deg, #2fd570, #1a9c4c); box-shadow: 0 14px 28px -12px rgba(37,211,102,.6); }

.quien { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.vista-login .hoja h1 { margin-bottom: 18px; }
.vista-login .hoja-sub { margin-top: -10px; }
.bloqueo { font-size: 12px; color: var(--plata-suave); text-align: right; max-width: 42%; line-height: 1.3; }
.stats a { text-align: center; padding: 12px 4px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linea); background: rgba(24,24,25,.7); color: #fff; text-decoration: none; }
.stats a.alerta { box-shadow: inset 0 0 0 1px var(--plata); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-weight: 500; color: var(--plata-suave); padding: 8px 4px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 10px 4px; border-bottom: 1px solid var(--linea); }
.tabla th:not(:first-child), .tabla td:not(:first-child) { text-align: right; }
.mini-form { display: flex; gap: 6px; align-items: center; }
.mini-form input:not([type=hidden]) { width: 96px; min-height: 48px; font-size: 15px; padding: 0 10px; }
.lista li.inactivo { opacity: .55; }
.lista li { flex-wrap: wrap; }
.historial li { flex-wrap: wrap; }

@media (max-width: 370px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .pin { gap: 8px; }
  .faltan-num { font-size: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.admin .metas + form { margin-top: 22px; }

/* ----- Equipo (cuentas con correo) ----- */
.sesion a { display: inline-flex; align-items: center; gap: 6px; color: var(--plata); text-decoration: none; padding: 8px 0; }
.chip-gris { background: rgba(255,255,255,.1); color: var(--plata); }
.equipo { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.equipo > li { border-radius: 18px; background: rgba(24,24,25,.78); box-shadow: inset 0 0 0 1px var(--linea); }
.equipo > li.inactivo { opacity: .6; }
.equipo details { padding: 14px 16px; }
.equipo summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.equipo summary::-webkit-details-marker { display: none; }
.equipo summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 1.8px solid var(--plata); border-bottom: 1.8px solid var(--plata); transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }
.equipo details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.equipo details[open] summary { margin-bottom: 10px; }
.equipo .form { margin: 12px 0; }
.equipo .lista-info .tenue { overflow-wrap: anywhere; }