/* Nivela — demo estática. Tokens y componentes compartidos */
:root{--lima:#C5F542;--lima-intenso:#B2E52E;--lima-suave:#EEF8D5;--carbon:#202321;--gris:#666D67;--gris-claro:#8A918B;--borde:#DDE2D8;--fondo:#F5F4EF;--blanco:#FFFFFF;--font:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--fondo);color:var(--carbon);font-family:var(--font);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,p{margin:0}
img{display:block;max-width:100%}
button{font-family:inherit}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Botones e inputs */
.nv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border:0;border-radius:10px;background:var(--lima);color:var(--carbon);font:700 14px/1 var(--font);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s}
.nv-btn:hover{background:var(--lima-intenso)}
.nv-btn:disabled{opacity:.6;cursor:default}
.nv-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--borde);border-radius:10px;background:var(--blanco);color:var(--carbon);font:600 14px/1 var(--font);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s}
.nv-btn-ghost:hover{background:var(--fondo);border-color:#C9CFC4}
.nv-btn-sm{height:34px;padding:0 12px;font-size:13px}
.nv-btn-danger{color:#8E2A20;border-color:#F3C4BE}
.nv-btn-danger:hover{background:#FDECEA}
.nv-btn-red{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border:0;border-radius:10px;background:#B3261E;color:#fff;font:700 14px/1 var(--font);cursor:pointer}
.nv-btn-red:disabled{background:#E8B4AF;cursor:not-allowed}
.nv-input{width:100%;height:44px;padding:0 14px;border:1px solid var(--borde);border-radius:10px;background:var(--blanco);color:var(--carbon);font:500 14px/1 var(--font);outline:none;transition:border-color .15s,box-shadow .15s}
.nv-input::placeholder{color:var(--gris-claro)}
.nv-input:focus{border-color:var(--carbon);box-shadow:0 0 0 3px var(--lima-suave)}
.nv-input.is-error{border-color:#C0392B}
textarea.nv-input{height:auto;padding:10px 14px;resize:vertical;line-height:1.45}
.nv-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666D67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}
.nv-search{height:40px;padding-left:40px;background:var(--fondo);border-color:var(--fondo)}
.nv-search:focus{background:var(--blanco)}
.nv-check{width:18px;height:18px;accent-color:var(--carbon);margin:0;cursor:pointer}
.nv-card{background:var(--blanco);border:1px solid var(--borde);border-radius:14px}
.nv-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--lima-suave);color:var(--carbon);font:600 12px/1 var(--font);white-space:nowrap;border:0;cursor:default}
.nv-tag-gray{background:var(--fondo);color:var(--gris)}
.nv-tag-dark{background:var(--carbon);color:var(--fondo)}
.nv-tag-warn{background:#FFF1D6;color:#7A4B00}
button.nv-tag{cursor:pointer;height:28px}
.nv-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 10px;border-radius:999px;background:var(--lima-suave);color:var(--carbon);font:600 13px/1 var(--font)}
.nv-chip button{width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:var(--gris);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.nv-chip button:hover{background:var(--lima);color:var(--carbon)}
.nv-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--borde);border-radius:10px;background:var(--blanco);color:var(--carbon);cursor:pointer;text-decoration:none;position:relative}
.nv-icon:hover{background:var(--fondo)}
.nv-icon.is-open{background:var(--lima-suave);border-color:var(--lima-intenso)}
.nv-icon-sm{width:32px;height:32px;border-color:transparent;color:var(--gris)}
.nv-icon-sm:hover{background:var(--lima-suave);color:var(--carbon)}
.nv-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;font-weight:800;flex-shrink:0}
.nv-avatar img{width:100%;height:100%;object-fit:cover}
.nv-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--carbon);font:600 13px/1 var(--font);cursor:pointer;text-align:left;text-decoration:none}
.nv-menu-item:hover{background:var(--fondo)}
.nv-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:140px;border:2px dashed #C9CFC4;border-radius:12px;background:var(--fondo);color:var(--gris);font:500 13px/1.4 var(--font);text-align:center;cursor:pointer;position:relative;padding:16px}
.nv-drop:hover{border-color:var(--lima-intenso);background:var(--lima-suave);color:var(--carbon)}
.nv-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.nv-table{width:100%;border-collapse:collapse;font-size:14px}
.nv-table th{text-align:left;font-size:12px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.04em;padding:12px 16px;border-bottom:1px solid var(--borde);white-space:nowrap}
.nv-table td{padding:14px 16px;border-bottom:1px solid #EEF0EA;vertical-align:middle}
.nv-table tr:last-child td{border-bottom:0}
.nv-table tbody tr:hover td{background:#FAFAF7}
.nv-modal-bg{position:fixed;inset:0;background:rgba(32,35,33,.45);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.nv-modal{width:100%;max-width:640px;max-height:92vh;overflow:auto;background:var(--blanco);border-radius:16px;box-shadow:0 24px 60px rgba(32,35,33,.25)}
.nv-form{display:flex;flex-direction:column;gap:18px;padding:28px}
.nv-field{display:flex;flex-direction:column;gap:8px}
.nv-label{font-size:13px;font-weight:700}
.nv-hint{font-size:12px;color:var(--gris-claro)}
.nv-alert{padding:12px 14px;border-radius:10px;background:#FDECEA;border:1px solid #F3C4BE;color:#8E2A20;font-size:13px;line-height:1.45}
.nv-ok{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:var(--lima-suave);font-size:13px;font-weight:600}
.nv-warn{display:flex;gap:12px;padding:14px;border-radius:12px;background:#FFF1D6;border:1px solid #F0D29A;color:#7A4B00;font-size:13px;line-height:1.45}
.nv-section-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.row{display:flex;align-items:center;gap:10px}
.col{display:flex;flex-direction:column;gap:8px}
.muted{color:var(--gris)}
.small{font-size:12px}

/* Layout app */
.app{min-height:100vh;display:flex}
.nv-side{flex:0 0 260px;background:var(--carbon);color:var(--fondo);display:flex;flex-direction:column;padding:24px 16px;gap:28px;overflow:hidden;transition:flex-basis .25s ease}
.nv-side.is-collapsed{flex-basis:80px}
.nv-side.is-collapsed .nv-label{display:none}
.nv-side.is-collapsed .nv-nav{justify-content:center;padding:0}
.nv-side.is-collapsed .nv-sec{height:12px;overflow:hidden;color:transparent !important;padding:12px 0 0 !important}
.nv-sec{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-claro);padding:0 14px 8px}
.nv-nav{display:flex;align-items:center;gap:12px;width:100%;height:44px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:#B9BFB9;font:600 14px/1 var(--font);cursor:pointer;text-align:left;text-decoration:none;transition:background .15s,color .15s}
.nv-nav:hover{background:rgba(255,255,255,.07);color:var(--fondo)}
.nv-nav.is-active{background:var(--brand,#0285B5);color:var(--brand-ink,#F5F4EF)}
.nv-pin{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--gris-claro);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto}
.nv-pin:hover{background:rgba(255,255,255,.08);color:var(--fondo)}
.nv-pin.is-on{color:var(--lima)}
.nv-content{flex:1;min-width:0;display:flex;flex-direction:column}
.nv-header{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:16px 32px;background:var(--blanco);border-bottom:1px solid var(--borde)}
.nv-header h1{font-size:20px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.nv-user{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 10px 0 4px;border:1px solid var(--borde);border-radius:999px;background:var(--blanco);cursor:pointer;color:inherit}
.nv-user:hover{background:var(--fondo)}
.nv-user.is-open{border-color:var(--lima-intenso);background:var(--lima-suave)}
.nv-pop{position:absolute;top:48px;right:0;background:var(--blanco);border:1px solid var(--borde);border-radius:14px;box-shadow:0 16px 40px rgba(32,35,33,.16);z-index:40;display:flex;flex-direction:column;overflow:hidden}
.page{padding:32px;display:flex;flex-direction:column;gap:24px}
.page h2{font-size:26px;font-weight:800;letter-spacing:-.02em}
.page-sub{font-size:14px;color:var(--gris)}

/* Proyectos */
.nv-proj{display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--borde);border-radius:14px;overflow:hidden;cursor:pointer;text-align:left;padding:0;color:inherit;transition:border-color .15s,box-shadow .15s,transform .1s}
.nv-proj:hover{border-color:var(--lima-intenso);box-shadow:0 8px 24px rgba(32,35,33,.08);transform:translateY(-2px)}
.nv-proj-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:280px;background:transparent;border:2px dashed #C9CFC4;border-radius:14px;cursor:pointer;color:var(--gris);font:600 14px/1 var(--font)}
.nv-proj-new:hover{border-color:var(--lima-intenso);background:var(--lima-suave);color:var(--carbon)}
.nv-swatch{width:36px;height:36px;border-radius:10px;border:2px solid transparent;cursor:pointer;padding:0}
.nv-swatch.is-on{border-color:var(--carbon);box-shadow:0 0 0 2px #fff inset}
.nv-pay{display:flex;align-items:center;gap:16px;padding:16px;width:100%;border:1px solid var(--borde);border-radius:12px;background:var(--blanco);cursor:pointer;text-align:left;color:inherit}
.nv-pay:hover{border-color:var(--lima-intenso)}
.nv-pay.is-on{border-color:var(--carbon);box-shadow:0 0 0 2px var(--lima)}

/* Documentos */
.nv-tree{display:flex;align-items:center;gap:6px;width:100%;height:36px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--carbon);font:600 13px/1 var(--font);cursor:pointer;text-align:left;white-space:nowrap}
.nv-tree:hover{background:var(--fondo)}
.nv-tree.is-on{background:var(--lima-suave)}
.nv-caret{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--gris-claro);flex-shrink:0;border-radius:4px}
.nv-caret:hover{background:var(--borde);color:var(--carbon)}
.nv-row{display:grid;grid-template-columns:minmax(160px,1fr) 60px 150px 100px 130px 72px;align-items:center;gap:12px;padding:0 16px;height:52px;border-bottom:1px solid #EEF0EA;font-size:13px}
.nv-row-head{height:40px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gris);border-bottom:1px solid var(--borde);background:#FAFAF7}
.nv-file{cursor:pointer}
.nv-file:hover{background:#FAFAF7}
.nv-file.is-on{background:var(--lima-suave)}
.nv-ft{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;font:800 10px/1 var(--font);letter-spacing:.02em;color:#fff;flex-shrink:0}
.viewer{position:fixed;inset:0;background:var(--carbon);z-index:60;display:flex;flex-direction:column}
.viewer-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:12px 20px;background:var(--blanco);border-bottom:1px solid var(--borde)}
.viewer-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 20px;background:#2B2E2C;color:#B9BFB9;font-size:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.viewer-ctl button{height:30px;min-width:30px;padding:0 8px;border:0;border-radius:6px;background:rgba(255,255,255,.08);color:var(--fondo);cursor:pointer;font:700 13px/1 var(--font);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.viewer-ctl button.is-on{background:var(--lima);color:var(--carbon)}
.viewer-ctl .sep{width:1px;height:18px;background:rgba(255,255,255,.15);margin:0 4px}
.viewer-canvas{flex:1;overflow:auto;padding:28px;display:flex;justify-content:center;align-items:flex-start}
.doc-anchor{position:relative;cursor:crosshair}
.pin{position:absolute;transform:translate(-50%,-100%);width:26px;height:30px;border:0;background:transparent;padding:0;cursor:pointer;z-index:2}
.comments{flex:0 0 360px;background:var(--blanco);border-left:1px solid var(--borde);display:flex;flex-direction:column;min-height:0}
.comment{display:flex;gap:10px;padding:10px;margin:0 -10px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.comment.is-on{background:var(--lima-suave);border-color:var(--lima-intenso)}
.pinnum{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--carbon);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;background:#fff}
.xl td{border:1px solid var(--borde);padding:6px 8px;cursor:cell;position:relative}
.xl td.rowh{background:var(--fondo);color:var(--gris);text-align:center;font-size:11px;cursor:default}
.xl td.has::after{content:"";position:absolute;top:0;right:0;border-top:9px solid var(--lima);border-left:9px solid transparent}
.xl td.is-on{box-shadow:inset 0 0 0 2px var(--carbon);background:var(--lima-suave)}
.xl td.is-focus{box-shadow:inset 0 0 0 2px var(--lima-intenso);background:var(--lima-suave)}
.docsec{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px 10px;margin:0 -10px;border-radius:6px;cursor:pointer;border-left:3px solid transparent}
.docsec.has{background:#FAFCF2;border-left-color:var(--lima)}
.docsec.is-on{background:var(--lima-suave);border-left-color:var(--carbon)}
.docsec.is-focus{background:var(--lima-suave);border-left-color:var(--lima-intenso)}
.docsec .cnt{position:absolute;top:6px;right:8px;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:10px;background:var(--lima);color:var(--carbon);font:800 11px/1 var(--font)}

/* Login */
.login{min-height:100vh;display:flex;flex-wrap:wrap}
.login-brand{flex:1 1 520px;background:var(--carbon);color:var(--fondo);display:flex;flex-direction:column;justify-content:space-between;padding:56px 64px;position:relative;overflow:hidden}
.login-form{flex:1 1 560px;display:flex;align-items:center;justify-content:center;padding:48px 32px}
.login-card{width:100%;max-width:440px;background:var(--blanco);border:1px solid var(--borde);border-radius:16px;padding:40px;box-shadow:0 10px 30px rgba(32,35,33,.06);display:flex;flex-direction:column;gap:28px}
.nv-link{font:600 13px/1 var(--font);color:var(--carbon);text-decoration:none;border-bottom:1px solid var(--borde);padding-bottom:1px}
.nv-link:hover{border-bottom-color:var(--lima)}

@media (max-width:1100px){.nv-row{grid-template-columns:minmax(0,1fr) 60px 130px 72px}.hide-md{display:none !important}}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}.nv-side{display:none}.login-brand{display:none}.comments{display:none}}