/* ==========================================================================
   SISTEMA DE IMPACTO FITNESS — hoja de estilos del panel y del portal
   La línea gráfica sale de la web (css/styles.css) y de las piezas de redes
   del Drive (2026/DISEÑOS): Russo One en mayúsculas, lima #DCFF00 sobre
   carbón, botones píldora, etiquetas con rayita lima, brillo lima en la
   esquina y la palabra gigante de fondo. El panel va sobrio (es herramienta
   de trabajo); el portal, más expresivo.
   ========================================================================== */

:root {
  --lima: #dcff00;
  --lima-suave: rgba(220, 255, 0, 0.12);
  --lima-borde: rgba(220, 255, 0, 0.35);
  --tinta: #0e0e0e;
  --tarjeta: #151515;
  --tarjeta-2: #1c1c1c;
  --linea: rgba(255, 255, 255, 0.08);
  --linea-fuerte: rgba(255, 255, 255, 0.16);
  --texto: #ffffff;
  --suave: #a3a3a3;          /* 7,6:1 sobre la tinta */
  --ok: #dcff00;             /* al día = el lima de la marca */
  --aviso: #ffc94d;
  --malo: #ff4d4d;           /* el rojo del CrossBox de la web, apenas más claro para leerse */
  --display: "Russo One", "Arial Black", sans-serif;
  --cuerpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radio: 14px;
  --radio-sm: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  /* El brillo lima de las piezas, en la esquina de arriba: se apaga antes de llegar a ningún borde */
  background: radial-gradient(ellipse 55% 460px at 100% 0, rgba(220, 255, 0, 0.15), transparent 70%) no-repeat, var(--tinta);
  color: var(--texto);
  font: 15px/1.55 var(--cuerpo); -webkit-font-smoothing: antialiased;
}
a { color: var(--lima); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }

/* ---- Tipografía de marca ---- */
.titulo {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1;
}
.titulo .lima { color: var(--lima); }
.etiqueta {                       /* el «eyebrow» de la web: rayita lima + mayúscula espaciada */
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lima); margin: 0 0 0.6rem;
}
.etiqueta::before { content: ""; width: 26px; height: 2px; background: var(--lima); flex-shrink: 0; }
.rotulo { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave); }
.suave { color: var(--suave); }
.resaltado { background: var(--lima); color: var(--tinta); padding: 0 0.3em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---- Barra superior ---- */
.barra {
  display: flex; align-items: center; gap: 0.5rem 1.75rem; flex-wrap: wrap;
  padding: 0.85rem clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--linea); background: rgba(14, 14, 14, 0.92);
  position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px);
}
.barra .logo img { height: 30px; width: auto; }
.menu { display: flex; gap: 0.25rem 1.25rem; flex: 1; flex-wrap: wrap; }
.menu a {
  color: var(--suave); text-decoration: none; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 0.45rem 0; border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--texto); }
.menu a[aria-current] { color: var(--texto); border-color: var(--lima); }
.quien { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; color: var(--suave); }

/* ---- Encabezado de página: brillo lima + palabra gigante de fondo ---- */
.pagina { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px) 4rem; flex: 1; }
.encabezado-pag {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 calc(-1 * clamp(16px, 3vw, 32px)) 1.5rem; padding: 2.25rem clamp(16px, 3vw, 32px) 1.75rem;
}
.encabezado-pag .marca-agua {
  position: absolute; right: -0.04em; bottom: -0.18em; z-index: -1; pointer-events: none;
  font-family: var(--display); text-transform: uppercase; line-height: 1;
  font-size: clamp(5rem, 15vw, 11rem); color: rgba(255, 255, 255, 0.04); white-space: nowrap;
}
.encabezado-pag h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.encabezado-pag p:not(.etiqueta) { margin: 0.6rem 0 0; color: var(--suave); max-width: 60ch; }
.encabezado-pag .acciones { margin-top: 1.25rem; }

