/*
 * JTech POS Web - estilo clásico, sobrio y formal, en granate y blanco (misma paleta que la aplicación de escritorio,
 * css/jtech.css). Fondos blancos y un único color de marca, el granate. Verde, ámbar y rojo sólo para avisar resultados.
 */
:root {
    --c-fondo: #ffffff;
    --c-panel: #fbf8f8;
    --c-superficie: #ffffff;
    --c-borde: #cfc3c5;
    --c-texto: #2a1c1f;
    --c-texto-suave: #6b5a5d;
    --c-acento: #7b1e2e;
    --c-acento-oscuro: #5c1422;
    --c-acento-suave: #f4e6e8;
    --c-seleccion-suave: #e6ccd0;
    --c-exito: #2f6b4a;
    --c-exito-suave: #e3efe8;
    --c-peligro: #9b2c2c;
    --c-peligro-suave: #f6e5e5;
    --c-aviso: #7a5a12;
    --c-aviso-suave: #f6efd9;
    --c-info: #5c1422;
    --c-info-suave: #f7eced;
    --mono: Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 13px;
    color: var(--c-texto);
    background: var(--c-fondo);
}
button, input, select, textarea { font: inherit; color: inherit; }
.oculto { display: none !important; }
.cargando, .sin-js { padding: 40px; text-align: center; color: var(--c-texto-suave); }
#area-impresion { display: none; }

