/* ══════════════════════════════════════════════════════════════════ MyGest — estilos propios Los colores se definen como tokens para el tema claro y se redefinen en oscuro. Bootstrap 5.3 conmuta con el atributo data-bs-theme del elemento (lo pone static/js/tema.js). ══════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; --gx-radio: .5rem; --gx-fondo: #f5f6f8; --gx-superficie: #fff; --gx-borde: #e4e6eb; --gx-borde-suave: #eef0f3; --gx-tenue: #6b7280; --gx-fila-hover: #f0f4ff; --gx-sombra: 0 1px 2px rgba(16, 24, 40, .04); --gx-punto: #0d6efd; --gx-punto-halo: #fff; --gx-vencido: #b42318; --gx-pronto: #b54708; } [data-bs-theme="dark"] { color-scheme: dark; /* Variables propias de Bootstrap, para que tarjetas, desplegables, modales y tablas compartan exactamente la misma paleta. */ --bs-body-bg: #0f1319; --bs-body-color: #dfe3e8; --bs-emphasis-color: #fff; --bs-border-color: #2a313c; --bs-secondary-bg: #181d25; --bs-tertiary-bg: #151b24; --bs-secondary-color: rgba(223, 227, 232, .70); --gx-fondo: #0f1319; --gx-superficie: #181d25; --gx-borde: #2a313c; --gx-borde-suave: #222833; --gx-tenue: #98a2b3; --gx-fila-hover: #212a38; --gx-sombra: 0 1px 2px rgba(0, 0, 0, .4); --gx-punto: #6ea8fe; --gx-punto-halo: #181d25; --gx-vencido: #fda29b; --gx-pronto: #fdb022; } body { background: var(--gx-fondo); font-size: .94rem; transition: background-color .15s ease-in-out, color .15s ease-in-out; } /* ── Tarjetas ─────────────────────────────────────────────────────── */ .card { --bs-card-bg: var(--gx-superficie); border: 1px solid var(--gx-borde); border-radius: var(--gx-radio); box-shadow: var(--gx-sombra); } .card-header { background: var(--gx-superficie); border-bottom: 1px solid var(--gx-borde-suave); font-weight: 600; } /* ── Tablas ───────────────────────────────────────────────────────── */ .table > :not(caption) > * > * { padding: .55rem .6rem; } .table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; color: var(--gx-tenue); font-weight: 600; } /* ── Indicadores del panel ────────────────────────────────────────── */ .kpi { border-radius: var(--gx-radio); background: var(--gx-superficie); padding: 1rem 1.1rem; border: 1px solid var(--gx-borde); } .kpi .valor { font-size: 1.75rem; font-weight: 650; line-height: 1.1; } .kpi .etiqueta { color: var(--gx-tenue); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; } .badge { font-weight: 550; } /* ── Línea de tiempo de actuaciones ───────────────────────────────── */ .linea-tiempo { list-style: none; margin: 0; padding-left: 1.4rem; border-left: 2px solid var(--gx-borde); } .linea-tiempo > li { position: relative; padding: 0 0 1.1rem .4rem; } .linea-tiempo > li::before { content: ""; position: absolute; left: -1.72rem; top: .35rem; width: .62rem; height: .62rem; border-radius: 50%; background: var(--gx-punto); border: 2px solid var(--gx-punto-halo); } /* ── Filas pinchables ─────────────────────────────────────────────── */ .tabla-clic tbody tr { cursor: pointer; } .tabla-clic tbody tr:hover > * { background-color: var(--gx-fila-hover); } /* ── Avisos de plazos ─────────────────────────────────────────────── */ .vencido { color: var(--gx-vencido); font-weight: 600; } .pronto { color: var(--gx-pronto); font-weight: 600; } /* ── Selector de tema ─────────────────────────────────────────────── */ .gx-tema-flotante { position: fixed; top: .75rem; right: .75rem; z-index: 1030; } .gx-tema-opcion.activa { font-weight: 600; } .gx-tema-opcion.activa .gx-tema-marca { visibility: visible; } .gx-tema-marca { visibility: hidden; } /* ── Impresión: siempre en claro, cueste lo que cueste ────────────── */ @media print { footer, .no-imprimir, .gx-tema, .gx-tema-flotante { display: none !important; } html { color-scheme: light !important; } body { background: #fff !important; color: #000 !important; } .card, .kpi { background: #fff !important; border-color: #ccc !important; } .table thead th { color: #444 !important; } }