/* =====================================================================
 *  ANX REBRAND — Capa de re-tematización (reskin) del panel
 *  ---------------------------------------------------------------------
 *  Override TOKEN-DRIVEN cargado DESPUÉS del CSS base del tema Altum.
 *  Objetivo: dar identidad visual propia (distinta del SaaS estándar)
 *  sin tocar el layout Bootstrap ni la lógica.
 *
 *  Cómo funciona:
 *   1. Definimos los tokens de marca en `:root` como --anx-*  (BLOQUE A).
 *   2. Re-mapeamos las variables que el tema Altum ya consume en runtime
 *      (--primary-*, --gray-*, --white, --border-radius, fuentes) hacia
 *      nuestros tokens (BLOQUE B). Con esto, todo el chrome del panel
 *      cambia de identidad sin reescribir reglas.
 *   3. Ajustes finos de chrome para diferenciar la silueta visual
 *      (sidebar, header, cards, botones, inputs, badges, tablas, login)
 *      (BLOQUE C).
 *
 *  >>> PARA METER LOS TOKENS DE FIGMA: editar SOLO el BLOQUE A. <<<
 *  El resto del fichero consume esos tokens; normalmente no se toca.
 * ===================================================================== */


/* =====================================================================
 *  BLOQUE A — TOKENS DE MARCA  (AQUÍ se sustituirán los tokens de Figma)
 *  ---------------------------------------------------------------------
 *  Paleta neutra/sobria propia: primario teal-petróleo + neutros cálidos.
 *  Cambia estos valores y toda la identidad del panel cambia con ellos.
 * ===================================================================== */
:root {
    /* --- Color primario (escala 100→900) --- */
    --anx-primary-100: hsl(218 86% 95%);
    --anx-primary-200: hsl(218 85% 86%);
    --anx-primary-300: hsl(218 84% 73%);
    --anx-primary-400: hsl(218 84% 60%);
    --anx-primary-500: hsl(218 84% 45%);   /* primario base — Figma #1256d3 */
    --anx-primary-600: hsl(219 82% 39%);
    --anx-primary-700: hsl(221 78% 32%);
    --anx-primary-800: hsl(226 40% 24%);
    --anx-primary-900: hsl(231 28% 16%);   /* fondo sidebar / secciones oscuras */

    /* --- Color secundario / acento (focus, links, detalles) --- */
    --anx-accent-300: hsl(214 92% 78%);
    --anx-accent-500: hsl(214 90% 62%);
    --anx-accent-700: hsl(217 84% 50%);

    /* --- Neutros (slate fríos, escala 50→900) — Figma #303042 --- */
    --anx-gray-50:  hsl(228 24% 98%);
    --anx-gray-100: hsl(228 20% 96%);
    --anx-gray-200: hsl(228 16% 92%);
    --anx-gray-300: hsl(228 14% 86%);
    --anx-gray-400: hsl(230 10% 66%);
    --anx-gray-500: hsl(230 9% 54%);
    --anx-gray-600: hsl(231 11% 42%);
    --anx-gray-700: hsl(232 14% 30%);
    --anx-gray-800: hsl(232 16% 22%);      /* slate base — #303042 */
    --anx-gray-900: hsl(231 26% 14%);

    /* --- Superficies --- */
    --anx-surface:      hsl(0 0% 100%);     /* tarjetas / blanco */
    --anx-surface-sunken: hsl(228 24% 98%); /* fondo de página */

    /* --- Estados --- */
    --anx-success: hsl(152 56% 40%);
    --anx-warning: hsl(38 92% 50%);
    --anx-danger:  hsl(354 70% 54%);
    --anx-info:    hsl(204 70% 50%);

    /* --- Tipografía --- */
    --anx-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --anx-font-mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
    --anx-font-weight-normal: 450;
    --anx-font-weight-medium: 550;
    --anx-font-weight-bold: 700;

    /* --- Radios (más marcados/sobrios, no "pill" por todas partes) --- */
    --anx-radius: 0.4rem;           /* radio base (inputs, botones) */
    --anx-radius-sm: 0.3rem;
    --anx-radius-lg: 0.5rem;        /* tarjetas — bordes menos redondeados */
    --anx-radius-pill: 999px;

    /* --- Sombras (planas: las cards se integran, no flotan) --- */
    --anx-shadow-sm: 0 1px 0 hsl(231 30% 14% / 0.04);
    --anx-shadow:    0 1px 3px hsl(231 30% 14% / 0.07);
    --anx-shadow-lg: 0 12px 32px hsl(231 32% 14% / 0.16);

    /* --- Densidad / espaciado del chrome --- */
    --anx-sidebar-width: 64px;
    --anx-density-pad: 1.25rem;
    --anx-hairline: hsl(228 16% 90%);   /* borde sutil unificado */
}


