/* ========================================================================== SCPA — capa de diseño nueva ("fashion emergency") Convive con Bootstrap 3 / freelancer.css, no los reemplaza. Se carga DESPUES de esos archivos en base.html para poder sobreescribirlos. Fase 1: tokens + componentes base. No toca layout de base.html todavia. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=Archivo:wght@600;700;800&display=swap'); :root { /* Color */ --color-bg: #f5f7fa; --color-surface: #ffffff; --color-border: #dde3ea; --color-text: #1c2530; --color-text-muted: #5b6472; --color-accent: #1f3a5f; --color-accent-soft: #eaf0f7; --color-success: #1a7f5a; --color-success-soft: #e6f4ef; --color-warning: #9a6b00; --color-warning-soft: #fbf1dc; --color-danger: #b3311f; --color-danger-soft: #fbeae7; --color-amber-accent: #c1710c; /* Tipografia */ --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-heading: 'Archivo', 'Public Sans', -apple-system, sans-serif; /* Escala tipografica */ --text-xs: 12px; --text-sm: 13px; --text-base: 14.5px; --text-lg: 17px; --text-xl: 22px; --text-2xl: 28px; /* Espaciado */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --radius: 6px; --shadow-card: 0 1px 3px rgba(28, 37, 48, 0.06), 0 1px 2px rgba(28, 37, 48, 0.04); } /* ========================================================================== Base tipografica — se aplica sobre sin romper el bootstrap existente ========================================================================== */ .fe-scope { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } .fe-scope h1, .fe-scope h2, .fe-scope h3, .fe-scope h4 { font-family: var(--font-heading); font-weight: 700; color: var(--color-text); text-wrap: balance; margin: 0 0 var(--space-1); } .fe-scope h1 { font-size: var(--text-2xl); } .fe-scope h2 { font-size: var(--text-xl); } .fe-scope h3 { font-size: var(--text-lg); } .fe-scope p, .fe-scope label, .fe-scope td, .fe-scope th, .fe-scope input, .fe-scope select { font-family: var(--font-body); font-size: var(--text-base); } .fe-eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } /* ========================================================================== Layout: envoltorio de pagina ========================================================================== */ .fe-page { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-6); } .fe-header { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-4); margin-bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); } .fe-header p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; } .fe-stack { display: flex; flex-direction: column; gap: var(--space-5); } .fe-columns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; } @media (max-width: 800px) { .fe-columns-2 { grid-template-columns: 1fr; } } /* ========================================================================== Tarjetas ========================================================================== */ .fe-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; } .fe-card-head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm); color: var(--color-text); display: flex; align-items: center; gap: var(--space-2); } .fe-card-head .glyphicon { color: var(--color-text-muted); font-size: var(--text-sm); } .fe-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .fe-card-body.fe-tight { padding: 0; } /* ========================================================================== Aviso de permiso anulado — banner destacado arriba de las pantallas de detalle (verpermiso/verpermiso2/verpermisousuario/comprobante). Usa las variables de --color-danger, que el bloque @media (prefers-color-scheme: dark) de mas abajo ya redefine, asi que se adapta solo al tema. ========================================================================== */ .fe-card-anulado { border-color: var(--color-danger); border-left-width: 4px; } .fe-card-anulado .fe-card-head { background: var(--color-danger-soft); border-bottom-color: var(--color-danger); color: var(--color-danger); text-transform: uppercase; letter-spacing: .04em; } .fe-anulado-nota { margin: 0; padding: var(--space-3); background: var(--color-danger-soft); border-radius: var(--radius); color: var(--color-danger); font-size: var(--text-sm); } /* ========================================================================== Chips de estado — reemplaza los sueltos ========================================================================== */ .fe-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: 999px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; } .fe-chip-success { background: var(--color-success-soft); color: var(--color-success); } .fe-chip-warning { background: var(--color-warning-soft); color: var(--color-warning); } .fe-chip-danger { background: var(--color-danger-soft); color: var(--color-danger); } .fe-chip-neutral { background: var(--color-accent-soft); color: var(--color-accent); } /* ========================================================================== Alertas — sustituye .alert-* de bootstrap dentro de .fe-scope ========================================================================== */ .fe-scope .alert { border: 1px solid transparent; border-radius: var(--radius); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); } .fe-scope .alert-success { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); } .fe-scope .alert-warning { background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-warning); } .fe-scope .alert-danger { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); } /* ========================================================================== Botones ========================================================================== */ .fe-scope .btn { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); border-radius: var(--radius); padding: 8px 16px; border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease; } .fe-scope .btn-info, .fe-scope .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #ffffff; } .fe-scope .btn-info:hover, .fe-scope .btn-primary:hover { background: #16304d; border-color: #16304d; color: #ffffff; } .fe-scope .btn-danger { background: var(--color-danger); border-color: var(--color-danger); } .fe-scope .btn-default { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } /* ========================================================================== Formularios ========================================================================== */ .fe-field { display: flex; flex-direction: column; gap: 4px; max-width: 360px; } .fe-field label { font-weight: 600; font-size: var(--text-sm); color: var(--color-text); } .fe-field .fe-help { color: var(--color-text-muted); font-size: var(--text-xs); } .fe-scope .form-control { font-family: var(--font-body); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: none; padding: 8px 10px; height: auto; } .fe-scope .form-control:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } /* ========================================================================== Tablas ========================================================================== */ .fe-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .fe-table th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); padding: var(--space-2) var(--space-3); } .fe-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); } .fe-table tr:last-child td { border-bottom: 0; } .fe-table-scroll { overflow-x: auto; max-height: 360px; overflow-y: auto; } /* ========================================================================== Chrome global (navbar / header / footer) — fase 2. Convive con la estructura y las clases de Bootstrap 3 (.navbar, .dropdown, .dropdown-menu) porque el JS de dropdown de Bootstrap las necesita para funcionar; solo se reescribe la apariencia. ========================================================================== */ body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); } .navbar.navbar-default { background: var(--color-accent); border: none; border-radius: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); font-family: var(--font-body); min-height: 52px; } .navbar.navbar-default .navbar-brand { font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.04em; color: #ffffff; height: auto; padding: 15px 20px; } .navbar.navbar-default .navbar-nav > li > a { color: rgba(255, 255, 255, 0.85); font-weight: 500; font-size: var(--text-sm); padding: 16px 14px; transition: color .15s ease, background-color .15s ease; } .navbar.navbar-default .navbar-nav > li > a:hover, .navbar.navbar-default .navbar-nav > li > a:focus { color: #ffffff; background: rgba(255, 255, 255, 0.08); } .navbar.navbar-default .navbar-nav > .open > a, .navbar.navbar-default .navbar-nav > .open > a:hover, .navbar.navbar-default .navbar-nav > .open > a:focus { background: rgba(255, 255, 255, 0.12); color: #ffffff; } .navbar.navbar-default .dropdown-menu { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-2) 0; margin-top: 2px; } .navbar.navbar-default .dropdown-menu > li > a { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text); padding: 7px 18px; } .navbar.navbar-default .dropdown-menu > li > a:hover, .navbar.navbar-default .dropdown-menu > li > a:focus { background: var(--color-accent-soft); color: var(--color-accent); } .navbar.navbar-default .dropdown-menu .dropdown-header { font-family: var(--font-heading); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); padding: 6px 18px 4px; } .navbar.navbar-default .dropdown-menu .divider { background: var(--color-border); margin: var(--space-2) 0; } .navbar.navbar-default .usuarioactivo { color: rgba(255, 255, 255, 0.9); font-size: var(--text-xs); text-align: right; line-height: 1.4; padding: 10px 4px; } .navbar.navbar-default .usuarioactivo li:first-child { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; color: rgba(255, 255, 255, 0.6); } /* Cabecera de pagina — reemplaza el hero grande de freelancer.css por una franja delgada, coherente con el resto de una herramienta administrativa. */ #contenedor { background: var(--color-bg); box-shadow: none; } #contenedor > header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); text-align: left; padding: var(--space-4) 40px var(--space-5); } #contenedor > header h1 { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); text-decoration: none; display: inline; } #contenedor > header h5 { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); margin: 2px 0 0; font-weight: 400; } #contenedor > header a { text-decoration: none; } #contenedor footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-3) 40px; text-align: right; } #contenedor footer a { color: var(--color-text-muted); font-size: var(--text-sm); } #contenedor footer a:hover { color: var(--color-accent); } /* ========================================================================== Filtros (formulario horizontal arriba de listados) ========================================================================== */ .fe-filtros { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); } .fe-filtros .fe-field { margin: 0; max-width: 240px; } .fe-filtros .fe-field label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); } .fe-filtros select.form-control { appearance: auto; } .fe-filtros .fe-filtros-actions { display: flex; gap: var(--space-2); } /* ========================================================================== Lista de permisos (permisolst.html / _permisos_list.html) ========================================================================== */ .fe-permiso-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .fe-permiso-row { display: flex; align-items: center; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--color-text); transition: border-color .15s ease, box-shadow .15s ease; } .fe-permiso-row:hover, .fe-permiso-row:focus { border-color: var(--color-accent); box-shadow: var(--shadow-card); color: var(--color-text); text-decoration: none; } .fe-permiso-row .fe-permiso-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-text-muted); width: 80px; flex-shrink: 0; white-space: nowrap; } .fe-permiso-row .fe-permiso-nombre { font-weight: 600; width: 220px; flex-shrink: 0; } .fe-permiso-row .fe-permiso-fecha { color: var(--color-text-muted); width: 130px; flex-shrink: 0; font-variant-numeric: tabular-nums; } .fe-permiso-row .fe-permiso-tipo { color: var(--color-text-muted); flex: 1; min-width: 0; } .fe-permiso-row .fe-permiso-tags { display: flex; gap: var(--space-1); flex-wrap: wrap; justify-content: flex-end; } .fe-empty-state { text-align: center; color: var(--color-text-muted); padding: var(--space-6) var(--space-4); font-size: var(--text-sm); } .fe-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-3) 0; font-size: var(--text-sm); color: var(--color-text-muted); } .fe-pagination a { color: var(--color-accent); font-weight: 600; text-decoration: none; } .fe-pagination a:hover { text-decoration: underline; } /* ========================================================================== Grid de formulario de 2 columnas (licencia.html y similares) — distinto de .fe-columns-2 (que es para tarjetas separadas): esto es para campos dentro de UNA sola tarjeta. ========================================================================== */ .fe-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .fe-form-grid .fe-field.full { grid-column: 1 / -1; } .fe-form-grid hr { grid-column: 1 / -1; border: none; border-top: 1px solid var(--color-border); margin: 0; } .fe-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .fe-scope .form-control[readonly] { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); cursor: not-allowed; } .fe-error-msg { color: var(--color-danger); font-size: var(--text-xs); margin-bottom: 2px; } @media (max-width: 700px) { .fe-form-grid { grid-template-columns: 1fr; } } /* ========================================================================== Pagina ancha (main.html necesita mas espacio que .fe-page por el calendario) ========================================================================== */ .fe-page-wide { max-width: 1680px; margin: 0 auto; padding: var(--space-6) var(--space-5); } /* ========================================================================== verpermiso.html / comprobante-like: filas clave-valor, lista de detalle, acciones de aprobar/rechazar ========================================================================== */ .fe-card-head { justify-content: space-between; } .fe-card-head .fe-card-head-actions { margin-left: auto; display: flex; align-items: center; } .fe-kv { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); } .fe-kv:last-child { border-bottom: none; } .fe-kv > span:first-child { color: var(--color-text-muted); } .fe-kv > span:last-child { color: var(--color-text); font-weight: 500; text-align: right; } .fe-detalle-list { list-style: none; margin: 0; padding: 0; } .fe-detalle-list li { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-2); } .fe-detalle-list li:last-child { border-bottom: none; } .fe-detalle-total { background: var(--color-accent-soft); font-weight: 700; justify-content: flex-end; } .fe-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); } .fe-scope .razon { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); width: 100%; max-width: 480px; min-height: 100px; padding: 8px 10px; font-family: var(--font-body); } .fe-scope .razon:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } .fe-scope .mostrarocultar { width: auto; font-weight: 600; margin-bottom: var(--space-3); } .fe-scope .listapermisos { border: 1px solid var(--color-border); border-radius: var(--radius); overflow-x: auto; overflow-y: visible; padding: var(--space-3); margin-bottom: var(--space-4); background: var(--color-surface); box-shadow: var(--shadow-card); /* scrollbar siempre visible (no fina/auto-oculta) — con 15-17 columnas el scroll horizontal es necesario pero no se notaba que existia, la ultima columna parecia "cortada" cuando en realidad estaba a un scroll de distancia. */ scrollbar-width: auto; } .fe-scope .listapermisos::-webkit-scrollbar { height: 10px; } .fe-scope .listapermisos::-webkit-scrollbar-track { background: transparent; } .fe-scope .listapermisos::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; } .fe-scope .listapermisos::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } .fe-scope .listapermisos .TFtable { min-width: 1400px; } /* ========================================================================== main.html: resumen (.bgeneral/.TFtable), formulario de solicitud (.permiso/#frmpermiso) y modales informativos — se reestilizan las clases que ya existen en el HTML, sin tocar su estructura. ========================================================================== */ .fe-scope .TFtable { font-family: var(--font-body); border: 1px solid var(--color-border); } .fe-scope .TFtable th { background: var(--color-surface); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 600; border-bottom: 2px solid var(--color-border); padding: var(--space-2) var(--space-2); } .fe-scope .TFtable td { border: none; border-bottom: 1px solid var(--color-border); padding: var(--space-2); font-variant-numeric: tabular-nums; } .fe-scope .TFtable tr, .fe-scope .TFtable tr:nth-child(odd), .fe-scope .TFtable tr:nth-child(even) { background: var(--color-surface); } /* Numero de indice (link a "Ver Permiso") en las tablas .TFtable: barra de acento ambar en el borde de la celda + numero en negrita. Antes caia en el verde default de bootstrap.css por no tener regla propia. */ .fe-scope .TFtable td.horas:first-child { position: relative; padding-left: 22px; } .fe-scope .TFtable td.horas:first-child::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--color-amber-accent); } .fe-scope .TFtable td.horas:first-child a { color: var(--color-text); font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; } .fe-scope .TFtable td.horas:first-child a:hover { color: var(--color-amber-accent); } .fe-scope .TFtable tr:nth-child(even) { background: var(--color-bg); } /* .negrita (style.css) trae background-color:#FFBA25 solido + font-size fijo — se veia como un rectangulo naranjo roto sobre el nuevo diseño. Se neutraliza aca para que quede como negrita simple, consistente con el resto de la tabla. Afecta a todas las paginas migradas que usan class="horas negrita" (permisosusuariolst.html, estadisticapermisos.html, bgeneral.html, bhoras.html), no solo una. */ .fe-scope .negrita { font-weight: 700; font-size: inherit; color: inherit; background-color: transparent; } .fe-scope .permiso { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-4); font-size: var(--text-base); } .fe-scope .permiso p { float: none; font-size: var(--text-base); margin: 0; overflow: visible; } .fe-scope #frmpermiso { width: auto; height: auto; float: none; flex: 1 1 240px; min-width: 220px; } .fe-scope .permiso label { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); color: var(--color-text); margin-bottom: var(--space-1); } .fe-scope .permiso select, .fe-scope .permiso input[type="text"] { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: none; padding: 8px 10px; width: 100%; max-width: 320px; height: auto; } .fe-scope .permiso select:focus, .fe-scope .permiso input[type="text"]:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } .fe-scope .btn-success { background: var(--color-success); border-color: var(--color-success); } .fe-scope .btn-success:hover { background: #14664a; border-color: #14664a; } /* Calendario */ .fe-scope #calendar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-3); margin: var(--space-4) 0; } .fe-scope .fc-toolbar h2 { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-text); } .fe-scope .fc-button { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); text-shadow: none; box-shadow: none; } .fe-scope .fc-button:hover { background: var(--color-accent-soft); } .fe-scope .fc-state-active, .fe-scope .fc-state-down { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .fe-scope .fc-event { border-radius: 4px; border: none; background: #1f3a5f; font-size: var(--text-xs); } .fe-scope .fc-event.used { background: var(--color-danger) !important; border: none !important; } .fe-scope .fc-event.selected { background: var(--color-success) !important; color: #fff !important; } .fe-scope .fc-today { background: var(--color-accent-soft) !important; } /* Modales informativos (16 en esta pagina, todos comparten estructura Bootstrap) */ .fe-scope .modal-content { border-radius: var(--radius); border: none; box-shadow: 0 12px 32px rgba(0,0,0,0.2); } .fe-scope .modal-header { background: var(--color-accent); color: #fff; border-radius: var(--radius) var(--radius) 0 0; } .fe-scope .modal-header h4 { font-family: var(--font-heading); margin: 0; color: #fff; } .fe-scope .modal-header .close { color: #fff; opacity: .8; } .fe-scope .modal-header .close:hover { opacity: 1; } .fe-scope .modal-body { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text); } .fe-scope .modal-footer { border-top: 1px solid var(--color-border); } /* ========================================================================== Estados de fila (.anulado/.rechazado/.aprovado/.sinrevisar). Las reglas viejas en style.css usan colores muy saturados + texto negro forzado con !important; se sobreescriben aca con el mismo lenguaje de los chips (fondo tenue + texto del color semantico) para que combinen con el resto y mantengan buen contraste. GLOBAL a proposito (no dentro de .fe-scope): estas clases aparecen en varias tablas de paginas que todavia no se migraron al sistema de tarjetas nuevo (bfuncionario, bgeneral, descontarhoras, devuelvehoras, estadisticapermisos), y como fashion.css ya se carga en todo el sitio via base.html, esto les llega sin tener que migrar cada pagina entera. Se repite el !important a proposito, es la unica forma de ganarle a la regla vieja. ========================================================================== */ tr.aprovado, tr.aprovado:hover { background-color: var(--color-success-soft) !important; color: var(--color-success) !important; } tr.rechazado, tr.rechazado:hover { background-color: var(--color-danger-soft) !important; color: var(--color-danger) !important; } tr.sinrevisar, tr.sinrevisar:hover { background-color: var(--color-warning-soft) !important; color: var(--color-warning) !important; } tr.anulado, tr.anulado:hover { background-color: var(--color-bg) !important; color: var(--color-text-muted) !important; text-decoration: line-through; } /* ========================================================================== Controles de formulario y list-group — GLOBAL a proposito (no dentro de .fe-scope). Bootstrap 3 les da fondo blanco FIJO (no depende del tema) sin fijar color de texto propio en todos los casos: al heredar el color claro que `body` toma en modo oscuro (ver regla `body` mas arriba), queda texto casi blanco sobre fondo blanco — asi se detecto el bug en la pantalla de revision de permisos (modpermiso.html, sin migrar a .fe-scope). Se fija fondo/color/borde explicitos con las mismas variables del tema para que combinen en ambos modos y de paso evitar que el navegador aplique su propio auto-dark a estos controles. No toca checkbox/radio/file/submit (se ven bien con su estilo nativo) ni `.list-group-item.active` (Bootstrap ya le fija fondo/color propios con mayor especificidad, no se pisa). ========================================================================== */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="search"], input[type="tel"], input[type="url"], select, textarea, .form-control { background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); } .list-group-item { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } /* `.modal-content` de Bootstrap tiene fondo blanco FIJO (bootstrap.css:5490) y ni `.fe-scope .modal-content` ni el resto de fashion.css se lo cambian (solo tocan header/body/footer) — el `.modal-body` (`.fe-scope .modal-body { color: var(--color-text) }`, mas abajo) y, desde hoy, la regla global de h1-h4 quedan con texto claro sobre ese fondo fijo en modo oscuro. Selector generico (sin .fe-scope) a proposito: cubre los modales migrados Y los 5 templates con modal que no usan .fe-scope (ausencia_laboral.html, formacion.html, formacionEdit.html, SalidaPedagogica.html, SalidaPedagogicaEdit.html) con una sola regla. */ .modal-content { background-color: var(--color-surface); } /* ========================================================================== Encabezados sueltos fuera de .fe-scope — GLOBAL a proposito. `style.css` (se carga ANTES que este archivo) fija `h1,h2,h3,h4{color:rgb(50,50,50)}` sin depender del tema: en modo claro se ve bien (gris oscuro sobre fondo claro), pero en modo oscuro el fondo detras pasa a oscuro (via `body` mas arriba) y este gris queda casi invisible. Encontrado en el

