/* /assets/css/publico.css
   ═══════════════════════════════════════════════════════════════════════════════════════════════
   LAS PANTALLAS PÚBLICAS — las que se abren sin login:
   `/login.php` · `/alta.php` · `/clave.php` · `/cambiar_password.php` · `/reservar.php`
   ★ Eran cinco y sólo una cargaba esta hoja. Las otras cuatro se vestían solas — dos con un
     `<style>` inline y la paleta escrita a mano (tanda 2f).
   ═══════════════════════════════════════════════════════════════════════════════════════════════
   ★ 100 % variables del tema, y eso acá vale doble: **es la primera pantalla que ve alguien que no
     es cliente todavía**. Si el branding no la alcanza, la empresa se presenta con los colores de
     otra — que es exactamente lo que el constructor de estilos vino a evitar.

   ⚠️ NO carga `admin.css` ni la cáscara del admin: no tiene sidebar, ni menú, ni sesión. Sólo
      `theme.css` + `modulo.css` (por los botones y los `.form-group`) + esta hoja.

   ★ FOCO MÓVIL, al revés que el resto del sistema. Las pantallas de admin son de escritorio porque
     se usan sentado; ésta la abre alguien desde el link que le pasaron por WhatsApp. */

body.pub {
    margin: 0;
    padding: 0 16px 40px;
    background: var(--fondo-claro-1);
    font-family: var(--fuente-cuerpo);
    color: var(--texto);
}

.pub-head {
    max-width: 620px; margin: 0 auto; padding: 28px 0 18px;
    text-align: center;
}
.pub-head h1 {
    margin: 0;
    font-family: var(--fuente-titulos);
    font-size: var(--tipo-titulo-size);
    font-weight: var(--tipo-titulo-weight);
    /* El nombre del negocio con el relleno de la marca: es la primera impresión. */
    background: var(--relleno-marca);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.pub-head p { margin: 4px 0 0; color: var(--texto); font-size: var(--tipo-cuerpo2-size); }

.pub-caja {
    max-width: 620px; margin: 0 auto;
    padding: 24px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
}

.pub-titulo {
    margin: 0 0 6px;
    color: var(--titulo);
    font-family: var(--fuente-titulos);
    font-size: var(--tipo-subtitulo-size);
    font-weight: var(--tipo-subtitulo-weight);
}
.pub-intro { margin: 0 0 18px; color: var(--texto); font-size: var(--tipo-cuerpo2-size); line-height: 1.55; }

.pub-form { display: flex; flex-direction: column; gap: 4px; }
.pub-form .btn-primary { margin-top: 14px; justify-content: center; }
/* ★ Dos por fila en escritorio, una en móvil. El `minmax(0,1fr)` evita que un campo largo
   desborde la fila — sin él, un mail largo estira la columna y rompe la grilla. */
.pub-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0 14px; }

/* ── Elegir sala ─────────────────────────────────────────────────────────────────────────────── */
.pub-salas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pub-sala {
    display: block; padding: 14px;
    border: 1px solid var(--borde); border-radius: var(--radio-md);
    text-decoration: none; transition: var(--transicion);
}
.pub-sala:hover { border-color: var(--principal); box-shadow: var(--sombra-md); }
.pub-sala strong { display: block; color: var(--titulo); }
.pub-sala span   { color: var(--texto); font-size: var(--tipo-cuerpo2-size); }
.pub-sala p      { margin: 6px 0 0; color: var(--texto); font-size: var(--tipo-cuerpo2-size); line-height: 1.5; }
.pub-cap { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--principal); }
.pub-cap .material-icons { font-size: 15px; }

/* ── El reconocimiento ───────────────────────────────────────────────────────────────────────
   ★ Que sea visible importa: es lo que le dice a un alumno que NO le van a cobrar de más. */
.pub-hola {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 18px; padding: 12px 14px;
    border-radius: var(--radio-sm);
    background: color-mix(in srgb, var(--especial-1) 12%, var(--superficie));
    color: var(--titulo);
    font-size: var(--tipo-cuerpo2-size);
}
.pub-hola .material-icons { color: var(--especial-1); font-size: 20px; }

.pub-franjas { margin: 4px 0 14px; color: var(--texto); font-size: var(--tipo-cuerpo2-size); line-height: 1.9; }
.pub-franjas span {
    display: inline-block; margin-right: 6px; padding: 2px 8px;
    border-radius: 999px; background: var(--fondo-claro-1); color: var(--subtitulo);
}

/* ── El estado de una reserva ────────────────────────────────────────────────────────────────
   ★ Cada estado con su color: «pendiente» y «confirmada» no pueden verse igual — es la diferencia
     entre ir tranquilo y no ir. */
