/* frontend/css/styles.css Sistema de diseño: acento naranja + botones tipo píldora + modo oscuro, según la referencia visual pedida. El modo oscuro se activa agregando la clase "dark" a (ver App.aplicarTemaGuardado / App.alternarTema en app.js) -- Tailwind (CDN) se configura con darkMode:'class' en cada página para que sus propias utilidades dark: también respondan a esa clase. Como la mayoría del HTML usa clases Tailwind sueltas (bg-white, text-gray-700, etc.) en vez de las clases custom de acá, se sobreescriben esas utilidades más comunes bajo ".dark" al final del archivo -- es la forma práctica de dar modo oscuro real sin reescribir cada página. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); :root { --color-bg: #f3f4f6; --color-surface: #ffffff; --color-surface-2: #f8fafc; --color-border: #e2e8f0; --color-text: #1e293b; --color-text-muted: #64748b; --color-accent: #f97316; /* orange-500 */ --color-accent-hover: #ea580c; /* orange-600 */ --color-header-bg: #1f2937; /* gray-800, "píldora oscura" de la referencia */ --color-header-text: #ffffff; } html.dark { --color-bg: #111214; --color-surface: #1c1d21; --color-surface-2: #202126; --color-border: #33343a; --color-text: #e5e7eb; --color-text-muted: #9ca3af; --color-accent: #f97316; --color-accent-hover: #fb923c; --color-header-bg: #f97316; /* en oscuro el acento naranja pasa a la cabecera, como en la referencia */ --color-header-text: #111214; } body { font-family: 'Inter', sans-serif; background-color: var(--color-bg); color: var(--color-text); transition: background-color 0.2s ease, color 0.2s ease; } /* Unificación de Tarjetas y Contenedores */ .card-dashboard { background: var(--color-surface); border-radius: 0.75rem; /* 12px */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); padding: 1.5rem; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .card-dashboard:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Componentes UI Reutilizables - botones tipo píldora, acento naranja */ .btn-primary { background-color: var(--color-accent); color: #ffffff; padding: 0.5rem 1.25rem; border-radius: 9999px; font-weight: 600; font-size: 0.875rem; border: none; transition: background-color 0.2s; } .btn-primary:hover { background-color: var(--color-accent-hover); } .btn-success { background-color: #16a34a; /* green-600 -- se deja distinto del acento a propósito, para no perder el significado "acción positiva/confirmar" */ color: #ffffff; padding: 0.5rem 1.25rem; border-radius: 9999px; font-weight: 600; font-size: 0.875rem; border: none; transition: background-color 0.2s; } .btn-success:hover { background-color: #15803d; /* green-700 */ } /* Botón "fantasma"/secundario tipo píldora (equivalente al outline blanco/negro de la referencia) */ .btn-outline { background-color: transparent; color: var(--color-text); border: 1.5px solid var(--color-border); padding: 0.5rem 1.25rem; border-radius: 9999px; font-weight: 600; font-size: 0.875rem; transition: border-color 0.2s, color 0.2s; } .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); } /* Etiqueta chica para desglosar un total en sus partes (ej. exceso/cinturón/ eventos totales/segmentos de velocidad en Mi Indicador) -- usa las variables de tema directamente, así se ve bien en claro y oscuro sin necesitar una regla ".dark" aparte. */ .badge-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem; border-radius: 0.5rem; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font-size: 0.75rem; font-weight: 500; white-space: nowrap; } .badge-chip strong { font-weight: 800; font-size: 0.875rem; } /* Tablas de Datos Unificadas */ .table-custom { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.8125rem; /* 13px -- más denso, consistente en cabecera y filas */ } .table-custom th { background-color: var(--color-header-bg); color: var(--color-header-text); font-weight: 600; font-size: 0.75rem; /* 12px */ text-transform: uppercase; letter-spacing: 0.02em; padding: 0.6rem 0.9rem; white-space: nowrap; } .table-custom td { padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); vertical-align: top; line-height: 1.35; /* Ninguna columna se aprieta ni envuelve el texto en varias líneas cortas -- la tabla se ensancha lo que haga falta y el contenedor (overflow-x-auto, ver renderTable en app.js) scrollea horizontal. Vista "360": se ve el contenido completo, no una versión comprimida. */ white-space: nowrap; } .table-custom tbody tr:nth-child(even) { background-color: var(--color-surface-2); } .table-custom tr:hover { background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); } /* Columnas de contenido corto (Mes, Semana, Nro Eventos, Status, etc.): se ajustan a su contenido en vez de repartirse el ancho por igual, para que las columnas de texto largo (Acciones, Responsable) se queden con el espacio real que sobra. white-space:nowrap ya es la base de toda celda (ver .table-custom td arriba); acá solo hace falta el width:1%. */ .table-custom .col-nowrap { width: 1%; } .chart-container { position: relative; height: 300px; width: 100%; } /* Toggle de tema claro/oscuro (ver App.renderNav en app.js) */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 9999px; border: 1.5px solid var(--color-border); background: transparent; color: var(--color-text-muted); font-size: 0.75rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); } /* ===================================================================== MODO OSCURO -- overrides de las utilidades Tailwind sueltas que ya usa el HTML existente (bg-white, text-gray-*, border-gray-*, bg-gray-100). Es la forma práctica de dar dark mode real sin reescribir cada página clase por clase; !important es intencional acá, es una capa de tema global por encima de utilidades de un solo uso. ===================================================================== */ html.dark { color-scheme: dark; } html.dark .bg-white { background-color: var(--color-surface) !important; } html.dark .bg-gray-50, html.dark .bg-gray-100 { background-color: var(--color-bg) !important; } html.dark .bg-slate-50 { background-color: var(--color-surface-2) !important; } html.dark .text-gray-800, html.dark .text-gray-900 { color: var(--color-text) !important; } html.dark .text-gray-700, html.dark .text-gray-600 { color: var(--color-text-muted) !important; } html.dark .text-gray-500, html.dark .text-gray-400 { color: var(--color-text-muted) !important; } html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300 { border-color: var(--color-border) !important; } html.dark .shadow, html.dark .shadow-lg, html.dark .shadow-md, html.dark .shadow-2xl { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important; } html.dark input, html.dark select, html.dark textarea { background-color: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border) !important; } html.dark ::placeholder { color: var(--color-text-muted); opacity: 0.7; } /* Colores "oscuros sobre blanco" (headers de sección, badges) que se usan en toda la app -- ej. text-purple-800 para Comportamientos, text-green-800 para OK/aprobado, text-red-800 para crítico/rechazado, text-amber-800 para pendiente. Contra el fondo casi negro del tema oscuro quedaban invisibles; se aclaran manteniendo el mismo tono para no perder el significado del color. */ html.dark .text-purple-700, html.dark .text-purple-800, html.dark .text-purple-900 { color: #d8b4fe !important; } html.dark .text-blue-800, html.dark .text-blue-900 { color: #93c5fd !important; } html.dark .text-green-700, html.dark .text-green-800, html.dark .text-green-900 { color: #86efac !important; } html.dark .text-red-700, html.dark .text-red-800, html.dark .text-red-900 { color: #fca5a5 !important; } html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900, html.dark .text-yellow-700, html.dark .text-yellow-800, html.dark .text-yellow-900 { color: #fcd34d !important; } /* Badges con fondo pastel + texto oscuro (bg-*-100 + text-*-800, patrón usado en toda la app para "Status"/"Nivel"/etc.) -- se oscurece el fondo y se aclara el texto para mantener el mismo código de color con buen contraste, en vez de texto claro sobre fondo claro. */ html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.18) !important; } html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18) !important; } html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.18) !important; } html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.18) !important; } html.dark .bg-amber-100, html.dark .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.18) !important; } /* Tarjetas "bg-*-50 + border-*-100 + text-*-800/900" (Dashboard, Rankings, Mi Indicador, Panel, etc.) -- mismo problema que las badges de arriba pero al revés: el texto (text-*-800/900) ya se aclaraba para el fondo oscuro, pero el fondo bg-*-50 nunca se oscurecía, así que quedaba texto claro sobre un fondo pastel casi blanco (ilegible, reportado con captura 25/08/2026). Mismo criterio que bg-*-100, un poco más sutil (bg-*-50 es más pálido que bg-*-100 también en modo claro). */ html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; } html.dark .bg-amber-50, html.dark .bg-yellow-50 { background-color: rgba(245, 158, 11, 0.12) !important; } html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.12) !important; } html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; } html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.12) !important; } html.dark .border-blue-100 { border-color: rgba(59, 130, 246, 0.35) !important; } html.dark .border-amber-100, html.dark .border-yellow-100 { border-color: rgba(245, 158, 11, 0.35) !important; } html.dark .border-green-100 { border-color: rgba(34, 197, 94, 0.35) !important; } html.dark .border-red-100 { border-color: rgba(239, 68, 68, 0.35) !important; } html.dark .border-purple-100 { border-color: rgba(168, 85, 247, 0.35) !important; } /* Los acentos azul/verde de marca (login, nav, secciones) pasan a naranja; el azul/púrpura que distingue Telemetría de Comportamientos en paneles y gráficos NO se toca -- ese color es semántico (identifica la categoría de datos), cambiarlo ahí generaría confusión, no es parte de este pedido. */ html.dark .bg-blue-600, html.dark .bg-blue-700 { background-color: var(--color-accent) !important; } html.dark .bg-blue-600:hover, html.dark .bg-blue-700:hover, html.dark .hover\:bg-blue-700:hover { background-color: var(--color-accent-hover) !important; } html.dark .text-blue-600, html.dark .text-blue-700 { color: var(--color-accent) !important; }