/* assets/css/style.css
   Área pública de ActiExtra. Mobile-first estricto (Hoja de Ruta 6):
   se diseña primero para móvil y se amplía con @media (min-width) para
   pantallas más grandes, nunca al revés. */

:root {
    /* Azul del logo como color de marca, resto de la paleta desaturada y
       llevada hacia azules (menos turquesa) según petición de la clienta. */
    --color-primario: #19417a;
    --color-primario-oscuro: #102c54;
    --color-secundario: #3a7290;
    --color-acento: #c07a4a;
    --color-fondo: #ffffff;
    --color-fondo-alt: #f2f5f7;
    --color-texto: #1e2a33;
    --color-texto-suave: #5c707a;
    --color-borde: #dce3e8;
    --radio: 12px;
    --sombra: 0 4px 16px rgba(16, 44, 84, 0.1);
}

* { box-sizing: border-box; }
/* min-height:100vh + flex-column, con .contenido-publico como flex:1 más
   abajo: así el pie de página (footer + banda de crédito) siempre queda
   pegado al final de la pantalla en vez de dejar un hueco blanco debajo
   cuando el contenido es corto (se notaba sobre todo en escritorio, con
   poco contenido en pantallas anchas). */
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--color-texto); background: var(--color-fondo); line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: var(--color-primario); }

