/* Fase 10 (item 7): reemplazo progresivo de style="display:none" por clases - .is-hidden gana SIEMPRE (!important a proposito, mismo criterio que .d-none de Bootstrap) sin importar que otra regla de display tenga el elemento (ej. .active-batch-banner declara display:flex por defecto). */ .is-hidden { display: none !important; } :root { /* ---- Tokens de marca SIImplifica ---- */ --color-navy: #081A33; --color-indigo: #151C4D; --color-violet: #7C3AED; --color-violet-light: #A855F7; /* Ajustado de #F7F8FC a #F6F7FB (pedido de diseño RRHH: casi el mismo tono, un pixel de diferencia, pero pidieron el valor exacto). */ --color-background: #F6F7FB; --color-card: #FFFFFF; /* Ajustado de #E5E7EB a #E2E8F0 (mismo motivo que el fondo de pagina). */ --color-border: #E2E8F0; --color-violet-soft: #F1ECFC; --color-indigo-soft: #EDEFF8; /* ---- Alias: el resto del CSS sigue usando estos nombres ---- */ --sidebar-bg: var(--color-navy); --primary: var(--color-violet); --primary-dark: #6D28D9; --secondary: var(--color-violet-light); --bg: var(--color-background); --card: var(--color-card); --text: var(--color-navy); --muted: #64748B; --success: #10B981; --success-bg: #ECFDF5; --danger: #EF4444; --danger-bg: #FEF2F2; --warning-bg: #FFFBEB; --warning: #B45309; --info: #2563EB; --info-bg: #EFF6FF; --border: var(--color-border); /* ---- Segunda pasada visual RR.HH. (Ago 2026) ---- */ /* Radios propios de esa pantalla: el resto del sitio ya tiene sus tarjetas ajustadas a 16-18px y no es parte de este pedido, asi que estos dos tokens solo se usan dentro de #view-rrhh (ver mas abajo). */ --radius-card: 12px; --radius-control: 8px; /* Morado suave para hovers/fondos suaves. --color-violet-soft (#F1ECFC) ya existe pero se usa en iconos de todo el sitio (procesos, info-box); se agrega este con el tono exacto pedido para no correr el look de esas otras pantallas al tocarlo. */ --primary-soft: #F3E8FF; --primary-soft-border: #DDD6FE; /* --warning (#B45309) es un naranja mas oscuro elegido a proposito para que el TEXTO tenga contraste sobre fondo blanco/--warning-bg - con el naranja "puro" de abajo el texto se ve palido. Este token es solo para rellenos de icono o detalles decorativos, nunca para texto. */ --warning-icon: #F59E0B; } * { box-sizing: border-box; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); margin: 0; } h1, h2, h3 { margin: 0; font-weight: 700; } a { color: var(--primary); text-decoration: none; } /* Tapa TODA la pantalla por encima de cualquier cosa (position:fixed + z-index alto) mientras se sabe si hay sesion o no - antes era un bloque normal que solo ocupaba lugar arriba del resto, asi que durante una recarga lenta se veian los dos apilados (el cartel de carga y, debajo, el contenido de la pagina anterior que el navegador mantiene pintado un rato). Con esto tapa de verdad, no se ve nada de atras. */ #boot-loading { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.9rem; } /* Fase 10: public/login.html es su propio documento (ya no comparte pagina con #app-box) - siempre visible por defecto, no hay ningun JS que decida "mostrar login o app" en este archivo compartido. */ #login-box { display: flex; } /* ---------- Login ---------- */ .auth-wrapper { min-height: 100vh; align-items: center; justify-content: center; padding: 16px; position: relative; overflow: hidden; background: var(--color-background); } .auth-blob { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 32% 32%, rgba(124,58,237,0.18), rgba(124,58,237,0.05) 70%); } .auth-blob.b1 { width: 460px; height: 460px; top: -180px; right: -160px; } .auth-blob.b2 { width: 420px; height: 420px; bottom: -180px; left: -160px; } .auth-dots { position: absolute; width: 108px; height: 108px; pointer-events: none; background-image: radial-gradient(rgba(124,58,237,0.35) 1.4px, transparent 1.4px); background-size: 14px 14px; } .auth-dots.d1 { top: 26px; left: 26px; } .auth-dots.d2 { bottom: 26px; right: 26px; } .auth-card { background: var(--card); width: 100%; max-width: 440px; margin: 0 auto; border-radius: 24px; box-shadow: 0 24px 60px rgba(11,16,48,0.14), 0 1px 3px rgba(11,16,48,0.06); position: relative; z-index: 1; padding: 40px 40px 34px; } .auth-header { text-align: center; margin-bottom: 26px; } .auth-form-icon { width: 84px; height: 84px; margin-bottom: 16px; } .auth-wordmark { font-size: 1.7rem; line-height: 1.15; color: var(--text); } .auth-tagline { color: var(--primary); font-size: 0.82rem; font-weight: 600; margin: 6px 0 0; } .auth-field { position: relative; display: block; margin-bottom: 14px; } .auth-field-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; } .auth-field input { width: 100%; font-size: 0.9rem; padding: 13px 16px 13px 42px; margin: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; outline: none; transition: border-color .15s, background .15s; } .auth-field input:focus { background: #fff; border-color: var(--primary); } .auth-field-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 4px; display: flex; } .auth-field-toggle svg { width: 17px; height: 17px; } .auth-field-toggle:hover { color: var(--primary); } .auth-submit { margin-top: 6px; border-radius: 14px; padding: 13px 20px; font-size: 0.92rem; } .auth-error { color: var(--danger); font-size: 0.85rem; min-height: 1.2em; margin-top: 12px; text-align: center; } .auth-forgot { display: block; text-align: center; font-size: 0.82rem; color: var(--primary); font-weight: 600; margin-top: 18px; } .auth-forgot:hover { color: var(--primary-dark); } /* ---------- App shell ---------- */ #app-box { display: flex; min-height: 100vh; } .sidebar { width: 240px; flex-shrink: 0; background: var(--sidebar-bg); color: #cbd5e1; display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh; transition: width .15s; } .sidebar-brand { display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 700; padding: 6px 8px 14px; } .sidebar-brand .brand-badge { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: block; } .sidebar-brand-text { font-size: 0.98rem; letter-spacing: -0.01em; white-space: nowrap; } /* Boton para minimizar el menu a solo iconos - el estado se guarda en localStorage (ver toggleSidebarCollapsed) para que no vuelva a expandirse solo al recargar la pagina. */ .sidebar-collapse-btn { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #94a3b8; border-radius: 8px; padding: 7px 10px; font-size: 0.78rem; cursor: pointer; margin-bottom: 16px; transition: background .15s, color .15s; } .sidebar-collapse-btn:hover { background: rgba(255,255,255,0.06); color: #fff; } .sidebar-collapse-btn svg { flex-shrink: 0; transition: transform .15s; } .sidebar-nav { display: flex; flex-direction: column; gap: 5px; } .sidebar-nav-group-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; padding: 14px 13px 6px; white-space: nowrap; overflow: hidden; } .sidebar-nav-group-label:first-child { padding-top: 2px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; color: #cbd5e1; font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; } .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; } .nav-item .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; } .nav-item.active { background: rgba(124,58,237,0.22); color: #fff; box-shadow: inset 3px 0 0 var(--primary); } .sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); } .sidebar-footer .account-chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); min-width: 0; width: 100%; margin-bottom: 10px; } .sidebar-footer .account-chip:hover { border-color: rgba(255,255,255,0.3); } .sidebar-footer .account-chip-title { color: #fff; } .sidebar-footer .account-chip-email { color: #94a3b8; } .sidebar-footer .account-chip svg { color: #94a3b8; } .sidebar-footer button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.15); color: #cbd5e1; padding: 9px 12px; border-radius: 10px; font-size: 0.85rem; cursor: pointer; transition: background .15s; } .sidebar-footer button:hover { background: rgba(255,255,255,0.08); color: #fff; } /* ---------- Sidebar minimizado (solo iconos) ---------- */ .sidebar.collapsed { width: 72px; } .sidebar.collapsed .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; } .sidebar.collapsed .sidebar-brand-text, .sidebar.collapsed .sidebar-collapse-btn span, .sidebar.collapsed .sidebar-nav-group-label, .sidebar.collapsed .nav-item .nav-label, .sidebar.collapsed .account-chip > div, .sidebar.collapsed .account-chip svg, .sidebar.collapsed .sidebar-footer button span { display: none; } .sidebar.collapsed .sidebar-collapse-btn { justify-content: center; } .sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); } .sidebar.collapsed .nav-item { justify-content: center; padding: 11px; } .sidebar.collapsed .sidebar-footer .account-chip { justify-content: center; padding: 8px; gap: 0; } .main-area { flex: 1; min-width: 0; padding: 40px 48px 70px; } .topheader { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; } .topheader h1 { font-size: 1.6rem; } .topheader p { color: var(--muted); font-size: 0.92rem; margin-top: 4px; } .account-chip { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px; cursor: pointer; transition: border-color .15s; min-width: 220px; } .account-chip:hover { border-color: var(--primary); } .account-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .dot-success { background: var(--success); } .dot-warning { background: #F59E0B; } .dot-muted { background: var(--muted); } .dot-danger { background: var(--danger); } .account-chip > div { min-width: 0; flex: 1; } .account-chip-title { font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-chip-email { font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-chip svg { margin-left: auto; width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; } .view { display: none; } .view.active { display: block; } /* ---------- Stat cards ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 20px; } .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px 22px; display: flex; align-items: center; gap: 16px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); } .stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-icon svg { width: 20px; height: 20px; } .stat-icon.i-indigo { background: var(--color-indigo-soft); color: var(--color-indigo); } .stat-icon.i-violet { background: var(--color-violet-soft); color: var(--primary); } .stat-icon.i-success { background: var(--success-bg); color: var(--success); } .stat-icon.i-danger { background: var(--danger-bg); color: var(--danger); } /* Usado por el indicador "Vencen en 30 días" de RRHH - color de relleno de icono, no de texto (ver --warning-icon en :root). */ .stat-icon.i-warning { background: var(--warning-bg); color: var(--warning-icon); } .stat-label { font-size: 0.8rem; color: var(--muted); } .stat-value { font-size: 1.5rem; font-weight: 700; margin-top: 2px; } /* ---------- Layout grid ---------- */ .dashboard-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: stretch; } .col-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .col-side { display: flex; flex-direction: column; gap: 20px; } /* Solo la tarjeta "Siguientes en la cola" del monitor de ejecucion masiva: con align-items:stretch en .dashboard-grid, esta tarjeta crece para quedar a la misma altura que "Empresa actual" de la izquierda, en vez de quedar mas corta y desalineada. */ #batch-queue-card { flex: 1; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 28px 30px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; gap: 10px; flex-wrap: wrap; } .card h2 { font-size: 1.05rem; } .card .muted { color: var(--muted); font-size: 0.85rem; margin-top: 4px; margin-bottom: 18px; } /* ---------- Steps ---------- */ .steps { display: flex; align-items: center; margin-bottom: 20px; } .step { display: flex; align-items: center; gap: 10px; } .step-num { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; } .step-text-title { font-size: 0.85rem; font-weight: 600; } .step-text-sub { font-size: 0.72rem; color: var(--muted); } .step-line { flex: 1; height: 1px; background: repeating-linear-gradient(to right, var(--border) 0 6px, transparent 6px 10px); margin: 0 14px; } .field-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; } .field-row select, .field-row input { font-size: 0.88rem; padding: 0 14px; height: 42px; margin: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 11px; outline: none; transition: border-color .15s, background .15s; } .field-row select { flex: 1; min-width: 160px; } .field-row input:focus, .field-row select:focus { background: #fff; border-color: var(--primary); } /* ---------- Select con busqueda (ej. empresa en "Ejecutar automatizacion") ---------- */ .searchable-select { position: relative; flex: 1; min-width: 160px; } .searchable-select input { width: 100%; } .searchable-select-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; background: #fff; border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 10px 25px rgba(15,23,42,0.12); max-height: 240px; overflow-y: auto; padding: 4px; } .searchable-select-dropdown.open { display: block; } .searchable-select-option { padding: 9px 12px; border-radius: 8px; font-size: 0.85rem; cursor: pointer; } .searchable-select-option:hover, .searchable-select-option.active { background: var(--bg); } .searchable-select-option.all-option { font-weight: 600; color: var(--primary); border-bottom: 1px solid #F1F5F9; margin-bottom: 4px; border-radius: 8px 8px 0 0; } .searchable-select-empty { padding: 9px 12px; font-size: 0.85rem; color: var(--muted); } .btn-primary { background: linear-gradient(135deg, var(--color-violet), var(--primary-dark)); color: #fff; border: none; padding: 11px 20px; border-radius: 11px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: filter .15s, opacity .15s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn-primary:hover { filter: brightness(0.93); } .btn-primary:disabled { opacity: 0.65; cursor: not-allowed; } .btn-block { width: 100%; } .btn-secondary { background: #fff; color: var(--text); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background .15s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn-secondary:hover { background: var(--bg); } .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 7px 14px; border-radius: 8px; font-size: 0.82rem; cursor: pointer; transition: background .15s; } .btn-ghost:hover { background: var(--bg); } .btn-danger { background: var(--danger); color: #fff; border: none; padding: 10px 18px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .btn-danger:hover { background: #dc2626; } .info-box { display: flex; gap: 10px; background: var(--color-violet-soft); color: #5B21B6; border-radius: 12px; padding: 12px 14px; font-size: 0.8rem; line-height: 1.4; margin-top: 4px; } .info-box svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; } .spinner { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .spinner-dark { border-color: rgba(79,70,229,0.25); border-top-color: var(--primary); } /* ---------- Ejecucion masiva ---------- */ .active-batch-banner { display: flex; align-items: center; gap: 10px; background: #EEF2FF; border: 1px solid #C7D2FE; color: #3730A3; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; cursor: pointer; font-size: 0.86rem; transition: background .15s; } .active-batch-banner:hover { background: #E0E7FF; } .active-batch-banner-cta { margin-left: auto; font-weight: 700; flex-shrink: 0; } tr.batch-row-active { background: #F5F3FF !important; } tr.batch-row-active td:first-child { box-shadow: inset 3px 0 0 var(--primary); } .queue-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #F1F5F9; font-size: 0.85rem; } .queue-item:last-child { border-bottom: none; } .queue-item-num { width: 24px; height: 24px; border-radius: 50%; background: #F1F5F9; color: var(--muted); font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .queue-item-name { font-weight: 600; } .queue-item-rut { color: var(--muted); font-size: 0.76rem; } .batch-progress-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; } .batch-progress-main { flex: 1 1 320px; min-width: 260px; } .batch-progress-timings { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 28px; flex: 0 0 auto; } .batch-timing { display: flex; align-items: center; gap: 8px; } .batch-timing svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; } .batch-timing-value { font-weight: 700; font-size: 0.95rem; } .filter-pills { display: flex; gap: 6px; flex-wrap: wrap; } .filter-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--border); color: var(--muted); font-size: 0.82rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .filter-pill:hover { background: var(--bg); } .filter-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; } .filter-pill .pill-count { background: rgba(0,0,0,0.08); border-radius: 999px; padding: 1px 7px; font-size: 0.72rem; font-weight: 700; } .filter-pill.active .pill-count { background: rgba(255,255,255,0.25); } .batch-summary-stats .stat-card { padding: 12px 16px; gap: 0; flex: 1 1 140px; } .batch-summary-stats .stat-value { font-size: 1.2rem; } .batch-autoretry-toggle { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--muted); cursor: pointer; } .batch-autoretry-toggle input { margin: 0; accent-color: var(--primary); } /* ---------- Search + table ---------- */ .search-box { position: relative; margin-bottom: 14px; } .search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); } .search-box input { width: 100%; height: 42px; padding: 0 12px 0 36px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); font-size: 0.85rem; outline: none; } .search-box input:focus { background: #fff; border-color: var(--primary); } table.modern { width: 100%; border-collapse: collapse; } table.modern thead th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--border); } table.modern tbody td { padding: 18px 16px; font-size: 0.88rem; border-bottom: 1px solid #F1F5F9; vertical-align: middle; } table.modern tbody tr:last-child td { border-bottom: none; } table.modern tbody tr:hover { background: #FAFBFF; } .empty-row td { text-align: center; color: var(--muted); padding: 32px 10px; font-size: 0.85rem; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; } .badge-success { background: var(--success-bg); color: var(--success); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-muted { background: #F1F5F9; color: var(--muted); } .badge-primary { background: var(--primary-soft); color: var(--primary-dark); } .badge-info { background: var(--info-bg); color: var(--info); } .row-menu-btn { background: transparent; border: none; cursor: pointer; padding: 5px 8px; border-radius: 6px; color: var(--muted); } .row-menu-btn:hover { background: var(--bg); } .row-menu { position: absolute; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 25px rgba(15,23,42,0.12); min-width: 130px; z-index: 60; padding: 4px; display: none; } .row-menu button { width: 100%; text-align: left; background: transparent; border: none; padding: 8px 10px; border-radius: 8px; font-size: 0.83rem; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 8px; } .row-menu button:hover { background: var(--bg); } .row-menu button.danger { color: var(--danger); } .row-menu button.danger:hover { background: var(--danger-bg); } /* ---------- Uwigo status ---------- */ .uwigo-status-box { display: flex; align-items: center; gap: 10px; background: var(--success-bg); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; } .uwigo-status-box.warn { background: var(--warning-bg); } .uwigo-status-box.muted { background: #F1F5F9; } .uwigo-status-box svg { width: 18px; height: 18px; flex-shrink: 0; } .uwigo-status-box.ok svg, .uwigo-status-box.ok .ust-title { color: var(--success); } .uwigo-status-box.warn svg, .uwigo-status-box.warn .ust-title { color: var(--warning); } .uwigo-status-box.muted svg, .uwigo-status-box.muted .ust-title { color: var(--muted); } .ust-title { font-size: 0.86rem; font-weight: 600; } .ust-sub { font-size: 0.76rem; color: var(--muted); margin-top: 1px; } .uwigo-account-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border); } .uwigo-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden; } .uwigo-avatar img { width: 100%; height: 100%; object-fit: cover; } .uwigo-note { display: flex; gap: 10px; font-size: 0.78rem; color: var(--muted); padding: 12px 0; border-top: 1px solid var(--border); line-height: 1.4; } .uwigo-note svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; margin-top: 1px; } /* ---------- Recent activity ---------- */ .activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid #F1F5F9; } .activity-item:last-child { border-bottom: none; } .activity-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .activity-icon svg { width: 15px; height: 15px; } .activity-icon.ok { background: var(--success-bg); color: var(--success); } .activity-icon.err { background: var(--danger-bg); color: var(--danger); } .activity-icon.run { background: var(--color-violet-soft); color: var(--primary); } .activity-title { font-size: 0.85rem; font-weight: 600; } .activity-sub { font-size: 0.76rem; color: var(--muted); margin-top: 1px; } .activity-meta { margin-left: auto; text-align: right; flex-shrink: 0; } .activity-time { font-size: 0.72rem; color: var(--muted); } .error-detail { background: var(--danger-bg); color: #991B1B; border-radius: 10px; padding: 10px 12px; font-size: 0.78rem; font-family: ui-monospace, monospace; white-space: pre-wrap; margin-top: 8px; } .stepper { display: flex; gap: 3px; margin-bottom: 3px; } .step-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5e7eb; flex-shrink: 0; } .step-dot.step-done { background: var(--success); } .step-dot.step-current { background: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.25); } .stepper-label { font-size: 0.7rem; color: var(--muted); white-space: nowrap; text-transform: capitalize; } /* ---------- Historial: toolbar de filtros ---------- */ .hist-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; } .hist-toolbar .search-box { flex: 1 1 220px; margin-bottom: 0; } .hist-toolbar select { font-size: 0.85rem; padding: 11px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; outline: none; color: var(--text); height: 42px; } .hist-toolbar .search-box input { height: 42px; padding-top: 0; padding-bottom: 0; } .hist-toolbar select:focus { border-color: var(--primary); } /* ---------- Historial: flujo del proceso ---------- */ .flow-grid { display: flex; gap: 0; align-items: flex-start; overflow-x: auto; margin-top: 20px; } .flow-step { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 165px; padding-right: 16px; } .flow-step-num { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.88rem; font-weight: 700; flex-shrink: 0; color: #fff; } .flow-step:nth-child(1) .flow-step-num { background: var(--color-navy); } .flow-step:nth-child(2) .flow-step-num { background: var(--color-indigo); } .flow-step:nth-child(3) .flow-step-num { background: var(--primary-dark); } .flow-step:nth-child(4) .flow-step-num { background: var(--color-violet); } .flow-step:nth-child(5) .flow-step-num { background: var(--color-violet-light); } .flow-step-title { font-size: 0.88rem; font-weight: 700; margin-top: 6px; } .flow-step-desc { font-size: 0.76rem; color: var(--muted); margin-top: 4px; line-height: 1.4; } .flow-arrow { flex-shrink: 0; align-self: center; color: var(--border); width: 18px; height: 18px; margin: 0 2px; } /* ---------- Historial: barra de progreso animada ---------- */ .progress-wrap { width: 190px; flex-shrink: 0; } .progress-track { position: relative; height: 10px; background: #EEF0F3; border-radius: 999px; margin-bottom: 8px; box-shadow: inset 0 1px 2px rgba(15,23,42,0.06); } .progress-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; width: 0%; transition: width .6s cubic-bezier(.4,0,.2,1), background-color .3s ease; background-image: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0)); } .progress-fill.fill-done { background-color: var(--success); } .progress-fill.fill-error { background-color: var(--danger); } .progress-fill.fill-running { background-color: var(--primary); } .progress-fill.fill-muted { background-color: var(--muted); } .progress-marker { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); transform: translate(-50%, -50%); transition: left .6s cubic-bezier(.4,0,.2,1), border-color .3s ease; box-shadow: 0 1px 4px rgba(15,23,42,0.25); } .progress-marker.fill-error { border-color: var(--danger); box-shadow: 0 0 0 5px rgba(239,68,68,0.16); } .progress-marker.fill-running.pulse { border-color: var(--primary); animation: markerPulse 1.2s ease-in-out infinite; } .progress-marker.fill-done { display: none; } .progress-marker.fill-muted { display: none; } @keyframes markerPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(79,70,229,0.35); } 50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(79,70,229,0); } } .progress-label { font-size: 0.76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 190px; } .progress-label b { color: var(--text); font-weight: 700; } .progress-label.is-error { color: var(--danger); } .progress-label.is-error b { color: var(--danger); } /* ---------- Historial: progreso multi-mes ("Todos los meses") ---------- */ .month-chip-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0; } .month-chip-mini { font-size: 0.62rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; letter-spacing: 0.01em; } .month-chip-mini.m-done { background: var(--success-bg); color: var(--success); } .month-chip-mini.m-running { background: var(--color-violet-soft); color: var(--primary); box-shadow: 0 0 0 1.5px var(--primary); } .month-chip-mini.m-error { background: var(--danger-bg); color: var(--danger); box-shadow: 0 0 0 1.5px var(--danger); } .month-chip-mini.m-pending { background: #F1F5F9; color: var(--muted); } .months-current-line { display: flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--muted); margin-top: 4px; } .months-current-line svg { flex-shrink: 0; } .months-current-line b { color: var(--text); } /* ---------- Historial: fila expandida "avance por meses" ---------- */ .months-expand-row td { background: #FAFBFC; padding: 22px 24px !important; border-bottom: 1px solid #F1F5F9 !important; } .months-panel-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; margin: 18px 0; align-items: start; } @media (max-width: 900px) { .months-panel-grid { grid-template-columns: 1fr; } } .months-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .month-card { display: flex; flex-direction: column; gap: 4px; text-align: left; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; cursor: pointer; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .month-card:hover { border-color: var(--primary); } .month-card.selected { border-color: var(--primary); box-shadow: 0 0 0 1.5px var(--primary); } .month-card-top { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; } .month-card-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .month-card.m-done .month-card-dot { background: var(--success); } .month-card.m-running .month-card-dot { background: var(--primary); } .month-card.m-error .month-card-dot { background: var(--danger); } .month-card.m-pending .month-card-dot { background: #CBD5E1; } .month-card-status { font-size: 0.7rem; color: var(--muted); padding-left: 15px; } .month-card.m-done .month-card-status { color: var(--success); } .month-card.m-running .month-card-status { color: var(--primary); } .month-card.m-error .month-card-status { color: var(--danger); } /* Varios carriles activos (varias cuentas de Uwigo) muestran una tarjeta de "empresa actual" cada uno, una al lado de la otra - se apilan si no entran en el ancho disponible en vez de comprimirse ilegibles. */ .batch-current-company-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; } .batch-current-company-item { flex: 1 1 320px; min-width: 280px; padding-right: 20px; } .batch-current-company-item:not(:last-child) { border-right: 1px solid var(--border); } .batch-current-company-item-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; } /* flex-wrap en vez de scroll horizontal: con 2+ carriles activos cada tarjeta de "Empresa actual" tiene poco ancho, y los 5 pasos del flujo no entraban sin una barrita horizontal (había que hacer zoom out del navegador para verlos todos). Envolviendo a la linea siguiente en vez de recortar, los 5 quedan visibles siempre sin scroll ni zoom. */ .flow-dynamic-grid { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 14px; padding: 6px 2px 16px; } .flow-step-dynamic { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; flex: 1 1 106px; min-width: 106px; } .fsd-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: #fff; margin-bottom: 4px; flex-shrink: 0; } .flow-step-dynamic.fsd-done .fsd-num { background: var(--success); } .flow-step-dynamic.fsd-running .fsd-num { background: var(--primary); box-shadow: 0 0 0 4px rgba(79,70,229,0.16); } .flow-step-dynamic.fsd-error .fsd-num { background: var(--danger); } .flow-step-dynamic.fsd-pending .fsd-num { background: #E2E8F0; color: var(--muted); } .fsd-title { font-size: 0.78rem; font-weight: 700; } .fsd-desc { font-size: 0.68rem; color: var(--muted); line-height: 1.3; max-width: 108px; } .fsd-status { font-size: 0.66rem; font-weight: 700; margin-top: 3px; padding: 1px 8px; border-radius: 999px; } .flow-step-dynamic.fsd-done .fsd-status { background: var(--success-bg); color: var(--success); } .flow-step-dynamic.fsd-running .fsd-status { background: var(--color-violet-soft); color: var(--primary); } .flow-step-dynamic.fsd-error .fsd-status { background: var(--danger-bg); color: var(--danger); } .flow-step-dynamic.fsd-pending .fsd-status { background: #F1F5F9; color: var(--muted); } .fsd-mini { font-size: 0.66rem; color: var(--primary); font-weight: 700; margin-top: 4px; white-space: nowrap; } .fsd-connector { flex: 0 0 24px; height: 2px; background: #E2E8F0; margin-top: 16px; } .fsd-connector.on { background: var(--success); } .legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); margin-top: 6px; } .legend .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: middle; } /* ---------- Detalle de empresa: tabs ---------- */ .ced-tabs { display: flex; gap: 4px; padding: 6px 26px 0; border-bottom: 1px solid var(--border); } .ced-tab { background: transparent; border: none; padding: 13px 16px; font-size: 0.87rem; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; } .ced-tab:hover { color: var(--text); } .ced-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .ced-panel { display: none; } .ced-panel.active { display: block; } /* ---------- RR.HH.: tabs de la seccion (Resumen/Empresas/Trabajadores/ Calendario) y tabs internos del drawer de detalle de empresa. Mismo look que .ced-tabs/.ced-tab/.ced-panel de arriba, pero con clases propias: esas se togglean con querySelectorAll SIN scopear por contenedor (ver switchCompanyDetailTab), asi que reusar las mismas clases tocaria sin querer los tabs del otro drawer. ---------- */ .rrhh-tabs, .rrhh-drawer-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .rrhh-tab, .rrhh-drawer-tab { background: transparent; border: none; padding: 10px 18px; font-size: 0.88rem; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; transition: color .15s, background .15s; } .rrhh-tab:not(.active):hover, .rrhh-drawer-tab:not(.active):hover { color: var(--text); background: var(--primary-soft); } .rrhh-tab.active, .rrhh-drawer-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .rrhh-panel, .rrhh-drawer-panel { display: none; } .rrhh-panel.active, .rrhh-drawer-panel.active { display: block; } .rrhh-ind-card { cursor: pointer; transition: border-color .15s, transform .1s; border: 1px solid transparent; } .rrhh-ind-card:hover { border-color: var(--primary); } .rrhh-ind-card:active { transform: scale(0.98); } .rrhh-incidencia { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #F1F5F9; } .rrhh-incidencia:last-child { border-bottom: none; } .rrhh-incidencia-prio { width: 6px; align-self: stretch; border-radius: 4px; flex-shrink: 0; min-height: 36px; } .rrhh-incidencia-prio.alta { background: var(--danger); } .rrhh-incidencia-prio.media { background: var(--warning-icon); } /* "baja" = incidencia informativa (no critica/advertencia) - el pedido de diseño pide morado/azul para este nivel en vez del gris generico que tenia antes, para diferenciarla mejor de las otras dos prioridades. */ .rrhh-incidencia-prio.baja { background: var(--primary); } .rrhh-activity-item { display: flex; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #F1F5F9; font-size: 0.82rem; align-items: flex-start; } .rrhh-activity-item:last-child { border-bottom: none; } .rrhh-activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .rrhh-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; } .rrhh-cal-daynames, .rrhh-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .rrhh-cal-daynames { margin-bottom: 6px; font-size: 0.72rem; font-weight: 600; color: var(--muted); text-align: center; text-transform: uppercase; } .rrhh-cal-cell { min-height: 78px; border: 1px solid var(--border); border-radius: 8px; padding: 6px; font-size: 0.72rem; background: #fff; overflow: hidden; } .rrhh-cal-cell.rrhh-cal-vacia { background: var(--bg); border-color: transparent; } .rrhh-cal-cell .rrhh-cal-daynum { font-weight: 700; margin-bottom: 4px; font-size: 0.78rem; } .rrhh-cal-chip { display: block; background: var(--danger-bg); color: var(--danger); border-radius: 5px; padding: 1px 6px; margin-bottom: 3px; font-size: 0.66rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rrhh-cal-chip.futuro { background: var(--warning-bg); color: var(--warning); } @media (max-width: 900px) { .rrhh-cal-cell { min-height: 56px; } .rrhh-cal-chip { font-size: 0.6rem; } } /* ================================================================== RR.HH.: segunda pasada de UI/UX (solo visual - ver pedido del dueño del producto). Todo lo de aca abajo se scopea a #view-rrhh y a los overlays propios de RRHH (#rrhh-drawer-overlay, #modal-rrhh-scheduler) en vez de tocar clases genericas (.card, .stat-card, .btn-ghost, table.modern, .hist-toolbar) que comparten Empresas/Historial/Lote y no fueron parte de este pedido - asi ninguna otra pantalla se corre. ================================================================== */ /* margin-top negativo: .main-area ya pone 40px de padding arriba (pensado para pantallas con un solo

+

corto) - el encabezado de RR.HH. tiene un

