/**
 * Tema visual de Fuerte Impacto sobre NexaDash.
 *
 * Se carga DESPUÉS de contagram-custom.css (config/dz.php → global.css.bottom), así que
 * pisa la paleta heredada de Pompei (azul marino #0F1237 + celeste #28ACE3) sin tocarla.
 * Sólo cambia el aspecto: no hay reglas que afecten comportamiento.
 *
 * Dirección (06/11/2026, ver docs/ALCANCE_FUERTE_IMPACTO.md):
 *  - Menú lateral (no horizontal) en NEGRO, con el logo blanco arriba.
 *  - Barra superior BLANCA (en Pompei era azul marino).
 *  - Base monocromática negro/blanco/grises, como el logo.
 *  - Un único acento "volt" (amarillo flúor) — sólo como FONDO o sobre superficies oscuras;
 *    como color de texto sobre blanco no se lee.
 *  - Tipografía Barlow (texto) + Barlow Condensed en mayúsculas (títulos, menú, encabezados
 *    de tabla), que recuerda al "DEPORTES" del logo.
 *  - Esquinas más rectas que Pompei.
 */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap");

:root {
    --fi-negro: #0b0b0c;
    --fi-grafito: #18181b;
    --fi-grafito-2: #232327;
    --fi-gris-texto-menu: #b4b4bb;
    --fi-borde: #e4e4e7;
    --fi-fondo: #f4f4f5;
    --fi-volt: #d4ff00;
    --fi-volt-hover: #c2eb00;
    --fi-volt-oscuro: #5a6e00; /* variante legible como texto sobre blanco */

    --fi-fuente: "Barlow", "Inter", sans-serif;
    --fi-fuente-titulos: "Barlow Condensed", "Barlow", sans-serif;

    /* Primario: negro (botones, links, foco). */
    --primary: #111113;
    --primary-hover: #2b2b30;
    --primary-dark: #000;
    --rgba-primary-1: rgba(17, 17, 19, 0.1);
    --rgba-primary-2: rgba(17, 17, 19, 0.2);
    --rgba-primary-3: rgba(17, 17, 19, 0.3);
    --rgba-primary-4: rgba(17, 17, 19, 0.4);
    --rgba-primary-5: rgba(17, 17, 19, 0.5);
    --rgba-primary-6: rgba(17, 17, 19, 0.6);
    --rgba-primary-7: rgba(17, 17, 19, 0.7);
    --rgba-primary-8: rgba(17, 17, 19, 0.8);
    --rgba-primary-9: rgba(17, 17, 19, 0.9);
    --bs-primary: #111113;
    --bs-primary-rgb: 17, 17, 19;

    /* "Info" era el celeste de Pompei para acciones secundarias: pasa al volt. */
    --bs-info: #d4ff00;
    --bs-info-rgb: 212, 255, 0;

    --headerbg: #ffffff;
    --nav-headbg: #000000;
    --sidebar-bg: var(--fi-negro);

    --bs-body-font-family: var(--fi-fuente);
    --bs-border-radius: 0.25rem;
    --bs-border-radius-sm: 0.2rem;
    --bs-border-radius-lg: 0.375rem;
}

