/* ═══════════════════════════════════════════════════════════════════
   Somos RED — Design System
   ───────────────────────────────────────────────────────────────────
   Phase 15.A.1: extraído del <style> inline de layout.leaf.

   Los tokens de marca (--brand-*, --font-*) traen acá los valores por
   defecto de Somos RED. `#brandStyle()` (Phase 15.A.2) emite un
   :root{} DESPUÉS del <link> a este archivo, así que cualquier valor
   configurado por entorno gana por orden de cascada sin tocar el CSS.

   Regla: ningún hex de marca literal fuera del bloque :root de abajo.
   ═══════════════════════════════════════════════════════════════════ */

/* Google Picker se inyecta en <body> con su propio overlay; nuestros
   modales usan z-index:9999 y por eso el picker queda tapado detrás
   tras completar el sign-in. Forzamos el picker siempre arriba. */
.picker-dialog-bg, .picker-dialog {
    z-index: 2147483647 !important;
}

/* Nota que `drive-picker.js` inyecta en iOS, donde el popup de OAuth de
   Google no funciona (ver ADR-003). El botón queda disabled y esta línea
   explica por qué, para que el usuario no lo lea como una falla del sistema. */
.drive-unsupported-hint {
    font-size: .72rem;
    line-height: 1.35;
    color: var(--text-muted);
}
/* Sólo los nodos propios del módulo llevan margen: el report form reusa un
   <span> que ya vive dentro de un flex row alineado al centro. */
p.drive-unsupported-hint { margin: .3rem 0 0; }

/* ─── Tokens ─────────────────────────────────── */
:root {
    /* Marca — configurables por cliente (ver BrandConfig) */
    --brand-primary:      #215C6B;
    --brand-primary-dark: #1B4655;
    --brand-primary-mid:  #2A818F;
    --brand-accent:       #90D8CB;
    --brand-surface-alt:  #F4F5F0;
    --brand-gradient:     linear-gradient(170deg, #183F4E 0%, #1F5666 45%, #215C6B 100%);

    --font-logo:    'Amatic SC', cursive;
    --font-display: 'Cormorant Garamond', serif;
    --font-body:    'DM Sans', system-ui, sans-serif;

    /* Semánticos — no dependen de la marca */
    --success:    #5B9B4D;
    --surface:    #FFFFFF;
    --text:       #1C2B2D;
    --text-muted: #6A7D82;
    --border:     #DDE8EA;
    --sidebar-w:  220px;
}

*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font-body); background: var(--brand-surface-alt); color: var(--text); }

/* ─── Shell ──────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }

/* ─── Sidebar ────────────────────────────────── */
.sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--brand-gradient);
    display: flex; flex-direction: column;
    z-index: 50;
}
.sidebar::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 20% 15%, color-mix(in srgb, var(--brand-accent) 9%, transparent) 0%, transparent 55%),
                radial-gradient(ellipse at 85% 85%, color-mix(in srgb, var(--brand-primary-mid) 10%, transparent) 0%, transparent 50%);
}