/* ---- Botones píldora ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.7rem 1.4rem; border-radius: 999px; border: 2px solid transparent;
  font: 800 0.8rem/1.1 var(--cuerpo); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, border-color .2s, color .2s;
}
.btn-lima { background: var(--lima); color: var(--tinta); }
.btn-lima:hover { background: #fff; transform: translateY(-1px); }
.btn-borde { border-color: var(--linea-fuerte); color: var(--texto); background: transparent; }
.btn-borde:hover { border-color: var(--lima); color: var(--lima); }
.btn-peligro { border-color: rgba(255, 77, 77, 0.45); color: var(--malo); background: transparent; }
.btn-sm { min-height: 36px; padding: 0.45rem 1rem; font-size: 0.72rem; }
.btn-bloque { width: 100%; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---- Píldoras de estado ---- */
.pildora {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.7rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.pildora::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-al_dia, .p-confirmado { background: var(--lima); color: var(--tinta); }
.p-al_dia::before, .p-confirmado::before { background: var(--tinta); }
.p-por_vencer, .p-pendiente { background: rgba(255, 201, 77, 0.14); color: var(--aviso); }
.p-vencido, .p-rechazado { background: rgba(255, 77, 77, 0.14); color: var(--malo); }
.p-sin_plan, .p-anulado, .p-gris { background: rgba(255, 255, 255, 0.07); color: var(--suave); }

/* ---- Tarjetas y cifras ---- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.2rem; }
.tarjeta h2 { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: 1.05rem; letter-spacing: 0.02em; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.cifra { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; display: grid; gap: 0.35rem; }
.cifra .valor { font-family: var(--display); font-size: 2.2rem; line-height: 1; }
.cifra .valor small { font-size: 0.95rem; color: var(--suave); margin-left: 0.15rem; }
.cifra.c-aviso .valor { color: var(--aviso); }
.cifra.c-malo .valor { color: var(--malo); }
.cifra.c-destacada { background: var(--lima); border-color: var(--lima); color: var(--tinta); }   /* como el plan destacado de la web */
.cifra.c-destacada .rotulo { color: rgba(14, 14, 14, 0.7); }
.cifra .nota { font-size: 0.78rem; font-weight: 700; color: var(--lima); }
.cifra.c-destacada .nota { color: var(--tinta); }
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1rem; }

