@charset "utf-8";
/* ============================================================
   modulos/cuenta.css

   Se carga después de base.css, panel.css y app.css. Solo lo que es de
   esta área: todo lo común (tarjetas, botones, campos, cifras, tablas,
   avisos, cabecera de pantalla) ya viene de ahí.

   Tres pantallas de la cuenta, cada una con su prefijo porque diez áreas
   escriben hojas a la vez:
     · `est-`  Ajustes de estudio (estudio.js): la meta y el recordatorio.
     · `pr-`   Planes (precios.js): la página «Planes» del sitio, dentro.
     · `ref-`  Invitar (referidos.js): la página de referidos del sitio,
               con los números de la cuenta.
   ============================================================ */

/* ============================================================
   1. Ajustes de estudio
   ============================================================ */

/* Las cuatro metas, lado a lado donde caben y apiladas en el móvil. Son
   botones y se ven como fichas de dato de la plantilla (`.plan`: radio
   corto, filo de 2 px): se comparan entre sí igual que se comparan planes. */
.est-planes {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}
.est-plan {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2);
  min-height: 2.75rem; padding: var(--e-4);
  font: inherit; text-align: left; color: var(--tinta);
  background: var(--papel);
  border: 2px solid var(--linea); border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.est-plan:hover { border-color: color-mix(in srgb, var(--seccion) 55%, var(--linea)); }
/* La elegida lleva filo de la sección, lavado y su marca: tres señales,
   porque «la del borde azul» sola no se distingue al sol ni la distingue
   quien no ve bien el color. */
.est-plan[aria-pressed="true"] {
  border-color: var(--seccion); background: var(--seccion-lavado);
}
.est-plan-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-2); width: 100%; }
.est-plan-min {
  font-family: var(--display); font-size: var(--p-xl); font-weight: 600;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.est-plan-min small { font-family: var(--texto); font-size: var(--p-sm); font-weight: 600; letter-spacing: 0; color: var(--tinta-2); }
.est-plan-marca {
  width: 1.5rem; height: 1.5rem; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center;
  background: var(--seccion); color: var(--sobre-seccion);
}
.est-plan-marca svg { width: 1rem; height: 1rem; }
.est-plan-nombre { font-weight: 700; color: var(--seccion-tinta); }
.est-plan-desc { font-size: var(--p-sm); color: var(--tinta-2); line-height: 1.45; }
.est-plan-xp { margin-top: auto; }
/* Sobre el lavado de la elegida la etiqueta gris se perdía: recupera el
   papel para que el recuadro se siga leyendo. */
.est-plan[aria-pressed="true"] .est-plan-xp { background: var(--papel); }

/* La hora, con la misma medida que los campos de número de una fila
   `.ajuste` (panel.css no la incluye porque allí no hay ninguna). */
.est-recordatorio .ajuste input[type="time"] {
  font: inherit; font-size: var(--p-base); font-variant-numeric: tabular-nums;
  width: 9rem; min-height: var(--panel-toque); padding: .375rem .5rem;
  border: 1px solid var(--linea); border-radius: 6px;
  background: var(--papel); color: var(--tinta);
}
@media (max-width: 34rem) {
  .est-recordatorio .ajuste input[type="time"] { width: 100%; }
}
.est-permiso { border-top: 1px solid var(--linea); }
.est-permiso-accion { margin-top: var(--e-3) !important; }

.est-nota {
  display: flex; align-items: flex-start; gap: var(--e-2);
  font-size: var(--p-sm); color: var(--tinta-3);
}
.est-nota svg { flex: none; margin-top: .125rem; }
.est-nota .tk-icono + * { margin-left: 0; }

/* ============================================================
   2. Planes
   ============================================================ */
.pr-aviso { margin-bottom: var(--e-5); }
.pr-planes { margin-bottom: var(--e-6); }
.pr-plan-nombre { margin-top: var(--e-3); font-size: var(--t-xl); }
/* El importe en el color del plan, como en la página del sitio: la cifra
   es lo que se compara y el color dice de qué plan es sin leer el nombre. */
.pr-importe { color: var(--seccion-tinta); }
/* «al mes, más adelante» debajo de la cifra y no a su lado: con el importe
   en local («19,99 US$») no cabía en la misma línea, partía a mitad y el
   interlineado de la cifra dejaba un hueco de 40 px entre las dos mitades. */
.pr-importe small { display: block; margin-top: var(--e-2); line-height: 1.3; }
/* «El tuyo hoy» pesa más que los otros dos y se nota antes de leerlo: el
   filo sube a color entero en vez del 38 % de `.tarjeta-seccion`. Sin
   sombra: el filo es la elevación. */
.pr-plan.es-tuyo { border-color: var(--seccion); }
.pr-plan-nota {
  margin-top: auto; padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--t-sm); color: var(--tinta-2);
}
/* El esqueleto de las tres fichas mientras llegan los planes. */
.pr-esqueleto .plan { min-height: 22rem; }
.pr-esqueleto .cargando { width: 40%; height: 1.25rem; }
.pr-esqueleto .pr-esqueleto-precio { width: 60%; height: 2.5rem; }