extra (subtitulo + fecha de sync apilados) que hoy sigue con margen inferior por defecto del navegador (ver el reset de abajo), asi que el bloque completo terminaba mas alto de lo esperado, sumado a los 40px del contenedor. Se descuenta un poco aca en vez de tocar .main-area, que es compartido por el resto de las pantallas. */ #view-rrhh { max-width: 1600px; margin: -16px auto 0; } /* ---------- Encabezado ---------- */ #view-rrhh .rrhh-header { align-items: center; margin-bottom: 24px; gap: 20px; } #view-rrhh .rrhh-header h1 { font-size: 1.5rem; font-weight: 700; } /* margin-bottom:0 explicito: sin esto un

se queda con el margen inferior por defecto del navegador (~1em de su propio font-size), que sumado entre el subtitulo Y la fecha de sync (dos

apilados, a diferencia de otras pantallas que solo tienen uno) se notaba como un hueco de mas antes de las pestañas. */ #view-rrhh .rrhh-subtitle { font-size: 0.86rem; color: var(--muted); margin: 3px 0 0; } #view-rrhh .rrhh-sync-label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); margin: 8px 0 0; } #view-rrhh .rrhh-sync-label svg { width: 13px; height: 13px; flex-shrink: 0; } #view-rrhh .rrhh-header-actions { display: flex; align-items: center; gap: 8px; } #view-rrhh .rrhh-header-actions .btn-secondary, #view-rrhh .rrhh-header-actions .btn-primary { height: 38px; padding: 0 16px; border-radius: var(--radius-control); font-size: 0.85rem; margin: 0; } #view-rrhh .rrhh-icon-btn { width: 38px; height: 38px; padding: 0; border-radius: var(--radius-control); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ---------- Pestañas Resumen/Empresas/Trabajadores/Calendario ---------- */ #view-rrhh .rrhh-tabs { margin-bottom: 24px; } /* ---------- Indicadores (KPI) ---------- */ #view-rrhh .stat-grid { gap: 16px; margin-bottom: 24px; } #view-rrhh .stat-grid .stat-card { padding: 18px 20px; min-height: 88px; border-radius: var(--radius-card); gap: 14px; } #view-rrhh .stat-grid .stat-icon { width: 42px; height: 42px; border-radius: 11px; } #view-rrhh .stat-grid .stat-label { font-size: 0.85rem; font-weight: 500; color: var(--muted); } #view-rrhh .stat-grid .stat-value { font-size: 1.75rem; font-weight: 700; margin-top: 3px; line-height: 1.1; } /* ---------- Bloques generales (tarjetas de la pantalla) ---------- */ /* OJO: ".rrhh-resumen-grid > *" quedaba pisando el radio SOLO de "Bandeja de acciones" (hijo directo de la grilla) y no el de "Actividad reciente"/"Proximos hitos" (un nivel mas adentro, dentro del wrapper flex de la columna derecha) - las tres tarjetas quedaban con esquinas distintas. Se saca ese caso especial: las tres usan el radio normal de .card, como el resto de las tarjetas de esta pantalla. */ #view-rrhh > .card { border-radius: var(--radius-card); } #view-rrhh .card-header h2 { font-size: 1rem; font-weight: 700; } #view-rrhh .rrhh-card-title-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #view-rrhh .rrhh-count-chip { font-size: 0.76rem; font-weight: 600; color: var(--muted); background: #F1F5F9; border-radius: 999px; padding: 2px 10px; } #view-rrhh .rrhh-link-btn { font-size: 0.83rem; font-weight: 600; white-space: nowrap; } /* Buscador con ancho util fijo en vez de ocupar toda la fila - el resto del sitio (Historial) sigue con .search-box creciendo a lo ancho, asi que se pisa el ancho solo adentro de #view-rrhh. */ #view-rrhh .hist-toolbar .search-box { flex: 0 1 380px; min-width: 240px; } #view-rrhh .hist-toolbar select { min-width: 170px; } /* ---------- Tablas (Empresas que requieren atención / Empresas / Trabajadores) ---------- */ #view-rrhh table.modern thead th { background: #F8FAFC; font-size: 0.72rem; padding: 12px 16px; border-bottom: 1px solid var(--border); } #view-rrhh table.modern tbody td { padding: 10px 16px; font-size: 0.87rem; } #view-rrhh table.modern tbody tr:hover { background: #FAFAFE; } #view-rrhh .rrhh-table-empresas th:nth-child(1), #view-rrhh .rrhh-table-empresas td:nth-child(1) { width: 30%; } #view-rrhh .rrhh-table-empresas th:nth-child(2), #view-rrhh .rrhh-table-empresas td:nth-child(2) { width: 13%; } #view-rrhh .rrhh-table-empresas th:nth-child(3), #view-rrhh .rrhh-table-empresas td:nth-child(3), #view-rrhh .rrhh-table-empresas th:nth-child(4), #view-rrhh .rrhh-table-empresas td:nth-child(4) { width: 14%; text-align: center; } #view-rrhh .rrhh-table-empresas th:nth-child(5), #view-rrhh .rrhh-table-empresas td:nth-child(5) { width: 17%; } #view-rrhh .rrhh-table-empresas th:nth-child(6), #view-rrhh .rrhh-table-empresas td:nth-child(6) { width: 12%; text-align: right; } #view-rrhh .rrhh-table-trabajadores th:nth-child(1), #view-rrhh .rrhh-table-trabajadores td:nth-child(1), #view-rrhh .rrhh-table-trabajadores th:nth-child(2), #view-rrhh .rrhh-table-trabajadores td:nth-child(2) { width: 16%; } #view-rrhh .rrhh-cell-nombre { font-weight: 600; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 320px; } #view-rrhh .rrhh-cell-empresa-secundaria { font-size: 0.78rem; color: var(--muted); margin-top: 1px; } #view-rrhh .rrhh-cell-fecha-proxima { color: var(--warning); font-weight: 600; } /* Boton "Ver empresa"/"Resolver": mismo look en toda la pantalla, borde morado suave y relleno morado suave al hover en vez del gris generico de .btn-ghost (que se sigue usando tal cual en el resto del sitio). */ .rrhh-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; height: 32px; padding: 0 14px; border-radius: var(--radius-control); margin: 0; background: #fff; border: 1px solid var(--primary-soft-border); color: var(--primary); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; } .rrhh-btn-outline:hover { background: var(--primary-soft); border-color: var(--primary); } /* ---------- Bandeja de acciones (incidencias) ---------- */ #view-rrhh .rrhh-incidencia { display: flex; align-items: center; gap: 14px; padding: 14px 10px; border-radius: 10px; transition: background .15s; } #view-rrhh .rrhh-incidencia:hover { background: #FAFAFE; } #view-rrhh .rrhh-incidencia-body { flex: 1; min-width: 0; } #view-rrhh .rrhh-incidencia-title { font-size: 0.88rem; font-weight: 600; color: var(--text); } #view-rrhh .rrhh-incidencia-empresa { font-size: 0.78rem; color: var(--muted); margin-top: 1px; } #view-rrhh .rrhh-incidencia-detalle { font-size: 0.8rem; color: var(--muted); margin: 4px 0 6px; } /* ---------- Actividad reciente / Próximos hitos ---------- */ #view-rrhh .rrhh-activity-item { padding: 12px 4px; align-items: center; gap: 12px; } #view-rrhh .rrhh-activity-main { flex: 1; min-width: 0; } #view-rrhh .rrhh-activity-title { font-size: 0.85rem; font-weight: 600; color: var(--text); } #view-rrhh .rrhh-activity-sub { font-size: 0.78rem; color: var(--muted); margin-top: 1px; } #view-rrhh .rrhh-activity-time { font-size: 0.74rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; } #view-rrhh .rrhh-hito-nombre { font-size: 0.87rem; font-weight: 600; color: var(--text); } #view-rrhh .rrhh-hito-empresa { font-size: 0.78rem; color: var(--muted); margin-top: 1px; } /* ---------- Paginación unificada ---------- */ .rrhh-pager-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; flex-wrap: wrap; gap: 10px; } .rrhh-pager-info { font-size: 0.8rem; color: var(--muted); } .rrhh-pager-controls { display: flex; gap: 6px; align-items: center; } .rrhh-pager-controls .btn-ghost { height: 30px; width: 30px; padding: 0; border-radius: var(--radius-control); } .rrhh-pager-controls .btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; } .rrhh-pager-current { font-size: 0.82rem; color: var(--text); min-width: 44px; text-align: center; } /* ---------- Estados vacíos ---------- */ #view-rrhh .rrhh-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; color: var(--muted); text-align: center; } #view-rrhh .rrhh-empty-state svg { width: 26px; height: 26px; color: #CBD5E1; } #view-rrhh .rrhh-empty-state span { font-size: 0.85rem; } @media (max-width: 720px) { #view-rrhh .rrhh-header { align-items: flex-start; } #view-rrhh .rrhh-header-actions { width: 100%; } #view-rrhh .rrhh-header-actions .btn-primary { flex: 1; } } /* ---------- Simular Liquidación ---------- */ /* Rediseño completo (Ago 2026) a partir de un mockup del contador (dueño de producto) - formulario en 3 secciones numeradas colapsables + resultado compacto con desglose completo opcional. Sigue usando los mismos tokens de la "segunda pasada visual" de RR.HH. (--radius-card / --radius-control) para que la pantalla se sienta parte del mismo sistema en vez de un agregado aparte - ver comentario en :root de por que esos tokens solo se aplican dentro de vistas puntuales. */ #view-liquidacion > .card { border-radius: var(--radius-card); } #view-liquidacion .card-header { margin-bottom: 14px; } #view-liquidacion .card > .muted:first-of-type { margin-top: -6px; } /* ---------- Encabezado: selector de periodo compacto + Restablecer ---------- */ #view-liquidacion .liq-header-row { align-items: center; } #view-liquidacion .liq-header-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } #view-liquidacion .liq-periodo-select-wrap, #view-f29provisorio .liq-periodo-select-wrap { position: relative; } #view-liquidacion .liq-periodo-select-wrap select, #view-f29provisorio .liq-periodo-select-wrap select { appearance: none; -webkit-appearance: none; width: auto; min-width: 170px; height: 40px; padding: 0 34px 0 16px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 0.85rem; font-weight: 600; color: var(--text); cursor: pointer; } #view-liquidacion .liq-periodo-select-wrap select:focus, #view-f29provisorio .liq-periodo-select-wrap select:focus { border-color: var(--primary); outline: none; } #view-liquidacion .liq-periodo-select-wrap svg, #view-f29provisorio .liq-periodo-select-wrap svg { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; width: 14px; height: 14px; color: var(--muted); } #view-liquidacion .liq-restablecer-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--primary); cursor: pointer; background: none; border: none; padding: 0; } #view-liquidacion .liq-restablecer-link:hover { color: var(--primary-dark); } #view-liquidacion .liq-restablecer-link svg { width: 14px; height: 14px; } /* Select compacto para card-header (ej. "N por pagina" de Bandeja de acciones/Actividad reciente) - mismo espiritu que .liq-periodo-select-wrap (flecha propia, sin el select "crudo" del navegador) pero mas chico, pensado para convivir con un