/* ---- Listas ---- */
.lista { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.lista li { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 0; border-top: 1px solid var(--linea); }
.lista li:first-child { border-top: 0; }
.lista .nombre { font-weight: 700; }
.lista .meta { font-size: 0.82rem; color: var(--suave); }
.lista .crece { flex: 1; min-width: 0; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: var(--tarjeta-2); border: 1px solid var(--linea-fuerte);
  font: 400 0.85rem var(--display); color: var(--lima);
}

/* ---- Barras (ingresos por método, días de mensualidad) ---- */
.barra-h { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.barra-h span { display: block; height: 100%; border-radius: inherit; background: var(--lima); }
.metodo { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 0.75rem; padding: 0.45rem 0; font-size: 0.88rem; }

/* ---- Cola de pagos por validar ---- */
.cola { display: grid; gap: 0.75rem; }
.pago-v {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 1rem; align-items: center;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.85rem;
}
.pago-v.alerta { border-color: rgba(255, 77, 77, 0.45); }
.captura {
  width: 92px; height: 116px; border-radius: var(--radio-sm); overflow: hidden; background: #f2f2f2; color: #222;
  font-size: 0.55rem; line-height: 1.3; padding: 0.45rem; display: grid; align-content: start; gap: 0.2rem;
}
.captura b { font-size: 0.6rem; } .captura .monto { font-size: 0.85rem; font-weight: 800; margin-top: 0.3rem; }
.pago-v .nombre { font-weight: 800; font-size: 1rem; }
.pago-v .monto-grande { font-family: var(--display); font-size: 1.35rem; margin: 0.25rem 0; }
.pago-v .meta { font-size: 0.82rem; color: var(--suave); }
.pago-v .alerta-txt { color: var(--malo); font-size: 0.82rem; font-weight: 700; margin-top: 0.3rem; }
.pago-v .acciones { flex-direction: column; }

/* ---- Pie ---- */
.pie { text-align: center; font-size: 0.75rem; color: var(--suave); padding: 1.5rem 16px; letter-spacing: 0.04em; }
.pie strong { color: var(--texto); font-weight: 700; }

/* ==========================================================================
   PORTAL DE ALUMNOS (teléfono primero, más expresivo)
   ========================================================================== */
.portal .barra { justify-content: center; }
.portal .pagina { max-width: 560px; }
.saludo { font-size: clamp(2rem, 9vw, 2.6rem); }
.mensualidad {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 100% 0%, rgba(220, 255, 0, 0.18), transparent 55%), var(--tarjeta);
  border: 1px solid var(--linea); border-radius: 20px; padding: 1.25rem; display: grid; gap: 0.8rem;
}
.mensualidad .fila { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.mensualidad .hasta { font-family: var(--display); text-transform: uppercase; font-size: 1.6rem; line-height: 1.05; }
.mensualidad .dias { font-size: 0.82rem; font-weight: 700; color: var(--lima); }
.mensualidad .monto { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.mensualidad .monto b { font-family: var(--display); font-size: 1.5rem; font-weight: 400; }
.animo {
  background: var(--lima); color: var(--tinta); border-radius: 20px; padding: 1.1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.animo .titulo { font-size: 1.35rem; }
.animo svg { width: 46px; height: auto; flex-shrink: 0; }
.cuentas { display: grid; gap: 0.6rem; }
.cuenta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.9rem 1rem; }
.cuenta .titulo { font-size: 0.95rem; color: var(--lima); margin-bottom: 0.45rem; }
.cuenta dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.9rem; margin: 0; font-size: 0.9rem; }
.cuenta dt { color: var(--suave); } .cuenta dd { margin: 0; }
.seccion { margin-top: 1.75rem; }
.seccion > .titulo { font-size: 1.15rem; margin-bottom: 0.75rem; }
.pestanas { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.2rem; }
.pestanas button {
  flex-shrink: 0; min-height: 40px; padding: 0.45rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea-fuerte); background: transparent; color: var(--texto);
  font: 700 0.78rem var(--cuerpo); letter-spacing: 0.06em; text-transform: uppercase;
}
.pestanas button[aria-pressed="true"] { background: var(--lima); color: var(--tinta); border-color: var(--lima); }

@media (max-width: 640px) {
  .pago-v { grid-template-columns: 76px 1fr; }
  .pago-v .acciones { grid-column: 1 / -1; flex-direction: row; }
  .captura { width: 76px; height: 98px; }
  .metodo { grid-template-columns: 90px 1fr auto; }
}

/* ---- Planes (como las tarjetas de planes de la web) ---- */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0.9rem; }
.plan { position: relative; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.4rem 1.2rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.plan .titulo { font-size: 1.15rem; }
.plan .precio { display: flex; align-items: baseline; gap: 0.3rem; font-family: var(--display); }
.plan .precio b { font-size: 2.6rem; font-weight: 400; line-height: 1; color: var(--lima); }
.plan .precio span { color: var(--suave); font-size: 1rem; }
.plan .detalle { font-size: 0.85rem; color: var(--suave); margin: 0 0 0.6rem; }
.plan .btn { margin-top: auto; }
.plan.destacado { background: var(--lima); border-color: var(--lima); color: var(--tinta); }
.plan.destacado .precio b { color: var(--tinta); }
.plan.destacado .precio span, .plan.destacado .detalle { color: rgba(14, 14, 14, 0.7); }
.plan.destacado .btn-borde { border-color: var(--tinta); color: var(--tinta); }
.plan .cinta { position: absolute; top: -11px; left: 1.2rem; background: var(--tinta); color: var(--lima); border: 1px solid var(--lima); border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.plan.inactivo { opacity: 0.55; }
.promo-fila { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem 1rem; align-items: center; }

/* ==========================================================================
   PANTALLAS DEL SISTEMA: las clases que ya usan las páginas, con la línea nueva
   ========================================================================== */
.pagina { position: relative; overflow-x: clip; padding-top: 2rem; }
.pagina > .marca-agua {
  position: absolute; top: 0.4rem; right: 0; z-index: -1; pointer-events: none; user-select: none;
  font-family: var(--display); text-transform: uppercase; line-height: 1; white-space: nowrap;
  font-size: clamp(4.5rem, 14vw, 10rem); color: rgba(255, 255, 255, 0.04);
}
body { isolation: isolate; }
.pagina h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin: 0 0 0.75rem; }
.pagina h1 .lima, .pagina h2 .lima { color: var(--lima); }
.pagina h1 .suave { font-family: var(--cuerpo); font-size: 1rem; text-transform: none; }
.pagina h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.2rem; margin: 0 0 0.6rem; }
.pagina h3 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lima); margin: 1.4rem 0 0.5rem; }
.estrecho { max-width: 720px; }
code { background: var(--tarjeta-2); padding: 0.1rem 0.4rem; border-radius: 4px; }

.barra nav { display: flex; gap: 0.25rem 1.25rem; flex: 1; flex-wrap: wrap; }
.barra nav a { color: var(--suave); text-decoration: none; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.45rem 0; border-bottom: 2px solid transparent; }
.barra nav a:hover { color: var(--texto); }
.barra nav a[aria-current] { color: var(--texto); border-color: var(--lima); }
.salir { display: flex; align-items: center; gap: 0.9rem; margin: 0; }
a.quien { text-decoration: none; } a.quien:hover { color: var(--texto); }
.portal-titulo { flex: 1; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--suave); }
.portal .barra { justify-content: space-between; }

