/**
 * Tema Dark Mode Unificado - Sistema de Control de Insumos
 * Basado en referencia visual de página Insumos
 * Variables y estilos reutilizables para todas las páginas
 */

/* Variables CSS personalizadas */
:root {
    --dark-bg: #1e1e1e;
    --dark-text: #e0e0e0;
    --dark-sidebar: #2d2d2d;
    --dark-form: #3d3d3d;
    --dark-border: #444;
    --dark-hover: #3d3d3d;
    --dark-header: #667eea;
    --accent-success: #90ee90;
    --accent-error: #ff6b6b;
    --accent-warning: #ffb347;
    --accent-info: #64b5f6;
    --dark-card: #252525;
    --dark-input: #3a3a3a;
    --dark-table-header: #3d3d3d;
    --dark-table-row: #2a2a2a;
}

body.dark-mode {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Asegurar que body tiene background correcto desde el inicio */
body.dark-mode {
    --dark-text: #e0e0e0;
}

/* Contenedores */
body.dark-mode .container,
body.dark-mode .container-fluid {
    background-color: transparent;
    color: var(--dark-text);
}

/* NAVBAR - Consistente con página Insumos */
body.dark-mode .navbar {
    background: linear-gradient(90deg, #1a1a2e 0%, #16213e 100%) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

body.dark-mode .navbar-brand,
body.dark-mode .navbar-brand:hover {
    color: var(--dark-text) !important;
}

body.dark-mode .navbar-text {
    color: var(--dark-text) !important;
}

body.dark-mode .navbar-toggler {
    border-color: var(--dark-border) !important;
}

body.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(224, 224, 224, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* SIDEBAR - Consistente con página Insumos */
body.dark-mode .col-md-2 {
    background-color: var(--dark-sidebar) !important;
    color: var(--dark-text);
    border-right: 1px solid var(--dark-border) !important;
}

body.dark-mode .nav-link {
    color: #b0b0b0 !important;
    transition: all 0.3s ease;
}

body.dark-mode .nav-link:hover {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .nav-link.active {
    background-color: var(--dark-header) !important;
    color: white !important;
}

/* CARDS y SECTIONS */
body.dark-mode .card {
    background-color: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text);
}

body.dark-mode .card-header {
    background-color: var(--dark-table-header) !important;
    border-bottom-color: var(--dark-border) !important;
    color: var(--dark-text);
    font-weight: 600;
}

body.dark-mode .card-body {
    background-color: var(--dark-card) !important;
    color: var(--dark-text);
}

/* FORMULARIOS */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--dark-input) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .form-control::placeholder {
    color: #888 !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: var(--dark-input) !important;
    border-color: var(--dark-header) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

body.dark-mode .form-label,
body.dark-mode label {
    color: var(--dark-text) !important;
}

body.dark-mode .form-check-label {
    color: var(--dark-text) !important;
}

body.dark-mode .form-check-input {
    background-color: var(--dark-input) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .form-check-input:checked {
    background-color: var(--dark-header) !important;
    border-color: var(--dark-header) !important;
}

/* TABLAS - Mejorado para Dark Mode */
body.dark-mode table {
    color: var(--dark-text);
    border-collapse: collapse;
    background-color: var(--dark-card);
}

body.dark-mode table caption {
    color: var(--dark-text);
    background-color: transparent;
}

body.dark-mode thead {
    background-color: var(--dark-table-header) !important;
}

body.dark-mode thead th {
    background-color: var(--dark-table-header) !important;
    border-color: var(--dark-border) !important;
    color: #f0f0f0 !important;
    font-weight: 700;
    border: 1px solid var(--dark-border);
}
/* Sin `padding` ni `text-align`: cambiaban el alto y la alineacion de la
   cabecera de tabla al alternar el tema. */

body.dark-mode tbody {
    background-color: var(--dark-card);
}

body.dark-mode tbody td {
    border-color: var(--dark-border) !important;
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
    background-color: var(--dark-card);
}
/* Sin `padding`: cambiaba el alto de fila al alternar el tema. */

body.dark-mode tbody tr {
    background-color: var(--dark-card);
    border-bottom: 1px solid var(--dark-border);
}

/* Filas alternadas en tablas */
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #2a2a2a !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(even) {
    background-color: var(--dark-card) !important;
}

/* Hover en filas */
body.dark-mode tbody tr:hover {
    background-color: var(--dark-hover) !important;
    color: white !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: #404040 !important;
    transition: background-color 0.15s ease-in-out;
}

body.dark-mode .table-hover tbody tr:hover td {
    background-color: #404040 !important;
    color: white !important;
}

/* Tablas con bordes */
body.dark-mode .table-bordered,
body.dark-mode .table-bordered th,
body.dark-mode .table-bordered td {
    border-color: var(--dark-border) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Tablas pequeñas */
/* Tablas pequenas: la densidad la fija Bootstrap, igual en ambos temas. */

/* Tablas responsive */
body.dark-mode .table-responsive {
    background-color: transparent;
}

body.dark-mode .table-responsive-sm,
body.dark-mode .table-responsive-md,
body.dark-mode .table-responsive-lg,
body.dark-mode .table-responsive-xl {
    background-color: transparent;
}

/* Estados en tablas */
body.dark-mode .table-active,
body.dark-mode .table-active td,
body.dark-mode .table-active th {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .table-primary td {
    background-color: rgba(102, 126, 234, 0.15) !important;
}

body.dark-mode .table-success td {
    background-color: rgba(90, 142, 58, 0.15) !important;
}

body.dark-mode .table-danger td {
    background-color: rgba(255, 107, 107, 0.15) !important;
}

body.dark-mode .table-warning td {
    background-color: rgba(255, 179, 71, 0.15) !important;
}

body.dark-mode .table-info td {
    background-color: rgba(100, 181, 246, 0.15) !important;
}

/* Iconos en tablas */
body.dark-mode table i,
body.dark-mode table .bi,
body.dark-mode table .fas,
body.dark-mode table .far {
    color: inherit !important;
}

/* BOTONES */
body.dark-mode .btn {
    color: var(--dark-text) !important;
}

body.dark-mode .btn-primary {
    background-color: var(--dark-header) !important;
    border-color: var(--dark-header) !important;
    color: white !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus {
    background-color: #5568d3 !important;
    border-color: #5568d3 !important;
    color: white !important;
}

body.dark-mode .btn-secondary {
    background-color: #555 !important;
    border-color: #555 !important;
    color: white !important;
}

body.dark-mode .btn-secondary:hover {
    background-color: #666 !important;
    border-color: #666 !important;
}

body.dark-mode .btn-success {
    background-color: #5a8e3a !important;
    border-color: #5a8e3a !important;
}

body.dark-mode .btn-danger {
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
}

body.dark-mode .btn-warning {
    background-color: #f57c00 !important;
    border-color: #f57c00 !important;
}

body.dark-mode .btn-info {
    background-color: #0288d1 !important;
    border-color: #0288d1 !important;
}

body.dark-mode .btn-outline-light {
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .btn-outline-light:hover {
    background-color: var(--dark-hover) !important;
    color: white !important;
}

/* El tema NO define geometria: `padding` aqui ensanchaba los botones
   pequenos del navbar (32px -> 41.6px) y desplazaba ~27px todo el bloque
   derecho al alternar el tema. El tamano lo fija mesa.css, igual en ambos
   temas; aqui solo viven colores. */

/* DROPDOWNS */
body.dark-mode .dropdown-menu {
    background-color: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .dropdown-item {
    color: var(--dark-text) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: var(--dark-hover) !important;
    color: white !important;
}

body.dark-mode .dropdown-divider {
    border-color: var(--dark-border) !important;
}

/* MODALES */
body.dark-mode .modal-content {
    background-color: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .modal-header {
    background-color: var(--dark-table-header) !important;
    border-bottom-color: var(--dark-border) !important;
    color: var(--dark-text);
}

body.dark-mode .modal-body {
    background-color: var(--dark-card) !important;
    color: var(--dark-text);
}

body.dark-mode .modal-footer {
    background-color: var(--dark-table-header) !important;
    border-top-color: var(--dark-border) !important;
}

body.dark-mode .close,
body.dark-mode .btn-close {
    color: var(--dark-text) !important;
    opacity: 0.7;
}

body.dark-mode .btn-close:hover {
    opacity: 1;
}

/* ALERTAS */
body.dark-mode .alert {
    border-color: var(--dark-border) !important;
}

body.dark-mode .alert-success {
    background-color: rgba(90, 142, 58, 0.2) !important;
    border-color: var(--accent-success) !important;
    color: var(--accent-success) !important;
}

body.dark-mode .alert-danger {
    background-color: rgba(255, 107, 107, 0.2) !important;
    border-color: var(--accent-error) !important;
    color: var(--accent-error) !important;
}

body.dark-mode .alert-warning {
    background-color: rgba(255, 179, 71, 0.2) !important;
    border-color: var(--accent-warning) !important;
    color: var(--accent-warning) !important;
}

body.dark-mode .alert-info {
    background-color: rgba(100, 181, 246, 0.2) !important;
    border-color: var(--accent-info) !important;
    color: var(--accent-info) !important;
}

/* BADGES EN TABLAS */
body.dark-mode .badge {
    background-color: var(--dark-header) !important;
    color: white !important;
}
/* Sin padding/border-radius/font-size: cambiaban el ancho del distintivo
   DEMO (277.6px -> 308px) y la altura del contador de notificaciones. */

body.dark-mode .badge-success {
    background-color: #5a8e3a !important;
    color: white !important;
}

body.dark-mode .badge-danger {
    background-color: #d32f2f !important;
    color: white !important;
}

body.dark-mode .badge-warning {
    background-color: #f57c00 !important;
    color: white !important;
}

body.dark-mode .badge-info {
    background-color: #0288d1 !important;
    color: white !important;
}

body.dark-mode .badge-secondary {
    background-color: #555 !important;
    color: white !important;
}

body.dark-mode .badge-primary {
    background-color: var(--dark-header) !important;
    color: white !important;
}

/* PAGINATION */
body.dark-mode .pagination {
    background-color: transparent;
}

body.dark-mode .page-link {
    background-color: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .page-link:hover {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .page-item.active .page-link {
    background-color: var(--dark-header) !important;
    border-color: var(--dark-header) !important;
}

/* LIENS */
body.dark-mode a {
    color: var(--dark-header) !important;
    text-decoration: none;
}

body.dark-mode a:hover {
    color: #5568d3 !important;
}

/* SÉPARATEURS */
body.dark-mode hr {
    border-color: var(--dark-border) !important;
    opacity: 0.5;
}

/* SPINNER / LOADING */
body.dark-mode .spinner-border {
    border-color: var(--dark-border) !important;
}

body.dark-mode .spinner-border .spinner-border {
    border-top-color: var(--dark-header) !important;
}

/* BREADCRUMB */
body.dark-mode .breadcrumb {
    background-color: transparent;
}

body.dark-mode .breadcrumb .breadcrumb-item {
    color: var(--dark-text);
}

body.dark-mode .breadcrumb .breadcrumb-item a {
    color: var(--dark-header) !important;
}

body.dark-mode .breadcrumb .breadcrumb-item.active {
    color: #999;
}

/* ICONES */
body.dark-mode i {
    color: inherit !important;
}

body.dark-mode .bi,
body.dark-mode .fas,
body.dark-mode .far,
body.dark-mode .fal {
    color: inherit !important;
}

/* SCROLLBAR */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dark-bg);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-header);
}

/* CORRECCIONES ADICIONALES PARA COMPATIBILIDAD TOTAL */

/* Row y divs de contenido */
body.dark-mode .row {
    background-color: transparent;
}

/* Secciones genéricas */
body.dark-mode section,
body.dark-mode article,
body.dark-mode aside {
    background-color: transparent;
    color: var(--dark-text);
}

/* Inputs y selects de búsqueda */
body.dark-mode .search-box,
body.dark-mode input[type="search"] {
    background-color: var(--dark-input) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* Campos readonly */
body.dark-mode input[readonly],
body.dark-mode textarea[readonly] {
    background-color: var(--dark-form) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Elementos deshabilitados */
body.dark-mode :disabled,
body.dark-mode input:disabled,
body.dark-mode select:disabled,
body.dark-mode textarea:disabled {
    background-color: var(--dark-hover) !important;
    color: #888 !important;
    border-color: var(--dark-border) !important;
    opacity: 0.6;
}

/* Text colors for sections */
body.dark-mode .text-muted {
    color: #999 !important;
}

body.dark-mode .text-body {
    color: var(--dark-text) !important;
}

body.dark-mode .text-white {
    color: white !important;
}

body.dark-mode .text-dark {
    color: var(--dark-text) !important;
}

body.dark-mode .text-light {
    color: #ccc !important;
}

/* Background utilities */
body.dark-mode .bg-light {
    background-color: var(--dark-table-header) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .bg-white {
    background-color: var(--dark-card) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .bg-gray,
body.dark-mode .bg-secondary {
    background-color: var(--dark-hover) !important;
}

/* Borders */
body.dark-mode .border {
    border-color: var(--dark-border) !important;
}

body.dark-mode .border-top {
    border-top-color: var(--dark-border) !important;
}

body.dark-mode .border-bottom {
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .border-start {
    border-left-color: var(--dark-border) !important;
}

body.dark-mode .border-end {
    border-right-color: var(--dark-border) !important;
}

/* Específico para tablas en dark mode */
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--dark-table-row) !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(even) {
    background-color: transparent;
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text) !important;
}

/* Fondos específicos */
body.dark-mode .bg-primary {
    background-color: var(--dark-header) !important;
}

body.dark-mode .bg-danger {
    background-color: #d32f2f !important;
}

body.dark-mode .bg-success {
    background-color: #5a8e3a !important;
}

body.dark-mode .bg-warning {
    background-color: #f57c00 !important;
}

body.dark-mode .bg-info {
    background-color: #0288d1 !important;
}

/* Validación de formularios */
body.dark-mode .is-invalid,
body.dark-mode .form-control.is-invalid,
body.dark-mode .form-select.is-invalid {
    border-color: #ff6b6b !important;
    background-color: var(--dark-input) !important;
}

body.dark-mode .is-valid,
body.dark-mode .form-control.is-valid,
body.dark-mode .form-select.is-valid {
    border-color: var(--accent-success) !important;
    background-color: var(--dark-input) !important;
}

body.dark-mode .invalid-feedback {
    color: #ff6b6b !important;
}

body.dark-mode .valid-feedback {
    color: var(--accent-success) !important;
}

/* Shadow effects in dark mode */
body.dark-mode .shadow,
body.dark-mode .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.75) !important;
}

body.dark-mode .shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.8) !important;
}

/* Help text */
body.dark-mode .form-text,
body.dark-mode .small,
body.dark-mode small {
    color: #999 !important;
}

/* Marca de código */
body.dark-mode code,
body.dark-mode pre {
    background-color: var(--dark-hover) !important;
    color: #90ee90 !important;
    border-color: var(--dark-border) !important;
}

/* Blockquote */
body.dark-mode blockquote {
    border-left-color: var(--dark-header) !important;
    color: var(--dark-text);
}

/* CONTENIDO GENERAL - Asegurar visibilidad */
body.dark-mode main,
body.dark-mode .main-content,
body.dark-mode [role="main"] {
    background-color: transparent;
    color: var(--dark-text);
}

body.dark-mode .content,
body.dark-mode .container-content {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

/* Divs con contenido de texto */
body.dark-mode div {
    background-color: inherit;
}

body.dark-mode p {
    color: var(--dark-text);
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: var(--dark-text);
}

/* Ensure icons are visible */
body.dark-mode i,
body.dark-mode .bi:before,
body.dark-mode .fas:before,
body.dark-mode .far:before {
    color: currentColor !important;
}
    color: var(--dark-text) !important;
    background-color: var(--dark-hover) !important;
}

body.dark-mode .nav-link.active {
    color: var(--dark-header) !important;
    background-color: transparent !important;
}

/* Tarjetas */
body.dark-mode .card {
    background-color: var(--dark-sidebar) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .card-header {
    background-color: var(--dark-form) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .card-body {
    background-color: var(--dark-sidebar) !important;
}

/* Tablas */
body.dark-mode .table {
    color: var(--dark-text) !important;
    background-color: var(--dark-sidebar) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .table thead {
    background-color: var(--dark-form) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .table thead th {
    border-color: var(--dark-border) !important;
}

body.dark-mode .table tbody tr {
    background-color: var(--dark-sidebar) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .table tbody tr:hover {
    background-color: var(--dark-hover) !important;
}

body.dark-mode .table tbody td {
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Formularios */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group .form-control,
body.dark-mode textarea {
    background-color: var(--dark-form) !important;
    color: var(--dark-text) !important;
    border-color: #555 !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode textarea:focus {
    background-color: var(--dark-form) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-header) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

body.dark-mode .form-control::placeholder,
body.dark-mode textarea::placeholder {
    color: #999 !important;
}

body.dark-mode .form-label {
    color: var(--dark-text) !important;
}

body.dark-mode .form-text {
    color: #999 !important;
}

/* Botones */
body.dark-mode .btn-outline-light {
    color: var(--dark-text) !important;
    border-color: var(--dark-text) !important;
}

body.dark-mode .btn-outline-light:hover {
    background-color: var(--dark-text) !important;
    color: var(--dark-bg) !important;
}

body.dark-mode .btn-outline-secondary {
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .btn-outline-secondary:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--dark-text) !important;
}

body.dark-mode .btn-primary {
    background-color: var(--dark-header) !important;
    border-color: var(--dark-header) !important;
}

body.dark-mode .btn-primary:hover {
    background-color: #5568d3 !important;
    border-color: #5568d3 !important;
}

body.dark-mode .btn-info {
    background-color: var(--accent-info) !important;
    border-color: var(--accent-info) !important;
    color: #1e1e1e !important;
}

body.dark-mode .btn-info:hover {
    background-color: #42a5f5 !important;
    border-color: #42a5f5 !important;
}

body.dark-mode .btn-success {
    background-color: var(--accent-success) !important;
    border-color: var(--accent-success) !important;
    color: #1e1e1e !important;
}

body.dark-mode .btn-danger {
    background-color: var(--accent-error) !important;
    border-color: var(--accent-error) !important;
}

body.dark-mode .btn-warning {
    background-color: var(--accent-warning) !important;
    border-color: var(--accent-warning) !important;
    color: #1e1e1e !important;
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
    background-color: var(--dark-sidebar) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .dropdown-item {
    color: var(--dark-text) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .dropdown-divider {
    border-color: var(--dark-border) !important;
}

body.dark-mode .dropdown-header {
    color: #999 !important;
}

/* Alertas */
body.dark-mode .alert {
    background-color: var(--dark-form) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .alert-success {
    background-color: #1e4620 !important;
    border-color: #2d7a3c !important;
    color: var(--accent-success) !important;
}

body.dark-mode .alert-danger {
    background-color: #4a1f1f !important;
    border-color: #7a2d2d !important;
    color: var(--accent-error) !important;
}

body.dark-mode .alert-warning {
    background-color: #4a3f1f !important;
    border-color: #7a6a2d !important;
    color: var(--accent-warning) !important;
}

body.dark-mode .alert-info {
    background-color: #1f3a4a !important;
    border-color: #2d5a7a !important;
    color: var(--accent-info) !important;
}

/* Badges */
body.dark-mode .badge {
    background-color: var(--dark-header) !important;
    color: #ffffff !important;
}

body.dark-mode .badge.bg-success {
    background-color: var(--accent-success) !important;
    color: #1e1e1e !important;
}

body.dark-mode .badge.bg-danger {
    background-color: var(--accent-error) !important;
}

body.dark-mode .badge.bg-warning {
    background-color: var(--accent-warning) !important;
    color: #1e1e1e !important;
}

body.dark-mode .badge.bg-info {
    background-color: var(--accent-info) !important;
    color: #1e1e1e !important;
}

/* Modales */
body.dark-mode .modal-content {
    background-color: var(--dark-sidebar) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .modal-header {
    background-color: var(--dark-form) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .modal-body {
    background-color: var(--dark-sidebar) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .modal-footer {
    background-color: var(--dark-form) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .btn-close {
    filter: invert(1);
}

/* Títulos y Textos */
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6 {
    color: var(--dark-text) !important;
}

body.dark-mode .text-muted {
    color: #999 !important;
}

body.dark-mode .text-secondary {
    color: #999 !important;
}

body.dark-mode a {
    color: var(--accent-info) !important;
}

body.dark-mode a:hover {
    color: #42a5f5 !important;
}

/* Separadores */
body.dark-mode hr {
    border-color: var(--dark-border) !important;
    opacity: 1 !important;
}

/* Scrollbar (navegadores Webkit) */
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dark-sidebar);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Componentes especiales */
body.dark-mode .badge-light {
    background-color: var(--dark-form) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .list-group-item {
    background-color: var(--dark-sidebar) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .list-group-item:hover {
    background-color: var(--dark-hover) !important;
}

body.dark-mode .list-group-item.active {
    background-color: var(--dark-header) !important;
    border-color: var(--dark-header) !important;
}

/* Inputs de archivo */
body.dark-mode .form-file-input {
    background-color: var(--dark-form) !important;
    color: var(--dark-text) !important;
}

/* Código */
body.dark-mode code {
    background-color: var(--dark-form) !important;
    color: var(--accent-info) !important;
}

body.dark-mode pre {
    background-color: var(--dark-form) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Paginator */
body.dark-mode .pagination .page-link {
    background-color: var(--dark-form) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .pagination .page-link:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--dark-header) !important;
    border-color: var(--dark-header) !important;
}

/* =====================================================================
   SUPLEMENTO MESA DE AYUDA
   Cubre los componentes propios de Mesa que no existen en Insumos, con la
   MISMA paleta oscura y acentos semanticos, para que el tema se vea igual.
   El color semantico (verde correcto / ambar riesgo / rojo vencido) se
   mantiene y se aclara para contraste sobre fondo oscuro (punto 3 y 14).
   ===================================================================== */

/* Colores semanticos de TEXTO (KPIs del tablero, badges de SLA, etc.) que
   Bootstrap deja oscuros y quedarian con bajo contraste sobre fondo negro. */
body.dark-mode .text-success { color: var(--accent-success) !important; }
body.dark-mode .text-danger  { color: var(--accent-error)   !important; }
body.dark-mode .text-warning { color: var(--accent-warning) !important; }
body.dark-mode .text-info    { color: var(--accent-info)    !important; }
body.dark-mode .text-primary { color: #8b9cf7               !important; }
body.dark-mode .text-secondary { color: #9aa0a6             !important; }
/* bg-light + text-dark (chips de filtros): el fondo se oscurece; el texto no. */
body.dark-mode .text-dark    { color: var(--dark-text)      !important; }

/* Bordes de acento de las tarjetas KPI (border-start border-4 border-*). */
body.dark-mode .border-success { border-color: var(--accent-success) !important; }
body.dark-mode .border-danger  { border-color: var(--accent-error)   !important; }
body.dark-mode .border-warning { border-color: var(--accent-warning) !important; }
body.dark-mode .border-info    { border-color: var(--accent-info)    !important; }
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end { border-color: var(--dark-border) !important; }

/* Sidebar propio de Mesa (ademas de la regla generica de .col-md-2). */
body.dark-mode .mesa-sidebar {
    background-color: var(--dark-sidebar) !important;
    border-right: 1px solid var(--dark-border) !important;
}
body.dark-mode .mesa-sidebar .nav-link { color: #b0b0b0 !important; }
body.dark-mode .mesa-sidebar .nav-link:hover { background-color: var(--dark-hover) !important; color: var(--dark-text) !important; }
body.dark-mode .mesa-sidebar .nav-link.active { background-color: var(--dark-header) !important; color: #fff !important; }

/* El navbar de Mesa conserva su identidad de color tambien en oscuro
   (mismo criterio que Insumos: cabecera de color, no negra). */
body.dark-mode .mesa-navbar {
    background: linear-gradient(90deg, #4b3f8f 0%, #59397a 100%) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

/* Pills de prioridad y estado (clases propias de Mesa). */
body.dark-mode .mesa-prioridad-critica { background:#3a1417; color:#ffb3ba; border-color:#5a1f24; }
body.dark-mode .mesa-prioridad-alta    { background:#3a2f10; color:#ffd98a; border-color:#5a4a18; }
body.dark-mode .mesa-prioridad-media   { background:#10303a; color:#8fd6e6; border-color:#184a5a; }
body.dark-mode .mesa-prioridad-baja    { background:#2a2c2e; color:#c7ccd1; border-color:#3d4145; }
body.dark-mode .mesa-estado { border-color: var(--dark-border); }

/* Tarjetas del portal, comentarios y linea de tiempo. */
body.dark-mode .mesa-caso,
body.dark-mode .mesa-comentario { background: var(--dark-card) !important; }
body.dark-mode .mesa-comentario { border-left-color: #8b9cf7 !important; }
body.dark-mode .mesa-nota-interna {
    background: repeating-linear-gradient(45deg,#2a2712,#2a2712 10px,#332f14 10px,#332f14 20px) !important;
    border-left-color: #b8860b !important;
}
body.dark-mode .mesa-nota-interna .mesa-nota-etiqueta { color: #ffd98a; }
body.dark-mode .mesa-timeline::before { background: var(--dark-border); }
body.dark-mode .mesa-timeline-item::before { background: var(--dark-card); border-color:#8b9cf7; }

/* Barras del backlog y utilidades de fondo semantico (mantener vivas). */
body.dark-mode .bg-light.rounded { background-color: var(--dark-form) !important; }

/* Spinner y textos tenues del tablero. */
body.dark-mode .card-header.bg-white { background-color: var(--dark-table-header) !important; color: var(--dark-text) !important; }

/* ---------------------------------------------------------------
   Tarjetas navegables y chips de filtro en MODO OSCURO.
   El tema oscuro de Mesa no deriva de las variables de Bootstrap, asi
   que los colores de superficie y borde se declaran aqui de forma
   explicita en lugar de heredarlos.
   --------------------------------------------------------------- */
body.dark-mode .mesa-tarjeta-navegable:hover,
body.dark-mode .mesa-tarjeta-navegable:focus-visible {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .45) !important;
  border-color: #8b9bf0 !important;
}
body.dark-mode .mesa-tarjeta-navegable:focus-visible {
  outline-color: #8b9bf0;
}

body.dark-mode .mesa-chip {
  background: #2d2d2d;
  border-color: #444;
  color: #e0e0e0;
}
body.dark-mode .mesa-chip:hover,
body.dark-mode .mesa-chip:focus-visible {
  border-color: #ff8a8a;
  color: #ff8a8a;
  outline-color: #ff8a8a;
}

/* ---------------------------------------------------------------------
   NAVBAR, LUPA Y SIDEBAR EN MODO OSCURO.

   Solo COLOR. Ninguna regla de esta seccion puede declarar padding,
   margin, width, height, gap, font-size ni border-width: el navbar debe
   quedar pixel a pixel en el mismo sitio en ambos temas. La geometria
   vive en mesa.css.
   --------------------------------------------------------------------- */
body.dark-mode .mesa-nav-btn {
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
    background: transparent;
}
body.dark-mode .mesa-nav-btn:hover,
body.dark-mode .mesa-nav-btn:focus-visible {
    background: rgba(255, 255, 255, .16);
    border-color: #fff;
    color: #fff;
}
body.dark-mode .mesa-navbar-acciones .mesa-usuario { color: #fff; }
body.dark-mode .mesa-navbar-acciones .mesa-usuario:hover,
body.dark-mode .mesa-navbar-acciones .mesa-usuario:focus-visible {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}
/* El contador de notificaciones conserva su rojo: es una alerta, no un
   elemento de tema. El !important del `.badge` oscuro se lo llevaba. */
body.dark-mode .mesa-nav-btn .mesa-nav-contador.bg-danger {
    background-color: #c0392b !important;
    color: #fff !important;
}

/* Panel de la lupa */
body.dark-mode .mesa-busqueda-panel {
    background: var(--dark-card);
    color: var(--dark-text);
    border-color: var(--dark-border);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .55);
}
body.dark-mode .mesa-busqueda-panel .form-text { color: #a8a8a8; }

/* Barra de desplazamiento del sidebar: en oscuro necesita mas contraste
   que en claro, o desaparece contra el fondo. */
body.dark-mode .mesa-sidebar-menu {
    scrollbar-color: rgba(255, 255, 255, .34) transparent;
}
body.dark-mode .mesa-sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .32);
    background-clip: content-box;
}
body.dark-mode .mesa-sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .5);
    background-clip: content-box;
}

/* ---------------------------------------------------------------------
   RECUPERACION DE ACCESO Y CAMBIO DE CONTRASENA EN MODO OSCURO.

   Solo COLOR, como el resto de este archivo: la geometria vive en
   mesa.css y no puede declararse aqui.
   --------------------------------------------------------------------- */

/* El tema pinta los enlaces con `--dark-header` (#0d6efd), que sobre la
   tarjeta oscura queda en ~3:1 y no alcanza el minimo legible. Los
   botones-enlace del acceso usan el azul claro del tema. */
body.dark-mode .mesa-login .btn-link,
body.dark-mode #btnOlvidePassword {
    color: var(--accent-info) !important;
}
body.dark-mode .mesa-login .btn-link:hover,
body.dark-mode #btnOlvidePassword:hover {
    color: #90caf9 !important;
}

/* Indicador «contrasena temporal validada». Las utilidades -subtle de
   Bootstrap 5.3 se calculan sobre el tema claro y en oscuro quedan casi
   blancas; se declaran aqui con el verde del tema. */
body.dark-mode .bg-success-subtle {
    background-color: rgba(144, 238, 144, .12) !important;
}
body.dark-mode .border-success-subtle {
    border-color: rgba(144, 238, 144, .35) !important;
}
body.dark-mode .text-success-emphasis {
    color: var(--accent-success) !important;
}

/* ---------------------------------------------------------------------
   MODALES EN MODO OSCURO.

   El fondo de la pagina conserva los colores del tema: NO se aplica una
   segunda capa de oscurecimiento. Solo se ajusta el borde y la sombra
   del propio dialogo, que sobre fondo oscuro necesitan mas cuerpo para
   separarse. Solo COLOR, ninguna geometria.
   --------------------------------------------------------------------- */
body.dark-mode .modal-backdrop,
body.dark-mode .modal-backdrop.show,
body.dark-mode .offcanvas-backdrop,
body.dark-mode .offcanvas-backdrop.show {
    --bs-backdrop-bg: transparent;
    --bs-backdrop-opacity: 1;
    background-color: transparent !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

body.dark-mode .modal-content {
    border-color: #4a4a4a !important;
    box-shadow:
        0 .5rem 1.75rem rgba(0, 0, 0, .65),
        0 0 0 1px rgba(255, 255, 255, .06) !important;
}