/* main.css - Sistema visual de Grupo de Hogar.
   Identidad: cercana, cálida y actual. El motivo recurrente es la "mancha de
   luz": una forma orgánica de bordes difusos (nunca un polígono cerrado)
   detrás de cada icono, como un cerco de luz cálida más que como un umbral.
   Cada icono usa una variación ligeramente distinta de la misma forma, para
   que se sienta hecha a mano y no repetida. El resto del sistema se mantiene
   sobrio para que ese gesto no se diluya. */

/* Fuentes auto-hospedadas en /assets/fonts (2026-08-17): antes se cargaban
   con @import a fonts.googleapis.com, pero la CSP del proyecto
   (style-src 'self' 'unsafe-inline', sin fonts.googleapis.com/fonts.gstatic.com
   permitidos) las bloqueaba — Sora/Work Sans probablemente no se habían
   visto nunca, la app caía en las fuentes del sistema sin que se notara.
   Auto-hospedarlas evita tocar la CSP (siguen siendo 'self') y permite que
   el service worker las cachee igual que el CSS/JS para que funcionen
   offline (ver PRECACHE_URLS en sw.js). Solo el subset "latin" de cada
   familia: el contenido es en español y los caracteres con tilde/ñ/ü ya
   caben en ese rango (U+0000-00FF), así que "latin-ext"/"vietnamese" no
   hacían falta. Se dejó fuera el peso 800 de Sora: no se usa en ningún
   sitio del CSS. */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/sora-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/sora-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/work-sans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/work-sans-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/work-sans-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Work Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/work-sans-400-italic.woff2') format('woff2');
}

:root {
    /* Lienzo cálido, no el crema-terracota genérico: ivory con un punto rosado. */
    --color-bg: #FBF6F1;
    --color-bg-alt: #F1E8DB;
    --color-surface: #FFFFFF;

    /* Tinta ciruela oscura en vez de negro puro: más cercana, menos corporativa.
       --color-text-muted se oscureció (de #8B8299) el 2026-08-17: medía 3.4:1
       sobre --color-bg, por debajo del 4.5:1 que exige WCAG AA para texto
       normal (se usa en .hint, .self-note, .empty-state...). #6E6478 da 5.2:1. */
    --color-text: #2A2438;
    --color-text-muted: #6E6478;
    --color-text-soft: #59506C;
    --color-border: #E9DFD0;

    /* Acento cálido (coral/terracota) reservado para acciones y el halo de los
       iconos: --color-accent en sí se queda claro a propósito (es fondo de
       icono/blob, no texto). Cuando el acento pinta TEXTO (enlaces, botón
       primario, etiquetas) se usa --color-accent-text/-hover en su lugar:
       el original (#DD6B4B) solo daba 3.1-3.3:1 como texto, por debajo de
       AA; estas dos variantes dan 5:1+ sobre fondo claro y blanco. */
    --color-accent: #DD6B4B;
    --color-accent-hover: #C6572F;
    --color-accent-tint: #F5DFCF;
    --color-accent-text: #B04D28;
    --color-accent-text-hover: #8F3E1A;

    --color-success-bg: #E7F0E1;
    --color-success-text: #3C6A34;
    --color-danger: #C1443A;
    --color-danger-bg: #FBE8E4;
    --color-danger-text: #8F2E26;
    --color-toggle-on: #5E8F5A;
    --color-toggle-off: #B7AC9A;
    --color-edit-bg: #F0E8DB;

    /* Acentos secundarios para roles (sustituyen al morado/azul genérico).
       --color-gold/-sage se oscurecieron el 2026-08-17: los badges "Admin GH"
       y "Usuario GH" medían 2.5:1 y 3.2:1 sobre su -bg respectivo, muy por
       debajo de AA. Los nuevos tonos dan 5:1+ sin cambiar el -bg (los fondos
       tintados sí pasaban el contraste como color de fondo). */
    --color-gold: #7D5A1D;
    --color-gold-bg: #F3E7CB;
    --color-sage: #3F6B3C;
    --color-sage-bg: #E7F0E1;

    --font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Sora', var(--font-family);

    /* Escala tipográfica (2026-08-17): antes cada tamaño se elegía mirando
       solo el contexto puntual, así que había ~20 valores casi-iguales sin
       progresión clara (12/12.5/12.8/13.5/14/14.5/15/15.5/16px...). Estos
       tokens cubren el texto "de interfaz" (etiquetas, hints, cuerpo de
       listas) — los tamaños de titulares (event-name, announcement-title,
       devotional-title, los h1-h6 del Markdown...) se dejan en px literal
       porque su relación entre sí es deliberada y ya se ajustó a mano varias
       veces en esta sesión (p.ej. el título debe ganar siempre al mayor
       encabezado posible dentro del cuerpo). */
    --text-2xs: 12px;
    --text-xs: 13px;
    --text-sm: 14px;
    --text-base: 15px;
    --text-md: 16px;

    --radius-lg: 26px;
    --radius-md: 12px;
    --radius-blob: 63% 37% 54% 46% / 43% 47% 53% 57%;

    --shadow-card: 0 4px 20px rgba(42, 36, 56, 0.07);
    --shadow-card-hover: 0 18px 40px rgba(42, 36, 56, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-family);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    font-weight: 400;
}