/* Botones: el .btn a secas es el lima; .btn-sec es el de borde */
.btn { background: var(--lima); color: var(--tinta); }
.btn:hover { background: #fff; transform: translateY(-1px); }
.btn-sec, .btn-borde { background: transparent; color: var(--texto); border-color: var(--linea-fuerte); }
.btn-sec:hover, .btn-borde:hover { background: transparent; border-color: var(--lima); color: var(--lima); transform: none; }
.btn-peligro, .btn-peligro:hover { background: transparent; color: var(--malo); border-color: rgba(255, 77, 77, 0.45); }
.btn-wa { background: #25d366; color: var(--tinta); min-height: 36px; padding: 0.45rem 1rem; font-size: 0.72rem; }
.btn-link { background: none; border: 0; padding: 0; color: var(--lima); cursor: pointer; font: inherit; text-decoration: underline; }

/* Píldoras: las páginas las llaman .chip chip-<estado> */
.chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.7rem; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-al_dia, .chip-confirmado { background: var(--lima); color: var(--tinta); }
.chip-por_vencer, .chip-pendiente { background: rgba(255, 201, 77, 0.14); color: var(--aviso); }
.chip-vencido, .chip-rechazado { background: rgba(255, 77, 77, 0.14); color: var(--malo); }
.chip-sin_plan, .chip-anulado, .chip-gris { background: rgba(255, 255, 255, 0.07); color: var(--suave); }

/* Formularios */
label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); }
input, select, textarea {
  width: 100%; min-height: 44px; margin-top: 0.35rem; padding: 0.6rem 0.8rem;
  background: var(--tinta); color: var(--texto); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm);
  font: 400 0.95rem var(--cuerpo); letter-spacing: 0; text-transform: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--lima); outline: none; box-shadow: 0 0 0 3px var(--lima-suave); }
textarea { min-height: 96px; }
input[type=file] { padding: 0.5rem; }
label.check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--texto); }
label.check input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--lima); }
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem; }
.ancho { grid-column: 1 / -1; }
.en-linea { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; margin: 0.75rem 0; }
.en-linea label { flex: 1 1 170px; }
.ancho-linea { flex-basis: 100% !important; }
.filtros { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1rem 0; }
.filtros input, .filtros select { margin-top: 0; width: auto; }
.filtros input[type=search] { flex: 1 1 220px; }
.mini { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
.mini input, .mini select { min-height: 36px; padding: 0.3rem 0.55rem; margin: 0; width: 150px; }
fieldset.grupo { border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.9rem 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; margin: 0; }
fieldset.grupo legend { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lima); padding: 0 0.4rem; }
[data-para][hidden] { display: none; }

/* Bloques, avisos, tablas */
.bloque { margin-top: 2.25rem; }
.encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.encabezado h1, .encabezado h2 { margin: 0; }
.aviso { padding: 0.8rem 1rem; border-radius: var(--radio-sm); border: 1px solid var(--linea-fuerte); background: var(--tarjeta); margin: 0 0 1rem; }
.aviso-ok { border-color: var(--lima-borde); background: var(--lima-suave); }
.aviso-error { border-color: rgba(255, 77, 77, 0.5); background: rgba(255, 77, 77, 0.08); }
.aviso-aviso { border-color: rgba(255, 201, 77, 0.5); background: rgba(255, 201, 77, 0.08); }
.vacio { color: var(--suave); padding: 1.25rem; text-align: center; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); }
.tabla-scroll { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); margin: 0.75rem 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
th { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave); }
td a { font-weight: 700; text-decoration: none; } td a:hover { text-decoration: underline; }
tr.anulada td { color: var(--suave); text-decoration: line-through; text-decoration-color: var(--linea-fuerte); }
tr.anulada td .suave { text-decoration: none; }
tr.resaltada td { color: var(--lima); }
.acciones-fila { display: flex; gap: 1rem; align-items: center; justify-content: flex-end; }

/* Cifras del panel (las páginas las llaman .tarjetas > .tarjeta) */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin: 1.25rem 0; }
.tarjetas .tarjeta { display: grid; gap: 0.35rem; padding: 1rem 1.1rem; }
.tarjetas .valor { font-family: var(--display); font-size: 2rem; line-height: 1; order: 2; }
.tarjetas .etq { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave); order: 1; }
.tarjetas .tarjeta.ok .valor { color: var(--lima); }
.tarjetas .tarjeta.aviso { margin: 0; } .tarjetas .tarjeta.aviso .valor { color: var(--aviso); }
.tarjetas .tarjeta.malo .valor { color: var(--malo); }