/* ---------- Cabecera ---------- */
.cabecera-publica { background: #fff; box-shadow: var(--sombra); position: sticky; top: 0; z-index: 50; }
.cabecera-publica__barra { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
.cabecera-publica__marca img { height: 40px; }

.cabecera-publica__toggle { background: none; border: none; width: 34px; height: 28px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; padding: 0; }
.cabecera-publica__toggle span { display: block; height: 3px; background: var(--color-primario-oscuro); border-radius: 2px; }

.cabecera-publica__nav {
    display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; box-shadow: var(--sombra); padding: 10px 16px 16px;
}
.cabecera-publica__nav.abierto { display: flex; }
.cabecera-publica__nav a { padding: 12px 6px; text-decoration: none; color: var(--color-texto); border-bottom: 1px solid var(--color-borde); font-weight: 500; }
.cabecera-publica__nav a.activo { color: var(--color-primario); }
.cabecera-publica__nav a:last-child { border-bottom: none; }
.btn-nav-destacado { background: var(--color-primario); color: #fff !important; border-radius: 8px; text-align: center; margin-top: 6px; }
.cabecera-publica__acceso { font-size: 0.85rem; color: var(--color-texto-suave) !important; }

@media (min-width: 860px) {
    .cabecera-publica__toggle { display: none; }
    .cabecera-publica__nav {
        display: flex; flex-direction: row; align-items: center; position: static; box-shadow: none; padding: 0; gap: 4px;
    }
    .cabecera-publica__nav a { border-bottom: none; padding: 8px 12px; border-radius: 8px; }
    .cabecera-publica__nav a:hover { background: var(--color-fondo-alt); }
    .cabecera-publica__nav a.btn-nav-destacado:hover { background: var(--color-primario-oscuro); }
    .btn-nav-destacado { margin-top: 0; padding: 8px 18px; }
}

/* ---------- Contenido genérico ---------- */
.contenido-publico { flex: 1 0 auto; }
.seccion { padding: 32px 16px; max-width: 1100px; margin: 0 auto; }
.seccion h1, .seccion h2 { color: var(--color-primario-oscuro); }

/* ---------- Countdown (cuenta atrás del campamento, ver .bloque-campamento en Inicio) ---------- */
.countdown { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.countdown__bloque { background: rgba(255,255,255,0.15); border-radius: 10px; padding: 12px 14px; min-width: 68px; }
.countdown__numero { font-size: 1.6rem; font-weight: 700; display: block; }
.countdown__etiqueta { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }

.grid-tarjetas { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
.tarjeta-publica { background: var(--color-fondo-alt); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.tarjeta-publica img { width: 100%; height: 160px; object-fit: cover; }
/* Portadas del blog (.grid-tarjetas es exclusivo de blog.php): la imagen se
   ve entera, sin recortar, rellenando el hueco sobrante en blanco -- pedido
   explícito de que nunca se vea una foto cortada en la revista. */
.grid-tarjetas .tarjeta-publica img { object-fit: contain; background: #fff; }
.tarjeta-publica__cuerpo { padding: 14px 16px; }
.tarjeta-publica__cuerpo h3 { margin: 0 0 6px; font-size: 1.05rem; }
.tarjeta-publica__fecha { color: var(--color-texto-suave); font-size: 0.85rem; }
.tarjeta-publica a { text-decoration: none; color: inherit; }
.enlace-subrayado { text-decoration: underline !important; color: var(--color-primario) !important; font-weight: 600; }

/* Botones reutilizados en toda el área pública (Inicio, Blog, Agenda...) */
.btn { padding: 9px 16px; border-radius: 8px; border: 1px solid var(--color-primario); background: #fff; color: var(--color-primario); cursor: pointer; font-size: 0.9rem; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--color-fondo-alt); }
.btn-relleno { background: var(--color-primario); color: #fff; }
.btn-relleno:hover { background: var(--color-primario-oscuro); }
.btn:disabled { opacity: 0.6; cursor: progress; }

@media (min-width: 640px) { .grid-tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-tarjetas { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Agenda vacía (vídeo del caldero) ---------- */
.agenda-vacia { text-align: center; max-width: 480px; margin: 20px auto; }
.agenda-vacia__video { width: 100%; max-width: 320px; }
@media (min-width: 860px) {
    .agenda-vacia { max-width: 960px; }
    .agenda-vacia__video { max-width: 640px; }
}
.agenda-vacia p { margin-top: 16px; font-size: 1.05rem; color: var(--color-texto-suave); }

/* ---------- Pie de página ---------- */
.pie-publico { background: var(--color-primario-oscuro); color: #e7f0ea; padding: 30px 16px 16px; margin-top: 40px; }
.pie-publico__contenido { display: flex; flex-direction: column; gap: 18px; max-width: 1100px; margin: 0 auto; }
.pie-publico__logo { height: 68px; margin-bottom: 8px; }
.pie-publico a { color: #e7f0ea; }
.pie-publico__legal { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.pie-publico__copy { text-align: left; font-size: 0.75rem; opacity: 0.7; margin: 10px 0 0; }

/* Banda de crédito, fuera de <footer> a propósito: una franja propia, más
   oscura que el resto del pie, pegada del todo abajo. */
.banda-credito-desarrollo { background: var(--color-primario-oscuro-2, #0c2340); text-align: center; padding: 4px 16px; }
.banda-credito-desarrollo a {
    font-family: 'Caveat', cursive; font-size: 1rem; color: #e7f0ea; text-decoration: none; opacity: 0.9;
}
.banda-credito-desarrollo a:hover { opacity: 1; text-decoration: underline; }

/* Copyright: dos copias, una por tamaño de pantalla (ver footer_public.php). */
.pie-publico__copy--escritorio { display: none; }
.pie-publico__copy--movil { max-width: 1100px; margin: 18px auto 0; }
.pie-publico__arriba { max-width: 1100px; margin: 16px auto 0; text-align: center; font-size: 0.85rem; }
.pie-publico__arriba a { text-decoration: none; opacity: 0.85; }
.pie-publico__arriba a:hover { opacity: 1; text-decoration: underline; }

@media (min-width: 700px) {
    .pie-publico__contenido { flex-direction: row; justify-content: space-between; }
    .pie-publico__copy--escritorio { display: block; }
    .pie-publico__copy--movil { display: none; }
}

/* ---------- Formularios genéricos del área pública ---------- */
.form-publico { display: flex; flex-direction: column; gap: 6px; max-width: 480px; }
.form-publico label { font-weight: 600; font-size: 0.9rem; margin-top: 10px; }
.form-publico input, .form-publico textarea, .form-publico select {
    padding: 11px 12px; border: 1px solid var(--color-borde); border-radius: 8px; font-size: 1rem; font-family: inherit;
}
.btn-primario-publico {
    margin-top: 18px; padding: 13px; border: none; border-radius: 8px; background: var(--color-primario);
    color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.btn-primario-publico:hover { background: var(--color-primario-oscuro); }
.btn-primario-publico:disabled { opacity: 0.6; cursor: progress; }
.alerta-error { background: #f5e1e1; color: #b8494c; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; }
.alerta-exito { background: #e2edf1; color: #3a7290; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; }

/* ---------- Fila de evento (Inicio "Qué está por venir" y Agenda completa) ---------- */
.fila-evento__mes-titulo { color: var(--color-primario-oscuro); margin: 18px 0 8px; }
.fila-evento {
    display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 8px;
    background: var(--color-fondo-alt); margin-bottom: 8px; border-left: 4px solid var(--color-primario);
}
.fila-evento--taller { border-left-color: var(--color-acento); }
.fila-evento--otros { border-left-color: var(--color-secundario); }
.fila-evento__fecha { text-align: center; min-width: 52px; }
.fila-evento__dia { display: block; font-size: 1.3rem; font-weight: 700; color: var(--color-primario-oscuro); }
.fila-evento__diasemana { font-size: 0.7rem; color: var(--color-texto-suave); text-transform: uppercase; }
.fila-evento__titulo { flex: 1; font-weight: 600; }
.fila-evento__btn {
    flex-shrink: 0; border: none; color: #fff; background: var(--color-primario);
    border-radius: 10px; padding: 8px 16px; font-size: 0.85rem; cursor: pointer;
}
.fila-evento--taller .fila-evento__btn { background: var(--color-acento); }
.fila-evento--otros .fila-evento__btn { background: var(--color-secundario); }

/* ---------- Modal genérico (eventos y actividades) ---------- */
.modal { display: none; position: fixed; inset: 0; background: rgba(16,44,84,0.5); align-items: center; justify-content: center; z-index: 200; padding: 16px; }
.modal-contenido { background: #fff; border-radius: var(--radio); padding: 24px; max-width: 480px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; text-align: left; }
.modal-cerrar { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--color-texto-suave); }

/* ---------- Paginación (Agenda) ---------- */
.paginacion { display: flex; justify-content: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.paginacion a, .paginacion span {
    display: inline-block; min-width: 36px; text-align: center; padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--color-borde); text-decoration: none; color: var(--color-texto);
}
.paginacion a:hover { background: var(--color-fondo-alt); }
.paginacion .activa { background: var(--color-primario); color: #fff; border-color: var(--color-primario); }