/* ══════════════════════════════════════════════════════════════════════ SOLICITUDES DE CONTRATO — unificado al sistema --ds-* (2026-09) ══════════════════════════════════════════════════════════════════════ Hasta acá esta pantalla tenía su propia identidad "Broadsheet" (papel claro, serif editorial), fija e independiente del tema global. Por decisión explícita se unificó al mismo lenguaje que el resto de la app: los ~86 selectores .sc-* de este archivo NO cambiaron (misma estructura, mismos nombres), solo se remapearon los custom properties --color-*/--font-*/--radius-* que consumen para que apunten a los tokens --ds-* — así toda la vista hereda el look y el soporte de claro/oscuro/premium sin tocar la lógica de negocio (formularios, firma con canvas, generación de PDF) en view-solicitudes-contrato.js. Los tokens --color-* solo existen dentro de #view-aprobacion (y se repiten en el estilo raíz del modal "Nueva solicitud" — ver SC_TOKENS en el JS —, que cuelga de y por lo tanto no hereda del contenedor de la vista; se actualizó en paralelo). ══════════════════════════════════════════════════════════════════════ */ #view-aprobacion { --color-bg: var(--ds-page-bg); --color-surface: var(--ds-surface); --color-text: var(--ds-text); --color-accent: var(--ds-accent); --color-accent-2: var(--ds-err); --color-divider: var(--ds-border); --color-neutral-100: var(--ds-surface); --color-neutral-800: var(--ds-text-secondary); --color-accent-100: var(--ds-accent-soft); --color-accent-700: var(--ds-accent); --color-accent-800: var(--ds-accent); --color-accent-2-100: var(--ds-err-soft); --color-accent-2-700: var(--ds-err); --color-accent-2-800: var(--ds-err); --font-heading: var(--font); --font-body: var(--font); --radius-md: var(--ds-radius-sm); --radius-lg: var(--ds-radius); --shadow-lg: var(--ds-card-elev-hi); --color-text-muted: var(--ds-text-secondary); --color-text-help: var(--ds-muted); --sc-label-size: 12px; --sc-focus-ring: 0 0 0 3px rgba(79, 70, 229, .15); background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } #view-aprobacion .sc-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 600; margin-bottom: 10px; } #view-aprobacion .sc-h1 { font-family: var(--font-heading); font-weight: 600; font-size: 38px; letter-spacing: -.015em; margin: 0 0 6px; line-height: 1.1; color: var(--color-text); } #view-aprobacion .sc-sub { margin: 0 0 26px; font-size: 14px; color: var(--ds-text-secondary); max-width: 560px; } #view-aprobacion .sc-actions { display: flex; gap: 10px; margin-bottom: 38px; flex-wrap: wrap; align-items: center; } /* .sc-btn is also used by the "Nueva solicitud" modal, which hangs off (not a descendant of #view-aprobacion) — so every rule below is duplicated under .sc-modal too. Both roots carry the same --color-* tokens. */ #view-aprobacion .sc-btn, .sc-modal .sc-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 14px; border-radius: var(--radius-md); padding: 10px 18px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); } #view-aprobacion .sc-btn:hover, .sc-modal .sc-btn:hover { background: rgba(15, 23, 42, .07); } #view-aprobacion .sc-btn.primary, .sc-modal .sc-btn.primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-bg); padding: 10px 20px; } #view-aprobacion .sc-btn.primary:hover, .sc-modal .sc-btn.primary:hover { background: var(--accent-dark, #3730A3); border-color: var(--accent-dark, #3730A3); } #view-aprobacion .sc-btn.ghost { border-color: transparent; background: transparent; color: var(--color-accent); font-size: 13px; padding: 10px 12px; } #view-aprobacion .sc-btn.ghost:hover { background: rgba(79, 70, 229, .1); } #view-aprobacion .sc-kpis { display: flex; gap: 56px; flex-wrap: wrap; margin-bottom: 40px; } #view-aprobacion .sc-kpi-val { font-family: var(--font-heading); font-weight: 600; font-size: 40px; line-height: 1; } #view-aprobacion .sc-kpi-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-muted); margin-top: 6px; } #view-aprobacion .sc-filters { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--color-divider); flex-wrap: wrap; } #view-aprobacion .sc-search { flex: 1 1 320px; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); outline: none; } #view-aprobacion .sc-search::placeholder { color: var(--ds-muted); } #view-aprobacion .sc-search:focus { border-color: var(--color-accent); } #view-aprobacion .sc-select { min-height: 40px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); } #view-aprobacion .sc-layout { display: flex; gap: 44px; align-items: flex-start; flex-wrap: wrap; } #view-aprobacion .sc-table-wrap { flex: 1 1 640px; min-width: 0; width: 100%; } #view-aprobacion .sc-table { border-collapse: collapse; font-size: 14px; width: 100%; } #view-aprobacion .sc-table th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-muted); padding: 10px; border-bottom: 1px solid var(--color-divider); } #view-aprobacion .sc-table td { padding: 12px 10px; border-bottom: 1px solid var(--ds-border); } #view-aprobacion .sc-row { cursor: pointer; } #view-aprobacion .sc-row:hover { background: rgba(15, 23, 42, .04); } #view-aprobacion .sc-row.is-selected { background: rgba(79, 70, 229, .06); } #view-aprobacion .sc-row.is-selected:hover { background: rgba(79, 70, 229, .09); } #view-aprobacion .sc-folio { font-weight: 600; color: var(--color-accent-700); white-space: nowrap; } #view-aprobacion .sc-worker-cell { max-width: 220px; } #view-aprobacion .sc-worker-name, #view-aprobacion .sc-worker-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view-aprobacion .sc-worker-name { font-weight: 600; } #view-aprobacion .sc-worker-sub { font-size: 12px; color: var(--ds-muted); margin-top: 1px; } #view-aprobacion .sc-sla { font-size: 11px; color: var(--color-accent-2-700); font-weight: 600; margin-top: 2px; } #view-aprobacion .sc-tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: .02em; padding: 3px 10px; border-radius: var(--ds-radius-pill); } #view-aprobacion .sc-td-empty { padding: 32px 10px; text-align: center; color: var(--ds-muted); font-size: 13px; } #view-aprobacion .sc-panel { flex: 1 1 320px; max-width: 340px; min-width: 280px; padding: 28px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); } #view-aprobacion .sc-panel-empty { padding: 40px 0; text-align: center; color: var(--ds-muted); font-size: 13px; } #view-aprobacion .sc-panel-eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 600; } #view-aprobacion .sc-panel-title { font-family: var(--font-heading); font-weight: 600; font-size: 22px; margin: 4px 0 8px; } #view-aprobacion .sc-kv-list { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); margin-bottom: 16px; } #view-aprobacion .sc-kv-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } #view-aprobacion .sc-kv-key { color: var(--ds-muted); } #view-aprobacion .sc-kv-val { text-align: right; font-weight: 600; } #view-aprobacion .sc-observacion { font-style: italic; font-size: 13.5px; color: var(--color-accent-2-800); margin: 0 0 16px; } #view-aprobacion .sc-observacion-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-style: normal; font-weight: 600; display: block; margin-bottom: 4px; color: var(--color-accent-2-700); } #view-aprobacion .sc-section { margin-bottom: 16px; } #view-aprobacion .sc-section-hdr { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } #view-aprobacion .sc-section-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-muted); font-weight: 600; } #view-aprobacion .sc-doc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ds-border); font-size: 13px; } #view-aprobacion .sc-doc-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } #view-aprobacion .sc-doc-action { border: 0; background: none; color: var(--color-accent); font: inherit; font-weight: 600; cursor: pointer; padding: 2px; } #view-aprobacion .sc-events { margin-bottom: 20px; } #view-aprobacion .sc-event { padding: 6px 0; border-bottom: 1px solid var(--ds-border); font-size: 12.5px; } #view-aprobacion .sc-event-meta { color: var(--ds-muted); margin-top: 1px; } #view-aprobacion .sc-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; } #view-aprobacion .sc-panel-actions .sc-btn { padding: 8px 14px; font-size: 13px; } /* ── Alineación visual de la bandeja de solicitudes ──────────────── Esta vista ya consume los tokens DS, pero mantenía la composición de "hoja editorial": KPIs sin contenedor, controles transparentes y tabla sin superficie. En oscuro eso eliminaba la jerarquía que sí tienen Dashboard, Funcionarios y Permisos. Conservamos el flujo, no la lógica. */ #view-aprobacion .sc-actions { margin-bottom: 26px; } #view-aprobacion .sc-actions .sc-btn { background: var(--ds-surface); border-color: var(--ds-border); border-radius: var(--ds-radius-sm); box-shadow: none; } #view-aprobacion .sc-actions .sc-btn:hover { background: var(--ds-card); border-color: var(--ds-border-strong); } #view-aprobacion .sc-actions .sc-btn.primary, #view-aprobacion .sc-panel-actions .sc-btn.primary { background: #4F46E5; border-color: #4F46E5; color: #fff; box-shadow: 0 6px 16px rgba(79,70,229,.22); } #view-aprobacion .sc-actions .sc-btn.primary:hover, #view-aprobacion .sc-panel-actions .sc-btn.primary:hover { background: #4338CA; border-color: #4338CA; } #view-aprobacion .sc-kpis { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 12px; margin-bottom: 24px; } #view-aprobacion .sc-kpis > div { min-height: 92px; padding: 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-card); box-shadow: var(--ds-card-elev); } #view-aprobacion .sc-kpi-val { font-size: 30px; } #view-aprobacion .sc-kpi-label { margin-top: 7px; } #view-aprobacion .sc-filters { padding: 12px; margin-bottom: 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-card); } #view-aprobacion .sc-search, #view-aprobacion .sc-select { background: var(--ds-surface); border-color: var(--ds-border); } #view-aprobacion .sc-layout { gap: 18px; flex-wrap: nowrap; } #view-aprobacion .sc-table-wrap { overflow: hidden; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-card); box-shadow: var(--ds-card-elev); } #view-aprobacion .sc-table th { background: var(--ds-surface); } #view-aprobacion .sc-table td { border-color: var(--ds-border); } #view-aprobacion .sc-row:hover { background: var(--ds-surface); } #view-aprobacion .sc-row.is-selected, #view-aprobacion .sc-row.is-selected:hover { background: var(--ds-accent-soft); } #view-aprobacion .sc-panel { border: 1px solid var(--ds-border); background: var(--ds-card); box-shadow: var(--ds-card-elev); } @media (max-width: 980px) { #view-aprobacion .sc-kpis { grid-template-columns: repeat(2, minmax(130px, 1fr)); } #view-aprobacion .sc-layout { flex-wrap: wrap; } #view-aprobacion .sc-panel { max-width: none; } } @media (max-width: 700px) { #view-aprobacion { padding-left: 20px !important; padding-right: 20px !important; } #view-aprobacion .sc-h1 { font-size: 28px; } #view-aprobacion .sc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #view-aprobacion .sc-kpis > div { min-height: 78px; padding: 12px; } } /* ── Modal "Nueva solicitud" — cuelga de , repite los tokens en su propia raíz (ver JS), así que estas reglas se anclan en la clase, no en #view-aprobacion. ────────────────────────────────────────────── */ .sc-modal-overlay { position: fixed; inset: 0; align-items: center; justify-content: center; padding: 18px; background: var(--ds-overlay); z-index: var(--ds-modal-z); /* display is toggled inline (flex/none) by the JS that opens/closes the dialog. */ } .sc-modal { width: min(760px, 100%); max-height: 94vh; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); font-family: var(--font-body); color: var(--color-text); } .sc-modal-hdr { display: flex; justify-content: space-between; align-items: baseline; } .sc-modal-title { font-family: var(--font-heading); font-weight: 600; font-size: 22px; } .sc-modal-close { cursor: pointer; background: none; border: none; color: var(--ds-muted); font-size: 14px; font-family: var(--font-heading); } .sc-modal-close:hover { color: var(--color-text); } .sc-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); width: fit-content; } .sc-seg-opt { display: inline-flex; align-items: center; padding: 7px 14px; font-size: 13px; cursor: pointer; color: var(--color-text); border-left: 1px solid var(--color-divider); } .sc-seg-opt:first-child { border-left: none; } .sc-seg-opt.is-active { background: var(--color-accent); color: var(--color-bg); } /* .sc-grid / .sc-field-help / .sc-check-grid / .sc-sign-canvas are shared with the (unrestyled) "Oficio de solicitud" modal in js/view-solicitudes-contrato.js — crearModalOficio() reuses these exact class names but its root never gets the --color-* tokens above. Every value here falls back to the app's normal design-system token (--border, --surface, --accent…) so that modal keeps its original look untouched; only a root carrying --color-* (the "Nueva solicitud" modal, via SC_TOKENS) picks up the Broadsheet skin. */ .sc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } .sc-grid label { display: grid; gap: 6px; font-size: var(--sc-label-size, .72rem); font-weight: 700; color: var(--color-text-muted, var(--muted)); } .sc-grid input, .sc-grid select, .sc-grid textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: var(--color-text, var(--text-strong)); background: var(--color-bg, var(--surface)); border: 1.5px solid var(--color-divider, var(--border)); border-radius: var(--radius-md, 11px); padding: 8px 10px; } .sc-grid input:focus, .sc-grid select:focus, .sc-grid textarea:focus { outline: none; border-color: var(--color-accent, var(--accent)); box-shadow: var(--sc-focus-ring, var(--focus-ring, 0 0 0 3px rgba(79,70,229,.15))); } .sc-grid textarea { resize: vertical; } .sc-horario-wrap { display:grid; gap:9px; } .sc-horario-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .sc-horario-head > div:first-child { display:grid; gap:5px; } .sc-horario-head label { font-size:var(--sc-label-size, .72rem); font-weight:700; color:var(--color-text-muted, var(--muted)); } .sc-horario-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; } .sc-horario-action { border:1px solid var(--color-divider, var(--border)); border-radius:var(--radius-md, 8px); padding:5px 8px; background:transparent; color:var(--color-accent-700, var(--accent)); cursor:pointer; font:inherit; font-size:11px; font-weight:700; } .sc-horario-action:hover { background:var(--color-accent-100, var(--surface-2)); } .sc-horario-semanal { border:1px solid var(--color-divider, var(--border)); border-radius:var(--radius-md, 10px); overflow:hidden; background:rgba(255,255,255,.34); } .sc-horario-columns, .sc-horario-dia { display:grid; grid-template-columns:1.15fr 1.15fr .9fr .9fr 1.1fr; gap:8px; align-items:center; padding:7px 9px; } .sc-horario-columns { background:rgba(32,30,29,.06); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--color-text-help, var(--muted)); } .sc-horario-dia { border-top:1px solid rgba(32,30,29,.09); } .sc-horario-dia strong { font-size:12px; } .sc-horario-dia select, .sc-horario-dia input { min-width:0; padding:6px 7px; font-size:12px; } .sc-horario-dia input:disabled { opacity:.48; background:transparent; } .sc-field-help { font-size: 11px; font-weight: 500; line-height: 1.35; color: var(--color-text-help, var(--muted)); } .sc-field-help.is-ok { color: var(--color-accent-700, var(--ok-text)); font-weight: 700; } .sc-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; } .sc-grid .sc-check-grid label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-text, var(--text-strong)); } .sc-grid .sc-check-grid input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 17px; padding: 0; accent-color: var(--color-accent, var(--accent)); } .sc-sign-canvas { width: 100%; height: 150px; touch-action: none; cursor: crosshair; background: #fff; border: 1.5px dashed var(--color-divider, var(--border)); border-radius: var(--radius-md, 12px); } /* Solo la usa el formulario nuevo — sin equivalente previo, sin riesgo de colisión. */ .sc-fieldset { grid-column: 1/-1; border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 14px 16px; } .sc-fieldset legend { padding: 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text); } .sc-modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; } @media (max-width: 700px) { .sc-grid, .sc-check-grid { grid-template-columns: 1fr; } .sc-horario-head { display:grid; } .sc-horario-actions { justify-content:flex-start; } .sc-horario-semanal { overflow-x:auto; } .sc-horario-columns, .sc-horario-dia { min-width:590px; } }