/* ── 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); } /* Tipografía unificada en toda la vista (igual criterio de título + tarjetas) */ :root { --rol-font-ui: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; /* SR MARTINEZ: escala UI más grande (texto + tarjetas + controles) */ --sr-body: 19px; --sr-input: 17.5px; --sr-input-pad-y: 12px; --sr-input-pad-x: 14px; } /* 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%; } /* 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: var(--sr-body); line-height: 1.5; min-height: 100vh; } /* 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, .theme-label, .theme-selector .theme-btn, label, input, select, textarea, button { 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) ── */ .theme-selector { position: absolute; top: 12px; right: 6px; left: auto; bottom: auto; z-index: 20; margin: 0; transform: translateX(21%); padding: 10px 14px; gap: 8px; 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: 44px 52px; padding-top: 44px; box-sizing: border-box; max-width: 1180px; margin-left: auto; margin-right: auto; } /* Inputs del formulario roles: un punto menos que estilos.css (14px) */ body main .rol-form .field input, body main .rol-form .field select, body main .rol-form .field textarea { font-size: var(--sr-input); padding: var(--sr-input-pad-y) var(--sr-input-pad-x); } #personalSection .field input, #personalSection .field select, #personalSection .field textarea { font-size: 15px; } /* Formulario roles */ .rol-form { display: flex; flex-direction: column; gap: 8px; } .rol-form > .field { margin-top: 10px; margin-bottom: 6px; } /* Cabecera */ .rol-page-header { position: relative; display: flex; align-items: center; justify-content: center; gap: 36px; margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--border); min-height: 132px; } .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: 122px; height: 122px; border-radius: 50%; } .rol-page-header .section-logo .logo-escudo-img { /* El SVG tiene viewBox "-0.5 -0.5 201 201": genera 1px de margen externo. Lo compensamos agrandando 1% más y recortando con el contenedor */ width: 128px; height: 128px; object-fit: contain; display: block; border: 0; background: transparent !important; filter: none !important; margin: -3px; } .section-header-center { text-align: center; flex: 0 0 auto; max-width: 720px; } /* Hero: alineado a intento (h2 principal ~32px en formulario; aquí un punto menos para no “gritar”) */ .section-header-center h2 { font-family: var(--rol-font-ui); font-size: 42.5px; font-weight: 700; color: var(--white); line-height: 1.2; margin: 0; letter-spacing: -0.01em; } .section-header-center p { font-size: 18.5px; color: var(--gray); margin-top: 8px; } .section-header-center .section-tag { display: block; margin-bottom: 12px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13.5px; letter-spacing: 2px; font-weight: 700; color: var(--teal-light); text-transform: uppercase; } @media (max-width: 768px) { .rol-page-header { flex-direction: column; padding-top: 8px; min-height: auto; } .rol-page-header .section-logo { position: static; transform: none; } body > main { padding: 36px 22px 28px; } .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: 4px; background: linear-gradient(90deg, var(--teal), var(--teal-light)); z-index: 1; } .hidden { display: none !important; } .req { color: #ef4444; } .error { color: #ef4444; font-size: 16px; } .text-muted { color: var(--gray); font-size: 16px; font-style: italic; } /* Paso 2: contenedor de tarjetas dependencia (mismo grid que estilos.css) */ #dependenciaVisual { min-height: 8px; } #dependenciaVisual .sv-paso2-wrapper { margin-top: 12px; } /* Tarjetas (button) alineadas con .sv-card-* de estilos.css */ #agenciaButtons button.sv-card-agencia { width: 100%; font-family: inherit; color: inherit; cursor: pointer; padding: 16px 14px; border-radius: 10px; } button.sv-card-duof { font: inherit; text-align: left; width: 100%; color: inherit; -webkit-appearance: none; appearance: none; padding: 12px 14px; border-radius: 8px; gap: 10px; } #agenciaButtons .sv-card-agencia-nombre, button.sv-card-duof .sv-card-duof-nombre { font-size: 14px; line-height: 1.3; } #agenciaButtons .sv-card-agencia-sub { font-size: 13px; } button.sv-card-duof .sv-badge { font-size: 13px; min-width: 38px; padding: 3px 8px; } /* Personal: dos tarjetas por renglón para uso cómodo */ #personalList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } /* Filas de personal */ .personal-row { display: flex; flex-direction: column; gap: 10px; align-items: stretch; padding: 16px 18px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; 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 1px rgba(16, 185, 129, 0.35); } .personal-name { font-weight: 600; color: var(--white); font-size: 16px; line-height: 1.3; } .personal-row select.role-select, .personal-row select { width: 100%; min-width: 0; background: var(--navy2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--white); font-family: inherit; font-size: 16px; } .personal-row select:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(14, 124, 134, 0.15); } @media (max-width: 900px) { #personalList { grid-template-columns: 1fr; } } /* Resumen */ .summary-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem; transition: all 0.2s; } .summary-card:hover { border-color: rgba(0, 168, 168, 0.35); } .summary-card .role-title { font-family: "Syne", sans-serif; font-size: 13.5px; font-weight: 700; letter-spacing: 1.2px; color: var(--teal-light); text-transform: uppercase; margin-bottom: 8px; } .summary-card .role-count { font-family: "Syne", sans-serif; font-size: 30px; font-weight: 800; color: var(--white); line-height: 1.2; } .summary-card .role-names { margin-top: 10px; font-size: 16px; color: var(--gray); max-height: 160px; overflow-y: auto; } #summaryContent { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .loading-spinner { border: 2px solid var(--border); border-top: 2px solid var(--teal-light); border-radius: 50%; width: 26px; height: 26px; animation: rol-spin 0.9s linear infinite; } @keyframes rol-spin { to { transform: rotate(360deg); } } #toast { z-index: 20000; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md, 12px); padding: 16px 22px; color: var(--white); font-size: 17.5px; backdrop-filter: blur(12px); } .btn-outline { border: 1px solid var(--border); background: transparent; color: var(--gray); padding: 14px 26px; border-radius: var(--radius-md, 12px); font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; font-size: 17.5px; letter-spacing: 0.4px; 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 (13px) — 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(12px); } to { opacity: 1; transform: translateY(0); } } .form-actions-row { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 28px; margin-top: 10px; border-top: 1px solid var(--border); } .form-actions-row .btn-submit { flex: 1 1 220px; } /* estilos.css .section-header h2 { font-size: 32px } pisa esto — forzar tamaño tipo “subbloque” (~15px) */ .section-header h2.rol-subsection-title { font-family: var(--rol-font-ui); font-size: 17px; 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: 28px; margin-bottom: 22px; } /* Contador personal (#personalCount): tamaño auxiliar */ #personalCount { font-size: 14px !important; } /* Estado vacío: tamaños acotados */ .rol-empty-state { text-align: center; padding: 40px 20px; } .rol-empty-icon { width: 80px; height: 80px; margin: 0 auto 14px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 42px; } .rol-empty-title { color: var(--gray); font-size: 18.5px; margin: 0; } main footer .text-muted { font-size: 15px; } /* ── Tipografía +20% respecto a estilos.css (misma vista), excepto bloque #personalSection ── */ main .rol-form .field label { font-size: 15px; } #personalSection .field label { font-size: 13px; } main .card .card-title { font-size: 16px; } main .sv-paso { font-size: 13.5px; } main .sv-loading-msg { font-size: 17.5px; } main .sv-card-agencia-nombre { font-size: 15.5px; } main .sv-card-agencia-sub { font-size: 15px; } main .sv-card-duof-nombre { font-size: 15.5px; } main .sv-badge { font-size: 15px; } main .sv-seleccion-actual { font-size: 16px; } main .sv-seleccion-actual .sv-change-btn { font-size: 13.5px; } main .btn-submit { font-size: 17.5px; padding: 14px 22px !important; } /* ---------- RECARGOS SUBSEDES — catálogo, chips, horas (misma escala que rol-funciones referencia) ---------- */ #dependenciasSeleccionadasResumen.rol-picker-results { margin-top: 8px; } .rol-picker-results { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; } .rol-picker-results .picker-item { border: 1px solid rgba(14, 124, 134, 0.35) !important; background: var(--navy2) !important; color: var(--white) !important; border-radius: 10px; padding: 9px 14px; cursor: pointer; font-size: 14px; } .rol-picker-results .picker-item:hover { border-color: var(--teal-light) !important; background: rgba(14, 124, 134, 0.18) !important; } .rol-picker-results .picker-hint { font-size: 16px; line-height: 1.4; max-width: 52rem; } .person-catalog-host { max-height: min(56vh, 620px); overflow-y: auto; padding: 6px 4px 10px 0; } .person-catalog-wrap { display: flex; flex-direction: column; gap: 14px; } .person-catalog-group { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; background: var(--card); } .person-catalog-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); } .person-catalog-head .picker-add-dep { padding: 10px 14px; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 700; } .person-catalog-chips { display: flex; flex-wrap: wrap; gap: 10px; } .picker-item-leg { opacity: 0.75; font-size: 13px; } .catalog-empty-hint { font-style: normal; } .personal-row-meta { font-size: 13px; color: var(--gray); font-weight: 500; } .personal-row select.hour-select { min-width: 6rem; width: auto; background: var(--navy2) !important; color: var(--white) !important; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 16px; color-scheme: dark; } .horario-sep { font-size: 14px; color: var(--gray); flex-shrink: 0; }