/* ==========================================================================
   Doña Vicky — Tema oscuro (inspirado en el diseño que eligió el cliente)
   --------------------------------------------------------------------------
   Se aplica SOBRE el HTML que ya existe (Bootstrap 4 + Dore): no hay que
   reescribir las pantallas. Para revertir todo, basta con quitar el <link>
   de este archivo en templates/header.php y login.php.
   ========================================================================== */

:root {
  --k-bg:         #09090b;
  --k-surface:    #18181f;   /* barra superior y menú lateral */
  --k-card:       #131318;
  --k-card-2:     #1c1c24;   /* encabezados de tabla, hover */
  --k-border:     #27272f;
  --k-text:       #f4f4f5;
  --k-text-2:     #9ca3af;
  --k-text-3:     #6b7280;
  --k-accent:     #8b5cf6;
  --k-accent-2:   #a78bfa;
  --k-accent-bg:  rgba(139, 92, 246, .16);
  --k-green:      #34d399;
  --k-amber:      #fbbf24;
  --k-red:        #f87171;
  --k-blue:       #60a5fa;
  --k-radius:     14px;
  --k-radius-sm:  10px;
}

/* ===== Base ===== */
html,
body#app-container,
body {
  background: var(--k-bg) !important;
  color: var(--k-text);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
}

main { color: var(--k-text); background: transparent !important; }

/* El tema base pinta franjas claras alrededor del contenido */
#app-container,
#app-container main,
.menu,
.menu .scroll,
.main-menu .scroll,
.sub-menu .scroll { background-color: transparent; }
.main-menu { background: var(--k-surface) !important; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--k-text); font-weight: 700; }
h1, .h1 { font-size: 1.6rem; }
h3, .h3 { font-size: 1.35rem; }
h5, .h5 { font-size: 1.12rem; }

a { color: var(--k-accent-2); }
a:hover { color: var(--k-accent); text-decoration: none; }

.text-muted { color: var(--k-text-2) !important; }
.small, small { font-size: .89rem; }
hr { border-color: var(--k-border); }

/* ===== Barra superior ===== */
.navbar.fixed-top {
  background: var(--k-surface) !important;
  border-bottom: 1px solid var(--k-border);
  box-shadow: none;
}
.navbar .name,
.navbar .btn-empty { color: var(--k-text) !important; }
.navbar svg rect { fill: var(--k-text-2); }
.navbar .header-icon i { color: var(--k-text-2); }

/* ===== Menú lateral ===== */
.menu .main-menu,
.menu .sub-menu {
  background: var(--k-surface) !important;
  border-right: 1px solid var(--k-border);
  box-shadow: none;
}
.menu .main-menu ul li a,
.menu .sub-menu ul li a {
  color: var(--k-text-2) !important;
  border-bottom: none !important;
  border-radius: var(--k-radius-sm);
  margin: 2px 8px;
  transition: background .15s, color .15s;
  font-size: .95rem;
}
.menu .main-menu ul li a i,
.menu .sub-menu ul li a i { color: var(--k-text-3); }
.menu .main-menu ul li a:hover,
.menu .sub-menu ul li a:hover {
  background: var(--k-card-2) !important;
  color: var(--k-text) !important;
}
.menu .main-menu ul li a:hover i { color: var(--k-accent-2); }
.menu .main-menu ul li.active > a,
.menu .main-menu ul li a.active {
  background: var(--k-accent-bg) !important;
  color: var(--k-accent-2) !important;
}
.menu .main-menu ul li.active > a i { color: var(--k-accent-2); }

/* ===== Tarjetas ===== */
.card {
  background: var(--k-card) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius) !important;
  box-shadow: none !important;
  color: var(--k-text);
}
.card-body { color: var(--k-text); }
.card .text-muted { color: var(--k-text-2) !important; }

/* Números grandes de los indicadores */
.card .h4, .card .h5 { letter-spacing: -.01em; }

/* ===== Tablas ===== */
.table { color: var(--k-text); }
.table thead th,
.table .thead-light th,
.table-light,
.table thead.table-light th {
  background: var(--k-card-2) !important;
  color: var(--k-text-2) !important;
  border-color: var(--k-border) !important;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
}
.table td, .table th { border-color: var(--k-border) !important; }
.table-hover tbody tr:hover { background: var(--k-card-2) !important; color: var(--k-text); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02); }
.table-responsive {
  border-color: var(--k-border) !important;
  background: transparent !important;
}