[data-headerbg] { --headerbg: #ffffff; }
[data-nav-headerbg] { --nav-headbg: #000000; }

body {
    font-family: var(--fi-fuente);
    background-color: var(--fi-fondo);
}

.content-body { background-color: var(--fi-fondo); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.btn, .form-control, .form-select, .dropdown-item, .tooltip, .popover,
.select2-container, .modal-title, table {
    font-family: var(--fi-fuente);
}

/* Título de cada pantalla (patrón `h4.text-primary.fw-bold` de las vistas). */
h4.text-primary.fw-bold,
.modal-title {
    font-family: var(--fi-fuente-titulos);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}

h4.text-primary.fw-bold {
    font-size: 1.6rem;
    color: var(--fi-negro) !important;
    position: relative;
    padding-left: 0.85rem;
}

/* Barrita volt al costado del título: la "firma" visual del tema. */
h4.text-primary.fw-bold::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 5px;
    background: var(--fi-volt);
    transform: skewX(-12deg);
}

/* ---------------------------------------------------------------- Cards */
.card {
    border-radius: 0.375rem;
    border: 1px solid var(--fi-borde);
    box-shadow: none;
}

/* ------------------------------------------------- Barra superior (blanca) */
.header {
    background-color: #fff;
    border-bottom: 1px solid var(--fi-borde);
}

.header-right .notification_dropdown > .nav-link > svg path,
.header-right .notification_dropdown > .nav-link > i {
    fill: var(--fi-negro) !important;
    color: var(--fi-negro) !important;
}

.header-right .notification_dropdown > .nav-link:hover > svg path {
    fill: var(--fi-negro) !important;
}

.header .select-country .normal-select .btn,
.header .select-country .normal-select .dropdown-toggle::after {
    color: var(--fi-negro);
}

/* ---------------------------------------- Cabecera del menú + logo (negro) */
.nav-header {
    background-color: #000;
}

/* Logo arriba de los ítems del menú, centrado (mismo lugar que el de Pompei). */
.fi-sidebar-logo {
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem 1.25rem;
}

.fi-sidebar-logo img {
    width: 100%;
    max-width: 170px;
    height: auto;
    display: block;
}

/* Con el menú comprimido no entra el logo completo. */
.menu-toggle .fi-sidebar-logo { display: none; }

.nav-header .hamburger svg path { fill: #fff !important; }

/* ------------------------------------------------------- Menú lateral negro */
.deznav {
    background-color: var(--fi-negro);
    border-right: 0;
}

.deznav .metismenu > li > a,
.deznav .metismenu a {
    color: var(--fi-gris-texto-menu);
}

.deznav .metismenu > li > a .nav-text {
    font-family: var(--fi-fuente-titulos);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 0.95rem;
}

.deznav .metismenu ul a {
    font-family: var(--fi-fuente);
    font-size: 0.9rem;
}

/* Íconos: vienen con fill="#6F767E" inline; los aclaramos sobre negro. */
.deznav .menu-icon svg path,
.deznav .menu-icon svg rect,
.deznav .menu-icon svg ellipse,
.deznav .metismenu > li > a g [fill] {
    fill: #8e8e96;
}

/* Flecha de submenú: sólo dos lados con color (si se pintan los cuatro queda un rombo). */
.deznav .metismenu .has-arrow:after {
    border-top-color: #6b6b73;
    border-left-color: #6b6b73;
}

/* Hover */
.deznav .metismenu > li:hover > a,
.deznav .metismenu > li:focus > a,
.deznav .metismenu ul a:hover,
.deznav .metismenu ul a:focus {
    color: #fff;
}

.deznav .metismenu > li:hover > a .menu-icon svg path,
.deznav .metismenu > li:hover > a g [fill] {
    fill: #fff;
}

.deznav .metismenu ul a:hover:before {
    background: var(--fi-volt);
}

/* Activo (primer nivel): fondo grafito + barra volt a la izquierda. */
.deznav .metismenu > li.mm-active > a {
    background-color: var(--fi-grafito);
    color: #fff;
    margin: 0;
    width: 100%;
    border-radius: 0;
    box-shadow: inset 4px 0 0 var(--fi-volt);
}

.deznav .metismenu > li.mm-active > a g [fill],
.deznav .metismenu > li.mm-active > a .menu-icon svg path {
    fill: var(--fi-volt);
}

.deznav .metismenu > li.mm-active > a:after {
    border-top-color: #fff;
    border-left-color: #fff;
}

/* Activo (submenú): texto volt, sin bloque relleno. */
.deznav .metismenu ul li:has(> a.mm-active) {
    background-color: var(--fi-grafito-2);
    margin: 0 0.625rem;
    width: calc(100% - 1.25rem);
    border-radius: 0.25rem;
}

.deznav .metismenu ul li:has(> a.mm-active) > a.mm-active {
    color: var(--fi-volt);
    font-weight: 600;
}

.deznav .metismenu ul li .menu-crear-btn,
.deznav .metismenu ul li .menu-crear-btn i {
    color: #6b6b73;
}

.deznav .metismenu ul li .menu-crear-btn:hover i,
.deznav .metismenu ul li:has(> a.mm-active) .menu-crear-btn,
.deznav .metismenu ul li:has(> a.mm-active) .menu-crear-btn i {
    color: var(--fi-volt);
}

.deznav .metismenu ul a:before {
    background: #45454c;
}

/* --------------------------------------------------------------- Botones */
.btn-primary {
    --bs-btn-bg: var(--fi-negro);
    --bs-btn-border-color: var(--fi-negro);
    --bs-btn-hover-bg: #2b2b30;
    --bs-btn-hover-border-color: #2b2b30;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-bg: var(--fi-negro);
    --bs-btn-disabled-border-color: var(--fi-negro);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

/* Volt: siempre con texto negro (sobre volt el blanco no se lee). */
.btn-info {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--fi-volt);
    --bs-btn-border-color: var(--fi-volt);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--fi-volt-hover);
    --bs-btn-hover-border-color: var(--fi-volt-hover);
    --bs-btn-focus-shadow-rgb: 170, 204, 0;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--fi-volt-hover);
    --bs-btn-active-border-color: var(--fi-volt-hover);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--fi-volt);
    --bs-btn-disabled-border-color: var(--fi-volt);
    color: #000 !important;
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    font-weight: 600;
}

