/* ============================================================
   MARSUPIA · assets/css/style.css
   Identidad de marca aplicada al panel — tokens tomados del Manual
   de Identidad v1 (pino/menta/arena/papel/tinta/salvia/bruma/miel),
   no de la web pública actual (que usa una tinta y una tipografía
   de texto distintas — ver README, "Rediseño con identidad de
   marca"). Tipografía: Fraunces (títulos) + Hanken Grotesk (texto),
   cargadas en includes/header.php y en las páginas de auth sueltas.

   SIN MODO OSCURO A PROPÓSITO (2026-07-13): el panel no sigue
   prefers-color-scheme. En modo oscuro, sidebar + contenido + tarjetas
   terminaban siendo variaciones del mismo verde — monocromático, sin
   la variedad cálida (arena/blanco/verde/miel) que sí tienen el editor
   de Bitácora/Brújula y la web pública real de Marsupia, ninguno de
   los cuales cambia con el tema del sistema tampoco. Se sigue el mismo
   criterio acá: una sola paleta cálida siempre, para que el panel se
   sienta como el mismo producto en todas sus pantallas.
   ============================================================ */
:root {
    /* Marca */
    --pino: #0E3F38;
    --pino-2: #0B332E;
    --menta: #66F1C2;
    --menta-dark: #45D9A5;
    --arena: #E9E1D2;
    --papel: #FBF8F1;
    --tinta: #16211D;
    --salvia: #5C6B64;
    --bruma: #B9C8C0;
    --miel: #E6B45C;
    --clay: #B5533C;

    /* Semántico */
    --bg: var(--papel);
    --card-bg: #ffffff;
    --text: var(--tinta);
    --text-muted: var(--salvia);
    --border: rgba(14, 63, 56, .14);
    --link: var(--pino);
    --accent: var(--menta);
    --accent-ink: var(--pino);
    --danger: var(--clay);
    --success-bg: rgba(102, 241, 194, .18);
    --success-text: var(--pino);
    --error-bg: rgba(181, 83, 60, .14);
    --error-text: #7A3625;
    --warn-bg: rgba(230, 180, 92, .2);
    --warn-text: #7A5416;
    --chrome: var(--pino);
    --chrome-2: var(--pino-2);
    --chrome-ink: var(--papel);
    --chrome-muted: var(--bruma);
    --radius: 20px;
    --radius-sm: 12px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -.01em; margin: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--menta); color: var(--pino); }
:focus-visible { outline: 2.5px solid var(--menta); outline-offset: 2px; border-radius: 4px; }

/* ---------- Auth pages (login / forgot / reset) ---------- */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: var(--pino);
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 36px 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 24px 60px -20px rgba(0, 0, 0, .45);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.auth-brand span {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 19px;
    color: var(--link);
    letter-spacing: -.01em;
}

.auth-card h1 {
    margin: 0 0 4px;
    font-size: 24px;
    color: var(--link);
}

.subtitle {
    color: var(--text-muted);
    margin: 0 0 20px;
    font-size: 14px;
}

.link-muted {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    color: var(--text-muted);
}
.link-muted:hover { color: var(--link); }

/* ---------- Forms ---------- */
form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin: 14px 0 6px;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="date"],
form input[type="number"],
form textarea,
form select {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    /* Fondo siempre blanco (no sigue el tema oscuro) — el texto tiene que
       quedar siempre oscuro para que se pueda leer, nunca var(--text)
       (que en modo oscuro es claro, casi ilegible sobre blanco). */
    background: #fff;
    color: #16211D;
    font-family: inherit;
}

form textarea {
    resize: vertical;
    line-height: 1.5;
}

form input:focus,
form textarea:focus,
form select:focus {
    outline: none;
    border-color: var(--menta);
    box-shadow: 0 0 0 3px rgba(102, 241, 194, .3);
}

button, .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--menta);
    color: var(--pino);
    border: none;
    padding: 11px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: transform .15s ease, background .15s ease;
}

button:hover, .btn:hover { background: var(--menta-dark); text-decoration: none; transform: translateY(-1px); }
button:disabled, .btn:disabled { opacity: .55; cursor: default; transform: none; }

.auth-card button[type="submit"] { width: 100%; margin-top: 20px; justify-content: center; }

.btn-link {
    display: inline-flex;
    background: none;
    border: none;
    color: var(--pino);
    padding: 0;
    font: inherit;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }

.btn-link.btn-danger { color: var(--danger); }

/* ---------- Alerts ---------- */
.alert {
    padding: 11px 15px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
}

.alert-success { background: var(--success-bg); color: var(--success-text); }
.alert-error { background: var(--error-bg); color: var(--error-text); }

/* ---------- Admin layout ---------- */
.app {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    background: var(--chrome);
    color: var(--chrome-muted);
    padding: 24px 14px;
    flex-shrink: 0;
}

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -.01em;
    margin: 4px 10px 28px;
    color: var(--chrome-ink);
}
.sidebar .brand svg { flex: none; }

.sidebar nav { display: flex; flex-direction: column; gap: 3px; }

.sidebar nav a {
    display: flex;
    align-items: center;
    color: var(--chrome-muted);
    padding: 11px 16px;
    border-radius: 999px;
    font-size: 15.5px;
}