/* ===== Formularios ===== */
.form-control, .custom-select, select, textarea, input {
  background: var(--k-bg) !important;
  border: 1px solid var(--k-border) !important;
  color: var(--k-text) !important;
  border-radius: var(--k-radius-sm) !important;
}
.form-control:focus, .custom-select:focus {
  border-color: var(--k-accent) !important;
  box-shadow: 0 0 0 3px var(--k-accent-bg) !important;
  background: var(--k-bg) !important;
  color: var(--k-text) !important;
}
.form-control::placeholder { color: var(--k-text-3) !important; }
.form-control[readonly], .form-control:disabled { background: var(--k-card-2) !important; }
.form-label, label { color: var(--k-text-2); font-weight: 500; }
.input-group-text {
  background: var(--k-card-2) !important;
  border-color: var(--k-border) !important;
  color: var(--k-text-2) !important;
}
.custom-control-label { color: var(--k-text); }
.custom-control-label::before { background: var(--k-bg); border-color: var(--k-border); }
.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--k-accent); border-color: var(--k-accent);
}
option { background: var(--k-surface); color: var(--k-text); }

/* ===== Botones ===== */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: .01em; }
.btn-primary {
  background: var(--k-accent) !important;
  border-color: var(--k-accent) !important;
  color: #fff !important;
}
.btn-primary:hover { background: #7c4dee !important; border-color: #7c4dee !important; }
.btn-outline-primary {
  color: var(--k-accent-2) !important;
  border-color: var(--k-accent) !important;
  background: transparent !important;
}
.btn-outline-primary:hover { background: var(--k-accent-bg) !important; color: var(--k-accent-2) !important; }
.btn-outline-secondary {
  color: var(--k-text-2) !important;
  border-color: var(--k-border) !important;
  background: transparent !important;
}
.btn-outline-secondary:hover { background: var(--k-card-2) !important; color: var(--k-text) !important; }
.btn-success { background: #059669 !important; border-color: #059669 !important; color: #fff !important; }
.btn-outline-success { color: var(--k-green) !important; border-color: #065f46 !important; background: transparent !important; }
.btn-danger  { background: #dc2626 !important; border-color: #dc2626 !important; }
.btn-outline-danger { color: var(--k-red) !important; border-color: #7f1d1d !important; background: transparent !important; }
.btn-warning { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; }
.btn-light, .btn-secondary { background: var(--k-card-2) !important; border-color: var(--k-border) !important; color: var(--k-text) !important; }
.btn-link { color: var(--k-accent-2) !important; }

/* ===== Etiquetas ===== */
.badge { border-radius: 999px; font-weight: 600; padding: .35em .7em; }
.badge-primary { background: var(--k-accent-bg) !important; color: var(--k-accent-2) !important; }
.badge-success, .bg-success { background: rgba(52,211,153,.16) !important; color: var(--k-green) !important; }
.badge-danger,  .bg-danger  { background: rgba(248,113,113,.16) !important; color: var(--k-red) !important; }
.badge-warning, .bg-warning { background: rgba(251,191,36,.16) !important; color: var(--k-amber) !important; }
.badge-info,    .bg-info    { background: rgba(96,165,250,.16) !important; color: var(--k-blue) !important; }
.badge-secondary, .bg-secondary, .badge-light, .bg-light {
  background: var(--k-card-2) !important; color: var(--k-text-2) !important;
}
.text-success { color: var(--k-green) !important; }
.text-danger  { color: var(--k-red) !important; }
.text-warning { color: var(--k-amber) !important; }
.text-info    { color: var(--k-blue) !important; }
.text-primary { color: var(--k-accent-2) !important; }
.text-dark    { color: var(--k-text) !important; }
.text-black-50, .text-white-50 { color: var(--k-text-2) !important; }

/* Las etiquetas suelen traer .text-dark heredado del tema claro; ese color
   ganaba y las dejaba ilegibles, así que aquí se reafirma el suyo. */
.badge.badge-primary,   .badge.text-dark.badge-primary   { color: var(--k-accent-2) !important; }
.badge.badge-success,   .badge.text-dark.badge-success   { color: var(--k-green) !important; }
.badge.badge-danger,    .badge.text-dark.badge-danger    { color: var(--k-red) !important; }
.badge.badge-warning,   .badge.text-dark.badge-warning   { color: var(--k-amber) !important; }
.badge.badge-info,      .badge.text-dark.badge-info      { color: var(--k-blue) !important; }
.badge.badge-secondary, .badge.text-dark.badge-secondary,
.badge.badge-light,     .badge.text-dark.badge-light     { color: var(--k-text-2) !important; }

/* ===== Avisos ===== */
.alert { border-radius: var(--k-radius); border-width: 1px; }
.alert-success { background: rgba(52,211,153,.10) !important; border-color: rgba(52,211,153,.35) !important; color: var(--k-green) !important; }
.alert-danger  { background: rgba(248,113,113,.10) !important; border-color: rgba(248,113,113,.35) !important; color: var(--k-red) !important; }
.alert-warning { background: rgba(251,191,36,.10) !important; border-color: rgba(251,191,36,.35) !important; color: var(--k-amber) !important; }
.alert-info    { background: rgba(96,165,250,.10) !important; border-color: rgba(96,165,250,.35) !important; color: var(--k-blue) !important; }
.alert-secondary, .alert-light {
  background: var(--k-card) !important; border-color: var(--k-border) !important; color: var(--k-text-2) !important;
}
.alert .close { color: inherit; opacity: .6; text-shadow: none; }

/* ===== Ventanas emergentes y menús ===== */
.modal-content {
  background: var(--k-card) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius) !important;
  color: var(--k-text);
}
.modal-header, .modal-footer { border-color: var(--k-border) !important; }
.modal-title { color: var(--k-text); }
.modal .close { color: var(--k-text-2); text-shadow: none; opacity: .8; }
.modal-backdrop.show { opacity: .7; }
.dropdown-menu {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius-sm) !important;
}
.dropdown-item { color: var(--k-text-2) !important; }
.dropdown-item:hover { background: var(--k-card-2) !important; color: var(--k-text) !important; }
.dropdown-divider { border-color: var(--k-border); }

/* ===== Listas y otros ===== */
.list-group-item {
  background: var(--k-card) !important;
  border-color: var(--k-border) !important;
  color: var(--k-text);
}
.progress { background: var(--k-card-2) !important; border-radius: 999px; }
.progress-bar { background: var(--k-accent) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--k-border) !important; }
.bg-white { background: var(--k-card) !important; }

/* ==========================================================================
   Superficies claras que sobreviven del tema original
   --------------------------------------------------------------------------
   Sin esto queda texto claro sobre fondo claro (ilegible). Son de tres
   orígenes: el rayado de las tablas, las páginas que traen su propia hoja de
   estilos, y las tablas con el fondo blanco escrito en el HTML.
   ========================================================================== */

/* --- 1. Rayado de tablas: el fondo claro viene de una hoja externa --- */
.table-striped tbody tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd),
table.dataTable.table-striped > tbody > tr:nth-of-type(odd),
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even,
.table tbody tr.odd,
.table tbody tr.even {
  background-color: rgba(255, 255, 255, .03) !important;
  color: var(--k-text) !important;
}
.table tbody tr,
.table tbody tr td { color: var(--k-text); }
/* Filas resaltadas del tema claro (aviso, seleccionada, etc.) */
.table .table-active, .table .table-light, .table .table-secondary,
tr.table-active > td, tr.table-light > td {
  background-color: var(--k-card-2) !important;
  color: var(--k-text) !important;
}
.table .table-warning, tr.table-warning > td { background-color: rgba(251,191,36,.12) !important; color: var(--k-amber) !important; }
.table .table-success, tr.table-success > td { background-color: rgba(52,211,153,.12) !important; color: var(--k-green) !important; }
.table .table-danger,  tr.table-danger  > td { background-color: rgba(248,113,113,.12) !important; color: var(--k-red)   !important; }

/* --- 2. Fondos blancos escritos directamente en el HTML --- */
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: white"],
[style*="background:white"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background: #fff"],
[style*="background:#fff"] {
  background-color: var(--k-card) !important;
  background-image: none !important;
  color: var(--k-text) !important;
}

/* --- 3. Paginación y controles de listados --- */
.pagination .page-link {
  background: var(--k-card) !important;
  border-color: var(--k-border) !important;
  color: var(--k-text-2) !important;
}
.pagination .page-link:hover { background: var(--k-card-2) !important; color: var(--k-text) !important; }
.pagination .page-item.active .page-link {
  background: var(--k-accent) !important;
  border-color: var(--k-accent) !important;
  color: #fff !important;
}
.pagination .page-item.disabled .page-link { color: var(--k-text-3) !important; background: var(--k-card) !important; }
.dataTables_wrapper,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--k-text-2) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--k-card) !important;
  border-color: var(--k-border) !important;
  color: var(--k-text-2) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--k-accent) !important; border-color: var(--k-accent) !important; color: #fff !important;
}