/* =====================================================================
 *  BLOQUE B — PUENTE DE TOKENS
 *  Re-mapea las variables internas del tema Altum hacia los tokens ANX.
 *  Esto es lo que propaga la identidad por TODO el chrome sin reescribir
 *  cientos de reglas. No suele necesitar edición.
 * ===================================================================== */
:root {
    --primary-100: var(--anx-primary-100);
    --primary-200: var(--anx-primary-200);
    --primary-300: var(--anx-primary-300);
    --primary-400: var(--anx-primary-400);
    --primary:     var(--anx-primary-500);
    --primary-600: var(--anx-primary-600);
    --primary-700: var(--anx-primary-700);
    --primary-800: var(--anx-primary-800);
    --primary-900: var(--anx-primary-900);

    --gray-50:  var(--anx-gray-50);
    --gray-100: var(--anx-gray-100);
    --gray-200: var(--anx-gray-200);
    --gray-300: var(--anx-gray-300);
    --gray-400: var(--anx-gray-400);
    --gray:     var(--anx-gray-600);
    --gray-500: var(--anx-gray-500);
    --gray-600: var(--anx-gray-600);
    --gray-700: var(--anx-gray-700);
    --gray-800: var(--anx-gray-800);
    --gray-900: var(--anx-gray-900);

    --white: var(--anx-surface);

    --border-radius: var(--anx-radius);

    --success: var(--anx-success);
    --warning: var(--anx-warning);
    --danger:  var(--anx-danger);
    --info:    var(--anx-info);

    --font-family-sans-serif: var(--anx-font-sans);
    --font-family-monospace: var(--anx-font-mono);
}


/* =====================================================================
 *  BLOQUE C — AJUSTES DE CHROME
 *  Cambios visuales que diferencian la silueta del panel respecto al
 *  install estándar. Consumen los tokens del BLOQUE A.
 *  Todo es re-skin: sin cambios estructurales.
 * ===================================================================== */

/* --- Base / tipografía --- */
body {
    font-family: var(--anx-font-sans);
    background-color: var(--anx-surface-sunken);
    color: var(--anx-gray-800);
    font-weight: var(--anx-font-weight-normal);
    letter-spacing: 0.1px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: var(--anx-font-weight-bold);
    letter-spacing: -0.2px;
    color: var(--anx-gray-900);
}

a:not(.btn):not(.dropdown-item):not(.nav-link) {
    color: var(--anx-primary-600);
}
a:not(.btn):not(.dropdown-item):not(.nav-link):hover {
    color: var(--anx-primary-700);
}

/* --- Sidebar: silueta propia (más estrecha, esquinas marcadas, accent) --- */
.app-sidebar {
    min-width: var(--anx-sidebar-width);
    max-width: var(--anx-sidebar-width);
    background: linear-gradient(185deg, var(--anx-primary-800), var(--anx-primary-900));
    border-radius: var(--anx-radius-lg);
    box-shadow: var(--anx-shadow);
}

.app-sidebar-title a {
    color: var(--anx-primary-100);
    font-weight: var(--anx-font-weight-bold);
}

.app-sidebar-links li a {
    color: hsl(184 30% 80% / 0.75);
    position: relative;
    transition: color .2s ease, background .2s ease;
}

.app-sidebar-links li:hover {
    background: hsl(184 60% 60% / 0.12);
}
.app-sidebar-links li:hover a {
    color: var(--anx-primary-100);
}

/* Estado activo: barra de acento a la izquierda (rasgo distintivo) */
.app-sidebar-links li.active {
    background: hsl(184 60% 60% / 0.16);
}
.app-sidebar-links li.active a {
    color: #fff;
}
.app-sidebar-links li.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: var(--anx-radius-pill);
    background: var(--anx-accent-500);
}

/* --- Cards / superficies — planas, con hairline, integradas (no flotan) --- */
.card {
    border-radius: var(--anx-radius-lg);
    background: var(--anx-surface);
    box-shadow: none;
    border: 1px solid var(--anx-hairline);
}
.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--anx-hairline);
    font-weight: var(--anx-font-weight-medium);
}
/* KPI / stat cards no necesitan hover ni elevación */
.card:hover { box-shadow: none; }

.modal-content {
    border-radius: var(--anx-radius-lg);
    box-shadow: var(--anx-shadow-lg) !important;
}

.app-footer {
    border-radius: var(--anx-radius-lg);
    background: var(--anx-surface);
    box-shadow: var(--anx-shadow-sm);
}

/* --- Botones --- */
.btn {
    border-radius: var(--anx-radius);
    font-weight: var(--anx-font-weight-medium);
    letter-spacing: 0.1px;
    transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background-color: var(--anx-primary-500);
    border-color: var(--anx-primary-500);
    box-shadow: 0 2px 8px hsl(187 64% 38% / 0.25);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--anx-primary-600);
    border-color: var(--anx-primary-600);
}

.btn-outline-primary {
    color: var(--anx-primary-600);
    border-color: var(--anx-primary-400);
}
.btn-outline-primary:hover {
    background-color: var(--anx-primary-500);
    border-color: var(--anx-primary-500);
}