Comentario de modpermiso.html, sin clase ni override propio. Como este archivo se carga DESPUES de style.css y el selector tiene la misma especificidad, basta esta regla para ganarle en la cascada. No pisa `.fe-scope h1..h4` (mas especifico, mas arriba en este mismo archivo) ni los `h4` con `style="color:#fff !important"` inline que ya tiene modpermiso.html. ========================================================================== / h1, h2, h3, h4 { color: var(--color-text); } / .dash-header h1 (dashboard.html y limpieza_eventos.html) se veia "tenue" pese a tener buen color de contraste: le faltaba el peso/tipografia bold que el resto del sitio usa via `.fe-scope h1` — se quedaba en el peso 400 (normal) y font-family serif que trae style.css para h1 en general, sin nada que lo compensara al no estar dentro de .fe-scope. / .dash-header h1 { font-family: var(--font-heading); font-weight: 800; } / ========================================================================== Dark mode — respeta preferencia del SO. El sitio no tiene toggle propio todavia, asi que solo se activa via prefers-color-scheme. ========================================================================== / @media (prefers-color-scheme: dark) { :root { --color-bg: #12161c; --color-surface: #1a2029; --color-border: #2c3644; --color-text: #e7ebf0; --color-text-muted: #98a3b1; --color-accent: #6f9bc9; --color-accent-soft: #1f2e40; --color-success: #4fbf94; --color-success-soft: #123028; --color-warning: #d9a53f; --color-warning-soft: #33280d; --color-danger: #e0685a; --color-danger-soft: #3a1a16; --color-amber-accent: #e0a94f; } / ======================================================================== Paginas con su propio