/* =========================================================
   MODO OSCURO INTEGRAL - TECHFIX (ELEGANCE V3)
   ========================================================= */

/* 1. FONDO Y TEXTO GENERAL */
body.dark-mode {
  background-color: #020617 !important; /* Negro Azulado Profundo */
  color: #cbd5e1 !important; /* Texto Gris Claro Base */
}

/* -----------------------------------------
   2. HEADER, NAV Y MENÚS
   ----------------------------------------- */
body.dark-mode .main-header,
body.dark-mode .navbar,
body.dark-mode .mobile-menu {
  background-color: #1e293b !important; /* Slate 800 */
  border-bottom: 1px solid #334155 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  color: white !important;
}

/* Enlaces del Menú */
body.dark-mode .nav-links a,
body.dark-mode .mobile-menu a {
  color: #94a3b8 !important; /* Gris medio */
  border-bottom-color: #334155 !important;
}
body.dark-mode .nav-links a:hover,
body.dark-mode .mobile-menu a:hover {
  color: #60a5fa !important; /* Azul brillante al pasar mouse */
  background-color: rgba(59, 130, 246, 0.1) !important;
}

/* Botones Header */
body.dark-mode .btn-nav,
body.dark-mode .search-btn {
  background-color: #3b82f6 !important; /* Azul TechFix */
  color: white !important;
  border: none !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3) !important;
}

body.dark-mode .theme-btn {
  color: #fbbf24 !important; /* Amarillo Sol */
  border-color: #475569 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Hamburguesa (Barras blancas) */
body.dark-mode .hamburger-btn .bar {
  background-color: #e2e8f0 !important;
}

/* -----------------------------------------
   3. TARJETAS Y PANELES (ADIÓS AL FONDO BLANCO)
   ----------------------------------------- */
body.dark-mode .card,
body.dark-mode .tracking-card,
body.dark-mode .card-panel,      /* Admin */
body.dark-mode .login-card,      /* Login */
body.dark-mode .stat-card,       /* Dashboard */
body.dark-mode .photos-box,      /* Fotos */
body.dark-mode .contact-blue-box /* Contacto */ {
  background-color: #1e293b !important; /* Gris Azulado Oscuro */
  border-color: #334155 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  color: #e2e8f0 !important;
}

/* -----------------------------------------
   4. BUSCADOR (OVALADO Y OSCURO)
   ----------------------------------------- */
body.dark-mode .search-box {
  background-color: #1e293b !important; /* Fondo oscuro */
  border: 1px solid #475569 !important;
  border-radius: 50px !important;
}
body.dark-mode .search-input {
  background-color: transparent !important; /* Vital */
  color: #ffffff !important;
  border: none !important;
}
body.dark-mode .search-input::placeholder {
  color: #64748b !important;
}

/* Parche para Autofill de Chrome */
body.dark-mode input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #1e293b inset !important;
  -webkit-text-fill-color: white !important;
  border-radius: 50px !important;
}

/* -----------------------------------------
   5. TEXTOS Y TÍTULOS (VISIBILIDAD)
   ----------------------------------------- */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode strong,
body.dark-mode b,
body.dark-mode .tracking-title,
body.dark-mode .login-title,
body.dark-mode .page-title {
  color: #f8fafc !important; /* Blanco Brillante */
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode label,
body.dark-mode .admin-label,
body.dark-mode .contact-text,
body.dark-mode .login-subtitle {
  color: #cbd5e1 !important; /* Gris claro legible */
}

/* Textos Azules (Neón suave) */
body.dark-mode .tech-label,
body.dark-mode .contact-phone,
body.dark-mode .contact-whatsapp,
body.dark-mode .card-icon i,
body.dark-mode .details-table td i {
  color: #60a5fa !important;
}

/* -----------------------------------------
   6. BITÁCORA Y COMENTARIOS (TU PEDIDO)
   ----------------------------------------- */
body.dark-mode .tech-comment-box {
  background-color: #0f172a !important; /* Fondo más oscuro que la tarjeta */
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
}

/* Texto del comentario */
body.dark-mode .tech-comment-box p {
  color: #e2e8f0 !important; /* Blanco suave para leer bien */
  font-weight: 400 !important;
}

/* Nombre del técnico y fecha en la bitácora */
body.dark-mode .tech-comment-box strong {
  color: #60a5fa !important; /* Nombre en Azul */
}
body.dark-mode .tech-comment-box span {
  color: #94a3b8 !important; /* Fecha en Gris */
}

/* -----------------------------------------
   7. ALERTA DE NO AUTORIZADO (TU PEDIDO)
   ----------------------------------------- */
/* Cambiamos el rosa por rojo oscuro elegante */
body.dark-mode div[style*="background: #fee2e2"] {
  background-color: #450a0a !important; /* Rojo muy oscuro (Sangre) */
  border: 1px solid #7f1d1d !important; /* Borde rojo oscuro */
  color: #fca5a5 !important; /* Texto rojo claro */
}
body.dark-mode div[style*="background: #fee2e2"] i {
  color: #f87171 !important; /* Icono rojo brillante */
}
body.dark-mode div[style*="background: #fee2e2"] h3 {
  color: #fecaca !important; /* Título casi blanco rojizo */
}

/* -----------------------------------------
   8. TABLAS Y LISTAS
   ----------------------------------------- */
body.dark-mode .tracking-header,
body.dark-mode .photos-header,
body.dark-mode .details-table th {
  background-color: #020617 !important; /* Encabezado más oscuro */
  color: #94a3b8 !important;
  border-bottom-color: #334155 !important;
}

body.dark-mode .details-table td {
  color: #e2e8f0 !important;
  border-bottom-color: #334155 !important;
}

body.dark-mode .photos-content {
  background-color: #0f172a !important;
  color: #64748b !important;
}

/* -----------------------------------------
   9. INPUTS DE FORMULARIOS (ADMIN)
   ----------------------------------------- */
body.dark-mode .admin-input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #0f172a !important;
  border: 1px solid #475569 !important;
  color: #ffffff !important;
}