a { color: var(--color-accent-text); }
a:hover { color: var(--color-accent-text-hover); }

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===== Header / Nav (hub y dashboard) ===== */
header {
    padding: 28px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Nav tipo app móvil: botón de tres rayas que despliega las opciones en un
   panel flotante, en vez de mostrar los enlaces sueltos siempre visibles. */
nav { position: relative; }

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.nav-toggle:hover { background: var(--color-bg-alt); }
.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Las tres rayas se transforman en una "X" cuando el menú está abierto. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* El panel desplegado reutiliza el mismo lenguaje visual del menú principal
   (.hub-list/.hub-item/.hub-icon, ver más abajo): mancha de luz + icono y
   título sin botón, en vez de una lista de botones sueltos. La tarjeta
   (fondo, borde, sombra, radio) la da .hub-list; aquí solo se resuelve el
   posicionamiento como panel flotante y el toggle de visibilidad. */
.nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    z-index: 30;
}
.nav-menu.open { display: block; }

/* Header de página (con borde inferior): icono de inicio a la izquierda,
   título centrado en la columna del medio (sin icono propio, ver
   includes/page_header.php) y el menú (nav.php) a la derecha. Grid en vez
   de flex para que el título quede centrado de verdad frente al ancho del
   header, no solo entre sus dos vecinos. */
.admin-header {
    max-width: 1000px;
    margin: 0 auto 30px;
    padding: 24px 20px 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--color-border);
}
.admin-header h1 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--color-text); text-align: center; }

.home-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}
.home-icon:hover { background: var(--color-bg-alt); }

/* Icono propio (sustituye a los emoji, ver includes/icons.php): hereda color
   vía currentColor de quien lo contenga, así que no hace falta fijarlo aquí. */
.icon { flex-shrink: 0; vertical-align: -3px; }

/* ===== Hub (portada y panel de administración): listas agrupadas =====
   Pensado mobile-first: cada sección es un grupo de filas de ancho completo
   y alto cómodo para el dedo (min-height 64px), no una rejilla de tarjetas
   cuadradas. Escala bien a pantallas grandes centrándose en una columna
   legible en vez de esparcirse en más columnas. */
/* max-width igualado a .panel-container (1000px, el ancho de las pantallas
   de administración) a petición del usuario: en escritorio/tablet los
   hub-item se veían más estrechos que el resto del panel; en móvil no
   cambia nada porque la pantalla ya es más estrecha que este límite. */
.hub { max-width: 1000px; margin: 0 auto; padding: 28px 20px 90px; }

.hub-section { margin-bottom: 34px; }
.hub-section:last-child { margin-bottom: 0; }

.hub-section-title {
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 10px 6px;
}

.hub-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.hub-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.2s;
}
.hub-list .hub-item:last-child { border-bottom: none; }
.hub-item:hover, .hub-item:active { background: var(--color-bg-alt); }
.hub-item:hover .hub-icon { background: var(--color-accent); color: #FFF; transform: rotate(-3deg) scale(1.05); }

/* Icono como "mancha de luz": forma orgánica con halo difuso detrás, en vez
   de un contorno geométrico definido. Tres variantes suaves para que ninguna
   fila se sienta calcada de la anterior. */
.hub-icon {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-text);
    background: var(--color-accent-tint);
    border-radius: var(--radius-blob);
    transition: background 0.35s, transform 0.35s, color 0.35s;
}
.hub-icon::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    background: inherit;
    opacity: 0.55;
    filter: blur(10px);
    z-index: -1;
}
.hub-item:nth-child(3n+2) .hub-icon { border-radius: 42% 58% 61% 39% / 48% 38% 62% 52%; }
.hub-item:nth-child(3n) .hub-icon { border-radius: 55% 45% 38% 62% / 60% 42% 58% 40%; }

