/* 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. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Work+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

: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: #2A2438;
    --color-text-muted: #8B8299;
    --color-text-soft: #59506C;
    --color-border: #E9DFD0;

    /* Acento cálido (coral/terracota) reservado para acciones y el halo de los iconos. */
    --color-accent: #DD6B4B;
    --color-accent-hover: #C6572F;
    --color-accent-tint: #F5DFCF;

    --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: #B98A3A;
    --color-gold-bg: #F3E7CB;
    --color-sage: #5E8F5A;
    --color-sage-bg: #E7F0E1;

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

    --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); }

: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 / Logo / Nav (hub y dashboard) ===== */
header {
    padding: 28px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo { display: flex; align-items: center; width: 224px; }
.logo img { width: 100%; height: auto; max-height: 60px; object-fit: contain; border-radius: 6px; }
.logo-text { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--color-text); text-decoration: none; transition: color 0.2s; }
.logo-text:hover { color: var(--color-accent); }

/* Enlaces del nav como botones (.btn-secondary): en móvil, un texto suelto
   con solo un subrayado al :hover es un objetivo de dedo demasiado pequeño. */
nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
nav .btn { padding: 9px 16px; font-size: 12.5px; }

/* Header del panel de administración (con borde inferior) */
.admin-header {
    max-width: 1000px;
    margin: 0 auto 30px;
    padding: 24px 20px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    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); }

/* ===== 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. */
.hub { max-width: 560px; 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: 12.5px;
    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); 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;
    font-size: 21px;
    background: var(--color-accent-tint);
    border-radius: var(--radius-blob);
    transition: background 0.35s, transform 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: 15px; 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);
    color: white;
    font-size: 12px;
    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: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 4px; }
.event-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--color-text); margin-bottom: 10px; }
.event-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--color-text-soft); }
.event-meta span { display: inline-flex; align-items: center; gap: 5px; }

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

/* ===== 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; }
.announcement-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--color-text); margin-bottom: 6px; }
.announcement-desc { font-size: 14px; color: var(--color-text-soft); white-space: pre-line; }

/* ===== Footer ===== */
footer {
    background: var(--color-bg-alt); padding: 40px; text-align: center;
    font-size: 12px; color: var(--color-text-muted); margin-top: 60px;
}

/* ===== 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;
}

/* 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); }

/* ===== 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: 0.9rem; color: var(--color-text-soft); }
label:first-child { margin-top: 0; }

input[type="text"], input[type="number"], input[type="url"], input[type="password"], 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: 0.95rem; background: var(--color-bg); color: var(--color-text);
}
input[type="text"]:focus, input[type="number"]:focus, input[type="url"]:focus,
input[type="password"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-accent); background: var(--color-surface); }
input[type="file"] { margin-top: 10px; font-size: 0.9rem; }
.hint { font-size: 0.8rem; 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; }

/* ===== Botones ===== */
.btn {
    padding: 10px 22px; border-radius: 999px; text-decoration: none; font-size: 0.9rem;
    font-weight: 600; transition: all 0.2s; border: none; cursor: pointer; display: inline-block;
    font-family: inherit;
}
.btn-primary { background: var(--color-accent); color: white; }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-secondary { background: var(--color-edit-bg); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-border); }
.btn-danger { background: var(--color-danger); color: white; padding: 6px 14px; font-size: 0.8rem; }
.btn-edit { background: var(--color-edit-bg); color: var(--color-text); padding: 6px 14px; font-size: 0.8rem; }
.btn-toggle { background: var(--color-toggle-on); color: white; padding: 6px 14px; font-size: 0.8rem; }
.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: 1rem; 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: 0.78rem; 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: 0.95rem; }
.msg.success { background: var(--color-success-bg); color: var(--color-success-text); }
.msg.error { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* ===== 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-adminGH { background: var(--color-gold-bg); color: var(--color-gold); }
.badge-userGH { background: var(--color-sage-bg); color: var(--color-sage); }
.role-form { display: flex; gap: 8px; align-items: center; }
.role-form select { width: auto; margin-top: 0; }
.self-note { color: var(--color-text-muted); font-size: 0.85rem; font-style: italic; }

/* ===== 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; }
    .admin-header { flex-direction: column; gap: 15px; text-align: center; }
    .admin-header nav { justify-content: center; }
    table { font-size: 0.9rem; }
    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; }
    .logo { width: auto; }
    .logo-text { font-size: 18px; }
    .hub { padding-top: 20px; }
    .hub-item-label { font-size: 14.5px; }
}