/* ── Paleta SAFDI solo en modo Noche (sin data-theme en ) ── NO usar :root aquí: pisaba [data-theme="day"] de temas.css */ html:not([data-theme]) { --navy: #0d1b2a; --navy2: #152233; --teal: #0e7c86; --teal-light: #16a8b5; --gold: #e8a838; --white: #f5f7fa; --gray: #8899aa; --border: rgba(255, 255, 255, 0.08); --card: rgba(255, 255, 255, 0.04); } /* Sans-serif unificado (DM Sans + sistema) */ :root { --rol-font-ui: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Evita que el navegador infle tipografía al hacer zoom/pinch (mantiene proporciones del diseño) */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-family: var(--rol-font-ui); } /* estilos.css pone body { display: flex }; eso puede romper position:fixed del panel de tema en algunos motores */ /* Flujo en bloque: el scroll es del documento y .theme-selector queda anclado al viewport */ body { display: block; font-family: var(--rol-font-ui); font-size: 17.64px; line-height: 1.45; min-height: 100vh; text-transform: uppercase; letter-spacing: 0.04em; font-style: normal; } main input::placeholder, main textarea::placeholder { font-style: normal; } /* Forzar familia tipográfica consistente en títulos, tarjetas y controles */ .card-title, .sv-paso, .section-tag, .section-header-center h2, .section-header h2.rol-subsection-title, .sv-card-agencia-nombre, .sv-card-agencia-sub, .sv-card-duof-nombre, .sv-badge, .personal-name, .summary-card .role-title, .summary-card .role-count, label, input, select, textarea, button { font-family: var(--rol-font-ui) !important; } /* Selector de tema: misma familia sans-serif que el resto */ .theme-selector .theme-label, .theme-selector .theme-btn { font-family: var(--rol-font-ui) !important; } /* .card-title, .section-tag, .sv-paso, .field label: ya definidos en estilos.css — no duplicar */ /* Tema día / daltónico: fondo y texto siguen variables de temas.css */ [data-theme="day"] body { background: var(--navy); color: var(--white); } [data-theme="colorblind"] body { background: var(--navy); color: var(--white); } /* temas.css usa --white semitransparente; mejora legibilidad */ [data-theme="colorblind"] { --white: #f3f4f6; } /* ── Selector de tema: anclado al contenido (no acompaña el scroll) ── Tamaños de letra en temas.css (no escalar +20% aquí). Posición un poco más a la derecha. */ .theme-selector { position: absolute; top: 12px; right: 0; left: auto; bottom: auto; z-index: 20; margin: 0; transform: translateX(28%); padding: 8px 12px; gap: 6px; background: rgba(13, 27, 42, 0.95); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.13); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); pointer-events: auto; } [data-theme="day"] .theme-selector { background: rgba(240, 240, 240, 0.92); border: 1px solid rgba(0, 0, 0, 0.1); } [data-theme="colorblind"] .theme-selector { background: rgba(10, 14, 39, 0.88); border: 1px solid rgba(37, 99, 235, 0.35); } [data-theme="day"] .theme-selector .theme-btn { background: rgba(0, 0, 0, 0.05); border: 2px solid rgba(0, 0, 0, 0.1); color: var(--gray); } [data-theme="day"] .theme-selector .theme-btn:hover { background: rgba(0, 0, 0, 0.1); border-color: var(--gold); } [data-theme="day"] .theme-selector .theme-btn.active { background: var(--teal); border-color: var(--gold); color: #fff; } [data-theme="colorblind"] .theme-selector .theme-btn { background: rgba(37, 99, 235, 0.12); border: 2px solid rgba(37, 99, 235, 0.25); color: var(--gray); } [data-theme="colorblind"] .theme-selector .theme-btn:hover { background: rgba(37, 99, 235, 0.22); border-color: var(--gold); } [data-theme="colorblind"] .theme-selector .theme-btn.active { background: var(--teal); border-color: var(--gold); color: #fff; } /* Contenido principal — espacio superior acorde al panel TEMA compacto */ body > main { position: relative; padding: 42px 50.4px; padding-top: 42px; box-sizing: border-box; max-width: 1113px; margin-left: auto; margin-right: auto; } /* Inputs del formulario roles: un punto menos que estilos.css (14.7px) */ body main .rol-form .field input, body main .rol-form .field select, body main .rol-form .field textarea { font-size: 16.38px; padding: 10.5px 12.6px; } #personalSection .field input, #personalSection .field select, #personalSection .field textarea { font-size: 13.65px; } /* Formulario roles */ .rol-form { display: flex; flex-direction: column; gap: 4.2px; } .rol-form > .field { margin-top: 8.4px; margin-bottom: 4.2px; } /* Cabecera */ .rol-page-header { position: relative; display: flex; align-items: center; justify-content: center; gap: 33.6px; margin-bottom: 37.8px; padding-bottom: 25.2px; /* border-bottom: ver estilos.css (.rol-page-header) */ min-height: 126px; } .rol-page-header .section-logo { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .rol-page-header .section-logo .logo-escudo { display: flex; align-items: center; justify-content: center; background: transparent; overflow: hidden; width: 115.5px; height: 115.5px; border-radius: 50%; } .rol-page-header .section-logo .logo-escudo-img { /* El SVG tiene viewBox "-0.5 -0.5 201 201": genera 1.05px de margen externo. Lo compensamos agrandando 1% más y recortando con el contenedor */ width: 121.8px; height: 121.8px; object-fit: contain; display: block; border: 0; background: transparent !important; filter: none !important; margin: -3.15px; } .section-header-center { text-align: center; flex: 0 0 auto; max-width: 756px; } /* Hero: alineado a intento (h2 principal ~33.6px en formulario; aquí un punto menos para no “gritar”) */ .section-header-center h2 { font-family: var(--rol-font-ui); font-size: 40.32px; font-weight: 700; color: var(--white); line-height: 1.2; margin: 0; letter-spacing: -0.01em; } .section-header-center p { font-size: 17.64px; color: var(--gray); margin-top: 6.3px; } .section-header-center .section-tag { display: block; margin-bottom: 10.5px; font-family: var(--rol-font-ui); font-size: 12.6px; letter-spacing: 2.1px; font-weight: 700; color: var(--teal-light); text-transform: uppercase; } @media (max-width: 768px) { .rol-page-header { flex-direction: column; padding-top: 8.4px; min-height: auto; } .rol-page-header .section-logo { position: static; transform: none; } body > main { padding: 42px 21px 25.2px; } .theme-selector { padding: 6px 8px !important; } .theme-buttons { flex-wrap: wrap; justify-content: flex-end; } .theme-selector .theme-btn { min-width: 0 !important; font-size: 10.8px !important; padding: 5px 6px !important; } } /* Tarjeta principal */ .card-modern { position: relative; overflow: hidden; } .card-modern::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4.2px; background: linear-gradient(90deg, var(--teal), var(--teal-light)); z-index: 1; } .hidden { display: none !important; } .req { color: #ef4444; } .error { color: #ef4444; font-size: 15.12px; } .text-muted { color: var(--gray); font-size: 15.12px; font-style: normal; } /* Mensaje “sin resultados” en búsqueda de personal (sin cursiva) */ .rol-empty-search-msg { text-align: center; padding: 33.6px 16.8px; font-style: normal; } /* Paso 2: contenedor de tarjetas dependencia (mismo grid que estilos.css) */ #dependenciaVisual { min-height: 8.4px; } #dependenciaVisual .sv-paso2-wrapper { margin-top: 10.08px; } /* Tarjetas (button) alineadas con .sv-card-* de estilos.css */ #agenciaButtons button.sv-card-agencia { width: 100%; font-family: inherit; color: inherit; cursor: pointer; padding: 12.6px 10.5px; border-radius: 9.45px; } button.sv-card-duof { font: inherit; text-align: left; width: 100%; color: inherit; -webkit-appearance: none; appearance: none; padding: 8.4px 10.5px; border-radius: 7.35px; gap: 8.4px; } #agenciaButtons .sv-card-agencia-nombre, button.sv-card-duof .sv-card-duof-nombre { font-size: 12.6px; line-height: 1.25; } #agenciaButtons .sv-card-agencia-sub { font-size: 11.97px; } button.sv-card-duof .sv-badge { font-size: 11.97px; min-width: 35.7px; padding: 2.1px 6.3px; } /* Personal: tres columnas (responsive) */ #personalList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12.6px; } /* Filas de personal */ .personal-row { display: flex; flex-direction: column; gap: 8.4px; align-items: stretch; padding: 12.6px 14.7px; background: var(--card); border: 1.05px solid var(--border); border-radius: 10.5px; transition: all 0.2s ease; } .personal-row:hover { border-color: rgba(0, 168, 168, 0.35); } .personal-row.has-role { border-color: #10b981; background: rgba(16, 185, 129, 0.06); box-shadow: 0 0 0 1.05px rgba(16, 185, 129, 0.35); } .personal-name { font-weight: 600; color: var(--white); font-size: 14.7px; line-height: 1.25; display: flex; align-items: center; gap: 6.3px; flex-wrap: wrap; } .sin-id-badge { font-size: 10.5px; font-weight: 600; letter-spacing: 0.42px; border-radius: 4.2px; padding: 1.05px 6.3px; cursor: help; white-space: nowrap; } .sin-id-badge--id { color: var(--teal-light, #16a8b5); background: rgba(14, 124, 134, 0.1); border: 1.05px solid rgba(14, 124, 134, 0.3); } .sin-id-badge--vacio { text-transform: uppercase; color: #f59e0b; background: rgba(245, 158, 11, 0.12); border: 1.05px solid rgba(245, 158, 11, 0.35); } .personal-row select.role-select, .personal-row select { width: 100%; min-width: 0; background: var(--navy2); border: 1.05px solid var(--border); border-radius: 8.4px; padding: 10.5px 12.6px; color: var(--white); font-family: inherit; font-size: 14.7px; } .personal-row select:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3.15px rgba(14, 124, 134, 0.15); } @media (max-width: 1200px) { #personalList { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { #personalList { grid-template-columns: 1fr; } } /* Resumen */ .summary-card { background: var(--card); border: 1.05px solid var(--border); border-radius: 12.6px; padding: 1.25rem; transition: all 0.2s; } .summary-card:hover { border-color: rgba(0, 168, 168, 0.35); } .summary-card .role-title { font-family: var(--rol-font-ui); font-size: 12.6px; font-weight: 700; letter-spacing: 1.26px; color: var(--teal-light); text-transform: uppercase; margin-bottom: 6.3px; } .summary-card .role-count { font-family: var(--rol-font-ui); font-size: 27.72px; font-weight: 800; color: var(--white); line-height: 1.2; } .summary-card .role-names { margin-top: 8.4px; font-size: 15.12px; color: var(--gray); max-height: 147px; overflow-y: auto; } #summaryContent { display: grid; grid-template-columns: repeat(auto-fill, minmax(273px, 1fr)); gap: 16.8px; } .loading-spinner { border: 2.1px solid var(--border); border-top: 2.1px solid var(--teal-light); border-radius: 50%; width: 23.1px; height: 23.1px; animation: rol-spin 0.9s linear infinite; } @keyframes rol-spin { to { transform: rotate(360deg); } } #toast { z-index: 20000; background: var(--card); border: 1.05px solid var(--border); border-radius: var(--radius-md, 12.6px); padding: 14.7px 18.9px; color: var(--white); font-size: 16.38px; backdrop-filter: blur(12.6px); } .btn-outline { border: 1.05px solid var(--border); background: transparent; color: var(--gray); padding: 12.6px 23.1px; border-radius: var(--radius-md, 12.6px); font-family: var(--rol-font-ui); font-weight: 700; font-size: 16.38px; letter-spacing: 0.42px; cursor: pointer; transition: all 0.2s; } .btn-outline:hover { border-color: var(--teal-light); color: var(--white); background: rgba(14, 124, 134, 0.08); } /* .btn-submit: tamaño en estilos.css (13.65px) — no sobrescribir fuente/tamaño */ .btn-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .text-success-500 { color: #10b981 !important; } .text-warning-500 { color: #f59e0b !important; } .animate-fade-in-up { animation: rol-fade-up 0.45s ease; } @keyframes rol-fade-up { from { opacity: 0; transform: translateY(10.08px); } to { opacity: 1; transform: translateY(0); } } .form-actions-row { display: flex; flex-wrap: wrap; gap: 16.8px; padding-top: 25.2px; margin-top: 8.4px; border-top: 1.05px solid var(--border); } .form-actions-row .btn-submit { flex: 1 1 210px; } /* estilos.css .section-header h2 { font-size: 33.6px } pisa esto — forzar tamaño tipo “subbloque” (~15.75px) */ .section-header h2.rol-subsection-title { font-family: var(--rol-font-ui); font-size: 15.75px; font-weight: 800; color: var(--white); margin: 0; line-height: 1.25; letter-spacing: -0.01em; } /* Tarjetas formulario: compactas como intento */ main .card.card-modern { padding: 25.2px; margin-bottom: 21px; } /* Contador personal (#personalCount): tamaño auxiliar */ #personalCount { font-size: 12.6px !important; } /* Estado vacío: tamaños acotados */ .rol-empty-state { text-align: center; padding: 33.6px 16.8px; } .rol-empty-icon { width: 75.6px; height: 75.6px; margin: 0 auto 12.6px; border-radius: 50%; background: var(--card); border: 1.05px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 40.32px; } .rol-empty-title { color: var(--gray); font-size: 17.64px; margin: 0; } main footer .text-muted { font-size: 13.86px; } /* ── Overrides vista rol (+20% respecto a estilos.css base) ── */ main .rol-form .field label { font-size: 13.86px; } #personalSection .field label { font-size: 11.55px; } main .card .card-title { font-size: 15.12px; } main .sv-paso { font-size: 12.6px; } main .sv-loading-msg { font-size: 16.38px; font-style: normal !important; } main .sv-card-agencia-nombre { font-size: 14.49px; } main .sv-card-agencia-sub { font-size: 13.86px; } main .sv-card-duof-nombre { font-size: 14.49px; } main .sv-badge { font-size: 13.86px; } main .sv-seleccion-actual { font-size: 15.12px; } main .sv-seleccion-actual .sv-change-btn { font-size: 12.6px; } main .btn-submit { font-size: 16.38px; } /* Grillas agencias/dependencias: gap en estilos.css */ /* estilos.css asigna Syne a algunas tarjetas; misma sans-serif que el resto */ main .sv-card-agencia-nombre, main .sv-badge { font-family: var(--rol-font-ui) !important; }