/* ==========================================================================
   Rotermeller — identidad web
   Traducción literal de Compartido/Tema.swift (enum Rotermeller) + lo medido
   en las 14 capturas de la app. Un solo tema: la app NO tiene modo oscuro
   porque el arte de la señora trae su fondo marfil pegado (ver Tema.swift).
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  color-scheme: light;                 /* identidad fija: sin variante oscura */

  /* Superficies */
  --marfil:      #F7F6F2;              /* Rotermeller.fondo — fondo de TODA la página */
  --superficie:  #FFFFFF;              /* Rotermeller.superficie — la tarjeta, siempre blanca */
  --divisor:     #ECEBE8;              /* Rotermeller.divisor — línea finísima, 1px */

  /* Texto */
  --tinta:       #161A24;              /* titulares y cifras */
  --secundario:  #77777F;              /* subtítulos, metadatos, pies */
  --inactivo:    #66696F;              /* iconos de pestaña apagados */

  /* Marca */
  --coral:       #FF594D;              /* Acento.coral.marca.base */
  --coral-oscuro:#E94B41;              /* Acento.coral.marca.oscuro — hover/pressed */
  --coral-suave: rgba(255, 89, 77, .12); /* coralSuave — fondos de píldora y botón blando */
  --amarillo:    #FFD76A;              /* chispas, racha, destellos */

  /* Acentos fijos de sección (Rotermeller.*) */
  --lila:        #8D5FE0;              /* Estudio / pomodoro */
  --violeta:     #9B4FD1;
  --verde:       #2FA36B;              /* ok: aprobado, hecho, justificado */
  --naranja:     #E2872B;              /* aviso: urge, vence hoy */
  --turquesa:    #1691A8;
  --azul:        #2E7BE0;              /* exámenes */
  --peligro:     #DC2B3F;              /* atrasado, suspenso */

  /* Paleta de asignaturas (Tinta.*, en su orden — el índice es el que se guarda) */
  --a0:#1D6FE8; --a1:#6D3BEF; --a2:#A02BD6; --a3:#D5257F; --a4:#DC2B3F;
  --a5:#E0680E; --a6:#159B5B; --a7:#0E9BAF; --a8:#8A6220; --a9:#4F7A18;

  /* Radios — Rotermeller.Radio */
  --r-pequeno: 14px;
  --r-medio:   20px;
  --r-grande:  26px;                   /* el radio de tarjeta de la app */
  --r-capsula: 999px;

  /* Espaciado — Rotermeller.Espaciado */
  --e-xs: 4px; --e-sm: 8px; --e-md: 16px; --e-lg: 24px; --e-xl: 32px;
  --e-seccion: clamp(56px, 9vw, 112px); /* aire vertical entre bloques de la landing */

  /* Sombras — Rotermeller.Sombra: muy suaves a propósito, nada de manchas */
  --s-tarjeta:  0 6px 18px rgba(22, 26, 36, .06);
  --s-flotante: 0 12px 32px rgba(22, 26, 36, .12);
  --s-color:    0 10px 26px rgba(255, 89, 77, .22); /* sombra teñida bajo lo coral */

  /* Tipografía: la redonda del sistema (SF Rounded). Cero fuentes externas. */
  --fuente: ui-rounded, -apple-system, "SF Pro Rounded", system-ui,
            "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Escala (los TextStyle de iOS, fluidos para pantalla grande) */
  --t-hero:     clamp(40px, 7.5vw, 76px);  /* sólo la landing: el titular de portada */
  --t-pantalla: clamp(30px, 3.6vw, 40px);  /* largeTitle .bold — «Horario», «Notas» */
  --t-titulo:   clamp(22px, 2.4vw, 28px);  /* title2 .bold — título de tarjeta */
  --t-cifra:    clamp(34px, 5vw, 56px);    /* cifraGrande — «27 min 52 s», «6,33» */
  --t-fila:     17px;                      /* body .medium — el cuerpo de la app */
  --t-cuerpo:   clamp(17px, 1.25vw, 19px); /* cuerpo de la web, un punto mayor */
  --t-seccion:  15px;                      /* subheadline .semibold */
  --t-etiqueta: 12px;                      /* caption .medium */
  --t-fuerte:   11px;                      /* caption2 .semibold — VERSALITAS */

  --toque: 44px;                       /* Medidas.toque: mínimo pulsable de Apple */
  --ancho: 1120px;                     /* ancho útil de la landing */
}

/* Degradado limpio: si hay color-mix, los tintes se calculan; si no, ya hay
   valores sólidos arriba y no se pierde nada. */