.sidebar-logo {
    position: relative; z-index: 1;
    padding: 1.4rem 1.2rem .95rem;
    font-family: var(--font-logo);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--brand-surface-alt);
    letter-spacing: .02em;
    display: flex; align-items: center; gap: .6rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar-logo .logo-mark {
    width: 27px; height: 27px;
    background: color-mix(in srgb, var(--brand-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 28%, transparent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
/* El corazón del logo hereda el color del token vía currentColor (ver el tag
   #brandMark()). El selector cubre también `img` porque con BRAND_LOGO_PATH el
   tag emite un <img> en vez del SVG inline. */
.sidebar-logo .logo-mark svg,
.sidebar-logo .logo-mark img { width: 13px; height: 13px; color: var(--brand-accent); object-fit: contain; }

/* ─── Lockup de marca (páginas standalone) ───── */
/* Las 5 páginas sin layout (login, change_password, profile/complete,
   terms, privacy) comparten el mismo corazón vía #brandMark(). El
   círculo y el tamaño salen de estas clases en vez de estilos inline. */
.brand-mark {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; border-radius: 50%;
}
/* Sobre fondo oscuro: círculo translúcido con el acento. */
.brand-mark--on-dark {
    width: 36px; height: 36px;
    background: color-mix(in srgb, var(--brand-accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, transparent);
    color: var(--brand-accent);
}
.brand-mark--on-dark svg,
.brand-mark--on-dark img { width: 17px; height: 17px; object-fit: contain; }
/* Sobre fondo claro: círculo sólido con el primario. */
.brand-mark--on-light {
    width: 32px; height: 32px;
    background: var(--brand-primary);
    color: var(--brand-accent);
}
.brand-mark--on-light svg,
.brand-mark--on-light img { width: 15px; height: 15px; object-fit: contain; }

.brand-word { font-family: var(--font-logo); line-height: 1; text-decoration: none; }
.brand-word--on-dark  { color: var(--brand-surface-alt); }
.brand-word--on-light { color: var(--brand-primary); }

.sidebar-nav { position: relative; z-index: 1; flex: 1; padding: .9rem .7rem; overflow-y: auto; }

.nav-group { margin-bottom: 1.4rem; }
.nav-group-label {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(144,216,203,.4); /* fallback si no hay color-mix */
    color: color-mix(in srgb, var(--brand-accent) 40%, transparent);
    font-weight: 600;
    padding: 0 .6rem;
    margin-bottom: .4rem;
}
.nav-link {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .65rem;
    border-radius: 7px;
    font-size: .855rem;
    font-weight: 400;
    color: rgba(244,245,240,.68); /* fallback si no hay color-mix */
    color: color-mix(in srgb, var(--brand-surface-alt) 68%, transparent);
    text-decoration: none;
    transition: background .13s, color .13s;
    margin-bottom: 2px;
}
.nav-link:hover {
    background: rgba(255,255,255,.08);
    color: rgba(244,245,240,.95); /* fallback si no hay color-mix */
    color: color-mix(in srgb, var(--brand-surface-alt) 95%, transparent);
    text-decoration: none;
}
.nav-link.active {
    background: color-mix(in srgb, var(--brand-accent) 11%, transparent);
    color: var(--brand-surface-alt);
    font-weight: 500;
    border-left: 2px solid color-mix(in srgb, var(--brand-accent) 75%, transparent);
    padding-left: calc(.65rem - 2px);
}
.nav-link svg { opacity: .6; flex-shrink: 0; transition: opacity .13s; }
.nav-link:hover svg, .nav-link.active svg { opacity: 1; }

.sidebar-footer {
    position: relative; z-index: 1;
    padding: .8rem 1rem 1rem;
    border-top: 1px solid rgba(255,255,255,.07);
    display: flex; flex-direction: column; gap: .55rem;
}
.sidebar-user {
    display: block; text-decoration: none;
    font-size: .8rem; line-height: 1.45;
    color: rgba(244,245,240,.45); /* fallback si no hay color-mix */
    color: color-mix(in srgb, var(--brand-surface-alt) 45%, transparent);
    padding: .5rem .65rem; margin: 0 -.35rem;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
}
.sidebar-user:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
.sidebar-user:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand-accent) 55%, transparent); outline-offset: 1px; }
.sidebar-user strong {
    display: block; font-weight: 500; font-size: .83rem;
    color: rgba(244,245,240,.82); /* fallback si no hay color-mix */
    color: color-mix(in srgb, var(--brand-surface-alt) 82%, transparent);
}
.sidebar-role {
    display: inline-block; margin-top: .22rem;
    font-size: .62rem; text-transform: uppercase; letter-spacing: .07em;
    background: color-mix(in srgb, var(--brand-accent) 13%, transparent);
    color: rgba(144,216,203,.85); /* fallback si no hay color-mix */
    color: color-mix(in srgb, var(--brand-accent) 85%, transparent);
    padding: .13rem .42rem; border-radius: 4px; font-weight: 600;
}
.btn-logout {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    color: rgba(244,245,240,.5); /* fallback si no hay color-mix */
    color: color-mix(in srgb, var(--brand-surface-alt) 50%, transparent);
    padding: .4rem .75rem;
    border-radius: 6px;
    font-size: .8rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background .13s, color .13s;
    font-family: inherit;
}
.btn-logout:hover {
    background: rgba(255,255,255,.11);
    color: rgba(244,245,240,.85); /* fallback si no hay color-mix */
    color: color-mix(in srgb, var(--brand-surface-alt) 85%, transparent);
}

.sidebar-legal {
    display: flex; gap: .5rem; align-items: center;
    font-size: .7rem;
    color: rgba(244,245,240,.35); /* fallback si no hay color-mix */
    color: color-mix(in srgb, var(--brand-surface-alt) 35%, transparent);
}
.sidebar-legal a {
    text-decoration: none; transition: color .13s;
    color: rgba(244,245,240,.5); /* fallback si no hay color-mix */
    color: color-mix(in srgb, var(--brand-surface-alt) 50%, transparent);
}
.sidebar-legal a:hover {
    color: rgba(244,245,240,.85); /* fallback si no hay color-mix */
    color: color-mix(in srgb, var(--brand-surface-alt) 85%, transparent);
}
.sidebar-legal span {
    color: rgba(244,245,240,.2); /* fallback si no hay color-mix */
    color: color-mix(in srgb, var(--brand-surface-alt) 20%, transparent);
}

/* ─── Page wrap ──────────────────────────────── */
.page-wrap { margin-left: var(--sidebar-w); flex: 1; min-width: 0; }
main { padding: 2.25rem 2.5rem; max-width: 1200px; }

/* ─── Page header ────────────────────────────── */
.page-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 1.75rem; gap: 1rem;
}
.page-header h1, h1 {
    margin: 0; font-size: 1.45rem; font-weight: 600;
    color: var(--text); letter-spacing: -.015em; margin-top: 0;
}
.page-header .header-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
h2 { font-size: 1.05rem; font-weight: 600; color: var(--brand-primary); margin-top: 0; }