.pub-estado { text-align: center; margin-bottom: 20px; }
.pub-estado .material-icons { font-size: 46px; }
.pub-estado h2 {
    margin: 6px 0 0; color: var(--titulo);
    font-size: var(--tipo-subtitulo-size); font-weight: var(--tipo-subtitulo-weight);
}
.pub-estado--pendiente .material-icons { color: var(--especial-3); }
.pub-estado--activa    .material-icons { color: var(--especial-1); }
.pub-estado--cancelada .material-icons,
.pub-estado--expirada  .material-icons { color: var(--especial-2); }

.pub-datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 18px; }
.pub-datos dt { color: var(--texto); font-size: var(--tipo-cuerpo2-size); }
.pub-datos dd { margin: 0; color: var(--titulo); font-size: var(--tipo-cuerpo2-size); }
.pub-desc { display: block; color: var(--especial-1); font-size: .74rem; }

.pub-aviso {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 12px 14px; border-radius: var(--radio-sm);
    background: color-mix(in srgb, var(--especial-3) 10%, var(--superficie));
    color: var(--titulo); font-size: var(--tipo-cuerpo2-size); line-height: 1.55;
}
.pub-aviso .material-icons { color: var(--especial-3); font-size: 18px; }

.pub-pie  { margin: 14px 0 0; color: var(--texto); font-size: .74rem; text-align: center; }
.pub-foot { max-width: 620px; margin: 22px auto 0; text-align: center;
            color: var(--texto); font-size: .72rem; }

@media (max-width: 520px) {
    .pub-caja  { padding: 18px 15px; }
    .pub-datos { grid-template-columns: 1fr; gap: 2px 0; }
    .pub-datos dd { margin-bottom: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   ★★★ LA MARCA — el encabezado de TODA pantalla pública (tanda 2f)
   ═══════════════════════════════════════════════════════════════════════════════════════════════
   Lo dibuja `includes/layouts/marca_publica.php`, y lo usan las cinco puertas de entrada:
   `login` · `alta` · `clave` · `cambiar_password` · `reservar`.

   ⚠️ Por eso vive acá y no en `login.css`: es de las CINCO. Antes cada pantalla armaba su
      encabezado, y sólo una tenía logo — clavado al nombre de un cliente en el HTML.

   ★★ Y TODO SALE DEL TEMA. Es la hoja donde eso importa más: si el branding no llega hasta acá, la
      empresa se presenta con los colores de otra en la primera pantalla que ve un desconocido.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.marca { text-align: center; }

.marca-logo {
    display: block;
    margin: 0 auto 14px;
    /* ⚠️ Se acota por ALTO, no por ancho, y `width:auto`: un logo apaisado y uno cuadrado tienen
       que verse del mismo tamaño óptico. Fijando el ancho, el apaisado queda enano.
       `object-fit: contain` para que nada se deforme si viene con una relación rara. */
    height: 96px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* ── ★★ EL MONOGRAMA — lo que se ve cuando la empresa no cargó su logo ───────────────────────
   Las iniciales sobre el relleno de marca. No es un placeholder: usa el branding que el cliente SÍ
   cargó, así que se ve como una decisión y no como una imagen que falló. */
.marca-mono {
    display: flex; align-items: center; justify-content: center;
    width: 96px; height: 96px;
    margin: 0 auto 14px;
    border-radius: var(--radio-xl);
    background: var(--relleno-marca);
    color: var(--titulo-claro);
    font-family: var(--fuente-titulos);
    font-size: 2.4rem;
    font-weight: var(--tipo-titulo-weight);
    line-height: 1;
    letter-spacing: .02em;
    box-shadow: var(--sombra-md);
    user-select: none;
}

.marca-nombre {
    margin: 0;
    font-family: var(--fuente-titulos);
    font-size: var(--tipo-titulo-size);
    font-weight: var(--tipo-titulo-weight);
    text-decoration: var(--tipo-titulo-decoration);
    color: var(--titulo);
    line-height: 1.2;
}

.marca-lema {
    margin: 6px 0 0;
    font-family: var(--fuente-cuerpo);
    font-size: var(--tipo-cuerpo-size);
    color: var(--texto);
    line-height: 1.5;
}

/* ── El recorte chico: las pantallas que son un trámite, no una portada ─────────────────────── */
.marca--chico .marca-logo,
.marca--chico .marca-mono { height: 64px; width: auto; margin-bottom: 10px; }
.marca--chico .marca-mono { width: 64px; font-size: 1.6rem; }
.marca--chico .marca-nombre { font-size: var(--tipo-subtitulo-size); }
.marca--chico .marca-lema   { font-size: var(--tipo-cuerpo2-size); }

/* ★ En un teléfono el logo se achica: 96px de logo más el formulario no entran arriba del pliegue,
   y el que abre el link quiere ver el campo, no la marca. */
@media (max-width: 480px) {
    .marca-logo, .marca-mono { height: 72px; }
    .marca-mono { width: 72px; font-size: 1.9rem; }
}