.btn-info i,
.btn-info svg path { color: #000; fill: #000; }

.btn-outline-info {
    --bs-btn-color: var(--fi-negro);
    --bs-btn-border-color: var(--fi-negro);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--fi-volt);
    --bs-btn-hover-border-color: var(--fi-volt);
    color: var(--fi-negro);
    border-color: var(--fi-negro);
}

.badge-info,
.bg-info {
    background-color: var(--fi-volt) !important;
    color: #000 !important;
}

/* Sobre blanco el volt no se lee como texto: usamos la variante oscura. */
.text-info { color: var(--fi-volt-oscuro) !important; }

a { color: var(--fi-negro); }

.form-control:focus,
.form-select:focus {
    border-color: var(--fi-negro);
    box-shadow: 0 0 0 0.15rem rgba(212, 255, 0, 0.55);
}

/* ------------------------------------------------- Encabezados de tabla
 * Pompei: fondo azul marino lleno. Acá: gris claro, texto negro en mayúsculas
 * condensadas y una línea negra abajo. */
.table thead th,
.dataTable thead th,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    background-color: #ececee;
    color: var(--fi-negro);
    font-family: var(--fi-fuente-titulos);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    border-bottom: 2px solid var(--fi-negro) !important;
}

.dataTable thead th.sorting:before,
.dataTable thead th.sorting:after,
.dataTable thead th.sorting_asc:before,
.dataTable thead th.sorting_asc:after,
.dataTable thead th.sorting_desc:before,
.dataTable thead th.sorting_desc:after {
    color: var(--fi-negro) !important;
}

/* Paginación */
.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--fi-negro) !important;
    border-color: var(--fi-negro) !important;
    color: var(--fi-volt) !important;
}

/* Rótulos de KPI en mayúsculas condensadas. */
.card .text-uppercase,
.card small.text-uppercase {
    font-family: var(--fi-fuente-titulos);
    letter-spacing: 0.05em;
}

/* Pestañas/links de período en el contenido (Hoy, Mes Actual…): venían en azul Bootstrap. */
.content-body .nav-link { color: var(--fi-negro); }

/* Títulos de tarjetas. */
.card-header .card-title,
.card-header h4,
.card-header h5 {
    font-family: var(--fi-fuente-titulos);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

/* --------------------------------------------------------------- Login */
.fi-login-marca {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.fi-login-marca img {
    width: min(70%, 520px);
    height: auto;
    position: relative;
    z-index: 1;
}

/* Dos franjas inclinadas en volt y grafito: el mismo gesto que la barrita de los títulos. */
.fi-login-marca::before,
.fi-login-marca::after {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    transform: skewX(-14deg);
}

/* El panel va pegado al borde izquierdo (sin el gutter de la grilla). */
.authincation .container-fluid { padding-left: 0; }
.authincation .row > .order-lg-first { padding-left: 0; }

.fi-login-marca::before {
    right: 6%;
    width: 14px;
    background: var(--fi-volt);
}

.fi-login-marca::after {
    right: calc(6% + 34px);
    width: 70px;
    background: var(--fi-grafito);
}

.authincation .login-form .title {
    font-family: var(--fi-fuente-titulos);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}

/* --------------------------------------------------------------- Footer */
.footer { background-color: var(--fi-fondo); }