/* ─── Buttons ────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .46rem 1rem;
    background: var(--brand-primary-mid); color: #fff;
    border: none; border-radius: 7px;
    font-size: .845rem; font-weight: 500; font-family: inherit;
    cursor: pointer; text-decoration: none;
    transition: background .14s, transform .08s;
    line-height: 1.4; white-space: nowrap;
}
.btn:hover { background: var(--brand-primary); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .3rem .65rem; font-size: .775rem; border-radius: 5px; }
.btn-danger { background: #DC2626; }
.btn-danger:hover { background: #B91C1C; color: #fff; }
.btn-secondary { background: #E6EEF0; color: #2B5A66; border: 1px solid #C8D8DC; }
.btn-secondary:hover { background: #D4E5E9; color: var(--brand-primary-dark); }
.btn-ghost { background: transparent; border: 1.5px solid var(--border); color: var(--brand-primary-mid); }
.btn-ghost:hover {
    background: #EBF5F6;
    border-color: color-mix(in srgb, var(--brand-accent) 70%, transparent);
    color: var(--brand-primary);
}

/* ─── Flash messages (inline form errors) ────── */
.flash {
    padding: .8rem 1rem .8rem 1.1rem;
    border-radius: 8px; margin-bottom: 1.5rem;
    font-size: .875rem;
    display: flex; align-items: center; gap: .65rem;
    border-left: 3px solid;
}
.flash-success { background: #EDFAEB; color: #256B1F; border-color: var(--success); }
.flash-error   { background: #FEF2F2; color: #991B1B; border-color: #DC2626; }

/* ─── Toasts (post-redirect notifications) ───── */
.toast {
    position: fixed;
    bottom: 1.25rem; right: 1.25rem;
    z-index: 200;
    min-width: 240px; max-width: 380px;
    padding: .8rem 1rem .8rem 1.1rem;
    border-radius: 8px;
    font-size: .875rem; font-weight: 500;
    background: var(--surface);
    color: var(--text);
    border-left: 3px solid var(--brand-primary-mid);
    box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.06);
    cursor: pointer;
    opacity: 0; transform: translateY(10px);
    animation: toast-in .25s ease-out forwards,
               toast-out .35s ease-in 3.5s forwards;
}
.toast-success { border-left-color: var(--success); color: #1F5418; }
.toast-error   { border-left-color: #DC2626; color: #7A1717; }
@keyframes toast-in  { to { opacity: 1; transform: translateY(0);  } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); pointer-events: none; } }
@media (max-width: 768px) {
    .toast { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
}

/* ─── Table ──────────────────────────────────── */
.table-wrap {
    background: var(--surface);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(28,43,45,.06);
    overflow: hidden;
}
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left; padding: .65rem 1rem;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
    font-weight: 600; color: var(--brand-primary-mid);
    background: #F2F9FA; border-bottom: 1px solid var(--border);
}
td {
    padding: .72rem 1rem; font-size: .875rem;
    border-bottom: 1px solid #EFF4F5; color: var(--text);
}
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #FAFCFD; }
.text-muted { color: var(--text-muted); }

/* ─── Links ──────────────────────────────────── */
a { color: var(--brand-primary-mid); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Forms ──────────────────────────────────── */
form.inline { display: inline; }
.actions { display: flex; gap: .4rem; align-items: center; }

label {
    display: block; margin-bottom: .35rem;
    font-weight: 500; font-size: .82rem; color: #3A5861; letter-spacing: .01em;
}
input[type=text], input[type=email], input[type=password],
input[type=date], input[type=tel], textarea, select {
    width: 100%; padding: .55rem .8rem;
    border: 1.5px solid var(--border); border-radius: 7px;
    font-size: .875rem; margin-bottom: 1.1rem;
    background: var(--surface); color: var(--text);
    font-family: inherit;
    transition: border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand-primary-mid);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary-mid) 10%, transparent);
}
.form-card {
    background: var(--surface); padding: 1.75rem; border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(28,43,45,.06);
    max-width: 520px;
}
.form-actions { display: flex; gap: 1rem; align-items: center; margin-top: .5rem; }

