/* Lenguaje visual compartido de las páginas públicas.
   Referencia: la portada (auth-portada.css) y /donar (public-donar.css). Estas páginas
   nacieron con otra tipografía y otras formas, y quien llegaba desde el login sentía que
   cambiaba de sitio. Aquí viven las decisiones comunes; cada página conserva su estructura.

   Reglas del sistema:
   - Anton en titulares, Barlow en todo lo demás.
   - Esquinas de 2px: el sistema es de cantos rectos, no de burbujas.
   - Superficies planas: se separan con una línea de 1px, no con sombras.
   - Un solo acento, el ámbar de marca. Nada de naranja.
   Se carga después del CSS propio de cada página. */

.public-help-page,
.public-cuadrillas-page,
.public-seguimiento-page,
.qs {
    --ambar: #FDCC3C;
    --brasa: #E7A11A;
    --tinta: #17140F;
    --humo: #221E18;
    --papel: #FEFDF5;
    --superficie: #FFFDF7;
    --linea: #D7D0C4;
    --linea-tinta: #35302A;
    --texto: #17140F;
    --texto-suave: #686158;
    --sobre-tinta: #F2EDE1;
    --sobre-tinta-suave: #B3AA9B;
    --radio: 2px;
    --salida: cubic-bezier(0.16, 1, 0.3, 1);

    background: var(--papel);
    color: var(--texto);
    font-family: Barlow, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Cabecera y pie comunes ---------- */

/* Misma estructura que /donar: banda oscura con la marca arriba y los accesos al pie.
   Antes cada página resolvía esto distinto: unas con barra de accesos encima del contenido,
   otras con una cabecera gris sin marca y otras sin nada. */
.pub-limite {
    width: min(1120px, 100% - 2.5rem);
    margin-inline: auto;
}

.pub-cabecera {
    background: #17140F;
    color: #F2EDE1;
    padding: clamp(1.5rem, 4vw, 2.25rem) 0 clamp(1.75rem, 5vw, 2.75rem);
}

.pub-marca {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    /* El espacio real de "logo" a "nav" lo pone .public-access-links--oscura de abajo;
       acá no hace falta otro margen, o los dos se suman en vez de fundirse (una caja
       inline-flex y un <section> de bloque no colapsan sus márgenes entre sí). */
    color: #B3AA9B;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
}

.pub-marca img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.pub-marca b {
    color: #F2EDE1;
    font-weight: 700;
}

.pub-marca:hover { color: #FDCC3C; }
.pub-marca:focus-visible { outline: 2px solid #FDCC3C; outline-offset: 4px; }

/* Apilado, no lado a lado: con un título de dos líneas (p. ej. "Galería de donaciones
   entregadas") el botón quedaba flotando a media altura del título, desalineado.
   Debajo del texto, como ya hace /donar con sus propios botones, funciona con
   cualquier largo de título. */
.pub-cabecera__cuerpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.pub-cabecera__texto { max-width: 46rem; }

.pub-eyebrow {
    margin: 0 0 0.5rem;
    color: #FDCC3C;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pub-cabecera .pub-titulo {
    margin: 0;
    max-width: 24ch;
    font-family: Anton, Barlow, system-ui, sans-serif;
    font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.8rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #F2EDE1;
}

.pub-bajada {
    margin: 0.7rem 0 0;
    max-width: 58ch;
    color: #B3AA9B;
    font-size: 1rem;
    line-height: 1.45;
}

.pub-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pub-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border: 1px solid #FDCC3C;
    border-radius: 2px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pub-boton--lleno { background: #FDCC3C; color: #17140F; }
.pub-boton--linea { background: transparent; border-color: #35302A; color: #F2EDE1; }

@media (hover: hover) and (pointer: fine) {
    .pub-boton--lleno:hover { background: #E7A11A; border-color: #E7A11A; color: #17140F; }
    .pub-boton--linea:hover { border-color: #FDCC3C; background: rgba(253, 204, 60, 0.1); color: #FFFFFF; }
}

.pub-boton:active { transform: scale(0.99); }
.pub-boton:focus-visible { outline: 2px solid #FDCC3C; outline-offset: 2px; }

/* Ahora solo lleva la nota de cierre: los accesos se mudaron a la cabecera. */
.pub-pie {
    margin-top: auto;
    background: #17140F;
    padding: 1.1rem 0 1.375rem;
    border-top: 1px solid #35302A;
}

.pub-pie__nota {
    margin: 0;
    color: #B3AA9B;
    font-size: 0.8rem;
}

/* Con la cabecera y el pie a sangre, el contenido ya no necesita su propio margen superior. */
.public-help-page .public-help-shell,
.public-cuadrillas-page .public-cuadrillas-shell {
    padding-top: clamp(1.25rem, 3vw, 2rem);
}

/* ---------- Tipografía ---------- */

.public-help-page h1,
.public-help-page h2,
.public-cuadrillas-page h1,
.public-cuadrillas-page h2,
.public-seguimiento-page h1,
.public-seguimiento-page h2,
.qs h1,
.qs h2 {
    font-family: Anton, Barlow, system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.public-help-page h3,
.public-cuadrillas-page h3,
.public-seguimiento-page h3,
.qs h3 {
    font-family: Barlow, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ---------- Superficies ---------- */

.public-help-page [class*="-card"],
.public-help-page [class*="-panel"],
.public-help-page [class*="-box"],
.public-cuadrillas-page [class*="-card"],
.public-cuadrillas-page [class*="-panel"],
.public-cuadrillas-page [class*="-box"],
.public-seguimiento-page [class*="-card"],
.public-seguimiento-page [class*="-panel"],
.public-seguimiento-page [class*="-box"],
.qs [class*="-card"],
.qs [class*="-panel"],
.qs [class*="-box"] {
    border-radius: var(--radio);
    box-shadow: none;
}

/* ---------- Controles ---------- */

.public-help-page .btn,
.public-help-page button,
.public-help-page input,
.public-help-page select,
.public-help-page textarea,
.public-cuadrillas-page .btn,
.public-cuadrillas-page button,
.public-cuadrillas-page input,
.public-cuadrillas-page select,
.public-cuadrillas-page textarea,
.public-seguimiento-page .btn,
.public-seguimiento-page button,
.public-seguimiento-page input,
.public-seguimiento-page select,
.public-seguimiento-page textarea,
.qs .btn,
.qs button,
.qs input,
.qs select,
.qs textarea,
.qs [class*="boton"] {
    border-radius: var(--radio);
    font-family: inherit;
}

/* Contenido centrado en los dos ejes. Un <a class="btn"> no centra solo como un <button>:
   con altura mínima el texto quedaba arriba ("Volver" junto a "Enviar solicitud"). */
:is(.public-help-page, .public-cuadrillas-page, .public-seguimiento-page, .qs) .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* El foco se ve igual en todas las páginas públicas. */
.public-help-page :focus-visible,
.public-cuadrillas-page :focus-visible,
.public-seguimiento-page :focus-visible,
.qs :focus-visible {
    outline: 2px solid var(--brasa);
    outline-offset: 2px;
}

/* ---------- Paleta de Bootstrap ---------- */

/* Estas páginas cargan Bootstrap o AdminLTE, que traen su azul #007BFF, su amarillo #FFC107
   y grises azulados. Aquí solo existe el ámbar de marca sobre neutros tibios. */
:is(.public-help-page, .public-cuadrillas-page, .public-seguimiento-page, .qs)
:is(.btn-primary, .btn-warning, .btn-outline-primary.active, .bg-primary, .bg-warning) {
    background-color: var(--ambar) !important;
    border-color: var(--ambar) !important;
    color: var(--tinta) !important;
}

:is(.public-help-page, .public-cuadrillas-page, .public-seguimiento-page, .qs)
:is(.btn-primary, .btn-warning):hover {
    background-color: var(--brasa) !important;
    border-color: var(--brasa) !important;
}

/* Los chips de íconos informativos van en tinta con el glifo ámbar. El rojo se reserva
   para lo que es alerta de verdad (focos de calor). */
:is(.public-help-page, .public-cuadrillas-page, .public-seguimiento-page, .qs)
:is(.bg-info, .bg-teal, .bg-cyan, .bg-secondary) {
    background-color: var(--tinta) !important;
    color: var(--ambar) !important;
}

:is(.public-help-page, .public-cuadrillas-page, .public-seguimiento-page, .qs) .bg-danger {
    background-color: #C82333 !important;
    color: #FFFFFF !important;
}

/* Un campo bloqueado se ve apagado, pero con el papel de la marca y no con el gris azulado
   de Bootstrap. */
:is(.public-help-page, .public-cuadrillas-page, .public-seguimiento-page, .qs)
:is(.form-control:disabled, .form-control[readonly]) {
    background-color: var(--papel);
    color: var(--texto-suave);
}

:is(.public-help-page, .public-cuadrillas-page, .public-seguimiento-page, .qs) .btn-light {
    background-color: var(--superficie);
    border-color: var(--linea);
    color: var(--texto);
}

/* ---------- Excepciones ---------- */

/* Lo que es redondo por naturaleza sigue siéndolo: avatares, marcadores y píldoras. */
.public-help-page [class*="avatar"],
.public-help-page [class*="circle"],
.public-help-page [class*="pill"],
.public-cuadrillas-page [class*="avatar"],
.public-cuadrillas-page [class*="circle"],
.public-cuadrillas-page [class*="pill"],
.public-seguimiento-page [class*="avatar"],
.public-seguimiento-page [class*="circle"],
.public-seguimiento-page [class*="pill"],
.qs [class*="avatar"],
.qs [class*="circle"],
.qs [class*="pill"] {
    border-radius: 999px;
}