/* ---------- Controles ---------- */
input[type=text], input[type=password], input[type=search], input:not([type]), select, textarea {
    border: 1px solid var(--c-borde);
    border-radius: 2px;
    padding: 5px 7px;
    background: #fff;
    min-width: 0;
}
input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: 2px solid var(--c-acento);
    outline-offset: -1px;
}
.boton {
    border: 1px solid #bfb1b4;
    border-radius: 2px;
    background: #f3eeee;
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.boton:hover:not(:disabled) { background: #ebe3e4; }
.boton:disabled { opacity: .55; cursor: default; }
.boton.primario { background: var(--c-acento); border-color: var(--c-acento-oscuro); color: #fff; font-weight: bold; }
.boton.primario:hover:not(:disabled) { background: var(--c-acento-oscuro); }
.boton.exito { background: #d6e6dc; color: var(--c-exito); font-weight: bold; border-color: #a9c7b5; }
.boton.peligro { background: #eedcdc; color: var(--c-peligro); font-weight: bold; border-color: #d6b3b3; }
.boton.aviso { background: #ece4cc; color: var(--c-aviso); font-weight: bold; border-color: #d3c59b; }
.boton.plano { background: transparent; border-color: transparent; }
.boton.grande { font-size: 14px; padding: 8px 16px; }
.boton-quitar {
    border: 1px solid #d6b3b3; background: #eedcdc; color: var(--c-peligro);
    font-weight: bold; padding: 0 7px; font-size: 12px; border-radius: 2px; cursor: pointer; line-height: 18px;
}
a.boton { text-decoration: none; display: inline-block; color: var(--c-texto); }

.titulo { font-size: 18px; font-weight: bold; margin: 0; }
.subtitulo { font-size: 13px; font-weight: bold; color: var(--c-acento-oscuro); }
.suave { color: var(--c-texto-suave); }
.etiqueta-campo { display: block; font-size: 12px; color: var(--c-texto-suave); margin-bottom: 4px; }
.campo { display: flex; flex-direction: column; margin-bottom: 10px; }
.campo input, .campo select { width: 100%; }
.fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fila > * { flex-shrink: 0; }
.fila > .expansor, .fila > .pos-lector { flex-shrink: 1; }
.fila.arriba { align-items: flex-start; flex-wrap: nowrap; }
select { min-width: 80px; }
.expansor { flex: 1; }
.derecha { text-align: right; }

.tarjeta { background: var(--c-panel); border: 1px solid var(--c-borde); padding: 10px; }

.mensaje { padding: 5px 8px; border: 1px solid transparent; min-height: 0; }
.mensaje:empty { display: none; }
.mensaje.error { background: var(--c-peligro-suave); color: var(--c-peligro); border-color: var(--c-peligro); }
.mensaje.ok { background: var(--c-exito-suave); color: var(--c-exito); border-color: var(--c-exito); }
.mensaje.info { background: var(--c-info-suave); color: var(--c-info); border-color: var(--c-info); }
.mensaje.aviso { background: var(--c-aviso-suave); color: var(--c-aviso); border-color: var(--c-aviso); }

/* ---------- Tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; background: #fff; }
.tabla th {
    background: var(--c-acento-suave); color: var(--c-acento-oscuro); font-weight: bold; text-align: left;
    border-right: 1px solid var(--c-borde); border-bottom: 1px solid var(--c-borde); padding: 5px 6px;
    position: sticky; top: 0; z-index: 1;
}
.tabla td { padding: 4px 6px; border-bottom: 1px solid #efe7e8; white-space: nowrap; }
.tabla td.texto { white-space: normal; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tbody tr { cursor: default; }
.tabla tbody tr.sel { background: var(--c-acento); color: #fff; }
.tabla tbody tr.sel .suave { color: #f0d5d9; }
.marco-tabla { border: 1px solid var(--c-borde); overflow: auto; background: #fff; }
.vacio { padding: 18px; text-align: center; color: var(--c-texto-suave); }

/* ---------- Inicio de sesión ---------- */
.login-fondo { min-height: 100%; background: var(--c-acento-suave); display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-tarjeta { width: 380px; background: #fff; border: 1px solid var(--c-borde); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.login-marca { background: var(--c-acento); color: #fff; font-weight: bold; font-size: 14px; padding: 8px 12px; }
.login-cuerpo { padding: 12px 16px 14px; }
.login-cuerpo .botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.lista-cajas { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--c-borde); max-height: 260px; overflow: auto; }
.lista-cajas li { padding: 7px 10px; border-bottom: 1px solid #efe7e8; cursor: pointer; }
.lista-cajas li.sel { background: var(--c-acento); color: #fff; }

/* ---------- Estructura principal ---------- */
.app { height: 100%; }
.shell { display: flex; flex-direction: column; height: 100%; }
.barra-modulos {
    display: flex; align-items: stretch; gap: 2px; padding: 4px 6px; background: var(--c-superficie);
    border-bottom: 1px solid var(--c-borde); flex-wrap: wrap;
}
.nav {
    border: 1px solid transparent; background: transparent; padding: 5px 12px; font-size: 12px; border-radius: 2px;
    cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative;
}
.nav .icono { width: 22px; height: 22px; border-radius: 50%; background: var(--c-acento); color: #fff;
    font-size: 11px; font-weight: bold; display: flex; align-items: center; justify-content: center; }
.nav:hover:not(:disabled) { border-color: var(--c-borde); background: var(--c-panel); }
.nav.activo { border-color: var(--c-acento); background: var(--c-acento-suave); font-weight: bold; }
.nav:disabled { cursor: default; color: #a99a9d; }
.nav:disabled .icono { background: #cdbfc2; }
.nav .pronto { font-size: 9px; color: #a99a9d; text-transform: uppercase; letter-spacing: .3px; }
.menu-grupo { position: relative; }
.barra-modulos .usuario { margin-left: auto; }
.franja-titulo {
    background: var(--c-acento); color: #fff; font-weight: bold; font-size: 14px; padding: 4px 12px;
    display: flex; align-items: center; gap: 12px; min-height: 28px;
}
.franja-titulo .boton-franja {
    background: transparent; border: 1px solid #b7737f; color: #fff; padding: 1px 10px; font-size: 12px; cursor: pointer; border-radius: 2px;
}
.franja-titulo .boton-franja:hover { background: var(--c-acento-oscuro); }
.contenido { flex: 1; overflow: auto; padding: 8px; background: var(--c-fondo); position: relative; }
.barra-estado {
    display: flex; background: var(--c-panel); border-top: 1px solid var(--c-borde); padding: 3px 6px; font-size: 12px;
    color: var(--c-texto-suave);
}
.barra-estado .celda { padding: 1px 10px; border-left: 1px solid var(--c-borde); }
.barra-estado .celda:first-child { border-left: 0; }

.proximamente { max-width: 520px; margin: 60px auto; text-align: center; }

/* ---------- Menús desplegables ---------- */
.menu {
    position: fixed; z-index: 60; background: #fff; border: 1px solid var(--c-borde); box-shadow: 0 3px 10px rgba(0,0,0,.2);
    min-width: 220px; padding: 3px 0; list-style: none; margin: 0;
}
.menu li { padding: 6px 14px; cursor: pointer; white-space: nowrap; }
.menu li.sel { background: var(--c-acento); color: #fff; }
.menu li.deshabilitado { color: #a99a9d; cursor: default; }
.menu li.separador { padding: 0; border-top: 1px solid #efe7e8; margin: 3px 0; cursor: default; }
.menu .atajo { float: right; padding-left: 18px; color: inherit; opacity: .7; font-size: 12px; }

/* ---------- Ventanas modales ---------- */
.capa-modal { position: fixed; inset: 0; background: rgba(42,28,31,.35); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding-top: 6vh; }
.modal { background: #fff; border: 1px solid var(--c-borde); box-shadow: 0 6px 24px rgba(0,0,0,.28); max-width: 96vw; max-height: 90vh; display: flex; flex-direction: column; }
.modal-titulo { background: var(--c-acento); color: #fff; font-weight: bold; padding: 6px 12px; }
.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; }

/* ---------- Punto de venta ---------- */
.pos { display: flex; flex-direction: column; height: 100%; gap: 6px; position: relative; }
.pos-cabecera { display: flex; gap: 8px; }
.pos-logo {
    background: #fff; border: 1px solid var(--c-borde); padding: 12px; min-width: 260px; min-height: 150px;
    display: flex; align-items: center; justify-content: center;
}
.pos-logo img { max-width: 340px; max-height: 170px; }
.pos-logo.clic { cursor: pointer; }
.pos-logo-vacio { color: #8a7478; text-align: center; white-space: pre-line; }
.pos-cabecera-datos { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pos-datos { display: flex; gap: 26px; flex-wrap: wrap; }
.pos-dato-rotulo { color: var(--c-texto-suave); font-size: 11px; }
.pos-dato-valor { font-weight: bold; }
.pos-lector {
    flex: 1; font-size: 20px; font-weight: bold; padding: 6px 8px; border: 1px solid var(--c-acento) !important;
}
.pos-lector:disabled { background: #f3eeee; }
.pos-pendiente {
    background: var(--c-aviso-suave); color: var(--c-aviso); border: 1px solid var(--c-aviso); padding: 5px 10px;
    font-weight: bold; font-size: 14px; white-space: nowrap;
}
.pos-cuerpo { display: flex; gap: 6px; flex: 1; min-height: 0; }
.pos-tabla-marco { flex: 1; min-width: 0; position: relative; }
.pos-tabla td { font-size: 14px; }
.pos-derecha { width: 330px; min-width: 300px; display: flex; flex-direction: column; gap: 8px; }
.pos-total-caja { background: #7b1e2e; border: 1px solid #5c1422; padding: 8px 12px; text-align: right; }
.pos-total-rotulo { color: #f0d5d9; font-size: 12px; font-weight: bold; }
.pos-total { color: #fff; font-family: var(--mono); font-size: 40px; font-weight: bold; line-height: 1.15; }
.pos-vuelto { color: #fff; font-family: var(--mono); font-size: 18px; font-weight: bold; min-height: 22px; }
.pos-totales { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.pos-totales .valor { text-align: right; font-weight: bold; font-variant-numeric: tabular-nums; }
.pos-ayuda { text-align: center; color: var(--c-texto-suave); }
.tecla { border: 1px solid var(--c-borde); padding: 0 5px; font-size: 11px; background: #fff; border-radius: 2px; }
.pos-caja-cerrada {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.85); z-index: 5;
}
.pos-caja-cerrada .tarjeta { width: 460px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* ---------- Cobro ---------- */
.cobro-importes { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; }
.cobro-total { font-size: 26px; font-weight: bold; text-align: right; font-variant-numeric: tabular-nums; }
.cobro-vuelto { font-size: 26px; font-weight: bold; text-align: right; color: var(--c-exito); }
.cobro-vuelto.falta { color: var(--c-peligro); }
.cobro-medios { list-style: none; margin: 0; padding: 0; border: 1px solid var(--c-borde); width: 230px; }
.cobro-medios li { padding: 7px 10px; border-bottom: 1px solid #efe7e8; cursor: pointer; }
.cobro-medios li.sel { background: var(--c-acento); color: #fff; }
.cobro-pagos { list-style: none; margin: 0; padding: 6px 8px; border: 1px solid var(--c-borde); min-height: 52px; background: #fff; }
.cobro-pagos li { padding: 2px 0; }
.chequeo { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ---------- Ticket ---------- */
.hoja-ticket {
    background: #fff; border: 1px solid #b0b0b0; padding: 14px; display: flex; flex-direction: column; align-items: center;
    max-height: 60vh; overflow: auto;
}
.hoja-ticket pre { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.25; color: #000; }
.hoja-ticket img.qr { width: 190px; height: 190px; margin-top: 8px; image-rendering: pixelated; }

/* ---------- Caja ---------- */
.caja { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.caja-resumen { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.caja-grilla { display: grid; grid-template-columns: auto auto; gap: 4px 18px; }
.caja-grilla .valor { text-align: right; font-weight: bold; min-width: 100px; font-variant-numeric: tabular-nums; }
.caja-esperado { font-size: 26px; font-weight: bold; }
.arqueo { display: grid; grid-template-columns: auto 90px auto; gap: 4px 10px; align-items: center; }
.arqueo input { text-align: right; }
.arqueo .valor { text-align: right; min-width: 110px; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .pos-logo { display: none; }
    .pos-derecha { width: 260px; min-width: 240px; }
    .pos-total { font-size: 30px; }
}