/* ============================================================ TEMA OSCURO — Bitácora AI Se activa con (switch del sidebar). Paleta navy/slate, en línea con el sidebar. Rollout por etapas: [x] index [ ] avances [ ] admin [ ] asistencia ============================================================ */ html.theme-dark { --d-canvas: #0b1220; /* fondo de página (un poco más oscuro que el sidebar) */ --d-surface: #1e293b; /* tarjetas / containers */ --d-surface-2: #273449; /* superficies anidadas, hovers, headers de tabla */ --d-surface-3: #334155; /* inputs, bordes activos */ --d-text: #e2e8f0; /* texto principal */ --d-text-muted: #94a3b8; /* texto secundario */ --d-heading: #a5b4fc; /* títulos / acentos (indigo claro, legible) */ --d-border: rgba(148,163,184,0.18); --d-input-bg: #0f172a; --d-accent: #3b82f6; } /* ---------- Shell global (todas las páginas con sidebar) ---------- */ html.theme-dark body.has-sidebar { background: var(--d-canvas) !important; color: var(--d-text); } /* Scrollbar sutil en oscuro */ html.theme-dark ::-webkit-scrollbar { width: 11px; height: 11px; } html.theme-dark ::-webkit-scrollbar-track { background: var(--d-canvas); } html.theme-dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; } html.theme-dark ::-webkit-scrollbar-thumb:hover { background: #475569; } /* ============================================================ INDEX.HTML (Bitácoras) ============================================================ */ /* Tarjeta principal */ html.theme-dark .container { background: var(--d-surface) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important; } /* Header con degradado: navy en vez de morado */ html.theme-dark .header { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; } html.theme-dark .header h1, html.theme-dark .header p { color: #f1f5f9 !important; } html.theme-dark .badge { background: rgba(255,255,255,0.12) !important; color: #e2e8f0 !important; } /* Pestañas */ html.theme-dark .tabs { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; } html.theme-dark .tab { color: var(--d-text-muted) !important; } html.theme-dark .tab:hover { color: #fff !important; background: rgba(148,163,184,0.14) !important; } html.theme-dark .tab.active { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; color: #fff !important; } /* Títulos de sección y labels (acento) */ html.theme-dark .form-section h2, html.theme-dark .form-group label, html.theme-dark .bitacora-card h3, html.theme-dark .download-section h2, html.theme-dark .adjunto-info strong, html.theme-dark .maquinaria-item h4 { color: var(--d-heading) !important; } html.theme-dark .form-section h2 { border-bottom-color: var(--d-border) !important; } /* Inputs / textarea / select */ html.theme-dark .form-group input, html.theme-dark .form-group textarea, html.theme-dark .form-group select, html.theme-dark .download-form .form-group input { background: var(--d-input-bg) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } html.theme-dark .form-group input:focus, html.theme-dark .form-group textarea:focus, html.theme-dark .form-group select:focus { border-color: var(--d-accent) !important; } html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: #64748b !important; } /* Superficies grises → slate oscuro */ html.theme-dark .maquinaria-section, html.theme-dark .filters, html.theme-dark .audio-player, html.theme-dark .download-section, html.theme-dark .bitacora-card, html.theme-dark .link-box { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; } html.theme-dark .maquinaria-item, html.theme-dark .adjunto-item { background: var(--d-surface) !important; border-left-color: var(--d-accent) !important; } html.theme-dark .bitacora-card { border-left-color: var(--d-accent) !important; } html.theme-dark .bitacora-card:hover { background: var(--d-surface-3) !important; } html.theme-dark .bitacora-card p, html.theme-dark .adjunto-info small { color: var(--d-text-muted) !important; } /* Etiqueta de archivo (dashed) */ html.theme-dark .file-label { background: var(--d-surface-2) !important; border-color: var(--d-accent) !important; color: var(--d-text) !important; } html.theme-dark .file-label:hover { background: var(--d-surface-3) !important; } html.theme-dark .file-label.has-file { background: rgba(59,130,246,0.12) !important; } /* Modal */ html.theme-dark .modal-box { background: var(--d-surface) !important; } html.theme-dark .modal-box h3 { color: #f1f5f9 !important; } html.theme-dark .modal-box p { color: var(--d-text-muted) !important; } html.theme-dark .btn-modal-close { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } /* Transcripción / fuente audio (mantener intención de color, sobre fondo oscuro) */ html.theme-dark .transcripcion-box { background: rgba(14,165,233,0.10) !important; color: #bae6fd !important; border-color: rgba(125,211,252,0.3) !important; } html.theme-dark .firma-estado-info { background: rgba(14,165,233,0.10) !important; color: #bae6fd !important; border-color: rgba(125,211,252,0.3) !important; } /* Texto genérico de párrafos sueltos */ html.theme-dark .bitacoras-list > p { color: var(--d-text-muted) !important; } /* ============================================================ GLOBAL: inputs y tablas (compartido por todas las páginas) ============================================================ */ html.theme-dark .form-group input, html.theme-dark .form-group select, html.theme-dark .form-group textarea, html.theme-dark .filtros input, html.theme-dark .download-form .form-group input { background: var(--d-input-bg) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } html.theme-dark .form-group input:focus, html.theme-dark .form-group select:focus, html.theme-dark .form-group textarea:focus { border-color: var(--d-accent) !important; background: var(--d-input-bg) !important; } html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: #64748b !important; } html.theme-dark .modal { background: var(--d-surface) !important; } /* Tablas: solo las envueltas en .table-wrapper (admin/asistencia). La tabla de reporte (Resumen por Actividad) NO usa .table-wrapper → queda clara. */ html.theme-dark .table-wrapper thead th { background: var(--d-surface-2) !important; color: var(--d-text) !important; } html.theme-dark .table-wrapper tbody td { border-bottom-color: var(--d-border) !important; color: var(--d-text) !important; } html.theme-dark .table-wrapper tbody tr { border-bottom-color: var(--d-border) !important; } html.theme-dark .table-wrapper tbody tr:hover { background: var(--d-surface-3) !important; } /* Títulos de página invertidos a claro en modo oscuro (admin: "Panel de Administración" · avances: "Avances de Proyectos") */ html.theme-dark .page-title, html.theme-dark .page-header h1 { color: var(--d-text) !important; } /* ============================================================ AVANCES.HTML ============================================================ */ html.theme-dark .stat-card, html.theme-dark .filters-bar, html.theme-dark .project-card, html.theme-dark .detail-header, html.theme-dark .section-panel { background: var(--d-surface) !important; border-color: var(--d-border) !important; box-shadow: 0 4px 18px rgba(0,0,0,0.35) !important; } html.theme-dark .detail-progress, html.theme-dark .toggle-avances-btn { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; } html.theme-dark .progress-bar-bg { background: var(--d-surface-3) !important; } html.theme-dark .activity-item:hover, html.theme-dark .bitacora-mini:hover, html.theme-dark .toggle-avances-btn:hover, html.theme-dark .toggle-avances-btn.has-records:hover { background: var(--d-surface-3) !important; } /* Texto */ html.theme-dark .project-card-title, html.theme-dark .detail-title, html.theme-dark .meta-item .meta-value, html.theme-dark .section-panel-header h2, html.theme-dark .activity-name, html.theme-dark .modal-header h2 { color: var(--d-text) !important; } html.theme-dark .project-card-info p, html.theme-dark .project-card-info strong, html.theme-dark .progress-label, html.theme-dark .avance-fecha, html.theme-dark .avance-desc, html.theme-dark .detail-subtitle, html.theme-dark .stat-card .stat-label, html.theme-dark .empty-state h3 { color: var(--d-text-muted) !important; } html.theme-dark .modal-close:hover { background: var(--d-surface-3) !important; color: var(--d-text) !important; } /* Cajas con estilo inline #f8f9fa */ html.theme-dark #filtroAvancesBar, html.theme-dark #pMontoVentaLocked, html.theme-dark #pMontoImprevistoLocked, html.theme-dark #editAvanceActividadInfo, html.theme-dark #avanceActividadInfo { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } /* ============================================================ ADMIN.HTML ============================================================ */ html.theme-dark .stat-card, html.theme-dark .panel { background: var(--d-surface) !important; border-color: var(--d-border) !important; } html.theme-dark .panel-header h2, html.theme-dark .modal h2 { color: var(--d-text) !important; } html.theme-dark .btn-cancel { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } html.theme-dark .btn-cancel:hover { background: var(--d-surface-3) !important; } /* ============================================================ ASISTENCIA.HTML ============================================================ */ html.theme-dark .card { background: var(--d-surface) !important; box-shadow: 0 2px 14px rgba(0,0,0,0.35) !important; } html.theme-dark .location-status, html.theme-dark .filtros { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; } html.theme-dark .card h2, html.theme-dark .registros-header h2, html.theme-dark .location-status .loc-info strong { color: var(--d-text) !important; } html.theme-dark .btn-outline { background: transparent !important; color: #93c5fd !important; border-color: #93c5fd !important; } /* ============================================================ REPORTE.HTML (vista interna) SOLO áreas sin gráfico: .fr (resumen), .pic (info), .sc (tabla), modal. Las tarjetas con gráficos (.cc donut/gantt, .cs-container curva S) se dejan CLARAS tal cual están ahora, para no afectar las gráficas. ============================================================ */ html.theme-dark body { background: var(--d-canvas) !important; } html.theme-dark .fr, html.theme-dark .pic, html.theme-dark .modal-box { background: var(--d-surface) !important; box-shadow: 0 4px 18px rgba(0,0,0,0.35) !important; } /* Texto — info de proyecto */ html.theme-dark .pic .pt, html.theme-dark .pic .mv { color: var(--d-text) !important; } html.theme-dark .pic .ps, html.theme-dark .pic .ml { color: var(--d-text-muted) !important; } /* Texto — resumen por fechas */ html.theme-dark .fr .frt, html.theme-dark .fr .tal { color: var(--d-text) !important; } html.theme-dark .fr .frs, html.theme-dark .fr .frl { color: var(--d-text-muted) !important; } html.theme-dark .fr .fri, html.theme-dark .fr .ta { background: var(--d-input-bg) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } html.theme-dark .fr .fri:focus, html.theme-dark .fr .ta:focus { border-color: var(--d-accent) !important; } /* Select de reportes guardados */ html.theme-dark #selectReportes { background: var(--d-input-bg) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } /* Navegación / modal */ html.theme-dark .back-btn { color: #93c5fd !important; } html.theme-dark .back-btn:hover { color: #bfdbfe !important; } html.theme-dark .modal-msg { color: var(--d-text-muted) !important; } html.theme-dark .modal-btn-cancel { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } html.theme-dark .modal-btn-cancel:hover { background: var(--d-surface-3) !important; } /* Caja "Reporte seleccionado" (estilos inline verdes → dark) */ html.theme-dark #linkReporteActual { background: rgba(16, 185, 129, 0.10) !important; border-color: rgba(16, 185, 129, 0.35) !important; } html.theme-dark #linkReporteActual > div:first-child { color: #6ee7b7 !important; } html.theme-dark #urlReporteActual { background: var(--d-input-bg) !important; color: var(--d-text) !important; }