.hub-item-label { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-text); flex-grow: 1; }
.hub-item-count {
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-text);
    color: white;
    font-size: var(--text-2xs);
    font-weight: 700;
    border-radius: 999px;
}
.hub-item-arrow { color: var(--color-text-muted); font-size: 19px; flex-shrink: 0; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--color-text-muted); font-size: 17px; }

/* ===== Calendario: lista de eventos =====
   Misma "caja" visual que .hub-list, pero cada fila muestra el detalle del
   evento en vez de ser un enlace de navegación. */
.event-list { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.event-item { padding: 18px 20px; border-bottom: 1px solid var(--color-border); }
.event-list .event-item:last-child { border-bottom: none; }
.event-series { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-text); margin-bottom: 4px; }
.event-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--color-text); margin-bottom: 10px; }
.event-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--text-xs); color: var(--color-text-soft); }
.event-meta span { display: inline-flex; align-items: center; gap: 5px; }
/* Listado admin del calendario (calendario/admin/editlist.php): mismas
   .event-list/.event-item de la vista pública, pero con fila de acciones en
   vez de descripción larga - de ahí el margen extra para separarla de la
   fecha/hora. */
.event-item .actions { margin-top: 12px; }

.hub-more { display: block; text-align: center; margin-top: 18px; padding: 10px; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-text); text-decoration: none; }
.hub-more:hover { color: var(--color-accent-text-hover); }

/* ===== Recursos: agrupados por serie, reutiliza .hub-list dentro de cada grupo ===== */
.resource-group { margin-bottom: 26px; }
.resource-group:last-child { margin-bottom: 0; }
.resource-group-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: var(--color-text); margin-bottom: 10px; padding-left: 4px; }

/* ===== Anuncios: reutiliza .event-list/.event-item, la imagen es opcional ===== */
.announcement-image { width: 100%; height: auto; border-radius: var(--radius-md); margin-bottom: 12px; display: block; }
/* Título de cada tarjeta (anuncio o devocional) en las listas: también debe
   quedar por encima del h1 más grande que se pueda escribir en un cuerpo en
   Markdown (22px, ver .devotional-body h1 más abajo). */
.announcement-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--color-text); margin-bottom: 6px; }
.announcement-desc { font-size: var(--text-sm); color: var(--color-text-soft); }

/* ===== Devocionales: lista tipo blog, reutiliza .event-list/.event-item como
   tarjetas enlazadas a la entrada completa ===== */
.devotional-item, .devotional-item * { text-decoration: none !important; }
.devotional-item { display: block; color: inherit; transition: background 0.2s; }
.devotional-item:hover, .devotional-item:active { background: var(--color-bg-alt); }
.devotional-item .announcement-title { color: var(--color-text); }
.devotional-item .announcement-desc { color: var(--color-text-soft); }
.devotional-item .event-meta, .devotional-item .event-meta span { color: var(--color-text-soft); }
.devotional-item .event-meta { margin-bottom: 8px; }
.panel-card .event-meta { margin-bottom: 14px; }

/* El título de la entrada debe leerse claramente por encima de cualquier
   encabezado que el propio autor escriba dentro del cuerpo en Markdown
   (el # más grande del cuerpo es 22px, ver .devotional-body h1 abajo).
   Selector reforzado (h2.devotional-title dentro de .panel-card) porque
   ".panel-card h2" (clase + etiqueta) es más específico que una sola clase
   y si no, gana esa regla de 1.2rem aunque esta venga después en el archivo. */
.panel-card h2.devotional-title { font-size: 25px; }

/* El cuerpo (devocionales) y la descripción (anuncios) se guardan en
   Markdown y se convierten a estas etiquetas reales (ver
   includes/markdown.php), así que el espaciado lo dan los propios
   elementos de bloque, no white-space: pre-line. */
