/* ============================================================
   skin-nuevo.css — Tema nuevo (opcional, por usuario)
   Se activa con data-fm-skin="nuevo" en <html> (menú del usuario >
   "Tema nuevo"; la preferencia vive en localStorage 'fm-skin').
   Sin ese atributo no cambia nada: todas las reglas están acotadas
   a html[data-fm-skin="nuevo"]. Solo redefine tokens y tipografía;
   no toca estructura ni HTML de ninguna vista.
   ============================================================ */

html[data-fm-skin="nuevo"] {
    /* Estructura: navy más neutro, menos saturado */
    --fm-shell-900: #0a1116;
    --fm-shell-800: #14212b;
    --fm-shell-700: #1c2e3b;
    --fm-shell-600: #213646;
    --fm-shell-500: #2b4455;
    --fm-shell-400: #355166;
    --fm-shell-300: #0e1a22;

    /* Radios y sombras más contenidos */
    --fm-r-sm: 6px;
    --fm-r-md: 10px;
    --fm-r-lg: 12px;
    --fm-sh-xs: 0 1px 1px rgba(15,25,35,.04);
    --fm-sh-sm: 0 1px 3px rgba(15,25,35,.06);
    --fm-sh-md: 0 6px 18px rgba(15,25,35,.08);

    --fm-skin-font: 'IBM Plex Sans', 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-fm-skin="nuevo"] body,
html[data-fm-skin="nuevo"] .fm-dp {
    font-family: var(--fm-skin-font);
}

/* Superficies y texto del área de trabajo */
html[data-fm-skin="nuevo"] .fm-dp {
    --bg:     #f3f5f7;
    --panel:  #ffffff;
    --panel2: #f7f9fa;
    --chrome: #eef1f3;
    --border: #dde3e8;
    --bord2:  #c8d1d8;
    --text:   #18242c;
    --muted:  #5d6b75;
    --muted2: #3f4d57;
}

/* Títulos: sans en vez de condensada; la jerarquía la da el peso */
html[data-fm-skin="nuevo"] .fm-dp-title,
html[data-fm-skin="nuevo"] .db-period-bar h1,
html[data-fm-skin="nuevo"] .fm-kpi-card-num b,
html[data-fm-skin="nuevo"] .fm-kpi-card-ttl,
html[data-fm-skin="nuevo"] #sidebar-wrapper .accordion-button {
    font-family: var(--fm-skin-font);
    letter-spacing: 0;
}
html[data-fm-skin="nuevo"] .fm-dp-title { font-weight: 600; }
html[data-fm-skin="nuevo"] .fm-kpi-card-num b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Tarjetas de KPI: borde parejo, sin franja de color gruesa */
html[data-fm-skin="nuevo"] .fm-kpi-card {
    border-top-width: 1px;
    box-shadow: var(--fm-sh-xs);
}

/* Tablas: encabezado chico en mayúsculas, números alineados */
html[data-fm-skin="nuevo"] #page-content-wrapper .table > thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--muted, #5d6b75);
}
html[data-fm-skin="nuevo"] #page-content-wrapper .table td {
    font-variant-numeric: tabular-nums;
}

/* Contadores y badges: forma de píldora */
html[data-fm-skin="nuevo"] .fm-dp-count-badge,
html[data-fm-skin="nuevo"] .badge {
    border-radius: 99px;
    font-weight: 600;
}

/* Tarjetas Bootstrap */
html[data-fm-skin="nuevo"] #page-content-wrapper .card {
    border-radius: var(--fm-r-md);
    box-shadow: var(--fm-sh-xs);
    border-color: #dde3e8;
}
html[data-fm-skin="nuevo"] #page-content-wrapper .card-header {
    border-radius: var(--fm-r-md) var(--fm-r-md) 0 0 !important;
}

/* Sin entrada animada del contenido: la pantalla aparece ya asentada */
html[data-fm-skin="nuevo"] #page-content-wrapper { animation: none; }

/* Opción del menú del usuario: marca de activo */
.fm-skin-opt .fm-skin-state { margin-left: auto; font-size: .75rem; opacity: .8; }
.fm-skin-opt { display: flex; align-items: center; width: 100%; }