/* ===============================
   PALETA CORPORATIVA GAR DI
   =============================== */
:root {
  --gardi-black: #1A1A1A;
  --gardi-dark: #0b0b0b;
  --gardi-orange: #E07A3F;
  --gardi-orange-dark: #C86532; 
  --gardi-white: #FFFFFF;
  --gardi-gray: #B5B5B5;
}

/* ===============================
   BASE
   =============================== */
body {
  font-family: 'Segoe UI', Roboto, sans-serif;
  background-color: var(--gardi-black);
  color: var(--gardi-white);
}

/* ===============================
   TEXTOS
   =============================== */
.text-gardi-orange {
  color: var(--gardi-orange) !important;
}

.text-gardi-gray {
  color: var(--gardi-gray) !important;
}

/* ===============================
   FONDOS
   =============================== */
.bg-gardi-dark {
  background-color: var(--gardi-dark) !important;
}

.bg-gardi-black {
  background-color: var(--gardi-black) !important;
}

.bg-gardi-orange {
  background-color: var(--gardi-orange) !important;
}

/* ===============================
   BOTONES
   =============================== */
.btn-gardi {
  background-color: var(--gardi-orange);
  color: var(--gardi-white);
  border: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-gardi:hover {
  background-color: var(--gardi-orange-dark);
  color: var(--gardi-white);
}

/* ===============================
   INPUTS
   =============================== */
.form-control {
  background-color: #111;
  border: 1px solid #333;
  color: var(--gardi-white);
}

.form-control:focus {
  background-color: #111;
  color: var(--gardi-white);
  border-color: var(--gardi-orange);
  box-shadow: 0 0 0 0.15rem rgba(224, 122, 63, 0.3);
}

/* ===============================
   CARDS
   =============================== */
.card-gardi {
  background-color: var(--gardi-dark);
  border-radius: 1rem;
  border: none;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

/* ===============================
   LINKS
   =============================== */
a {
  color: var(--gardi-orange);
  text-decoration: none;
}

a:hover {
  color: var(--gardi-orange-dark);
}

/* ===============================
   LOGIN ESPECÍFICO
   =============================== */
.login-bg {
  background: linear-gradient(
    135deg,
    var(--gardi-black),
    var(--gardi-dark)
  );
}

.login-image {
  background-size: cover;
  background-position: center;
  position: relative;
}

.login-overlay {
  background: rgba(0, 0, 0, 0.65);
  height: 100%;
  width: 100%;
  padding: 3rem;
}


/* DataTables Dark - GARDI */
.dataTables_wrapper {
    color: #ffffff;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: #0B0B0B;
    color: #ffffff;
    border: 1px solid #444;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: #B5B5B5;
}

.dataTables_wrapper .page-link {
    background-color: #1A1A1A;
    color: #E07A3F;
    border-color: #444;
}

.dataTables_wrapper .page-item.active .page-link {
    background-color: #E07A3F;
    border-color: #E07A3F;
    color: #000;
}

.dataTables_wrapper .page-link:hover {
    background-color: #E07A3F;
    color: #000;
}


/* ===========================
   BOTONES GAR DI
=========================== */

/* Sobrescribe btn-primary */
.btn-primary {
    background-color: #E07A3F !important;
    border-color: #E07A3F !important;
    color: #ffffff !important;
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #c56632 !important;
    border-color: #c56632 !important;
    color: #ffffff !important;
}

.btn-primary:active {
    background-color: #b85c2d !important;
    border-color: #b85c2d !important;
}

/* Disabled */
.btn-primary:disabled {
    background-color: #9c9c9c !important;
    border-color: #9c9c9c !important;
    cursor: not-allowed;
}

/* ===============================
   OVERRIDES DARK MODE GAR DI
   =============================== */

/* Contenedores principales */
.container,
.container-fluid {
    background-color: transparent !important;
}

/* Cards */
.card,
.card-body,
.card-header,
.card-footer {
    background-color: var(--gardi-dark) !important;
    color: var(--gardi-white);
}

/* Tab panes */
.tab-content,
.tab-pane {
    background-color: var(--gardi-dark);
}


/* Tablas */
.table {
    background-color: transparent;
    color: var(--gardi-white);
}

.table thead th {
    background-color: #5e5e5e;
    color: var(--gardi-gray);
    border-color: #333;
}

.table tbody tr {
    background-color: transparent;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.03);
}

/* Modales (por si los usas después) */
.modal-content {
    background-color: var(--gardi-dark);
    color: var(--gardi-white);
}
.text-muted {
    color: #8f8f8f !important; /* gris visible en dark */
}

/* ===============================
   NAV TABS – FIX COLOR GAR DI
   =============================== */

/* Estado normal */
.nav-tabs .nav-link {
    color: var(--gardi-gray) !important;
    background-color: transparent !important;
    border: none !important;
    font-weight: 500;
}

/* Hover */
.nav-tabs .nav-link:hover {
    color: var(--gardi-white) !important;
}

/* Activo */
.nav-tabs .nav-link.active {
    color: var(--gardi-orange) !important;
    background-color: transparent !important;
    border-bottom: 3px solid var(--gardi-orange) !important;
}