.btn-link {
    color: var(--anx-primary-600);
}

/* --- Inputs / formularios --- */
.form-control,
.custom-select,
.input-group-text,
.select2-container--default .select2-selection--single {
    border-radius: var(--anx-radius) !important;
    border-color: var(--anx-gray-300);
    background-color: var(--anx-surface);
}

.form-control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--anx-primary-400);
    box-shadow: 0 0 0 0.2rem hsl(187 64% 38% / 0.15);
}

.form-control::placeholder {
    color: var(--anx-gray-500);
}

/* --- Badges --- */
.badge {
    border-radius: var(--anx-radius-pill);
    font-weight: var(--anx-font-weight-medium);
    letter-spacing: 0.2px;
    padding: 0.35em 0.7em;
}
.badge-primary {
    background-color: var(--anx-primary-500);
}
.badge-success { background-color: var(--anx-success); }
.badge-warning { background-color: var(--anx-warning); }
.badge-danger  { background-color: var(--anx-danger); }
.badge-info    { background-color: var(--anx-info); }

/* --- Tablas --- */
.table {
    color: var(--anx-gray-800);
}
.table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--anx-gray-200);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    font-weight: var(--anx-font-weight-bold);
    color: var(--anx-gray-500);
}
.table td, .table th {
    border-color: var(--anx-gray-200);
}
.table-hover tbody tr:hover {
    background-color: var(--anx-gray-100);
}

/* --- Nav pills / tabs (header de páginas) --- */
.nav-pills .nav-link {
    border-radius: var(--anx-radius);
    color: var(--anx-gray-600);
    font-weight: var(--anx-font-weight-medium);
}
.nav-pills .nav-link.active {
    background-color: var(--anx-primary-500);
    color: #fff;
}

/* Spinner / loading / text-primary */
.spinner-grow.text-primary,
.text-primary { color: var(--anx-primary-500) !important; }

/* --- Login / pantallas de auth (wrapper.php) ---
 * El layout de auth centra el contenido en un .card. Le damos un realce
 * sobrio y un fondo de marca para que la entrada no parezca el estándar. */
body[data-theme-style] {
    background-color: var(--anx-surface-sunken);
}

/* Realce de tarjetas en pantallas de auth */
main .card {
    box-shadow: var(--anx-shadow);
}

/* Acento superior en la primera card de las pantallas de auth */
body.bg-white main > .card:first-of-type {
    border-top: 3px solid var(--anx-primary-500);
}

/* =====================================================================
 *  BLOQUE D — Integración estructural del panel (diferenciación real)
 * ===================================================================== */

/* Fondo de página sobrio para que las cards (blancas, con hairline) se
   integren en una superficie y no parezcan flotar sueltas. */
main, .app-wrapper, .content {
    background-color: var(--anx-surface-sunken);
}

/* Stat cards (KPI grandes del dashboard): número protagonista, plano. */
.card .card-body h2,
.card .card-body .h2,
.card .card-body .display-4 {
    font-weight: var(--anx-font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--anx-gray-900);
}

/* Iconos circulares de las stat cards → cuadrado redondeado de marca */
.card .rounded-circle,
.statistics-icon {
    border-radius: var(--anx-radius) !important;
    background: var(--anx-primary-100) !important;
    color: var(--anx-primary-600) !important;
}

/* --- Gráficas ApexCharts: grid sutil, marca, sin ruido --- */
.apexcharts-gridline {
    stroke: var(--anx-hairline);
}
.apexcharts-xaxis line,
.apexcharts-yaxis line { stroke: var(--anx-hairline); }
.apexcharts-text tspan {
    fill: var(--anx-gray-500);
    font-family: var(--anx-font-sans) !important;
    font-size: 11px;
}
.apexcharts-tooltip {
    border: 1px solid var(--anx-hairline) !important;
    box-shadow: var(--anx-shadow) !important;
    border-radius: var(--anx-radius) !important;
}
.apexcharts-tooltip-title {
    background: var(--anx-gray-50) !important;
    border-bottom: 1px solid var(--anx-hairline) !important;
    font-weight: var(--anx-font-weight-medium) !important;
}

/* --- Sidebar: separación de grupos + transición de expansión al hover --- */
.app-sidebar {
    border-right: 1px solid hsl(231 26% 22%);
}
.app-sidebar-links li a i {
    transition: transform .12s ease;
}
.app-sidebar-links li:hover a i {
    transform: scale(1.08);
}

/* Tablas dentro de cards: sin doble borde, integradas */
.card .table-responsive { border-radius: 0; }
.card > .table:last-child { margin-bottom: 0; }

/* Dropdowns / popovers con el mismo lenguaje plano */
.dropdown-menu {
    border: 1px solid var(--anx-hairline);
    border-radius: var(--anx-radius);
    box-shadow: var(--anx-shadow);
}