/* ============================================================
   ESTILOS DEL SISTEMA DE COMPRAS HESER
   Los colores NO se definen aquí: vienen de paleta.css.
   Este bloque solo traduce los nombres históricos del sistema
   a los tokens de la paleta, y deriva los tonos suaves.
   ============================================================ */
:root{
  --vino-osc: var(--vino-oscuro);
  --tinta: var(--texto);
  --gris: var(--texto-suave);
  --cafe: var(--azul);
  --linea: var(--borde);
  --rojo: var(--estado-critico);
  --naranja: var(--estado-grave);
  --verde: var(--estado-bien);
  --fondo: var(--blanco);   /* fondo de página: blanco puro (oscuro en modo oscuro) */
  --crema: color-mix(in srgb, var(--azul) 5%, var(--blanco));   /* fondos suaves (chips, zebra, fichas) */
  --verde-suave: color-mix(in srgb, var(--estado-bien) 12%, var(--blanco));
  --vino-suave: color-mix(in srgb, var(--vino) 8%, var(--blanco));
  --display:'Fraunces', Georgia, serif;
  --cuerpo:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
html{overflow-x:hidden;}
body{background:var(--fondo); color:var(--tinta); font-family:var(--cuerpo); font-size:15px; line-height:1.45; overflow-x:hidden; width:100%;}
/* Cualquier contenedor con scroll horizontal propio (tablas, pestañas, ítems)
   debe manejarlo internamente; el documento nunca debe scrollear a los lados. */
img{max-width:100%;}
button{font-family:var(--cuerpo); cursor:pointer;}
h1,h2,h3{font-family:var(--display); color:var(--vino); font-weight:600;}

/* ---------- Login ---------- */
#pantallaLogin{position:fixed; inset:0; background:var(--crema); display:flex; align-items:center; justify-content:center; z-index:100;}
.cajaLogin{background:var(--blanco); border:1px solid var(--linea); box-shadow:0 8px 28px rgba(20, 28, 45,.14); border-radius:14px; padding:38px 34px; width:min(360px,92vw); text-align:center;}
.cajaLogin h1{font-size:1.9rem; margin-bottom:2px;}
.cajaLogin .sub{color:var(--gris); margin-bottom:20px; font-size:.88rem;}
.cajaLogin input{width:100%; padding:11px 12px; border:1px solid var(--linea); border-radius:8px; font-size:1rem; margin-bottom:10px;}
.cajaLogin .error{color:var(--rojo); font-size:.85rem; min-height:1.2em; margin-bottom:8px;}

/* ---------- Estructura ---------- */
header.encabezado{background:var(--cafe); color:var(--blanco); padding:14px 22px 0; position:sticky; top:0; z-index:20;}
.tituloApp{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.tituloApp h1{color:var(--blanco); font-size:1.3rem;}
.tituloApp .sub{font-size:.78rem; opacity:.75;}
.tituloApp .quien{margin-left:auto; font-size:.8rem; opacity:.9;}
.tituloApp .cerrar{background:none; border:1px solid rgba(255,255,255,.55); color:var(--blanco); border-radius:6px; padding:4px 12px; font-size:.8rem;}
.btnCampana{position:relative; background:none; border:1px solid rgba(255,255,255,.55); color:var(--blanco); border-radius:6px; padding:4px 10px; font-size:.9rem;}
.btnCampana .punto{position:absolute; top:-6px; right:-6px; background:var(--rojo); color:var(--blanco); border-radius:9px; font-size:.66rem; min-width:16px; line-height:16px; padding:0 4px;}
.msjItem{padding:10px 12px; border-bottom:1px solid var(--linea); font-size:.85rem;}
.msjItem:last-child{border-bottom:none;}
.msjItem.noLeido{background:var(--crema);}
.msjItem .tit{font-weight:700; margin-bottom:2px;}
.msjItem .fecha{color:var(--gris); font-size:.72rem;}
nav.pestanas{display:flex; gap:2px; margin-top:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
nav.pestanas button{background:rgba(20, 28, 45,.22); border:none; color:var(--blanco); padding:9px 15px; border-radius:8px 8px 0 0; font-size:.88rem; white-space:nowrap;}
nav.pestanas button.activa{background:var(--fondo); color:var(--vino); font-weight:600;}
nav.pestanas button .punto{display:inline-block; min-width:18px; padding:0 5px; margin-left:6px; background:var(--rojo); color:var(--blanco); border-radius:9px; font-size:.72rem; line-height:18px;}
main{padding:20px 22px 60px; max-width:1220px; margin:0 auto;}
section.vista{display:none;}
section.vista.activa{display:block;}
.filaTitulo{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.filaTitulo h2{font-size:1.35rem;}
.filaTitulo .acciones{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.notaGris{color:var(--gris); font-size:.85rem; margin-bottom:14px;}

/* ---------- Botones ---------- */
.btn{border:none; border-radius:8px; padding:8px 16px; font-size:.88rem; font-weight:600;}
.btn.primario{background:var(--vino); color:var(--blanco);}
.btn.secundario{background:var(--blanco); color:var(--vino); border:1.5px solid var(--vino);}
.btn.suave{background:var(--crema); color:var(--vino);}
.btn.verde{background:var(--verde); color:var(--blanco);}
.btn.peligro{background:var(--rojo); color:var(--blanco);}
.btn.mini{padding:4px 10px; font-size:.78rem; border-radius:6px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------- Tarjetas ---------- */
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; margin-bottom:22px;}
.tarjeta{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); padding:16px 18px;}
.tarjeta .etiqueta{font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gris); margin-bottom:6px;}
.tarjeta .valor{font-family:var(--display); font-size:1.55rem; color:var(--vino); font-weight:600;}
.tarjeta .detalle{font-size:.8rem; color:var(--gris); margin-top:4px;}
.tarjeta.alerta .valor{color:var(--rojo);}
.tarjeta.pend .valor{color:var(--naranja);}

/* ---------- Alertas ---------- */
.bloqueAlertas{background:var(--blanco); border:1px solid var(--linea); border-left:5px solid var(--naranja); border-radius:var(--radio); padding:16px 18px; margin-bottom:22px;}
.bloqueAlertas h3{font-size:1.05rem; margin-bottom:10px;}
.etiquetasStock{display:flex; flex-wrap:wrap; gap:8px;}
.tagStock{display:inline-flex; align-items:center; gap:8px; background:var(--crema); border-radius:6px; padding:6px 10px; font-size:.84rem;}
.tagStock b{color:var(--vino);}
.tagStock .nivel{width:9px; height:9px; border-radius:50%;}
.nivel.critico{background:var(--rojo);} .nivel.bajo{background:var(--naranja);} .nivel.ok{background:var(--verde);}
.sinAlertas{color:var(--verde); font-weight:600;}

/* ---------- Tablas ---------- */
.contTabla{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); overflow:auto; -webkit-overflow-scrolling:touch; margin-bottom:18px;}
table{width:100%; border-collapse:collapse; font-size:.87rem; min-width:660px;}
thead th{background:var(--vino); color:var(--crema); text-align:left; padding:9px 12px; font-weight:600; white-space:nowrap;}
tbody td{padding:8px 12px; border-bottom:1px solid var(--linea); vertical-align:middle;}
tbody tr:nth-child(even){background:var(--crema);}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;}
td .celdaAcc{display:flex; gap:5px; justify-content:flex-end; flex-wrap:wrap;}
.badge{display:inline-block; padding:2px 9px; border-radius:10px; font-size:.74rem; font-weight:700; color:var(--blanco); white-space:nowrap;}
.badge.ok{background:var(--verde);} .badge.bajo{background:var(--naranja);} .badge.critico{background:var(--rojo);}
.badge.pendiente{background:var(--naranja);} .badge.aprobada{background:var(--verde);}
.badge.rechazada{background:var(--rojo);} .badge.enviada{background:var(--cafe);}
.badge.recibida{background:var(--dato-verde);} .badge.cancelada{background:var(--texto-suave);}
.badge.entrada{background:var(--verde);} .badge.salida{background:var(--rojo);}
.badge.pagado{background:var(--dato-verde);} .badge.anulado{background:var(--texto-suave);} .badge.convertida{background:var(--cafe);}
.badge.baja{background:var(--texto-suave);} .badge.media{background:var(--naranja);} .badge.alta{background:var(--rojo);}
.badge.planificacion{background:var(--texto-suave);} .badge.activo{background:var(--verde);} .badge.cerrado{background:var(--cafe);}
.badge.aprobador{background:var(--vino);} .badge.responsable{background:var(--cafe);} .badge.area{background:var(--cafe);}
.badge.colaborador{background:var(--dato-amarillo);} .badge.bodega{background:var(--dato-verde);} .badge.lectura{background:var(--texto-suave);}
.listaPermisos{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.checkPermiso{display:flex; gap:9px; align-items:flex-start; background:var(--crema); border-radius:8px; padding:9px 11px; font-size:.84rem; cursor:pointer; border:1.5px solid transparent;}
.checkPermiso:has(input:checked){border-color:var(--vino); background:var(--crema);}
.checkPermiso input{margin-top:3px; accent-color:var(--vino); width:15px; height:15px;}
.tagPerm{display:inline-block; background:var(--crema); color:var(--vino); border-radius:6px; padding:1px 7px; font-size:.72rem; font-weight:700; margin:1px 2px 1px 0; white-space:nowrap;}
.vacio{padding:26px; text-align:center; color:var(--gris);}
.comboCaja{position:relative;}
.comboCaja input[type=text]{width:100%; box-sizing:border-box;}
.comboOps{display:none; position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:60; background:var(--blanco); border:1px solid var(--linea); border-radius:8px; max-height:230px; overflow-y:auto; box-shadow:0 8px 22px rgba(20, 28, 45,.14);}
.comboOp{padding:8px 11px; cursor:pointer; font-size:.9rem; border-bottom:1px solid var(--crema);}
.comboOp:last-child{border-bottom:none;}
.comboOp:hover, .comboOp.activa{background:var(--crema);}
.comboVacio{padding:9px 11px; font-size:.85rem; color:var(--gris);}
.subCelda{font-size:.72rem; color:var(--gris);}

/* ---------- Filtros ---------- */
.filtros{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px;}
.filtros label{display:flex; flex-direction:column; gap:3px; font-size:.76rem; color:var(--gris); font-weight:600;}
.filtros input, .filtros select{padding:7px 9px; border:1px solid var(--linea); border-radius:7px; background:var(--blanco); font-size:.86rem;}
.filtros .btn{align-self:flex-end;}

/* ---------- Paginación ---------- */
.paginacion{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:10px 4px 4px;}
.paginaInfo{font-size:.78rem; color:var(--gris);}
.paginaBotones{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.paginaBotones .btn.mini{min-width:30px; padding:5px 9px;}
.paginaBotones .btn.mini:disabled{opacity:.4; cursor:not-allowed;}
.elipsisPag{padding:0 4px; color:var(--gris); font-size:.8rem;}
@media (max-width:640px){
  .paginacion{flex-direction:column; align-items:stretch; text-align:center;}
  .paginaBotones{justify-content:center;}
}

/* ---------- Barra de exportar (CSV/Excel + imprimir) ---------- */
.barraExportar{display:flex; gap:8px; margin:0 0 12px auto; flex-wrap:wrap;}

/* ---------- Aprobaciones ---------- */
.fichaAprob{background:var(--blanco); border:1px solid var(--linea); border-left:5px solid var(--naranja); border-radius:var(--radio); padding:16px 18px; margin-bottom:14px;}
.fichaAprob .cab{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin-bottom:8px;}
.fichaAprob .cab h3{font-size:1.05rem;}
.fichaAprob .cab .tot{margin-left:auto; font-family:var(--display); font-size:1.15rem; color:var(--vino); font-weight:600;}
.fichaAprob .detalleItems{font-size:.85rem; color:var(--tinta); margin:6px 0;}
.avisoPres{font-size:.83rem; padding:7px 10px; border-radius:7px; margin:8px 0; background:var(--verde-suave); color:var(--verde); font-weight:600;}
.avisoPres.medio{background:var(--crema); color:var(--naranja);}
.avisoPres.excedido{background:var(--vino-suave); color:var(--rojo);}
.fichaAprob .pie{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}

/* ---------- Presupuestos ---------- */
.barraPres{background:var(--linea); border-radius:6px; height:10px; overflow:hidden; min-width:120px;}
.barraPres > div{height:100%; border-radius:6px; background:var(--verde); transition:width .3s;}
.barraPres > div.media{background:var(--naranja);}
.barraPres > div.excedido{background:var(--rojo);}
input.montoPres{width:120px; padding:6px 8px; border:1px solid var(--linea); border-radius:6px; text-align:right; font-size:.86rem;}

/* ---------- Modales ---------- */
/* El fondo cubre toda la pantalla y NO hace scroll: el que hace scroll es
   el .modal mismo (max-height + overflow-y:auto). Así evitamos doble
   scroll (fondo + modal) y que el teclado móvil tape los botones. */
.fondoModal{position:fixed; inset:0; background:rgba(20, 28, 45,.55); display:none; align-items:flex-start; justify-content:center; padding:40px 14px; overflow:hidden; z-index:50;}
.fondoModal.abierto{display:flex;}
.modal{background:var(--blanco); border-radius:14px; width:min(560px,100%); max-width:100%; padding:24px;
  max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); overflow-y:auto; -webkit-overflow-scrolling:touch;}
.modal.ancho{width:min(780px,100%);}
.modal h3{font-size:1.2rem; margin-bottom:16px; position:sticky; top:-24px; background:var(--blanco); padding-top:4px; margin-top:-4px; z-index:1;}
.campos{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.campos .full{grid-column:1 / -1;}
.campos label{display:flex; flex-direction:column; gap:4px; font-size:.78rem; font-weight:600; color:var(--gris);}
.campos input, .campos select, .campos textarea{padding:9px 10px; border:1px solid var(--linea); border-radius:7px; background:var(--blanco); font-size:.9rem; font-family:var(--cuerpo);}
.pieModal{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}
.itemsOC{margin-top:14px;}
.encabItems{display:grid; grid-template-columns:1fr 70px 95px 62px 62px 100px 32px; gap:8px; font-size:.72rem; color:var(--gris); font-weight:700; text-transform:uppercase; margin-bottom:5px;}
.itemsOC .filaItem{display:grid; grid-template-columns:1fr 70px 95px 62px 62px 100px 32px; gap:8px; align-items:center; margin-bottom:8px;}
.itemsOC .filaItem select, .itemsOC .filaItem input{padding:7px 8px; border:1px solid var(--linea); border-radius:6px; font-size:.85rem; width:100%; min-width:0; box-sizing:border-box;}
.itemsOC .filaItem input[type=number]{text-align:right;}
.itemsOC .subt{text-align:right; font-variant-numeric:tabular-nums; font-size:.85rem;}
.itemsOC .quitar{background:none; border:none; color:var(--rojo); font-size:1.1rem;}
.totalOC{text-align:right; font-family:var(--display); font-size:1.1rem; color:var(--vino); margin-top:8px; font-weight:600;}

/* ---------- Toast ---------- */
#toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--vino-osc); color:var(--crema); padding:11px 20px; border-radius:9px; font-size:.9rem; opacity:0; transition:all .25s; z-index:90; max-width:90vw;}
#toast.visible{opacity:1; transform:translateX(-50%) translateY(0);}
#toast.mal{background:var(--rojo);}

/* ---------- Impresión ---------- */
#areaImpresion{display:none;}
@media print{
  body > *:not(#areaImpresion){display:none !important;}
  #areaImpresion{display:block; padding:10px;}
  #areaImpresion table{min-width:0;}
  #areaImpresion thead th{background:var(--vino-oscuro) !important; color:var(--blanco) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  #areaImpresion tbody tr:nth-child(even){background:var(--crema) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
}
.datosOCimp{display:flex; justify-content:space-between; margin:14px 0; font-size:.9rem; gap:20px; flex-wrap:wrap;}
.firmasImp{display:flex; gap:40px; margin-top:44px;}
.firmasImp > div{flex:1; text-align:center;}
.firmaMano{font-family:var(--display); font-style:italic; font-size:1.15rem; color:var(--tinta); min-height:26px; line-height:26px;}
.lineaF{border-top:1px solid var(--tinta); padding-top:6px; font-size:.82rem;}
.lineaF b{display:block; margin-top:2px; font-size:.88rem;}
.selloElec{display:block; margin-top:3px; font-size:.68rem; color:var(--gris);}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  main{max-width:100%;}
  .listaPermisos{grid-template-columns:1fr;}
  .filaTitulo .acciones{width:100%;}
}

/* ---------- Móvil ---------- */
@media (max-width:640px){
  main{padding:14px 12px 60px;}
  .campos{grid-template-columns:1fr;}
  .itemsOC .filaItem, .encabItems{grid-template-columns:1fr 52px 72px 46px 46px 82px 24px; gap:6px;}
  .filaTitulo{gap:8px;}
  .filaTitulo .acciones{margin-left:0; width:100%;}
  .filaTitulo .acciones .btn, .filaTitulo .acciones button{flex:1 1 auto;}
  .modal{padding:18px; border-radius:12px;}
  .modal h3{top:-18px;}
  .fondoModal{padding:0; align-items:flex-end;}
  .modal{width:100%; max-height:92dvh; border-radius:16px 16px 0 0;}
  .pieModal{position:sticky; bottom:-18px; background:var(--blanco); padding:12px 0 2px; margin-top:14px;}
}

/* ---------- Pantallas muy angostas (≤380px) ---------- */
@media (max-width:380px){
  .itemsOC .filaItem, .encabItems{grid-template-columns:1fr 44px 62px 40px 40px 70px 20px; gap:4px; font-size:.72rem;}
  .itemsOC .filaItem select, .itemsOC .filaItem input{padding:6px;}
  .cajaLogin{padding:28px 20px;}
}

/* ── Orden por columna: encabezados clicables con flecha ── */
th.thOrden{cursor:pointer; user-select:none; white-space:nowrap;}
th.thOrden .flechaOrden{opacity:.5; font-size:.78em; margin-left:1px;}
th.thOrden:hover .flechaOrden{opacity:.85;}
th.thOrden.ordenActivo .flechaOrden{opacity:1; font-weight:700;}