/* ==========================================================================
   NOTARIA-41 — CORRECCIONES TEMA OSCURO
   FASE 1.3 y 1.4 del PLAN_EJECUCION
   Corrige contraste, legibilidad y conserva identidad visual corporativa
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CORRECCIONES GENERALES DE CONTRASTE EN DARK MODE
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  /* Ajustar variables para mejor contraste */
  --app-background: #0f1119;
  --app-surface: #1a1f36;
  --app-surface-2: #232842;
  --app-surface-3: #2d324d;
  --app-text: #e2e8f0;
  --app-text-secondary: #d1d5db;
  --app-muted: #94a3b8;
  --app-border: #2d324d;
  --app-border-light: #353a54;
  --app-input-bg: #1a1f36;
  --app-input-text: #e2e8f0;
  --app-input-border: #353a54;
  --app-input-focus-border: var(--app-primary);
  --app-table-head: #1e2440;
  --app-table-row: #1a1f36;
  --app-table-row-alt: #1e2440;
  --app-table-hover: rgba(90, 125, 156, 0.12);
  --app-card-shadow: 0 2px 8px rgba(0,0,0,0.25);
  --app-elevated-shadow: 0 8px 28px rgba(0,0,0,0.40);
}

/* --------------------------------------------------------------------------
   2. SIDEBAR EN DARK MODE — Conservar identidad corporativa (#2c3e50)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --app-sidebar: #1a2332;
  --app-sidebar-hover: rgba(44, 62, 80, 0.55);
  --app-sidebar-active: rgba(44, 62, 80, 0.70);
  --app-sidebar-text: #e2e8f0;
  --app-sidebar-muted: #8ba0b8;
  --app-sidebar-submenu: #151d28;
  --app-sidebar-header: rgba(139, 160, 184, 0.55);
  --app-sidebar-user-panel: #151d28;
}

/* Asegurar que el sidebar no pierda el color corporativo */
html[data-theme="dark"] .main-sidebar {
  background: #1a2332 !important;
}

/* --------------------------------------------------------------------------
   3. BOTONES EN DARK MODE — Corregir fondos faltantes
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .btn {
  color: var(--app-text);
}
html[data-theme="dark"] .btn-default {
  background-color: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-text);
}
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus {
  background-color: var(--app-surface-3);
  border-color: var(--app-border-light);
  color: var(--app-text);
}
html[data-theme="dark"] .btn-default:active {
  background-color: var(--app-surface-3);
}

/* Botones AdminLTE */
html[data-theme="dark"] .btn-app {
  background: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-text);
}
html[data-theme="dark"] .btn-app:hover {
  background: var(--app-surface-3);
  border-color: var(--app-primary);
}

/* Botones de acción con color semántico los conservamos pero aseguramos contraste */
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-danger {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   4. SELECTS Y FORMULARIOS EN DARK MODE
   -------------------------------------------------------------------------- */
html[data-theme="dark"] select,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] .form-control {
  background-color: var(--app-input-bg) !important;
  color: var(--app-input-text) !important;
  border-color: var(--app-input-border) !important;
}
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .form-control:focus {
  border-color: var(--app-input-focus-border) !important;
  box-shadow: 0 0 0 2px rgba(90, 125, 156, 0.25) !important;
}
html[data-theme="dark"] select option {
  background-color: var(--app-surface-2);
  color: var(--app-text);
}
html[data-theme="dark"] .input-group .input-group-addon {
  background-color: var(--app-surface-2);
  border-color: var(--app-input-border);
  color: var(--app-muted);
}
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] .form-control[readonly] {
  background-color: var(--app-surface-2) !important;
  opacity: 0.65;
}

/* Placeholder */
html[data-theme="dark"] ::placeholder {
  color: var(--app-muted) !important;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   5. TABLAS EN DARK MODE
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .table {
  background-color: var(--app-table-row);
  color: var(--app-text);
}
html[data-theme="dark"] .table > thead > tr > th {
  background-color: var(--app-table-head);
  color: var(--app-text);
  border-bottom: 2px solid var(--app-border);
}
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th {
  border-top-color: var(--app-border);
}
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td {
  border-color: var(--app-border);
}
html[data-theme="dark"] .table-hover > tbody > tr:hover {
  background-color: var(--app-table-hover) !important;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--app-table-row-alt);
}