.devotional-body { font-size: 15.5px; color: var(--color-text-soft); line-height: 1.7; }
.devotional-body p, .announcement-desc p { margin-bottom: 14px; text-align: justify; }
.devotional-body p:last-child, .announcement-desc p:last-child { margin-bottom: 0; }
.devotional-body h1, .devotional-body h2, .devotional-body h3,
.devotional-body h4, .devotional-body h5, .devotional-body h6,
.announcement-desc h1, .announcement-desc h2, .announcement-desc h3,
.announcement-desc h4, .announcement-desc h5, .announcement-desc h6 {
    font-family: var(--font-display); color: var(--color-text); margin: 22px 0 10px;
}
.devotional-body h1:first-child, .devotional-body h2:first-child, .devotional-body h3:first-child,
.announcement-desc h1:first-child, .announcement-desc h2:first-child, .announcement-desc h3:first-child { margin-top: 0; }
.devotional-body h1, .announcement-desc h1 { font-size: 22px; }
.devotional-body h2, .announcement-desc h2 { font-size: 19px; }
.devotional-body h3, .announcement-desc h3 { font-size: 17px; }
.devotional-body strong, .announcement-desc strong { color: var(--color-text); }
.devotional-body ul, .devotional-body ol, .announcement-desc ul, .announcement-desc ol { margin: 0 0 14px 22px; }
.devotional-body li, .announcement-desc li { margin-bottom: 6px; }
.devotional-body blockquote, .announcement-desc blockquote {
    border-left: 3px solid var(--color-accent); padding-left: 14px; margin: 0 0 14px;
    color: var(--color-text-muted); font-style: italic;
}
.devotional-body code, .announcement-desc code { background: var(--color-bg-alt); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.devotional-body hr, .announcement-desc hr { border: none; border-top: 1px solid var(--color-border); margin: 20px 0; }
.devotional-body a, .announcement-desc a { color: var(--color-accent-text); }
.devotional-body a:hover, .announcement-desc a:hover { color: var(--color-accent-text-hover); }

/* ===== Footer =====
   Solo vive en la portada (index.php). Probamos antes a FIJAR la altura a
   100dvh con overflow:hidden (para que el footer nunca se saliera de la
   pantalla), pero eso dejaba la altura calculada "congelada" al estado de
   la barra del navegador/gestos de Android en ese momento: al volver del
   historial con la barra en otro estado, aparecía un hueco (la franja
   amarilla del footer asomando donde no tocaba). Con min-height (no altura
   fija) y sin overflow:hidden no hay nada que "congelar": el footer se
   ancla abajo cuando el contenido es corto (.hub crece para ocupar el
   hueco) y si el contenido no cabe, la página entera hace scroll normal,
   sin cálculos de viewport que puedan quedar desincronizados entre
   navegaciones. 100svh (small viewport height) en vez de 100vh/100dvh
   porque es el valor estable: siempre el mínimo real disponible, no cambia
   aunque la barra del navegador se oculte o aparezca. */
.home-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
/* width:100% explícito en los tres hijos: el "align-items: stretch" por
   defecto de flex debería bastar, pero algunos navegadores móviles no lo
   aplican bien junto con max-width en un item de flex-direction:column, y
   .hub se quedaba encogido a su contenido en vez de estirarse — se veía más
   estrecho aquí que en el resto de páginas (que no son flex, así que ahí sí
   se comportaba como un bloque normal). Con width:100% no hay ambigüedad:
   ocupa todo el ancho y luego max-width/margin:auto lo limitan igual que en
   cualquier otra página. */
.home-page .admin-header { flex-shrink: 0; width: 100%; padding-top: max(24px, calc(12px + env(safe-area-inset-top))); }
.home-page .hub { flex: 1 0 auto; width: 100%; }
/* index.php añade viewport-fit=cover para que el navegador reporte bien el
   área segura; si no, en algunos Android (sobre todo instalado como PWA) el
   footer queda tapado por la barra/gestos del sistema en vez de encogerse
   para evitarla. */
.home-page footer { flex-shrink: 0; width: 100%; padding-bottom: max(20px, calc(8px + env(safe-area-inset-bottom))); }

footer {
    background: var(--color-bg-alt); padding: 20px; text-align: center;
    font-size: var(--text-2xs); color: var(--color-text-muted); margin-top: 60px;
    white-space: pre-line;
}
/* Aviso de entorno dev (ver $is_dev en index.php): el texto del footer
   (copyright + versión de sw.js) es igual en dev y prod; esto es lo único
   que cambia entre entornos, fondo amarillo chillón inconfundible para no
   confundir dev con prod a simple vista. */
.footer-dev {
    background: #FFEB00;
    color: #1a1400;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ===== Páginas de autenticación (login) =====
   El halo cálido difuso de fondo sustituye al arco de puerta: la tarjeta en
   sí queda sobria, con esquinas uniformes. */
.auth-page {
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh;
    background: radial-gradient(circle at 50% 0%, var(--color-accent-tint) 0%, var(--color-bg) 55%);
    padding: 20px;
}
.auth-card {
    background: var(--color-surface);
    padding: 40px 32px 32px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-hover);
    width: 100%; max-width: 380px;
    border: 1px solid var(--color-border);
}
.auth-card h2 {
    font-family: var(--font-display); text-align: center; color: var(--color-text);
    font-size: 1.3rem; margin-bottom: 1.5rem;
}
.auth-icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-accent-text);
    background: var(--color-accent-tint);
    border-radius: var(--radius-blob);
}