/* --- 4. Botón oscuro sobre fondo oscuro --- */
.btn-default, .btn-outline-dark, .btn-dark {
  color: var(--k-text) !important;
  border-color: var(--k-border) !important;
  background: transparent !important;
}
.btn-default:hover, .btn-outline-dark:hover, .btn-dark:hover { background: var(--k-card-2) !important; color: var(--k-text) !important; }

/* --- 5. Movimientos: la pantalla trae su propia hoja de estilos clara --- */
.mov-card, .mov-filters, .mov-list, .mov-action, .mov-row, .mov-head,
.mov-hero, .mov-kpi, .mov-shell,
.alm-card, .alm-box, .alm-row {
  background: var(--k-card) !important;
  background-image: none !important;
  border-color: var(--k-border) !important;
  color: var(--k-text) !important;
}
.mov-action:hover, .mov-row:hover { background: var(--k-card-2) !important; color: var(--k-text) !important; }
.mov-open   { background: rgba(251,191,36,.16) !important; color: var(--k-amber) !important; }
.mov-closed { background: rgba(52,211,153,.16) !important; color: var(--k-green) !important; }
.mov-cancel { background: rgba(248,113,113,.16) !important; color: var(--k-red)   !important; }

/* --- 6. Indicadores de la ficha de ruta (traen fondo blanco propio) --- */
.kpi-mini, .kpi-card, .kpi-box {
  background: var(--k-card) !important;
  border-color: var(--k-border) !important;
  color: var(--k-text) !important;
}

