:root{ --navy:#1C1C2E;--navy-dark:#13131F;--navy-mid:#2A2A40;--navy-ink:#1E3A5F;--navy-deep:#0F2B4C; --accent:#4F46E5;--accent-dark:#3730A3;--accent-light:#EEF2FF; --accent-2:#7C3AED;--accent-mid:#A5B4FC; --bg:#F8FAFC;--border:#E2E8F0;--text:#1E293B; --muted:#64748B;--ok:#059669;--ok-text:#15803D;--ok-bg:#F0FDF4;--ok-mid:#16a34a;--ok-light:#dcfce7; --warn:#D97706;--warn-dark:#92400E;--warn-bg:#FFFBEB;--warn-light:#FEF3C7;--warn-border:#FDE68A; --err:#dc2626;--err-text:#b3261e;--err-bg:#fce8e6;--crit:#93000a;--crit-bg:#ffdad6; --indigo-light:#E0E7FF;--purple-light:#F5F3FF;--purple-soft:#EDE9FE;--purple-border:#DDD6FE;--green-border:#BBF7D0; --ok-deep:#064e3b;--ok-glow:#86efac;--green-deep:#14532D; --err-border:#FECACA;--rose:#BE123C;--rose-bg:#FFF1F2;--rose-border:#FECDD3;--danger:#E11D48; --info-bg:#F0F9FF;--info-text:#0369A1;--info-border:#BAE6FD; --yellow-bg:#fef9c3;--yellow-text:#854d0e;--yellow-border:#fde047;--yellow:#eab308; --blue:#1D4ED8;--blue-light:#DBEAFE;--blue-sky:#0284C7; --orange:#f97316;--orange-dark:#C2410C;--orange-bg:#FFF7ED;--orange-light:#ffedd5;--orange-border:#FED7AA; --desk:#CBD5E1;--card:#ffffff;--radius:14px;--radius-sm:8px;--radius-md:12px;--radius-xs:6px;--radius-badge:10px;--radius-2xs:4px;--radius-tag:5px;--radius-input:7px;--radius-xl:16px;--radius-pill:20px;--radius-card-xl:24px;--radius-btn:9px;--radius-circle:50%;--radius-full:999px; --text-strong:#0F172A;--doc-text:#111827;--surface:#F1F5F9;--muted-light:#94A3B8; --text-secondary:#475569;--label:#334155;--accent-border:#C7D2FE; --shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.07); --focus-ring:0 0 0 3px rgba(79,70,229,.22); --grad-accent:linear-gradient(135deg,var(--accent),var(--accent-2)); --bd:1.5px solid var(--border);--bd-1:1px solid var(--border);--bd-2:2px solid var(--border); --bd-srf:1px solid var(--surface);--bd-bg:1px solid var(--bg); --bd-accent:1px solid var(--accent-border);--bd-ok:1px solid var(--green-border);--bd-warn:1px solid var(--warn-border);--bd-info:1px solid var(--info-border);--bd-purple:1px solid var(--purple-border); --tr-border:border-color .15s,box-shadow .15s;--tr-border-fast:border-color .12s,box-shadow .12s; --tr-surface:background .15s,border-color .15s,box-shadow .15s;--tr-fast:background .12s,box-shadow .12s; --tr-lift:background .15s,transform .15s,box-shadow .15s;--tr-bg:background .15s,box-shadow .15s;--tr-color:background .15s,color .15s,box-shadow .15s;--tr-all:background .15s,color .15s,border-color .15s,box-shadow .15s;--tr-card:box-shadow .2s,border-color .2s,transform .2s;--tr-color-fast:color .12s,box-shadow .12s;--tr-bg-fast:background .1s;--tr-border-ch:border-color .15s,color .15s,box-shadow .15s; --tr-bg-xs:background .12s;--tr-motion:transform .2s,box-shadow .2s; --anim-card:cardIn .22s cubic-bezier(.34,1.1,.64,1) both;--anim-card-slow:cardIn .28s cubic-bezier(.34,1.1,.64,1) both;--anim-row:rowIn .2s ease both; --hover-lift:translateY(-1px); --overlay:rgba(15,23,42,.58);--overlay-dark:rgba(15,23,42,.6);--overlay-lt:rgba(15,23,42,.55);--glass-white:rgba(255,255,255,.15);--glass-border:rgba(255,255,255,.2);--shadow-xs:0 1px 3px rgba(15,23,42,.04);--shadow-card:0 1px 4px rgba(15,23,42,.04);--shadow-nav:0 1px 4px rgba(15,23,42,.06);--shadow-sm:0 2px 8px rgba(15,23,42,.06);--shadow-accent:0 4px 12px rgba(79,70,229,.3); --font:'Inter',sans-serif;--font-mono:'Roboto Mono',monospace;--tr-bg-only:background .15s;--tr-btn:background .2s,transform .2s,box-shadow .2s;--sidebar-w:68px;--topbar-h:64px; color-scheme:light; } *{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:var(--desk) transparent;scroll-behavior:smooth} /* ── Scrollbar delgada global (sidebar sobreescribe a none) ── */ *::-webkit-scrollbar{width:5px;height:5px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--desk);border-radius:99px} *::-webkit-scrollbar-thumb:hover{background:var(--muted-light)} /* ── Global keyboard focus ring — accessibility ── */ :focus-visible{outline:none;box-shadow:var(--focus-ring)!important} /* ── Smooth transitions on interactive elements ── */ a,button,select,input,textarea,[role="button"]{transition-property:color,background,border-color,box-shadow,opacity,transform,filter;transition-duration:.15s;transition-timing-function:ease} ::selection{background:rgba(79,70,229,.15);color:var(--text-strong)} ::placeholder{color:var(--muted-light);opacity:1} button,label,[role="button"]{user-select:none} :is(button,input,select,textarea){font-family:inherit} button:hover:not(:disabled){filter:brightness(1.06)} button:active:not(:disabled){filter:brightness(.96);transform:scale(.98)} :is(html,body){height:100%;overflow:hidden} body{font-family:var(--font);background:var(--bg);color:var(--text);display:flex;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} /* ══════════════════════════════════════════════ SIDEBAR — Opción B Moderno (icon-rail) ══════════════════════════════════════════════ */ .sidebar{background:var(--navy);display:flex;align-items:center;flex-shrink:0} .sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);flex-direction:column;height:100vh;z-index:10;padding:14px 0;gap:4px} /* flex-center-shrink 10-way base: display:flex + center + flex-shrink:0 */ :is(.sidebar-logo,.nav-item,.sidebar-avatar,.topbar-avatar,.repo-kpi-icon,.func-det-avatar,.anx-icon,.iw-card-ic,.kpi-icon,.func-qr-canvas,.firma-bloque-qr,.hv360-kpi-bubble,.firma-det-header-ic,.avatar-accent-sm,.avatar-30){display:flex;align-items:center;justify-content:center;flex-shrink:0} /* Logo compacto */ :is(.sidebar-logo,.nav-item){border-radius:var(--radius-md)} .sidebar-logo{width:42px;height:42px;background:var(--grad-accent);margin-bottom:12px;box-shadow:0 4px 14px rgba(79,70,229,.35)} .sidebar-logo-mark{display:contents} .sidebar-logo-mark img{width:28px;height:28px;object-fit:contain;border-radius:var(--radius-xs)} .sidebar-logo-mark .logo-fallback{font-size:.78rem;font-weight:800;color:#fff;letter-spacing:.02em;display:flex} :is(.sidebar-logo-text,.sidebar-divider,.sidebar-section-label,.sidebar-user-info){display:none} .sidebar-nav::-webkit-scrollbar{display:none} /* Nav items — solo icono centrado */ :is(.sidebar-nav,.iw-step){flex:1;display:flex;flex-direction:column;align-items:center} .sidebar-nav{width:100%;gap:2px;padding:0 10px;overflow-y:auto;scrollbar-width:none} .nav-item{position:relative;width:46px;height:46px;font-size:0;color:rgba(255,255,255,.35);cursor:pointer;transition:background .18s,color .18s,box-shadow .18s;border:none;background:none} .nav-item:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8)} .nav-item.active{background:rgba(79,70,229,.28);color:var(--accent-mid);box-shadow:0 0 0 1px rgba(129,140,248,.3)} /* Barra izquierda activo */ @keyframes navBarIn{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}} .nav-item.active::before{content:'';position:absolute;left:-10px;width:3px;height:22px;background:var(--accent-mid);border-radius:0 2px 2px 0;transform-origin:center;animation:navBarIn .15s cubic-bezier(.34,1.1,.64,1) both} /* Icono */ .nav-item .nav-ic{font-size:1.15rem;flex-shrink:0;display:flex} /* Tooltip */ @keyframes tooltipIn{from{opacity:0;transform:translateY(-50%) translateX(-4px)}to{opacity:1;transform:translateY(-50%) translateX(0)}} .nav-item[title]:hover::after{content:attr(title);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);background:var(--text-strong);color:#fff;font-size:11px;font-weight:600;padding:5px 10px;border-radius:var(--radius-input);white-space:nowrap;pointer-events:none;z-index:100;box-shadow:0 4px 12px rgba(15,23,42,.22);animation:tooltipIn .12s ease both} /* Menú "Más / Informes" del sidebar */ .menu-mas-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:600;color:var(--text-strong,#1e293b);padding:9px 12px;border-radius:8px;white-space:nowrap} .menu-mas-item:hover{background:var(--accent-light,#eef2ff);color:var(--accent,#4f46e5)} /* Sub-pestañas del módulo Dotación */ .dot-subtab{background:none;border:none;border-bottom:2.5px solid transparent;cursor:pointer;font-family:inherit;font-size:.82rem;font-weight:700;color:var(--muted,#64748b);padding:9px 14px;margin-bottom:-1px} .dot-subtab:hover{color:var(--accent,#4f46e5)} .dot-subtab.active{color:var(--accent,#4f46e5);border-bottom-color:var(--accent,#4f46e5)} /* Badge conteo (borradores) */ :is(.nav-badge,.fdir-avatar,.avatar-step-xs){border-radius:var(--radius-circle);color:#fff;display:inline-flex;align-items:center;justify-content:center} .nav-badge{position:absolute;top:6px;right:5px;background:var(--err);font-size:0;min-width:8px;height:8px;padding:0;border:1.5px solid var(--navy)} :is(.nav-badge[data-count="0"],.nav-badge:empty){display:none} /* User / footer */ .sidebar-user{margin-top:auto;padding:10px 0 0;border-top:1px solid rgba(255,255,255,.07);width:100%;display:flex;justify-content:center} .sidebar-user-row{justify-content:center} :is(.sidebar-avatar,.topbar-avatar){width:36px;height:36px;border-radius:var(--radius-circle);font-size:.72rem;font-weight:700;color:#fff} .sidebar-avatar{background:var(--grad-accent)} :is(.od-status-bar,.od-dot,.od-lbl){display:none} @keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}} @keyframes panelSlideUp{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes overlayFade{from{opacity:0}to{opacity:1}} /* Entrada animada para todos los modales */ .iw-overlay.open .iw-modal{animation:modalIn .2s cubic-bezier(.34,1.1,.64,1) both} /* ══════════════════════════════════════════════ MAIN AREA ══════════════════════════════════════════════ */ :is(.main,.view){flex:1;flex-direction:column;height:100vh;overflow:hidden;min-width:0} .main{display:flex} /* ── Topbar ── */ /* 8-way flex-space-between-shrink super-base */ :is(.topbar,.legal-topbar,.iw-footer,.preview-head,.reg-head,.prev-head,.ndoc-head,.iw-head){display:flex;align-items:center;justify-content:space-between;flex-shrink:0} :is(.topbar,.legal-topbar,.iw-footer){background:var(--card)} :is(.topbar,.legal-topbar){height:var(--topbar-h);min-height:var(--topbar-h);border-bottom:var(--bd-1);padding:0 32px;box-shadow:var(--shadow-nav)} .topbar{position:relative;z-index:5} .topbar-left h1{font-size:1.1rem;font-weight:700;color:var(--text-strong);letter-spacing:-.01em} .topbar-left p{font-size:.74rem;color:var(--muted);margin-top:1px;line-height:1.3} :is(.topbar-right,.topbar-badge,.topbar-badge-active){background:var(--accent-light);border:var(--bd-accent);color:var(--accent);font-size:.72rem;font-weight:600} :is(.topbar-right,.topbar-badge){border-radius:var(--radius-xs);padding:5px 12px} .topbar-badge-active{border-radius:var(--radius-pill);padding:5px 14px;display:flex;align-items:center;gap:7px} .topbar-badge-dot{background:var(--ok);box-shadow:0 0 0 2px rgba(34,197,94,.25)} .topbar-avatar{background:var(--accent);box-shadow:0 2px 6px rgba(79,70,229,.35)} /* ── Content area: form | preview ── */ .content{flex:1;display:grid;grid-template-columns:460px 1fr;overflow:hidden;background:var(--surface);padding:16px;gap:16px} /* ══════════════════════════════════════════════ PANEL FORMULARIO ══════════════════════════════════════════════ */ :is(.panel-left,.panel-right,.dash-kpi-card,.legal-right,.ndoc-modal,.modal-anx,.modal-nf,.iw-modal){background:var(--card);display:flex;flex-direction:column;overflow:hidden} :is(.panel-left,.panel-right){border-radius:var(--radius-md);box-shadow:0 2px 12px rgba(15,23,42,.08)} .panel-left-scroll{flex:1;overflow-y:auto;padding:20px 20px 8px} :is(.panel-left-actions,.repo-panel-footer,.fdir-footer,.func-det-footer){background:var(--card);border-top:var(--bd-1);display:flex;flex-shrink:0} .panel-left-actions{padding:12px 20px 16px;flex-direction:column;gap:7px} /* Tarjeta de formulario */ :is(.card-title,.sec-label,.repo-panel-section-title,.func-det-card-head,.firma-det-card-head){font-weight:800;text-transform:uppercase;color:var(--accent);display:flex;align-items:center} .card-title{font-size:.7rem;margin:0 0 12px;padding-bottom:8px;border-bottom:var(--bd-2);letter-spacing:.06em;gap:7px} /* Secciones de formulario (Acordeón) */ .form-section{display:block;margin-bottom:8px;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease} .form-section[open]{box-shadow:0 4px 12px rgba(15,23,42,.08);border-color:var(--accent)} .sec-label{font-size:.65rem;letter-spacing:.08em;margin:0;padding:12px 16px;background:var(--bg);cursor:pointer;justify-content:space-between;user-select:none;list-style:none;transition:var(--tr-bg),color .15s} .sec-label::-webkit-details-marker{display:none} .sec-label:hover{background:var(--surface);color:var(--accent)} .form-section[open] .sec-label{background:var(--card);border-bottom:var(--bd-srf);color:var(--accent)} .sec-body{padding:16px;background:var(--card)} .ic-acc{font-size:.8rem;transition:transform .2s;color:var(--muted)} .form-section[open] .ic-acc{transform:rotate(180deg);color:var(--accent)} /* ── TYPE TABS ── */ :is(.tab-btn,.filt-btn,.gdoc-wf-btn,.iw-btn-prev){background:var(--card);cursor:pointer;font-weight:600;color:var(--muted)} :is(.tab-btn,.filt-btn){border:var(--bd)} .tab-btn{border-radius:var(--radius);padding:9px 4px;text-align:center;font-size:.65rem;transition:border-color .2s,color .2s,background .2s,transform .2s,box-shadow .2s;line-height:1.3;font-family:var(--font)} .tab-btn .ic{font-size:1.15rem;display:block;margin-bottom:3px} .tab-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);transform:var(--hover-lift);box-shadow:0 2px 8px rgba(79,70,229,.12)} :is(.tab-btn,.btn-historial,.btn-print,.legal-card,.repo-kpi-card,.hv360-stat-card):active{transform:translateY(0)} .tab-btn.active{border-color:var(--accent);color:var(--accent);background:linear-gradient(160deg,var(--accent-light),var(--indigo-light));box-shadow:0 2px 8px rgba(79,70,229,.18);transform:var(--hover-lift)} /* ── FORM FIELDS ── */ .fg{margin-bottom:10px} :is(.fg,.nf-fg) label{display:flex;align-items:center;gap:4px;color:var(--label)} .fg label{font-size:.71rem;font-weight:600;margin-bottom:4px;font-family:var(--font)} .req{color:var(--err);font-size:.85rem} .fg :is(input,select,textarea){width:100%;border:var(--bd);border-radius:var(--radius-sm);padding:7px 11px;font-size:.8rem;color:var(--text);background:var(--card);transition:var(--tr-border),background .15s;outline:none} :is(.fg input,.fg select,.fg textarea,.st-select,.reg-obs,.repo-val-select,.repo-obs-input,.ndoc-input,.ndoc-select,.ndoc-textarea,.gdoc-input,.gdoc-select,.gdoc-textarea,.fdir-search-field input,.fdir-filter-select,:is(.anx-fg,.nf-fg) :is(input,select,textarea),.hv-input,.form-input,.sel-form-xs,.field-compact,.sel-card-md):hover:not(:focus),.repo-search:hover:not(:focus-within){border-color:var(--muted-light)} .fg textarea{resize:vertical;min-height:56px} .fg.error :is(input,select,textarea),.nf-fg input.input-error{border-color:var(--err);background:var(--err-bg)} .err-msg{display:none;font-size:.67rem;color:var(--err);margin-top:2px;align-items:center;gap:3px} .err-msg::before{content:'⚠';font-size:.6rem} .fg.error .err-msg{display:flex} .fg.ok :is(input,select,textarea){border-color:var(--ok);background:var(--ok-bg)} .fg.ok label::after{content:' ✓';color:var(--ok);font-size:.7rem;font-weight:700} /* ── FADE para campo fecha término (indefinido) ── */ #fg-f-termino{transition:opacity .3s ease,max-height .3s ease;overflow:hidden;max-height:80px} #fg-f-termino.fade-out{opacity:0;max-height:0;pointer-events:none;margin:0} .row2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} .hint{font-size:.66rem;color:var(--accent);margin-top:3px;font-weight:600} .badge{background:var(--indigo-light);color:var(--accent);font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:var(--radius-badge)} /* ══════════════════════════════════════════════ GENERADOR — Estilo Stitch (inputs, labels, cards) ══════════════════════════════════════════════ */ /* Sección header dentro de card */ .panel-left-scroll .card-title{font-size:.72rem;font-weight:800;color:var(--text-strong);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px} /* Labels */ /* 6-way micro-label base: .65rem bold uppercase tracked */ :is(#form-area label,.form-label,#gen-contrato-panel label,.audit-content,.func-tl-content,.audit-accion){font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em} :is(#form-area label,.form-label,#gen-contrato-panel label){display:block;color:var(--muted);margin-bottom:5px} /* Inputs / selects / textareas — estilo Stitch */ #form-area :is(input[type=text],input[type=date],input[type=number],select,textarea){background:var(--surface)!important;border:none!important;border-radius:var(--radius-sm)!important;padding:11px 14px!important;font-size:.82rem!important;font-family:var(--font);color:var(--text-strong);width:100%;box-sizing:border-box;transition:var(--tr-bg);outline:none} #form-area :is(input[type=text],input[type=date],input[type=number],select,textarea):hover:not(:focus){background:var(--card)!important} #form-area :is(input[type=text],input[type=date],input[type=number],select,textarea):focus{background:var(--card)!important;border-color:var(--accent)!important;box-shadow:var(--focus-ring)!important} /* ══════════════════════════════════════════════ BOTONES DE ACCIÓN — rediseñados ══════════════════════════════════════════════ */ :is(.btn-gen,.gdoc-tipo-opt){border-radius:var(--radius-pill);font-family:var(--font);display:flex;align-items:center} .btn-gen{width:100%;padding:14px 16px;font-size:.88rem;transition:var(--tr-motion);letter-spacing:.02em;box-shadow:0 4px 16px rgba(79,70,229,.25);justify-content:center;gap:8px} .btn-gen:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(79,70,229,.38)} .btn-gen:disabled{background:var(--muted-light);box-shadow:none;cursor:not-allowed} /* ── Global button active + focus-visible states ── */ [class*="btn-"]:active:not(:disabled){transform:translateY(0)!important;filter:brightness(.94)} [class*="btn-"]:focus-visible{outline:none;box-shadow:var(--focus-ring)} /* Fila secundaria de botones */ .btn-row2{display:grid;grid-template-columns:1fr 1fr;gap:6px} :is(.btn-historial,.btn-print,.btn-email,.btn-outline-round,.btn-hv-doc,.btn-hv-hdr,.btn-qa-base){font-weight:700;cursor:pointer;font-family:var(--font);display:flex;align-items:center} :is(.btn-historial,.btn-print,.btn-email){width:100%;border-radius:var(--radius-btn);padding:10px 8px;font-size:.78rem;justify-content:center;gap:5px} :is(.btn-historial,.btn-email){background:var(--accent-light);color:var(--accent);border:1.5px solid var(--accent-border)} .btn-historial{transition:background .2s,border-color .2s,transform .2s,box-shadow .2s} .btn-historial:hover{background:var(--indigo-light);border-color:var(--accent-border);transform:var(--hover-lift)} /* Drop zone hover */ #subir-dropzone:is(:hover,.dz-over){border-color:var(--accent)!important;background:var(--accent-light)!important} .btn-print{background:var(--ok-bg);color:var(--ok-text);border:1.5px solid var(--ok-glow);transition:var(--tr-btn)} .btn-print:hover{background:var(--ok-light);transform:var(--hover-lift)} .err-sum{background:var(--err-bg);border:1px solid var(--err-border);border-radius:var(--radius);padding:10px 13px;font-size:.71rem;color:var(--err-text);margin-top:10px;display:none;line-height:1.75} /* ══════════════════════════════════════════════ PANEL DERECHO — PREVIEW ══════════════════════════════════════════════ */ .panel-right{height:100%} /* Cabecera panel de preview */ .preview-head{padding:0 24px;height:54px;border-radius:var(--radius-md) var(--radius-md) 0 0} :is(.preview-head h2,.bulk-btn){font-weight:700;color:#fff;display:flex;align-items:center} .preview-head h2{font-size:.85rem;letter-spacing:.01em;text-transform:none;gap:8px} .preview-head h2::before{content:'';display:none} :is(.preview-head-right,.repo-val-item,.st-ok){background:var(--ok-deep);border:1px solid var(--ok-text);border-radius:var(--radius-pill);padding:4px 14px;font-size:.69rem;color:var(--ok-glow);font-weight:700;display:none} :is(.st-pending,.preview-wf-badge){background:var(--accent-light);border:var(--bd-accent);font-size:.69rem;color:var(--accent)} .st-pending{border-radius:var(--radius-pill);padding:4px 14px;font-weight:600} :is(.preview-wf-badge,.func-estado){display:inline-flex;align-items:center;gap:5px;font-weight:700} .preview-wf-badge{border-radius:var(--radius);padding:4px 12px} /* Tabs del preview-panel (modo documento) */ /* Shared tab base: preview-doc / gen-mode / pdoc / hv / firma */ :is(.preview-doc-tab,.gen-mode-tab,.pdoc-tab,.hv-tab,.firma-tab){border:none;background:none;cursor:pointer;font-family:var(--font)} :is(.preview-doc-tab,.gen-mode-tab,.pdoc-tab){color:var(--muted);border-bottom:2px solid transparent} .preview-doc-tab{padding:9px 16px;font-size:.72rem;font-weight:600;margin-bottom:-1px;white-space:nowrap;transition:var(--tr-all)} .preview-doc-tab.active{color:var(--accent);border-bottom-color:var(--accent)} :is(.preview-doc-tab,.gen-mode-tab,.pdoc-tab):hover:not(.active){color:var(--text);background:rgba(15,23,42,.03);border-radius:var(--radius-xs) var(--radius-xs) 0 0} /* Zona scrollable del preview */ .panel-right-scroll{flex:1;overflow-y:auto;padding:28px 36px;background:var(--bg)} /* ── CONTRATO — Canvas A4 flotante ── */ :is(#output,.oficio-page-continuous){background:var(--card);padding:48px 56px;font-size:11pt;color:#111;position:relative} #output{border-radius:var(--radius);min-height:480px;box-shadow:0 12px 40px rgba(15,23,42,.20),0 2px 8px rgba(15,23,42,.08),0 0 0 1px rgba(15,23,42,.05);font-family:'Calibri Light', 'Calibri', 'Segoe UI', Arial, sans-serif;line-height:1.6;max-width:800px;margin:0 auto} #output::before{content:'';position:absolute;inset:0;border-radius:var(--radius);box-shadow:inset 0 0 0 1px rgba(15,23,42,.06);pointer-events:none} #output .empty{text-align:center;padding:80px 20px;color:var(--muted-light);font-family:var(--font)} #output .empty .ic{font-size:3rem;margin-bottom:14px} .corp-header{display:flex;align-items:center;justify-content:center;gap:15px;border-bottom:2px solid var(--navy-deep);padding-bottom:12px;margin-bottom:20px} .corp-logo{width:68px;height:auto;object-fit:contain} .corp-text{text-align:left} .corp{text-align:left;font-size:11.5pt;font-weight:bold;margin:0;letter-spacing:.05em;text-transform:uppercase;color:#000} .corp-sub{text-align:left;font-size:9pt;margin:2px 0 0;color:#444} .ctitle{text-align:center;font-size:13.5pt;font-weight:bold;margin:22px 0 4px;letter-spacing:.06em} .csub{text-align:center;font-size:11pt;font-weight:bold;margin:0 0 20px;border-bottom:1px solid var(--navy-deep);padding-bottom:12px} .cbody{text-align:justify;margin-bottom:12px;text-indent:1.2cm} .clause{text-align:justify;margin:12px 0;text-indent:1.2cm} .clause b{font-weight:bold;font-family:'Calibri',sans-serif} .rem-item{text-align:justify;margin:4px 0;padding-left:1.4cm} .rem-note{text-align:justify;padding-left:1.2cm;margin:6px 0} .page-sep{text-align:justify;margin:4px 0;font-size:10.5pt;color:#fff;user-select:none;display:none} .firma-wrap{page-break-inside:avoid;break-inside:avoid;margin-top:40px} .firma-intro{text-align:center;font-size:10.5pt;font-style:italic;margin:0 0 50px 0;color:#222;letter-spacing:.02em} .firma-block{display:flex;justify-content:center;gap:60px;margin-bottom:30px} .firma-col{width:220px} .firma-line{border-top:1.5px solid var(--navy-deep);padding-top:8px;text-align:center;font-size:10pt;font-family:'Calibri',sans-serif;background:linear-gradient(to bottom,var(--bg),var(--card));border-radius:0 0 8px 8px;padding:12px 10px 10px;box-shadow:0 2px 6px rgba(15,23,42,.07)} .firma-line small{font-size:8.5pt;color:#555;display:block;margin-top:3px;line-height:1.4;font-family:'Calibri Light',sans-serif} .doc-footer{margin-top:30px;padding-top:15px;border-top:1px dashed var(--desk);display:flex;justify-content:center} .qr-block{display:flex;flex-direction:column;align-items:center} .qr-block :is(canvas,img){width:75px!important;height:75px!important;image-rendering:pixelated} .qr-label{font-size:7pt;color:#666;margin-top:6px;text-align:center;font-family:monospace} .hl{background:var(--yellow-border);border-radius:2px;padding:0 2px} .otro-input{margin-top:5px;display:none} .page2-wrapper{display:flex;flex-direction:column} .page-divider{border:none;border-top:2px dashed var(--muted-light);margin:20px 0 4px;position:relative} :is(.page-divider,#prev-output .page-divider)::after{display:block;text-align:center;font-size:8pt;color:var(--muted-light);font-family:sans-serif;margin-top:3px} .page-divider::after{content:'─ fin hoja 1 / inicio hoja 2 ─'} /* ── REGISTRO Y ACCIONES ── */ .btn-email{transition:var(--tr-btn)} .btn-email:hover:not(:disabled){background:var(--indigo-light);transform:var(--hover-lift)} .btn-email:disabled{background:var(--surface);color:var(--muted-light);border-color:var(--border);cursor:not-allowed} .folio-tag{background:var(--ok-light);border:1px solid var(--ok-glow);padding:6px 12px;color:var(--ok-text);font-weight:700;text-align:center} /* Modal */ :is(.reg-overlay,.prev-overlay){position:fixed;inset:0;animation:overlayFade .18s ease both} .reg-overlay{background:var(--overlay);z-index:100;backdrop-filter:blur(2px)} :is(.reg-panel,.prev-panel){position:fixed;display:flex;flex-direction:column;border-radius:var(--radius-xl);overflow:hidden;animation:panelSlideUp .22s cubic-bezier(.34,1.1,.64,1) both} .reg-panel{inset:0;z-index:101;background:var(--card);margin:20px;box-shadow:0 20px 60px rgba(15,23,42,.32)} :is(.preview-head,.reg-head,.prev-head,.ndoc-head,.iw-head){background:var(--grad-accent)} :is(.reg-head,.prev-head,.iw-head){color:#fff} .reg-head{padding:14px 20px} .reg-head h3{font-size:1rem;font-weight:700;letter-spacing:.02em} :is(.reg-head-btns,.prev-head-btns,.reg-head-btns button,.prev-head-btns button){border:none;border-radius:var(--radius-sm);padding:7px 14px;font-size:.78rem;font-weight:600;cursor:pointer} .reg-head-btns button{transition:opacity .15s,box-shadow .15s} :is(.btn-export,.btn-prev-print){background:var(--ok);color:#fff} :is(.btn-clear,.btn-del-row:hover){background:var(--err);color:#fff} :is(.btn-close,.btn-prev-close){background:var(--glass-border);color:#fff} .reg-head-btns button:hover{opacity:.85} :is(.reg-head-btns,.prev-head-btns) button:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px} .reg-body{overflow:auto;flex:1;padding:16px} .reg-empty{text-align:center;padding:60px;color:var(--muted-light);font-size:.95rem} :is(.reg-table,.reg-table th,.fdir-th,.hv360-expediente th){font-weight:700;text-transform:uppercase;text-align:left;border-bottom:var(--bd-2)} :is(.reg-table,.reg-table th){background:var(--surface);color:var(--text-secondary);font-size:.64rem;letter-spacing:.06em;padding:9px 10px;white-space:nowrap;position:sticky;top:0} .reg-table td{padding:8px 10px;border-bottom:var(--bd-1);vertical-align:middle} :is(.reg-table tr:hover td,.func-tr:nth-child(even),.anx-item:hover,.fdir-page-btn:hover,.hv360-kpi-card:hover){background:var(--bg)} .reg-table .folio{font-weight:700;color:var(--accent);text-align:center} .st-pend{background:var(--yellow-bg);color:var(--yellow-text)} .st-env{background:var(--orange-light);color:var(--warn-dark)} .st-trab{background:var(--indigo-light);color:var(--accent-dark)} :is(.st-comp,.val-ok,.hv360-expediente .badge-firmado){background:var(--ok-light);color:var(--ok-text)} :is(.val-ok,.val-obs,.val-anul){font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-badge);white-space:nowrap} .val-obs{background:var(--err-bg);color:var(--crit)} .val-block{display:flex;flex-direction:column;gap:3px;min-width:120px} .val-row{display:flex;align-items:center;gap:5px;font-size:.67rem} .val-lbl{color:var(--muted);font-weight:600;white-space:nowrap} :is(.st-select,.reg-obs){border:var(--bd);border-radius:var(--radius-xs);font-size:.72rem;background:var(--bg);outline:none;transition:var(--tr-border-fast)} .st-select{padding:3px 6px;cursor:pointer} :is(.st-select,.reg-obs,.gdoc-input,.gdoc-select,.gdoc-textarea,.repo-val-select,.repo-obs-input,.ndoc-input,.ndoc-select,.ndoc-textarea,.fdir-search-field input,.fdir-filter-select,.anx-fg input,.anx-fg select,.anx-fg textarea,.nf-fg input,.nf-fg select,.nf-fg textarea,.sel-form-xs,.field-compact,.sel-card-md,.fg input,.fg select,.fg textarea):focus{border-color:var(--accent);box-shadow:var(--focus-ring);outline:none} .reg-obs{padding:3px 7px;width:100%} /* Estado Firebase — sidebar (ver definición en bloque SIDEBAR arriba) */ @page{size:legal portrait;margin:2cm 3.5cm} /* Filtros registro */ .reg-filters{display:flex;gap:6px;padding:10px 16px 0;flex-shrink:0;border-bottom:var(--bd-1)} .filt-btn{border-radius:var(--radius-sm);padding:5px 13px;font-size:.75rem;transition:var(--tr-border-ch)} .filt-btn:hover{border-color:var(--accent);color:var(--accent)} /* 3-way active accent base: filt-btn + gdoc-wf-btn + firma-type-btn */ :is(.filt-btn,.gdoc-wf-btn,.firma-type-btn).active{background:var(--accent);color:#fff;border-color:var(--accent)} /* Anulado badge */ .val-anul{background:var(--purple-light);color:var(--accent-2)} .reg-anulado td{opacity:.45;text-decoration:line-through} /* Autocomplete hint */ /* display:none hidden hint boxes: shared display, radius, font-size, margin-top */ :is(.autocomplete-hint,.folio-tag){display:none;border-radius:var(--radius-sm);font-size:.73rem;margin-top:6px} .autocomplete-hint{background:var(--accent-light);border:1.5px solid var(--accent-mid);padding:8px 12px;color:var(--accent-dark);line-height:1.5} .autocomplete-hint b{font-weight:700} :is(.btn-autocomp,.btn-autocomp-dismiss,.btn-add-anexo){border:none;border-radius:var(--radius-xs);cursor:pointer;transition:var(--tr-bg)} :is(.btn-autocomp,.btn-autocomp-dismiss){padding:4px 10px;font-size:.7rem;margin-top:5px} .btn-autocomp{margin-right:4px} .btn-autocomp:hover{background:var(--accent-dark)} .btn-autocomp-dismiss{font-weight:600;background:var(--border);color:var(--muted)} :is(.btn-autocomp-dismiss,.search-clear):hover{background:var(--surface);color:var(--text)} /* Botones eliminar / previsualizar fila */ :is(.btn-del-row,.btn-prev-row){border:none;border-radius:var(--radius-tag);font-size:.75rem;font-weight:700;cursor:pointer;transition:var(--tr-color)} .btn-del-row{padding:4px 8px;background:var(--err-bg);color:var(--err)} .btn-prev-row{padding:4px 9px;background:var(--indigo-light);color:var(--accent-dark);margin-bottom:3px;display:block;width:100%} .btn-prev-row:hover{background:var(--accent-dark);color:#fff} /* Modal previsualización */ .prev-overlay{background:rgba(15,23,42,.68);z-index:200;backdrop-filter:blur(3px)} .prev-panel{inset:30px;z-index:201;background:var(--surface);box-shadow:0 24px 70px rgba(15,23,42,.36)} .prev-head{padding:13px 20px} .prev-head h3{font-size:.97rem;font-weight:700} .prev-head-btns button{transition:var(--tr-lift)} .btn-prev-print:hover{background:var(--ok-deep);transform:var(--hover-lift);box-shadow:0 4px 10px rgba(5,150,105,.3)} :is(.btn-prev-print,.repo-panel-btn-primary,.ndoc-btn-save,.btn-func-primary,.btn-save-anx,.iw-btn-next,.btn-acc-10,.btn-accent-sm,.btn-accent-md):active{transform:translateY(0);box-shadow:none} .btn-prev-close:hover{background:rgba(255,255,255,.32)} .prev-body{overflow:auto;flex:1;padding:28px;display:flex;justify-content:center;background:var(--surface)} .prev-body #prev-output{background:var(--card);border:var(--bd-1);border-radius:var(--radius-md);padding:44px 52px;width:100%;max-width:820px;box-shadow:0 4px 18px rgba(15,23,42,.09);font-family:'Calibri Light','Calibri','Segoe UI Light','Segoe UI',Arial,sans-serif;font-size:11.5pt;line-height:1.8;color:#000} #prev-output .hl{background:none!important;font-weight:bold} #prev-output .page-sep{display:none} #prev-output .page-divider{border:none;border-top:2px dashed var(--desk);margin:30px 0 10px} #prev-output .page-divider::after{content:'─ separador de hoja ─'} #prev-output .page2-wrapper{border-top:none;padding-top:0} #prev-output .page-break-h2{margin-top:0} .prev-badge{background:var(--yellow-bg);border:1px solid var(--yellow-border);border-radius:var(--radius-sm);padding:6px 16px;font-size:.73rem;color:var(--yellow-text);font-weight:600;margin-right:10px} /* ══════════════════════════════════════════════ DASHBOARD ══════════════════════════════════════════════ */ .legal-topbar h1{font-size:1.1rem;font-weight:700;color:var(--text)} .legal-topbar p{font-size:.75rem;color:var(--muted);margin-top:1px} /* .kpi-card / .kpi-icon / .kpi-val canonical rules are in the utility block below */ .repo-kpi-sub{font-size:.68rem;color:var(--muted);margin-top:1px} :is(.repo-vt-btn,.gdoc-tipo-opt).active{background:var(--accent);color:#fff} .dash-kpi-card{border-radius:var(--radius-xl);box-shadow:0 1px 3px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06);position:relative;transition:var(--tr-motion)} .dash-kpi-card:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(15,23,42,.11)} /* ══════════════════════════════════════════════ SPA — SISTEMA DE VISTAS ══════════════════════════════════════════════ */ .view{display:none} @keyframes viewIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} @keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes rowIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} .view.active{display:flex;animation:viewIn .18s ease both} /* Staggered entry for KPI cards */ :is(.dash-kpi-card,#dot-grafico>div){animation:var(--anim-card)} #dash-kpi-row .dash-kpi-card:nth-child(2){animation-delay:40ms} #dash-kpi-row .dash-kpi-card:nth-child(3){animation-delay:80ms} #dash-kpi-row .dash-kpi-card:nth-child(4){animation-delay:120ms} #dash-kpi-row .dash-kpi-card:nth-child(5){animation-delay:160ms} /* Dashboard secondary widget cards — fire on each innerHTML repopulation */ :is(#dash-urgentes,#dash-vencen30,#dash-acciones,#dash-alertas-criticas,#dash-estab,#dash-data-audit,#dash-alertas-permisos,#dash-tipos-contrato,#dash-firma-pipeline)>div{animation:cardIn .24s cubic-bezier(.34,1.1,.64,1) both} :is(#dash-urgentes,#dash-vencen30,#dash-acciones)>div{animation-delay:80ms} :is(#dash-alertas-criticas,#dash-tipos-contrato,#dash-firma-pipeline)>div{animation-delay:140ms} :is(#dash-data-audit,#dash-alertas-permisos,#dash-estab)>div{animation-delay:200ms} /* ── Staggered KPI cards (6-card row) ── */ #dash-kpi-row .dash-kpi-card:nth-child(6){animation-delay:200ms} /* ── Bar grow animation (for progress bars with --bar CSS var) ── */ @keyframes barGrow{from{width:0}to{width:var(--bar,100%)}} .bar-animated{animation:barGrow .6s cubic-bezier(.22,1,.36,1) both} /* ── Dashboard Moderno — new components ── */ .dash-donut-wrap{position:relative;width:108px;height:108px;flex-shrink:0} .dash-donut-ring{width:108px;height:108px;border-radius:50%;position:relative;overflow:hidden} .dash-donut-hole{position:absolute;inset:22px;background:var(--card);border-radius:50%} .dash-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none} .dash-legend-item{display:flex;align-items:center;gap:8px} .dash-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .kpi-trend-up{color:var(--ok-text);font-size:.65rem;font-weight:700} .kpi-trend-down{color:var(--danger);font-size:.65rem;font-weight:700} .kpi-trend-neutral{color:var(--muted-light);font-size:.65rem;font-weight:700} .dash-health-bar{height:7px;background:var(--surface);border-radius:4px;overflow:hidden} .dash-health-fill{height:100%;border-radius:4px;transition:width .9s cubic-bezier(.22,1,.36,1)} /* ── Loading skeleton ── */ @keyframes skeletonPulse{0%,100%{opacity:.45}50%{opacity:.9}} :is(.sk-line,.sk-avatar){background:var(--border);animation:skeletonPulse 1.4s ease infinite} .sk-line{border-radius:var(--radius-2xs)} .sk-avatar{width:36px;height:36px;border-radius:var(--radius-circle);flex-shrink:0} .loading-spinner{width:20px;height:20px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:var(--radius-circle);animation:spin .7s linear infinite;flex-shrink:0} :is(.loading-spinner-lg,.loading-spinner-xl){border-width:4px;border-top-color:#fff} .loading-spinner-lg{width:44px;height:44px} .loading-spinner-xl{width:48px;height:48px} @keyframes spin{to{transform:rotate(360deg)}} /* ══════════════════════════════════════════════ MOTOR LEGAL ══════════════════════════════════════════════ */ .legal-body{flex:1;display:grid;grid-template-columns:360px 1fr;gap:24px;padding:28px 32px;overflow:hidden} .legal-left{display:flex;flex-direction:column;gap:16px;overflow-y:auto} .legal-card{background:var(--card);border-radius:var(--radius);border:var(--bd-2);box-shadow:var(--shadow);padding:20px;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s,background .18s;animation:var(--anim-card)} .legal-card:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(79,70,229,.12);transform:var(--hover-lift)} .legal-card.active{border-color:var(--accent);box-shadow:0 4px 16px rgba(79,70,229,.15);background:var(--accent-light)} .legal-card:nth-child(2){animation-delay:60ms} .legal-card:nth-child(3){animation-delay:120ms} :is(.legal-card-badge,.subsec-hdr){align-items:center;gap:6px;font-weight:700;margin-bottom:10px} .legal-card-badge{display:inline-flex;border-radius:var(--radius-xs);padding:4px 10px;font-size:.67rem;letter-spacing:.04em} :is(.badge-aps,.wf-GENERADO,.func-tipo-plazo-aps){background:var(--accent-light);color:var(--accent);border:var(--bd-accent)} :is(.badge-ct,.repo-badge-certificado,.wf-FIRMADO,.func-tipo-plazo-ct){background:var(--ok-bg);color:var(--ok-text);border:var(--bd-ok)} :is(.badge-fe,.repo-badge-memorandum,.wf-ARCHIVADO,.func-tipo-hon){background:var(--purple-light);color:var(--accent-2);border:var(--bd-purple)} .legal-card h3{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:7px} .legal-card p{font-size:.75rem;color:var(--muted);line-height:1.6} /* Panel artículos */ :is(.legal-right,.ndoc-modal){border-radius:var(--radius)} .legal-right{border:var(--bd-1);box-shadow:var(--shadow)} .legal-art-head{padding:18px 24px;border-bottom:var(--bd-1);flex-shrink:0} .legal-art-head-label{font-size:.6rem;font-weight:700;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px} .legal-art-head-title{font-size:.95rem;font-weight:700;color:var(--text)} :is(.legal-art-body,.ndoc-body,.func-det-body,.firma-list,.repo-main,.iw-body,.firma-det-scroll){flex:1;overflow-y:auto;display:flex;flex-direction:column} :is(.legal-art-body,.ndoc-body){padding:20px 24px;gap:14px} .art-item{border-left:3px solid var(--accent-light);padding:12px 16px;border-radius:0 8px 8px 0;background:var(--bg);transition:var(--tr-bg-only);animation:var(--anim-row)} .art-item:hover{background:var(--accent-light);border-left-color:var(--accent)} .art-item:nth-child(2){animation-delay:30ms} .art-item:nth-child(3){animation-delay:60ms} .art-item:nth-child(4){animation-delay:90ms} .art-item:nth-child(5){animation-delay:120ms} .art-item:nth-child(6){animation-delay:150ms} .art-item:nth-child(7){animation-delay:175ms} .art-item:nth-child(8){animation-delay:200ms} .art-item:nth-child(n+9){animation-delay:220ms} :is(.art-item-num,.ndoc-label,.gdoc-label){font-size:.67rem;font-weight:700;color:var(--accent);text-transform:uppercase} .art-item-num{letter-spacing:.08em;margin-bottom:5px} .art-item-title{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:4px} .art-item-body{font-size:.76rem;color:var(--muted);line-height:1.65} /* ══════════════════════════════════════════════ REPOSITORIO DE CONTRATOS ══════════════════════════════════════════════ */ /* ── Topbar ── */ :is(.repo-breadcrumb,.flex-row-4-mt2){display:flex;align-items:center;gap:4px;margin-top:2px} .repo-breadcrumb{flex-wrap:wrap} .repo-bc-sep{color:var(--desk);font-size:.8rem} .repo-bc-item{font-size:.72rem;color:var(--accent);cursor:pointer;font-weight:500;transition:var(--tr-color-fast)} .repo-bc-item:hover{color:var(--accent-dark);text-decoration:underline} .repo-bc-item.repo-bc-active{color:var(--muted);cursor:default;font-weight:600} .repo-bc-item.repo-bc-active:hover{text-decoration:none} .repo-search{display:flex;align-items:center;gap:7px;background:var(--bg);border:var(--bd);border-radius:var(--radius-sm);padding:0 11px;height:34px;min-width:200px;transition:var(--tr-surface)} :is(.repo-search:focus-within,.hv-input:focus,.firma-list-search:focus-within){border-color:var(--accent);background:var(--card);box-shadow:var(--focus-ring)} .repo-search input{border:none;background:none;outline:none;font-size:.81rem;color:var(--text);width:100%;font-family:var(--font)} .ndoc-tipo-opt:hover{border-color:var(--accent)} .repo-view-toggle{display:flex;border:var(--bd);border-radius:var(--radius-sm);overflow:hidden} .repo-vt-btn{border:none;background:var(--card);padding:5px 10px;font-size:.85rem;cursor:pointer;color:var(--muted);transition:var(--tr-bg-xs),color .12s,box-shadow .12s} .repo-vt-btn:hover:not(.active){background:var(--surface);color:var(--text-strong)} /* Neutral outline-card button base — shared across 7 variants */ :is(.btn-export-repo,.btn-func-secondary,.btn-cancel-anx,.btn-cancel-nf,.btn-firma-imp,.repo-panel-btn-sec,.ndoc-btn-cancel){border:var(--bd);border-radius:var(--radius-sm);background:var(--card);font-weight:600;cursor:pointer;font-family:var(--font)} :is(.btn-export-repo,.btn-func-secondary,.btn-cancel-anx,.btn-cancel-nf,.btn-firma-imp){transition:var(--tr-surface)} .btn-export-repo{display:flex;align-items:center;gap:5px;padding:6px 12px;font-size:.74rem;color:var(--label);white-space:nowrap} :is(.btn-export-repo,.btn-func-secondary,.btn-cancel-anx,.btn-cancel-nf,.btn-firma-imp,.btn-card-outline,.btn-outline-round,.ndoc-btn-cancel):hover{background:var(--surface);border-color:var(--muted-light)} /* ── KPI cards ── */ .repo-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 24px 0;flex-shrink:0} /* Shared badge-card base: card bg, bd-1 border, badge-radius — 4 members */ :is(.repo-kpi-card,.hv360-sidebar-card,.hv360-stat-card,.func-det-card){background:var(--card);border:var(--bd-1);border-radius:var(--radius-badge)} /* 3-way: add entry animation */ :is(.repo-kpi-card,.hv360-sidebar-card,.hv360-stat-card){animation:var(--anim-card)} .repo-kpi-card{padding:14px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 1px 4px rgba(15,23,42,.05);transition:var(--tr-card);cursor:default} .repo-kpi-card:nth-child(2){animation-delay:40ms} .repo-kpi-card:nth-child(3){animation-delay:80ms} .repo-kpi-card:nth-child(4){animation-delay:120ms} .repo-kpi-card:hover{box-shadow:0 4px 14px rgba(15,23,42,.09);border-color:var(--accent-border);transform:var(--hover-lift)} .repo-kpi-icon{width:40px;height:40px;border-radius:var(--radius-btn);font-size:1.1rem} .repo-kpi-num{font-size:1.5rem;font-weight:800;color:var(--text);line-height:1;font-variant-numeric:tabular-nums} .repo-kpi-label{font-size:.68rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px} /* ── Body flex ── */ :is(.repo-body,.func-body){flex:1;display:flex;overflow:hidden} .repo-main{min-width:0;padding:20px 24px;gap:20px} /* ── Sección home ── */ .anx-folio{display:flex;flex-direction:column;gap:6px} /* Shared list/card row base: card bg, sm-radius, pointer, card-in animation */ :is(.repo-recent-row,.repo-doc-card){background:var(--card);border-radius:var(--radius-sm);cursor:pointer;animation:var(--anim-card)} .repo-recent-row{border:var(--bd-1);padding:10px 16px;display:flex;align-items:center;gap:12px;transition:var(--tr-bg-xs),border-color .15s} .repo-recent-row:nth-child(2){animation-delay:40ms} .repo-recent-row:nth-child(3){animation-delay:80ms} .repo-recent-row:nth-child(4){animation-delay:120ms} .repo-recent-row:nth-child(5){animation-delay:160ms} .repo-recent-row:nth-child(n+6){animation-delay:200ms} .repo-recent-row:hover{background:var(--surface);border-color:var(--accent-border)} .repo-recent-folio{font-size:.75rem;font-weight:700;color:var(--accent);min-width:36px} :is(.repo-recent-nombre,.repo-doc-nombre,.repo-doc-sub){white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .repo-recent-nombre{font-size:.82rem;font-weight:600;color:var(--text)} .repo-recent-sub{font-size:.7rem;color:var(--muted);margin-top:1px} /* ── Document cards (folder view) ── */ /* ── Grid view ── */ .repo-doc-grid-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} :is(.repo-doc-card,.func-timeline){display:flex;flex-direction:column;gap:0;position:relative} .repo-doc-card{border:1px solid rgba(196,198,207,.18);padding:16px;transition:border-color .18s,box-shadow .18s;box-shadow:0 1px 3px rgba(15,23,42,.05)} .repo-doc-card:nth-child(2){animation-delay:30ms} .repo-doc-card:nth-child(3){animation-delay:60ms} .repo-doc-card:nth-child(4){animation-delay:90ms} .repo-doc-card:nth-child(5){animation-delay:120ms} .repo-doc-card:nth-child(6){animation-delay:150ms} .repo-doc-card:nth-child(7){animation-delay:180ms} .repo-doc-card:nth-child(8){animation-delay:210ms} .repo-doc-card:nth-child(n+9){animation-delay:240ms} .repo-doc-card:hover{border-color:rgba(15,23,42,.28);box-shadow:0 4px 14px rgba(15,23,42,.10)} .repo-doc-card.selected{border:2px solid var(--accent);box-shadow:0 4px 16px rgba(79,70,229,.15);padding:15px} :is(.repo-doc-thumb,.repo-panel-thumb){width:100%;aspect-ratio:3/4;background:var(--bg);overflow:hidden;position:relative} .repo-doc-thumb{border-radius:var(--radius-xs);border:1px solid rgba(196,198,207,.2);margin-bottom:12px;flex-shrink:0;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s} :is(.repo-doc-card:hover,.repo-doc-card.selected) .repo-doc-thumb{filter:none;opacity:1} .repo-doc-status-badge{position:absolute;top:12px;right:12px;z-index:2} .repo-doc-folio{font-size:.65rem;font-weight:700;color:var(--accent);font-family:var(--font-mono);letter-spacing:.02em} :is(.repo-doc-nombre,.repo-doc-sub){margin-top:3px} .repo-doc-nombre{font-size:.84rem;font-weight:700;color:var(--text-strong)} .repo-doc-sub{font-size:.71rem;color:var(--muted-light)} .repo-doc-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px} /* ── List view ── */ .repo-doc-list-wrap{background:var(--card);border:1px solid rgba(196,198,207,.2);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card)} :is(.repo-doc-table,.tbl-base,.fdir-table,.hv360-expediente){width:100%;border-collapse:collapse} .repo-doc-table thead tr{background:var(--bg);border-bottom:var(--bd-1)} :is(.repo-doc-table thead th,.firma-tbl-hdr){font-size:.62rem;font-weight:700;color:var(--muted-light);text-transform:uppercase} .repo-doc-table thead th{padding:11px 20px;letter-spacing:.1em;text-align:left;white-space:nowrap} .repo-doc-table thead th:last-child{text-align:right} .repo-doc-table tbody tr{border-bottom:var(--bd-1);cursor:pointer;transition:var(--tr-fast)} :is(.repo-doc-table tbody tr:last-child,.anx-item:last-child,.firma-resumen-field:last-child,.hv360-expediente tr:last-child td){border-bottom:none} :is(.repo-doc-table tbody tr:hover,.repo-panel-btn-sec:hover,.hover-row:hover,tr.hover-row:hover>td,.hover-btn-bg:hover,.fdir-stat-card:hover,.hv360-anx-tr:hover td,.btn-accordion:hover,.hv360-expediente tr:hover td){background:var(--surface)} .repo-doc-table tbody tr.selected{background:var(--accent-light);box-shadow:inset 3px 0 0 var(--accent)} /* ── Side panel ── */ .repo-panel{display:none;flex-direction:column;border-left:var(--bd-1);background:var(--card);flex-shrink:0;overflow:hidden} .repo-panel-head{background:var(--card);padding:14px 18px 12px;flex-shrink:0;position:relative;border-bottom:var(--bd-1)} :is(.repo-panel-head-tag,.func-marco-tag){display:inline-flex;align-items:center;font-weight:800;border-radius:var(--radius-2xs)} .repo-panel-head-tag{padding:3px 10px;background:var(--accent);color:#fff;font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px} :is(.repo-panel-close,.ndoc-head-close){border:none;border-radius:var(--radius-xs);cursor:pointer;font-size:.9rem;transition:var(--tr-fast)} :is(.repo-panel-close,.repo-panel-thumb-overlay){position:absolute;display:flex;align-items:center;justify-content:center} .repo-panel-close{top:12px;right:12px;background:var(--bg);color:var(--muted);width:26px;height:26px} :is(.repo-panel-close,.func-tr):hover{background:var(--accent-light)} .repo-panel-thumb{border-radius:var(--radius-badge);border:var(--bd-1);cursor:zoom-in} .repo-panel-thumb:hover .repo-panel-thumb-overlay{opacity:1} .repo-panel-thumb-overlay{inset:0;background:rgba(255,255,255,.45);opacity:0;transition:opacity .2s;font-size:1.5rem} .repo-panel-nombre{font-size:.9rem;font-weight:700;color:var(--text-strong);margin-top:0} .repo-panel-rut{font-size:.72rem;color:var(--muted-light);margin-top:2px} :is(.repo-panel-badges,.timeline-footer){display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .repo-panel-badge{font-size:.63rem;font-weight:700;padding:3px 8px;border-radius:var(--radius-tag)} .repo-panel-body{flex:1;overflow-y:auto;padding:0 0 16px} .repo-panel-section{padding:14px 18px;border-bottom:var(--bd-srf)} .repo-panel-section-title{font-size:.62rem;letter-spacing:.1em;margin-bottom:10px;gap:6px} :is(.repo-panel-grid2,.gdoc-field.row2){display:grid;grid-template-columns:1fr 1fr;gap:10px} :is(.repo-panel-field-label,.oficio-main-title h3){font-weight:600;color:var(--muted);letter-spacing:.05em;text-transform:uppercase} .repo-panel-field-label{font-size:.63rem;margin-bottom:3px} :is(.repo-panel-field-value,.firma-resumen-value){font-size:.82rem;font-weight:500;color:var(--text)} :is(.repo-val-block,.col-8){display:flex;flex-direction:column;gap:8px} .repo-val-lbl{font-size:.7rem;font-weight:600;color:var(--muted);min-width:52px} :is(.repo-val-select,.sel-card-md,.firma-type-btn,.gal-fil){border:var(--bd);font-size:.72rem;background:var(--card);font-family:var(--font);cursor:pointer} :is(.repo-val-select,.sel-card-md){outline:none;transition:var(--tr-border)} .repo-val-select{flex:1;height:28px;padding:0 7px;border-radius:var(--radius-xs);color:var(--text)} :is(.repo-obs-input,.hv-input){width:100%;border:var(--bd);font-size:.78rem;font-family:var(--font);outline:none} .repo-obs-input{padding:7px 10px;border-radius:var(--radius-input);color:var(--text);resize:none;transition:var(--tr-border-fast)} .repo-panel-footer{padding:14px 18px;gap:8px} /* Accent button 11-way super-base */ :is(.repo-panel-btn-primary,.ndoc-btn-save,.btn-func-primary,.btn-save-anx,.btn-save-nf,.btn-acc-10,.btn-accent-sm,.btn-accent-md,.btn-gen,.iw-btn-next,.btn-autocomp){background:var(--accent);color:#fff;border:none;font-weight:700;cursor:pointer} :is(.repo-panel-btn-primary,.ndoc-btn-save,.btn-func-primary,.btn-save-anx,.btn-save-nf){border-radius:var(--radius-sm);font-family:var(--font)} .repo-panel-btn-primary{flex:1;padding:9px 12px;font-size:.78rem;transition:var(--tr-lift)} :is(.repo-panel-btn-primary,.btn-save-anx,.btn-save-nf):hover{background:var(--accent-dark);transform:var(--hover-lift);box-shadow:0 4px 12px rgba(79,70,229,.32)} .repo-panel-btn-sec{padding:9px 14px;font-size:.78rem;color:var(--label);transition:var(--tr-bg)} :is(.repo-panel-btn-danger,.fdir-page-btn){border-radius:var(--radius-sm);font-weight:600;cursor:pointer;font-family:var(--font)} .repo-panel-btn-danger{border:1.5px solid var(--err-border);background:var(--err-bg);padding:9px 12px;font-size:.78rem;color:var(--err);transition:var(--tr-all)} .repo-panel-btn-danger:hover{background:var(--err);color:#fff;border-color:var(--err)} /* Inline-flex pill badge base — 3-way: repo-badge, wf-badge, iw-type-badge */ :is(.repo-badge,.wf-badge,.iw-type-badge){display:inline-flex;align-items:center;border-radius:var(--radius-pill)} :is(.repo-badge,.wf-badge){gap:5px} /* Shared badges (kept for backward compat) */ .repo-badge{padding:3px 10px;font-size:.7rem;font-weight:600;white-space:nowrap} :is(.repo-badge-vigente,.repo-badge-porvencer,.repo-badge-resolucion,.anx-badge-pend){background:var(--warn-light);color:var(--warn-dark);border:var(--bd-warn)} :is(.repo-badge-vencido,.func-estado-egresado){font-weight:600;color:var(--text)} /* ── Empty State — unified utility ── */ :is(.empty-state,.repo-empty,.func-empty,.anx-empty,.firma-list-empty,.func-detail-empty,.firma-detail-empty){display:flex;flex-direction:column;align-items:center;animation:var(--anim-card-slow)} .empty-state{justify-content:center;padding:48px 24px;gap:10px;text-align:center} .empty-state-icon{font-size:2rem;line-height:1;opacity:.5} .empty-state-title{font-size:.85rem;font-weight:600;color:var(--muted);margin:0} .empty-state-sub{font-size:.74rem;color:var(--muted-light);margin:0;max-width:260px;line-height:1.5} :is(.repo-empty,.func-empty,.anx-empty,.firma-list-empty){color:var(--muted-light);text-align:center;line-height:1.5} .repo-empty{gap:8px;padding:60px 24px;font-size:.88rem} /* QR cert block in panel */ .repo-qr-block{background:var(--grad-accent);border-radius:var(--radius-badge);padding:14px 16px;margin:0 18px} .repo-qr-title{font-size:.6rem;font-weight:800;color:var(--accent-border);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px} :is(.repo-qr-inner,.flex-gap-12){display:flex;gap:12px;align-items:flex-start} .repo-qr-info{font-size:.7rem;color:var(--desk);line-height:1.6} .repo-qr-info strong{color:#fff;font-size:.75rem} .repo-qr-corp{display:inline-block;background:var(--card);color:var(--accent);font-size:.62rem;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);margin-top:8px} /* ── Badges tipo documento RRHH ── */ .repo-badge-oficio{background:var(--info-bg);color:var(--info-text);border:var(--bd-info)} .repo-badge-decreto{background:var(--rose-bg);color:var(--rose);border:1px solid var(--rose-border)} .repo-badge-otro{background:var(--bg);color:var(--text-secondary);border:1px solid var(--desk)} /* ── Ícono tipo doc ── */ /* ── Modal Nuevo Documento ── */ /* 4-way overlay base: display:none + fixed full-screen + justify-content:center */ :is(.ndoc-overlay,.iw-overlay,.modal-anx-overlay,.modal-nf-overlay){display:none;position:fixed;inset:0;justify-content:center} :is(.ndoc-overlay,.iw-overlay){align-items:center} .ndoc-overlay{background:rgba(15,23,42,.45);z-index:600} :is(.ndoc-overlay,.modal-anx-overlay,.iw-overlay,.modal-nf-overlay).open{display:flex;animation:overlayFade .18s ease both} :is(.ndoc-overlay.open .ndoc-modal,.modal-anx-overlay.open .modal-anx,.modal-nf-overlay.open .modal-nf){animation:panelSlideUp .22s cubic-bezier(.34,1.1,.64,1) both} .ndoc-modal{box-shadow:0 20px 60px rgba(15,23,42,.25);width:540px;max-width:95vw;max-height:90vh} .ndoc-head{padding:20px 24px} .ndoc-head h2{font-size:.95rem;font-weight:700;color:#fff} .ndoc-head-close{background:var(--glass-white);color:#fff;width:28px;height:28px} :is(.ndoc-head-close,.btn-close-anx,.btn-close-nf):hover{background:rgba(255,255,255,.28)} :is(.ndoc-row,.nf-grid,.ndoc-field,.anx-fg,.ndoc-field.full){grid-column:1/-1} :is(.ndoc-label,.gdoc-label) .opt{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0} /* Shared form-field base: ndoc + gdoc + anx/nf-fg inputs/selects/textareas */ :is(.ndoc-input,.ndoc-select,.ndoc-textarea,.gdoc-input,.gdoc-select,.gdoc-textarea,.anx-fg input,.anx-fg select,.anx-fg textarea,.nf-fg input,.nf-fg select,.nf-fg textarea){border:var(--bd);border-radius:var(--radius-sm);font-size:.82rem;font-family:var(--font);color:var(--text);background:var(--card);outline:none;transition:var(--tr-border)} :is(.ndoc-input,.ndoc-select,.ndoc-textarea,.gdoc-input,.gdoc-select,.gdoc-textarea){padding:8px 11px} :is(.gdoc-input,.gdoc-select,.gdoc-textarea){width:100%;box-sizing:border-box} .ndoc-textarea{resize:vertical;min-height:70px} .ndoc-foot{padding:14px 24px;background:var(--surface);flex-shrink:0} .ndoc-btn-cancel{padding:9px 18px;font-size:.82rem;color:var(--text-secondary);transition:var(--tr-all)} .ndoc-btn-cancel:hover{color:var(--text)} .ndoc-btn-save{padding:9px 20px;font-size:.82rem;transition:var(--tr-bg),transform .15s;box-shadow:0 2px 8px rgba(79,70,229,.25)} .ndoc-btn-save:hover{background:var(--accent-dark);box-shadow:0 4px 14px rgba(79,70,229,.38);transform:var(--hover-lift)} .ndoc-tipo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .ndoc-tipo-opt{border:var(--bd);border-radius:var(--radius-sm);padding:10px 8px;cursor:pointer;text-align:center;transition:var(--tr-surface);background:var(--card);animation:cardIn .2s cubic-bezier(.34,1.1,.64,1) both} .ndoc-tipo-opt:nth-child(2){animation-delay:40ms} .ndoc-tipo-opt:nth-child(3){animation-delay:80ms} .ndoc-tipo-opt:nth-child(4){animation-delay:120ms} .ndoc-tipo-opt:nth-child(5){animation-delay:160ms} .ndoc-tipo-opt:nth-child(n+6){animation-delay:200ms} :is(.ndoc-tipo-opt.selected,.gdoc-ocr-zone:hover,.gdoc-ocr-zone.dragover){border-color:var(--accent);background:var(--accent-light)} .ndoc-tipo-opt .ndoc-tipo-ic{font-size:1.4rem;display:block;margin-bottom:3px} .ndoc-tipo-opt .ndoc-tipo-lbl{font-size:.7rem;font-weight:600;color:var(--text)} /* ── Generador: tabs de modo ── */ :is(.gen-mode-tabs,.hv-tabs-bar){display:flex;gap:0;border-bottom:var(--bd-2);flex-shrink:0;background:var(--card)} .gen-mode-tabs{padding:0 24px} .gen-mode-tab{padding:11px 22px;font-size:.8rem;font-weight:700;margin-bottom:-2px;transition:var(--tr-color),border-color .15s;letter-spacing:.02em} .gen-mode-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:800} /* ── Generador: panel documento ── */ .gdoc-tipo-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px} .gdoc-tipo-opt{border:none;padding:7px 14px;cursor:pointer;gap:5px;transition:var(--tr-color);background:var(--surface);color:var(--muted)} .gdoc-tipo-opt:hover:not(.active){background:var(--accent-light);color:var(--accent)} .gdoc-tipo-opt .gdoc-tipo-ic{font-size:.9rem} .gdoc-tipo-opt .gdoc-tipo-lbl{font-size:.72rem;font-weight:700} /* RUT validation */ :is(.gdoc-rut-feedback,.hv360-kpi-sub){margin-top:3px;display:flex;align-items:center;gap:3px} .gdoc-rut-feedback{font-size:.67rem;font-weight:600;min-height:14px} :is(.gdoc-rut-feedback.ok,.gdoc-rut-feedback.err,.gdoc-tl-lbl.done){color:var(--err-text)} :is(.ndoc-label,.gdoc-label){letter-spacing:.07em} .gdoc-timeline{margin-top:14px;position:relative;padding:0 4px 8px} .gdoc-tl-line,.iw-stepper::before{position:absolute;height:2px;background:var(--border);z-index:0} .gdoc-tl-line{top:7px;left:8px;right:8px} .gdoc-tl-steps{position:relative;z-index:1;display:flex;justify-content:space-between} :is(.gdoc-tl-step,.wf-progress-step){display:flex;flex-direction:column;align-items:center;gap:5px} .gdoc-tl-dot{width:16px;height:16px;border-radius:var(--radius-circle);border:3px solid var(--card);box-shadow:0 0 0 2px var(--desk);background:var(--desk);transition:background .2s,box-shadow .2s} .gdoc-tl-dot.active{background:var(--accent);box-shadow:0 0 0 2px var(--accent)} .gdoc-tl-dot.done{background:var(--ok-text);box-shadow:0 0 0 2px var(--ok-text)} .gdoc-tl-lbl{font-size:.6rem;font-weight:700;color:var(--muted-light);text-align:center} :is(.gdoc-tl-lbl.active,.wf-progress-lbl.active,.iw-step.active .iw-step-lbl,.hv-tab:hover,.firma-tab:hover){color:var(--accent)} .gdoc-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px} :is(.gdoc-textarea,.anx-fg textarea){resize:vertical;min-height:72px} /* ── Workflow de documentos ── */ .wf-badge{padding:4px 10px;font-size:.68rem;font-weight:700} .wf-BORRADOR{background:var(--surface);color:var(--muted);border:1px solid var(--desk)} .wf-EN_FIRMA{background:var(--warn-light);color:var(--warn);border:var(--bd-warn)} /* ── Barra de progreso workflow ── */ .wf-progress-wrap{padding:6px 0 16px} .wf-progress-steps{display:flex;justify-content:space-between;position:relative;margin-bottom:8px} .wf-progress-step{flex:1;position:relative;z-index:1} .wf-progress-dot{width:11px;height:11px;border-radius:var(--radius-circle);background:var(--border);border:var(--bd-2);transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,width .35s ease,height .35s ease;flex-shrink:0} .wf-progress-dot.done{background:var(--ok-text);border-color:var(--ok-text)} .wf-progress-dot.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,70,229,.18);width:13px;height:13px} .wf-progress-lbl{font-size:.57rem;font-weight:600;color:var(--muted-light);text-align:center;line-height:1.2;max-width:54px} .wf-progress-track{position:relative;height:5px;background:var(--border);border-radius:3px;margin:0 5px;overflow:hidden} .wf-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--ok-text),var(--accent));transition:width .5s cubic-bezier(.4,0,.2,1)} .pdoc-tabs{display:flex;border-bottom:var(--bd-1);flex-shrink:0;background:var(--surface)} .pdoc-tab{padding:9px 13px;font-size:.7rem;font-weight:600;margin-bottom:-1px;white-space:nowrap;transition:color .15s,box-shadow .15s} :is(.pdoc-tab,.hv-tab).active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700} .ver-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:var(--bd-1);animation:rowIn .18s ease both} .ver-row:nth-child(2){animation-delay:35ms} .ver-row:nth-child(3){animation-delay:70ms} .ver-row:nth-child(n+4){animation-delay:105ms} /* ver-badge/pill-accent-lt shared base — 5 props */ :is(.ver-badge,.pill-accent-lt){background:var(--accent-light);color:var(--accent);border-radius:var(--radius-badge);padding:2px 8px;font-weight:700} .ver-badge{border:var(--bd-accent);font-size:.62rem;white-space:nowrap;flex-shrink:0} .ver-label{font-size:.75rem;color:var(--text);flex:1} .ver-date{font-size:.63rem;color:var(--muted);white-space:nowrap} /* ── Permisos KPI strip (JS-rendered, fires on every innerHTML) ── */ #perm-kpi-strip>div{animation:var(--anim-card);transition:var(--tr-bg-only);cursor:default} #perm-kpi-strip>div:nth-child(2){animation-delay:45ms} #perm-kpi-strip>div:nth-child(3){animation-delay:90ms} #perm-kpi-strip>div:nth-child(4){animation-delay:135ms} .perm-row{transition:var(--tr-bg-fast);animation:var(--anim-row)} .perm-row:nth-child(2){animation-delay:25ms} .perm-row:nth-child(3){animation-delay:50ms} .perm-row:nth-child(4){animation-delay:75ms} .perm-row:nth-child(5){animation-delay:100ms} .perm-row:nth-child(6){animation-delay:125ms} .perm-row:nth-child(n+7){animation-delay:150ms} .perm-row:hover{background:var(--surface)!important} /* Generic row-hover utilities — replace inline onmouseover/onmouseout */ :is(.hover-row,.hv360-expediente tr){transition:var(--tr-bg-xs);animation:var(--anim-row)} .hover-row:nth-child(2){animation-delay:30ms} .hover-row:nth-child(3){animation-delay:60ms} .hover-row:nth-child(4){animation-delay:90ms} .hover-row:nth-child(5){animation-delay:120ms} .hover-row:nth-child(6){animation-delay:150ms} .hover-row:nth-child(7){animation-delay:180ms} .hover-row:nth-child(8){animation-delay:210ms} .hover-row:nth-child(n+9){animation-delay:240ms} /* Variant for elements with explicit bg:var(--bg) as resting state */ .hover-btn-bg{background:var(--bg);transition:var(--tr-bg-xs)} /* Inline "row reveal" action bar */ .rra{opacity:0;transition:opacity .15s} .hover-row:hover .rra{opacity:1} /* Outline button → accent border/text on hover */ .btn-outline-hover{transition:border-color .1s,color .1s} .btn-outline-hover:hover{border-color:var(--accent)!important;color:var(--accent)!important} /* Muted icon → accent on hover */ .btn-chevron-hover{transition:color .15s} .btn-chevron-hover:hover{color:var(--accent)!important} /* Dotación bar chart segment */ .dot-bar{background:var(--accent);transition:background .15s,height .4s} .dot-bar:hover{background:var(--accent-2)} /* ── Dotación gráfico columns + vencimientos rows ── */ #dot-grafico>div:nth-child(2){animation-delay:30ms} #dot-grafico>div:nth-child(3){animation-delay:60ms} #dot-grafico>div:nth-child(4){animation-delay:90ms} #dot-grafico>div:nth-child(5){animation-delay:120ms} #dot-grafico>div:nth-child(6){animation-delay:150ms} #dot-grafico>div:nth-child(n+7){animation-delay:180ms} #dot-vencimientos tr{animation:rowIn .18s ease both} #dot-vencimientos tr:nth-child(2){animation-delay:25ms} #dot-vencimientos tr:nth-child(3){animation-delay:50ms} #dot-vencimientos tr:nth-child(4){animation-delay:75ms} #dot-vencimientos tr:nth-child(n+5){animation-delay:100ms} /* ── Plazos KPI cards (static HTML, staggered entry + hover) ── */ #plazos-kpis>div{animation:var(--anim-card);transition:var(--tr-motion)} #plazos-kpis>div:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(15,23,42,.09)} #plazos-kpis>div:nth-child(2){animation-delay:55ms} #plazos-kpis>div:nth-child(3){animation-delay:110ms} #plazos-kpis>div:nth-child(4){animation-delay:165ms} :is(.plazo-tr,.aprob-tr,.audit-tr,.dot-tr,.repo-recent-tr,.hv360-anx-tr){animation:var(--anim-row);transition:var(--tr-bg-xs)} /* .plazo-tr — no unique props */ :is(.aprob-tr,.audit-tr){border-bottom:var(--bd-1);cursor:pointer} .dot-tr{border-bottom:var(--bd-1)} .repo-recent-tr{border-top:var(--bd-1);cursor:pointer} :is(.plazo-tr,.aprob-tr,.audit-tr,.dot-tr,.repo-recent-tr):hover,:is(.plazo-tr,.aprob-tr,.audit-tr,.dot-tr,.repo-recent-tr):hover>td{background:var(--surface)!important} .audit-row{display:flex;gap:8px;padding:7px 0;border-bottom:var(--bd-bg);align-items:flex-start;animation:rowIn .18s ease both} .audit-row:nth-child(2){animation-delay:25ms} .audit-row:nth-child(3){animation-delay:50ms} .audit-row:nth-child(4){animation-delay:75ms} .audit-row:nth-child(n+5){animation-delay:100ms} .audit-ic{font-size:.85rem;flex-shrink:0;margin-top:1px} :is(.audit-content,.func-tl-content,.audit-accion){color:var(--accent)} .audit-detail{font-size:.69rem;color:var(--text);margin-top:1px} .audit-date{font-size:.59rem;color:var(--muted);white-space:nowrap;flex-shrink:0} :is(.asoc-tag,.gdoc-asoc-chip,.btn-ref-xs){display:inline-flex;align-items:center;background:var(--accent-light);color:var(--accent)} :is(.asoc-tag,.gdoc-asoc-chip){gap:4px;border-radius:var(--radius-badge);font-size:.7rem;border:var(--bd-accent)} .asoc-tag{padding:3px 9px;font-weight:600;margin:2px} .firma-block{background:var(--bg);border:var(--bd-1);border-radius:var(--radius-btn);padding:14px;margin-bottom:10px} .func-tl-wrap{padding:4px 0;display:flex;flex-direction:column} :is(.func-tl-item,.hv360-alert-row){display:flex;padding:8px 0;border-bottom:var(--bd-1);animation:var(--anim-row)} .func-tl-item{gap:10px} .func-tl-item:nth-child(2){animation-delay:30ms} .func-tl-item:nth-child(3){animation-delay:60ms} .func-tl-item:nth-child(4){animation-delay:90ms} .func-tl-item:nth-child(5){animation-delay:120ms} .func-tl-item:nth-child(n+6){animation-delay:150ms} :is(.func-tl-ic,.fdir-page-btn){display:flex;align-items:center;justify-content:center;border:var(--bd);background:var(--card)} .func-tl-ic{width:28px;height:28px;border-radius:var(--radius-circle);font-size:.82rem;flex-shrink:0;margin-top:2px} .func-tl-title{font-size:.78rem;font-weight:600;color:var(--text);line-height:1.3} .func-tl-sub{font-size:.66rem;color:var(--muted);margin-top:2px} .gdoc-ocr-zone{border:2px dashed var(--desk);border-radius:var(--radius-badge);padding:16px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s;background:var(--surface)} .gdoc-ocr-result{margin-top:8px;padding:9px 13px;border-radius:var(--radius-input);font-size:.73rem;display:none} :is(.gdoc-wf-btn,.iw-btn-prev){transition:var(--tr-all)} .gdoc-wf-btn{padding:5px 13px;border-radius:var(--radius-pill);border:1.5px solid var(--desk);font-size:.7rem;font-family:var(--font)} .gdoc-wf-btn:hover:not(.active){border-color:var(--muted-light);color:var(--text);background:var(--surface)} .gdoc-asoc-chips{display:flex;flex-wrap:wrap;gap:4px;min-height:24px} .gdoc-asoc-chip{padding:3px 8px} .gdoc-asoc-chip button{background:none;border:none;cursor:pointer;color:var(--accent-mid);font-size:.8rem;padding:0;line-height:1;transition:color .12s} :is(.gdoc-asoc-chip button:hover,.nf-rut-hint.err,.hv360-kpi-val.urgente){color:var(--err)} .gdoc-asoc-chip button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} /* ══════════════════════════════════════════════ FUNCIONARIOS ══════════════════════════════════════════════ */ /* ── Layout principal ── */ /* ══ FUNCIONARIOS — layout ══ */ /* ── Filtros ── */ /* ── Stats (legacy chips — se mantienen por compatibilidad) ── */ :is(.preview-doc-tabs,.func-stats-bar){display:flex;border-bottom:var(--bd-1);flex-shrink:0;background:var(--bg)} .func-stats-bar{align-items:center;gap:8px;padding:8px 16px} /* ══ DIRECTORIO DE FUNCIONARIOS — Rediseño ══ */ /* Header section */ .fdir-title{font-size:1.9rem;font-weight:800;color:var(--text-strong);letter-spacing:-.04em;line-height:1.1} /* Stats bento grid */ .fdir-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:var(--bd-1);margin-top:16px} :is(.fdir-stat-card,.hv360-kpi-card){border-right:var(--bd-1);position:relative;cursor:default;transition:var(--tr-bg-only);animation:var(--anim-card)} .fdir-stat-card{padding:13px 20px} .fdir-stat-card:nth-child(2){animation-delay:50ms} .fdir-stat-card:nth-child(3){animation-delay:100ms} .fdir-stat-card:nth-child(4){animation-delay:150ms} :is(.fdir-stat-card,.hv360-kpi-card):last-child{border-right:none} .fdir-stat-card::after,.hv360-kpi-card::before{content:'';position:absolute;left:0;right:0;height:3px;border-radius:0} .fdir-stat-card::after{bottom:0;background:var(--fdir-accent,var(--border))} :is(.fdir-stat-lbl,.kpi-sublabel){font-size:.65rem;font-weight:700;color:var(--muted-light);text-transform:uppercase} .fdir-stat-lbl{letter-spacing:.07em} :is(.fdir-stat-val,.hv360-kpi-val){font-weight:800;color:var(--text-strong);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .fdir-stat-val{font-size:1.5rem;line-height:1.1}.hv360-kpi-val{font-size:1.55rem;line-height:1} /* Filter section */ .fdir-filter-wrap{padding:12px 28px;background:var(--bg);border-bottom:var(--bd-1);flex-shrink:0} :is(.fdir-filter-card,.firma-det-footer){background:var(--card);border-radius:var(--radius-md);border:var(--bd-1);display:flex;align-items:center} .fdir-filter-card{padding:12px 16px;gap:10px;flex-wrap:wrap} .fdir-search-field{flex:2;min-width:200px;position:relative} :is(.fdir-search-field input,.fdir-filter-select){border:var(--bd);border-radius:var(--radius-btn);font-family:var(--font);color:var(--text-strong);outline:none;transition:var(--tr-border)} .fdir-search-field input{width:100%;padding:8px 34px;font-size:.79rem;box-sizing:border-box} :is(.fdir-search-icon,.search-clear,.input-search-icon){position:absolute;top:50%;transform:translateY(-50%);color:var(--muted-light)} :is(.fdir-search-icon,.search-clear){line-height:1} .fdir-search-icon{left:9px;font-family:'Material Symbols Outlined';font-size:.95rem} .fdir-filter-select{flex:1;min-width:140px;padding:8px 28px 8px 11px;font-size:.78rem;appearance:none;cursor:pointer;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2394A3B8' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E") no-repeat right 7px center/13px} /* Table */ .fdir-table-wrap{flex:1;overflow:auto;background:var(--card)} :is(.fdir-th,.hv360-expediente th){font-size:.59rem;color:var(--muted-light);background:var(--bg)} .fdir-th{padding:11px 20px;letter-spacing:.06em;white-space:nowrap} .oficio-firma-col{text-align:center} .fdir-td{padding:13px 20px;vertical-align:middle;font-size:.79rem;color:var(--text-strong)} /* Avatar */ .fdir-avatar{width:38px;height:38px;font-size:.68rem;font-weight:800;flex-shrink:0} /* Tipo pills */ :is(.fdir-badge-aps,.fdir-badge-ct,.fdir-badge-hon){font-size:.58rem;font-weight:800;padding:3px 10px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} .fdir-badge-aps{background:var(--indigo-light);color:var(--navy-ink)} .fdir-badge-ct{background:var(--blue-light);color:var(--text-secondary)} .fdir-badge-hon{background:var(--orange-border);color:var(--orange-dark)} /* Estado */ .fdir-estado{display:flex;align-items:center;gap:6px;white-space:nowrap} /* Action buttons */ .fdir-act-btn{padding:5px;border-radius:var(--radius-sm);border:none;background:none;cursor:pointer;color:var(--accent);opacity:.65;transition:background .1s,opacity .1s,box-shadow .1s;display:inline-flex;align-items:center;justify-content:center} .fdir-act-btn:hover{background:var(--indigo-light);opacity:1} :is(.fdir-act-btn .ms,.ms-95-mr0){font-size:.95rem;margin-right:0} /* Pagination footer */ .fdir-footer{padding:12px 28px;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .fdir-page-btn{width:32px;height:32px;font-size:.73rem;color:var(--text-secondary);transition:var(--tr-fast)} .fdir-page-btn.active-page{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:800} .fdir-page-btn:disabled{opacity:.3;cursor:default;pointer-events:none} /* FAB */ /* ── Tabla ── */ .func-tr{border-bottom:var(--bd-srf);transition:var(--tr-bg-fast);cursor:default;animation:var(--anim-row)} .func-tr:nth-child(2){animation-delay:25ms} .func-tr:nth-child(3){animation-delay:50ms} .func-tr:nth-child(4){animation-delay:75ms} .func-tr:nth-child(5){animation-delay:100ms} .func-tr:nth-child(6){animation-delay:125ms} .func-tr:nth-child(7){animation-delay:150ms} .func-tr:nth-child(8){animation-delay:175ms} .func-tr:nth-child(n+9){animation-delay:200ms} /* ── Badges tipo contrato (tabla — compactos) ── */ .func-row-badge{display:inline-block;border-radius:var(--radius-tag);padding:2px 8px;font-size:.64rem;font-weight:700;white-space:nowrap} /* ── Categoría / Nivel APS ── */ :is(.func-cat-badge,.func-nivel-badge){display:inline-block;border-radius:var(--radius-2xs);padding:2px 7px;font-size:.68rem} .func-cat-badge{background:var(--navy);color:#fff;font-weight:800;margin-right:3px}.func-nivel-badge{background:var(--accent-light);color:var(--accent);border:var(--bd-accent);font-weight:700} /* ── Estado ── */ .func-estado{border-radius:var(--radius-xl);padding:3px 10px;font-size:.67rem;white-space:nowrap} .func-estado::before,.dot-5-ok{width:5px;height:5px;border-radius:var(--radius-circle);flex-shrink:0} .func-estado::before{content:''} :is(.func-estado-activo,.anx-badge-firm){background:var(--ok-light);color:var(--ok-text);border:var(--bd-ok)} :is(.func-fields-grid,.firma-resumen-grid){display:grid;grid-template-columns:1fr 1fr;gap:0} .firma-resumen-grid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important;gap:12px !important;padding:16px 20px !important} .func-field{padding:13px 20px;border-bottom:var(--bd-bg)} :is(.func-field,.firma-resumen-field):nth-child(odd){border-right:1px solid var(--bg)} .firma-resumen-field{background:var(--bg) !important;border-radius:var(--radius-sm) !important;padding:10px 14px !important;border:1px solid var(--border) !important;border-right:1px solid var(--border) !important;display:flex !important;flex-direction:column !important;gap:4px !important} :is(.func-field-label,.firma-resumen-label){font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px} .firma-resumen-label{font-size:.6rem !important;font-weight:700 !important;letter-spacing:.05em !important;margin-bottom:0 !important} .firma-resumen-field:last-child{border-bottom:1px solid var(--border) !important} /* Historial */ .func-estado-activo::before{background:var(--ok-text)} .func-estado-licencia{background:var(--err-bg);color:var(--err);border:1px solid var(--err-border)} .func-estado-licencia::before{background:var(--err)} .func-estado-porvencer{background:var(--warn-bg);color:var(--warn);border:1px solid var(--orange-border)} .func-estado-porvencer::before{background:var(--orange)} .func-estado-egresado::before{background:var(--muted-light)} /* ── Botón Ver Ficha ── */ .func-empty{gap:6px;padding:40px 20px;font-size:.82rem} /* ══ FICHA LATERAL ══ */ :is(.func-detail-panel,.firma-detail-panel,.firma-list-panel){display:flex;flex-direction:column;overflow:hidden;background:var(--bg)} :is(.func-detail-empty,.firma-detail-empty){flex:1;justify-content:center;color:var(--desk);gap:14px} .firma-detail-empty-ic{font-size:3.5rem} /* Header ficha */ .func-det-head{background:linear-gradient(145deg,var(--navy-deep) 0%,var(--navy-ink) 100%);padding:22px 24px 20px;flex-shrink:0;border-bottom:3px solid var(--accent)} .func-det-avatar{width:52px;height:52px;border-radius:var(--radius-circle);background:var(--grad-accent);font-size:1.6rem;box-shadow:0 4px 12px rgba(79,70,229,.4);border:2px solid var(--glass-border)} :is(.func-det-nombre,.firma-det-header-title){font-size:1rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .func-det-nombre{font-weight:800;margin-bottom:3px;letter-spacing:.01em} .func-det-rut{font-size:.75rem;color:var(--accent-mid);margin-bottom:8px;letter-spacing:.02em} .func-det-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .func-det-badge-tipo{border-radius:var(--radius-tag);padding:3px 10px;font-size:.67rem;font-weight:700} .func-det-badge-aps{background:rgba(79,70,229,.3);color:var(--accent-mid);border:1px solid rgba(79,70,229,.5)} .func-det-badge-ct{background:rgba(21,128,61,.3);color:var(--ok-glow);border:1px solid rgba(21,128,61,.5)} .func-det-badge-hon{background:rgba(124,58,237,.3);color:var(--accent-mid);border:1px solid rgba(124,58,237,.5)} .func-det-badge-estab{background:rgba(255,255,255,.08);color:var(--info-border);border:1px solid rgba(255,255,255,.15);font-size:.65rem} /* Body ficha */ .func-det-body{padding:16px 16px 20px;gap:12px} .func-det-card{box-shadow:var(--shadow-nav);overflow:hidden} :is(.func-det-card-head,.firma-det-card-head){letter-spacing:.1em} .func-det-card-head{padding:11px 16px;border-bottom:var(--bd-srf);font-size:.63rem;gap:6px;background:var(--bg)} :is(.func-fields-grid,.firma-resumen-grid){display:grid;grid-template-columns:1fr 1fr;gap:0} .func-field{padding:13px 20px;border-bottom:var(--bd-bg)} :is(.func-field,.firma-resumen-field):nth-child(odd){border-right:1px solid var(--bg)} :is(.func-field-label,.firma-resumen-label){font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px} .func-field-label{font-size:.66rem} .func-field-value{font-size:.83rem;font-weight:500;color:var(--text)} /* Historial */ /* Detail footer */ .func-det-footer{padding:16px 28px;gap:10px} .btn-func-primary{flex:1;padding:11px 16px;font-size:.83rem;transition:var(--tr-lift)} :is(.btn-func-primary,.btn-accent-md,.btn-acc-10):hover{background:var(--accent-dark);transform:var(--hover-lift);box-shadow:var(--shadow-accent)} .btn-func-secondary{padding:11px 18px;font-size:.83rem;color:var(--label);white-space:nowrap} /* ── Badges tipo contrato (4 tipos × 2 marcos) ── */ /* APS — Ley 19.378 */ .func-tipo-indef-aps{background:var(--navy-ink);color:var(--card);border:1px solid var(--navy-ink)} .func-tipo-reemp-aps{background:var(--blue-light);color:var(--info-text);border:var(--bd-info)} /* Código del Trabajo */ .func-tipo-indef-ct{background:var(--green-deep);color:#fff;border:1px solid var(--green-deep)} .func-tipo-reemp-ct{background:var(--yellow-bg);color:var(--yellow-text);border:1px solid var(--yellow-border)} /* Mini tag marco legal */ .func-marco-tag{padding:2px 7px;font-size:.62rem;letter-spacing:.05em;vertical-align:middle;margin-left:4px} :is(.func-marco-aps,.func-marco-ct,.func-marco-hon){color:#fff} .func-marco-aps{background:var(--navy-ink)} .func-marco-ct{background:var(--ok-text)} .func-marco-hon{background:var(--accent-2)} /* ── Sección Anexos ── */ .anx-item{display:flex;align-items:flex-start;gap:14px;padding:13px 20px;border-bottom:var(--bd-bg);transition:var(--tr-bg-xs)} .anx-icon{width:32px;height:32px;border-radius:var(--radius-input);background:var(--accent-light);border:var(--bd-accent);font-size:1rem} .anx-tipo{font-size:.78rem;font-weight:700;color:var(--text)} .anx-desc{font-size:.73rem;color:var(--text);margin-top:3px;line-height:1.5} .anx-fecha{font-size:.68rem;color:var(--muted);margin-top:4px} :is(.anx-badge-firm,.anx-badge-pend){border-radius:var(--radius-badge);padding:2px 8px;font-size:.65rem;font-weight:700;flex-shrink:0} .anx-empty{gap:6px;padding:32px 20px;font-size:.8rem} .btn-add-anexo{margin-left:auto;background:var(--navy-ink);color:var(--card);padding:4px 11px;font-size:.68rem;font-weight:700;font-family:var(--font)} .btn-add-anexo:hover{background:var(--navy-deep)} /* ── Modal Nuevo Anexo ── */ .modal-anx-overlay{background:var(--overlay);z-index:1000;align-items:center} .modal-anx{border-radius:var(--radius-md);width:480px;max-width:calc(100vw - 32px);box-shadow:0 20px 60px rgba(15,23,42,.22)} :is(.modal-anx-head,.modal-nf-head){background:var(--navy);display:flex;justify-content:space-between} .modal-anx-head{padding:18px 24px;align-items:center} .modal-anx-head h3{color:#fff;font-size:.95rem;font-weight:700;margin:0} .modal-anx-head-sub{color:var(--accent-mid);font-size:.73rem;margin-top:2px} :is(.btn-close-anx,.btn-close-nf,.btn-ref-xs){border-radius:var(--radius-xs);padding:4px 10px;cursor:pointer;font-family:var(--font);transition:var(--tr-fast)} :is(.btn-close-anx,.btn-close-nf){background:var(--glass-white);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:.75rem} /* 4-way col-flex-16 base */ :is(.modal-anx-body,.modal-nf-body,.iw-step-content.active,.col-16){display:flex;flex-direction:column;gap:16px} .modal-anx-body{padding:24px} .anx-fg label{font-size:.72rem;font-weight:700;color:var(--label)} :is(.anx-fg,.nf-fg) :is(input,select,textarea){padding:9px 12px} :is(.ndoc-foot,.modal-anx-footer,.modal-nf-footer){border-top:var(--bd-1);display:flex;gap:10px;justify-content:flex-end} .modal-anx-footer{padding:16px 24px} :is(.btn-save-anx,.btn-save-nf){font-size:.83rem;transition:var(--tr-lift);box-shadow:0 2px 8px rgba(79,70,229,.22)} .btn-save-anx{padding:10px 22px} :is(.btn-cancel-anx,.btn-cancel-nf){padding:10px 18px;font-size:.83rem;color:var(--muted)} /* ── Botón Nuevo Funcionario ── */ /* ── Toast / barra importación ── */ :is(.import-toast,.fdir-bulk-bar){position:fixed;bottom:24px;background:var(--navy);color:#fff} .import-toast{right:24px;z-index:2000;border-radius:var(--radius-badge);padding:14px 20px;min-width:280px;max-width:380px;box-shadow:0 8px 32px rgba(15,23,42,.30);display:none;flex-direction:column;gap:8px;font-family:var(--font)} @keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} .import-toast.show{display:flex;animation:toastIn .22s cubic-bezier(.34,1.1,.64,1) both} .import-toast-title{font-size:.83rem;font-weight:700} .import-toast-sub{font-size:.73rem;color:var(--accent-mid)} .import-progress-bar{height:4px;background:var(--glass-border);border-radius:2px;overflow:hidden} .import-progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s} .import-toast-errors{font-size:.7rem;color:var(--err-border);max-height:80px;overflow-y:auto;border-top:1px solid rgba(255,255,255,.1);padding-top:6px} .btn-accent-sm:hover{background:var(--accent-2);transform:var(--hover-lift);box-shadow:var(--shadow-accent)} /* ── Gestor de Importación Wizard ── */ .iw-overlay{background:rgba(15,23,42,.65);backdrop-filter:blur(5px);z-index:2100;padding:20px} .iw-overlay.open .iw-modal{animation:panelSlideUp .25s cubic-bezier(.34,1.1,.64,1) both} .iw-modal{border-radius:var(--radius-pill);width:740px;max-width:100%;max-height:92vh;box-shadow:0 32px 64px -12px rgba(15,23,42,.35)} .iw-head{padding:24px 32px} .iw-head-title{font-size:1.1rem;font-weight:800;letter-spacing:-.025em} .iw-head-sub{font-size:.72rem;color:rgba(255,255,255,.7);margin-top:3px} .iw-stepper{padding:20px 32px;background:var(--bg);border-bottom:1px solid var(--accent-light);display:flex;justify-content:space-between;gap:16px;flex-shrink:0;position:relative} .iw-stepper::before{content:'';top:36px;left:calc(32px + 16px);right:calc(32px + 16px)} .iw-step{gap:8px;opacity:.45;transition:opacity .25s;position:relative;z-index:1} .iw-step:is(.active,.done){opacity:1} :is(.iw-step-num,.panel-loading){display:flex;align-items:center;justify-content:center;color:var(--muted-light)} .iw-step-num{width:32px;height:32px;border-radius:var(--radius-circle);background:var(--border);font-size:.82rem;font-weight:800;border:var(--bd-2);transition:background .25s,color .25s,border-color .25s,box-shadow .25s} .iw-step.active .iw-step-num{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 0 4px rgba(79,70,229,.18)} .iw-step.done .iw-step-num{background:var(--ok-light);color:var(--ok);border-color:var(--ok)} .iw-step-lbl{font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-align:center;color:var(--muted)} .iw-step.done .iw-step-lbl{color:var(--ok)} .iw-body{padding:28px 32px;gap:20px;background:var(--bg)} .iw-step-content{display:none} /* Nota informativa en cada paso */ .iw-step-note{background:var(--accent-light);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:10px 14px;font-size:.75rem;color:var(--accent-dark);line-height:1.5} .iw-step-note.note-green{background:var(--ok-bg);border-color:var(--ok);color:var(--ok-deep)} .iw-step-note.note-amber{background:var(--warn-bg);border-color:var(--warn);color:var(--warn-dark)} /* Tarjeta de carga */ :is(.iw-card,.firma-row){background:var(--card);border-radius:var(--radius);align-items:center;box-shadow:var(--shadow-xs)} .iw-card{border:var(--bd-2);padding:20px 24px;display:flex;gap:18px;transition:border-color .2s,box-shadow .2s} .iw-card:hover{border-color:var(--accent-border);box-shadow:0 4px 12px rgba(79,70,229,.08)} .iw-card.success{border-color:var(--ok-glow);background:var(--ok-bg)} :is(.iw-card-ic,.kpi-icon){width:44px;height:44px;border-radius:var(--radius-md)} .iw-card-ic{background:var(--accent-light);font-size:1.4rem} .iw-card.success .iw-card-ic{background:var(--ok-light)} .iw-card-title{font-size:.88rem;font-weight:700;color:var(--text-strong)} .iw-card-desc{font-size:.73rem;color:var(--muted);margin-top:3px;line-height:1.45} /* Badge de tipo en cada tarjeta */ .iw-type-badge{gap:4px;font-size:.6rem;font-weight:700;padding:3px 8px;margin-top:6px;text-transform:uppercase;letter-spacing:.06em} .iw-type-badge.badge-persona{background:var(--accent-light);color:var(--accent-dark)} .iw-type-badge.badge-historial{background:var(--ok-bg);color:var(--ok-deep)} .iw-type-badge.badge-anexo{background:var(--warn-bg);color:var(--warn)} /* Footer */ .iw-footer{padding:18px 32px;border-top:1px solid var(--accent-light)} .iw-btn-prev{padding:9px 18px;font-size:.8rem;border:var(--bd-1);border-radius:var(--radius-btn)} .iw-btn-prev:hover{background:var(--bg);border-color:var(--accent-border);color:var(--accent)} .iw-btn-next{padding:11px 26px;font-size:.82rem;border-radius:var(--radius-badge);box-shadow:0 4px 12px rgba(79,70,229,.25);transition:var(--tr-btn)} .iw-btn-next:hover{background:var(--accent-dark);transform:var(--hover-lift);box-shadow:0 8px 20px rgba(79,70,229,.3)} .iw-btn-next:disabled{background:var(--desk);cursor:not-allowed;transform:none;box-shadow:none} .iw-file-btn{position:relative;overflow:hidden} .iw-file-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer} /* ── Modal Nuevo Funcionario ── */ .modal-nf-overlay{background:rgba(15,23,42,.62);z-index:1001;align-items:flex-start;padding:40px 16px;overflow-y:auto} .modal-nf{border-radius:var(--radius);width:560px;max-width:100%;box-shadow:0 24px 64px rgba(15,23,42,.26);margin:auto} .modal-nf-head{padding:20px 28px;align-items:flex-start} .modal-nf-head h3{color:#fff;font-size:1rem;font-weight:700;margin:0} :is(.modal-nf-head-sub,.firma-det-header-sub){color:var(--accent-mid);font-size:.75rem;margin-top:3px} .btn-close-nf{flex-shrink:0} .modal-nf-body{padding:24px 28px} .nf-section-title{font-size:.67rem;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;padding-bottom:6px;border-bottom:1.5px solid var(--border)} .nf-fg.span2{grid-column:span 2} .nf-fg label{font-size:.72rem;font-weight:700} .nf-fg input.input-ok{border-color:var(--ok-text)} .nf-rut-hint{font-size:.68rem;height:14px;margin-top:2px;transition:color .2s} .nf-rut-hint.ok{color:var(--ok-text)} .nf-reemplazo-fields{border:1.5px solid var(--warn-border);border-radius:var(--radius-badge);background:var(--warn-bg);padding:14px 16px;display:flex;flex-direction:column;gap:12px} .nf-reemplazo-label{font-size:.7rem;font-weight:800;color:var(--warn-dark);text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px} .modal-nf-footer{padding:16px 28px} .btn-save-nf{padding:10px 24px} /* ── QR de validación institucional en ficha ── */ .func-qr-block{display:flex;align-items:center;gap:20px;padding:18px 20px;background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy-ink) 100%);border-radius:var(--radius);border:2px solid var(--navy-ink)} .func-qr-canvas{width:80px;height:80px;background:var(--card);border-radius:var(--radius-xs)} :is(.func-qr-title,.firma-bloque-title){font-size:.72rem;font-weight:800;text-transform:uppercase;margin-bottom:5px} .func-qr-title{color:#fff;letter-spacing:.08em} .func-qr-line{font-size:.73rem;color:#94B8D8;margin-bottom:3px;line-height:1.5} :is(.func-qr-ley,.firma-bloque-ley){display:inline-block;font-size:.63rem;color:var(--accent-2);background:var(--purple-light);border:var(--bd-purple)} .func-qr-ley{margin-top:6px;border-radius:var(--radius-tag);padding:2px 8px;font-weight:700} /* Indicador de vigencia de contrato */ /* ── Timeline Styles ── */ .func-timeline{padding:10px 0;margin-left:14px;border-left:2px solid var(--border)}.timeline-item{position:relative;padding:16px 0 16px 24px;animation:var(--anim-card)} .timeline-item:nth-child(2){animation-delay:50ms} .timeline-item:nth-child(3){animation-delay:100ms} .timeline-item:nth-child(4){animation-delay:150ms} .timeline-item:nth-child(n+5){animation-delay:200ms} :is(.timeline-dot,.hv360-tl-dot){position:absolute;width:12px;height:12px;border-radius:var(--radius-circle)} .timeline-dot{left:-7px;top:22px;background:var(--desk);border:2px solid var(--card);box-shadow:0 0 0 2px var(--border)} .timeline-item.active .timeline-dot{background:var(--accent);box-shadow:0 0 0 2px var(--accent-border)} :is(.timeline-content,.hv360-tl-card){background:var(--card);border:var(--bd-1);border-radius:var(--radius-badge);transition:var(--tr-border)} .timeline-content{padding:12px 14px;box-shadow:var(--shadow-xs)} :is(.timeline-content,.hv360-tl-card):hover{border-color:var(--accent-light);box-shadow:0 3px 10px rgba(15,23,42,.09)} .timeline-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px} .timeline-title{font-size:.8rem;font-weight:700;color:var(--text)} .timeline-date{font-size:.68rem;font-weight:600;color:var(--muted)} .timeline-body{font-size:.72rem;color:var(--text-secondary);line-height:1.4} /* ── Bulk Actions Bar ── */ @keyframes bulkBarIn{from{transform:translateX(-50%) translateY(60px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}} .fdir-bulk-bar{left:50%;transform:translateX(-50%);padding:12px 24px;border-radius:var(--radius-md);display:none;align-items:center;gap:20px;z-index:1050;box-shadow:0 10px 40px rgba(15,23,42,.36)} .fdir-bulk-bar.show{display:flex;animation:bulkBarIn .3s cubic-bezier(.34,1.56,.64,1) both} .bulk-btn{background:rgba(255,255,255,.1);border:1.5px solid var(--glass-border);border-radius:var(--radius-input);padding:8px 14px;font-size:.75rem;cursor:pointer;gap:6px;transition:background .2s,border-color .2s} .bulk-btn:hover{background:var(--accent);border-color:var(--accent)} /* ══════════════════════════════════════════════ FIRMA ELECTRÓNICA ══════════════════════════════════════════════ */ .hv360-stat-card:hover{box-shadow:0 4px 12px rgba(15,23,42,.09);transform:var(--hover-lift)} /* Filter bar */ .firma-type-btns{display:flex;gap:4px;flex-shrink:0} /* Shared neutral filter button specifics */ :is(.firma-type-btn,.gal-fil){color:var(--muted);transition:var(--tr-all)} .firma-type-btn{padding:5px 12px;border-radius:var(--radius-xs);font-weight:600} :is(.firma-type-btn,.gal-fil):hover:not(.active){border-color:var(--muted-light);color:var(--text-strong)} /* Body — split 3:2 */ .firma-body{flex:1;display:grid;grid-template-columns:3fr 2fr;overflow:hidden;background:var(--bg);gap:0} /* ── Lista izquierda ── */ .firma-list-panel{padding:28px 32px 0;gap:16px} @keyframes firma-pulse{0%,100%{box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(79,70,229,.18)}50%{box-shadow:0 0 0 4px #fff,0 0 0 8px rgba(79,70,229,.32)}} @keyframes firma-dot-pulse{0%,100%{opacity:1}50%{opacity:.3}} /* ── Material Symbols helper ── */ .ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:1.05em;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;vertical-align:middle;margin-right:4px} .ms-sm{font-size:.95em} /* ── Hoja de Vida — tabs ── */ :is(.hv-tab,.firma-tab){font-weight:600;color:var(--muted-light)} .hv-tab{padding:12px 18px;font-size:.78rem;border-bottom:3px solid transparent;transition:var(--tr-border-ch)} :is(.hv-card,.firma-det-card){background:var(--card);border-radius:var(--radius-md);border:var(--bd-1);animation:var(--anim-card)} :is(.hv-card-title,.hv360-sidebar-card-title,.hv360-kpi-lbl){font-weight:700;color:var(--muted-light);text-transform:uppercase} .hv-card{padding:22px 24px;margin-bottom:16px} .hv-card:nth-child(2){animation-delay:40ms} .hv-card:nth-child(3){animation-delay:80ms} .hv-card:nth-child(4){animation-delay:120ms} .hv-card:nth-child(5){animation-delay:160ms} .hv-card:nth-child(n+6){animation-delay:200ms} /* ── Bento Ficha de Funcionario ── */ .hv-card { background: var(--card); border: .5px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 22px 26px; margin-bottom: 14px; } .hv-card-title { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 20px; } .hv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; } .hv-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px 40px; } .hv-field-label { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 5px; } .hv-field-val { font-size: 13.5px; font-weight: 600; color: var(--text-strong); line-height: 1.3; } .hv-field-empty { font-size: 13.5px; color: var(--muted-light); font-style: italic; } .hv-input { width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; font-size: 13.5px; color: var(--text-strong); outline: none; transition: all .2s; box-sizing: border-box; } .hv-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } /* ── KPI Bento Grid ── */ .hv360-kpi-card { position: relative; border-radius: 20px; padding: 18px 20px 16px; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -8px rgba(31,38,135,.2), 0 2px 6px -2px rgba(0,0,0,.07); border: .5px solid rgba(255,255,255,.65); transition: transform .2s, box-shadow .2s; } .hv360-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 16px 36px -8px rgba(31,38,135,.26), 0 2px 6px -2px rgba(0,0,0,.07); } .hv360-kpi-card-icon { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.65); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 5px -1px rgba(0,0,0,.07); margin-bottom: 14px; } .hv360-kpi-card-val { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 30px; color: #1d1d1f; line-height: 1; letter-spacing: -.8px; margin-bottom: 4px; display: flex; align-items: baseline; gap: 5px; } .hv360-kpi-card-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #86868b; margin-bottom: 3px; } .hv360-kpi-card-sub { font-size: 11.5px; color: #3c3c43; opacity: .75; } /* Theme gradients for KPIs */ body:not([data-theme="dark"]):not([data-theme="premium"]) .hv360-kpi-card.blue { background: linear-gradient(155deg,#dde8ff 0%,#e8f0ff 100%); } body:not([data-theme="dark"]):not([data-theme="premium"]) .hv360-kpi-card.green { background: linear-gradient(155deg,#d6f5e0 0%,#e4faec 100%); } body:not([data-theme="dark"]):not([data-theme="premium"]) .hv360-kpi-card.purple { background: linear-gradient(155deg,#ecdcff 0%,#f3e8ff 100%); } body:not([data-theme="dark"]):not([data-theme="premium"]) .hv360-kpi-card.grey { background: linear-gradient(155deg,#e2eaf4 0%,#eef3f8 100%); } /* Dark/Premium styles overrides */ body[data-theme="dark"] .hv360-kpi-card { background: var(--ds-card, #1a1f26); border-color: var(--ds-border, #2a323c); box-shadow: 0 4px 12px rgba(0,0,0,.25); } body[data-theme="dark"] .hv360-kpi-card-icon { background: var(--ds-surface, #232a33); box-shadow: none; } body[data-theme="dark"] .hv360-kpi-card-val { color: var(--ds-text, #f1f5f9); } body[data-theme="dark"] .hv360-kpi-card-lbl { color: var(--ds-muted, #94a3b8); } body[data-theme="dark"] .hv360-kpi-card-sub { color: var(--ds-text-secondary, #cbd5e1); } body[data-theme="premium"] .hv360-kpi-card { background: var(--ds-card, rgba(20,20,28,.55)); backdrop-filter: blur(20px); border-color: var(--ds-border, rgba(255,255,255,.08)); box-shadow: var(--ds-card-elev); } body[data-theme="premium"] .hv360-kpi-card-icon { background: rgba(255,255,255,.08); box-shadow: none; } body[data-theme="premium"] .hv360-kpi-card-val { color: var(--ds-text, #fafafa); } body[data-theme="premium"] .hv360-kpi-card-lbl { color: var(--ds-muted, #6b6b78); } body[data-theme="premium"] .hv360-kpi-card-sub { color: var(--ds-text-secondary, #a8a8b3); } /* ── Sidebar alert cards ── */ .hv360-sidebar-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 14px; } .hv360-sidebar-card-header { padding: 14px 18px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 7px; } .hv360-sidebar-card-title { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); flex: 1; margin: 0; display: flex; align-items: center; gap: 6px; } .hv360-sidebar-card-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; } .hv360-alert-row{align-items:flex-start;gap:9px} .hv360-alert-row:nth-child(2){animation-delay:30ms} .hv360-alert-row:nth-child(3){animation-delay:60ms} .hv360-alert-row:nth-child(4){animation-delay:90ms} .hv360-alert-row:nth-child(n+5){animation-delay:120ms} .hv360-alert-row:last-child{border-bottom:none;padding-bottom:2px} .hv360-alert-dot{width:7px;height:7px;border-radius:var(--radius-circle);flex-shrink:0;margin-top:4px} .hv360-alert-text{font-size:.7rem;color:var(--text-strong);line-height:1.4} .hv360-alert-sub{font-size:.62rem;color:var(--muted-light);margin-top:1px} .hv360-alert-badge{font-size:.58rem;font-weight:700;padding:2px 7px;border-radius:var(--radius-pill);white-space:nowrap} .hv360-empty-sidebar{text-align:center;padding:16px 10px;color:var(--muted-light);font-size:.72rem;line-height:1.5;border-radius:var(--radius-sm);background:var(--surface);margin:4px 0} /* Expediente table */ .hv360-expediente-wrap{overflow-x:auto} .hv360-expediente th{letter-spacing:.05em;padding:9px 12px} .hv360-expediente td{font-size:.74rem;color:var(--text-strong);padding:11px 12px;border-bottom:var(--bd-1);vertical-align:middle} .hv360-expediente tbody tr:nth-child(2){animation-delay:35ms} .hv360-expediente tbody tr:nth-child(3){animation-delay:70ms} .hv360-expediente tbody tr:nth-child(4){animation-delay:105ms} .hv360-expediente tbody tr:nth-child(5){animation-delay:140ms} .hv360-expediente tbody tr:nth-child(n+6){animation-delay:175ms} .hv360-anx-tr{border-bottom:var(--bd-1)} .hv360-anx-tr:nth-child(2){animation-delay:40ms} .hv360-anx-tr:nth-child(3){animation-delay:80ms} .hv360-anx-tr:nth-child(4){animation-delay:120ms} .hv360-anx-tr:nth-child(5){animation-delay:160ms} .hv360-anx-tr:nth-child(n+6){animation-delay:200ms} .hv360-expediente :is(.badge-firmado,.badge-en-firma,.badge-borrador){font-size:.59rem;font-weight:800;padding:2px 8px;border-radius:var(--radius-pill)} .hv360-expediente .badge-en-firma{background:var(--warn-light);color:var(--warn-dark)}.hv360-expediente .badge-borrador{background:var(--surface);color:var(--muted)} .hv360-expediente .badge-word{background:var(--indigo-light);color:var(--accent);font-size:.56rem;font-weight:800;padding:1px 6px;border-radius:var(--radius-badge)} /* Improved timeline */ .hv360-timeline-wrap{position:relative;padding-left:22px} .hv360-timeline-wrap::before{content:'';position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:linear-gradient(to bottom,var(--border),var(--surface));border-radius:2px} .hv360-tl-item{position:relative;padding-bottom:22px;animation:var(--anim-card)} .hv360-tl-item:nth-child(2){animation-delay:50ms} .hv360-tl-item:nth-child(3){animation-delay:100ms} .hv360-tl-item:nth-child(4){animation-delay:150ms} .hv360-tl-item:nth-child(5){animation-delay:200ms} .hv360-tl-item:nth-child(6){animation-delay:250ms} .hv360-tl-item:nth-child(n+7){animation-delay:300ms} .hv360-tl-item:last-child{padding-bottom:0} .hv360-tl-dot{left:-18px;top:4px;border:2.5px solid var(--card);box-shadow:0 0 0 2px currentColor;background:var(--card)} .hv360-tl-card{background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 18px;} .hv360-tl-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px} /* Tabs — pill toggle */ .firma-tabs{display:flex;background:var(--surface);border-radius:var(--radius-md);padding:4px;flex-shrink:0;gap:2px;border-bottom:none} .firma-tab{flex:1;padding:7px 10px;text-align:center;font-size:.72rem;border-radius:var(--radius-sm);transition:var(--tr-color);white-space:nowrap} .firma-tab.active{background:var(--card);color:var(--accent);box-shadow:0 1px 4px rgba(79,70,229,.12)} /* Search */ .firma-list-search{display:flex;align-items:center;gap:8px;padding:0 14px;height:42px;background:var(--surface);border:1.5px solid transparent;border-radius:var(--radius-badge);transition:var(--tr-all);flex-shrink:0;position:relative} .firma-list-search:hover:not(:focus-within){background:var(--card);border-color:var(--border)} /* Pill search inputs en vistas de Plazos / Aprobación / Auditoría */ :is(#plazos-buscar,#aprob-buscar,#audit-buscar):focus{box-shadow:var(--focus-ring),0 2px 8px rgba(15,23,42,.04)} /* Filter selects — perm, plazos, aprobación, dotación, auditoría */ :is(#perm-filt-tipo,#perm-filt-estado,#perm-filt-estab,.form-input):focus{border-color:var(--accent);box-shadow:var(--focus-ring);outline:none} :is(#plazos-fil-urgencia,#plazos-fil-estab,#plazos-fil-tipo,#aprob-fil-depto,#aprob-fil-estado,#dot-fil-estab,#dot-fil-tipo,#audit-fil-estado,#audit-fil-tipo):focus{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-2xs)} /* ── Search clear button (universal) ── */ .search-clear{display:none;right:8px;background:none;border:none;cursor:pointer;font-size:1rem;padding:2px 4px;border-radius:var(--radius-2xs);transition:var(--tr-color)} .search-has-value .search-clear{display:flex;align-items:center;justify-content:center} :is(.firma-list-search input,.search-field){border:none;outline:none;font-size:.8rem;color:var(--text-strong);width:100%;font-family:var(--font)} .firma-list-search input{background:none} /* Table header */ :is(.firma-tbl-hdr,.firma-row){display:grid;grid-template-columns:110px 1fr 1.1fr 90px 28px;gap:12px;align-items:center} .firma-tbl-hdr{padding:8px 20px;letter-spacing:.08em;border-bottom:var(--bd-1);flex-shrink:0} /* List */ .firma-list{padding:8px 0 24px;gap:8px} /* Row — Stitch card */ .firma-row{padding:14px 20px;cursor:pointer;border:1px solid var(--border);background:var(--card);border-radius:var(--radius-md);margin-bottom:6px;transition:var(--tr-all);animation:var(--anim-row);box-shadow:var(--shadow-xs)} .firma-row:nth-child(2){animation-delay:30ms} .firma-row:nth-child(3){animation-delay:60ms} .firma-row:nth-child(4){animation-delay:90ms} .firma-row:nth-child(5){animation-delay:120ms} .firma-row:nth-child(6){animation-delay:150ms} .firma-row:nth-child(n+7){animation-delay:180ms} .firma-row:hover{border-color:var(--accent-border);background:var(--accent-light);transform:translateY(-1px);box-shadow:var(--shadow-sm)} .firma-row.selected{border-color:var(--accent);background:var(--accent-light);box-shadow:0 4px 16px rgba(79,70,229,.14)} .firma-list-empty{gap:8px;padding:48px 24px;font-size:.82rem} /* ── Panel derecho ── */ .firma-detail-panel{padding:24px;gap:14px;border-left:var(--bd-1);background:var(--bg)} .firma-detail-empty{background:var(--card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)} /* Zona de detalle y firma */ .firma-det-scroll{gap:14px} .firma-det-card{box-shadow:var(--shadow-sm);flex-shrink:0} .firma-det-scroll>.firma-det-card:nth-child(1){animation-delay:40ms} .firma-det-scroll>.firma-det-card:nth-child(2){animation-delay:90ms} .firma-det-scroll>.firma-det-card:nth-child(3){animation-delay:140ms} .firma-det-scroll>.firma-det-card:nth-child(4){animation-delay:190ms} .firma-det-scroll>.firma-det-card:nth-child(n+5){animation-delay:230ms} .firma-det-card-head{padding:13px 20px;border-bottom:var(--bd-1);font-size:.67rem;justify-content:space-between;gap:7px} /* Header del detalle */ .firma-det-header{background:linear-gradient(135deg, var(--navy-ink), var(--navy-deep)) !important;color:#fff;border-radius:var(--radius-md);padding:18px 22px;gap:16px;box-shadow:0 4px 12px rgba(15,23,42,0.1)} .firma-det-header-ic{width:48px;height:48px;border-radius:var(--radius-badge);background:rgba(255,255,255,.12);font-size:1.5rem} .firma-det-header-title{font-weight:700} .firma-det-header-badge{flex-shrink:0} /* Resumen del contrato */ .firma-resumen-field{padding:11px 18px;border-bottom:var(--bd-bg)} .firma-resumen-label{font-size:.63rem} /* Área firma */ .firma-area{padding:20px} .firma-estado-band{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--radius-badge);margin-bottom:18px} .firma-estado-firm{background:var(--ok-bg);border:var(--bd-ok)} .firma-estado-pend{background:var(--warn-bg);border:var(--bd-warn)} .firma-estado-ic{font-size:1.4rem} .firma-estado-title{font-size:.85rem;font-weight:700;margin-bottom:2px} .firma-estado-firm .firma-estado-title{color:var(--ok-text)} .firma-estado-pend .firma-estado-title{color:var(--warn-dark)} .firma-estado-sub{font-size:.74rem;color:var(--muted)} /* Formulario de firma */ /* Bloque de firma visual */ .firma-bloque{border:2px dashed var(--accent-border);border-radius:var(--radius-badge);padding:18px;display:flex;gap:20px;align-items:center;background:var(--info-bg)} .firma-bloque-qr{width:86px;height:86px} .firma-bloque-title{color:var(--accent);letter-spacing:.05em} .firma-bloque-line{font-size:.74rem;color:var(--text);margin-bottom:3px;line-height:1.5} .firma-bloque-sub{font-size:.67rem;color:var(--muted);margin-top:5px;line-height:1.5} .firma-bloque-ley{border-radius:var(--radius-xs);padding:3px 9px;margin-top:7px;font-weight:600} /* Footer del detalle */ .firma-det-footer{padding:12px 18px;gap:8px;flex-shrink:0;box-shadow:var(--shadow-sm)} .btn-firma-imp{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:.78rem;color:var(--label)} /* Stats chips (legacy compat) */ /* ══════════════════════════════════════════════ DISEÑO FORMATO OFICIO PREMIUM (WEB + IMPRESIÓN) ══════════════════════════════════════════════ */ .oficio-container{display:flex;flex-direction:column;align-items:center;width:100%} .oficio-page-continuous{width:100%;max-width:720px;border-radius:var(--radius-2xs);box-shadow:0 2px 12px rgba(15,23,42,.12);overflow:hidden;font-family:"Times New Roman",Times,serif;line-height:1.7} /* ── Formato oficial de contrato (estilo plantilla CMP Ley 19.378) ── */ .oficio-page-continuous .doc-h{text-align:center;font-weight:bold;font-size:10pt;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:12px;letter-spacing:.02em} .oficio-page-continuous :is(.doc-p,.cbody,.clause){text-align:justify;text-indent:1.2em;margin:0 0 10px;font-size:11pt;line-height:1.7} .oficio-page-continuous .bold{font-weight:bold;text-transform:uppercase;margin-right:.25em} .oficio-page-continuous .nk{color:var(--navy-ink);font-weight:bold;border-bottom:1px solid var(--navy-ink);padding:0 1px} .oficio-page-continuous .vacio{color:#c0392b;font-style:italic;border-bottom:1px dashed #c0392b;padding:0 1px} .oficio-page-continuous .firmas{display:flex;justify-content:space-between;margin-top:60px;page-break-inside:avoid;break-inside:avoid} .oficio-page-continuous .firma{text-align:center;width:45%} .oficio-page-continuous .firma-l{border-top:1px solid #000;margin-bottom:6px;height:1px;width:100%} .oficio-page-continuous .firma p{font-size:9.5pt;margin:0;text-indent:0;line-height:1.4} /* Títulos y cuerpo del contrato dentro del nuevo contenedor */ .oficio-page-continuous :is(.ctitle,.csub){text-align:center;font-weight:bold;text-transform:uppercase;border:none;padding:0} .oficio-page-continuous .ctitle{font-size:12pt;margin:14px 0 4px;letter-spacing:.04em} .oficio-page-continuous .csub{font-size:11pt;margin:0 0 18px;letter-spacing:.02em} .oficio-page-continuous .rem-item{text-align:justify;margin:4px 0 4px 1.4em;text-indent:0;padding-left:0;font-size:11pt} .oficio-page-continuous .rem-note{text-align:justify;margin:6px 0;text-indent:1.2em;padding-left:0;font-size:11pt} .oficio-page-continuous .page-sep{display:none} .oficio-page-continuous .page2-wrapper{display:block} .oficio-main-title{text-align:center;margin-bottom:40px} .oficio-main-title h2{font-size:1.5rem;font-weight:800;color:var(--text-strong);letter-spacing:-.02em;margin-bottom:8px} .oficio-main-title h3{font-size:.85rem} /* Cláusulas */ .oficio-page-continuous hr.page-divider{border:none;border-top:1px dashed var(--border);margin:60px -64px 60px -64px;border-bottom:24px solid var(--bg);height:24px;page-break-after:always;break-after:page;position:relative} .oficio-page-continuous hr.page-divider::after{content:"FIN DE PÁGINA";position:absolute;top:4px;left:0;right:0;text-align:center;font-size:.6rem;color:var(--muted-light);font-weight:700;letter-spacing:.1em} /* Pastillas de variables */ /* Firmas */ .oficio-firmas{margin-top:80px;padding-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:60px;page-break-inside:avoid} .oficio-firma-line{border-top:1px solid rgba(67,71,78,.4);margin-bottom:12px} .oficio-firma-name{font-weight:800;font-size:.8rem;text-transform:uppercase;color:var(--navy-deep)} .oficio-firma-role{font-size:.65rem;color:var(--muted);margin-top:4px} .oficio-firma-meta{font-size:.6rem;color:var(--muted);margin-top:4px;letter-spacing:.05em} .oficio-qr{margin-top:60px;display:flex;justify-content:center} /* ── Plantilla gallery cards ── */ /* ── View page header typography ── */ /* Shared: tight letter-spacing + line-height:1 — view headings + KPI number */ :is(.view-title,.kpi-val){letter-spacing:-.03em;line-height:1} .view-title{font-size:1.6rem;font-weight:800;color:var(--text-strong)} .view-subtitle{font-size:.78rem;color:var(--muted-light);font-weight:500;margin-top:4px} /* ── Filter pill wrapper + inner select ── */ /* ── KPI card (24px radius, cardIn animation — used in dot-kpis, aprob-kpis) ── */ .kpi-card{background:var(--card);border-radius:var(--radius-card-xl);padding:22px 24px;box-shadow:0 4px 24px rgba(15,23,42,.04);border:var(--bd-srf);animation:var(--anim-card);transition:var(--tr-card);cursor:default} .kpi-card:hover{box-shadow:0 8px 28px rgba(15,23,42,.1);border-color:var(--accent-border);transform:translateY(-2px)} /* ── KPI card header row (icon + badge, flex space-between) ── */ .kpi-card-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px} /* ── KPI icon bubble ── */ .kpi-icon{font-size:1.1rem;padding:10px;background:var(--surface)} .kpi-desc{font-size:.82rem;color:var(--muted-light);font-weight:500;margin-bottom:4px} /* ── KPI big number value ── */ .kpi-val{font-size:2rem} /* ── KPI progress bar track ── */ .kpi-bar-track{margin-top:12px;height:4px;background:var(--border);border-radius:var(--radius-2xs);overflow:hidden} /* ── HV360 contract summary strip card ── */ .hv360-stat-card{padding:12px 18px;flex:1;text-align:center;box-shadow:var(--shadow-xs);transition:var(--tr-motion)} /* ── Small muted stat label (uppercase, used inside stat cards) ── */ .stat-label{font-size:.6rem;color:var(--muted-light);text-transform:uppercase;letter-spacing:.06em;margin-top:2px} /* ── Muted uppercase sub-label (.65rem) — KPI labels, th headers, section captions ── */ .kpi-sublabel{letter-spacing:.1em} /* ── th standard padding (14px 16px, left-aligned) — for kpi-sublabel on ── */ .th-kpi-std{padding:14px 16px;text-align:left} /* ── Empty-state text inside table cells ── */ .es-title{font-size:.82rem;font-weight:600;color:var(--muted)} .es-hint{font-size:.74rem;color:var(--muted-light);margin-top:4px} /* ── Card / section inner heading ── */ .card-section-title{font-size:1.05rem;font-weight:800;color:var(--text-strong)} /* ── Compact th label (firma / generador tables) ── */ :is(.th-sm,.sec-lbl-warn,.sec-lbl-acc){font-weight:700;text-transform:uppercase;letter-spacing:.06em} .th-sm{padding:9px 12px;text-align:left;font-size:.62rem;color:var(--muted)} /* ── Search/filter icon overlay inside a position:relative input wrapper ── */ .input-search-icon{left:14px;font-size:.85rem;pointer-events:none} /* ── Glassmorphism panel row (dotacion lateral panel) ── */ .glass-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:rgba(255,255,255,.1);border-radius:var(--radius-md);backdrop-filter:blur(8px)} /* ── Import wizard step status label ── */ .iw-step-status{font-size:.65rem;margin-top:8px;font-weight:700;color:var(--muted)} /* ── Flex grow + min-width:0 utility ── */ :is(.flex-1,.repo-recent-info,.func-det-head-info,.anx-info,.func-qr-info,.firma-det-header-info,.firma-bloque-info){flex:1;min-width:0} /* ── Column flex with gap:8 ── */ /* ── Column flex with gap:16 ── */ /* ── Medium body text (.8rem, weight 500) ── */ .text-body-md{font-size:.8rem;font-weight:500} /* ── Base form input (width, border, radius, font-family, box-sizing) ── */ :is(.form-input,.sel-form-xs,.field-compact){width:100%;border:var(--bd);box-sizing:border-box;transition:var(--tr-border-fast)} .form-input{border-radius:var(--radius-input);font-family:inherit} /* ── Extra-small muted text (.68rem, muted-light) ── */ .text-xs-muted{font-size:.68rem;color:var(--muted-light)} /* ── Extra-small muted-base text (.68rem, --muted) ── */ .muted-xs{font-size:.68rem;color:var(--muted)} /* ── Warning pulse dot (8px amber with glow ring) ── */ .dot-warn{background:var(--warn);box-shadow:0 0 0 3px rgba(217,119,6,.12)} /* ── Dashed drop/empty area placeholder ── */ .drop-area-empty{text-align:center;padding:20px;color:var(--muted-light);font-size:.75rem;border:2px dashed var(--border);border-radius:var(--radius-badge)} /* ── Standard card container (16px radius, subtle shadow) ── */ .inner-card{background:var(--card);border-radius:var(--radius-xl);box-shadow:0 1px 3px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06);overflow:hidden} /* ── Compact card (12px radius, bordered) ── */ .card-sm{background:var(--card);border-radius:var(--radius-md);border:var(--bd-1);overflow:hidden} /* ── Padded float card (12px radius, 16/18px pad, soft shadow — no border) ── */ .card-float{background:var(--card);border-radius:var(--radius-md);padding:16px 18px;box-shadow:var(--shadow-sm)} /* ── Dashboard widget list row (flex, gap, separator) ── */ :is(.widget-row,.panel-item-row){display:flex;align-items:center;gap:14px} .widget-row{border-bottom:var(--bd-bg)} /* ── 2-column grid layouts ── */ :is(.grid-2-md,.grid-2-sm){display:grid;grid-template-columns:1fr 1fr} .grid-2-md{gap:7px}.grid-2-sm{gap:4px 12px} /* ── Flex row with 12px gap, top-aligned ── */ /* ── Navy accent value text (firma flow) ── */ .val-navy{font-weight:700;color:var(--navy)} /* ── Card/panel header row (flex space-between + bottom separator) ── */ .card-hdr-row{padding:14px 20px 12px;border-bottom:var(--bd-srf);display:flex;align-items:center;justify-content:space-between} /* ── Field labels: shared base + size/spacing variants ── */ :is(.field-lbl,.field-lbl-sm){font-weight:700;color:var(--muted);display:block} .field-lbl{font-size:.67rem;margin-bottom:3px} .field-lbl-sm{font-size:.65rem;margin-bottom:2px} /* ── Field meta/hint text (below value, 0.65rem muted-light) ── */ .field-meta{font-size:.65rem;color:var(--muted-light);margin-top:1px} /* ── Semi-bold body text (.78rem, strong color — card/widget titles) ── */ .text-sm-bold{font-size:.78rem;font-weight:700;color:var(--text-strong)} /* ── Semi-bold body text (.78rem, secondary color — option labels, firmante chips) ── */ .text-sm-sec{font-size:.78rem;font-weight:700;color:var(--text-secondary)} /* ── Truncated medium text (.76rem, semi-bold) ── */ .text-trunc{font-size:.76rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ── Filter pill wrapper + inner select ── */ .fil-pill{background:var(--accent-light);border-radius:var(--radius-pill);padding:6px 14px;display:flex;align-items:center;gap:6px} :is(.fil-sel,.sel-transparent,.sel-ghost){background:transparent;border:none;cursor:pointer;font-family:var(--font);outline:none} :is(.fil-sel,.sel-transparent){font-weight:700;color:var(--text-strong)} .fil-sel{font-size:.78rem} .gal-fil{padding:6px 16px;border-radius:var(--radius-pill);font-weight:700} .gal-fil.active{background:var(--accent);color:#fff;border-color:transparent} /* ── Modal overlay: fixed full-screen flex-centered (z-index 9999) ── */ :is(.modal-flex-overlay,.modal-flex-overlay-lt){position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);animation:overlayFade .15s ease both} .modal-flex-overlay{background:var(--overlay-dark)} .modal-flex-overlay-lt{background:var(--overlay-lt)} /* ── Accent avatar circle (32px, accent bg, white ring shadow) ── */ :is(.avatar-accent-sm,.avatar-30){border-radius:var(--radius-circle)} .avatar-accent-sm{width:32px;height:32px;background:var(--accent);color:#fff;font-size:.75rem;font-weight:800;z-index:1;box-shadow:0 0 0 4px #fff} /* ── Step number badge (22px accent circle, inline-flex — firmante step indicators) ── */ .avatar-step-xs{background:var(--accent);width:22px;height:22px;font-size:.71rem;font-weight:700;flex-shrink:0} /* ── 30px avatar circle base (bg/color/font set inline — dynamic color) ── */ .avatar-30{width:30px;height:30px} /* Shared badge-radius button base — 3-way: border-radius, cursor, font-family */ :is(.btn-card-outline,.btn-nav-srf,.btn-err-outline){border-radius:var(--radius-badge);cursor:pointer;font-family:inherit} /* 2-way sub: card-bg + surface transition */ :is(.btn-card-outline,.btn-err-outline){background:var(--card);transition:var(--tr-surface)} /* ── Outlined card-bg button (9px/20px padding, 10px radius) ── */ .btn-card-outline{padding:9px 20px;border:var(--bd);color:var(--text-strong);font-size:.82rem;font-weight:600} /* ── Surface-bg nav/action button (base — padding/font-size set inline) ── */ .btn-nav-srf{background:var(--surface);border:var(--bd);color:var(--text-strong);font-weight:700;transition:var(--tr-bg-xs),border-color .12s,box-shadow .12s} .btn-nav-srf:hover{background:var(--border);border-color:var(--muted-light)} /* ── Accent round pill/badge (card bg, 20px radius, accent text) ── */ .pill-accent{padding:4px 12px;background:var(--card);border-radius:var(--radius-pill);font-size:.65rem;font-weight:800;color:var(--accent);letter-spacing:.05em} /* ── Large card wrapper (24px radius, ultra-light shadow) ── */ .card-xl{background:var(--card);border-radius:var(--radius-card-xl);overflow:hidden;box-shadow:0 4px 24px rgba(15,23,42,.02)} /* ── Panel header row (card bg + bottom border, 20/24px padding) ── */ .panel-hdr-card{padding:20px 24px;background:var(--card);border-bottom:var(--bd-1)} /* ── Accent-colored chip/badge (accent-light bg, flex-center, 12px radius) ── */ .accent-chip{background:var(--accent-light);border-radius:var(--radius-md);padding:7px 16px;display:flex;align-items:center} /* ── View section header (flex space-between bottom-aligned, 28px bottom gap) ── */ .view-section-hdr{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:28px} /* ── Padded search field (icon-left indented, card bg, no outline) ── */ .search-field{padding:10px 36px;border-radius:var(--radius-md);background:var(--card);box-shadow:0 2px 8px rgba(15,23,42,.04);transition:box-shadow .15s} .search-field:hover:not(:focus){box-shadow:0 2px 8px rgba(15,23,42,.04),0 0 0 1.5px var(--muted-light)} .search-field:focus{box-shadow:0 2px 8px rgba(15,23,42,.04),var(--focus-ring)} /* ── Table cell: centered wide padding (loading placeholder rows) ── */ :is(.td-loading,.td-empty-sm){padding:48px 20px;text-align:center} /* ── Panel loading placeholder (full-width flex center with 60px padding) ── */ .panel-loading{padding:60px;text-align:center;gap:10px} /* ── Compact empty state (overrides .empty-state default 48px padding) ── */ .empty-state-sm{padding:28px 20px} /* ── Table row with bottom divider ── */ .tr-div{border-bottom:var(--bd-1)} /* ── Table cell: centered extra-wide padding (empty-state rows) ── */ .td-empty{padding:56px 20px;text-align:center} /* ── Loading indicator row: inline-flex spinner+text (muted-light) ── */ .flex-load{display:inline-flex;align-items:center;gap:10px;color:var(--muted-light)} /* ── Empty-state emoji icon (2rem, bottom spacing) ── */ .empty-icon{font-size:2rem;margin-bottom:8px} /* ── Empty-state material symbol icon (2.2rem, block, desk color) ── */ .ms-empty{font-size:2.2rem;display:block;margin-bottom:10px;color:var(--desk)} /* ── Section sub-header label (.7rem, text-secondary, 8px gap) ── */ .lbl-section{font-size:.7rem;font-weight:700;color:var(--text-secondary);margin-bottom:8px} /* ── Micro field label, bottom spacing (.6rem, muted-light, uppercase) ── */ /* ── Micro field label, top spacing (.63rem, muted-light, uppercase) ── */ .lbl-micro-top{font-size:.63rem;margin-top:2px} /* ── Micro category tag (.62rem, muted, uppercase, .07em tracking) ── */ .lbl-micro{font-size:.62rem;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.07em} /* ── Flex row with center alignment and 8px gap ── */ /* ── Flex row with 8px gap (no align override) ── */ /* ── Flex wrap row with 8px gap ── */ .flex-wrap-8{display:flex;gap:8px;flex-wrap:wrap} /* ── Flex wrap row with 10px gap ── */ .flex-wrap-10{display:flex;gap:10px;flex-wrap:wrap} /* ── Table cell: center-aligned 14/16px padding ── */ .td-14c{padding:14px 16px;text-align:center} /* ── Table cell: right-aligned 14/20px padding ── */ .td-14r{padding:14px 20px;text-align:right} /* ── Form input size variants (override .form-input base padding/size) ── */ .fi-sm{padding:7px 10px;font-size:.78rem} .fi-xs{padding:7px 10px;font-size:.75rem} .fi-xs-tight{padding:6px 9px;font-size:.75rem} /* ── IW wizard: compact file-upload button size ── */ .iw-file-step{padding:9px 16px;font-size:.75rem;flex-shrink:0} /* ── IW wizard: centered step header with vertical margin ── */ .iw-step-center{text-align:center;margin:18px 0 6px} /* ── Stat value medium figure (1rem, heavy weight) ── */ .stat-val-md{font-size:1rem;font-weight:800} /* ── th padding: 12px/16px left-aligned (kpi-sublabel size modifier) ── */ .th-kpi-12l{padding:12px 16px;text-align:left} /* ── th padding: 0/16px/14px center-aligned (kpi-sublabel size modifier) ── */ .th-kpi-0c{padding:0 16px 14px;text-align:center} /* ── th section label: uppercase muted micro — wide (8/20px) and mid (8/12px) pad ── */ :is(.th-lbl-wide,.th-lbl-mid){text-align:left;font-size:.62rem;font-weight:700;color:var(--muted-light);text-transform:uppercase;letter-spacing:.08em} .th-lbl-wide{padding:8px 20px}.th-lbl-mid{padding:8px 12px} /* ── Section-label div in warning color ── */ .sec-lbl-warn{padding:8px 20px 4px;font-size:.62rem;color:var(--warn)} /* ── Section-label in accent-mid (firma panel headers, .67rem uppercase) ── */ .sec-lbl-acc{color:var(--accent-mid);font-size:.67rem} /* ── Subsection header: flex row, strong text, .78rem ── */ .subsec-hdr{color:var(--text-strong);font-size:.78rem;display:flex} /* ── Select/input: card-bg form field at xs size (7px/10px pad, .75rem) ── */ :is(.sel-form-xs,.field-compact){background:var(--card);outline:none} .sel-form-xs{border-radius:var(--radius-input);padding:7px 10px;font-size:.75rem;font-family:inherit} /* ── Compact field: card-bg input/select at .72rem, 5/8px pad, r6 ── */ .field-compact{border-radius:var(--radius-xs);padding:5px 8px;font-size:.72rem;font-family:var(--font)} /* btn-sm-radius base: border-less sm-radius pointer — 3-way */ :is(.btn-accordion,.btn-surface-muted,.btn-accent-xs){border:none;border-radius:var(--radius-sm);cursor:pointer} /* 2-way: tr-color transition */ :is(.btn-surface-muted,.btn-accent-xs){transition:var(--tr-color)} /* ── Accordion/collapsible toggle button row ── */ .btn-accordion{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;width:100%;text-align:left;font-family:var(--font);transition:var(--tr-fast)} /* ── Document-list grid: header (8px pad) and data row (11px pad) ── */ :is(.grid-doc-hdr,.grid-doc-row){display:grid;grid-template-columns:2fr 1fr 1fr 1fr 80px 80px;gap:0} .grid-doc-hdr{padding:8px 18px;border-bottom:var(--bd-1)} .grid-doc-row{padding:11px 18px;border-bottom:var(--bd-bg);align-items:center} /* ── Error-state outlined button ── */ .btn-err-outline{color:var(--err-text);border:1.5px solid var(--err-bg);padding:9px;font-size:.75rem;font-weight:700} .btn-err-outline:hover{background:var(--err-bg);border-color:var(--err-text)} /* ── Warning badge pill (inline, round, flex-shrink:0) ── */ .pill-warn{background:var(--warn-bg);color:var(--warn);font-size:.65rem;font-weight:700;padding:4px 10px;border-radius:var(--radius-pill);flex-shrink:0} /* ── Cancel / neutral surface button (muted text, surface bg) ── */ .btn-surface-muted{background:var(--surface);padding:9px 18px;font-size:.78rem;font-weight:600;color:var(--muted);font-family:inherit} .btn-surface-muted:hover{background:var(--border);color:var(--text-strong)} /* ── Scrollable flex-column panel with right border ── */ .panel-col-scroll{border-right:1px solid var(--surface);overflow-y:auto;display:flex;flex-direction:column} /* ── Panel list item row: flex, 14px gap, 14/20px pad, bottom border ── */ .panel-item-row{padding:14px 20px;border-bottom:var(--bd-1)} /* ── Panel body: flex column, fills remaining height, 18/16px pad ── */ .panel-body-col{padding:18px 18px 16px;flex:1;display:flex;flex-direction:column} /* ── Panel header row with surface-color bottom border ── */ .panel-hdr-surf{padding:14px 20px 12px;border-bottom:var(--bd-srf)} /* ── Cell: center-aligned with right border divider (strip cells) ── */ .cell-center-br{padding:12px 16px;border-right:var(--bd-1);text-align:center} /* ── Text: .75rem bold strong, truncated with ellipsis ── */ .text-ellipsis-strong{font-size:.75rem;font-weight:700;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ── td: muted-light .76rem, 12/16px pad ── */ .td-muted-76{padding:12px 16px;color:var(--muted-light);font-size:.76rem} /* ── Flex row with icon + label: .76rem semi, center align, 5px gap ── */ .flex-badge-sm{display:flex;align-items:center;gap:5px;font-size:.76rem;font-weight:600;color:var(--text-strong)} /* ── Flex-fill column with right border (stat strip sections) ── */ .flex-fill-br{flex:1;padding:12px 20px;border-right:var(--bd-1)} /* ── Icon wrapper: card bg, 6px pad, r6, flex-shrink:0 ── */ .icon-wrap-card{background:var(--card);padding:6px;border-radius:var(--radius-xs);flex-shrink:0} /* ── KPI / stat numbers (+ kpi-val shares font-weight/color/tabular-nums) ── */ :is(.num-xl,.num-lg,.kpi-val){font-weight:800;color:var(--text-strong);font-variant-numeric:tabular-nums} .num-xl{font-size:1.6rem}.num-lg{font-size:1.4rem} /* ── Section heading (h2): .95rem, 800w, tight tracking ── */ .section-title{font-size:.95rem;font-weight:800;color:var(--text-strong);margin:0;letter-spacing:-.02em} /* ── Text size/weight helpers ── */ .text-sm-strong{font-size:.73rem;font-weight:700;color:var(--text-strong)} .text-md-semi{font-size:.82rem;font-weight:600;color:var(--text-strong)} .text-sm-semi{font-size:.76rem;font-weight:600;color:var(--text-strong)} /* ── Status dot: 5px circle, ok-mid color ── */ .dot-5-ok{background:var(--ok-mid)} /* ── firma-det-footer: column layout variant ── */ .firma-det-footer-col{flex-direction:column;gap:7px;padding:12px 18px} /* ── hv-card modifiers ── */ .hv-card-empty{text-align:center;padding:48px;max-width:560px} .hv-card-stat{margin-bottom:0;text-align:center;padding:16px} /* ── Flex center-align rows with varying gaps ── */ :is(.flex-row-7,.flex-row-9,.flex-row-12){display:flex;align-items:center} .flex-row-7{gap:7px}.flex-row-9{gap:9px}.flex-row-12{gap:12px} /* ── Flex end row with 10px gap ── */ .flex-end-10{display:flex;justify-content:flex-end;gap:10px} /* ── 2-col grid with 8px gap, no bottom margin ── */ /* ── Tiny muted text with top margin ── */ /* ── index.html: transparent inline select (marco/tipo dropdowns) ── */ .sel-transparent{font-size:.8rem} /* ── Micro auto-margin badge label (OPCIONAL, Flujo etc.) ── */ .badge-auto{font-size:.65rem;font-weight:600;color:var(--muted);margin-left:auto} /* ── Round outline flex button (print/PDF strip) ── */ .btn-outline-round{flex:1;background:var(--bg);color:var(--text-strong);border:var(--bd);border-radius:var(--radius-pill);padding:10px 0;font-size:.78rem;justify-content:center;gap:6px;transition:var(--tr-surface)} /* ── Subtext line: muted-light .76rem, 3px top margin ── */ .text-sub-mt3{font-size:.76rem;color:var(--muted-light);margin-top:3px} /* ── Ghost/minimal filter select ── */ .sel-ghost{font-size:.76rem;font-weight:600;color:var(--muted);padding:0 4px;transition:var(--tr-color-fast)} .sel-ghost:hover{color:var(--text-strong)} /* ── Full-height flex column (view panel wrapper) ── */ .view-col{display:flex;flex-direction:column;height:100%;overflow:hidden} /* ── Card-styled select with extra right padding for custom arrow ── */ .sel-card-md{border-radius:var(--radius-badge);padding:7px 28px 7px 12px;color:var(--text-strong);appearance:none} /* ── Auto-fit KPI grid: 180px min, 16px gap, 24px bottom ── */ .grid-kpi-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px} /* ── Warning progress track bar ── */ .progress-warn-track{margin-top:10px;height:3px;background:var(--warn-light);border-radius:3px} /* ── Scrollable view panel with standard content padding ── */ /* Override display:flex de .view.active porque flex-direction:column con */ /* contenido más alto que 100vh comprime los hijos y bloquea el scroll. */ .view-scroll{overflow-y:auto;padding:28px 32px 40px} .view.active.view-scroll{display:block} /* ── Accent buttons ── */ .btn-acc-10{border-radius:var(--radius-badge);transition:var(--tr-bg),transform .15s} :is(.btn-accent-sm,.btn-accent-md){border-radius:var(--radius-sm);transition:var(--tr-lift)} .btn-accent-sm{padding:8px 18px;font-size:.75rem;font-family:var(--font)}.btn-accent-md{padding:9px 22px;font-size:.78rem;font-family:inherit} .btn-accent-xs{background:var(--accent-light);color:var(--accent);padding:4px 10px;font-size:.65rem;font-weight:700;font-family:var(--font)} .btn-accent-xs:hover{background:var(--accent-border);color:var(--accent)} /* ── Accent-light pill/badge ── */ .pill-accent-lt{font-size:.65rem} /* ── Panel card on bg color (inset box) ── */ .panel-bg-box{background:var(--bg);border:var(--bd);border-radius:var(--radius-badge);padding:14px} /* ── Section divider: top border with margin ── */ .divider-btop{margin-top:28px;border-top:var(--bd-1);padding-top:10px} /* ── Flex: bare space-between (no margin) ── */ /* ── Flex: space-between rows with varying bottom margin ── */ :is(.flex-sb,.flex-between-14,.flex-between-16){display:flex;align-items:center;justify-content:space-between} .flex-between-14{margin-bottom:14px}.flex-between-16{margin-bottom:16px} .flex-between-top-10{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px} .flex-end-16{display:flex;justify-content:flex-end;margin-bottom:16px} .flex-center-mt50{display:flex;justify-content:center;margin-top:50px} /* ── Flex row: 4px gap, top 2px margin (sub-text rows) ── */ /* ── Grid layouts ── */ .grid-3-12{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px} .grid-2-8{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px} /* ── Table: full-width standard with .78rem font ── */ /* ── Material symbol icon at desk-color, 2rem ── */ .ms-empty-sm{font-size:2rem;display:block;margin-bottom:8px;color:var(--desk)} /* ── ms icon: tiny size, muted-light, no right margin ── */ .ms-icon-tiny{font-size:.7rem;color:var(--muted-light);margin-right:0} /* ── Text micro labels ── */ :is(.text-xs-hdr-b,.text-xs-sec){font-size:.72rem;font-weight:700;color:var(--text-secondary)} .text-xs-hdr-b{margin-bottom:4px} .text-xxs-mt2{font-size:.6rem;color:var(--muted-light);margin-top:2px} .text-xxs-muted-b{font-size:.67rem;color:var(--muted-light);margin-bottom:10px} .text-xxs-muted-t{font-size:.67rem;color:var(--muted);margin-top:1px} .label-xs-upper-mt{font-size:.62rem;font-weight:600;color:var(--muted-light);text-transform:uppercase;letter-spacing:.06em;margin-top:4px} .label-xxs-cap{font-size:.58rem;color:var(--muted-light);font-weight:600;text-transform:uppercase} /* ── Fine-grain metadata label (0.63rem muted-light) ── */ .text-63-muted{font-size:.63rem;color:var(--muted-light)} /* ── Empty-state table cell (48px vertical padding, centered) ── *//* ── Large emoji/icon in empty states (2rem + 12px gap below) ── */ .icon-2xl-mb{font-size:2rem;margin-bottom:12px} /* ── Breadcrumb arrow / desk-colored small inline icon ── */ .icon-sm-desk{font-size:1.1rem;color:var(--desk)} /* ── Error-colored bold inline text ── */ .text-err-bold{color:var(--err-text);font-weight:700} /* ── Accent-colored bold inline text ── */ .text-accent-bold{color:var(--accent);font-weight:700} /* ── White bold subheading (dark loading overlays) ── */ .text-inv-bold{color:#fff;font-size:.88rem;font-weight:700} /* ── White semi-bold subheading (PDF gen overlay) ── */ .text-inv-semi{color:#fff;font-size:.85rem;font-weight:600} /* ── Left-aligned standard table header (14/20 pad) ── */ .td-14l{padding:14px 20px;text-align:left} /* ── Small muted body text (0.75rem muted) ── */ .text-75-muted{font-size:.75rem;color:var(--muted)} /* ── Medium muted secondary label (0.82rem muted-light) ── */ .text-82-muted{font-size:.82rem;color:var(--muted-light)} /* ── Ok-glow icon, no right margin (for ms icons inline) ── */ .ms-ok-glow{color:var(--ok-glow);margin-right:0} /* ── Flex item: grow + 4px top padding (timeline/step items) ── */ .flex-1-pt4{flex:1;padding-top:4px} /* ── Fine text 0.69rem muted (description sub-labels) ── */ .text-69-muted{font-size:.69rem;color:var(--muted)} /* ── Fine text 0.68rem info-text (save/hint captions) ── */ .text-68-info{font-size:.68rem;color:var(--info-text)} /* ── Fine text 0.65rem muted (counts, secondary labels) ── */ .text-65-muted{font-size:.65rem;color:var(--muted)} /* ── Material Symbol small variant, muted-light 0.8rem ── */ .ms-sm-muted-lt{color:var(--muted-light);font-size:.8rem} /* ── Flex container: justify-content center only ── */ .flex-jc{display:flex;justify-content:center} /* ── Flush variants: no padding, overflow hidden ── */ :is(.hv-card-flush,.view-flush){padding:0;overflow:hidden} /* ── Base table: full-width, collapsed borders ── */ /* ── Material Symbol: accent color, vertically aligned middle ── */ .ms-accent-mid{color:var(--accent);vertical-align:middle} /* ── Status dot 8px: circle base + color variants ── */ :is(.dot-8,.dot-8-crit,.dot-8-danger,.dot-8-warn,.dot-8-ok,.dot-8-warn-glow,.topbar-badge-dot,.dot-warn){width:8px;height:8px;border-radius:var(--radius-circle);flex-shrink:0} .dot-8-crit{background:var(--crit)}.dot-8-danger{background:var(--danger)}:is(.dot-8-warn,.dot-8-warn-glow){background:var(--warn)}.dot-8-ok{background:var(--ok)} .dot-8-warn-glow{box-shadow:0 0 0 3px rgba(245,158,11,.12)} /* ── Status dot 7px: circle base + variants ── */ :is(.dot-7,.dot-7-acc-pulse,.dot-7-ok-mid){width:7px;height:7px;border-radius:var(--radius-circle)} :is(.dot-7,.dot-7-acc-pulse){flex-shrink:0} .dot-7-acc-pulse{background:var(--accent);animation:firma-dot-pulse 1.5s infinite} /* ── Status inline dot (7px ok-mid, inline-block) ── */ .dot-7-ok-mid{background:var(--ok-mid);display:inline-block} /* ── Large tabular-num KPI figure (1.4rem bold, color set inline) ── */ .stat-num{font-size:1.4rem;font-weight:800;font-variant-numeric:tabular-nums} /* ── Dashboard counter badge (.65rem, 7px rad — bg/color set inline) ── */ .badge-count-xs{font-size:.65rem;font-weight:700;padding:3px 9px;border-radius:var(--radius-xs)} /* ── Skeleton bar: 28px wide, 10px tall, centered ── */ .sk-28{height:10px;width:28px;margin:0 auto} .sk-badge{height:18px;width:56px;border-radius:var(--radius-badge)} /* ── HV document action button (8px radius, 7/13px pad, .68rem flex — detail panel) ── */ :is(.btn-hv-doc,.btn-hv-hdr){border-radius:var(--radius-sm);padding:7px 13px;gap:4px;transition:filter .15s,box-shadow .15s} .btn-hv-doc{font-size:.68rem} button.btn-hv-doc:hover{filter:brightness(.93)} .btn-hv-hdr{font-size:.71rem} button.btn-hv-hdr:hover{filter:brightness(.9)} /* ── Quick-action button base (HV360 sidebar actions — full-width, flex, .71rem) ── */ .btn-qa-base{width:100%;border-radius:var(--radius-sm);padding:8px 10px;font-size:.71rem;gap:6px;border:1.5px solid transparent;transition:var(--tr-surface)} .btn-qa-acc{background:var(--accent-light);color:var(--accent);border-color:var(--indigo-light);margin-bottom:7px} .btn-qa-ok{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-light);margin-bottom:7px} .btn-qa-pur{background:var(--purple-light);color:var(--accent-2);border-color:var(--purple-border)} :is(.btn-qa-acc,.btn-ref-xs):hover{background:var(--accent-border);border-color:var(--accent-border)} .btn-qa-ok:hover{background:var(--ok-light);border-color:var(--ok-glow)} .btn-qa-pur:hover{background:var(--purple-border);border-color:var(--purple-border)} /* ── Reference mini button (inline-flex, xs — document table actions) ── */ .btn-ref-xs{border:1.5px solid var(--indigo-light);font-size:.63rem;font-weight:700;gap:3px} /* ── Info note box (small — info-bg, 1px border, 8px radius) ── */ .info-box-sm{background:var(--info-bg);border:var(--bd-info);border-radius:var(--radius-sm);padding:10px 14px;display:flex;align-items:center;gap:8px} /* ── Modal/panel accent header (gradient top, top-rounded) ── */ .modal-hdr-accent{background:var(--accent);padding:18px 24px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;display:flex;align-items:center;flex-shrink:0} /* ── Modal footer row: flex end, surface top-border, bottom-rounded ── */ .modal-ftr-end{padding:14px 24px;border-top:var(--bd-srf);display:flex;gap:10px;align-items:center;justify-content:flex-end;background:var(--bg);border-radius:0 0 16px 16px;flex-shrink:0} /* ── Modal footer hint/caption (left-pushed via margin-right:auto) ── */ .modal-hint{font-size:.68rem;color:var(--muted-light);margin-right:auto} /* ── Deadline status badge — inline-flex colored labels with dot ── */ :is(.badge-crit,.badge-danger,.badge-warn,.badge-ok){display:inline-flex;align-items:center;gap:5px;font-size:.75rem} :is(.badge-crit,.badge-danger){font-weight:700}:is(.badge-warn,.badge-ok){font-weight:600} .badge-crit{color:var(--crit)}.badge-danger{color:var(--danger)} .badge-warn{color:var(--warn-dark)}.badge-ok{color:var(--ok-text)} /* ── Scrollable body with 20px padding (modal/panel content areas) ── */ .scroll-p20{overflow-y:auto;padding:20px} .plantilla-card{background:var(--card);border-radius:var(--radius-pill);overflow:hidden;box-shadow:0 4px 24px rgba(15,23,42,.06);border:var(--bd-1);cursor:pointer;transition:box-shadow .2s,border-color .2s;animation:var(--anim-card)} .plantilla-card:hover{box-shadow:0 8px 32px rgba(79,70,229,.14);border-color:var(--accent-border)} .plantilla-card:nth-child(2){animation-delay:40ms} .plantilla-card:nth-child(3){animation-delay:80ms} .plantilla-card:nth-child(4){animation-delay:120ms} .plantilla-card:nth-child(5){animation-delay:160ms} .plantilla-card:nth-child(6){animation-delay:200ms} .plantilla-card:nth-child(7){animation-delay:220ms} .plantilla-card:nth-child(8){animation-delay:240ms} .plantilla-card:nth-child(n+9){animation-delay:260ms} /* ── Dashboard responsive ── */ @media(max-width:1100px){ #dash-kpi-row{grid-template-columns:repeat(3,1fr)!important} } @media(max-width:820px){ #dash-main-body{grid-template-columns:1fr!important} #dash-kpi-row{grid-template-columns:repeat(2,1fr)!important;padding:16px 20px 0!important} #view-dashboard .panel-hdr-surf, #view-dashboard .card-hdr-row{padding-left:16px;padding-right:16px} } @media(max-width:520px){ #dash-kpi-row{grid-template-columns:1fr!important} } @media print{ :is(html,body){height:auto!important;overflow:visible!important} :is(.sidebar,.panel-left-actions,.preview-head,.preview-doc-tabs,.st-ok,.st-pending){display:none!important} .content{display:block!important;min-height:0!important} .main{display:block!important;height:auto!important;overflow:visible!important} .panel-right{padding:0;max-height:none;overflow:visible;background:var(--card)} #output{border:none;box-shadow:none;padding:0;border-radius:0;font-size:11pt;max-width:none} .hl{background:none!important} :is(.empty,.page-divider){display:none} .page-break-h2{page-break-before:always;break-before:page} .page2-wrapper{display:block;overflow:visible;page-break-inside:avoid} .page2-wrapper .firma-intro{margin-top:3cm!important} .firma-wrap{page-break-inside:avoid!important;break-inside:avoid!important} .doc-footer{margin-top:20px!important;padding-top:10px!important;border-top:1px dashed var(--desk)!important} .qr-block{display:flex!important;margin-top:10px!important;padding-top:8px!important;padding-bottom:0.5cm} .qr-block :is(canvas,img){width:70px!important;height:70px!important} .autocomplete-hint{display:none!important} @page{size:215.9mm 330.2mm;margin:20mm} /* Oficio Chileno */ :is(body,html){background:transparent!important} :is(.panel-left,.sidebar,.btn-row2,#btn-enviar-firma,#gen-preview-actions,.od-status-bar){display:none!important} .oficio-page-continuous hr.page-divider::after{display:none!important} .panel-right{margin:0!important;padding:0!important;background:transparent!important;width:100%!important;border:none!important} #output{padding:0!important;margin:0!important} .oficio-page-continuous{width:100%!important;max-width:none!important;padding:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important} .oficio-page-continuous hr.page-divider{margin:0!important;border:none!important;height:0!important} } /* ══════════════════════════════════════════════════════════════════ Rediseño v2 — franja oscura de identidad + workspace claro Sistema de componentes "hv2-*" compartido entre #view-hoja-vida, #view-funcionarios y #view-contratos (mismo patrón visual, independiente del theme toggle — banda oscura fija, como una portada institucional). ══════════════════════════════════════════════════════════════════ */ :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-shell{background:#0c1220;border-radius:16px;overflow:hidden;border:1px solid #1e2a40} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-band{padding:22px 28px 0;color:#fff} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-band-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-identity{display:flex;align-items:center;gap:16px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;border:2px solid #1e2a40;flex-shrink:0} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-name{font-size:19px;font-weight:700;letter-spacing:-.2px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-status-badge{font-size:10px;font-weight:700;letter-spacing:.5px;border-radius:20px;padding:3px 10px;display:inline-flex;align-items:center;gap:5px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-status-badge.on{color:#34d399;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3)} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-status-badge.off{color:#94a3b8;background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.3)} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-subtitle{font-size:12.5px;color:#8b9bb8;margin-top:4px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-btn{font-size:12.5px;font-weight:600;border-radius:8px;padding:8px 14px;cursor:pointer;border:1px solid transparent;font-family:var(--font);transition:var(--tr-bg-only)} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-btn.ghost{color:#c7d2e4;background:rgba(255,255,255,.06);border-color:#2a3a55} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-btn.ghost:hover{background:rgba(255,255,255,.1)} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-btn.amber{color:#fbbf24;background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.3)} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-btn.ok{color:#34d399;background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.3)} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-btn.primary{color:#0c1220;background:#818cf8;border:none;padding:8px 16px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-btn.primary:hover{background:#93a0fa} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-band-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:16px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-metrics{display:flex;gap:26px;padding-bottom:14px;flex-wrap:wrap} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-metric-label{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;color:#a5b4fc;background:rgba(129,140,248,.12);border:1px solid rgba(129,140,248,.3);border-radius:20px;padding:2px 9px;text-transform:uppercase} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-metric-val{font-size:19px;font-weight:700;color:#e8edf5;margin-top:5px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-metric-unit{font-size:11px;color:#5b6b88;font-weight:600} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-metric-sub{font-size:10.5px;color:#5b6b88;margin-top:2px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-tabs{display:flex;gap:2px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-tab{display:flex;align-items:center;font-size:12.5px;font-weight:600;padding:10px 16px;border:none;border-radius:10px 10px 0 0;background:transparent;color:#8b9bb8;cursor:pointer;font-family:var(--font);transition:var(--tr-bg-only)} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-tab.active{background:#f6f7f9;color:#0f172a} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-tab-badge{font-size:10px;font-weight:700;border-radius:10px;padding:1px 7px;margin-left:7px;background:#e2e8f0;color:#475569} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-tab-badge.warn{background:#fde68a;color:#92400e} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-workspace{background:#f6f7f9;padding:20px 28px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;min-height:560px} #view-hoja-vida #hv-content{display:flex;flex-direction:column;gap:14px;min-width:0} #view-hoja-vida #hv-alerts-sidebar{width:320px;flex:none;position:sticky;top:18px;display:flex;flex-direction:column;gap:14px} /* ── Tarjetas / secciones (Perfil, Contrato, Historial, Expediente, Anexos) ── */ :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv-card{background:#fff;border:1px solid #e5e8ee;border-radius:12px;padding:18px 20px;margin-bottom:0;box-shadow:none;animation:none} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv-card-title{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--accent);text-transform:uppercase;margin-bottom:13px;gap:9px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv-grid{gap:14px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv-grid-3{gap:14px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv-field-label{font-size:10.5px;color:#94a3b8;margin-bottom:3px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv-field-val{font-size:13.5px;color:#1e293b} /* Badge pill genérico para conteos/estado junto a títulos de sección */ :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-badge{font-size:10px;font-weight:700;border-radius:10px;padding:2px 8px;display:inline-block} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-badge--neutral{color:#475569;background:#f1f5f9;border:1px solid #e2e8f0} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-badge--ok{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-badge--warn{color:#b45309;background:#fffbeb;border:1px solid #fde68a} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-badge--danger{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca} /* Fila etiqueta/valor con separador punteado (Identificación, Contacto) */ :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-row-field{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed #eef1f5} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-row-field:last-child{border-bottom:none} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-row-field-lbl{font-size:12.5px;color:#7c8aa0} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-row-field-val{font-size:13px;font-weight:600;color:#1e293b} /* Barra de vigencia del contrato (Perfil) */ :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-progress-track{height:7px;background:#e8ebf1;border-radius:7px;overflow:hidden} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#818cf8);border-radius:7px} /* ── Tabla genérica (Contrato, Permisos) ── */ :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-table-wrap{background:#fff;border:1px solid #e5e8ee;border-radius:12px;overflow:hidden} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-table-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid #eef1f5;gap:9px;flex-wrap:wrap} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-table-head-left{display:flex;align-items:center;gap:9px;flex-wrap:wrap} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-table-row-head{padding:9px 20px;background:#f8fafc;border-bottom:1px solid #eef1f5;font-size:10.5px;font-weight:700;letter-spacing:.3px;color:#94a3b8;text-transform:uppercase;display:grid;align-items:center} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-table-row{padding:12px 20px;border-bottom:1px solid #f4f6f9;font-size:13px;display:grid;align-items:center} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-table-row:last-child{border-bottom:none} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-estado-pill{font-size:11px;font-weight:600;border-radius:5px;padding:3px 9px;display:inline-block} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-link{font-size:11.5px;font-weight:700;color:var(--accent);cursor:pointer} /* ── Documentos (lista simple, Expediente) ── */ :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-doc-row{display:flex;align-items:center;gap:13px;padding:12px 20px;border-bottom:1px solid #f4f6f9} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-doc-row:last-child{border-bottom:none} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-doc-icon{width:34px;height:34px;border-radius:8px;background:var(--accent-light);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0} /* ── Timeline (Historial) ── */ :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv360-tl-card{box-shadow:none;border-color:#e5e8ee;border-radius:10px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv360-timeline-wrap::before{background:#e8ebf1} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv360-tl-dot{border:2px solid #fff} /* ── Sidebar (Alertas legales / Actividad reciente) ── */ :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv360-sidebar-card{background:#fff;border:1px solid #e5e8ee;border-radius:12px;box-shadow:none;overflow:hidden;margin-bottom:0} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv360-sidebar-card-header{padding:13px 16px;border-bottom:1px solid #eef1f5} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv360-sidebar-card-title{color:#475569} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-alert-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid #f4f6f9} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-alert-row:last-child{border-bottom:none} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-alert-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-alert-title{font-size:12.5px;font-weight:600;color:#1e293b} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-alert-meta{font-size:11px;color:#94a3b8;font-variant-numeric:tabular-nums} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-count-pill{font-size:11px;font-weight:700;color:#fff;background:#dc2626;border-radius:20px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;padding:0 5px} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-activity-row{display:flex;gap:9px;padding:6px 0} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-activity-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-activity-title{font-size:12px;font-weight:600;color:#1e293b} :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-activity-date{font-size:11px;color:#94a3b8} /* ── Directorio de Funcionarios — tabla plana sobre el nuevo hv2-table-wrap ── */ #view-funcionarios .fdir-v3-table-card{background:none;backdrop-filter:none;-webkit-backdrop-filter:none} #view-funcionarios .fdir-v3-table thead tr{background:#f8fafc;border-bottom:1px solid #eef1f5} #view-funcionarios .fdir-v3-table th{color:#94a3b8;letter-spacing:.3px} #view-funcionarios .fdir-v3-table td{border-bottom:1px solid #f4f6f9} #view-funcionarios .fdir-v3-row:hover{background:#f8fafc} #view-funcionarios .fdir-footer{background:#f8fafc;border-top:1px solid #eef1f5;display:flex;align-items:center;justify-content:space-between;padding:12px 20px} /* ── Accessibility: prefers-reduced-motion ── */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} :is(.sk-line,.sk-avatar){animation:none!important;opacity:.6} .loading-spinner{animation-duration:.7s!important} }