/* ═══════════════════════════════════════════════════════════════════════════
 * cpg-publico.css · tanda -afu · 11-10-2026
 * Plataforma creada por David Hernández Díaz para el Club Patinaje Guadalajara.
 *
 * NUEVO DISEÑO EN LAS PANTALLAS PÚBLICAS (David, 11-10: «el contenido de todos
 * los demás menús hay que mejorarlo al rediseño», con el estilo del panel y
 * fondo liso). Solicitud de plaza, Escuelas deportivas, Calendario, Contacto,
 * Legal y «Acceder a mi área». LA PORTADA NO SE TOCA.
 *
 * Todo cuelga de html.cpg-pub (lo pone cpg-publico.js sólo en esas rutas) o de
 * clases propias (.cpg-pub-cab, .cpg-pub-acc) que sólo existen en ellas.
 * Sólo aspecto: ni un campo, ni un botón, ni un envío cambian.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ---- 1 · Fondo liso, como el panel ---- */
html.cpg-pub, html.cpg-pub body{ background:#F9FAFB; }
html.cpg-pub #root > div.min-h-screen{ background:#F9FAFB; }

/* ---- 2 · LA CABECERA: la del panel (degradado morado, filo verde, cola a
 *          toda la altura, rótulo pequeño encima). Sirve para la que se pone
 *          delante (Escuelas, Calendario), para la <header> que ya traen
 *          Solicitud de plaza y Legal, para la banda de Contacto y para la
 *          tarjeta de Acceder. ---- */
.cpg-pub-cab{
  position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(130% 150% at 88% -30%, hsl(292 48% 45%) 0%, hsl(292 58% 29%) 42%, hsl(292 61% 18%) 100%) !important;
  color:#fff !important;
  border-radius:18px !important;
  padding:30px 34px 30px 40px !important;
  margin:0 0 24px !important;
  box-shadow:inset 6px 0 0 #D7FF3F, 0 12px 34px rgba(58,21,70,.28) !important;
  border:0 !important;
}
/* !important: la hoja vieja de los formularios (cpg-formularios.css) ponía la
   cola pequeña abajo, y manda más que esta. */
.cpg-pub-cab::after{
  content:"" !important; position:absolute !important; top:0 !important; bottom:0 !important; right:0 !important; left:auto !important;
  height:100% !important; width:auto !important;
  aspect-ratio:1000/439; transform:translateX(6%);
  background:url('/assets/cola.png') right center / contain no-repeat !important;
  opacity:.22 !important; mix-blend-mode:screen; pointer-events:none; z-index:-1 !important;
}
.cpg-pub-cab > *{ position:relative; }
.cpg-pub-cab h1{
  font-family:'Poppins','Inter',sans-serif !important; font-weight:600 !important;
  color:#fff !important; font-size:2.1rem !important; letter-spacing:-.028em; line-height:1.12 !important; margin:0 !important;
}
.cpg-pub-cab p{ color:rgba(255,255,255,.78) !important; margin:10px 0 0 !important; max-width:70ch; font-size:15px; line-height:1.55; }
/* El rótulo pequeño de arriba: el que ya traen (Solicitud, Legal, Contacto) y
   el que se pone en las demás. */
.cpg-pub-cab .cpg-pub-rot,
.cpg-pub-cab > div:first-child:not(:only-child):not(.cpg-pub-acc-form){
  display:flex; align-items:center; gap:7px;
  margin:0 0 8px !important;
  font-family:'Inter',sans-serif; font-size:11px !important; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.78) !important;
}
.cpg-pub-cab svg{ color:rgba(255,255,255,.72) !important; }
@media (max-width:640px){
  .cpg-pub-cab{ padding:22px 20px 22px 26px !important; border-radius:16px !important; }
  .cpg-pub-cab::after{ display:none; }
  .cpg-pub-cab h1{ font-size:1.6rem !important; }
}

/* Lo que la cabecera nueva sustituye (el título suelto de antes): oculto. */
.cpg-pub-oculto{ display:none !important; }

/* ---- 3 · Las tarjetas de la página, con el filo del panel ---- */
html.cpg-pub main .rounded-xl.border.bg-card,
html.cpg-pub main section.cpg-esc{
  border-color:rgba(72,22,80,.11) !important; border-radius:16px !important;
  box-shadow:0 1px 2px rgba(72,22,80,.05) !important;
}

/* ---- 4 · «Acceder a mi área»: fondo liso, el logo encima y la tarjeta con
 *          su cabecera morada arriba. El formulario, igual. ---- */
html.cpg-pub-acceso .cpg-pub-acc{ background:#F9FAFB !important; flex-direction:column; gap:18px; }
html.cpg-pub-acceso .cpg-pub-acc-logo{ height:64px; width:auto; display:block; }
html.cpg-pub-acceso .cpg-pub-acc-tarjeta{
  max-width:420px !important; padding:0 !important; overflow:hidden;
  border-color:rgba(72,22,80,.11) !important; border-radius:18px !important;
  box-shadow:0 1px 2px rgba(72,22,80,.05), 0 18px 40px -18px rgba(72,22,80,.28) !important;
}
html.cpg-pub-acceso .cpg-pub-acc-tarjeta > .cpg-pub-cab{
  border-radius:0 !important; margin:0 !important; padding:26px 28px 24px 34px !important; box-shadow:inset 6px 0 0 #D7FF3F !important;
}
html.cpg-pub-acceso .cpg-pub-acc-tarjeta > .cpg-pub-cab h1{ font-size:1.7rem !important; }
html.cpg-pub-acceso .cpg-pub-acc-tarjeta > :not(.cpg-pub-cab){ margin-left:28px; margin-right:28px; }
html.cpg-pub-acceso .cpg-pub-acc-tarjeta > :last-child{ margin-bottom:28px; }
html.cpg-pub-acceso .cpg-pub-acc-tarjeta > [dir]{ margin-top:22px; }
@media (max-width:480px){
  html.cpg-pub-acceso .cpg-pub-acc-tarjeta > :not(.cpg-pub-cab){ margin-left:20px; margin-right:20px; }
}

/* ---- 5 · El botón de arriba, «Acceder a mi área», que no se parta ---- */
a.cpg-pub-entrar{ white-space:nowrap; }