/* ============================================================
 * Factory — design tokens
 *
 * Fuente única de variables CSS. Tres niveles (BRAND.md §2):
 *   1. primitivos  (--celeste-700, --crema-200 ...) sin significado, nunca en pantallas
 *   2. semánticos  (--color-primary, --color-danger ...) para qué sirve el color
 *   3. puente      (--primary, --bs-primary, --brand-*, --surface-*) nombres del
 *                  template y de Bootstrap apuntados al nivel 2
 * Valores y contrastes: BRAND.md §1 y §4. tests/smoke_marca.php los mide.
 *
 * Pantalla nueva = variable semántica, nunca un hex.
 * NO usar morado/violeta como acento. NO usar #ffffff como fondo de página.
 * ============================================================ */

:root {
    /* ---------- Nivel 1 · primitivos ---------- */
    --celeste-50:  #eef6fc;
    --celeste-100: #e1eff9;
    --celeste-200: #c4e1f5;
    --celeste-300: #a9d6f5;
    --celeste-400: #7cbde8;
    --celeste-500: #4a9bd0;
    --celeste-600: #2c7ab0;
    --celeste-700: #22689a;
    --celeste-800: #1b547d;
    --celeste-900: #163f5e;

    --crema-50:  #fbf7ee;
    --crema-100: #f5eedf;
    --crema-200: #e8dfcb;
    --crema-300: #d9ccb0;
    --stone-600: #57534e;

    --charcoal-950: #16191d;
    --charcoal-900: #1f2328;
    --charcoal-800: #2d3239;

    --green-700: #15803d;  --green-800: #166534;  --green-50: #f0fdf4;  --green-200: #bbf7d0;  --green-900: #14532d;
    --amber-700: #b45309;  --amber-800: #92400e;  --amber-50: #fffbeb;  --amber-200: #fde68a;  --amber-900: #78350f;
    --red-700:   #b91c1c;  --red-800:   #991b1b;  --red-50:   #fef2f2;  --red-200:   #fecaca;  --red-900:   #7f1d1d;
    --sky-700:   #0369a1;  --sky-800:   #075985;  --sky-50:   #f0f9ff;  --sky-200:   #bae6fd;  --sky-900:   #0c4a6e;

    /* ---------- Nivel 2 · semánticos ---------- */
    --color-primary:       var(--celeste-700);   /* botones, links, menú activo: blanco encima 5.97:1 */
    --color-primary-hover: var(--celeste-800);
    --color-accent:        var(--celeste-300);   /* solo decoración y tintes, nunca texto */
    --color-focus:         var(--celeste-600);   /* anillo de foco, >= 3:1 sobre blanco */
    --color-ink:           var(--charcoal-900);
    --color-text:          var(--charcoal-900);
    --color-text-muted:    var(--stone-600);
    --color-bg:            var(--crema-50);
    --color-surface:       #ffffff;
    --color-border:        var(--crema-200);
    --color-on-primary:    #ffffff;

    --color-success:        var(--green-700);  --color-success-subtle: var(--green-50);
    --color-warning:        var(--amber-700);  --color-warning-subtle: var(--amber-50);
    --color-danger:         var(--red-700);    --color-danger-subtle:  var(--red-50);
    --color-info:           var(--sky-700);    --color-info-subtle:    var(--sky-50);

    /* ---------- Nivel 3 · puente: marca y superficies ---------- */
    --brand-900: var(--charcoal-900);  /* sidebar, encabezados, superficies oscuras */
    --brand-800: var(--charcoal-800);  /* hover sobre fondo oscuro */
    --brand-600: var(--celeste-700);      /* CTAs y links */
    --brand-500: var(--celeste-600);      /* bordes, foco, gradientes; blanco encima 4.65:1 */
    --brand-400: var(--celeste-400);      /* fills de chart, highlights */
    --brand-200: var(--celeste-300);      /* acento: pills, badges */
    --brand-50:  var(--celeste-50);       /* row highlights, tintes */
    --brand-bg:  var(--crema-50);      /* fondo de página */
    --brand-100: var(--crema-200);     /* bordes, divisores */

    --surface-50:  var(--crema-50);
    --surface-100: var(--crema-50);
    --surface-200: var(--crema-100);
    --surface-800: var(--charcoal-800);  /* texto secundario, íconos en fondo claro */
    --surface-900: var(--charcoal-900);  /* texto principal, títulos */
    --surface-950: var(--charcoal-950);  /* máximo contraste */

    --success-500: var(--color-success);   /* relleno sólido: texto blanco encima */
    --accent-500:  var(--color-warning);   /* ámbar de aviso: texto blanco encima, nunca negro */
    --danger-500:  var(--color-danger);
    --info-400:    var(--color-info);
    --success-bg:  var(--color-success-subtle);
    --warning-bg:  var(--color-warning-subtle);
    --danger-bg:   var(--color-danger-subtle);
    --info-bg:     var(--color-info-subtle);

    --primary:        var(--color-primary);
    --primary-hover:  var(--color-primary-hover);
    --primary-light:  var(--celeste-50);
    --primary-text:   var(--color-on-primary);

    /* ---------- Sidebar ---------- */
    --sidebar-bg:      var(--brand-900);
    --sidebar-hover:   var(--brand-800);
    --sidebar-active:  var(--brand-600);
    --sidebar-text:    #ffffff;
    --sidebar-text-muted: rgba(255,255,255,0.55);
    --sidebar-divider: rgba(255,255,255,0.08);
    --sidebar-width:   260px;

    /* ---------- Page ---------- */
    --body-bg:    var(--color-bg);
    --body-text:  var(--color-text);

    /* ---------- Cards / borders ---------- */
    --card-bg:        #ffffff;
    --card-border:    var(--color-border);
    --card-radius:    14px;
    --card-shadow:    0 12px 40px -16px rgba(31,35,40,0.18);

    /* ---------- Typography ---------- */
    --font-ui:      'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

    /* ---------- Spacing / motion ---------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --transition-fast: 120ms ease;
    --transition-med:  220ms ease;

    /* ---------- Brand gradient (login hero, dashboard hero) ---------- */
    --brand-gradient: linear-gradient(135deg, var(--celeste-600) 0%, var(--celeste-700) 100%);
}

