/* Dos temas visuales elegibles en Configuración (ver #tema-switcher): "Sello" (por defecto) y "Índice". Mismos nombres de variable en los dos bloques — todo el resto de este archivo lee siempre var(--acento), nunca un hex fijo, así que cambiar de tema es solo cambiar qué bloque de :root está activo (data-theme en , aplicado por app.js antes del primer paint). */ :root, :root[data-theme="sello"] { --bg: #eef1ec; --surface: #ffffff; --surface-2: #f5f7f2; --border: #d7dbd1; --text: #16233a; --text-muted: #5a6350; --accent: #8a6a1e; --accent-dark: #5f4a14; --accent-soft: rgba(138, 106, 30, 0.09); --accent-2: #1f7a54; --accent-2-soft: rgba(31, 122, 84, 0.1); --danger: #b3261e; --danger-soft: rgba(179, 38, 30, 0.09); --warning: #c2650b; --warning-soft: rgba(194, 101, 11, 0.12); --shadow-sm: 0 1px 2px rgba(22, 35, 58, 0.06); --shadow-md: 0 4px 14px rgba(22, 35, 58, 0.08); --shadow-lg: 0 12px 28px rgba(22, 35, 58, 0.14); --font-display: 'Fraunces', Georgia, serif; --font-mono: 'Inter', 'Segoe UI', system-ui, sans-serif; --sidebar-w: 264px; } :root[data-theme="indice"] { --bg: #eaeff3; --surface: #ffffff; --surface-2: #eff3f5; --border: #cbd6de; --text: #1b2733; --text-muted: #526475; --accent: #0e7c86; --accent-dark: #0a5960; --accent-soft: rgba(14, 124, 134, 0.09); --accent-2: #1f7a54; --accent-2-soft: rgba(31, 122, 84, 0.1); --danger: #b3261e; --danger-soft: rgba(179, 38, 30, 0.09); --warning: #b4600a; --warning-soft: rgba(180, 96, 10, 0.1); --shadow-sm: 0 1px 2px rgba(27, 39, 51, 0.06); --shadow-md: 0 4px 14px rgba(27, 39, 51, 0.08); --shadow-lg: 0 12px 28px rgba(27, 39, 51, 0.14); --font-display: 'Archivo', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', monospace; --sidebar-w: 264px; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--accent-soft); color: var(--accent-dark); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #d3dae6; border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: #b9c2d4; } a { color: var(--accent); } button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Íconos SVG inline (reemplazan los emoji: se ven igual en todos los sistemas operativos y heredan el color del texto vía currentColor, incluido el estado activo/hover). */ .icon { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -3px; margin-right: 0.4rem; } /* ---------- SHELL / SIDEBAR ---------- */ .app-shell { display: flex; min-height: 100vh; align-items: stretch; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: 0.7rem; padding: 1.35rem 1.25rem 1.1rem; } /* Sello de marca: dos variantes SVG (una por tema), alternadas por data-theme en . Ninguna usa degradé — un solo trazo en el color de acento del tema activo, como un timbre o instrumento de precisión, no un ícono de app genérico. */ .brand-mark { width: 38px; height: 38px; color: var(--accent); flex-shrink: 0; display: none; } :root[data-theme="sello"] .brand-mark-sello, :root[data-theme="indice"] .brand-mark-indice { display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-text strong { font-family: var(--font-display); font-size: 0.95rem; color: var(--text); } .brand-text span { font-size: 0.7rem; color: var(--text-muted); } .sidebar-empresa { padding: 0.9rem 1.25rem 1.1rem; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; } .sidebar-empresa label { margin-top: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--text-muted); } .btn-block { width: 100%; margin-top: 0.6rem; text-align: center; } .tabs { display: flex; flex-direction: column; gap: 0.15rem; padding: 0 0.75rem; flex: 1; } .tab-btn { display: flex; align-items: center; gap: 0.65rem; background: transparent; border: none; border-left: 3px solid transparent; color: var(--text-muted); padding: 0.6rem 0.75rem; cursor: pointer; font-size: 0.87rem; font-weight: 500; border-radius: 8px; text-align: left; width: 100%; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .tab-icon { width: 1.2rem; height: 1.2rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .tab-icon svg { width: 18px; height: 18px; } .tab-btn:hover { background: var(--surface-2); color: var(--text); } .tab-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; border-left-color: var(--accent); } .sidebar-footer { padding: 1rem 1.25rem 1.25rem; font-size: 0.7rem; color: var(--text-muted); border-top: 1px solid var(--border); margin-top: 0.5rem; } /* Selector de apariencia (Configuración): elige entre los dos temas visuales del panel. Se guarda en localStorage (ver aplicarTema() en app.js) — es una preferencia del navegador, no algo que dependa de la empresa activa ni del usuario en el servidor. */ .tema-switcher { margin-bottom: 0.9rem; } .tema-switcher-label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.4rem; } .tema-switcher-pills { display: flex; gap: 0.3rem; } .tema-btn { flex: 1; padding: 0.35rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font-size: 0.72rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .tema-btn:hover { color: var(--text); border-color: var(--text-muted); } .tema-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* Rol 'lectura': oculta los botones principales de creación/edición. Es solo para no mostrar acciones que el backend igual va a rechazar con 403 — la barrera real está en la API (lib/auth.js#requireAuth), esto es puramente para no confundir a un usuario de solo lectura. */ body.rol-lectura #btn-nuevo-trabajador, body.rol-lectura #btn-guardar-trabajador, body.rol-lectura #btn-guardar-contrato, body.rol-lectura #btn-guardar-beneficios, body.rol-lectura #btn-calcular-masivo, body.rol-lectura #btn-calcular-liq, body.rol-lectura #btn-guardar-item, body.rol-lectura #btn-guardar-vacacion, body.rol-lectura #btn-guardar-licencia, body.rol-lectura #btn-guardar-permiso, body.rol-lectura #btn-calcular-finiquito, body.rol-lectura #btn-guardar-prestador, body.rol-lectura #btn-emitir-boleta, body.rol-lectura #btn-guardar-indices { display: none; } .sesion-usuario { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; } .sesion-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; } #sesion-usuario-nombre { font-weight: 600; font-size: 0.8rem; color: var(--text); line-height: 1.2; } /* ---------- MAIN AREA ---------- */ .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 2rem; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 1rem; position: sticky; top: 0; z-index: 10; } .topbar h1 { font-family: var(--font-display); font-size: 1.1rem; margin: 0; font-weight: 700; } .topbar .topbar-subtitle { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; } #app-root { padding: 1.75rem 2rem 3rem; max-width: 1240px; margin: 0 auto; width: 100%; } .tab-panel.hidden, .form-card.hidden, .modal.hidden, .resultado-box.hidden, .toast.hidden { display: none; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .tab-panel:not(.hidden) { animation: fadeInUp 0.2s ease; } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; flex-wrap: wrap; gap: 0.5rem; } h2 { font-family: var(--font-display); margin: 0 0 1.1rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; } h3 { margin: 0 0 1rem; font-size: 0.95rem; font-weight: 700; color: var(--text); } label { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.3rem; margin-top: 0.85rem; font-weight: 600; } input, select { width: 100%; padding: 0.6rem 0.75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.88rem; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } input:focus, select:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); } input:hover:not(:focus), select:hover:not(:focus) { border-color: #c7cfdd; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; margin-top: 1rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); } .btn-primary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.2rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease; } .btn-primary:active, .btn-ghost:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fff; border: none; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--accent-dark); box-shadow: var(--shadow-md); } .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .btn-primary:disabled, .btn-ghost:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.4rem; } .logo-upload-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .logo-preview { max-height: 48px; max-width: 120px; border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem; background: #fff; } .data-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); } .data-table th, .data-table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; font-variant-numeric: tabular-nums; } .data-table th { color: var(--text-muted); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface-2); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr { transition: background-color 0.1s ease; } .data-table tbody tr:hover { background: var(--accent-soft); } /* Tablas anchas (muchas columnas, ej. Trabajadores): en vez de cortar el texto en varias líneas por columna, la tabla mantiene una sola línea por celda y el contenedor scrollea horizontalmente si no entra completa en la pantalla. */ .table-scroll { overflow-x: auto; border-radius: 12px; } .data-table-nowrap th, .data-table-nowrap td { white-space: nowrap; } /* Fija la(s) primera(s) columna(s) — la identidad de la fila (nombre, RUT) — mientras el resto scrollea horizontalmente. Sin esto, en una tabla ancha con .table-scroll, apenas scrolleas para ver una columna de la derecha (ej. "Estado" o los botones de acción) pierdes de vista a quién corresponde esa fila. .sticky-col-1 fija solo la primera columna; .sticky-col-2 fija las dos primeras (deben tener un ancho fijo vía --sticky-col-1-w/--sticky-col-2-w para que la segunda sepa dónde empezar). El leve shadow a la derecha marca dónde termina la zona fija. Nota: requiere que esas celdas tengan fondo opaco (ya lo tienen, --surface/--surface-2), si no el contenido que scrollea se vería a través. */ /* .data-table tiene overflow:hidden (para recortar las esquinas redondeadas) — eso, sin querer, también vuelve a la propia "ancestro con scroll" a ojos de position:sticky, así que la celda queda pegada a la tabla (que no scrollea) en vez de a .table-scroll (que sí scrollea) y el efecto sticky no se nota. Se anula acá; .table-scroll ya recorta las esquinas por su cuenta (mismo overflow-x:auto), así que no se pierde nada visualmente. */ table.sticky-col-1, table.sticky-col-2 { overflow: visible; } .sticky-col-1 th:first-child, .sticky-col-1 td:first-child, .sticky-col-2 th:first-child, .sticky-col-2 td:first-child, .sticky-col-2 th:nth-child(2), .sticky-col-2 td:nth-child(2) { position: sticky; background: var(--surface); } .sticky-col-1 th:first-child, .sticky-col-2 th:first-child, .sticky-col-2 th:nth-child(2) { background: var(--surface-2); z-index: 2; } .sticky-col-1 td:first-child, .sticky-col-2 td:first-child, .sticky-col-2 td:nth-child(2) { z-index: 1; } .sticky-col-1 th:first-child, .sticky-col-1 td:first-child, .sticky-col-2 th:first-child, .sticky-col-2 td:first-child { left: 0; } .sticky-col-2 th:nth-child(2), .sticky-col-2 td:nth-child(2) { left: var(--sticky-col-1-w, 160px); } .sticky-col-1 td:first-child, .sticky-col-2 td:nth-child(2) { box-shadow: 2px 0 4px -2px rgba(16, 24, 40, 0.15); } /* La celda fija tiene su propio fondo opaco (si no, se vería el contenido scrolleando debajo) — eso tapa el hover normal de la fila, así que se repite acá para que no se sienta "cortado". */ .sticky-col-1 tbody tr:hover td:first-child, .sticky-col-2 tbody tr:hover td:first-child, .sticky-col-2 tbody tr:hover td:nth-child(2) { background: var(--accent-soft); } .modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(2px); } .modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.75rem; width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); } .modal-confirm-mensaje { white-space: pre-wrap; color: var(--text); line-height: 1.55; font-size: 0.9rem; margin: 0.75rem 0 0; } /* Variante de .btn-primary para acciones destructivas (eliminar, etc.): mismo tamaño/forma, color de peligro en vez del acento, para separar visualmente lo irreversible de lo normal. */ .btn-danger { background: var(--danger); } .btn-danger:hover { background: #b91c1c; } .resultado-box { margin-top: 1.25rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; font-size: 0.85rem; white-space: pre-wrap; font-family: 'Consolas', monospace; } .badge { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; } .badge.obligatorio { background: var(--danger-soft); color: var(--danger); } .badge.preventiva { background: var(--warning-soft); color: var(--warning); } .badge.revisar { background: var(--accent-soft); color: var(--accent); } .alert-list { display: flex; flex-direction: column; gap: 0.6rem; } .alert-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); } .alert-item-categoria { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } .alert-item-body { flex: 1; min-width: 0; } .alert-item-nombre { font-weight: 600; } .alert-item-motivo { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.15rem; } .alert-item-dias { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; } .toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: 0.8rem 1.4rem; border-radius: 10px; z-index: 100; box-shadow: var(--shadow-lg); font-size: 0.88rem; font-weight: 500; } .toast.error { border-left-color: var(--danger); color: var(--danger); } .toast.success { border-left-color: var(--accent-2); color: var(--accent-2); } /* ---------- SUB-NAVEGACIÓN DENTRO DE UNA PESTAÑA (pills) ---------- */ /* Para pestañas que mezclan varias cosas (ej. Liquidaciones: lo mensual + configuración + reportes anuales): agrupa el contenido en .subsection y deja que estas pills lo filtren, en vez de un solo scroll largo con todo junto. Mismos tokens de color que .tab-btn.active del sidebar, para que se sienta como la misma familia de navegación. */ .subnav { display: flex; gap: 0.4rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: 0.9rem; flex-wrap: wrap; } .subnav-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.83rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .subnav-btn:hover { color: var(--text); border-color: #c7cfdd; } .subnav-btn.active { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .subsection.hidden { display: none; } .subnav-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.4rem; } .subnav-hint a { color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: none; } .subnav-hint a:hover { text-decoration: underline; } @media (max-width: 900px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; height: auto; position: static; flex-direction: column; } .tabs { flex-direction: row; overflow-x: auto; padding: 0.5rem 0.75rem 0.75rem; } .tab-btn { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; } .tab-btn.active { border-left-color: transparent; border-bottom-color: var(--accent); } .sidebar-footer { display: none; } #app-root { padding: 1.25rem 1rem 2rem; } .topbar { padding: 1rem 1.25rem; } } @media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } } /* ---------- PRINTABLE DOCUMENTS (finiquitos, liquidaciones, boletas) ---------- */ .finiquito-doc { background: #ffffff; color: #111827; border-radius: 10px; padding: 2rem; margin-top: 1.5rem; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .finiquito-doc .fq-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #111827; padding-bottom: 1rem; margin-bottom: 1.5rem; } .finiquito-doc .fq-header img { max-height: 60px; max-width: 200px; } .finiquito-doc h2, .finiquito-doc h3 { color: #111827; } .finiquito-doc table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; } .finiquito-doc table td { padding: 0.4rem 0.25rem; border-bottom: 1px solid #e5e7eb; font-size: 0.9rem; } .finiquito-doc .fq-total { font-weight: 700; font-size: 1.1rem; border-top: 2px solid #111827; } .finiquito-doc .fq-nota { font-size: 0.75rem; color: #4b5563; margin-top: 1.5rem; } .finiquito-doc .fq-nota ul { margin: 0.5rem 0 0; padding-left: 1.25rem; } .finiquito-doc .fq-nota li { margin-bottom: 0.4rem; } .finiquito-doc .fq-firmas { display: flex; justify-content: space-between; margin-top: 3rem; } .finiquito-doc .fq-firma-linea { border-top: 1px solid #111827; width: 40%; text-align: center; padding-top: 0.5rem; font-size: 0.85rem; } .finiquito-doc p { margin: 0 0 1rem; line-height: 1.6; text-align: justify; } /* ---------- DASHBOARD ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; margin-bottom: 1.5rem; } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.35rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; } .kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .kpi-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), #7c3aed); } .kpi-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.5rem; font-weight: 700; } .kpi-value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } :root[data-theme="indice"] .kpi-value { font-family: var(--font-mono); } .chart-bar-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .chart-bar-label { width: 180px; font-size: 0.8rem; color: var(--text-muted); flex-shrink: 0; } .chart-bar-track { flex: 1; background: var(--surface-2); border-radius: 6px; overflow: hidden; height: 22px; border: 1px solid var(--border); } .chart-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #7c3aed); display: flex; align-items: center; justify-content: flex-end; padding-right: 0.5rem; } .chart-bar-value { font-size: 0.75rem; color: #fff; font-weight: 700; white-space: nowrap; }