@supports (color: color-mix(in srgb, red 10%, white)) {
  :root {
    --coral-suave: color-mix(in srgb, var(--coral) 12%, #fff);
    --coral-tinte: color-mix(in srgb, var(--coral) 7%, #fff);
  }
}

/* --- 2. Base ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  letter-spacing: -0.01em;             /* la redonda pide el texto un pelín apretado */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

details > summary { outline-offset: 2px; }

h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; }
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-pantalla); }
h3 { font-size: var(--t-titulo); letter-spacing: -0.02em; }
p  { margin: 0; }

a { color: var(--coral); text-decoration: none; }
a:hover { color: var(--coral-oscuro); }

img { max-width: 100%; height: auto; display: block; }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: var(--r-pequeno);
}

.contenedor { width: min(100% - 2 * var(--e-lg), var(--ancho)); margin-inline: auto; }
.seccion    { padding-block: var(--e-seccion); }

/* --- 3. Piezas de texto -------------------------------------------------- */

/* Rótulo de sección en versalitas: el de «PRÓXIMA CLASE» / «TU PLAN DE HOY». */
.rotulo {
  font-size: var(--t-fuerte);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--secundario);
}
.rotulo--coral { color: var(--coral); }

/* El saludo de Hoy: la primera palabra en coral y el resto en tinta. */
.acento { color: var(--coral); }

/* El subrayado coral fino de «por delante». Va como fondo, no como
   text-decoration, para poder controlar grosor y separación. */
.subrayado {
  background-image: linear-gradient(var(--coral), var(--coral));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  padding-bottom: 2px;
}

.apoyo   { color: var(--secundario); font-size: var(--t-fila); }
.pie     { color: var(--secundario); font-size: var(--t-etiqueta); }

/* Las cifras de la app: enormes, redondas y en color. */
.cifra {
  font-size: var(--t-cifra);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--coral);
  font-variant-numeric: tabular-nums;
}

/* --- 4. Tarjeta ---------------------------------------------------------- */

/* La unidad de la app: blanca, radio 26, sombra del 6 %, SIN borde. */
.tarjeta {
  background: var(--superficie);
  border-radius: var(--r-grande);
  box-shadow: var(--s-tarjeta);
  padding: var(--e-lg);
}
.tarjeta--sm { border-radius: var(--r-medio); padding: var(--e-md); }

/* Tarjeta con cabecera coral: banda de color arriba y cuerpo blanco debajo.
   Es el patrón de «Próxima clase», «Tu plan de hoy» y la ficha de examen. */
.tarjeta-banda { border-radius: var(--r-grande); box-shadow: var(--s-tarjeta); overflow: hidden; }
.tarjeta-banda > .banda {
  display: flex; align-items: center; gap: var(--e-sm);
  justify-content: space-between;
  padding: 14px var(--e-lg);
  background: var(--coral);
  color: #fff;
}
.tarjeta-banda > .banda .rotulo { color: #fff; }
.tarjeta-banda > .cuerpo { background: var(--superficie); padding: var(--e-lg); }
.tarjeta-banda--azul > .banda { background: var(--azul); }
.tarjeta-banda--lila > .banda { background: var(--lila); }

/* Fila con barra lateral del color de la asignatura (Apuntes, Calendario).
   El color nunca va solo: siempre lo acompaña el nombre. */
.fila-color {
  --c: var(--coral);
  position: relative;
  background: var(--superficie);
  border-radius: var(--r-medio);
  box-shadow: var(--s-tarjeta);
  padding: var(--e-md) var(--e-md) var(--e-md) calc(var(--e-md) + 6px);
  overflow: hidden;
}
.fila-color::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--c);
}

/* Tarjeta teñida al 12 % con el color de la asignatura (Tema.tinte). */
.tinte { --c: var(--coral); background: color-mix(in srgb, var(--c) 12%, #fff); }

/* --- 5. Botones ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-sm);
  min-height: var(--toque);
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-capsula);     /* en esta app los botones son cápsulas */
  background: var(--coral);
  color: #fff;
  font: inherit;
  font-size: var(--t-fila);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--s-color);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background-color .18s, box-shadow .18s;
}
.btn:hover  { background: var(--coral-oscuro); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

/* El botón blando: fondo coral al 12 % y texto coral («Ver semana»). */
.btn--suave {
  background: var(--coral-suave);
  color: var(--coral);
  box-shadow: none;
}
.btn--suave:hover { background: color-mix(in srgb, var(--coral) 18%, #fff); color: var(--coral-oscuro); }

/* Botón fantasma sobre marfil: sólo un filete divisor. */
.btn--fantasma {
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--divisor);
}
.btn--fantasma:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--coral), var(--s-tarjeta); }