.sidebar nav a:hover { background: rgba(255, 255, 255, .07); color: var(--chrome-ink); text-decoration: none; }
.sidebar nav a.active { background: var(--menta); color: var(--pino); font-weight: 600; }

.sidebar .nav-group { margin-top: 2px; }
.sidebar .nav-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--chrome-muted);
    padding: 11px 16px;
    border-radius: 999px;
    font-size: 15.5px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.sidebar .nav-group-title:hover { background: rgba(255, 255, 255, .07); color: var(--chrome-ink); }
.sidebar .nav-group-arrow {
    font-size: 11px;
    color: var(--chrome-muted);
    transition: transform .15s;
}
.sidebar .nav-group.open .nav-group-arrow { transform: rotate(90deg); }
.sidebar .nav-submenu {
    display: none;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
}
.sidebar .nav-group.open .nav-submenu { display: flex; }
.sidebar .nav-sub {
    display: block;
    color: var(--chrome-muted);
    padding: 9px 16px 9px 32px;
    border-radius: 999px;
    font-size: 14.5px;
}
.sidebar .nav-sub:hover { background: rgba(255, 255, 255, .07); color: var(--chrome-ink); text-decoration: none; }
.sidebar .nav-sub.active { background: var(--menta); color: var(--pino); font-weight: 600; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 16px 30px;
    background: var(--arena);
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-muted);
}

.content { padding: 30px; background: var(--arena); flex: 1; }

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.page-header h1 { margin: 0; font-size: 24px; color: var(--text); }

/* Enlace "volver" — en toda pantalla que se llega desde una lista (editar,
   nuevo, curaduría, reabrir un reporte guardado) para que siempre quede
   claro cómo salir sin usar el botón "atrás" del navegador. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.back-link:hover { color: var(--pino); text-decoration: none; }

.form-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 28px;
    max-width: 420px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
}

/* Fila de 2 campos lado a lado dentro de un formulario (ej. Edad + Género). */
.row2 { display: flex; gap: 12px; }
.row2 > * { flex: 1; }

/* Tarjeta repetible dentro de un form-card (ej. un hijo, un perfil) —
   mismo dispositivo visual que ya usa el editor de Bitácora/Brújula para
   sus bloques por hijo, adaptado a los tokens de marca del panel. */
.block {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px;
    margin-bottom: 16px;
    background: var(--bg);
}
.block .bh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.block .bh .t {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: var(--pino);
    font-size: 15px;
}
.btn-x {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.btn-x:hover { color: var(--danger); background: var(--error-bg); }

/* ---------- Table ---------- */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.table th, .table td {
    text-align: left;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    vertical-align: middle;
}

.table th {
    background: var(--pino);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--papel);
    border-bottom: none;
}
.table tbody tr:last-child td { border-bottom: none; }

/* Ojo: NUNCA display:flex directo en un <td> — deja de comportarse como
   celda de tabla (el navegador lo envuelve en una celda anónima) y pierde
   el centrado vertical automático de la fila. En filas altas (ej. texto
   largo en una columna vecina) los links de acción quedaban pegados
   arriba, "flotando" separados del resto de la fila. En vez de eso, los
   hijos de .actions son inline-block con separación por margen — así el
   <td> sigue siendo una celda de tabla normal y se centra solo. */
.table .actions {
    /* Nunca partir Editar/Eliminar en dos líneas por falta de espacio —
       si la columna queda angosta (ej. Fuentes confiables, con "Fuente"
       y "Tipo" largos compitiendo por ancho), que la columna crezca lo
       necesario en vez de apilar las acciones una debajo de la otra. */
    white-space: nowrap;
}
.table .actions > a,
.table .actions > form {
    display: inline-block;
    vertical-align: middle;
    margin-right: 14px;
}
.table .actions > a:last-child,
.table .actions > form:last-child { margin-right: 0; }

/* Que un link real (no una acción/botón) se note como tal a simple
   vista, no solo al pasar el mouse — ej. la columna "Enlace" de Fuentes
   confiables. */
.table td a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(14, 63, 56, .35); }
.table td a:hover { text-decoration-color: currentColor; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px 3px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(92, 107, 100, .14);
    color: var(--text-muted);
}
.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.badge-ok { background: var(--success-bg); color: var(--success-text); }
.badge-off { background: var(--error-bg); color: var(--error-text); }
.badge-warn { background: rgba(230, 180, 92, .18); color: #8a5f16; }

/* Chip discreto para marcar el origen de una familia (autoregistro vía
   activar.php vs. cargada a mano por el operador) — no es un estado, así
   que no usa .badge para no competir visualmente con la columna Estado. */
.chip-origen {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--pino);
    background: rgba(102, 241, 194, .18);
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ---------- Grilla de contenido de audio (saludos/despedidas/taglines) ---------- */
.ac-grid { margin: 10px 0 8px; }
.ac-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.ac-row:first-child { border-top: 1px solid var(--border); }
.ac-tono {
    flex: 0 0 110px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 13px;
}
.ac-texto {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}
.ac-del {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--danger);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.ac-del:hover { background: var(--error-bg); text-decoration: none; transform: none; }
.ac-add {
    margin-top: 6px;
    background: transparent;
    border: 1.5px dashed var(--border);
    color: var(--pino);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
}
.ac-add:hover { background: rgba(14, 63, 56, .06); text-decoration: none; transform: none; }
.ac-empty { font-size: 13px; color: var(--text-muted); padding: 8px 0; }