/* --------------------------------------------------------------------------
   6. MODALES EN DARK MODE
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .modal-content {
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  box-shadow: var(--app-elevated-shadow);
}
html[data-theme="dark"] .modal-header {
  border-bottom-color: var(--app-border);
  background: var(--app-surface-2);
}
html[data-theme="dark"] .modal-header .close {
  color: var(--app-text);
  opacity: 0.8;
  text-shadow: none;
}
html[data-theme="dark"] .modal-header .close:hover {
  opacity: 1;
  color: var(--app-text);
}
html[data-theme="dark"] .modal-title {
  color: var(--app-text);
}
html[data-theme="dark"] .modal-body {
  color: var(--app-text);
}
html[data-theme="dark"] .modal-footer {
  border-top-color: var(--app-border);
  background: var(--app-surface-2);
}

/* --------------------------------------------------------------------------
   7. DROPDOWNS EN DARK MODE
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: var(--app-elevated-shadow);
}
html[data-theme="dark"] .dropdown-menu > li > a {
  color: var(--app-text);
}
html[data-theme="dark"] .dropdown-menu > li > a:hover {
  background-color: var(--app-surface-2);
  color: var(--app-text);
}
html[data-theme="dark"] .dropdown-menu .divider {
  background-color: var(--app-border);
}

/* Select2 en dark mode */
html[data-theme="dark"] .select2-container--default .select2-selection--single {
  background-color: var(--app-input-bg) !important;
  border-color: var(--app-input-border) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--app-input-text) !important;
}
html[data-theme="dark"] .select2-dropdown {
  background-color: var(--app-surface) !important;
  border-color: var(--app-border) !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--app-text);
  background-color: var(--app-surface);
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--app-primary) !important;
  color: #ffffff;
}
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--app-input-bg);
  border-color: var(--app-input-border);
  color: var(--app-input-text);
}

/* --------------------------------------------------------------------------
   8. ALERTS / CALLOUTS EN DARK MODE
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .alert {
  border-color: var(--app-border);
}
html[data-theme="dark"] .alert-info {
  background-color: rgba(60, 141, 188, 0.15);
  border-color: rgba(60, 141, 188, 0.35);
  color: #a5d8f0;
}
html[data-theme="dark"] .alert-success {
  background-color: rgba(40, 167, 69, 0.15);
  border-color: rgba(40, 167, 69, 0.35);
  color: #80d698;
}
html[data-theme="dark"] .alert-warning {
  background-color: rgba(243, 156, 18, 0.15);
  border-color: rgba(243, 156, 18, 0.35);
  color: #f9ce7a;
}
html[data-theme="dark"] .alert-danger {
  background-color: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.35);
  color: #f0949b;
}

/* Callouts AdminLTE */
html[data-theme="dark"] .callout {
  border-color: var(--app-border);
}
html[data-theme="dark"] .callout-info {
  background-color: rgba(60, 141, 188, 0.12);
}
html[data-theme="dark"] .callout-success {
  background-color: rgba(40, 167, 69, 0.12);
}
html[data-theme="dark"] .callout-warning {
  background-color: rgba(243, 156, 18, 0.12);
}
html[data-theme="dark"] .callout-danger {
  background-color: rgba(220, 53, 69, 0.12);
}

/* --------------------------------------------------------------------------
   9. LABELS / BADGES EN DARK MODE
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .label {
  color: #ffffff;
}
html[data-theme="dark"] .label-default {
  background-color: var(--app-surface-3) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border);
}

/* --------------------------------------------------------------------------
   10. SCROLLBARS EN DARK MODE
   -------------------------------------------------------------------------- */
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--app-background);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--app-surface-3);
  border-radius: 12px;
  border: 3px solid var(--app-background);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--app-muted);
}

