/*
 * Plataforma creada por David Hernández Díaz para el Club Patinaje Guadalajara.
 * cpg-tema.css — FASE 1 del rediseño visual (26-07-2026).
 *
 * Capa de tema global. Se carga DESPUÉS del CSS del bundle, así que gana por orden.
 * NO recompila nada: solo cambia la TIPOGRAFÍA del portal y registra los colores
 * del logo (lila y plata). El morado de marca NO se toca (ya es #481650).
 *
 * 🎨 27-07-2026 — LA TIPOGRAFÍA PRINCIPAL PASA A SER POPPINS SEMIBOLD
 * ──────────────────────────────────────────────────────────────────
 * Decisión de David: la fuente principal del club es Poppins SemiBold, que es
 * la del propio logo. Así el «Club Patinaje Guadalajara» del titular y el del
 * logo son la misma letra, y el portal deja de hablar con dos voces.
 *
 *   Titulares (h1…h6) → Poppins SemiBold (600)
 *   Texto y datos     → Inter (sin cambios: está pensada para leer de seguido
 *                       y para que los números en tablas queden alineados)
 *
 * Sora se retira. El fichero sora-var.woff2 puede quedarse en el servidor: ya
 * no lo pide nadie. Se deja aquí su @font-face comentado por si hubiera que
 * volver atrás deprisa.
 *
 * ⚠️ SOLO SE SIRVE EL PESO 600. Es a propósito: Poppins no es una fuente
 * variable, cada grosor es un fichero aparte, y el encargo es SemiBold. Por eso
 * los titulares llevan font-weight:600 forzado — si se dejara el 700 que pone
 * el programa, el navegador se inventaría una negrita falsa (letras engordadas
 * a lo bruto) que se ve sucia.
 *
 * Revertir = quitar el <link> de este fichero en index.html. Nada más.
 */

/* ---- Fuentes propias, self-hosted (nada sale a terceros / RGPD) ---- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;              /* fuente variable: un solo fichero cubre todos los pesos */
  font-display:swap;
  src:url('/assets/fonts/inter-var.woff2') format('woff2');
}

/* Poppins SemiBold, en dos trozos como la sirve la propia fundición: el
   primero lleva el alfabeto de siempre (incluidas á é í ó ú ñ ü ¿ ¡) y el
   segundo los acentos raros de otros idiomas, para apellidos extranjeros.
   El navegador solo se baja el segundo si hace falta. 13,5 KB entre los dos. */
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* (retirada 27-07-2026 — para volver atrás, descomentar y deshacer el bloque
   de titulares de más abajo)
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/sora-var.woff2') format('woff2');
}
*/

/* ═══════════════════════════════════════════════════════════════════════
 * 🎨 27-07-2026 — LOS COLORES DEL MANUAL DE MARCA (Brand System v1.14)
 *
 * David: «los colores oficiales del portal son los del manual».
 *
 *     morado   #602673  →  #481650   Deep Plum      (pág. 16)
 *     lila     #a06cb5  →  #A878B5   Soft Lavender  (pág. 16)
 *
 * El morado nuevo es MÁS OSCURO y menos rojizo: hsl(285,50%,30%) pasa a
 * hsl(292,57%,20%). Eso se nota, y es lo que manda el manual.
 *
 * ⚠️ ESTE BLOQUE ES EL QUE ARRASTRA AL PROGRAMA DE REACT.
 * El bundle no define sus colores en hexadecimal, sino en piezas de HSL
 * (`--primary: 285 50% 30%`) que luego usa como `hsl(var(--primary))`. Por eso
 * aquí se redefinen esas MISMAS piezas: con esto cambian de golpe los botones,
 * los enlaces, los aros de foco y los fondos suaves de todas las pantallas del
 * programa, sin recompilar nada. Si esto se quita, el programa vuelve al
 * morado viejo aunque las páginas PHP ya estén cambiadas — y quedarían dos
 * morados conviviendo.
 * ═══════════════════════════════════════════════════════════════════════ */
:root{
  --primary:        292 57% 20%;   /* Deep Plum #481650 — botones, enlaces, banda */
  --ring:           292 57% 20%;   /* el aro de foco, que debe ser el mismo morado */
  --secondary:      287 29% 59%;   /* Soft Lavender #A878B5 */
  --primary-soft:   292 40% 95%;   /* tintes casi blancos: solo se les gira el tono */
  --secondary-soft: 292 40% 94%;
  --accent:         292 60% 50%;
  --sidebar-primary:292 60% 70%;
}

