/* Estilos para modo oscuro */

/* Variables de colores para modo oscuro */
:root.dark-mode {
    --bg-color: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #2d2d2d;
    --text-color: #e0e0e0;
    --text-muted: #aaaaaa;
    --border-color: #444444;
    --primary-color: #3d85c6;
    --primary-hover: #5b9bd5;
    --success-color: #57bb8a;
    --danger-color: #e06666;
    --warning-color: #f9cb9c;
    --info-color: #9fc5e8;
    --card-bg: #1e1e1e;
    --input-bg: #2d2d2d;
    --input-border: #444444;
    --dropdown-bg: #2d2d2d;
    --navbar-bg: #1a1a1a;
    --footer-bg: #1a1a1a;
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* Estilos generales */
.dark-mode body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Navbar */
.dark-mode .navbar {
    background-color: var(--navbar-bg) !important;
}

/* Navbar fijo en modo oscuro */
.dark-mode .navbar.fixed-top {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Efecto al hacer scroll en modo oscuro */
.dark-mode .navbar.fixed-top.navbar-scrolled {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    background-color: rgba(26, 26, 26, 0.98) !important;
}

.dark-mode .navbar-dark .navbar-nav .nav-link {
    color: var(--text-color);
}

.dark-mode .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
}

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

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: var(--bg-tertiary);
    color: var(--text-color);
}

.dark-mode .dropdown-divider {
    border-top-color: var(--border-color);
}

/* Cards */
.dark-mode .card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .card-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
}

.dark-mode .card-footer {
    background-color: var(--bg-tertiary);
    border-top-color: var(--border-color);
}

/* Tablas */
.dark-mode .table {
    color: var(--text-color);
}

.dark-mode .table th {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

.dark-mode .table td {
    border-color: var(--border-color);
}

.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Formularios */
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-color);
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--primary-color);
    color: var(--text-color);
}

.dark-mode .form-text {
    color: var(--text-muted);
}

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

/* Botones */
.dark-mode .btn-outline-secondary {
    color: var(--text-color);
    border-color: var(--border-color);
}

.dark-mode .btn-outline-secondary:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-color);
}

.dark-mode .btn-light {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* Alertas */
.dark-mode .alert {
    border-color: var(--border-color);
}

.dark-mode .alert-info {
    background-color: rgba(159, 197, 232, 0.15);
    color: var(--info-color);
}

.dark-mode .alert-success {
    background-color: rgba(87, 187, 138, 0.15);
    color: var(--success-color);
}

.dark-mode .alert-danger {
    background-color: rgba(224, 102, 102, 0.15);
    color: var(--danger-color);
}

.dark-mode .alert-warning {
    background-color: rgba(249, 203, 156, 0.15);
    color: var(--warning-color);
}

/* Badges */
.dark-mode .badge.bg-secondary {
    background-color: var(--bg-tertiary) !important;
}

/* Footer */
.dark-mode footer {
    background-color: var(--footer-bg) !important;
}

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

/* Modales */
.dark-mode .modal-content {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .modal-header {
    border-bottom-color: var(--border-color);
}

.dark-mode .modal-footer {
    border-top-color: var(--border-color);
}

/* Paginación */
.dark-mode .pagination .page-link {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Listas */
.dark-mode .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* Tooltips y Popovers */
.dark-mode .tooltip-inner {
    background-color: var(--bg-tertiary);
}

.dark-mode .popover {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .popover-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
}

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

/* Estilos específicos para componentes de Tech Gestión */
.dark-mode .estado-activo {
    color: var(--success-color);
}

.dark-mode .estado-vencido {
    color: var(--danger-color);
}

.dark-mode .estado-pausa {
    color: var(--warning-color);
}

/* Selector de tema */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 48px;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    background-color: white;
    bottom: 4px;
    content: "";
    height: 16px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 16px;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(24px);
}

.theme-icon {
    margin-right: 8px;
    font-size: 16px;
}

.dark-mode .theme-icon-light {
    display: none;
}

.theme-icon-dark {
    display: none;
}

.dark-mode .theme-icon-dark {
    display: inline-block;
}