.btn--lila { background: var(--lila); box-shadow: 0 10px 26px rgba(141,95,224,.22); }
.btn--lila:hover { background: #7b4fcd; }

/* El botón redondo flotante «+» de las pantallas de lista. */
.fab {
  width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--coral); color: #fff;
  font-size: 26px; line-height: 1;
  box-shadow: var(--s-color);
  cursor: pointer;
}

/* --- 6. Píldoras y chips ------------------------------------------------- */

/* Píldora informativa: «Aula 2.1», «40 % de la nota». Teñida, nunca sólida. */
.pildora {
  --c: var(--coral);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-capsula);
  background: color-mix(in srgb, var(--c) 12%, #fff);
  color: var(--c);                                   /* reserva sin color-mix */
  color: color-mix(in srgb, var(--c) 72%, #000);
  font-size: var(--t-etiqueta);
  font-weight: 600;
  white-space: nowrap;
}
.pildora--ok      { --c: var(--verde); }
.pildora--aviso   { --c: var(--naranja); }
.pildora--peligro { --c: var(--peligro); }

/* Filtros en fila (Hoy · Semana · Atrasadas · Hechas): cápsulas blancas y la
   activa teñida de coral. */
.filtros { display: flex; gap: var(--e-sm); flex-wrap: wrap; }
.filtro {
  min-height: 38px; padding: 0 18px;
  display: inline-flex; align-items: center;
  border: 0; border-radius: var(--r-capsula);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit; font-size: var(--t-seccion); font-weight: 600;
  box-shadow: var(--s-tarjeta);
  cursor: pointer;
}
.filtro[aria-selected="true"], .filtro.activo {
  background: var(--coral-suave); color: var(--coral);
}

/* --- 7. Rejilla ---------------------------------------------------------- */

.rejilla { display: grid; gap: var(--e-md); grid-template-columns: repeat(12, 1fr); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.col-6 { grid-column: span 6; } .col-4 { grid-column: span 4; } .col-12 { grid-column: 1 / -1; }
@media (max-width: 760px) { .col-6, .col-4 { grid-column: 1 / -1; } }

/* Container queries donde estén: una tarjeta estrecha apila su contenido sin
   saber en qué columna la han metido. */
.tarjeta { container-type: inline-size; }
@container (max-width: 340px) { .tarjeta .apilable { flex-direction: column; align-items: flex-start; } }

/* --- 8. Progreso --------------------------------------------------------- */

/* Barra fina de progreso, como en Asistencia y Notas. */
.barra { height: 8px; border-radius: var(--r-capsula); background: color-mix(in srgb, var(--c, var(--coral)) 14%, #fff); overflow: hidden; }
.barra > i { display: block; height: 100%; width: var(--v, 50%); border-radius: inherit; background: var(--c, var(--coral)); }

/* Anillo de cifra (media, pomodoro). @property permite animar el ángulo; sin
   soporte, el conic-gradient se pinta igual y sólo se pierde la animación. */
@property --v-anillo { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.anillo {
  --c: var(--verde); --v-anillo: 63%;
  width: 132px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--c) var(--v-anillo), color-mix(in srgb, var(--c) 14%, #fff) 0);
  -webkit-mask: radial-gradient(circle, #0000 60%, #000 61%);
          mask: radial-gradient(circle, #0000 60%, #000 61%);
  transition: --v-anillo 1.1s cubic-bezier(.2,.8,.3,1);
}

/* --- 9. La señora -------------------------------------------------------- */

/* Rotermeller siempre aparece sobre un disco coral clarito, nunca recortada
   sobre el marfil a secas: el arte pide ese fondo detrás. */
.marca {
  display: grid; place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
              color-mix(in srgb, var(--coral) 18%, #fff) 0%,
              color-mix(in srgb, var(--coral) 9%, #fff) 70%,
              transparent 100%);
}
.marca > img { width: 88%; height: auto; }
.marca--sm { width: 64px; }
.marca--md { width: 128px; }
.marca--lg { width: min(46vw, 420px); }

/* --- 10. Movimiento ------------------------------------------------------ */

/* Entrada al hacer scroll, con animaciones de línea de tiempo. Donde no haya
   soporte no pasa nada: el contenido ya está visible por defecto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aparece {
      animation: subir linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 34%;
    }
  }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}