/* TP Comercial — estética de sistema de gestión clásico: menú + barra de botones + grillas densas + barra de estado */
:root {
  --azul: #1c3a5c; --azul2: #2c5077; --azul3: #3d6a99; --celeste: #dce8f5; --celeste2: #eef4fb;
  --gris: #e9ecef; --gris2: #d5dae0; --gris3: #9aa5b1; --texto: #1d2733; --suave: #5b6878;
  --verde: #1f7a3f; --rojo: #b3261e; --ambar: #b26a00; --blanco: #fff; --sel: #2c5077;
  --borde: #b9c2cc; --fuente: "Segoe UI", Tahoma, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: var(--fuente); font-size: 13px; color: var(--texto); background: #c9d1da; }
body { display: flex; flex-direction: column; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
kbd { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--gris3); border-bottom-width: 2px; border-radius: 3px;
  background: #f7f8fa; font: 600 11px/16px var(--fuente); text-align: center; color: var(--azul); }
.oculto { display: none !important; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gris { color: var(--suave); }
.rojo { color: var(--rojo); } .verde { color: var(--verde); } .ambar { color: var(--ambar); }

/* ---------- barra de título ---------- */
#titulo { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; color: #fff;
  background: linear-gradient(180deg, #24496f 0%, var(--azul) 100%); border-bottom: 1px solid #0f2238; }
#titulo .marca { font-weight: 700; letter-spacing: .5px; }
#titulo .marca b { color: #ffb347; font-weight: 800; }
#titulo .empresa { opacity: .85; }
#titulo .der { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 12px; opacity: .9; }

/* ---------- menú ---------- */
#menu { display: flex; height: 26px; background: #f4f5f7; border-bottom: 1px solid var(--borde); user-select: none; }
#menu > .m { position: relative; padding: 0 12px; line-height: 26px; cursor: default; }
#menu > .m:hover, #menu > .m.abierto { background: var(--celeste); }
#menu > .m u { text-decoration: underline; }
#menu .desp { position: absolute; top: 26px; left: 0; z-index: 50; min-width: 250px; background: #fff; border: 1px solid var(--gris3);
  box-shadow: 2px 3px 8px rgba(0,0,0,.25); padding: 3px 0; display: none; }
#menu > .m.abierto .desp { display: block; }
#menu .desp div { display: flex; justify-content: space-between; gap: 20px; padding: 4px 22px 4px 26px; white-space: nowrap; }
#menu .desp div:hover, #menu .desp div.foco { background: var(--sel); color: #fff; }
#menu .desp div span { color: var(--suave); font-size: 12px; }
#menu .desp div:hover span, #menu .desp div.foco span { color: #dfe8f2; }
#menu .desp hr { border: 0; border-top: 1px solid var(--gris2); margin: 3px 4px; }

/* ---------- barra de botones ---------- */
#barra { display: flex; gap: 2px; padding: 3px 6px; background: linear-gradient(180deg, #fbfcfd, #e7ebef); border-bottom: 1px solid var(--borde); }
#barra button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 78px; height: 50px;
  border: 1px solid transparent; border-radius: 3px; background: none; cursor: pointer; font-size: 12px; }
#barra button:hover { border-color: var(--gris3); background: #fff; }
#barra button .ico { font-size: 20px; line-height: 22px; color: var(--azul2); }
#barra button kbd { font-size: 10px; line-height: 13px; min-width: 0; }
#barra .sep { width: 1px; margin: 4px 4px; background: var(--gris2); }

/* ---------- área de trabajo ---------- */
#trabajo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px; }
.ventana { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--gris); border: 1px solid var(--gris3);
  box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ventana > .cab { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; color: #fff; font-weight: 600;
  background: linear-gradient(180deg, var(--azul3), var(--azul2)); }
.ventana > .cab .ayuda { margin-left: auto; font-weight: 400; font-size: 12px; opacity: .9; }
.ventana > .cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; overflow: auto; }
.ventana > .pie { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 5px 10px; background: #f6f7f9; border-top: 1px solid var(--borde); font-size: 12px; color: var(--suave); }

/* grupo (recuadro con título) */
.grupo { position: relative; border: 1px solid var(--borde); background: #f8f9fb; padding: 12px 10px 8px; border-radius: 2px; }
.grupo > .tit { position: absolute; top: -9px; left: 8px; padding: 0 5px; background: var(--gris); color: var(--azul2); font-weight: 600; font-size: 12px; }
.fila { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.campo > label { font-size: 11px; color: var(--suave); }
.campo input, .campo select, .campo textarea { height: 24px; padding: 2px 5px; border: 1px solid var(--gris3); border-radius: 2px; background: #fff; }
.campo textarea { height: 54px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .buscador:focus { outline: 2px solid #ffb347; outline-offset: -1px; border-color: var(--azul2); background: #fffdf5; }
.campo input[readonly] { background: #eef0f3; color: var(--suave); }
.campo.check { flex-direction: row; align-items: center; gap: 6px; height: 24px; }
.campo.check input { width: 16px; height: 16px; }

button.boton { height: 26px; padding: 0 12px; white-space: nowrap; border: 1px solid var(--gris3); border-radius: 2px; background: linear-gradient(180deg, #fff, #e5e9ee); cursor: pointer; }
button.boton:hover { border-color: var(--azul2); }
button.boton:focus { outline: 2px solid #ffb347; }
button.boton.prim { background: linear-gradient(180deg, var(--azul3), var(--azul2)); color: #fff; border-color: var(--azul); }
button.boton.peligro { color: var(--rojo); }

/* ---------- grilla ---------- */
.lista { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 4px; }
.lista .arriba { display: flex; gap: 8px; align-items: center; }
.buscador { flex: 1; height: 26px; padding: 2px 8px 2px 26px; border: 1px solid var(--gris3); border-radius: 2px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6878' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") 7px center no-repeat; }
.grilla { flex: 1; min-height: 80px; overflow: auto; background: #fff; border: 1px solid var(--gris3); }
.grilla table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.grilla th { position: sticky; top: 0; z-index: 1; padding: 4px 6px; text-align: left; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden;
  background: linear-gradient(180deg, #f8f9fa, #dfe3e8); border-right: 1px solid var(--gris2); border-bottom: 1px solid var(--gris3); }
.grilla td { padding: 3px 6px; border-right: 1px solid #edf0f3; border-bottom: 1px solid #edf0f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grilla tbody tr:nth-child(even) td { background: #f6f9fc; }
.grilla tbody tr.sel td { background: var(--sel); color: #fff; }
.grilla tbody tr.sel td .verde, .grilla tbody tr.sel td .rojo, .grilla tbody tr.sel td .ambar, .grilla tbody tr.sel td .gris { color: #fff; }
.grilla tbody tr.anulada td { color: #a3a9b1; text-decoration: line-through; }
.grilla tbody tr.sel.anulada td { color: #dbe2ea; }
.grilla tbody tr.inactivo td { color: #a3a9b1; font-style: italic; }
.grilla tbody tr.alerta td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }
.grilla tfoot td { position: sticky; bottom: 0; background: #e7ecf2; font-weight: 700; border-top: 1px solid var(--gris3); }
.grilla .vacio { padding: 18px; text-align: center; color: var(--suave); }
.teclas { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--suave); }

/* ---------- factura / carga ---------- */
.carga { display: grid; grid-template-columns: 1fr 300px; gap: 8px; flex: 1; min-height: 0; }
.carga .izq { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.carga .der { display: flex; flex-direction: column; gap: 8px; }
.renglon-nuevo { display: grid; grid-template-columns: 1fr 90px 120px 70px 110px; gap: 6px; align-items: end; }
.sugerencias { position: absolute; z-index: 30; background: #fff; border: 1px solid var(--azul2); box-shadow: 2px 4px 10px rgba(0,0,0,.25); max-height: 320px; overflow: auto; }
.sugerencias table { border-collapse: collapse; width: 100%; }
.sugerencias td { padding: 4px 8px; border-bottom: 1px solid #eef1f4; white-space: nowrap; }
.sugerencias tr.sel td { background: var(--sel); color: #fff; }
.totales { background: #fff; border: 1px solid var(--borde); border-left: 5px solid var(--azul2); padding: 8px 12px; }
.totales table { width: 100%; border-collapse: collapse; }
.totales td { padding: 2px 0; }
.totales tr.total td { padding-top: 8px; border-top: 1px solid var(--gris2); font-size: 22px; font-weight: 700; color: var(--azul); }
.cliente-box { background: #fff; border: 1px solid var(--borde); padding: 6px 10px; min-height: 48px; }
.cliente-box b { font-size: 14px; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--celeste); color: var(--azul); }
.chip.rojo { background: #fbe4e2; color: var(--rojo); } .chip.verde { background: #def3e5; color: var(--verde); } .chip.ambar { background: #fdf0d8; color: var(--ambar); }

/* ---------- inicio ---------- */
.tablero { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-top: 3px solid var(--azul2); padding: 10px 12px; }
.tarjeta .t { font-size: 12px; color: var(--suave); }
.tarjeta .v { font-size: 22px; font-weight: 700; color: var(--azul); margin-top: 4px; }
.tarjeta.alerta { border-top-color: var(--rojo); } .tarjeta.alerta .v { color: var(--rojo); }
.atajos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; }
.atajos div { padding: 3px 0; border-bottom: 1px dotted var(--gris2); }
.aviso-licencia { padding: 8px 12px; background: #fdf0d8; border: 1px solid #e5b65c; color: #6b4300; font-weight: 600; }

/* ---------- informes ---------- */
.informes { display: grid; grid-template-columns: 260px 1fr; gap: 8px; flex: 1; min-height: 0; }
.informes .menu-inf { overflow: auto; background: #fff; border: 1px solid var(--gris3); }
.informes .menu-inf .g { padding: 6px 10px 3px; font-size: 11px; font-weight: 700; color: var(--azul2); text-transform: uppercase; background: #f2f5f8; }
.informes .menu-inf .i { padding: 4px 10px 4px 16px; cursor: pointer; }
.informes .menu-inf .i.sel { background: var(--sel); color: #fff; }

/* ---------- modales ---------- */
.fondo-modal { position: fixed; inset: 0; z-index: 100; background: rgba(20,32,48,.35); display: flex; align-items: center; justify-content: center; }
.modal { max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); display: flex; flex-direction: column; background: var(--gris); border: 1px solid var(--azul); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.modal > .cab { height: 28px; padding: 0 10px; display: flex; align-items: center; color: #fff; font-weight: 600; background: linear-gradient(180deg, var(--azul3), var(--azul2)); }
.modal > .cuerpo { padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.modal > .pie { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 8px 12px; background: #f6f7f9; border-top: 1px solid var(--borde); }
.modal > .pie .teclas { margin-right: auto; }
.modal .mensaje { font-size: 14px; line-height: 1.45; max-width: 520px; white-space: pre-line; }
.billetes { display: grid; grid-template-columns: auto 90px auto; gap: 4px 10px; align-items: center; }
.billetes input { width: 90px; height: 24px; text-align: right; border: 1px solid var(--gris3); padding: 2px 5px; }

/* ---------- avisos ---------- */
#avisos { position: fixed; right: 14px; bottom: 34px; z-index: 200; display: flex; flex-direction: column; gap: 6px; }
.toast { padding: 8px 14px; background: var(--azul); color: #fff; border-radius: 3px; box-shadow: 0 3px 10px rgba(0,0,0,.3); max-width: 420px; }
.toast.error { background: var(--rojo); } .toast.ok { background: var(--verde); }

/* ---------- barra de estado ---------- */
#estado { display: flex; height: 24px; background: #eef0f3; border-top: 1px solid var(--borde); font-size: 12px; }
#estado > div { padding: 0 10px; line-height: 23px; border-right: 1px solid var(--gris2); white-space: nowrap; overflow: hidden; }
#estado > div:last-child { margin-left: auto; border-right: 0; border-left: 1px solid var(--gris2); }
#estado .punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); margin-right: 5px; }
#estado .punto.mal { background: var(--rojo); }

/* ---------- ingreso ---------- */
#ingreso { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #2c5077 0%, #1c3a5c 55%, #10243b 100%); }
#ingreso .caja { width: 360px; background: var(--gris); border: 1px solid #0f2238; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
#ingreso .caja .cab { padding: 18px; text-align: center; color: #fff; background: linear-gradient(180deg, var(--azul3), var(--azul2)); }
#ingreso .caja .cab .marca { font-size: 24px; font-weight: 800; letter-spacing: 1px; } #ingreso .caja .cab .marca b { color: #ffb347; }
#ingreso .caja .cab .sub { opacity: .85; margin-top: 2px; }
#ingreso .caja form { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
#ingreso .caja input { height: 30px; font-size: 14px; }
#ingreso .caja .error { color: var(--rojo); min-height: 18px; }

/* celular / tableta: el sistema se maneja con teclado en la PC, pero en el celular sirve para consultar y cargar */
@media (max-width: 800px) {
  body { overflow: auto; }
  #titulo .empresa, #titulo #tit_reloj { display: none; }
  #menu, #barra { overflow-x: auto; scrollbar-width: none; }
  #menu > .m { flex: none; }
  #menu .desp { position: fixed; top: 56px; left: 6px; right: 6px; min-width: 0; }
  #barra button { flex: none; width: 64px; } #barra button kbd { display: none; } #barra .sep { display: none; }
  #trabajo { padding: 4px; overflow: visible; }
  .ventana { min-height: calc(100vh - 150px); }
  .ventana > .cab .ayuda, .ventana > .pie { display: none; }
  .ventana > .cuerpo { overflow: visible; }
  .carga, .informes { grid-template-columns: minmax(0, 1fr); }
  .carga .izq > .grupo:first-child .fila { flex-direction: column; align-items: stretch; }
  .carga .izq > .grupo:first-child .campo { flex: none !important; }
  .renglon-nuevo { grid-template-columns: 1fr 1fr; }
  .renglon-nuevo > .campo:first-child { grid-column: 1 / -1; }
  .carga { flex: none; }
  .grilla { overflow-x: auto; flex: none; height: 240px; }
  .grilla table { min-width: 640px; }
  .informes .menu-inf { max-height: 200px; }
  .fila > .campo input, .fila > .campo select { max-width: 100%; }
  .modal { width: calc(100vw - 12px) !important; }
  #estado > div:nth-child(n+2) { display: none; }
}

/* ---------- impresión: solo se imprime el marco de impresión ---------- */
@media print { body > *:not(#marco-impresion) { display: none !important; } }