/* =============================================================================
   CONTROL DE LIQUIDACIONES · estilos
   Mismo lenguaje visual del panel de obras (vidrio, Plus Jakarta Sans, Chispi).
   creador: a.Wong.la - l.a.aguilar.wong@gmail.com
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --fondo:#eef1f8; --tinta:#1f2544; --tinta2:#4b5577; --tinta3:#8a92b2;
  --vidrio:rgba(255,255,255,.62); --vidrio2:rgba(255,255,255,.82); --vidrio-borde:rgba(255,255,255,.9);
  --linea:rgba(31,37,68,.08); --linea2:rgba(31,37,68,.14);
  --sombra:0 12px 32px -14px rgba(30,41,90,.22),0 2px 6px rgba(30,41,90,.04);
  --indigo:#6366f1; --cielo:#0ea5e9; --verde:#10b981; --ambar:#f59e0b; --rosa:#f43f5e; --violeta:#8b5cf6;
  --radio:18px; --radio2:12px; --menu:228px;
  --fuente:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:13px/1.45 var(--fuente);color:var(--tinta);background:var(--fondo);min-height:100vh;font-variant-numeric:tabular-nums;overflow-x:hidden}
body::before{content:'';position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 32% at 8% 6%,rgba(99,102,241,.20),transparent 70%),
             radial-gradient(34% 30% at 96% 14%,rgba(14,165,233,.18),transparent 70%),
             radial-gradient(40% 34% at 85% 92%,rgba(236,72,153,.11),transparent 70%),
             radial-gradient(36% 30% at 12% 88%,rgba(250,204,21,.14),transparent 70%)}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
[hidden]{display:none!important}
.vidrio{background:var(--vidrio);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--vidrio-borde);box-shadow:var(--sombra),inset 0 1px 0 rgba(255,255,255,.9)}

/* ---------------------------------------------------------------- cargando */
body.cargando .app{visibility:hidden}
.pantalla-carga{position:fixed;inset:0;display:grid;place-items:center;z-index:100;color:var(--tinta3);font-weight:600}
body:not(.cargando) .pantalla-carga{display:none}
.giro{width:30px;height:30px;border-radius:50%;border:3px solid rgba(99,102,241,.2);border-top-color:var(--indigo);animation:girar .8s linear infinite;margin:0 auto 10px}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- estructura */
.app{display:grid;grid-template-columns:var(--menu) minmax(0,1fr);min-height:100vh}
.menu{position:sticky;top:0;height:100vh;padding:12px 0 12px 12px;display:flex}
.menu-in{flex:1;border-radius:22px;padding:14px 10px;display:flex;flex-direction:column;gap:4px;overflow:auto}
.marca{display:flex;align-items:center;gap:10px;padding:2px 6px 12px;border-bottom:1px solid var(--linea);margin-bottom:8px}
.logo{width:38px;height:38px;border-radius:12px;overflow:hidden;flex-shrink:0;background:linear-gradient(145deg,#2b2b33,#111114);
  box-shadow:0 6px 16px -6px rgba(245,158,11,.7),inset 0 1px 0 #fff;display:grid;place-items:center}
.logo img{width:150%;height:150%;object-fit:cover;object-position:46% 22%;margin-top:16px}
.marca b{display:block;font-size:13px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.marca small{font-size:10.5px;color:var(--tinta3);font-weight:600}
.menu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:11px;color:var(--tinta2);font-weight:700;font-size:12.5px;text-decoration:none}
.menu a:hover{background:rgba(31,37,68,.06);color:var(--tinta)}
.menu a.activo{background:#fff;color:var(--indigo);box-shadow:0 3px 10px -4px rgba(30,41,90,.25)}
.menu a .ico{width:20px;text-align:center}
.menu .grupo{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta3);padding:10px 10px 2px}
.menu .pie-menu{margin-top:auto;padding-top:10px;border-top:1px solid var(--linea);font-size:11px;color:var(--tinta3)}
.usuario-menu{padding:4px 6px 8px}
.usuario-menu b{display:block;color:var(--tinta);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etiqueta-rol{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:1px 7px;border-radius:6px;background:rgba(99,102,241,.12);color:var(--indigo);margin-top:3px}

.contenido{min-width:0;padding:12px 14px 40px}
.barra{position:sticky;top:12px;z-index:20;border-radius:18px;padding:9px 12px;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.barra h1{font-size:15px;font-weight:800;letter-spacing:-.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra h1 small{font-size:11px;font-weight:600;color:var(--tinta3);margin-left:6px}
.btn.boton-menu{display:none}
.pie{color:var(--tinta3);font-size:11px;text-align:center;padding:22px 10px 6px}
.pie .credito{display:block;margin-top:3px;font-weight:700;color:var(--indigo)}

/* ---------------------------------------------------------------- tarjetas */
.tarjeta{border-radius:var(--radio);padding:14px 16px;margin-bottom:12px}
.tarjeta h2{font-size:13.5px;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.tarjeta h2 .der{margin-left:auto;display:flex;gap:6px}
.ayuda{font-size:11.5px;color:var(--tinta3)}
.rejilla{display:grid;gap:12px;grid-template-columns:repeat(12,minmax(0,1fr))}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
.kpis{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:12px}
.kpi{border-radius:16px;padding:12px 14px;position:relative;overflow:hidden}
.kpi span{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta3)}
.kpi b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.kpi small{font-size:11px;color:var(--tinta2)}
.kpi::after{content:'';position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;background:var(--k,var(--indigo));opacity:.12}
.lienzo{position:relative;height:250px}

/* ---------------------------------------------------------------- botones y formularios */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--linea2);background:var(--vidrio2);
  border-radius:10px;padding:6px 11px;font-size:12px;font-weight:700;white-space:nowrap;min-height:32px;color:var(--tinta);transition:transform .12s,box-shadow .2s,background .2s}
.btn:hover{background:#fff;box-shadow:0 4px 12px -6px rgba(30,41,90,.3)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primario{background:linear-gradient(135deg,#6366f1,#0ea5e9);color:#fff;border-color:transparent;box-shadow:0 8px 18px -8px rgba(99,102,241,.7)}
.btn-primario:hover{background:linear-gradient(135deg,#5558ee,#0b96d6);color:#fff}
.btn-peligro{color:#e11d48;border-color:rgba(244,63,94,.35)}
.btn-peligro:hover{background:#fff1f2}
.btn-chico{min-height:26px;padding:3px 8px;font-size:11px;border-radius:8px}
.campos{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.campo{display:flex;flex-direction:column;gap:3px}
.campo.ancho{grid-column:1/-1}
.campo label{font-size:11px;font-weight:700;color:var(--tinta2)}
.campo label .req{color:var(--rosa)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{
  width:100%;background:rgba(255,255,255,.92);border:1px solid var(--linea2);border-radius:9px;padding:6px 9px;font-size:12.5px;min-height:32px}
textarea{min-height:64px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.campo.error input,.campo.error select,.campo.error textarea{border-color:var(--rosa);box-shadow:0 0 0 3px rgba(244,63,94,.12)}
.campo .msg-error{font-size:10.5px;color:var(--rosa);font-weight:600;min-height:0}
.casilla{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600}
.casilla input{width:15px;height:15px;accent-color:var(--indigo)}
.acciones{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}

/* ---------------------------------------------------------------- tabla de datos */
.td-barra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.td-barra input[type=search]{max-width:260px}
.td-barra select{width:auto;max-width:200px}
.td-barra .td-info{margin-left:auto;font-size:11.5px;color:var(--tinta3);font-weight:600}
.td-marco{overflow:auto;border-radius:12px;border:1px solid var(--linea2);background:rgba(255,255,255,.85);max-height:calc(100vh - 260px)}
table.td{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
.td th{position:sticky;top:0;z-index:1;background:#f4f6fb;color:var(--tinta2);font-weight:800;font-size:11px;text-align:left;padding:7px 9px;border-bottom:1px solid var(--linea2);white-space:nowrap;user-select:none}
.td th.ordenable{cursor:pointer}
.td th.ordenable:hover{color:var(--indigo)}
.td th .flecha{font-size:9px;margin-left:3px;color:var(--indigo)}
.td td{padding:5px 9px;border-bottom:1px solid var(--linea);white-space:nowrap;max-width:360px;overflow:hidden;text-overflow:ellipsis}
.td tbody tr:hover td{background:rgba(99,102,241,.05)}
.td tbody tr.sel td{background:rgba(99,102,241,.12)}
.td .num{text-align:right}
.td tfoot td{position:sticky;bottom:0;background:#f4f6fb;font-weight:800;border-top:1px solid var(--linea2)}
.td .vacio{text-align:center;color:var(--tinta3);padding:26px}
.td-pag{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:8px;font-size:11.5px;color:var(--tinta2)}
.td-pag select{width:auto}
.negativo{color:var(--rosa);font-weight:700}
.chip{display:inline-block;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:800;background:rgba(31,37,68,.07);color:var(--tinta2)}
.chip.ok{background:rgba(16,185,129,.14);color:#047857}
.chip.alerta{background:rgba(245,158,11,.16);color:#b45309}
.chip.mal{background:rgba(244,63,94,.13);color:#be123c}
.chip.info{background:rgba(99,102,241,.13);color:#4338ca}

/* ---------------------------------------------------------------- avisos y modales */
#avisos{position:fixed;right:14px;bottom:14px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 28px))}
.aviso{border-radius:13px;padding:10px 13px;font-size:12.5px;font-weight:600;box-shadow:var(--sombra);background:#fff;border-left:4px solid var(--indigo);animation:entrar .25s ease}
.aviso.exito{border-left-color:var(--verde)}
.aviso.error{border-left-color:var(--rosa)}
.aviso.alerta{border-left-color:var(--ambar)}
@keyframes entrar{from{opacity:0;transform:translateY(8px)}}
.fondo-modal{position:fixed;inset:0;z-index:150;background:rgba(31,37,68,.35);backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px}
.modal{width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 30px 60px -20px rgba(30,41,90,.45);padding:16px 18px}
.modal h3{font-size:14.5px;font-weight:800;margin-bottom:10px}
.modal p{color:var(--tinta2)}

/* ---------------------------------------------------------------- login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-caja{width:min(400px,100%);border-radius:24px;padding:22px 22px 18px}
.login-caja .marca{border:0;justify-content:center;flex-direction:column;text-align:center;padding-bottom:4px}
.login-caja .logo{width:64px;height:64px;border-radius:18px}
.login-caja .marca b{font-size:16px}
.login-caja form{display:flex;flex-direction:column;gap:11px;margin-top:12px}
.login-caja .btn{min-height:38px}
.mensaje{border-radius:11px;padding:9px 11px;font-size:12px;font-weight:600}
.mensaje.error{background:#fff1f2;color:#be123c;border:1px solid rgba(244,63,94,.25)}
.mensaje.info{background:#eef2ff;color:#4338ca;border:1px solid rgba(99,102,241,.25)}

/* ---------------------------------------------------------------- subir documentos */
.zona-archivo{display:block;border:2px dashed rgba(99,102,241,.35);border-radius:16px;padding:22px;text-align:center;background:rgba(255,255,255,.5);cursor:pointer;transition:background .2s}
.zona-archivo.encima,.zona-archivo:hover{background:rgba(99,102,241,.07)}
.zona-archivo b{display:block;font-size:13.5px}
.mapa{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.mapa .campo{background:rgba(255,255,255,.7);border:1px solid var(--linea);border-radius:10px;padding:7px 9px}
.mapa .casilla{flex-direction:row;align-items:center}
.barra-progreso{height:8px;border-radius:99px;background:rgba(31,37,68,.08);overflow:hidden}
.barra-progreso i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6366f1,#0ea5e9);transition:width .2s}

/* ---------------------------------------------------------------- Chispi */
.chispi{position:fixed;right:16px;bottom:12px;z-index:90;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.chispi img{width:50px;height:62px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(30,41,90,.25));pointer-events:auto;cursor:pointer;animation:flotar 3.2s ease-in-out infinite}
.chispi .globo{pointer-events:auto;max-width:250px;background:#fff;border-radius:14px 14px 4px 14px;padding:8px 11px;font-size:11.5px;font-weight:600;color:var(--tinta2);box-shadow:var(--sombra);opacity:0;transform:translateY(6px);transition:.25s}
.chispi.habla .globo{opacity:1;transform:none}
@keyframes flotar{50%{transform:translateY(-5px)}}
#avisos{bottom:86px}

/* ---------------------------------------------------------------- responsivo */
@media (max-width:1100px){.c3,.c4,.c5{grid-column:span 6}.c7,.c8{grid-column:span 12}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .menu{position:fixed;inset:0 auto 0 0;width:min(270px,85vw);z-index:120;transform:translateX(-105%);transition:transform .25s;padding:10px}
  body.menu-abierto .menu{transform:none}
  body.menu-abierto::after{content:'';position:fixed;inset:0;background:rgba(31,37,68,.3);z-index:110}
  .btn.boton-menu{display:inline-flex}
  .rejilla>*{grid-column:span 12!important}
  .td-barra input[type=search]{max-width:none;flex:1 1 100%}
  .td-marco{max-height:none}
  .chispi img{width:40px;height:50px}
}
@media print{.menu,.barra .btn,.chispi,#avisos,.td-barra,.td-pag{display:none!important}.app{display:block}}