/* --------------------------------------------------------------------------
   11. NAV-TABS DARK
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--app-border);
}
html[data-theme="dark"] .nav-tabs > li > a {
  color: var(--app-muted);
}
html[data-theme="dark"] .nav-tabs > li > a:hover {
  background-color: var(--app-surface-2);
  border-color: var(--app-border) var(--app-border) transparent;
  color: var(--app-text);
}
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus {
  background-color: var(--app-surface);
  border-color: var(--app-border) var(--app-border) transparent;
  color: var(--app-primary);
}

/* --------------------------------------------------------------------------
   12. PAGINATION DARK
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
  background-color: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-text);
}
html[data-theme="dark"] .pagination > li > a:hover {
  background-color: var(--app-surface-3);
  border-color: var(--app-primary);
  color: var(--app-text);
}
html[data-theme="dark"] .pagination > .active > a,
html[data-theme="dark"] .pagination > .active > span {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  color: #ffffff;
}
html[data-theme="dark"] .pagination > .disabled > span {
  background-color: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-muted);
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   13. PANELS / BOXES AdminLTE en dark
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .box {
  border-color: var(--app-border);
  background: var(--app-surface);
  box-shadow: var(--app-card-shadow);
}
html[data-theme="dark"] .box-header {
  border-bottom-color: var(--app-border);
  color: var(--app-text);
}
html[data-theme="dark"] .box-header > .box-title {
  color: var(--app-text);
}
html[data-theme="dark"] .box-body {
  color: var(--app-text);
}
html[data-theme="dark"] .box-footer {
  border-top-color: var(--app-border);
  background: var(--app-surface-2);
}
html[data-theme="dark"] .box.box-primary {
  border-top-color: var(--app-primary);
}
html[data-theme="dark"] .box.box-success {
  border-top-color: #28a745;
}
html[data-theme="dark"] .box.box-info {
  border-top-color: #3c8dbc;
}
html[data-theme="dark"] .box.box-warning {
  border-top-color: #f39c12;
}
html[data-theme="dark"] .box.box-danger {
  border-top-color: #dc3545;
}

/* --------------------------------------------------------------------------
   14. SMALL-BOXES / KPI AdminLTE en dark
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .small-box {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  box-shadow: var(--app-card-shadow);
}
html[data-theme="dark"] .small-box .inner {
  color: var(--app-text);
}
html[data-theme="dark"] .small-box h3 {
  color: var(--app-text);
}
html[data-theme="dark"] .small-box p {
  color: var(--app-muted);
}
html[data-theme="dark"] .small-box .icon {
  color: var(--app-primary);
  opacity: 0.15;
}
html[data-theme="dark"] .small-box:hover .icon {
  opacity: 0.25;
}
html[data-theme="dark"] .small-box .small-box-footer {
  background: var(--app-surface-2);
  color: var(--app-muted);
  border-top: 1px solid var(--app-border);
}
html[data-theme="dark"] .small-box .small-box-footer:hover {
  background: var(--app-surface-3);
  color: var(--app-primary);
}

/* --------------------------------------------------------------------------
   15. IDENTIDAD CORPORATIVA — Conservar el azul marino #2c3e50
   En dark mode seguirá siendo el color primario de botones, links, etc.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --app-primary: #5a8fbb;
  --app-primary-hover: #6ba3cf;
  --app-primary-alpha: rgba(90, 143, 187, 0.2);
}
html[data-theme="dark"] .bg-light-blue,
html[data-theme="dark"] .bg-primary {
  background-color: #3b5f7a !important;
}
html[data-theme="dark"] .text-light-blue,
html[data-theme="dark"] .text-primary {
  color: var(--app-primary) !important;
}

/* Preservar el logo con el color corporativo original */
html[data-theme="dark"] .main-header .logo {
  background: #2c3e50 !important;
}

/* --------------------------------------------------------------------------
   16. TIMELINE / ACTIVITY
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .timeline::before {
  background-color: var(--app-border);
}
html[data-theme="dark"] .timeline > li > .timeline-item {
  background: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: var(--app-card-shadow);
  color: var(--app-text);
}
html[data-theme="dark"] .timeline > li > .timeline-header {
  border-bottom-color: var(--app-border);
}
html[data-theme="dark"] .timeline > li > .timeline-footer {
  background: var(--app-surface-2);
}
html[data-theme="dark"] .timeline > li > .fa,
html[data-theme="dark"] .timeline > li > .glyphicon,
html[data-theme="dark"] .timeline > li > .ion {
  color: var(--app-border);
}