/* Detalles sueltos */
.detalle { display: grid; grid-template-columns: max-content 1fr; gap: 0.55rem 1.5rem; margin: 1rem 0; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.2rem; }
.detalle dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); padding-top: 0.15rem; }
.detalle dd { margin: 0; white-space: normal; }
.comprobante { max-width: 100%; max-height: 70vh; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); }
.precios { color: var(--suave); padding-left: 1.1rem; margin: 0.25rem 0 1rem; }
.muestra { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.9rem 1rem; margin: 0.4rem 0 1rem; line-height: 1.55; }
.textos-fijos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.bloque-plegable { border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.7rem 1rem; margin: 0.75rem 0; background: var(--tarjeta); }
.bloque-plegable summary { cursor: pointer; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; min-height: 32px; display: flex; align-items: center; }
.login { max-width: 400px; margin: 9vh auto 0; display: grid; gap: 1rem; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 20px; padding: 1.75rem 1.5rem; }
.login form { display: grid; gap: 1rem; }
.login .btn { width: 100%; }
.tarjeta-estado { background: radial-gradient(circle at 100% 0%, rgba(220, 255, 0, 0.18), transparent 55%), var(--tarjeta); border: 1px solid var(--linea); border-radius: 20px; padding: 1.25rem; margin: 1rem 0; }
.tarjeta-estado.estado-vencido { border-color: rgba(255, 77, 77, 0.5); } .tarjeta-estado.estado-por_vencer { border-color: rgba(255, 201, 77, 0.5); }
.tarjeta-estado .grande { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; line-height: 1.1; margin: 0.7rem 0; }
.cuenta strong { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 0.95rem; color: var(--lima); margin-bottom: 0.45rem; }
.cuentas { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 560px) { .detalle { grid-template-columns: 1fr; gap: 0.15rem; } .detalle dd { margin-bottom: 0.6rem; } th, td { padding: 0.6rem 0.7rem; } }

.lista a.nombre { color: var(--texto); text-decoration: none; } .lista a.nombre:hover { color: var(--lima); }
.captura-img { width: 92px; height: 116px; border-radius: var(--radio-sm); object-fit: cover; background: var(--tarjeta-2); border: 1px solid var(--linea-fuerte); }
.captura-vacia { width: 92px; height: 116px; border-radius: var(--radio-sm); display: grid; place-items: center; text-align: center; background: var(--tarjeta-2); border: 1px dashed var(--linea-fuerte); color: var(--suave); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pago-v form { margin: 0; } .pago-v a.nombre { color: var(--texto); text-decoration: none; }
@media (max-width: 640px) { .captura-img, .captura-vacia { width: 76px; height: 98px; } }

/* Portal: la tarjeta de cuenta usa un div.titulo; en teléfono, una columna */
.portal .cuentas { grid-template-columns: 1fr; }
.portal .pagina h1.saludo { font-size: clamp(2rem, 9vw, 2.6rem); margin: 0; }
.portal .seccion > h2.titulo { font-size: 1.15rem; margin-bottom: 0.75rem; }
.portal .login { margin-top: 5vh; }
.pagina > .encabezado-pag { padding-top: 0.25rem; }
.portal .pagina > .encabezado-pag { padding-top: 0.5rem; }
/* En las tarjetas de plan, .detalle es un párrafo (no la ficha de datos de un pago) */
.plan .detalle { display: block; background: none; border: 0; border-radius: 0; padding: 0; }

/* ==========================================================================
   PORTAL: navegación, progreso, pagar
   ========================================================================== */
[hidden] { display: none !important; }
.oculto { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; }
.portal-nav { display: flex; justify-content: safe center; gap: 0.25rem; padding: 0.5rem 12px; border-bottom: 1px solid var(--linea); overflow-x: auto; }
.portal-nav a { flex-shrink: 0; padding: 0.5rem 0.9rem; border-radius: 999px; text-decoration: none; color: var(--suave); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.portal-nav a[aria-current] { background: var(--lima); color: var(--tinta); }
.portal .ficha { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.portal .detalle { grid-template-columns: max-content 1fr; }

.marcas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.6rem; margin-bottom: 1.25rem; }
.marca-card { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.85rem 0.95rem; display: grid; gap: 0.3rem; }
.marca-card .fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.5rem; }
.marca-valor { font-family: var(--display); font-size: 1.55rem; line-height: 1; }
.marca-valor small { font-size: 0.8rem; color: var(--suave); }
.marca-nota { font-size: 0.78rem; font-weight: 700; color: var(--lima); }
.marca-nota .suave { font-weight: 400; }
.chispa { width: 70px; height: 30px; flex-shrink: 0; }
.chispa polyline { fill: none; stroke: var(--lima); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chispa circle { fill: var(--lima); }
.lista form { margin: 0; }

.fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.fotos-grid figure { margin: 0; }
.fotos-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radio-sm); border: 1px solid var(--linea); }
.fotos-grid figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--suave); margin-top: 0.3rem; }
.fotos-grid form { margin: 0; }