/* ---- Colores del logo oficial, disponibles para fases siguientes ---- */
:root{
  --cpg-lila:#A878B5;
  --cpg-silver-1:#ececed;
  --cpg-silver-2:#c3c3c8;
  --cpg-silver-3:#8f8f97;
  --cpg-silver-grad:linear-gradient(135deg,#f2f2f4 0%,#c7c7cc 45%,#9a9aa1 100%);
}

/* ---- Texto y datos: Inter ---- */
/* Cubre el <body> base del bundle y también la utilidad .font-sans de Tailwind,
   por si algún componente la fija explícitamente. */
html, body,
.font-sans, [class*="font-sans"]{
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* ---- Títulos: Poppins SemiBold, la letra del logo ---- */
/* El font-weight forzado no es un capricho: ver el aviso de la cabecera. */
h1, h2, h3, h4, h5, h6{
  font-family:'Poppins', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-.01em;            /* Poppins es más redonda y ancha que Sora:
                                       pide menos apretado que el -.02em de antes */
}

/* ---- El titular de la PORTADA: más grande y más apretado ---- */
/* Encargo de David (27-07): «ponlas más grandes y más juntas entre letra y letra,
   no demasiado más». Es el «Club Patinaje Guadalajara» que comparte fila con el
   logo, así que gana al plantarle cara en tamaño.
     tamaño       48 px  →  hasta 64 px (y 38 px en el móvil, donde antes eran 36)
     interletra  -.01em  →  -.025em     (apretado, pero sin que se toquen)
     alto de línea a 1,05: si no, al crecer la letra las dos líneas se separan.
   El clamp() hace que crezca sola con la pantalla, sin saltos.

   ⚠️ SOLO la portada. El selector pide la sección del degradado de la portada
   (from-primary-soft) Y el titular de dos líneas: ningún otro título del portal
   cumple las dos cosas, así que ni las bandas de color ni los títulos de las
   demás pantallas se enteran. Comprobado en la página viva. */
section.from-primary-soft h1.leading-tight{
  font-size:clamp(2.4rem, 5.4vw, 4rem) !important;
  letter-spacing:-.025em !important;
  line-height:1.05 !important;
}

/* Antialiasing consistente (el bundle ya lo pone en body; lo reforzamos en toda la app) */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ================================================================
 * FASE 2 — COMPONENTES CON CARÁCTER (26-07-2026)
 * Da profundidad y forma sin tocar el bundle: esquinas más suaves,
 * tarjetas con sombra teñida de morado y botón principal con presencia.
 * Reversible: quitar este bloque (o el <link> entero) lo deja como antes.
 * ================================================================ */

/* Esquinas un poco más generosas en todo el portal (tarjetas, botones, campos).
   El bundle deriva sus radios de --radius, así que este único valor los suaviza todos. */
:root{ --radius:0.75rem; }

/* Tarjetas: de "caja plana con borde" a tarjeta con profundidad.
   Sombra teñida de morado (no gris) y una leve elevación al pasar el ratón. */
[class~="rounded-lg"][class~="border"]{
  box-shadow:0 1px 2px rgba(58,21,70,.05), 0 6px 20px rgba(58,21,70,.07);
  transition:box-shadow .18s ease;
}
[class~="rounded-lg"][class~="border"]:hover{
  box-shadow:0 2px 6px rgba(58,21,70,.09), 0 16px 38px rgba(58,21,70,.12);
}

/* Botón principal (morado): con presencia, sombra de marca y un guiño al pasar. */
a.bg-primary, button.bg-primary{
  box-shadow:0 6px 16px rgba(72,22,80,.28);
  transition:box-shadow .18s ease, transform .18s ease;
}
a.bg-primary:hover, button.bg-primary:hover{
  box-shadow:0 9px 22px rgba(72,22,80,.36);
  transform:translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 🎨 28-07-2026 — QUE EL LILA SE LEA (tanda -dv)
 *
 * El manual (pág. 16) da el Soft Lavender #A878B5 como color de GRAFISMOS y
 * apoyo: bordes, aros de foco, fondos suaves. No como superficie para poner
 * letra encima. En el portal se le pedía justo eso en dos sitios, y medido
 * no llega:
 *
 *     letra lila sobre pastilla lila clara, a 11 px ......  2,98
 *     letra blanca sobre lila macizo (botón), a 14 px ....  3,49
 *
 * (Hace falta 4,5 para texto normal; 3,0 basta para iconos y bordes.)
 *
 * ⚠️ OJO, QUE ES LO QUE MÁS ME COSTÓ VER: poner el morado del manual encima
 * del lila TAMPOCO llega — se queda en 4,00. Así que en el botón no bastaba
 * con cambiarle la tinta: había que cambiar el botón entero.
 *
 * El lila NO se toca en ningún sitio. Sigue siendo el mismo color y sigue
 * haciendo de borde, de aro de foco y de fondo suave. Lo que cambia es
 * únicamente lo que va ENCIMA de él.
 * ═══════════════════════════════════════════════════════════════════════ */

/* 1) Las pastillas de grupos, tallas y tipos de evento.     2,98 → 11,92
      El fondo lila clarito se queda tal cual; la letra pasa a morado.
      El selector pide las DOS clases a la vez, así que solo alcanza a las
      pastillas. El icono lila suelto del panel («Grupos activos») no se
      entera, y hace bien: por ser icono le basta con 3,0 y tiene 3,49. */
.bg-secondary-soft.text-secondary{
  color:hsl(var(--primary)) !important;
}

/* 2) El botón secundario, tal y como lo describe el manual (pág. 22):
      «fondo claro, borde Lavender, texto Plum».             3,49 → 11,92
      Son dos en todo el portal: «Enviar email de admisión» (solicitudes) y
      «Enviar propuesta de grupo». De paso ordena la escala — antes el lila
      macizo pesaba casi tanto como el botón morado principal y competían.
      El borde va con box-shadow y no con border: así no mueve ni un píxel
      la altura del botón. */
.bg-secondary.text-secondary-foreground{
  background-color:hsl(var(--secondary-soft)) !important;
  color:hsl(var(--primary)) !important;
  box-shadow:inset 0 0 0 1px hsl(var(--secondary)) !important;
}
.bg-secondary.text-secondary-foreground:hover,
.bg-secondary.text-secondary-foreground:focus-visible{
  background-color:hsl(var(--secondary) / .24) !important;
  box-shadow:inset 0 0 0 1px hsl(var(--primary) / .55) !important;
}