/* =========================================================================
   SigneWeb - hoja de estilos unica
   Tinta de manifiesto sobre papel frio. Cifras tabulares en todo lo que
   sea dinero: en una tabla de 30 renglones la alineacion de digitos es
   legibilidad, no adorno.
   ========================================================================= */

:root{
  --tinta:      #17233B;
  --tinta-70:   #4A566E;
  --tinta-45:   #7C869B;
  --papel:      #F6F7F9;
  --blanco:     #FFFFFF;
  --linea:      #DCE1E8;
  --linea-sutil:#EDF0F4;
  --sello:      #0E6E6E;
  --sello-osc:  #0A5555;
  --sello-luz:  #E6F2F2;
  --ganancia:   #1B7F4C;
  --bloqueo:    #A8410F;
  --bloqueo-luz:#FBEEE7;
  --alerta:     #B3261E;

  --r: 6px;
  --sombra: 0 1px 2px rgba(23,35,59,.06), 0 4px 12px rgba(23,35,59,.05);
  --display: "Zilla Slab", Georgia, "Times New Roman", serif;
  --texto: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

*{ box-sizing:border-box; }

body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--texto); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; margin:0 0 .4em; letter-spacing:-.01em; }
h1{ font-size:24px; } h2{ font-size:19px; } h3{ font-size:16px; }

a{ color:var(--sello); text-decoration:none; }
a:hover{ text-decoration:underline; }

.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ---------------------------------------------------------------- cascaron */
.app{ display:flex; min-height:100vh; }

