/* ========================================================================== TEMA (REP-4): las TRES paletas de la aplicacion en un solo sitio. La cargan todos los layouts (_Layout, _LayoutMovil, _LayoutConductor y la pagina publica /Entrega) ANTES de cualquier otra hoja. El tema es el atributo data-theme de : (sin atributo) claro, el de siempre; es el que arranca sin preferencia guardada data-theme="intermedio" papel calido: ni blanco puro ni negro data-theme="dark" oscuro (lleva ademas data-bs-theme="dark" para Bootstrap) Lo pone js/tema-inicio.js en el leyendo localStorage['tema'] y lo cambia el selector de tres posiciones (js/tema.js, partial _SelectorTema). Al imprimir siempre se fuerza claro. REGLA: ningun color de fondo, texto o borde va suelto en hexadecimal en el resto de hojas o vistas; todo pasa por estas variables, y cada una tiene su valor en las tres paletas. Los unicos fijos son los de marca (--persycom-*, --*-solid, --accent-solid), pensados para fondo con texto blanco. ========================================================================== */ :root { color-scheme: light; /* Neutros. El tema oscuro (mas abajo) redefine TODAS estas variables: cualquier color de fondo, texto o borde de la aplicacion tiene que pasar por una de ellas, nunca ir suelto en hexadecimal, o se quedara claro cuando el resto se oscurezca. */ --bg: #f4f5f7; --panel: #ffffff; --soft: #f3f4f6; /* fondo gris suave: hover, cabeceras de seccion */ --soft-2: #f9fafb; /* gris casi blanco: cajas secundarias */ --line: #e5e7eb; --line-2: #d1d5db; /* bordes que tienen que verse mas que --line */ --text: #1f2937; --text-strong: #0f172a; /* titulos y cifras */ --text-2: #374151; /* texto secundario, mas oscuro que --muted */ --muted: #6b7280; --muted-2: #9ca3af; /* texto terciario: fechas, ayudas, enlaces discretos */ --ink: #0f172a; /* FONDO oscuro con texto blanco encima (pastillas, toasts) */ --ink-2: #374151; --on-ink: #f8fafc; /* texto encima de --ink; igual en los dos temas */ --overlay: rgba(255,255,255,.8); /* velo translucido sobre fondos tintados */ --wash: rgba(254,242,242,.6); /* lavado de marca de los paneles */ --wash-hover: rgba(254,226,226,.85); /* Marca. --persycom-red/-dark NO cambian con el tema: son el rojo de los botones principales. --accent si se aclara en oscuro, porque ademas se usa como TEXTO. */ --persycom-red: #e32b36; --persycom-dark: #c1222c; --accent: var(--persycom-red); --accent-2: var(--persycom-dark); --accent-solid: var(--persycom-red); /* FONDO rojo con texto blanco: no cambia con el tema */ /* Estados: -bg/-bg-2 fondos tenues, -line bordes, -text texto sobre esos fondos, -solid color saturado para FONDO con texto blanco (no cambia con el tema), y el nombre a secas para texto/iconos sueltos sobre el panel. */ --ok: #166534; --ok-text: #166534; --ok-bg: #f0fdf4; --ok-bg-2: #dcfce7; --ok-line: #bbf7d0; --ok-solid: #16a34a; --ok-solid-2: #15803d; --danger: #dc2626; --danger-text: #991b1b; --danger-bg: #fef2f2; --danger-bg-2: #fee2e2; --danger-line: #fecaca; --danger-solid: #dc2626; --warn: #f59e0b; --warn-text: #92400e; --warn-bg: #fffbeb; --warn-bg-2: #fef3c7; --warn-line: #fcd34d; --warn-solid: #d97706; --info: #2563eb; --info-text: #1e40af; --info-bg: #eff6ff; --info-bg-2: #dbeafe; --info-line: #bfdbfe; --info-solid: #2563eb; --violet-bg: #f5f2ff; --violet-line: #ddd3fb; --violet-text: #5b21b6; --teal-bg: #ecfdf8; --teal-line: #a7e8d8; --teal-text: #115e59; --shadow: 0 2px 4px rgba(0,0,0,.04); --radius: 10px; } /* ========================================================================== TEMA INTERMEDIO: papel calido. Misma estructura que el claro (texto oscuro sobre fondo claro), con el blanco rebajado a un hueso gris y los grises de texto un punto mas oscuros para mantener el contraste sobre un panel menos luminoso. ========================================================================== */ [data-theme="intermedio"] { color-scheme: light; --bg: #dcd9d1; --panel: #eae7e0; --soft: #e0ddd5; --soft-2: #e5e2da; --line: #cbc7bd; --line-2: #b1aca1; --text: #22262e; --text-strong: #111827; --text-2: #363b45; --muted: #545b69; --muted-2: #616877; --ink: #1f2430; --ink-2: #3a4150; --on-ink: #f5f3ee; --overlay: rgba(234,231,224,.8); --wash: rgba(227,43,54,.05); --wash-hover: rgba(227,43,54,.11); --accent: #c8202b; /* un punto mas oscuro que el de marca: sobre hueso pide mas contraste */ --accent-2: #a3181f; --ok: #14532d; --ok-text: #14532d; --ok-bg: #d9ecdf; --ok-bg-2: #c3e2cc; --ok-line: #93c9a3; --ok-solid: #16a34a; --ok-solid-2: #15803d; --danger: #b91c1c; --danger-text: #7f1d1d; --danger-bg: #f0dcdc; --danger-bg-2: #e9c7c8; --danger-line: #d59a9d; --danger-solid: #dc2626; --warn: #b45309; --warn-text: #713f12; --warn-bg: #eee3c8; --warn-bg-2: #e6d6a7; --warn-line: #cdaa55; --warn-solid: #d97706; --info: #1d4ed8; --info-text: #1e3a8a; --info-bg: #d9e1ef; --info-bg-2: #c5d3ea; --info-line: #98b1da; --info-solid: #2563eb; --violet-bg: #e2dcec; --violet-line: #bbadd9; --violet-text: #4c1d95; --teal-bg: #d3e7e2; --teal-line: #8dc5b9; --teal-text: #134e4a; /* Enlaces sin clase: Bootstrap los pinta con --bs-link-color-rgb (una terna, no un color), y su azul por defecto se queda en 3,6:1 sobre el hueso. Es el --info de esta paleta. */ --bs-link-color-rgb: 29, 78, 216; --bs-link-hover-color-rgb: 30, 58, 138; --shadow: 0 2px 4px rgba(0,0,0,.08); } /* ========================================================================== TEMA OSCURO ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --bg: #0f172a; --panel: #1e293b; --soft: #283548; --soft-2: #243044; --line: #334155; --line-2: #475569; --text: #e2e8f0; --text-strong: #f8fafc; --text-2: #cbd5e1; --muted: #94a3b8; --muted-2: #8f9fb5; --ink: #475569; --ink-2: #3b4a60; --on-ink: #f8fafc; --overlay: rgba(15,23,42,.45); --wash: rgba(227,43,54,.07); --wash-hover: rgba(227,43,54,.14); --accent: #f26d75; /* mas claro que el de marca: en oscuro --accent es sobre todo TEXTO */ --accent-2: #f7969b; --ok: #4ade80; --ok-text: #86efac; --ok-bg: #12261b; --ok-bg-2: #163a26; --ok-line: #1f6b3a; --ok-solid: #16a34a; --ok-solid-2: #15803d; --danger: #f87171; --danger-text: #fca5a5; --danger-bg: #2c1618; --danger-bg-2: #3d1c1f; --danger-line: #7f2a2e; --danger-solid: #dc2626; --warn: #fbbf24; --warn-text: #fcd34d; --warn-bg: #2a2110; --warn-bg-2: #3a2d12; --warn-line: #7a5a12; --warn-solid: #d97706; --info: #60a5fa; --info-text: #93c5fd; --info-bg: #14213a; --info-bg-2: #1a2c4f; --info-line: #2b4a86; --info-solid: #2563eb; --violet-bg: #251c3d; --violet-line: #4c3a8a; --violet-text: #c4b5fd; --teal-bg: #10292a; --teal-line: #1f5f5b; --teal-text: #5eead4; --shadow: 0 2px 4px rgba(0,0,0,.3); } /* ========================================================================== PUENTE A BOOTSTRAP 5.3 (cualquier tema que no sea el claro por defecto) Bootstrap pinta tablas, tarjetas, acordeones y formularios con SUS variables; se le pasan las nuestras para que no salga ni su blanco ni su gris #212529. En claro no hace falta: sus valores por defecto coinciden con los nuestros. ========================================================================== */ [data-theme] { --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-emphasis-color: var(--text-strong); --bs-secondary-color: var(--muted); --bs-secondary-bg: var(--soft); --bs-tertiary-bg: var(--soft-2); --bs-tertiary-color: var(--muted-2); --bs-border-color: var(--line); --bs-heading-color: inherit; --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-2); --bs-form-control-bg: var(--panel); --bs-card-bg: var(--panel); --bs-accordion-bg: var(--panel); } [data-theme] .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line); --bs-table-striped-bg: var(--soft-2); --bs-table-hover-bg: var(--soft); } /* Utilidades de color FIJO de Bootstrap que aparecen en las vistas moviles */ [data-theme] .bg-white { background-color: var(--panel) !important; } [data-theme] .bg-light { background-color: var(--soft) !important; } [data-theme] .bg-light.text-dark { color: var(--text) !important; } /* la pastilla gris; las amarillas siguen con texto oscuro */ [data-theme] .card-header { background-color: var(--soft-2); border-bottom-color: var(--line); } /* ========================================================================== SELECTOR DE TEMA: tres posiciones (sol / medio / luna), autonomo, no depende de site.css porque tambien va en los layouts moviles. Sobre la barra roja de esos layouts se vuelve translucido en blanco (.navbar-dark). ========================================================================== */ .tema-selector { display: inline-flex; align-items: center; padding: 3px; gap: 2px; border-radius: 999px; background: var(--soft-2); border: 1px solid var(--line); } .tema-opcion { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; line-height: 1; transition: background .15s ease, color .15s ease; } .tema-opcion svg { display: block; width: 15px; height: 15px; } .tema-opcion:hover { color: var(--text); } .tema-opcion[aria-pressed="true"] { background: var(--panel); color: var(--accent); border-color: var(--line-2); box-shadow: 0 1px 2px rgba(0,0,0,.08); } .tema-opcion:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; } .navbar-dark .tema-selector { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); } .navbar-dark .tema-opcion { color: rgba(255,255,255,.8); } .navbar-dark .tema-opcion:hover { color: #fff; } .navbar-dark .tema-opcion[aria-pressed="true"] { background: #fff; color: var(--persycom-red); border-color: transparent; }