label.zona-archivo {
  display: grid; gap: 0.35rem; justify-items: center; text-align: center; cursor: pointer;
  padding: 1.4rem 1rem; border: 2px dashed var(--lima-borde); border-radius: var(--radio); background: var(--lima-suave);
  color: var(--texto); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em;
}
label.zona-archivo span { font-size: 0.78rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--suave); }
label.zona-archivo input { margin-top: 0.4rem; background: transparent; border: 0; min-height: 0; padding: 0; font-size: 0.85rem; }

/* Registrar mi pago: pestañas por método sin JavaScript (radio + etiqueta) */
.pagar { display: grid; gap: 0.75rem; }
.pagar > .rotulo { margin: 0.75rem 0 0; color: var(--lima); }
.pagar .pestanas label {
  flex-shrink: 0; min-height: 40px; display: inline-flex; align-items: center; padding: 0.45rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea-fuerte); color: var(--texto); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
}
.panel-metodo { display: none; gap: 0.6rem; }
.monto-exacto { margin: 0; font-size: 0.95rem; }
.monto-exacto b { font-family: var(--display); font-weight: 400; font-size: 1.35rem; color: var(--lima); margin-left: 0.25rem; }
#m-pago_movil:checked ~ .pm-pago_movil, #m-transferencia:checked ~ .pm-transferencia,
#m-zelle:checked ~ .pm-zelle, #m-binance:checked ~ .pm-binance { display: grid; }
#m-pago_movil:checked ~ .pestanas label[for="m-pago_movil"], #m-transferencia:checked ~ .pestanas label[for="m-transferencia"],
#m-zelle:checked ~ .pestanas label[for="m-zelle"], #m-binance:checked ~ .pestanas label[for="m-binance"] { background: var(--lima); color: var(--tinta); border-color: var(--lima); }
#m-pago_movil:focus-visible ~ .pestanas label[for="m-pago_movil"], #m-transferencia:focus-visible ~ .pestanas label[for="m-transferencia"],
#m-zelle:focus-visible ~ .pestanas label[for="m-zelle"], #m-binance:focus-visible ~ .pestanas label[for="m-binance"] { outline: 3px solid var(--lima); outline-offset: 2px; }
.portal-nav a:first-child { margin-left: auto; } .portal-nav a:last-child { margin-right: auto; }

/* ==========================================================================
   PORTAL · «Mi panel» (como la vista previa de la web) y foto de perfil
   ========================================================================== */
.avatar-grande {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  display: grid; place-items: center; text-decoration: none;
  background: var(--tarjeta-2); border: 2px solid var(--lima); color: var(--lima);
  font: 400 1.35rem var(--display);
}
.perfil-cab { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0 1.25rem; }
.perfil-cab .avatar-grande { width: 76px; height: 76px; }
.perfil-foto { display: flex; align-items: center; gap: 1rem; }
.perfil-foto .avatar-grande { width: 88px; height: 88px; }
.perfil-foto > div { flex: 1; }
.titulo-alumno { display: flex; align-items: center; gap: 0.9rem; }
.titulo-alumno h1 { margin: 0; }

.mi-panel { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; }
.mi-panel > .mp-mensualidad, .mi-panel > .mp-rm, .mi-panel > .mp-otras { grid-column: 1 / -1; }
.mi-panel a.tarjeta { color: var(--texto); text-decoration: none; display: grid; gap: 0.35rem; transition: border-color .2s; }
.mi-panel a.tarjeta:hover { border-color: var(--lima-borde); }
.mp-rm .fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; }
.mp-rm .chispa { width: 140px; height: 50px; }
.mp-vacia .hasta { font-family: var(--display); text-transform: uppercase; font-size: 1.4rem; }
.pp-big { font-family: var(--display); font-size: 3rem; line-height: 1; }
.pp-big small { font-size: 1rem; color: var(--suave); margin-left: 0.25rem; }
.pp-mid { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.mp-animo { flex-direction: column; align-items: flex-start; justify-content: space-between; }
.mp-animo .titulo { font-size: 1.2rem; line-height: 1.1; }
.mp-animo img { align-self: flex-end; width: 34px; }
.mp-otras { margin-top: 0.75rem; }
.fila-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.6rem; }
.fila-titulo a { font-size: 0.78rem; font-weight: 700; text-decoration: none; }
.fila-titulo .titulo { font-size: 1.15rem; margin: 0; }

