/* ============================================================================
   Fuel Control Dynamics — Tema corporativo 2026
   Capa de skin sobre el CSS base: NO cambia funcionalidad, solo apariencia.
   Paleta: azul #12344A (hover #1E5670, oscuro #0E2B3D) + naranja #F28C28
   (hover #E67E22) como énfasis; fondo #F5F7FA; cards blancas sin bordes con
   sombra suave; estados 16A34A/F59E0B/DC2626/2563EB. Microanimaciones 0.2s.
   ========================================================================== */

:root {
    --fcd-blue: #12344A;
    --fcd-blue-hover: #1E5670;
    --fcd-blue-dark: #0E2B3D;
    --fcd-orange: #F28C28;
    --fcd-orange-hover: #E67E22;
    --fcd-bg: #F5F7FA;
    --fcd-card: #FFFFFF;
    --fcd-text: #1F2937;
    --fcd-text-2: #6B7280;
    --fcd-border: #E5E7EB;
    --fcd-ok: #16A34A;
    --fcd-warn: #F59E0B;
    --fcd-error: #DC2626;
    --fcd-info: #2563EB;
    --fcd-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    --fcd-shadow-hover: 0 8px 20px rgba(0, 0, 0, .12);
    --fcd-t: 0.2s ease;
}

/* ============================= Tipografía ============================= */