/* ─── Stat cards ─────────────────────────────── */
.stats-row { display: flex; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.stat-card {
    background: var(--surface); border-radius: 10px;
    padding: 1.1rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(28,43,45,.06);
    flex: 1; min-width: 140px;
    border-top: 3px solid var(--brand-accent);
}
.stat-card.stat-alert { border-top-color: #F59E0B; }
.stat-card .stat-label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-muted); font-weight: 600; margin-bottom: .35rem;
}
.stat-card .stat-value { font-size: 2.25rem; font-weight: 600; color: var(--text); line-height: 1; }
.stat-card.stat-alert .stat-value { color: #92400E; }

/* ─── Section card (grouped content) ────────── */
.section-card {
    background: var(--surface); border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(28,43,45,.06);
    margin-bottom: 1.5rem; overflow: hidden;
}
.section-card-header {
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    background: #FAFCFC;
}
.section-card-header h2 { margin: 0; font-size: .95rem; color: var(--text); font-weight: 600; }

/* ─── Filter / report toolbar ────────────────── */
.filter-bar, .report-toolbar {
    background: var(--surface); border-radius: 10px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(28,43,45,.06);
    margin-bottom: 1.25rem;
    display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;
}
.filter-field { flex: 1; min-width: 160px; }
.filter-field.filter-search { flex: 2; min-width: 240px; }
.filter-field label, .report-toolbar label { margin-bottom: .3rem; }
.filter-field select, .report-toolbar select,
.report-toolbar input[type=date] { margin-bottom: 0; width: auto; }
.filter-field input[type=search] { margin-bottom: 0; width: 100%; }
.filter-actions { display: flex; gap: .5rem; align-items: flex-end; }

/* ─── Tab bar ────────────────────────────────── */
.tab-bar {
    display: flex; gap: .35rem; flex-wrap: wrap;
    margin-bottom: 1.5rem; padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border);
}

/* ─── Badges ─────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center;
    padding: .2rem .6rem; border-radius: 20px;
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
}
.badge-active   { background: #E6F5E4; color: #256B1F; }
.badge-inactive { background: #F1F3F4; color: var(--text-muted); }
.badge-warning  { background: #FEF3C7; color: #92400E; }
.badge-danger   { background: #FEE2E2; color: #991B1B; }
.badge-ok       { background: #E0F5F0; color: #0E6550; }

/* ─── Inline alert ───────────────────────────── */
.alert {
    padding: .8rem 1rem .8rem 1.1rem;
    border-radius: 8px; margin-bottom: 1.25rem;
    font-size: .875rem; border-left: 3px solid;
}
.alert-error { background: #FEF2F2; color: #991B1B; border-color: #DC2626; }
.alert-success { background: #EDFAEB; color: #256B1F; border-color: var(--success); }

/* ─── Empty state ────────────────────────────── */
.empty-state {
    text-align: center; padding: 2.5rem 1.5rem;
    color: var(--text-muted); font-size: .9rem;
}

/* ─── Mobile toggle (basic) ──────────────────── */
.menu-toggle {
    display: none; position: fixed; top: .9rem; left: .9rem; z-index: 100;
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--brand-primary); border: none; cursor: pointer;
    align-items: center; justify-content: center;
}
@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .sidebar.open { transform: translateX(0); }
    .page-wrap { margin-left: 0; }
    main { padding: 1.25rem 1rem; padding-top: 4rem; }
}