/* En computadora el portal usa el ancho: dos columnas, no la columna de teléfono */
@media (min-width: 900px) {
  .portal .pagina.estrecho { max-width: 1100px; }
  .mi-panel { grid-template-columns: 1.15fr 1fr 1fr; grid-auto-flow: dense; }
  .mi-panel > .mp-mensualidad { grid-column: 1; grid-row: span 2; }
  .mi-panel > .mp-rm { grid-column: 2 / 4; }
  .mi-panel > .mp-otras { grid-column: 1 / -1; }
  .mp-rm .chispa { width: 220px; height: 70px; }
  .pp-big { font-size: 3.6rem; }
  .portal .marcas-grid { grid-template-columns: repeat(4, 1fr); }
  /* Pagar: el formulario a la izquierda, el historial a la derecha */
  .pagar-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start; }
  .pagar-layout .pagar-historial { margin-top: 0; }
  /* Progreso y Mis datos: formularios en dos columnas */
  .portal .ficha { grid-template-columns: repeat(2, 1fr); }
  .portal .ficha.tres { grid-template-columns: repeat(3, 1fr); }
}

/* Abierto desde la pantalla de inicio del iPhone: la barra superior no queda debajo de la hora ni de la muesca */
.barra { padding-top: max(0.85rem, env(safe-area-inset-top)); }
.portal-nav { position: sticky; top: 0; z-index: 9; background: rgba(14,14,14,0.92); backdrop-filter: blur(8px); }

/* ==========================================================================
   AJUSTES: resumen en tarjetas y un tema por pantalla
   ========================================================================== */
.subnav { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.25rem 0 0.9rem; margin-bottom: 0.25rem; }
.subnav a { flex-shrink: 0; padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid var(--linea-fuerte); text-decoration: none; color: var(--suave); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.subnav a:hover { color: var(--texto); border-color: var(--lima-borde); }
.subnav a[aria-current] { background: var(--lima); color: var(--tinta); border-color: var(--lima); }
.ajustes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0.9rem; }
a.ajuste-card { display: grid; gap: 0.35rem; align-content: start; text-decoration: none; color: var(--texto); transition: border-color .2s, transform .2s; }
a.ajuste-card:hover { border-color: var(--lima-borde); transform: translateY(-2px); }
.ajuste-card strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.3rem; line-height: 1.1; }
.ajuste-card .suave { font-size: 0.85rem; }
.ajuste-card .ir { margin-top: 0.4rem; color: var(--lima); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ajuste-card.falta { border-color: rgba(255, 201, 77, 0.5); }
.ajuste-card.falta strong { color: var(--aviso); }
.ajuste-bloques { display: grid; gap: 1rem; max-width: 900px; }
.ajuste-bloques .tarjeta h2 { margin-bottom: 0.75rem; }
.ajuste-bloques .paso, .pagar-panel .paso { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lima); color: var(--tinta); font: 400 0.9rem var(--display); margin: 0 0 0.5rem; }
.ficha.sin-caja { background: none; border: 0; padding: 0; margin: 0.5rem 0 0; }
label.check.interruptor { font-weight: 700; font-size: 1rem; padding: 0.75rem 0.9rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm); }
.ajuste-bloques .textos-fijos .rotulo { display: block; margin-bottom: 0.3rem; }

/* ==========================================================================
   FICHA DEL ALUMNO: arriba lo importante, abajo en bloques
   ========================================================================== */
.miga { margin: 0 0 0.75rem; font-size: 0.8rem; } .miga a { text-decoration: none; font-weight: 700; }
.ficha-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-bottom: 1.25rem; }
.ficha-cabecera .avatar-grande { width: 84px; height: 84px; font-size: 1.6rem; }
.ficha-cabecera h1 { margin: 0 0 0.45rem; }
.ficha-cabecera .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ficha-cabecera .acciones { margin-left: auto; }
.datos-rapidos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.datos-rapidos > div { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.8rem 0.95rem; display: grid; gap: 0.2rem; }
.datos-rapidos strong { font-size: 1.02rem; overflow-wrap: anywhere; }
.datos-rapidos strong a { color: var(--texto); }
.datos-rapidos .malo { color: var(--malo); } .datos-rapidos .aviso-txt { color: var(--aviso); }
.datos-rapidos .suave { font-size: 0.8rem; }
.ficha-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 0.5rem; }
.ficha-grid .col { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 900px) { .ficha-grid { grid-template-columns: 1.15fr 1fr; } }
.lista li.anulada .nombre, .lista li.anulada .meta { text-decoration: line-through; color: var(--suave); }
.mini-plegable summary { cursor: pointer; font-size: 0.78rem; font-weight: 700; color: var(--malo); list-style: none; }
.mini-plegable[open] summary { margin-bottom: 0.4rem; }
.marcas-grid.compacta { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-bottom: 0; }
.marcas-grid.compacta .marca-valor { font-size: 1.25rem; }
.detalle.sin-caja { background: none; border: 0; padding: 0; margin: 0.5rem 0 0; }
.tarjeta .bloque-plegable { background: var(--tinta); }
.tarjeta > h2 { margin-bottom: 0.6rem; }

