/* styles.css Estilos del dashboard. Variables CSS para modo claro/oscuro, toggle via clase .dark en . */ :root { --color-fondo: #f7f7f8; --color-superficie: #ffffff; --color-texto: #1a1a1a; --color-texto-suave: #666666; --color-borde: #e0e0e0; --color-acento: #2f5d9a; --color-exito: #1f8a54; --color-alerta: #b3491f; --radio: 8px; font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; } html.dark { --color-fondo: #14171c; --color-superficie: #1d2128; --color-texto: #e9e9ea; --color-texto-suave: #a0a4ab; --color-borde: #2c313a; --color-acento: #6fa1e0; --color-exito: #5fbf8b; --color-alerta: #e0855f; } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; background: var(--color-fondo); color: var(--color-texto); } /* ---- Fix icono de calendario invisible en modo oscuro ---- */ .dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); } .mensaje-error { background: var(--color-alerta); color: white; padding: 0.75rem 1rem; text-align: center; } /* ---- Login ---- */ .pantalla-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .tarjeta-login { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 2rem; width: 320px; text-align: center; } .tarjeta-login form { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; margin-top: 1rem; } .tarjeta-login input { padding: 0.5rem; border: 1px solid var(--color-borde); border-radius: 4px; background: var(--color-fondo); color: var(--color-texto); } .tarjeta-login button { margin-top: 0.5rem; } .tarjeta-login a { display: inline-block; margin-top: 1rem; color: var(--color-acento); font-size: 0.9rem; } /* ---- Dashboard ---- */ .pantalla-dashboard { max-width: 1100px; margin: 0 auto; padding: 1.5rem; } .encabezado { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .acciones-encabezado { display: flex; gap: 0.5rem; } button { cursor: pointer; border: 1px solid var(--color-borde); background: var(--color-superficie); color: var(--color-texto); border-radius: 6px; padding: 0.5rem 0.9rem; } button[type="submit"] { background: var(--color-acento); color: white; border: none; } .tarjetas-estadisticas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .tarjeta { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 1rem; display: flex; flex-direction: column; gap: 0.3rem; } .tarjeta .etiqueta { font-size: 0.8rem; color: var(--color-texto-suave); text-transform: uppercase; } .tarjeta .valor { font-size: 1.6rem; font-weight: 600; } .fila-filtros { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 1rem; margin-bottom: 1.5rem; } .fila-filtros label { display: block; font-size: 0.75rem; color: var(--color-texto-suave); margin-bottom: 0.25rem; } .fila-filtros input, .fila-filtros select { padding: 0.4rem; border: 1px solid var(--color-borde); border-radius: 4px; background: var(--color-fondo); color: var(--color-texto); } table { width: 100%; border-collapse: collapse; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); overflow: hidden; } th, td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--color-borde); font-size: 0.9rem; } th { background: var(--color-fondo); color: var(--color-texto-suave); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; } .celda-vacia { text-align: center; color: var(--color-texto-suave); padding: 2rem; } .badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; background: var(--color-fondo); border: 1px solid var(--color-borde); } .controles-tabla { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; } .paginacion { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .info-paginacion { font-size: 0.85rem; color: var(--color-texto-suave); } .nota { color: var(--color-texto-suave); font-size: 0.9rem; } [data-solo-admin], [data-solo-trabajador] { transition: none; }