.pr-seccion { margin-top: var(--e-7); }
.pr-seccion > .app-titulo { margin-top: 0; margin-bottom: var(--e-2); }
.pr-sub { color: var(--tinta-2); max-width: var(--medida); margin-bottom: var(--e-5); }
.pr-tabla tbody th { font-family: var(--display); font-size: var(--t-lg); font-weight: 600; }

.pr-profe {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2);
  font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-md);
}
.pr-profe-nombre { font-weight: 700; }
.pr-profe-precio {
  font-family: var(--display); font-size: var(--t-xl); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--seccion-tinta);
}
.pr-profe-precio small { font-family: var(--texto); font-size: var(--t-sm); font-weight: 500; color: var(--tinta-2); }
.pr-vacio { padding-block: var(--e-5); }
.pr-acciones { margin-top: var(--e-4); }

/* ============================================================
   3. Invitar
   ============================================================ */
.ref-aviso { margin-bottom: var(--p-e-45); }
/* El enlace de mentira del esqueleto mide lo que medirá el de verdad. */
.ref-esqueleto { width: min(100%, 24rem); }

/* El enlace en su campo, a lo ancho: es lo que se copia, y recortado por
   un botón al lado se cortaba justo el código, que es la parte que importa. */
.ref-campo { margin-bottom: 0; }
.ref-campo input { font-size: var(--t-sm); }
.ref-enlace .acciones { margin-top: var(--e-4); }

/* El color de cada cifra lo pone `.tono-*` de app.css. */
.ref-cifras { margin-bottom: var(--e-3); }

.ref-nota {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--p-sm); color: var(--tinta-2);
}
.ref-nota .tk-icono + * { margin-left: 0; }
.ref-retirar { margin: var(--e-3) 0 var(--p-e-45); }
.ref-retiro { max-width: 34rem; }
.ref-retiro .acciones { margin-top: var(--e-2); }

.ref-meta .progreso { height: .75rem; }
.ref-meta-texto { margin-top: var(--e-3); font-size: var(--p-sm); color: var(--tinta-2); }

/* Las tablas de la cuenta son las del panel (`.tabla-panel`), las mismas que
   las de administración. panel.css solo viste las celdas `td`; aquí la
   primera de cada fila es un `th` de fila —el lector de pantalla la anuncia
   como el nombre de la fila— y lleva la misma medida. Con nombre y pista en
   dos líneas, la fila crece antes que partirse. */
.ref-tabla tbody th {
  text-align: left; font-weight: 600;
  padding: var(--e-2) var(--e-4); height: var(--panel-fila);
  border-bottom: 1px solid var(--linea-suave); vertical-align: middle;
}
.ref-tabla tbody tr:last-child th { border-bottom: 0; }
.ref-pista { display: block; font-size: var(--p-sm); font-weight: 400; color: var(--tinta-3); overflow-wrap: anywhere; }
.ref-importe { font-variant-numeric: tabular-nums; }
.ref-suma { color: var(--acierto-tinta); font-weight: 600; }
.ref-resta { color: var(--racha-tinta); font-weight: 600; }
/* En el móvil cada fila pasa a ser una ficha apilada, como la tabla de
   usuarios de administración: la cabecera se oculta como `.solo-lectores`
   (el lector de pantalla la sigue teniendo) y cada dato lleva su rótulo
   delante. Sin la caja con tope de altura de panel.css: con fichas, ya
   desplaza la página. */
@media (max-width: 45rem) {
  .ref .tabla-envoltorio-panel { max-height: none; overflow: visible; }
  .ref-tabla thead, .ref-tabla thead tr, .ref-tabla thead th { display: block; position: static; }
  .ref-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ref-tabla, .ref-tabla tbody { display: block; }
  .ref-tabla tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-1);
    padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea-suave);
  }
  .ref-tabla tbody tr:last-child { border-bottom: 0; }
  .ref-tabla tbody :is(th, td) { display: block; height: auto; padding: 0; border: 0; text-align: left; }
  .ref-tabla tbody td { font-size: var(--p-sm); color: var(--tinta-2); }
  .ref-tabla tbody td[data-etiqueta]::before { content: attr(data-etiqueta) ": "; color: var(--tinta-3); }
  /* `.tabla-panel .num` alinea a la derecha y pesa más que la regla de
     arriba: apilado, «Te ha dado: 8,99 US$» se quedaba solo en la otra punta
     de la ficha. */
  .ref-tabla tbody td.num { white-space: normal; text-align: left; }
  /* El signo y su color siguen diciendo si el movimiento sumó o restó. */
  .ref-tabla tbody td.ref-suma { color: var(--acierto-tinta); }
  .ref-tabla tbody td.ref-resta { color: var(--racha-tinta); }
}

.ref-reglas { margin-top: var(--e-7); }
.ref-reglas .sendero { max-width: 44rem; }