/* --- 7. Otras superficies del tema claro --- */
.card-header, .card-footer {
  background: var(--k-card-2) !important;
  border-color: var(--k-border) !important;
  color: var(--k-text) !important;
}
.nav-tabs { border-color: var(--k-border) !important; }
.nav-tabs .nav-link { color: var(--k-text-2) !important; border-color: transparent !important; }
.nav-tabs .nav-link.active {
  background: var(--k-card) !important;
  border-color: var(--k-border) !important;
  color: var(--k-accent-2) !important;
}
.list-group-item-action:hover { background: var(--k-card-2) !important; color: var(--k-text) !important; }
.custom-file-label { background: var(--k-bg) !important; border-color: var(--k-border) !important; color: var(--k-text-2) !important; }
.close, .close:hover { color: var(--k-text-2) !important; text-shadow: none !important; }
.popover, .tooltip-inner {
  background: var(--k-surface) !important; color: var(--k-text) !important; border-color: var(--k-border) !important;
}
.breadcrumb { background: transparent !important; }
.breadcrumb-item, .breadcrumb-item a { color: var(--k-text-2) !important; }

/* ===== Celular: texto más grande y sin desplazamiento lateral ===== */
@media (max-width: 767.98px) {
  body { font-size: 16.5px; }
  .small, small { font-size: .95rem; }
  h1, .h1 { font-size: 1.45rem; }
  .h4 { font-size: 1.5rem; }
  .h5 { font-size: 1.25rem; }
  .btn { min-height: 46px; font-size: 1rem; }
  .form-control, .custom-select { min-height: 46px; font-size: 1rem; }
  .table { font-size: .97rem; }
  .table-responsive { overflow-x: auto; }
  .table td, .table th { white-space: normal; word-break: break-word; padding: .65rem .4rem; }
  .card-body { padding: 1rem; }
}

/* ===== Impresión: siempre en blanco y negro ===== */
@media print {
  body, body#app-container, .card, .modal-content, .table {
    background: #fff !important;
    color: #000 !important;
  }
  .card { border: 1px solid #ccc !important; }
  .table td, .table th { border-color: #ccc !important; color: #000 !important; }
  .table thead th { background: #eee !important; color: #000 !important; }
  .text-muted, .small { color: #333 !important; }
  .text-success, .text-danger, .text-warning, .text-info, .text-primary { color: #000 !important; }
  .navbar, .menu { display: none !important; }
}