@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('../../fonts/inter/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('../../fonts/inter/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('../../fonts/inter/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('../../fonts/inter/inter-700.woff2') format('woff2'); }

body, .nav, .dropdown-menu, .form-control, button, input, select, textarea,
table.dataTable thead, .modal-dialog {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
    background-color: var(--fcd-bg);
    color: var(--fcd-text);
    -webkit-font-smoothing: antialiased;
}

h1.page-header {
    color: var(--fcd-blue);
    font-weight: 600;
    letter-spacing: -0.3px;
    border-bottom: none;
    margin: 24px 0 18px;
}

label { color: var(--fcd-text); font-weight: 500; }
.fc-inline-note { color: var(--fcd-text-2); }

/* ========================= Fondo general / layout ==================== */

#page-wrapper { background-color: var(--fcd-bg) !important; }
#wrapper { background-color: var(--fcd-blue-dark); }
#page-wrapper .container-fluid { padding-left: 24px; padding-right: 24px; }

/* ========================= Header superior (navbar) =================== */

.navbar-fixed-top {
    background: var(--fcd-blue-dark) !important;
    box-shadow: 0 2px 8px rgba(14, 43, 61, .25);
    border: none;
}

/* logo contenido dentro de la barra (54px): 38px de alto + márgenes = centrado */
.brand-logo {
    max-height: 38px;
    padding: 0;
    margin: 8px 0 8px 8px;
    border-radius: 6px;
}

#menu-toggle {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    transition: background var(--fcd-t), border-color var(--fcd-t);
}
#menu-toggle:hover, #menu-toggle:focus { background: var(--fcd-blue-hover); color: #fff; }
#menu-toggle.active { background: var(--fcd-orange); border-color: transparent; color: #fff; }

#session-time { color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }
#pending-messages a, #pending-messages { color: #fff; }
#font-size-change a { color: rgba(255, 255, 255, .55); transition: color var(--fcd-t); }
#font-size-change a.selected, #font-size-change a:hover { color: #fff; }

/* avatar circular en el menú de usuario */
#topMenuUserLink { color: rgba(255, 255, 255, .9); transition: color var(--fcd-t); }
#topMenuUserLink:hover { color: #fff; }
#topMenuUserLink .fa-user {
    background: var(--fcd-blue-hover);
    color: #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
    margin-right: 4px;
    vertical-align: middle;
}
ul.dropdown-menu.dropdown-user {
    background-color: var(--fcd-blue-dark) !important;
    border: none;
    border-radius: 10px;
    box-shadow: var(--fcd-shadow-hover);
    overflow: hidden;
}
ul.dropdown-menu.dropdown-user li a { color: rgba(255, 255, 255, .8); transition: background var(--fcd-t), color var(--fcd-t); }
ul.dropdown-menu.dropdown-user li a:hover { color: #fff; background: var(--fcd-blue-hover); }
ul.dropdown-menu.dropdown-user li i.fa { color: var(--fcd-orange); }

/* =============================== Sidebar ============================== */

.sidebar, .sidebar-nav { background-color: var(--fcd-blue-dark); }

.sidebar li a {
    color: rgba(255, 255, 255, .85);
    border-left: 3px solid transparent;   /* reserva para la barra activa */
    border-radius: 0;
    transition: background var(--fcd-t), color var(--fcd-t), border-color var(--fcd-t);
}
.sidebar ul li i.fa {
    color: rgba(255, 255, 255, .65);
    font-size: 16px;
    transition: color var(--fcd-t);
}

.sidebar li a:hover, .sidebar li a:focus {
    background-color: var(--fcd-blue-hover) !important;
    color: #fff;
}
.sidebar li a:hover i.fa { color: #fff; }

/* activo: SOLO barra naranja a la izquierda, sin pintar el fondo */
.sidebar ul li a.active {
    background-color: rgba(255, 255, 255, .05) !important;
    color: #fff !important;
    border-top: none !important;
    border-left: 3px solid var(--fcd-orange);
}
.sidebar ul li a.active i.fa { color: var(--fcd-orange) !important; }
.sidebar ul li a.active:hover, .sidebar ul li a.active:focus {
    background-color: var(--fcd-blue-hover) !important;
    color: #fff;
}
.sidebar ul li a.active:hover i.fa { color: var(--fcd-orange) !important; }

.sidebar .nav-second-level li a { background-color: rgba(0, 0, 0, .18); padding-left: 40px; }
.sidebar .nav-second-level li a:hover { background-color: var(--fcd-blue-hover); }

/* separadores discretos entre grupos */
.sidebar-nav .divider-above a { border-top: 1px solid rgba(255, 255, 255, .08); }

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover,
.nav > li > a:focus, .nav > li > a:hover {
    background-color: var(--fcd-blue-hover);
}

/* ========================== Cards (paneles) =========================== */

.panel {
    border: none;
    border-radius: 14px;
    background: var(--fcd-card);
    box-shadow: var(--fcd-shadow);
    transition: box-shadow var(--fcd-t);
}
.panel:hover { box-shadow: var(--fcd-shadow-hover); }
.panel-default > .panel-heading {
    background: var(--fcd-card);
    border-color: var(--fcd-border);
    border-radius: 14px 14px 0 0;
    color: var(--fcd-text);
    font-weight: 600;
}
.panel-body { border-radius: 14px; }
.panel-footer { border-radius: 0 0 14px 14px; }

/* paneles del dashboard: cabecera azul corporativo */
.dashboard .panel .panel-heading.variable-panel-heading {
    background-color: var(--fcd-blue) !important;
    border-radius: 14px 14px 0 0;
}
.dashboard .panel-heading .heading-icon-and-text .fa { color: var(--fcd-orange); }
.dashboard .transferStatusLabel, .dashboard .transferStatusIcon {
    background-color: var(--fcd-blue) !important;
    border-color: var(--fcd-blue) !important;
    border-radius: 6px;
}

/* aviso de privilegios denegados con el rojo semántico */
.panel-denied-page-privileges .panel-body { color: var(--fcd-error); }

/* =============================== Botones ============================== */

.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: background var(--fcd-t), border-color var(--fcd-t), color var(--fcd-t), box-shadow var(--fcd-t);
}

.btn-primary, .btn-primary:focus {
    background-color: var(--fcd-orange) !important;
    border-color: var(--fcd-orange) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active,
.btn-primary:active:hover, .btn-primary:active:focus {
    background-color: var(--fcd-orange-hover) !important;
    border-color: var(--fcd-orange-hover) !important;
    color: #fff !important;
    box-shadow: var(--fcd-shadow);
}

/* secundario azul corporativo (sin tocar los addons/carets de los inputs) */
.btn-default:not(.dropdown-toggle):not(.input-group-addon) {
    background-color: var(--fcd-blue);
    border-color: var(--fcd-blue);
    color: #fff;
}
.btn-default:not(.dropdown-toggle):not(.input-group-addon):hover,
.btn-default:not(.dropdown-toggle):not(.input-group-addon):focus {
    background-color: var(--fcd-blue-hover);
    border-color: var(--fcd-blue-hover);
    color: #fff;
}
/* excepción: el botón de colapso del menú vive en el header oscuro */
#menu-toggle { background: transparent; }

/* =============================== Links ================================ */

a { color: var(--fcd-orange); transition: color var(--fcd-t); }
a:hover, a:focus { color: var(--fcd-orange-hover); }

/* ============================ Formularios ============================= */

.form-control {
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    color: var(--fcd-text);
    box-shadow: none;
    transition: border-color var(--fcd-t), box-shadow var(--fcd-t);
}
.form-control:focus {
    border-color: var(--fcd-orange);
    box-shadow: 0 0 0 3px rgba(242, 140, 40, .15);
    outline: none;
}
.form-control::placeholder { color: var(--fcd-text-2); }

.input-group-addon {
    background: #F9FAFB;
    border-color: #D1D5DB;
    color: var(--fcd-text-2);
    transition: background var(--fcd-t);
}
.input-group .form-control { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.input-group-addon:last-child, .ddlTextbox div.dropdown-toggle {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* validación con los colores semánticos */
.error-message, .validation-summary-errors, span.field-validation-error,
#errorMessage label { color: var(--fcd-error); }
input.form-control.error, textarea.form-control.error { border-color: var(--fcd-error); }
.form-control.warning { border-color: var(--fcd-warn); }
input.warning-message { color: var(--fcd-warn); }

/* dropdowns claros */
.dropdown-menu {
    border: none;
    border-radius: 10px;
    box-shadow: var(--fcd-shadow-hover);
    /* OJO: nada de overflow:hidden aquí — las listas largas (p. ej. sitios en
       los filtros de reportes) reciben .scrollable-menu y NECESITAN scroll. */
}
.dropdown-menu.scrollable-menu {
    height: auto;
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 0;
}
.dropdown-menu > li > a { color: var(--fcd-text); transition: background var(--fcd-t); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: #EEF6FF;
    color: var(--fcd-text);
}

/* ========================= Tablas / DataTables ======================== */

.table, .dataTables_wrapper {
    background: var(--fcd-card);
}
.datatable, table.dataTable {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--fcd-shadow);
}

table.dataTable thead {
    background-color: var(--fcd-blue) !important;
    color: #fff;
}
table.dataTable thead th {
    border-right: none !important;
    font-weight: 600 !important;
    letter-spacing: .2px;
    padding: 10px 8px !important;
}
table.dataTable th:first-child { border-radius: 14px 0 0 0; }
table.dataTable th:last-child { border-radius: 0 14px 0 0; border-right: none !important; }
table.dataTable th:only-child { border-radius: 14px 14px 0 0; }

.table > tbody > tr > td { padding: 8px; border-color: var(--fcd-border); }

/* filas alternadas + hover con microtransición */
table.dataTable tbody tr { background: #FFFFFF; transition: background var(--fcd-t); }
table.dataTable tbody tr:nth-child(even) { background: #F8FAFC; }
table.dataTable tbody tr:hover { background: #EEF6FF; }
.datatable tbody tr.selected,
table.dataTable tbody tr.selected { background: #DDEBFF !important; }

.dataTables_info { border-top: none; color: var(--fcd-text-2); font-weight: 500; }
.dataTables_processing {
    background-color: var(--fcd-blue);
    border: none;
    border-radius: 8px;
    box-shadow: var(--fcd-shadow);
}
.dataTable .round-icon { background-color: var(--fcd-blue); color: var(--fcd-orange); }

/* paginación */
.pagination > li > a, .pagination > li > span {
    color: var(--fcd-blue);
    border-color: var(--fcd-border);
    transition: background var(--fcd-t), color var(--fcd-t);
}
.pagination > li:first-child > a { border-radius: 8px 0 0 8px; }
.pagination > li:last-child > a { border-radius: 0 8px 8px 0; }
.pagination > li > a:hover { background: #EEF6FF; color: var(--fcd-blue); }
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover,
.pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background-color: var(--fcd-orange) !important;
    border-color: var(--fcd-orange) !important;
    color: #fff;
}

/* ================================ Tabs ================================ */

.nav-tabs { border-bottom-color: var(--fcd-border); }
.nav-tabs > li > a {
    border-radius: 8px 8px 0 0;
    color: var(--fcd-text-2);
    transition: background var(--fcd-t), color var(--fcd-t);
}
.nav-tabs > li:not(.active) > a { border-color: var(--fcd-border); background-color: #F8FAFC; }
.nav-tabs > li:not(.active) > a:hover { background-color: #EEF6FF; color: var(--fcd-text); }
.nav-tabs > li.active > a { color: var(--fcd-blue); font-weight: 600; }

/* ============================== Footer ================================ */


/* ============================ Dashboard KPI =========================== */

#kpi-row { margin-bottom: 6px; }
.kpi-card {
    background: var(--fcd-card);
    border-radius: 14px;
    box-shadow: var(--fcd-shadow);
    padding: 16px 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: box-shadow var(--fcd-t), transform var(--fcd-t);
}
.kpi-card:hover { box-shadow: var(--fcd-shadow-hover); transform: translateY(-1px); }
.kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(18, 52, 74, .08);
    color: var(--fcd-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: none;
}
.kpi-card.kpi-accent .kpi-icon { background: rgba(242, 140, 40, .12); color: var(--fcd-orange); }
.kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--fcd-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kpi-label { font-size: 12px; color: var(--fcd-text-2); font-weight: 500; }
.kpi-trend { font-size: 11px; font-weight: 600; margin-left: 6px; }
.kpi-trend.up { color: var(--fcd-ok); }
.kpi-trend.down { color: var(--fcd-error); }
.kpi-trend.flat { color: var(--fcd-text-2); }

/* ======================= Estados / notificaciones ===================== */

#siteOfflineWarning { color: var(--fcd-error); }
.timeline-panel.danger, .timeline-legend.danger { color: var(--fcd-error) !important; }
.timeline-panel.warning, .timeline-legend.warning { color: var(--fcd-warn) !important; }
.timeline-panel.info, .timeline-legend.info { color: var(--fcd-info) !important; }
.timeline-panel.aware, .timeline-legend.aware { color: var(--fcd-ok) !important; }

/* modales alineados con las cards */
.modal-content { border: none; border-radius: 14px; box-shadow: var(--fcd-shadow-hover); }
.modal-header { border-bottom-color: var(--fcd-border); }
.modal-footer { border-top-color: var(--fcd-border); }

/* ============================ Responsive ============================== */

/* 5 tarjetas KPI por fila en escritorio ancho */
@media (min-width: 1200px) {
    #kpi-row .kpi-col { width: 20%; }
}
@media (max-width: 1199px) {
    .kpi-value { font-size: 22px; }
    .kpi-icon { width: 36px; height: 36px; font-size: 15px; }
}
@media (max-width: 767px) {
    #page-wrapper .container-fluid { padding-left: 12px; padding-right: 12px; }
    h1.page-header { margin: 14px 0 10px; }
}

/* ==================== Modo gris grafito (opcional) ==================== */
/* SIN filter: el gris se aplica por PALETA para conservar A COLOR el
   naranja de marca, los colores semánticos que destacan estados/módulos
   y el logo. La familia azul corporativa pasa a grafito vía variables
   (todo lo que usa var(--fcd-blue*) cae solo); el resto de la sección son
   detalles de profundidad (gradientes, bordes, sombras) y el tapado de
   los tintes azulados que la base pinta en duro. */

html.fcd-gray {
    --fcd-blue: #3A4046;
    --fcd-blue-hover: #4B5259;
    --fcd-blue-dark: #202428;
    --fcd-bg: #ECEEF0;
}

/* Toggle de tema en la navbar (junto al control de tamaño de letra) */
#theme-change {
    text-align: right;
    padding: 17px 2px;
    float: right;
}

#theme-change a {
    display: inline-block;
    padding: 3px;
    line-height: 0;
    text-decoration: none;
}

.theme-dot {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .25);
    transition: border-color var(--fcd-t), transform var(--fcd-t);
}

.theme-dot-color { background: linear-gradient(135deg, #12344A 50%, #F28C28 50%); }
.theme-dot-gray { background: linear-gradient(135deg, #9CA3AF 50%, #4B5563 50%); }

#theme-change a.selected .theme-dot { border-color: #FFFFFF; }
#theme-change a:hover .theme-dot { transform: scale(1.2); }

@media (max-width: 767px) {
    #theme-change { display: none; }
}

/* header y footer: gradiente grafito */
html.fcd-gray .navbar-fixed-top {
    background: linear-gradient(180deg, #23272C, #15171A) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/* sidebar: gradiente vertical + submenú más hundido; la barra naranja del
   ítem activo y sus iconos vienen de la base y se conservan */
html.fcd-gray .sidebar, html.fcd-gray .sidebar-nav {
    background: linear-gradient(180deg, #262A2F 0%, #17191C 100%);
}
html.fcd-gray .sidebar .nav-second-level li a { background-color: rgba(0, 0, 0, .3); }

/* cards y tablas: borde fino + sombra más profunda = definición */
html.fcd-gray .panel, html.fcd-gray .kpi-card {
    border: 1px solid #DDDFE2;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
}
html.fcd-gray .datatable, html.fcd-gray table.dataTable { box-shadow: 0 6px 16px rgba(0, 0, 0, .1); }

/* cabeceras oscuras con gradiente (los iconos naranjas de la base quedan) */
html.fcd-gray .dashboard .panel .panel-heading.variable-panel-heading,
html.fcd-gray table.dataTable thead,
html.fcd-gray .dataTables_processing { background: linear-gradient(180deg, #383E45, #262B30) !important; }
html.fcd-gray .dashboard .transferStatusLabel, html.fcd-gray .dashboard .transferStatusIcon {
    background-color: #383E45 !important;
    border-color: #383E45 !important;
}

/* filas: los tintes azulados de la base pasan a grises; la selección lleva
   barra de acento naranja */
html.fcd-gray table.dataTable tbody tr:nth-child(even) { background: #F3F4F5; }
html.fcd-gray table.dataTable tbody tr:hover { background: #E9EAEC; }
html.fcd-gray .datatable tbody tr.selected,
html.fcd-gray table.dataTable tbody tr.selected {
    background: #E2E4E7 !important;
    box-shadow: inset 3px 0 0 var(--fcd-orange);
}

/* hovers azulados → grises (la paginación activa naranja se queda) */
html.fcd-gray .pagination > li > a:hover { background: #E9EAEC; color: #22262A; }
html.fcd-gray .dropdown-menu > li > a:hover,
html.fcd-gray .dropdown-menu > li > a:focus { background-color: #E9EAEC; }
html.fcd-gray .nav-tabs > li:not(.active) > a { background-color: #F0F1F2; }
html.fcd-gray .nav-tabs > li:not(.active) > a:hover { background-color: #E9EAEC; }

/* KPI: el chip azulado pasa a neutro; el accent naranja de la base gana
   por especificidad y se conserva */
html.fcd-gray .kpi-icon { background: rgba(58, 64, 70, .08); box-shadow: inset 0 0 0 1px #DDDFE2; }

/* login: degradado y textos azules → grafito (marca, escudo y botón
   naranjas se conservan) */
html.fcd-gray body.fcd-login {
    background: linear-gradient(135deg, #1B1E21 0%, #2F353B 45%, #ECEEF0 100%) fixed !important;
}
html.fcd-gray .login-brand, html.fcd-gray .login-title, html.fcd-gray .field-icon { color: #2A2F34; }
html.fcd-gray .login-row a { color: #2A2F34 !important; }

/* logo de la navbar: variante con fondo grafito (el original trae el fondo
   azul corporativo PINTADO en la imagen y sobre la navbar gris se notaba
   el rectángulo); el swirl y los textos naranjas son idénticos */
html.fcd-gray .brand-logo { content: url('../Images/Logo/fuelcontrol_logo_gray.png'); }

/* pantalla de carga: swirl de la marca girando (sustituye al SVG ajeno) */
.loader-inner img.loader-mark {
    width: 90px;
    height: 90px;
    animation: fcd-loader-spin 1.5s linear infinite;
}
@keyframes fcd-loader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- Carga sin brincos del sidebar ----------------------------------------
   La columna oscura era tan alta como su contenido y la altura real la fijaba
   admin.js hasta window.load: durante la carga se veía cortada a media
   pantalla. Garantizar la altura por CSS desde el primer paint. El mismo
   breakpoint (768px) en el que admin.css hace .sidebar absolute. */
/* Windows: la barra de scroll vertical ocupa ~17px reales; cuando aparecía a
   media carga encogía el ancho útil y lo ya calculado (DataTables, paneles)
   desbordaba horizontal hasta el siguiente recálculo. Reservar SIEMPRE el
   hueco de la barra hace el ancho estable de punta a punta. En navegadores
   con barras flotantes (overlay) esta regla es un no-op. */
html { scrollbar-gutter: stable; }

@media (min-width: 768px) {
    .sidebar { min-height: calc(100vh - 55px); }      /* solo la navbar (ya no hay footer) */
    /* 55 = offset real de #page-wrapper (resizePageWrapper usa topOffset 55);
       con 50 sobraban 5px y aparecía un scrollbar hasta que el JS lo corregía */
    #page-wrapper { min-height: calc(100vh - 55px); }
    /* Menú acotado a la ventana (scroll interno solo si no cabe). La doble
       clase vence al max-height:340px que Bootstrap pone a
       .navbar-fixed-top .navbar-collapse (antes lo neutralizaba una hoja
       espejada ya eliminada). */
    .navbar-fixed-top .sidebar-nav.navbar-collapse,
    .sidebar-nav { max-height: calc(100vh - 55px); }
}