/* Formularios simples de una columna */
.form-card {
    max-width: 600px; margin: 40px auto; background: var(--color-surface);
    padding: 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
}
.form-card h2 { font-family: var(--font-display); margin-top: 0; margin-bottom: 20px; color: var(--color-text); }
/* Separa las distintas acciones dentro de una misma .form-card (p.ej. la
   pantalla de editar usuario: rol, email, restablecer contraseña, eliminar). */
.form-card hr { border: none; border-top: 1px solid var(--color-border); margin: 26px 0; }

/* ===== Formularios ===== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px; }
.full-width { grid-column: 1 / -1; }
label { display: block; margin-bottom: 8px; margin-top: 15px; font-weight: 500; font-size: var(--text-sm); color: var(--color-text-soft); }
label:first-child { margin-top: 0; }

input[type="text"], input[type="number"], input[type="url"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], textarea, select {
    width: 100%; padding: 11px 12px; margin-top: 5px; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-sizing: border-box; font-family: inherit;
    font-size: var(--text-base); background: var(--color-bg); color: var(--color-text);
}
input[type="text"]:focus, input[type="number"]:focus, input[type="url"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus,
textarea:focus, select:focus { outline: none; border-color: var(--color-accent); background: var(--color-surface); }
input[type="file"] { margin-top: 10px; font-size: var(--text-sm); }
.hint { font-size: var(--text-2xs); color: var(--color-text-muted); margin-top: 4px; }
.form-actions { margin-top: 20px; display: flex; gap: 10px; align-items: center; }
.form-actions.text-right { text-align: right; }

/* Mini-formulario "añadir recordatorio" (calendario/admin/addevent.php y
   editevent.php): cantidad corta + selector de unidad en la misma fila, sin
   etiquetas visibles (el propio texto de las opciones del selector, "Horas
   antes"/etc., ya hace de etiqueta). */
.reminder-fields { display: flex; gap: 10px; margin-top: 5px; }
.reminder-fields input[type="number"] { width: 70px; flex: none; }
.reminder-fields select { flex: 1; }

/* ===== Botones ===== */
.btn {
    padding: 10px 22px; border-radius: 999px; text-decoration: none; font-size: var(--text-sm);
    font-weight: 600; transition: all 0.2s; border: none; cursor: pointer; display: inline-block;
    font-family: inherit;
}
.btn-primary { background: var(--color-accent-text); color: white; }
.btn-primary:hover { background: var(--color-accent-text-hover); }
.btn-secondary { background: var(--color-edit-bg); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-border); }
/* Editar/Eliminar/Aplicar en tablas: antes 6px 14px + 0.8rem medía ~27px de
   alto, muy por debajo de los ~44px recomendados como zona táctil en móvil
   (y el sitio es mobile-first). 12px de relleno vertical + min-height los
   deja en ~44px sin que las tablas se vean desproporcionadas en escritorio. */
.btn-danger, .btn-edit, .btn-toggle {
    padding: 12px 16px; font-size: var(--text-xs); min-height: 44px; display: inline-flex; align-items: center;
}
.btn-danger { background: var(--color-danger); color: white; }
.btn-edit { background: var(--color-edit-bg); color: var(--color-text); }
.btn-toggle { background: var(--color-toggle-on); color: white; }
.btn-toggle.off { background: var(--color-toggle-off); }
.btn-inline-form { display: inline; margin: 0; }

/* Botón grande de login/formularios simples */
.btn-block { width: 100%; padding: 13px; font-size: var(--text-md); margin-top: 10px; border-radius: var(--radius-md); }