. */ .mini-select-wrap { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; } .mini-select-wrap select { appearance: none; -webkit-appearance: none; width: auto; height: 30px; padding: 0 26px 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 0.76rem; font-weight: 600; color: var(--text); cursor: pointer; } .mini-select-wrap select:focus { border-color: var(--primary); outline: none; background: #fff; } .mini-select-wrap svg { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; width: 12px; height: 12px; color: var(--muted); } /* Banner de estado: reusa .uwigo-status-box/.ust-title (mismo patron ya usado para el estado de cuentas Uwigo) en vez de inventar un componente de cero, con un borde sutil de mas pedido por el mockup. */ #view-liquidacion .uwigo-status-box { border: 1px solid var(--border); margin-bottom: 20px; } #view-liquidacion .liq-layout { display: grid; grid-template-columns: 1fr 400px; gap: 20px; align-items: start; } #view-liquidacion .liq-form-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } #view-liquidacion .liq-result-col { position: sticky; top: 20px; } /* ---------- Secciones numeradas colapsables (mismo patron liviano que .module-block/.module-collapse-btn de la pantalla Procesos, adaptado a un badge cuadrado con numero en vez de circulo con icono). ---------- */ #view-liquidacion .liq-section-header { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; } #view-liquidacion .liq-section-badge { width: 24px; height: 24px; border-radius: 7px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; } #view-liquidacion .liq-section-header h2 { flex: 1; } #view-liquidacion .liq-section-chevron { color: var(--muted); transition: transform .2s; flex-shrink: 0; } #view-liquidacion .liq-section.collapsed .liq-section-chevron { transform: rotate(180deg); } #view-liquidacion .liq-section-body { margin-top: 16px; } #view-liquidacion .liq-section.collapsed .liq-section-body { display: none; } #view-liquidacion .liq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; } #view-liquidacion .liq-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; } @media (max-width: 560px) { #view-liquidacion .liq-grid, #view-liquidacion .liq-grid-3 { grid-template-columns: 1fr; } } /* Tiles de checkbox (gratificacion / antiguedad / jubilado / empresarial) */ #view-liquidacion .liq-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 2px 0 4px; } @media (max-width: 720px) { #view-liquidacion .liq-tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { #view-liquidacion .liq-tiles { grid-template-columns: 1fr; } } #view-liquidacion .liq-tile { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 10px 12px; font-size: 0.82rem; color: var(--text); cursor: pointer; transition: background .15s, border-color .15s; } #view-liquidacion .liq-tile:hover { background: var(--bg); } #view-liquidacion .liq-tile.liq-tile-checked { background: var(--primary-soft); border-color: var(--primary-soft-border); } #view-liquidacion .liq-tile input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; margin: 1px 0 0; } #view-liquidacion .liq-check-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } #view-liquidacion .liq-check-row { display: flex; align-items: center; gap: 9px; font-size: 0.87rem; color: var(--text); cursor: pointer; } #view-liquidacion .liq-check-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; margin: 0; } /* Segmented control "Imponibles / No imponibles" (seccion 2) */ #view-liquidacion .liq-segmented { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 3px; margin-bottom: 14px; } #view-liquidacion .liq-segmented-btn { flex: 1; background: none; border: none; border-radius: 6px; padding: 8px 0; font-size: 0.85rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; } #view-liquidacion .liq-segmented-btn.active { background: var(--primary); color: #fff; } #view-liquidacion .liq-ver-otros { display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--primary); cursor: pointer; margin: 2px 0 14px; } #view-liquidacion .liq-ver-otros:hover { color: var(--primary-dark); } #view-liquidacion select { width: 100%; font-size: 0.88rem; padding: 0 12px; height: 42px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-control); outline: none; color: var(--text); } #view-liquidacion select:focus { background: #fff; border-color: var(--primary); } #view-liquidacion .field input { border-radius: var(--radius-control); } #view-liquidacion .liq-form-actions { display: flex; gap: 10px; margin-top: 4px; } #view-liquidacion .liq-form-actions .btn-secondary { flex: 0 0 37%; } #view-liquidacion .liq-form-actions .btn-primary { flex: 1; } @media (max-width: 560px) { #view-liquidacion .liq-form-actions { flex-direction: column; } #view-liquidacion .liq-form-actions .btn-secondary { flex: 1; } } /* ---------- Panel de resultado ---------- */ #view-liquidacion .liq-result-card { padding: 26px 26px; } /* .rrhh-empty-state vive scopeada a #view-rrhh en su CSS original - se duplica aca (mismo look) porque el estado vacio de este panel vive afuera de esa vista. */ #view-liquidacion .rrhh-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; color: var(--muted); text-align: center; } #view-liquidacion .rrhh-empty-state svg { width: 26px; height: 26px; color: #CBD5E1; } #view-liquidacion .rrhh-empty-state span { font-size: 0.85rem; } #view-liquidacion .liq-resultado-nombre { font-size: 0.85rem; color: var(--text); margin-top: 2px; } #view-liquidacion .liq-resultado-nombre:first-of-type { margin-top: 10px; } #view-liquidacion .liq-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 20px 0 8px; } #view-liquidacion .liq-section-title:first-child { margin-top: 0; } #view-liquidacion .liq-section-title-haberes { color: var(--success); } #view-liquidacion .liq-section-title-descuentos { color: var(--danger); } #view-liquidacion .liq-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 0.86rem; border-bottom: 1px solid #F1F5F9; } #view-liquidacion .liq-line:last-child { border-bottom: none; } #view-liquidacion .liq-line-label { color: var(--muted); } #view-liquidacion .liq-line-value { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } #view-liquidacion .liq-line-total { border-top: 1px solid var(--border); border-bottom: none; margin-top: 4px; padding-top: 10px; } #view-liquidacion .liq-line-total .liq-line-label { color: var(--text); font-weight: 700; } #view-liquidacion .liq-line-total .liq-line-value { font-weight: 700; } #view-liquidacion .liq-line-value.liq-negativo { color: var(--danger); } /* Filas "Total haberes"/"Total descuentos" resaltadas de la vista compacta - el #991B1B ya es el mismo tono usado en el resto del sitio para texto sobre --danger-bg (ver .error-detail, #batch-critical-alert), no un color nuevo. */ #view-liquidacion .liq-total-row { display: flex; justify-content: space-between; align-items: baseline; border-radius: var(--radius-control); padding: 9px 12px; margin-top: 6px; font-weight: 700; font-size: 0.9rem; } #view-liquidacion .liq-total-row-haberes { background: var(--success-bg); color: var(--success); } #view-liquidacion .liq-total-row-descuentos { background: var(--danger-bg); color: #991B1B; } #view-liquidacion .liq-costo-simple-row { display: flex; justify-content: space-between; align-items: baseline; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 12px 14px; margin-top: 18px; font-size: 0.88rem; } #view-liquidacion .liq-costo-simple-row .liq-line-label { font-weight: 600; color: var(--text); } #view-liquidacion .liq-costo-simple-row .liq-line-value { font-weight: 700; font-size: 0.98rem; } /* Campos en $0 empiezan ocultos (ver toggleLiqCeros) - a nadie le sirve ver 8 haberes en $0 cuando solo aplican 2. Un solo boton al inicio del panel los muestra/oculta todos juntos, en vez de uno por seccion. Sigue usandose tal cual dentro del desglose completo (ver #liq-desglose-full mas abajo). */ #view-liquidacion .liq-zero-group { display: none; } #view-liquidacion .liq-zero-group.liq-zero-group-visible { display: block; } #view-liquidacion .liq-toggle-ceros { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--primary); font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0 0 12px; margin-bottom: 4px; border-bottom: 1px dashed var(--border); } #view-liquidacion .liq-toggle-ceros:hover { color: var(--primary-dark); } #view-liquidacion .liq-liquido-box { background: var(--primary-soft); border: 1px solid var(--primary-soft-border); border-radius: var(--radius-card); padding: 18px 20px; margin: 14px 0 18px; text-align: center; } #view-liquidacion .liq-liquido-label { font-size: 0.78rem; font-weight: 600; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.03em; } #view-liquidacion .liq-liquido-value { font-size: 1.9rem; font-weight: 800; color: var(--color-navy); margin-top: 4px; } /* Badge "PDF" adentro del boton "Descargar liquidacion" y borde morado (btn-secondary generico usa borde gris) para que se distinga como la accion principal del panel de resultado. */ #view-liquidacion .btn-secondary.liq-btn-pdf { border-color: var(--primary); color: var(--primary); } #view-liquidacion .btn-secondary.liq-btn-pdf:hover { background: var(--primary-soft); } #view-liquidacion .liq-btn-pdf-badge { background: var(--primary-soft); color: var(--primary-dark); font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 2px; } #view-liquidacion .liq-ver-desglose { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; background: none; border: none; color: var(--primary); font-size: 0.83rem; font-weight: 600; cursor: pointer; padding: 12px 0 0; } #view-liquidacion .liq-ver-desglose:hover { color: var(--primary-dark); } #view-liquidacion .liq-desglose-full { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } #view-liquidacion .liq-desglose-full.liq-desglose-visible { display: block; } #view-liquidacion .liq-costo-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 18px; margin-top: 18px; } #view-liquidacion .liq-costo-box .liq-section-title { margin-top: 0; } @media (max-width: 980px) { #view-liquidacion .liq-layout { grid-template-columns: 1fr; } #view-liquidacion .liq-result-col { position: static; } } /* ---------------- Liquidaciones - Centro de control mensual ---------------- */ #view-liquidaciones .liq-periodo-card { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; min-height: 100px; padding: 18px 24px; border-color: var(--color-violet-soft); } #view-liquidaciones .liq-periodo-icon { width: 50px; height: 50px; border-radius: 13px; background: var(--color-violet-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #view-liquidaciones .liq-periodo-icon svg { width: 24px; height: 24px; } #view-liquidaciones .liq-periodo-info { flex: 1; min-width: 0; } #view-liquidaciones .liq-periodo-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; } #view-liquidaciones .liq-periodo-mes-row { display: flex; align-items: center; gap: 10px; margin-top: 3px; flex-wrap: wrap; } #view-liquidaciones .liq-periodo-mes { font-size: 1.35rem; font-weight: 700; } #view-liquidaciones .liq-periodo-ayuda { color: var(--muted); font-size: 0.8rem; margin-top: 4px; } #view-liquidaciones .liq-periodo-nav { display: flex; gap: 4px; flex-shrink: 0; } #view-liquidaciones .liq-periodo-nav button { width: 30px; height: 30px; border-radius: var(--radius-control); border: 1px solid var(--border); background: #fff; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; } #view-liquidaciones .liq-periodo-nav button svg { width: 15px; height: 15px; } #view-liquidaciones .rrhh-count-chip { font-size: 0.76rem; font-weight: 600; color: var(--muted); background: #F1F5F9; border-radius: 999px; padding: 2px 10px; white-space: nowrap; } #view-liquidaciones .liq-vista-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden; flex-shrink: 0; } #view-liquidaciones .liq-vista-toggle button { border: none; background: #fff; padding: 0 10px; height: 42px; cursor: pointer; color: var(--muted); display: flex; align-items: center; } #view-liquidaciones .liq-vista-toggle button svg { width: 16px; height: 16px; } #view-liquidaciones .liq-vista-toggle button.active { background: var(--primary-soft); color: var(--primary); } #view-liquidaciones .hist-toolbar { align-items: center; } #view-liquidaciones td.liq-empresa-cell-td { border-left: 4px solid transparent; } #view-liquidaciones .liq-empresa-cell { display: flex; align-items: center; gap: 10px; } #view-liquidaciones .liq-empresa-icon { width: 34px; height: 34px; border-radius: 10px; background: #F1F5F9; color: var(--muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #view-liquidaciones .liq-empresa-icon svg { width: 16px; height: 16px; } #view-liquidaciones table.modern td, #view-liquidaciones table.modern th { padding-top: 14px; padding-bottom: 14px; } #view-liquidaciones .liq-texto-ayuda { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; } /* Boton de accion + kebab de la ultima columna: sin esto, el kebab caia en una segunda linea con textos de boton mas largos ("Respaldar liquidaciones") pero no con los cortos ("Ver detalle de errores"), dejando la fila inconsistente segun el estado. white-space:nowrap evita ademas que el TEXTO del boton se corte a la mitad. */ #view-liquidaciones .liq-row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } #view-liquidaciones .liq-row-actions .btn-secondary { white-space: nowrap; } /* .liq-historial-row / .liq-skeleton-bar quedan GLOBALES (no scoped a #view-liquidaciones): las reusa tambien #view-impuestounico para su propia fila de detalle expandible. */ .liq-historial-row td { background: #FAFBFC; padding: 20px 24px !important; border-bottom: 1px solid #F1F5F9 !important; } #view-liquidaciones .liq-archivo-grid { display: flex; flex-wrap: wrap; gap: 12px; } #view-liquidaciones .liq-archivo-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 170px; } #view-liquidaciones .liq-archivo-periodo { font-weight: 700; font-size: 0.88rem; } #view-liquidaciones .liq-archivo-meta { color: var(--muted); font-size: 0.74rem; margin-top: 3px; } #view-liquidaciones .liq-archivo-card a.liq-archivo-descarga { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 0.78rem; font-weight: 600; } #view-liquidaciones .liq-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } #view-liquidaciones .liq-grid-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: #fff; display: flex; flex-direction: column; gap: 10px; } .liq-skeleton-bar { height: 13px; border-radius: 6px; background: linear-gradient(90deg, #F1F5F9 25%, #E9EDF2 37%, #F1F5F9 63%); background-size: 400% 100%; animation: liq-shimmer 1.4s ease infinite; } @keyframes liq-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } #modal-liq-validar .modal-box { max-width: 460px; } #modal-liq-validar .liq-modal-progress-bar { height: 8px; border-radius: 999px; background: #F1F5F9; overflow: hidden; margin: 16px 0 10px; } #modal-liq-validar .liq-modal-progress-fill { height: 100%; background: var(--primary); transition: width 0.3s ease; } #modal-liq-validar .liq-modal-stats { display: flex; gap: 14px; margin: 14px 0; } #modal-liq-validar .liq-modal-stat { flex: 1; text-align: center; } #modal-liq-validar .liq-modal-stat .n { font-size: 1.25rem; font-weight: 700; } #modal-liq-validar .liq-modal-stat .l { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; } #modal-liq-validar .liq-modal-actual { font-size: 0.82rem; color: var(--muted); } #view-liquidaciones .liq-seleccion-bar { display: flex; align-items: center; gap: 12px; background: var(--primary-soft); border: 1px solid var(--color-violet-soft); border-radius: var(--radius-control); padding: 10px 14px; margin-bottom: 12px; font-size: 0.85rem; font-weight: 600; color: var(--primary-dark); } @media (max-width: 900px) { #view-liquidaciones .liq-periodo-card { flex-wrap: wrap; } #view-liquidaciones .stat-grid { grid-template-columns: repeat(2, 1fr); } } /* CSS de #view-impuestounico movido a /styles/view-impuesto-unico.css (Fase 2 de la reorganización — decomposición inicial de index.html, ver docs/architecture/MULTI_TENANT_MIGRATION_PLAN.md). Vista elegida por estar genuinamente aislada (verificado: sin clases compartidas con otras vistas, a diferencia de #view-liquidacion). */ /* Vista "F29 Provisorio" - Etapa 1 (mesa operativa + calendario tributario, ver src/routes/f29Provisorio.js). Clases propias (f29p-*) para no atar el CSS a #view-liquidacion; el calendario reusa las clases GLOBALES .rrhh-cal-* (definidas mas arriba, sin scope de vista) que ya usa RR.HH., asi que no se redefinen aca. */ #view-f29provisorio .card { border-radius: var(--radius-card); } #view-f29provisorio .f29p-header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #view-f29provisorio .f29p-tabs { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 3px; margin-bottom: 20px; } #view-f29provisorio .f29p-tab { border: none; background: none; padding: 8px 18px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); cursor: pointer; } #view-f29provisorio .f29p-tab.active { background: var(--primary); color: #fff; } /* Fase 3A: mismo patron de tabs internos que F29 Provisorio (.f29p-tab), con clase propia porque son 2 vistas distintas - no comparten estado ni logica, solo el look. */ #view-contabilidad .cont-tabs { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 3px; margin-bottom: 20px; } #view-contabilidad .cont-tab { border: none; background: none; padding: 8px 18px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); cursor: pointer; } #view-contabilidad .cont-tab.active { background: var(--primary); color: #fff; } #view-f29provisorio .f29p-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } @media (max-width: 900px) { #view-f29provisorio .f29p-stats { grid-template-columns: repeat(2, 1fr); } } #view-f29provisorio .f29p-stat-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; } #view-f29provisorio .f29p-stat-label { font-size: 0.78rem; color: var(--muted); font-weight: 600; } #view-f29provisorio .f29p-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } #view-f29provisorio .f29p-stat-highlight { background: var(--primary-soft); border-color: var(--primary-soft-border); } #view-f29provisorio .f29p-stat-highlight .f29p-stat-value { color: var(--primary-dark); } #view-f29provisorio .f29p-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } #view-f29provisorio .f29p-search-wrap { position: relative; flex: 1; min-width: 220px; } #view-f29provisorio .f29p-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); } #view-f29provisorio .f29p-search-wrap input { width: 100%; height: 42px; padding: 0 12px 0 36px; border: 1px solid var(--border); border-radius: var(--radius-control); font-size: 0.85rem; outline: none; } #view-f29provisorio .f29p-search-wrap input:focus { border-color: var(--primary); } #view-f29provisorio .f29p-toolbar select { height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-control); font-size: 0.85rem; background: #fff; outline: none; min-width: 200px; } /* El panel de detalle es hermano de TODO lo demas (titulo, tabs, KPIs, buscador, tablero) - no solo del tablero - para que llegue hasta el techo de la pantalla en vez de arrancar mas abajo (pedido explicito del usuario: "que lo de arriba se mueva a la izquierda y esto quede hasta el techo"). Ver la reestructuracion del HTML de #view-f29provisorio: .f29p-page-left agrupa topheader+tabs+paneles, .f29p-page-right es el drawer, ambos hijos directos de .f29p-page-layout. */ #view-f29provisorio .f29p-page-layout { display: grid; grid-template-columns: 1fr 460px; gap: 20px; align-items: start; } #view-f29provisorio .f29p-page-left { min-width: 0; } /* will-change ayuda al navegador a componer este elemento sticky en su propia capa - sin esto, en algunos casos quedaba con la posicion vieja (un hueco arriba) hasta el primer scroll, en vez de ubicarse bien desde el primer render (reportado por el usuario). */ #view-f29provisorio .f29p-page-right { position: sticky; top: 20px; will-change: transform; } /* El panel es un drawer de 3 zonas (header/tabs fijos, contenido con scroll propio, footer fijo) - por eso el padding pasa de la tarjeta a cada zona por separado, y el overflow vive en .f29p-drawer-content, no en la tarjeta entera (asi el header y el footer nunca se van con el scroll). Ver renderF29pDetalle(). */ /* Altura fija (no solo un tope): antes el panel se achicaba al tamaño de su contenido y quedaba mas corto que el tablero de la izquierda, dejando un hueco visual a la derecha - pedido explicito del usuario ("tiene que cubrir toda esa parte de la derecha"). */ /* 40px dejaba el footer (Guardar cambios/Descargar PDF) pegado al borde de abajo, a veces tapado por la barra de tareas del sistema - un poco mas de margen (70px) para que siempre quede holgado. */ #view-f29provisorio .f29p-result-card { padding: 0; height: calc(100vh - 70px); max-height: calc(100vh - 70px); display: flex; flex-direction: column; overflow: hidden; } #view-f29provisorio .f29p-drawer-header { flex-shrink: 0; position: relative; padding: 20px 22px 0; } #view-f29provisorio .f29p-drawer-close { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 8px; border: none; background: var(--bg); color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } #view-f29provisorio .f29p-drawer-close:hover { background: var(--border); color: var(--text); } #view-f29provisorio .f29p-drawer-header h2 { font-size: 1.05rem; padding-right: 34px; } #view-f29provisorio .f29p-drawer-tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--border); } #view-f29provisorio .f29p-drawer-tab { flex: 1; text-align: center; padding: 10px 0 11px; font-size: 0.86rem; font-weight: 700; color: var(--muted); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } #view-f29provisorio .f29p-drawer-tab.active { color: var(--primary); border-bottom-color: var(--primary); } #view-f29provisorio .f29p-drawer-content { flex: 1; overflow-y: auto; padding: 18px 22px; scrollbar-width: thin; } #view-f29provisorio .f29p-drawer-footer { flex-shrink: 0; display: flex; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border); background: #fff; } #view-f29provisorio .f29p-drawer-footer button { flex: 1; } #view-f29provisorio .f29p-drawer-backdrop { display: none; } @media (max-width: 1200px) { #view-f29provisorio .f29p-result-card.f29p-drawer-open { position: fixed; inset: 0; z-index: 65; max-height: 100vh; border-radius: 0; width: 100%; } #view-f29provisorio .f29p-drawer-backdrop.visible { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 64; } } @media (min-width: 700px) and (max-width: 1200px) { #view-f29provisorio .f29p-result-card.f29p-drawer-open { left: auto; width: min(94vw, 500px); } } /* Tarjeta lavanda del resultado (F29 estimado a la izquierda, IVA determinado + PPM a la derecha) - reemplaza al viejo f29p-monto-box como pieza principal cuando ya hay un calculo. */ #view-f29provisorio .f29p-resultado-card { background: var(--primary-soft); border: 1px solid var(--primary-soft-border); border-radius: var(--radius-card); padding: 16px 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; } #view-f29provisorio .f29p-resultado-label { font-size: 0.68rem; font-weight: 700; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.03em; } #view-f29provisorio .f29p-resultado-value { font-size: 1.9rem; font-weight: 800; color: var(--color-navy); margin-top: 2px; line-height: 1.15; } #view-f29provisorio .f29p-resultado-desc { font-size: 0.72rem; color: var(--muted); margin-top: 4px; max-width: 190px; } #view-f29provisorio .f29p-resultado-secundarios { display: flex; flex-direction: column; gap: 10px; text-align: right; flex-shrink: 0; } #view-f29provisorio .f29p-resultado-sec-label { font-size: 0.62rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; } #view-f29provisorio .f29p-resultado-sec-value { font-size: 0.94rem; font-weight: 800; color: var(--text); margin-top: 1px; } #view-f29provisorio .f29p-origen-strip { display: flex; align-items: center; gap: 8px; background: var(--success-bg); color: #067A46; border-radius: 8px; padding: 9px 12px; font-size: 0.74rem; font-weight: 600; margin-bottom: 14px; } #view-f29provisorio .f29p-origen-strip svg { width: 16px; height: 16px; flex-shrink: 0; } /* Acordeones de secciones tributarias */ #view-f29provisorio .f29p-accordion { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; } #view-f29provisorio .f29p-accordion-header { display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; user-select: none; background: #FBFBFE; } #view-f29provisorio .f29p-accordion-header-title { font-weight: 700; font-size: 0.84rem; flex: 1; } #view-f29provisorio .f29p-accordion-badge { font-size: 0.6rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em; flex-shrink: 0; } #view-f29provisorio .f29p-accordion-badge.automatico { background: var(--success-bg); color: #067A46; } #view-f29provisorio .f29p-accordion-badge.manual { background: var(--primary-soft); color: var(--primary-dark); } #view-f29provisorio .f29p-accordion-badge.mixto { background: var(--info-bg); color: var(--info); } #view-f29provisorio .f29p-accordion-chevron { transition: transform .2s; color: var(--muted); flex-shrink: 0; } #view-f29provisorio .f29p-accordion.abierto .f29p-accordion-chevron { transform: rotate(180deg); } #view-f29provisorio .f29p-accordion-body { display: none; padding: 14px; border-top: 1px solid var(--border); } #view-f29provisorio .f29p-accordion.abierto .f29p-accordion-body { display: block; } /* Campos automaticos (candado, solo lectura) vs. manuales (lapiz, editables) - la diferencia tiene que notarse en el propio campo, sin depender de un link aparte (pedido explicito del usuario). */ #view-f29provisorio .f29p-campo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; } @media (max-width: 480px) { #view-f29provisorio .f29p-campo-grid { grid-template-columns: 1fr; } } #view-f29provisorio .f29p-campo-grid-1 { grid-template-columns: 1fr; } #view-f29provisorio .f29p-campo { min-height: 40px; } #view-f29provisorio .f29p-campo-label { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; } #view-f29provisorio .f29p-campo-label svg { width: 12px; height: 12px; flex-shrink: 0; } #view-f29provisorio .f29p-campo-box { border-radius: 8px; padding: 8px 10px; font-size: 0.86rem; font-weight: 700; min-height: 40px; display: flex; align-items: center; } #view-f29provisorio .f29p-campo-box.automatico { background: #F1F5F9; color: var(--text); border: 1px solid var(--border); } #view-f29provisorio .f29p-campo-box.manual { background: #fff; border: 1.5px solid var(--primary); padding: 7px 9px; } #view-f29provisorio .f29p-campo-box.manual.f29p-campo-bloqueado { border-color: var(--border); background: var(--bg); } #view-f29provisorio .f29p-campo-box input, #view-f29provisorio .f29p-campo-box textarea { border: none; background: none; outline: none; font: inherit; font-weight: 700; width: 100%; padding: 0; color: inherit; } #view-f29provisorio .f29p-campo-box input:disabled { color: var(--muted); cursor: not-allowed; } #view-f29provisorio .f29p-campo-hint { font-size: 0.64rem; color: var(--muted); margin-top: 3px; } #view-f29provisorio .f29p-campo-hint.pendiente { color: var(--warning); font-weight: 600; } #view-f29provisorio .f29p-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; } @media (max-width: 1200px) { #view-f29provisorio .f29p-board { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { #view-f29provisorio .f29p-board { grid-template-columns: 1fr; } } #view-f29provisorio .f29p-col-header { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; color: var(--text); margin-bottom: 10px; padding: 0 2px; } #view-f29provisorio .f29p-col-count { background: #F1F5F9; color: var(--muted); font-size: 0.72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; } #view-f29provisorio .f29p-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } #view-f29provisorio .f29p-col-dot.pendiente { background: var(--warning); } #view-f29provisorio .f29p-col-dot.calculado { background: var(--success); } #view-f29provisorio .f29p-col-dot.aprobado { background: var(--primary); } #view-f29provisorio .f29p-col-dot.pagado { background: var(--info); } #view-f29provisorio .f29p-col-cards { display: flex; flex-direction: column; gap: 10px; min-height: 40px; } #view-f29provisorio .f29p-col-empty { font-size: 0.78rem; color: var(--muted); background: var(--bg); border: 1px dashed var(--border); border-radius: var(--radius-card); padding: 14px; text-align: center; } #view-f29provisorio .f29p-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; } /* Fase 2B: checkbox de seleccion masiva (ver seccion 11 del plan) */ #view-f29provisorio .f29p-card-check { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; cursor: pointer; z-index: 1; } #view-f29provisorio .f29p-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(109,40,217,.08); } #view-f29provisorio .f29p-card.f29p-card-selected { border-color: var(--primary); background: var(--primary-soft); } #view-f29provisorio .f29p-card-name { font-weight: 700; font-size: 0.88rem; color: var(--text); } #view-f29provisorio .f29p-card-rut { font-size: 0.74rem; color: var(--muted); margin-top: 1px; } #view-f29provisorio .f29p-card-monto { font-size: 1rem; font-weight: 800; color: var(--text); margin-top: 8px; } #view-f29provisorio .f29p-card-monto.f29p-card-monto-vacio { font-size: 0.76rem; font-weight: 600; color: var(--muted); } #view-f29provisorio .f29p-card-meta { font-size: 0.72rem; color: var(--muted); margin-top: 6px; } #view-f29provisorio .f29p-card-faltan { font-size: 0.72rem; color: var(--warning); margin-top: 6px; } #view-f29provisorio .f29p-card-actions { display: flex; gap: 8px; margin-top: 10px; } #view-f29provisorio .f29p-card-actions button { flex: 1; font-size: 0.72rem; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; font-weight: 600; } #view-f29provisorio .f29p-card-actions button:hover { border-color: var(--primary); color: var(--primary); } #view-f29provisorio .f29p-card-actions button:disabled { opacity: .45; cursor: not-allowed; } #view-f29provisorio .f29p-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--muted); padding: 30px 10px; flex: 1; } #view-f29provisorio .f29p-empty-state svg { width: 26px; height: 26px; color: #CBD5E1; } #view-f29provisorio .f29p-empty-state span { font-size: 0.85rem; } #view-f29provisorio .f29p-detalle-header { margin-bottom: 14px; } #view-f29provisorio .f29p-detalle-header h2 { font-size: 1.02rem; } #view-f29provisorio .f29p-detalle-header .muted { font-size: 0.78rem; margin-top: 2px; } #view-f29provisorio .f29p-monto-box { background: var(--primary-soft); border: 1px solid var(--primary-soft-border); border-radius: var(--radius-card); padding: 16px 18px; margin-bottom: 16px; text-align: center; } #view-f29provisorio .f29p-monto-label { font-size: 0.72rem; font-weight: 700; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.03em; } #view-f29provisorio .f29p-monto-value { font-size: 1.7rem; font-weight: 800; color: var(--color-navy); margin-top: 4px; } #view-f29provisorio .f29p-monto-value.f29p-monto-vacio { font-size: 0.95rem; color: var(--muted); font-weight: 600; } #view-f29provisorio .f29p-field { margin-bottom: 12px; } #view-f29provisorio .f29p-field label { display: block; font-size: 0.76rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; } #view-f29provisorio .f29p-field input, #view-f29provisorio .f29p-field textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 8px 10px; font-size: 0.85rem; outline: none; font-family: inherit; } #view-f29provisorio .f29p-field input:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; } #view-f29provisorio .f29p-field input:focus, #view-f29provisorio .f29p-field textarea:focus { border-color: var(--primary); } #view-f29provisorio .f29p-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; } #view-f29provisorio .f29p-line:last-child { border-bottom: none; } #view-f29provisorio .f29p-line-label { color: var(--muted); } #view-f29provisorio .f29p-line-value { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; } #view-f29provisorio .f29p-line-total { border-top: 1px solid var(--border); border-bottom: none; margin-top: 4px; padding-top: 10px; } #view-f29provisorio .f29p-line-total .f29p-line-label { color: var(--text); font-weight: 700; } #view-f29provisorio .f29p-line-total .f29p-line-value { font-weight: 700; font-size: 0.98rem; } #view-f29provisorio .f29p-ayuda-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; padding: 10px 0; border-top: 1px solid var(--border); margin-top: 8px; font-size: 0.82rem; font-weight: 600; color: var(--text); } #view-f29provisorio .f29p-ayuda-toggle svg { transition: transform .2s; color: var(--muted); flex-shrink: 0; } #view-f29provisorio .f29p-ayuda-toggle.abierto svg { transform: rotate(180deg); } #view-f29provisorio .f29p-ayuda-body { display: none; font-size: 0.78rem; color: var(--muted); padding-bottom: 8px; } #view-f29provisorio .f29p-ayuda-body.abierto { display: block; } #view-f29provisorio .f29p-ayuda-body div { padding: 5px 0; } #view-f29provisorio .f29p-ayuda-body b { color: var(--text); } #view-f29provisorio .f29p-form-error { color: var(--danger); font-size: 0.78rem; margin-top: 8px; } #view-f29provisorio .f29p-form-hint { color: var(--warning); font-size: 0.76rem; margin-top: 6px; } #view-f29provisorio .f29p-check-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; margin: 10px 0 6px; } #view-f29provisorio .f29p-check-row input { width: 16px; height: 16px; accent-color: var(--primary); } #view-f29provisorio .f29p-revision-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } #view-f29provisorio .f29p-revision-box .btn-secondary, #view-f29provisorio .f29p-revision-box .btn-primary { flex: 1; min-width: 140px; } #view-f29provisorio .f29p-revision-link { background: none; border: none; color: var(--muted); font-size: 0.76rem; text-decoration: underline; cursor: pointer; padding: 0; } #view-f29provisorio .f29p-revision-link:hover { color: var(--text); } /* Calendario tributario: reusa .rrhh-cal-* (globales) + chips propios */ #view-f29provisorio .f29p-chip { display: block; width: 100%; text-align: left; border: none; border-radius: 5px; padding: 2px 5px; margin-bottom: 2px; font-size: 0.62rem; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view-f29provisorio .f29p-chip-pendiente { background: var(--warning-bg); color: var(--warning); } #view-f29provisorio .f29p-chip-calculado { background: var(--success-bg); color: var(--success); } #view-f29provisorio .f29p-chip-aprobado { background: var(--primary-soft); color: var(--primary-dark); } #view-f29provisorio .f29p-chip-pagado { background: var(--info-bg); color: var(--info); } #view-f29provisorio .f29p-chip-actualizacion { background: var(--info-bg); color: var(--info); } #view-f29provisorio .rrhh-cal-cell.f29p-cal-seleccionada { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); } #view-f29provisorio .f29p-tag-observado { display: inline-flex; align-items: center; gap: 4px; background: var(--danger-bg); color: var(--danger); font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-top: 6px; } #view-f29provisorio .f29p-dia-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } #view-f29provisorio .f29p-dia-item:last-child { border-bottom: none; } #view-f29provisorio .f29p-dia-item-info { display: flex; flex-direction: column; gap: 2px; } #view-f29provisorio .f29p-dia-item-actions { display: flex; gap: 6px; flex-shrink: 0; } #view-f29provisorio .f29p-dia-item-actions button { font-size: 0.72rem; padding: 5px 9px; border-radius: 6px; border: 1px solid var(--border); background: #fff; cursor: pointer; } #view-f29provisorio .f29p-dia-item-actions button:hover { border-color: var(--primary); color: var(--primary); } @media (max-width: 1200px) { #view-f29provisorio .f29p-page-layout { grid-template-columns: 1fr; } #view-f29provisorio .f29p-page-right { position: static; height: auto; } #view-f29provisorio .f29p-result-card:not(.f29p-drawer-open) { height: auto; } } /* Vista imprimible de "Simular Liquidacion" (ver descargarLiquidacionPDF en el script) - #liq-print-area vive fuera de #app-box, oculta en pantalla normal, y solo se muestra durante window.print(). No usa ninguna libreria de PDF: es una hoja normal que el navegador convierte a PDF via su dialogo nativo de impresion ("Guardar como PDF" / "Microsoft Print to PDF"), sin agregar dependencias (ver CLAUDE.md). */ #liq-print-area { display: none; } @media print { body > *:not(#liq-print-area) { display: none !important; } #liq-print-area, #liq-print-area * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } #liq-print-area { display: block !important; font-family: Arial, Helvetica, sans-serif; color: var(--color-navy); max-width: 740px; margin: 0 auto; padding: 8px 0 10px; font-size: 0.9rem; } /* Encabezado: logo + marca a la izquierda, periodo + badge a la derecha */ #liq-print-area .liq-print-topbar { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--primary); padding-bottom: 8px; margin-bottom: 10px; } #liq-print-area .liq-print-brand { display: flex; align-items: center; gap: 8px; } #liq-print-area .liq-print-logo { width: 24px; height: 24px; border-radius: 7px; } #liq-print-area .liq-print-wordmark { font-size: 0.95rem; font-weight: 800; color: var(--color-navy); } #liq-print-area .liq-print-brand-right { text-align: right; } #liq-print-area .liq-print-periodo-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; margin-bottom: 3px; } #liq-print-area .liq-print-badge { display: inline-block; border: 1px solid var(--primary); color: var(--primary); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; } #liq-print-area .liq-print-title { font-size: 1.2rem; font-weight: 800; margin: 0 0 2px; } #liq-print-area .liq-print-subtitle { font-size: 0.78rem; color: var(--muted); margin: 0 0 10px; } /* Tarjeta UF/UTM del periodo */ #liq-print-area .liq-print-uf-utm { display: flex; align-items: stretch; background: var(--primary-soft); border: 1px solid var(--primary-soft-border); border-radius: var(--radius-control); padding: 8px 14px; margin-bottom: 8px; } #liq-print-area .liq-print-uf-utm-item { flex: 1; display: flex; align-items: center; gap: 8px; } #liq-print-area .liq-print-uf-utm-item svg { color: var(--primary); flex-shrink: 0; width: 17px; height: 17px; } #liq-print-area .liq-print-uf-utm-texts { flex: 1; } #liq-print-area .liq-print-uf-utm-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--primary-dark); } #liq-print-area .liq-print-uf-utm-sub { font-size: 0.68rem; color: var(--muted); } #liq-print-area .liq-print-uf-utm-value { font-size: 0.92rem; font-weight: 800; color: var(--primary-dark); white-space: nowrap; } #liq-print-area .liq-print-uf-utm-divider { width: 1px; background: var(--primary-soft-border); margin: 0 14px; } /* Tarjeta de datos (empresa/trabajador/contrato) */ #liq-print-area .liq-print-info-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 8px 14px; margin-bottom: 10px; } #liq-print-area .liq-print-info-row { display: grid; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); } #liq-print-area .liq-print-info-row:last-child { border-bottom: none; padding-bottom: 0; } #liq-print-area .liq-print-info-row:first-child { padding-top: 0; } #liq-print-area .liq-print-info-row-2 { grid-template-columns: 1fr 1fr; } #liq-print-area .liq-print-info-row-3 { grid-template-columns: 1fr 1fr 1fr; } #liq-print-area .liq-print-info-row-1 { grid-template-columns: 1fr; } #liq-print-area .liq-print-info-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; } #liq-print-area .liq-print-info-value { font-size: 0.82rem; font-weight: 700; color: var(--color-navy); } /* Cajas Haberes / Descuentos lado a lado */ #liq-print-area .liq-print-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; align-items: start; } #liq-print-area .liq-print-box { border-radius: var(--radius-control); padding: 8px 12px; border: 1px solid var(--border); } #liq-print-area .liq-print-box-green { background: var(--success-bg); border-color: #B7EFD5; } #liq-print-area .liq-print-box-red { background: var(--danger-bg); border-color: #FBD5D5; } #liq-print-area .liq-print-box-header { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 5px; } #liq-print-area .liq-print-box-green .liq-print-box-header { color: #067A46; } #liq-print-area .liq-print-box-red .liq-print-box-header { color: #B91C1C; } #liq-print-area .liq-print-icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 0.65rem; flex-shrink: 0; } #liq-print-area .liq-print-icon-green { background: var(--success); } #liq-print-area .liq-print-icon-red { background: var(--danger); } #liq-print-area .liq-print-icon-navy { background: var(--color-navy); } #liq-print-area .liq-print-box-subtitle { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #067A46; margin: 5px 0 2px; } #liq-print-area .liq-print-box-subtitle:first-of-type { margin-top: 0; } #liq-print-area .liq-print-line { display: flex; justify-content: space-between; font-size: 0.72rem; padding: 1px 0; line-height: 1.3; } #liq-print-area .liq-print-line-label { color: #3A3A3A; } #liq-print-area .liq-print-line-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } #liq-print-area .liq-print-line-value.liq-negativo { color: var(--danger); } #liq-print-area .liq-print-subtotal { display: flex; justify-content: space-between; font-size: 0.74rem; font-weight: 800; border-top: 1px solid rgba(0,0,0,0.12); margin-top: 3px; padding-top: 3px; } #liq-print-area .liq-print-box-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.82rem; font-weight: 800; border-radius: var(--radius-control); padding: 6px 10px; margin-top: 6px; } #liq-print-area .liq-print-box-total-green { background: #D3F5E4; color: #045B33; } #liq-print-area .liq-print-box-total-red { background: #FBDADA; color: #8F1616; } #liq-print-area .liq-print-box-footnote { font-size: 0.6rem; color: var(--muted); text-align: center; margin-top: 6px; } /* Barra de liquido a pagar */ #liq-print-area .liq-print-liquido { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--primary); border-radius: var(--radius-control); padding: 8px 14px; margin-bottom: 10px; } #liq-print-area .liq-print-liquido-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary-dark); } #liq-print-area .liq-print-liquido-value { font-size: 1.25rem; font-weight: 800; color: var(--primary-dark); } #liq-print-area .liq-print-liquido-breakdown { font-size: 0.7rem; color: var(--muted); } #liq-print-area .liq-print-liquido-breakdown strong { color: var(--color-navy); } #liq-print-area .liq-print-liquido-breakdown strong.liq-negativo { color: var(--danger); } /* Costo total empresa */ #liq-print-area .liq-print-costo-card { background: var(--primary-soft); border: 1px solid var(--primary-soft-border); border-radius: var(--radius-control); padding: 8px 14px; margin-bottom: 8px; } #liq-print-area .liq-print-costo-card .liq-print-box-header { color: var(--color-navy); margin-bottom: 6px; } #liq-print-area .liq-print-costo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 6px; } #liq-print-area .liq-print-costo-item-label { font-size: 0.58rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 1px; } #liq-print-area .liq-print-costo-item-value { font-size: 0.74rem; font-weight: 700; color: var(--color-navy); } #liq-print-area .liq-print-costo-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; font-weight: 800; color: var(--color-navy); border-top: 1px solid var(--primary-soft-border); padding-top: 6px; } #liq-print-area .liq-print-footer2 { text-align: center; border-top: 1px solid var(--primary-soft-border); padding-top: 6px; margin-top: 2px; } #liq-print-area .liq-print-footer2 p { font-size: 0.62rem; color: var(--muted); margin: 2px 0; } #liq-print-area .liq-print-footer2 strong { color: var(--primary-dark); } /* Evita que el navegador corte una caja a la mitad entre paginas - ademas de achicar tipografias/paddings, esto ayuda a que todo entre en una sola hoja sin quedar partido de forma rara. */ #liq-print-area .liq-print-uf-utm, #liq-print-area .liq-print-info-card, #liq-print-area .liq-print-box, #liq-print-area .liq-print-liquido, #liq-print-area .liq-print-costo-card, #liq-print-area .liq-print-topbar { page-break-inside: avoid; } /* ============== "Resumen F29" - primera pagina + hojas de detalle ============== Rediseno completo (portada + Detalle de Compras/Ventas) siguiendo al pie de la letra el boceto exacto provisto por el usuario (elementos aislados renderizados y validados contra PDF real antes de integrar - ver el proceso en build_spec_v1.js / build_detalle_v1.js del chat). Vive en el mismo #liq-print-area / @media print que "Simular Liquidacion" (no se agrega ninguna libreria de PDF nueva - ver CLAUDE.md), con clases propias (.report-page, .detalle-page, etc.) para no interferir con las .liq-print-* de arriba. Tipografia: Inter auto-hospedada en /fonts (NO Google Fonts en tiempo de impresion - evita el mismo tipo de carrera que tuvo el logo). @page con NOMBRE ("f29p") en vez de tocar el @page por defecto de mas abajo: ese de abajo (margin: 10mm 12mm) lo sigue usando "Simular Liquidacion", que comparte este mismo #liq-print-area/@media print. Presupuesto de altura en A4: cada seccion tiene una ALTURA FIJA (nunca min-height) y el contenedor de pagina lleva "overflow:hidden" como red de seguridad final - la pagina de detalle pagina los documentos en bloques fijos de 13 filas (FILAS_POR_PAGINA en f29pHojaDetalle) en vez de calcular dinamicamente cuantas entran, por la misma razon. */ @font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; src: url(/fonts/Inter-400.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; src: url(/fonts/Inter-500.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; src: url(/fonts/Inter-600.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; src: url(/fonts/Inter-700.woff2) format('woff2'); } @page f29p { size: A4 portrait; margin: 0; } #liq-print-area * { box-sizing: border-box; } #liq-print-area { --navy-950: #0B1739; --navy-900: #172554; --navy-800: #1E3A5F; --purple-700: #5B21B6; --purple-600: #6D28D9; --purple-500: #7C3AED; --purple-100: #EDE9FE; --purple-50: #F5F3FF; --teal-700: #0F766E; --teal-600: #0D9488; --teal-500: #14B8A6; --teal-100: #CCFBF1; --teal-50: #F0FDFA; --blue-600: #2563EB; --blue-100: #DBEAFE; --blue-50: #EFF6FF; --green-600: #16A34A; --green-100: #DCFCE7; --green-50: #F0FDF4; --amber-600: #D97706; --amber-100: #FEF3C7; --amber-50: #FFFBEB; --slate-900: #0F172A; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748B; --slate-400: #94A3B8; --slate-300: #CBD5E1; --slate-200: #E2E8F0; --slate-100: #F1F5F9; --slate-50: #F8FAFC; } #liq-print-area .report-page { page: f29p; page-break-after: always; width: 210mm; height: 297mm; padding: 0 9mm 6mm; overflow: hidden; position: relative; background: #FFFFFF; color: var(--navy-900); font-family: "Inter", "IBM Plex Sans", Arial, sans-serif; margin: 0 auto; } /* ---- type scale (section 4) ---- */ #liq-print-area .company-title { font-size: 16pt; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; color: var(--navy-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #liq-print-area .section-title { font-size: 9.5pt; line-height: 1.2; font-weight: 700; letter-spacing: 0.035em; text-transform: uppercase; color: var(--navy-900); margin: 0 0 1.5mm; } #liq-print-area .label-sm { font-size: 6.8pt; line-height: 1.2; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; } #liq-print-area .amount-primary { font-size: 29pt; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; } #liq-print-area .amount-secondary { font-size: 18pt; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; } #liq-print-area .amount-indicator { font-size: 14.5pt; line-height: 1.05; font-weight: 700; font-variant-numeric: tabular-nums; } #liq-print-area .text-normal { font-size: 7.6pt; line-height: 1.35; font-weight: 400; color: var(--slate-600); } #liq-print-area .text-table { font-size: 7.4pt; line-height: 1.2; } #liq-print-area .footer-text { font-size: 6.3pt; line-height: 1.3; color: var(--slate-500); } /* ================= 1. Encabezado (35mm) ================= */ #liq-print-area .report-header { position: relative; height: 35mm; margin: 0 -9mm; overflow: hidden; background: #fff; } #liq-print-area .header-background { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; object-fit: fill; } #liq-print-area .brand-area { position: absolute; left: 9mm; top: 8mm; z-index: 1; max-width: 57mm; } #liq-print-area .brand-logo { display: block; max-width: 57mm; max-height: 14mm; width: auto; height: auto; object-fit: contain; } #liq-print-area .brand-subtitle { font-size: 7.4pt; font-weight: 500; color: var(--slate-500); margin-top: 1mm; } /* Diseño alternativo "Clave Tributaria" (ver f29pMarcaHtml): sin PNG propio de fondo/isotipo horizontal (solo se recibio el icono suelto) - se reemplaza la imagen de fondo por un degrade CSS con los colores reales de su marca (navy/violeta) y el isotipo + nombre se arman aparte (icono SVG + texto), mismo patron ya usado en .liq-print-brand para el logo de SIImplifica en la Simulacion de Liquidacion. */ #liq-print-area .report-header-cta, #liq-print-area .detalle-header-cta { background: linear-gradient(115deg, #fff 0%, #fff 52%, #263689 74%, #532581 100%); } /* Posicionamiento propio (no hereda max-width de .brand-area, pensado para el logo de SIImplifica - "Clave Tributaria" es mas largo y se cortaba en 2 lineas si compartia esa regla). */ #liq-print-area .brand-area-cta { position: absolute; left: 9mm; top: 10mm; z-index: 1; display: flex; align-items: center; gap: 3mm; max-width: none; white-space: nowrap; } #liq-print-area .brand-logo-cta-icon { display: block; width: 12mm; height: 12mm; flex: none; } #liq-print-area .brand-wordmark-cta { font-size: 13pt; font-weight: 700; color: #263689; line-height: 1.1; } #liq-print-area .brand-wordmark-cta small { display: block; font-size: 6.6pt; font-weight: 600; letter-spacing: 0.06em; color: #532581; margin-top: 0.5mm; } #liq-print-area .metadata-card { /* top/padding achicados: con los valores originales (5.5mm + 3mm) la tarjeta terminaba mas abajo que el punto donde la curva del fondo ya habia pasado a blanco a esta altura, dejando ver un pedacito del borde/fondo semitransparente de la tarjeta fuera de la zona oscura - verificado en vivo contra el PDF real. */ position: absolute; right: 13mm; top: 4mm; z-index: 1; width: 72mm; box-sizing: border-box; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); border-radius: 4mm; padding: 2mm 4mm; color: #fff; } /* auto auto + space-between en vez de 1fr 1fr: con columnas iguales, la caja de "Generado" (texto mas largo) quedaba mas ancha que la de "Periodo" y cada una se veia centrada en un espacio distinto - asi cada una se ajusta a su propio contenido y se reparten parejo. */ #liq-print-area .metadata-cols { display: grid; grid-template-columns: auto auto; justify-content: space-between; column-gap: 2mm; } #liq-print-area .metadata-box { display: flex; align-items: center; justify-content: center; gap: 1.5mm; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: 2.5mm; padding: 1.2mm 2mm; } #liq-print-area .metadata-box svg { width: 3.4mm; height: 3.4mm; flex-shrink: 0; color: rgba(255,255,255,0.8); } #liq-print-area .metadata-label { color: rgba(255,255,255,0.72); } #liq-print-area .metadata-value { font-size: 7.4pt; font-weight: 700; margin-top: 0.6mm; color: #fff; white-space: nowrap; } #liq-print-area .status-badge { margin-top: 1.5mm; display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; background: rgba(124,58,237,0.85); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; height: 5mm; font-size: 6.4pt; font-weight: 700; letter-spacing: 0.03em; color: #fff; text-transform: uppercase; } /* ================= 2. Empresa y parametros (18mm) ================= */ #liq-print-area .company-row { height: 18mm; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 6mm; } #liq-print-area .company-rut { font-size: 8pt; font-weight: 600; color: var(--slate-500); margin-top: 1.2mm; } #liq-print-area .param-capsule { height: 7mm; max-width: 85mm; padding: 0 4mm; border: 1px solid var(--slate-300); border-radius: 999px; background: #fff; display: flex; align-items: center; gap: 2mm; white-space: nowrap; flex-shrink: 0; } #liq-print-area .param-dot { width: 2.2mm; height: 2.2mm; border-radius: 50%; flex-shrink: 0; } #liq-print-area .param-text { font-size: 6.8pt; font-weight: 500; color: var(--slate-600); overflow: hidden; text-overflow: ellipsis; } /* ================= 3. Resultado principal (44mm) ================= */ #liq-print-area .result-card { height: 44mm; display: grid; grid-template-rows: 34mm 10mm; border: 1px solid #DDD6FE; border-radius: 4mm; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(23,37,84,0.045); } #liq-print-area .result-main { display: grid; grid-template-columns: 62% 38%; position: relative; } #liq-print-area .result-primary { position: relative; overflow: hidden; } #liq-print-area .result-primary-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } #liq-print-area .result-primary-content { position: relative; z-index: 1; height: 100%; padding: 6mm 7mm; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } #liq-print-area .result-primary-content .label-sm { color: rgba(255,255,255,0.78); } #liq-print-area .result-primary-content .amount-primary { color: #fff; margin-top: 1mm; } #liq-print-area .result-primary-sub { font-size: 7.4pt; line-height: 1.3; color: rgba(255,255,255,0.80); margin-top: 1.5mm; } #liq-print-area .result-secondary { padding: 6mm 7mm; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #fff; } /* corrido a la izquierda (pedido explicito) sin perder el centrado entre si de label/monto/badge - se mueve el grupo entero, no cada uno por su cuenta. */ #liq-print-area .result-secondary > * { transform: translateX(-10mm); align-self: center; } #liq-print-area .result-secondary .label-sm { color: var(--navy-900); } #liq-print-area .result-secondary-amount { font-size: 27pt; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--purple-700); margin-top: 1mm; } #liq-print-area .result-badge { margin-top: 1.5mm; display: inline-flex; align-items: center; width: fit-content; height: 5.5mm; padding: 0 3mm; background: var(--purple-50); color: var(--purple-700); border-radius: 999px; font-size: 6.6pt; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } #liq-print-area .result-footnote { height: 10mm; box-sizing: border-box; background: #FAFAFF; border-top: 1px solid var(--slate-200); display: flex; align-items: center; gap: 3mm; padding: 0 5mm; } #liq-print-area .result-footnote-bar { width: 1mm; align-self: stretch; margin: 2mm 0; background: var(--purple-600); border-radius: 1mm; flex-shrink: 0; } #liq-print-area .result-footnote-text { font-size: 7pt; color: var(--slate-600); line-height: 1.3; } /* ================= 4. Movimiento tributario (36mm incl. titulo) ================= */ #liq-print-area .mov-wrap { height: 36mm; margin-top: 2.5mm; } #liq-print-area .mov-grid { height: 29mm; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #D8DFEA; border-radius: 4mm; overflow: hidden; background: #fff; position: relative; } #liq-print-area .mov-item { position: relative; padding: 3.5mm 3mm; display: grid; grid-template-columns: 9mm minmax(0,1fr); column-gap: 2.5mm; align-items: start; } #liq-print-area .mov-item + .mov-item { border-left: 1px solid #D8DFEA; } #liq-print-area .mov-item-text { min-width: 0; margin-top: 4.5mm; } #liq-print-area .mov-notch { position: absolute; left: 0; top: 50%; width: 3mm; height: 3mm; background: #FFFFFF; border-top: 1px solid #D8DFEA; border-right: 1px solid #D8DFEA; transform: translate(-50%,-50%) rotate(45deg); z-index: 1; } #liq-print-area .mov-icon { width: 8mm; height: 8mm; border-radius: 2mm; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #liq-print-area .mov-icon svg { width: 4.5mm; height: 4.5mm; } #liq-print-area .mov-label { font-size: 6.8pt; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--slate-600); } /* margin-left negativo: el "$" a este tamano visualmente arranca mas a la derecha que la etiqueta de arriba aunque los bordes de caja coincidan exacto (confirmado midiendo getBoundingClientRect - es puro efecto optico de la fuente en un simbolo grande, no un margen real distinto). */ #liq-print-area .mov-value { font-size: 14.5pt; line-height: 1.05; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy-900); margin: 0.6mm 0 0.6mm -1.2mm; } #liq-print-area .mov-desc { font-size: 6.3pt; line-height: 1.25; color: var(--slate-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ================= 5. Relacion IVA (24mm incl. titulo) ================= */ #liq-print-area .rel-wrap { height: 24mm; margin-top: 1mm !important; } #liq-print-area .rel-box { height: 18mm; box-sizing: border-box; background: linear-gradient(90deg, #FAF7FF 0%, #F5F3FF 48%, #F0FDFA 100%); border: 1px solid #DDD6FE; border-radius: 3.5mm; padding: 3mm 5mm; display: grid; grid-template-columns: 1fr 20mm 1fr 20mm 1fr; align-items: center; } #liq-print-area .rel-node { text-align: left; } #liq-print-area .rel-node-top { display: flex; align-items: center; gap: 1.3mm; } #liq-print-area .rel-node-label { font-size: 7pt; font-weight: 600; color: var(--slate-600); } #liq-print-area .rel-node-value { font-size: 9.5pt; font-weight: 700; color: var(--navy-900); margin-top: 0.8mm; font-variant-numeric: tabular-nums; } #liq-print-area .rel-node.resultado .rel-node-value { color: var(--purple-700); } #liq-print-area .rel-line-wrap { display: flex; align-items: center; justify-content: center; height: 100%; margin-left: -14mm; } #liq-print-area .rel-node-dot { width: 2.2mm; height: 2.2mm; border-radius: 50%; background: #fff; border: 1.2px solid var(--purple-600); flex-shrink: 0; } #liq-print-area .rel-node-dot.filled { background: var(--purple-600); } /* ================= 6. Composicion + doble resultado (70mm) ================= */ #liq-print-area .comp-wrap { height: 75mm; margin-top: 2.5mm; } #liq-print-area .comp-table { height: 48mm; border: 1px solid #D8DFEA; border-radius: 3mm; overflow: hidden; position: relative; } #liq-print-area .comp-table::before { content: ""; position: absolute; left: 6.5mm; top: 6.8mm; bottom: 6.8mm; width: 1.2px; z-index: 0; background: linear-gradient(to bottom, var(--purple-500) 0%, var(--purple-500) 38%, var(--slate-200) 38%, var(--slate-200) 86%, var(--teal-500) 86%, var(--teal-500) 100%); } #liq-print-area .comp-row { height: 6.857mm; display: grid; grid-template-columns: 11mm 1fr 32mm; align-items: center; padding: 0 4mm; border-bottom: 1px solid #EEF2F7; box-sizing: border-box; } #liq-print-area .comp-row:last-child { border-bottom: none; } #liq-print-area .comp-num { position: relative; z-index: 1; width: 5mm; height: 5mm; border-radius: 50%; background: #fff; border: 1.3px solid var(--slate-300); color: var(--slate-400); font-size: 5.8pt; font-weight: 700; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } #liq-print-area .comp-row.activa .comp-num { background: var(--purple-600); border-color: var(--purple-600); color: #fff; } #liq-print-area .comp-concepto { font-size: 7.2pt; color: var(--slate-700); } #liq-print-area .comp-row.subtotal .comp-concepto { font-weight: 700; color: var(--purple-700); } #liq-print-area .comp-row.cero .comp-concepto, #liq-print-area .comp-row.cero .comp-monto { opacity: 0.68; } #liq-print-area .comp-monto { font-size: 7.5pt; font-weight: 600; color: var(--navy-900); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } #liq-print-area .comp-row.remanente { background: #ECFDF9; border-top: 1px solid #99F6E4; border-bottom: none; } #liq-print-area .comp-row.remanente .comp-concepto, #liq-print-area .comp-row.remanente .comp-monto { color: var(--teal-700); font-weight: 700; } #liq-print-area .comp-row.remanente .comp-num { background: var(--teal-600); border-color: var(--teal-600); color: #fff; } #liq-print-area .total-result { height: 18mm; margin-top: 3mm; position: relative; border-radius: 3.5mm; overflow: hidden; border: 1px solid var(--teal-500); } #liq-print-area .total-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } #liq-print-area .total-content { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: 55% 45%; } #liq-print-area .total-izq { color: #fff; box-sizing: border-box; padding: 3mm 6mm; display: flex; align-items: center; gap: 3mm; } #liq-print-area .total-der { box-sizing: border-box; padding: 3mm 6mm; display: flex; align-items: center; justify-content: center; gap: 10mm; } #liq-print-area .total-der > div:first-child { text-align: center; } #liq-print-area .total-icon { width: 8mm; height: 8mm; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #liq-print-area .total-icon svg { width: 4.2mm; height: 4.2mm; } #liq-print-area .total-der .label-sm { color: var(--teal-700); } #liq-print-area .total-izq .label-sm { color: rgba(255,255,255,0.85); } #liq-print-area .total-value { font-size: 15pt; font-weight: 700; margin-top: 0.8mm; font-variant-numeric: tabular-nums; } #liq-print-area .total-der .total-value { color: var(--teal-700); } /* ================= 7. Lectura del periodo (22mm incl. titulo) ================= */ #liq-print-area .lectura-wrap { height: 22mm; margin-top: 2.5mm; } #liq-print-area .lectura-box { height: 16.5mm; box-sizing: border-box; background: linear-gradient(90deg, #F8FAFC 0%, #EFF6FF 65%, #F5F3FF 100%); border: 1px solid #DBEAFE; border-radius: 3.5mm; padding: 3mm 4mm; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 3.5mm; } #liq-print-area .lectura-divider { width: 1px; align-self: stretch; background: #C7DAF5; } #liq-print-area .lectura-icon { width: 9mm; height: 9mm; border-radius: 50%; background: #fff; border: 1px solid #DBEAFE; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } #liq-print-area .lectura-icon svg { width: 4.6mm; height: 4.6mm; } #liq-print-area .lectura-item { display: flex; gap: 1.5mm; align-items: center; font-size: 7.4pt; color: var(--slate-700); margin-bottom: 1mm; } #liq-print-area .lectura-item:last-child { margin-bottom: 0; } #liq-print-area .lectura-check { width: 3mm; height: 3mm; border-radius: 50%; background: var(--green-600); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } #liq-print-area .lectura-check svg { width: 2mm; height: 2mm; stroke-width: 3; } #liq-print-area .lectura-badge { background: var(--purple-50); color: var(--purple-700); border: 1px solid #DDD6FE; height: 7mm; padding: 0 4mm; border-radius: 999px; display: flex; align-items: center; gap: 1.3mm; font-size: 6.6pt; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } #liq-print-area .lectura-badge svg { width: 3mm; height: 3mm; flex-shrink: 0; } /* ================= 8. Footer (10mm) ================= */ #liq-print-area .report-footer { height: 10mm; } #liq-print-area .footer-line { height: 1px; margin-bottom: 1.5mm; background: linear-gradient(90deg, #6D28D9 0%, #2563EB 50%, #14B8A6 100%); } #liq-print-area .footer-body { text-align: center; } #liq-print-area .footer-body p { margin: 0.5mm 0; } #liq-print-area .footer-body strong { color: var(--purple-600); font-weight: 600; } #liq-print-area .report-page:last-child { page-break-after: auto; } #liq-print-area * { box-sizing: border-box; } #liq-print-area { --navy-950: #0B1739; --navy-900: #172554; --navy-800: #1E3A5F; --purple-700: #5B21B6; --purple-600: #6D28D9; --purple-500: #7C3AED; --purple-100: #EDE9FE; --purple-50: #F5F3FF; --teal-700: #0F766E; --teal-600: #0D9488; --teal-500: #14B8A6; --teal-100: #CCFBF1; --teal-50: #F0FDFA; --blue-600: #2563EB; --blue-100: #DBEAFE; --blue-50: #EFF6FF; --green-600: #16A34A; --amber-600: #D97706; --slate-900: #0F172A; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748B; --slate-400: #94A3B8; --slate-300: #CBD5E1; --slate-200: #E2E8F0; --slate-100: #F1F5F9; --slate-50: #F8FAFC; } #liq-print-area .report-page { width: 210mm; height: 297mm; padding: 0 9mm 6mm; overflow: hidden; position: relative; background: #FFFFFF; color: var(--navy-900); font-family: "Inter", "IBM Plex Sans", Arial, sans-serif; margin: 0 auto; display: flex; flex-direction: column; } #liq-print-area .report-page > * { flex: 0 0 auto; } #liq-print-area .label-sm { font-size: 6.8pt; line-height: 1.2; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; } #liq-print-area .footer-text { font-size: 6.3pt; line-height: 1.3; color: var(--slate-500); } /* ---- Encabezado (mas bajo que el de la portada: esta pagina necesita mas alto para la tabla, no lleva resultado principal debajo) ---- */ #liq-print-area .detalle-header { position: relative; height: 30mm; margin: 0 -9mm 3mm; overflow: hidden; } #liq-print-area .header-background { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; object-fit: fill; } #liq-print-area .brand-area { position: absolute; left: 9mm; top: 6mm; z-index: 1; max-width: 55mm; } #liq-print-area .brand-logo { display: block; max-width: 55mm; max-height: 11mm; width: auto; height: auto; object-fit: contain; } #liq-print-area .brand-subtitle { font-size: 6.8pt; font-weight: 500; color: var(--slate-500); margin-top: 1mm; } #liq-print-area .detalle-meta-card { position: absolute; right: 9mm; top: 4.5mm; z-index: 1; width: 78mm; text-align: right; color: #fff; } #liq-print-area .detalle-meta-empresa { font-size: 9pt; font-weight: 700; line-height: 1.2; } #liq-print-area .detalle-meta-rutperiodo { font-size: 7.2pt; color: rgba(255,255,255,0.75); margin-top: 0.8mm; } #liq-print-area .detalle-meta-sep { margin: 0 1.2mm; } #liq-print-area .detalle-pagina-badge { display: inline-block; margin-top: 1.8mm; background: rgba(124,58,237,0.85); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 1mm 3mm; font-size: 6.2pt; font-weight: 700; letter-spacing: 0.03em; } #liq-print-area .detalle-title-row { margin-bottom: 3mm; } #liq-print-area .detalle-title { font-size: 14pt; font-weight: 700; letter-spacing: -0.01em; color: var(--navy-900); } #liq-print-area .detalle-subtitle { font-size: 7.6pt; color: var(--slate-500); margin-top: 0.8mm; } #liq-print-area .detalle-stats { height: 16mm; margin-bottom: 3mm; border: 1px solid #D8DFEA; border-radius: 3.5mm; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; } #liq-print-area .detalle-stat-item { display: flex; align-items: center; gap: 2.5mm; padding: 0 4mm; } #liq-print-area .detalle-stat-item + .detalle-stat-item { border-left: 1px solid #EEF2F7; } #liq-print-area .detalle-stat-icon { width: 8mm; height: 8mm; border-radius: 2mm; background: var(--slate-50); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #liq-print-area .detalle-stat-icon svg { width: 4.2mm; height: 4.2mm; } #liq-print-area .detalle-stat-label { color: var(--slate-500); } #liq-print-area .detalle-stat-value { font-size: 11pt; font-weight: 700; color: var(--navy-900); margin-top: 0.5mm; font-variant-numeric: tabular-nums; } #liq-print-area .detalle-origen { height: 5mm; margin-bottom: 2.5mm; display: flex; align-items: center; gap: 1.8mm; font-size: 6.8pt; color: var(--slate-500); } #liq-print-area .detalle-origen svg { width: 3mm; height: 3mm; flex-shrink: 0; } #liq-print-area .detalle-lectura { height: 10mm; margin-bottom: 3.5mm; background: var(--amber-50, #FFFBEB); border: 1px solid #FDE68A; border-radius: 3mm; padding: 0 4mm; display: flex; align-items: center; gap: 2.5mm; box-sizing: border-box; } #liq-print-area .detalle-lectura svg { width: 4mm; height: 4mm; flex-shrink: 0; } #liq-print-area .detalle-lectura-text { flex: 1; font-size: 7.2pt; color: var(--slate-700); } #liq-print-area .detalle-lectura-text strong { color: var(--navy-900); } #liq-print-area .detalle-lectura-pct { font-size: 6.8pt; font-weight: 700; color: #92400E; white-space: nowrap; flex-shrink: 0; } #liq-print-area .detalle-table-title { font-size: 8pt; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy-900); margin-bottom: 1.5mm; } #liq-print-area .detalle-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: 3mm; } #liq-print-area .detalle-table thead th { text-align: left; font-size: 6.4pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate-500); background: var(--slate-50); padding: 1.8mm 2mm; border-bottom: 1px solid #D8DFEA; } #liq-print-area .detalle-table thead th.col-monto { text-align: right; } #liq-print-area .detalle-table tbody td { font-size: 7pt; color: var(--slate-700); padding: 1.6mm 2mm; border-bottom: 1px solid #EEF2F7; font-variant-numeric: tabular-nums; } #liq-print-area .detalle-table tbody tr:nth-child(even) td { background: #FAFBFC; } #liq-print-area .detalle-table tbody tr.fila-nc td { background: #FFF7ED; color: #C2410C; } #liq-print-area .detalle-table td.col-monto { text-align: right; white-space: nowrap; } #liq-print-area .detalle-table td.col-n { color: var(--slate-400); width: 7mm; } #liq-print-area .detalle-table td.col-fecha, #liq-print-area .detalle-table th.col-fecha { width: 17mm; } #liq-print-area .detalle-table td.col-folio, #liq-print-area .detalle-table th.col-folio { width: 17mm; } #liq-print-area .detalle-table td.col-tipo, #liq-print-area .detalle-table th.col-tipo { width: 13mm; } #liq-print-area .detalle-table td.col-rut, #liq-print-area .detalle-table th.col-rut { width: 22mm; } #liq-print-area .detalle-table td.col-monto, #liq-print-area .detalle-table th.col-monto { width: 21mm; } #liq-print-area .tag-nc { display: inline-block; background: #FEE2E2; color: #B91C1C; font-size: 5.6pt; font-weight: 700; border-radius: 999px; padding: 0.3mm 1.3mm; margin-left: 0.8mm; } #liq-print-area .detalle-subtotal-bar, #liq-print-area .detalle-acumulado-bar { height: 7.5mm; margin-bottom: 2mm; border-radius: 2.5mm; padding: 0 4mm; display: flex; align-items: center; gap: 2.5mm; font-size: 7pt; box-sizing: border-box; } #liq-print-area .detalle-subtotal-bar { background: var(--purple-50); } #liq-print-area .detalle-acumulado-bar { background: var(--teal-600); color: #fff; margin-bottom: 3mm; } #liq-print-area .detalle-bar-icon svg { width: 3.6mm; height: 3.6mm; display: block; } #liq-print-area .detalle-bar-label { font-size: 6.6pt; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--purple-700); } #liq-print-area .detalle-acumulado-bar .detalle-bar-label { color: #fff; } #liq-print-area .detalle-bar-vals { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--navy-900); } #liq-print-area .detalle-acumulado-bar .detalle-bar-vals { color: #fff; } #liq-print-area .detalle-bar-vals b { font-weight: 600; opacity: 0.7; margin-right: 0.8mm; } #liq-print-area .detalle-paginacion { height: 10mm; margin-top: auto; display: flex; align-items: center; gap: 3mm; border-top: 1px solid #EEF2F7; padding-top: 3mm; } #liq-print-area .detalle-paginacion-dots { display: flex; align-items: center; } #liq-print-area .detalle-dot { width: 5mm; height: 5mm; border-radius: 50%; background: #fff; border: 1.3px solid var(--slate-300); color: var(--slate-400); font-size: 6pt; font-weight: 700; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } #liq-print-area .detalle-dot.activo { background: var(--purple-600); border-color: var(--purple-600); color: #fff; } #liq-print-area .detalle-dot-line { width: 6mm; height: 1.3px; background: var(--slate-300); } #liq-print-area .detalle-paginacion-texto { font-size: 7.2pt; font-weight: 600; color: var(--slate-600); } #liq-print-area .detalle-paginacion-siguiente { margin-left: auto; display: flex; align-items: center; gap: 1.3mm; font-size: 6.8pt; font-weight: 600; color: var(--purple-700); } #liq-print-area .detalle-paginacion-siguiente svg { width: 3mm; height: 3mm; } #liq-print-area .report-footer { height: 10mm; margin-top: 3mm; } #liq-print-area .footer-line { height: 1px; margin-bottom: 1.5mm; background: linear-gradient(90deg, #6D28D9 0%, #2563EB 50%, #14B8A6 100%); } #liq-print-area .footer-body { text-align: center; } #liq-print-area .footer-body p { margin: 0.5mm 0; } #liq-print-area .footer-body strong { color: var(--purple-600); font-weight: 600; } @page { size: A4 portrait; margin: 10mm 12mm; } } .process-group { margin-bottom: 24px; } .process-group:last-child { margin-bottom: 0; } .process-group-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 10px; } .process-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border: 1px solid var(--border); border-radius: 11px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s; } .process-row:last-child { margin-bottom: 0; } .process-row:hover { border-color: var(--primary); } .process-row.disabled { opacity: 0.6; cursor: default; } .process-row.disabled:hover { border-color: var(--border); } .process-row-label { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; font-weight: 500; } .process-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; } .process-row.disabled input[type="checkbox"] { cursor: default; } .badge-soon { background: #F1F5F9; color: var(--muted); font-size: 0.66rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; } /* ---------- Pantalla Procesos ---------- */ /* Cada modulo es una columna propia (Bancos | Contabilidad | RRHH lado a lado) con sus procesos apilados adentro - as tres modulos entran juntos en la pantalla sin necesitar scroll, en vez de un modulo por fila completa uno debajo del otro. */ .procesos-modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } .module-block { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px; min-width: 0; } .module-block.collapsed .process-cards-grid { display: none; } .module-block-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .module-block-header-text { min-width: 0; flex: 1; } .module-block-meta { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; } .module-count { font-size: 0.78rem; color: var(--muted); white-space: nowrap; } .module-collapse-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); transition: background .15s; flex-shrink: 0; padding: 0; } .module-collapse-btn:hover { background: var(--bg); } .module-collapse-btn svg { transition: transform .2s; } .module-block.collapsed .module-collapse-btn svg { transform: rotate(180deg); } /* Tarjetas apiladas en una sola columna dentro de su modulo (ver .procesos-modules-grid) en vez de lado a lado - asi el bloque queda angosto y los tres modulos entran juntos en la pantalla. */ .process-cards-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .module-card-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--color-violet-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-shrink: 0; } .module-card-icon svg { width: 19px; height: 19px; } .process-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; } .process-card.process-card-active { border-bottom: 3px solid var(--primary); } .process-card-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--color-violet-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .process-card-icon svg { width: 16px; height: 16px; } .process-card-icon.pc-icon-green { background: var(--success-bg); color: var(--success); } .process-card-icon.pc-icon-orange { background: #FFEDD5; color: #EA580C; } .process-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .process-card-head h3 { font-size: 0.98rem; } .process-card-meta { font-size: 0.78rem; color: var(--muted); margin-bottom: 16px; display: flex; flex-direction: column; gap: 5px; } .process-card-meta b { color: var(--text); } .process-card-meta-row { display: flex; align-items: center; gap: 6px; } .process-card-meta-row svg { width: 13px; height: 13px; flex-shrink: 0; } .process-card-actions-row { display: flex; gap: 8px; align-items: stretch; } .process-card-actions-row .btn-primary, .process-card-actions-row .btn-secondary { flex: 1; font-size: 0.82rem; padding: 9px 10px; gap: 6px; } .pc-kebab-btn { width: 38px; border-radius: 10px; border: 1px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); flex-shrink: 0; } .pc-kebab-btn:hover { background: var(--bg); } .process-card-soon-footer { text-align: center; margin-top: 10px; } .link-btn { background: transparent; border: none; color: var(--primary); font-size: 0.82rem; font-weight: 600; cursor: pointer; padding: 4px; } .link-btn:hover { color: var(--primary-dark); text-decoration: underline; } .mpc-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #F1F5F9; font-size: 0.86rem; cursor: pointer; } .mpc-row:last-child { border-bottom: none; } .mpc-row:hover { background: var(--bg); } .mpc-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; } .mpc-row-rut { color: var(--muted); font-size: 0.78rem; margin-left: auto; } /* ---------- Historial: drawer de detalle ---------- */ /* display se maneja desde JS (ver abrirDrawer/cerrarDrawer), no desde ".open" - alternar display:none->block y la transicion en el mismo tick no alcanza a animar (el navegador pinta directo el estado final, sin una foto "cerrado" de la que partir). El fade de opacidad si lo puede manejar la clase, separado en un frame aparte por el helper. */ .drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 100; opacity: 0; transition: opacity .2s ease; } .drawer-overlay.open { opacity: 1; } .drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 100vw); background: #fff; box-shadow: -20px 0 50px rgba(15,23,42,0.18); padding: 24px; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; } /* Version mas ancha para paneles con tabs/formularios (detalle de empresa), el drawer angosto de ejecucion se queda con el default. */ .drawer.drawer-wide { width: min(640px, 100vw); } /* El drawer de "Ver empresa" de RRHH (Trabajadores/Contratos) tiene tablas de 5-6 columnas con texto largo (nombre completo, RUT, cargo, fechas) - con drawer-wide (640px) no entraban y quedaban cortadas, obligando a scroll horizontal para ver la ultima columna (pedido explicito del usuario, 31-08-2026). Clase aparte en vez de agrandar drawer-wide para no tocar el otro drawer que la reusa (detalle/edicion de empresa). */ .drawer.drawer-xwide { width: min(920px, 100vw); } .drawer-overlay.open .drawer { transform: translateX(0); } .drawer-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; } .drawer-header h3 { font-size: 1.1rem; } .drawer-close { background: transparent; border: none; cursor: pointer; color: var(--muted); padding: 4px; } .drawer-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } .drawer-meta-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; } .drawer-meta-value { font-size: 0.88rem; font-weight: 600; margin-top: 2px; } .timeline { display: flex; flex-direction: column; margin-bottom: 18px; } .timeline-item { display: flex; gap: 12px; padding-bottom: 18px; position: relative; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--border); } .timeline-item:last-child::before { display: none; } .timeline-dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.7rem; font-weight: 700; z-index: 1; } .timeline-dot.td-done { background: var(--success-bg); color: var(--success); } .timeline-dot.td-error { background: var(--danger-bg); color: var(--danger); } .timeline-dot.td-pending { background: #F1F5F9; color: var(--muted); } .timeline-title { font-size: 0.85rem; font-weight: 600; } .timeline-sub { font-size: 0.76rem; color: var(--muted); margin-top: 1px; } .timeline-time { font-size: 0.72rem; color: var(--muted); margin-left: auto; white-space: nowrap; } .drawer .btn-block { margin-top: 6px; } /* ---------- Modals ---------- */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.55); align-items: center; justify-content: center; z-index: 100; padding: 16px; } .modal-overlay.open { display: flex; } .modal-box { background: #fff; width: 100%; max-width: 400px; border-radius: 16px; padding: 26px; box-shadow: 0 25px 60px rgba(15,23,42,0.25); } .modal-box h3 { font-size: 1.05rem; margin-bottom: 4px; } .modal-box .modal-sub { color: var(--muted); font-size: 0.83rem; margin-bottom: 18px; } /* Genericas (no solo dentro de .modal-box) para reusar el mismo patron de campo con label en formularios fuera de un modal, como el resumen editable del detalle de empresa. */ .field label { font-size: 0.78rem; color: var(--muted); display: block; margin: 0 0 5px; } .field { margin-bottom: 14px; } .field input { width: 100%; font-size: 0.88rem; padding: 0 12px; height: 42px; margin: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 11px; outline: none; } .field input:focus { background: #fff; border-color: var(--primary); } /* Selects de hora/minuto/AM-PM del modal de RR.HH. (agregar horario) - sin esto quedaban con el