/* -----------------------------------------
   10. TIMELINE (LINEA DE TIEMPO)
   ----------------------------------------- */
body.dark-mode .step-icon {
  background-color: #0f172a !important;
  border-color: #475569 !important;
  color: #64748b !important;
}
body.dark-mode .step-item.active .step-icon {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: white !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.4) !important;
}
body.dark-mode .step-label {
  color: #64748b !important;
}
body.dark-mode .step-item.active .step-label {
  color: #60a5fa !important;
}
body.dark-mode .timeline-line {
  background-color: #334155 !important;
}

/* -----------------------------------------
   11. HERO (FONDO AZUL DEGRADADO)
   ----------------------------------------- */
body.dark-mode .hero {
  background: linear-gradient(135deg, #020617 0%, #1e293b 100%) !important;
  border-bottom: 1px solid #334155 !important;
}
body.dark-mode .hero h1 {
  text-shadow: none !important;
}

/* -----------------------------------------
   12. FOOTER
   ----------------------------------------- */
body.dark-mode .main-footer {
  background-color: #020617 !important;
  border-top-color: #1e40af !important;
  color: #64748b !important;
}

/* --- CORRECCIÓN BITÁCORA (COMENTARIOS TÉCNICOS) --- */

/* 1. Contenedor Principal de la Bitácora */
body.dark-mode .tech-comment-box {
  background-color: #1e293b !important; /* Fondo gris azulado */
  border: 1px solid #334155 !important; /* Borde sutil */
}

/* 2. Título de la Bitácora */
body.dark-mode .tech-comment-box h3,
body.dark-mode .tech-comment-box .tech-label {
  color: #60a5fa !important; /* Azul claro neón */
  border-bottom-color: #334155 !important;
}

/* 3. CADA MENSAJE INDIVIDUAL (El bloque gris de la foto) */
/* Asumiendo que usas un div con background #f8fafc en el HTML original */
body.dark-mode .tech-comment-box div[style*="background: #f8fafc"],
body.dark-mode .tech-comment-box .comment-item {
  background-color: #0f172a !important; /* Fondo muy oscuro para cada mensaje */
  border-color: #334155 !important;
  border-left-color: #3b82f6 !important; /* Borde izquierdo azul brillante */
  color: #e2e8f0 !important; /* Texto blanco suave */
}

/* 4. Textos dentro del mensaje */
body.dark-mode .tech-comment-box strong {
  color: #60a5fa !important; /* Nombre del técnico en azul */
}
body.dark-mode .tech-comment-box span {
  color: #94a3b8 !important; /* Fecha en gris */
}
body.dark-mode .tech-comment-box p {
  color: #e2e8f0 !important; /* El mensaje en blanco suave */
}

/* --- PAGINACIÓN OSCURA --- */
body.dark-mode .pagination-btn {
  background-color: #1e293b; /* Fondo oscuro */
  border-color: #334155;
  color: #cbd5e1;
}
body.dark-mode .pagination-btn:hover:not(.disabled) {
  background-color: #0f172a;
  color: #60a5fa; /* Azul claro */
  border-color: #60a5fa;
}
body.dark-mode .pagination-btn.active {
  background-color: #3b82f6; /* Azul activo */
  color: white;
  border-color: #3b82f6;
}
body.dark-mode .pagination-btn.disabled {
  background-color: #0f172a;
  opacity: 0.3;
}