/* Lista de alumnos */
.buscador { display: flex; gap: 0.6rem; margin: 0 0 0.75rem; }
.buscador input { flex: 1; margin: 0; }
.lista-alumnos .avatar { object-fit: cover; }
.lista-alumnos li { padding: 0.7rem 0.4rem; }
.lista-alumnos a.nombre { font-size: 1rem; }

/* Registrar pago del panel: pasos en tarjetas; las pestañas suman efectivo */
.pagar-panel { max-width: 900px; gap: 1rem; }
.pagar-panel .tarjeta h2 { margin-bottom: 0.6rem; }
@media (min-width: 760px) { .pagar-panel .ficha .doble { grid-column: span 2; } }
#m-efectivo:checked ~ .tarjeta .pm-efectivo { display: grid; }
#m-pago_movil:checked ~ .tarjeta .pm-pago_movil, #m-transferencia:checked ~ .tarjeta .pm-transferencia,
#m-zelle:checked ~ .tarjeta .pm-zelle, #m-binance:checked ~ .tarjeta .pm-binance { display: grid; }
#m-pago_movil:checked ~ .tarjeta .pestanas label[for="m-pago_movil"], #m-transferencia:checked ~ .tarjeta .pestanas label[for="m-transferencia"],
#m-zelle:checked ~ .tarjeta .pestanas label[for="m-zelle"], #m-binance:checked ~ .tarjeta .pestanas label[for="m-binance"],
#m-efectivo:checked ~ .tarjeta .pestanas label[for="m-efectivo"] { background: var(--lima); color: var(--tinta); border-color: var(--lima); }

/* Finanzas del box (015): cifras del mes, fijos, caja por método e historia de 6 meses */
.btn-chico { min-height: 34px; padding: 0.3rem 0.85rem; font-size: 0.7rem; }
.nota-lima { margin: 0.2rem 0 0.4rem; padding: 0.6rem 0.8rem; border-radius: var(--radio-sm); background: var(--lima-suave); border: 1px solid var(--lima-borde); font-size: 0.86rem; }
.nota-lima b { color: var(--lima); }
.pequeno { font-size: 0.78rem; }
.tabla-scroll.sin-caja { background: none; border: 0; border-radius: 0; margin: 0.6rem 0 0.4rem; }
.tabla-num th, .tabla-num td { padding: 0.55rem 0.6rem; }
.tabla-num th:not(:first-child), .tabla-num td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-num td.malo { color: var(--malo); }
.metodo-ancho { grid-template-columns: minmax(0, 170px) 1fr auto; }
.metodo-ancho > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-gasto span { background: var(--malo); }
.lista li.anulada .nombre, .lista li.anulada .monto { color: var(--suave); text-decoration: line-through; }
.lista .monto { font-variant-numeric: tabular-nums; white-space: nowrap; }
.historia { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; align-items: end; height: 140px; margin-top: 1rem; }
.mes-h { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; height: 100%; text-decoration: none; color: var(--suave); }
.mes-h .barras { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.mes-h .barras span { width: 40%; max-width: 18px; min-height: 2px; border-radius: 4px 4px 0 0; }
.mes-h .b-cob, .leyenda-h .l-cob { background: var(--lima); }
.mes-h .b-gas, .leyenda-h .l-gas { background: var(--malo); }
.mes-h .mes-n { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.mes-h.actual .mes-n { color: var(--lima); }
.mes-h:hover .mes-n { color: var(--texto); }
.leyenda-h { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--suave); margin: 0.6rem 0 0; }
.leyenda-h span { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.leyenda-h .l-gas { margin-left: 0.6rem; }
@media (max-width: 560px) { .lista-gastos li { flex-wrap: wrap; } .lista-gastos .mini { flex-wrap: wrap; } .lista-gastos .mini input { width: 100%; } }
.lista-gastos li.anulada .meta { text-decoration: none; }
.cifra.c-destacada small { color: rgba(14, 14, 14, 0.7); }
.rejilla-2.arriba { align-items: start; }