/* ============================================================
 * Puente a Bootstrap / Modernize (nivel 3). El selector iguala al de
 * bs-theme-puntada.css y este archivo carga después, así que gana.
 * Los rellenos sólidos llevan texto blanco (el template ya lo hace);
 * lo que fallaba eran sus colores pastel (verde y ámbar claros).
 * ============================================================ */
[data-bs-theme=light][data-color-theme="Puntada_Theme"]:root {
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-bg);
    --bs-heading-color: var(--color-ink);
    --bs-border-color: var(--color-border);

    --bs-success: #15803d;  --bs-success-rgb: 21, 128, 61;
    --bs-success-bg-subtle: #f0fdf4;  --bs-success-border-subtle: #bbf7d0;  --bs-success-text-emphasis: #14532d;
    --bs-warning: #b45309;  --bs-warning-rgb: 180, 83, 9;
    --bs-warning-bg-subtle: #fffbeb;  --bs-warning-border-subtle: #fde68a;  --bs-warning-text-emphasis: #78350f;
    --bs-danger: #b91c1c;   --bs-danger-rgb: 185, 28, 28;
    --bs-danger-bg-subtle: #fef2f2;   --bs-danger-border-subtle: #fecaca;   --bs-danger-text-emphasis: #7f1d1d;
    --bs-info: #0369a1;     --bs-info-rgb: 3, 105, 161;
    --bs-info-bg-subtle: #f0f9ff;     --bs-info-border-subtle: #bae6fd;     --bs-info-text-emphasis: #0c4a6e;
}
/* Botones: el template fija los colores en cada clase, no en --bs-success. */
.btn-success { --bs-btn-bg:#15803d; --bs-btn-border-color:#15803d; --bs-btn-hover-bg:#166534; --bs-btn-hover-border-color:#166534; --bs-btn-active-bg:#166534; --bs-btn-active-border-color:#166534; --bs-btn-disabled-bg:#15803d; --bs-btn-disabled-border-color:#15803d; --bs-btn-focus-shadow-rgb:21,128,61; }
.btn-warning { --bs-btn-bg:#b45309; --bs-btn-border-color:#b45309; --bs-btn-hover-bg:#92400e; --bs-btn-hover-border-color:#92400e; --bs-btn-active-bg:#92400e; --bs-btn-active-border-color:#92400e; --bs-btn-disabled-bg:#b45309; --bs-btn-disabled-border-color:#b45309; --bs-btn-focus-shadow-rgb:180,83,9; }
.btn-danger  { --bs-btn-bg:#b91c1c; --bs-btn-border-color:#b91c1c; --bs-btn-hover-bg:#991b1b; --bs-btn-hover-border-color:#991b1b; --bs-btn-active-bg:#991b1b; --bs-btn-active-border-color:#991b1b; --bs-btn-disabled-bg:#b91c1c; --bs-btn-disabled-border-color:#b91c1c; --bs-btn-focus-shadow-rgb:185,28,28; }
.btn-info    { --bs-btn-bg:#0369a1; --bs-btn-border-color:#0369a1; --bs-btn-hover-bg:#075985; --bs-btn-hover-border-color:#075985; --bs-btn-active-bg:#075985; --bs-btn-active-border-color:#075985; --bs-btn-disabled-bg:#0369a1; --bs-btn-disabled-border-color:#0369a1; --bs-btn-focus-shadow-rgb:3,105,161; }
.btn-outline-success { --bs-btn-color:#15803d; --bs-btn-border-color:#15803d; --bs-btn-hover-bg:#15803d; --bs-btn-hover-border-color:#15803d; --bs-btn-active-bg:#15803d; --bs-btn-active-border-color:#15803d; --bs-btn-disabled-color:#15803d; --bs-btn-disabled-border-color:#15803d; --bs-btn-focus-shadow-rgb:21,128,61; }
.btn-outline-warning { --bs-btn-color:#b45309; --bs-btn-border-color:#b45309; --bs-btn-hover-bg:#b45309; --bs-btn-hover-border-color:#b45309; --bs-btn-active-bg:#b45309; --bs-btn-active-border-color:#b45309; --bs-btn-disabled-color:#b45309; --bs-btn-disabled-border-color:#b45309; --bs-btn-focus-shadow-rgb:180,83,9; }
.btn-outline-danger  { --bs-btn-color:#b91c1c; --bs-btn-border-color:#b91c1c; --bs-btn-hover-bg:#b91c1c; --bs-btn-hover-border-color:#b91c1c; --bs-btn-active-bg:#b91c1c; --bs-btn-active-border-color:#b91c1c; --bs-btn-disabled-color:#b91c1c; --bs-btn-disabled-border-color:#b91c1c; --bs-btn-focus-shadow-rgb:185,28,28; }
.btn-outline-info    { --bs-btn-color:#0369a1; --bs-btn-border-color:#0369a1; --bs-btn-hover-bg:#0369a1; --bs-btn-hover-border-color:#0369a1; --bs-btn-active-bg:#0369a1; --bs-btn-active-border-color:#0369a1; --bs-btn-disabled-color:#0369a1; --bs-btn-disabled-border-color:#0369a1; --bs-btn-focus-shadow-rgb:3,105,161; }

/* ============================================================
 * Reset mínimo + body texture (BRAND.md "Background Texture")
 * ============================================================ */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    /* !important overrides Modernize styles.css `body{font-family:"Plus Jakarta Sans"…!important}`.
       Without it the vendor rule wins and body text renders in the (now-removed) CDN font's
       generic `sans-serif` fallback instead of our brand Inter. */
    font-family: var(--font-ui) !important;
    color: var(--body-text);
    background-color: var(--body-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Títulos h1–h4 en Plus Jakarta Sans (solo la fuente: el color lo decide cada pantalla). */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
}
h5, h6 {
    font-family: var(--font-ui);
    font-weight: 600;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

/* ============================================================
 * App layout shell
 * ============================================================ */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}
.app-content {
    flex: 1;
    min-width: 0;
    padding: 32px;
}

/* ============================================================
 * Sidebar component
 * NOTA: cuando exista app.css este bloque debe migrar allí.
 * Vive aquí temporalmente para que sidebar.php no se vea roto.
 * ============================================================ */
.app-sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    flex-shrink: 0;
}

.sidebar-brand {
    padding: 20px 16px 12px;
    border-bottom: 1px solid var(--sidebar-divider);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    overflow: hidden;
}
.sidebar-brand-link {
    display: block;
    line-height: 0;
}
/* SVG horizontal con padding interno → margenes negativos compensan */
.sidebar-brand-logo {
    height: 110px;
    width: auto;
    margin: -32px -20px;
    display: block;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}
.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-menu-item + .sidebar-menu-item { margin-top: 2px; }

a.sidebar-menu-link,
.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    color: var(--sidebar-text);
    font-size: 0.92rem;
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
    border-left: 3px solid transparent;
}
a.sidebar-menu-link:hover,
.sidebar-menu-link:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text);
    text-decoration: none;
}
a.sidebar-menu-link.is-active,
.sidebar-menu-item.is-active > a.sidebar-menu-link {
    background: var(--sidebar-active);
    border-left-color: #ffffff;
    color: #ffffff;
}
.sidebar-menu-icon {
    width: 18px;
    text-align: center;
    color: var(--sidebar-text-muted);
}
.sidebar-menu-link:hover .sidebar-menu-icon,
.sidebar-menu-link.is-active .sidebar-menu-icon { color: #ffffff; }

.sidebar-menu-empty {
    padding: 18px;
    color: var(--sidebar-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* Footer del sidebar — usuario + toggle de tema */
.sidebar-footer {
    border-top: 1px solid var(--sidebar-divider);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.sidebar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-600);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.sidebar-user-meta { min-width: 0; }
.sidebar-user-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-role {
    font-size: 0.75rem;
    color: var(--sidebar-text-muted);
    text-transform: capitalize;
}

.sidebar-theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--sidebar-divider);
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.sidebar-theme-toggle:hover {
    background: var(--sidebar-hover);
    border-color: rgba(255,255,255,0.18);
}
.sidebar-theme-toggle .theme-icon-light { display: inline-block; }
/* Responsive: colapsa sidebar a top en mobile */
@media (max-width: 900px) {
    .app-wrapper { flex-direction: column; }
    .app-sidebar {
        width: 100%;
        min-height: auto;
        position: relative;
    }
    .sidebar-nav { max-height: 280px; }
}

/* Los estados de la familia son oscuros (BRAND.md §4): letra negra encima no se lee
 * (bg-warning text-dark = 2.5:1, 43 usos). Letra blanca, 5.0-6.5:1. */
.bg-primary.text-dark, .bg-success.text-dark, .bg-danger.text-dark,
.bg-warning.text-dark, .bg-info.text-dark { color: #fff !important; }