.lateral{
  width:212px; flex:0 0 212px; background:var(--tinta); color:#C7D0DE;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.marca{ padding:20px 18px 16px; border-bottom:1px solid rgba(255,255,255,.09); }
.marca b{ font-family:var(--display); font-size:19px; color:#fff; display:block; letter-spacing:-.01em; }
.marca span{ font-size:11px; color:#8797B0; letter-spacing:.06em; text-transform:uppercase; }

.menu{ padding:10px 0; flex:1; overflow-y:auto; }
.menu .grupo{
  padding:14px 18px 6px; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:#6E7F99;
}
.menu a{
  display:block; padding:8px 18px; color:#C7D0DE; font-size:13.5px;
  border-left:3px solid transparent; text-decoration:none;
}
.menu a:hover{ background:rgba(255,255,255,.05); color:#fff; }
.menu a.activo{ background:rgba(255,255,255,.08); color:#fff; border-left-color:var(--sello); }

.pie-lateral{ padding:14px 18px; border-top:1px solid rgba(255,255,255,.09); font-size:12px; }
.pie-lateral .quien{ color:#fff; font-weight:500; }
.pie-lateral .rol{ color:#8797B0; font-size:11px; }
.pie-lateral button{
  margin-top:8px; background:none; border:1px solid rgba(255,255,255,.22);
  color:#C7D0DE; padding:4px 10px; border-radius:var(--r); cursor:pointer; font:inherit; font-size:12px;
}
.pie-lateral button:hover{ background:rgba(255,255,255,.09); color:#fff; }

.contenido{ flex:1; min-width:0; display:flex; flex-direction:column; }
.barra{
  background:var(--blanco); border-bottom:1px solid var(--linea);
  padding:14px 24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.barra h1{ margin:0; flex:1; }
.lienzo{ padding:22px 24px 60px; }

/* ------------------------------------------------------------------ piezas */
.tarjeta{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r); box-shadow:var(--sombra); margin-bottom:18px;
}
.tarjeta > h2, .tarjeta > .cab{
  padding:13px 16px; border-bottom:1px solid var(--linea-sutil);
  font-size:14px; font-family:var(--texto); font-weight:600; margin:0;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.tarjeta .cuerpo{ padding:16px; }

.rejilla{ display:grid; gap:14px; }
.rejilla.c4{ grid-template-columns:repeat(4,1fr); }
.rejilla.c3{ grid-template-columns:repeat(3,1fr); }
.rejilla.c2{ grid-template-columns:repeat(2,1fr); }

.indicador{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r); padding:14px 16px; }
.indicador .rotulo{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--tinta-45); }
.indicador .cifra{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:23px; font-weight:600; margin-top:4px; }
.indicador .cifra.verde{ color:var(--ganancia); }

/* ------------------------------------------------------------- formularios */
label{ display:block; font-size:12px; color:var(--tinta-70); margin-bottom:4px; font-weight:500; }
input[type=text],input[type=password],input[type=number],input[type=date],input[type=email],select,textarea{
  width:100%; padding:7px 9px; border:1px solid var(--linea); border-radius:var(--r);
  font:inherit; font-size:13.5px; color:var(--tinta); background:var(--blanco);
}
input[type=number]{ font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--sello); outline-offset:-1px; border-color:var(--sello); }
input:disabled,select:disabled{ background:var(--linea-sutil); color:var(--tinta-45); }
.campo{ margin-bottom:12px; }
.pista{ font-size:11.5px; color:var(--tinta-45); margin-top:3px; }

.boton{
  display:inline-block; padding:7px 15px; border-radius:var(--r); border:1px solid transparent;
  font:inherit; font-size:13.5px; font-weight:500; cursor:pointer; background:var(--sello); color:#fff;
  text-decoration:none; white-space:nowrap;
}
.boton:hover{ background:var(--sello-osc); text-decoration:none; color:#fff; }
.boton.suave{ background:var(--blanco); color:var(--tinta); border-color:var(--linea); }
.boton.suave:hover{ background:var(--papel); color:var(--tinta); }
.boton.riesgo{ background:var(--blanco); color:var(--alerta); border-color:#E9C9C7; }
.boton.riesgo:hover{ background:#FCF2F1; color:var(--alerta); }
.boton:disabled{ opacity:.5; cursor:not-allowed; }
.boton.chico{ padding:4px 9px; font-size:12.5px; }

/* ------------------------------------------------------------------ tablas */
.tabla-marco{ overflow:auto; max-height:none; }
table.datos{ width:100%; border-collapse:collapse; font-size:13px; }
table.datos th{
  background:var(--papel); text-align:left; padding:8px 10px; font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-70); font-weight:600;
  border-bottom:1px solid var(--linea); white-space:nowrap; position:sticky; top:0; z-index:2;
}
table.datos td{ padding:7px 10px; border-bottom:1px solid var(--linea-sutil); vertical-align:middle; }
table.datos tbody tr:hover{ background:#FBFCFD; }
table.datos td.n, table.datos th.n{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
table.datos tfoot td{ border-top:2px solid var(--linea); font-weight:600; background:var(--papel); }
.vacio{ padding:34px 16px; text-align:center; color:var(--tinta-45); }
.vacio p{ margin:0 0 12px; }

/* ---------------------------------------------------------------- etiquetas */
.marca-estado{
  display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px;
  font-weight:600; letter-spacing:.03em; text-transform:uppercase;
}
.marca-estado.abierta{ background:var(--sello-luz); color:var(--sello-osc); }
.marca-estado.transferida{ background:var(--bloqueo-luz); color:var(--bloqueo); }
.marca-estado.anulada{ background:#EEF0F3; color:var(--tinta-45); }

.aviso{ padding:11px 14px; border-radius:var(--r); margin-bottom:16px; font-size:13.5px; border:1px solid; }
.aviso.ok{ background:var(--sello-luz); border-color:#B9DBDB; color:var(--sello-osc); }
.aviso.mal{ background:#FCF2F1; border-color:#E9C9C7; color:var(--alerta); }
.aviso.ojo{ background:var(--bloqueo-luz); border-color:#EED6C7; color:var(--bloqueo); }

/* ================================================================
   LA CASCADA DE COSTO - el elemento distintivo del sistema.
   El Excel esconde entre columnas como se arma el costo unitario;
   aqui se despliega debajo del renglon con una barra proporcional
   que muestra cuanto pesa cada componente.
   ================================================================ */
tr.cascada > td{ background:#FBFCFD; padding:0; border-bottom:1px solid var(--linea); }
.cascada-caja{ padding:14px 16px 16px 40px; }
.cascada-titulo{
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta-45); margin-bottom:10px;
}
.cascada-barra{ display:flex; height:24px; border-radius:4px; overflow:hidden; margin-bottom:9px; background:var(--linea-sutil); }
.cascada-barra span{ display:block; height:100%; }
.tramo-merc{ background:var(--tinta); }
.tramo-imp{ background:var(--tinta-45); }
.tramo-gind{ background:var(--sello); }
.tramo-env{ background:#7FBEBE; }

.cascada-lista{ display:flex; flex-wrap:wrap; gap:18px; font-size:12.5px; }
.cascada-lista .item{ display:flex; align-items:center; gap:6px; }
.cascada-lista .punto{ width:9px; height:9px; border-radius:2px; flex:0 0 auto; }
.cascada-lista .val{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; }
.cascada-lista .igual{ margin-left:auto; padding-left:18px; border-left:1px solid var(--linea); }

.btn-cascada{
  background:none; border:1px solid var(--linea); border-radius:4px; cursor:pointer;
  color:var(--tinta-45); width:22px; height:22px; padding:0; line-height:1; font-size:13px;
}
.btn-cascada:hover{ border-color:var(--sello); color:var(--sello); }
.btn-cascada[aria-expanded=true]{ background:var(--sello); border-color:var(--sello); color:#fff; }

/* ---------------------------------------------------------------- captura */
.grid-captura input, .grid-captura select{ padding:5px 7px; font-size:13px; }
.grid-captura td{ padding:4px 6px; }
.grid-captura .ancho-ref{ min-width:210px; }
.col-calc{ background:#FCFCFD; color:var(--tinta-70); }

/* ----------------------------------------------------------------- ingreso */
.ingreso{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:linear-gradient(160deg,#17233B 0%,#0E1A2E 60%,#0A5555 190%);
}
.ingreso-caja{ width:100%; max-width:376px; background:var(--blanco); border-radius:10px; padding:32px; box-shadow:0 18px 48px rgba(0,0,0,.3); }
.ingreso-caja .marca-t{ font-family:var(--display); font-size:27px; margin:0; letter-spacing:-.02em; }
.ingreso-caja .marca-s{ color:var(--tinta-45); font-size:12.5px; margin:2px 0 24px; }
.ingreso-caja .boton{ width:100%; padding:9px; margin-top:6px; }

/* ------------------------------------------------------------- impresion */
@media print{
  .lateral,.barra .acciones,.no-imprimir{ display:none !important; }
  .app{ display:block; } .lienzo{ padding:0; }
  .tarjeta{ border:none; box-shadow:none; }
  body{ background:#fff; font-size:11px; }
  table.datos th{ position:static; }
}

/* ------------------------------------------------------------- responsivo */
@media (max-width:960px){
  .rejilla.c4{ grid-template-columns:repeat(2,1fr); }
  .rejilla.c3,.rejilla.c2{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .app{ flex-direction:column; }
  .lateral{ width:100%; flex:none; height:auto; position:static; }
  .menu{ display:flex; flex-wrap:wrap; padding:6px; }
  .menu .grupo{ display:none; }
  .menu a{ border-left:none; border-bottom:3px solid transparent; padding:8px 12px; }
  .menu a.activo{ border-left:none; border-bottom-color:var(--sello); }
  .lienzo{ padding:14px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}