/* ===== Paneles del admin ===== */
.panel-page { background: var(--color-bg); min-height: 100vh; }
.panel-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 30px; margin-bottom: 30px; }
.panel-container { max-width: 1000px; margin: 0 auto; padding: 0 20px 60px; }
.panel-card h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin: 0 0 20px; color: var(--color-text); }
.table-header { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.table-header h2 { margin: 0; }

/* ===== Tablas =====
   .table-scroll permite que la tabla se desplace horizontalmente en vez de
   desbordar o apretujar las columnas cuando no caben en pantallas estrechas. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
th { background: var(--color-bg-alt); font-weight: 600; color: var(--color-text-soft); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.04em; }
tr:last-child td { border-bottom: none; }
.img-preview { width: 50px; height: 50px; object-fit: cover; border-radius: var(--radius-md); display: block; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.empty-row { text-align: center; color: var(--color-text-muted); }
.desc-preview { color: var(--color-text-muted); display: block; max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Mensajes ===== */
.msg { padding: 13px 18px; border-radius: var(--radius-md); margin-bottom: 20px; font-size: var(--text-base); }
.msg.success { background: var(--color-success-bg); color: var(--color-success-text); }
.msg.error { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* ===== Familias (admin/families/): checklist de miembros ===== */
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 5px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    max-height: 320px;
    overflow-y: auto;
}
.checkbox-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 8px 10px;
    font-weight: 400;
    font-size: var(--text-base);
    color: var(--color-text);
    border-radius: 8px;
}
.checkbox-row:hover { background: var(--color-bg-alt); }
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.checkbox-row .hint { margin: 0; }

/* ===== Roles (gestión de usuarios) ===== */
.badge {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.badge-admin { background: var(--color-text); color: white; }
.badge-user { background: var(--color-edit-bg); color: var(--color-text); }
.badge-userGH { background: var(--color-sage-bg); color: var(--color-sage); }
.self-note { color: var(--color-text-muted); font-size: var(--text-xs); font-style: italic; }

/* ===== Parrilla de permisos (admin/permissions/) ===== */
.permissions-grid th, .permissions-grid td { text-align: center; }
.permissions-grid th:first-child, .permissions-grid td:first-child { text-align: left; }
.permissions-grid-cell input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }

/* ===== Lista de oración =====
   Antes vivía como <style> suelto y ligeramente distinto en cada página
   (prayerlist/index.php, prayerlist/admin/editlist.php,
   prayerlist/admin/addprayer.php) — aquí unificado en el design system, con
   la versión con más acabado (borde + sombra al hover) para las dos listas
   agrupadas por propietario, y sin colores sueltos (antes había un
   "background: white" y un rgba(42,36,56,...) a mano en vez de las
   variables). */
.prayer-list { list-style: none; max-width: 700px; margin: 20px auto 0; }
.owner-item { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 24px 0 8px; color: var(--color-text-soft); }
.prayer-item {
    cursor: pointer; padding: 12px 16px; margin: 6px 0; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.prayer-item:hover { border-color: var(--color-accent-tint); box-shadow: var(--shadow-card-hover); }
.prayer-item a { text-decoration: none; color: inherit; display: block; }

/* Modal de detalle (vista de miembro, prayerlist/index.php) */
.modal { display: none; position: fixed; z-index: 10; inset: 0; background-color: rgba(42, 36, 56, 0.45); }
.modal-content { background: var(--color-surface); margin: 10% auto; padding: 28px; border-radius: var(--radius-lg); width: 90%; max-width: 600px; box-shadow: var(--shadow-card-hover); }
.modal-content h2 { font-family: var(--font-display); }
.close { float: right; font-size: 24px; font-weight: bold; cursor: pointer; color: var(--color-text-muted); }
.close:hover { color: var(--color-accent-text); }

/* Autocompletado de propietario (prayerlist/admin/addprayer.php) */
.form-group { position: relative; margin-bottom: 15px; }
.suggestions {
    display: none; position: absolute; background: var(--color-surface); border: 1px solid var(--color-border);
    max-height: 150px; overflow-y: auto; z-index: 1000; width: 100%; border-radius: var(--radius-md);
}
.suggestions div { padding: 8px; cursor: pointer; }
.suggestions div:hover { background: var(--color-bg-alt); }

/* ===== Responsive =====
   El uso principal del sitio es en móvil, así que header y nav se ajustan
   pronto (734px) en vez de esperar al último breakpoint. */
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    table { font-size: var(--text-sm); }
    th, td { padding: 10px; }
    .img-preview { width: 40px; height: 40px; }
    .panel-card, .form-card { padding: 20px; }
}
@media (max-width: 734px) {
    header { flex-wrap: wrap; gap: 10px 16px; padding: 18px 20px; }
    .hub { padding-top: 20px; }
    .hub-item-label { font-size: var(--text-sm); }
}