/* Pyme Stock — hoja de estilos. Sin frameworks: se instala sin internet. */
:root{
  --azul:#1b4f8c; --azul-osc:#143c6b; --verde:#127a4a; --rojo:#b3261e;
  --gris:#f4f5f7; --borde:#d7dae0; --texto:#20242a; --suave:#6b7280;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--gris);color:var(--texto);font-size:15px}
h1,h2,h3{margin:0}
.chico{font-size:13px;color:var(--suave)}
.oculto{display:none!important}
.sp{flex:1}
.der{text-align:right}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- login ---------- */
.tarjeta-login{max-width:360px;margin:10vh auto;background:#fff;border:1px solid var(--borde);
  border-radius:12px;padding:26px;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.tarjeta-login h1{color:var(--azul);margin-bottom:2px}
.tarjeta-login input{width:100%;margin:8px 0}

/* ---------- estructura ---------- */
#app{display:flex;min-height:100vh}
nav#menu{width:206px;background:var(--azul-osc);color:#fff;padding:14px 0;flex-shrink:0}
nav#menu .marca{padding:0 18px 14px;font-weight:700;font-size:17px;color:#fff;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:8px}
nav#menu a{display:block;padding:11px 18px;color:#d6e3f5;text-decoration:none;font-size:14.5px}
nav#menu a:hover{background:rgba(255,255,255,.09);color:#fff}
nav#menu a.act{background:#fff;color:var(--azul-osc);font-weight:600}
nav#menu .sep{border-top:1px solid rgba(255,255,255,.14);margin:9px 0}
#contenido{flex:1;min-width:0;display:flex;flex-direction:column}
header{background:#fff;border-bottom:1px solid var(--borde);padding:12px 20px;display:flex;
  align-items:center;gap:14px;flex-wrap:wrap}
header h1{font-size:19px}
main{padding:20px;max-width:1180px;width:100%}

/* ---------- componentes ---------- */
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:10px;padding:18px;margin-bottom:16px}
.tarjeta h2{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--suave);margin-bottom:12px}
.fila{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.fila > .campo{min-width:0}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:11.5px;text-transform:uppercase;color:var(--suave);letter-spacing:.5px}
input,select,textarea{font-size:15px;padding:9px 11px;border:1px solid var(--borde);border-radius:6px;
  background:#fff;font-family:inherit;color:inherit;max-width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 2px rgba(27,79,140,.12)}
input[readonly]{background:#f2f4f7;color:#555}
input.mini{width:96px;text-align:right;font-variant-numeric:tabular-nums}
input.num-in{width:78px;text-align:right}
textarea{resize:vertical}
button{cursor:pointer;font-family:inherit;font-size:14px}
button.principal{background:var(--verde);color:#fff;border:none;padding:12px 26px;font-size:16px;
  font-weight:600;border-radius:8px}
button.principal:disabled{background:#b8bcc4;cursor:not-allowed}
button.sec{background:#fff;border:1px solid var(--borde);padding:8px 14px;border-radius:6px}
button.sec:hover{border-color:var(--azul);color:var(--azul)}
button.ter{background:none;border:none;color:var(--rojo);padding:5px 7px;border-radius:5px}
button.ter:hover{background:#fdecea}
button.chico-b{padding:5px 10px;font-size:13px}
.pago{padding:9px 15px;border:1px solid var(--borde);background:#fff;border-radius:6px}
.pago.sel{background:var(--azul);color:#fff;border-color:var(--azul)}
.pagos{display:flex;gap:8px;flex-wrap:wrap}

table{width:100%;border-collapse:collapse}
th,td{padding:8px 8px;border-bottom:1px solid #eceef2;text-align:left;vertical-align:middle}
th{font-size:11.5px;text-transform:uppercase;color:var(--suave);letter-spacing:.5px;
  position:sticky;top:0;background:#fff;z-index:2}
tbody tr:hover{background:#fafbfc}
.vacio{color:#9aa1ac;padding:24px;text-align:center}
.scroll{max-height:520px;overflow:auto;border:1px solid var(--borde);border-radius:8px}
.pill{display:inline-block;padding:2px 9px;border-radius:11px;font-size:12px;font-weight:600}
.pill.ok{background:#e8f6ee;color:#0f5c38}
.pill.no{background:#fdecea;color:#8c1d16}
.pill.neu{background:#eef1f5;color:#4c5563}
.pill.avi{background:#fff4d6;color:#7a5b12}
.aviso{background:#fff8e6;border:1px solid #f0d089;color:#7a5b12;padding:11px 14px;border-radius:6px;margin:10px 0}
.error{background:#fdecea;border:1px solid #f3b8b3;color:#8c1d16;padding:11px 14px;border-radius:6px;margin:10px 0}
.ok{background:#e8f6ee;border:1px solid #a9dcbe;color:#0f5c38;padding:11px 14px;border-radius:6px;margin:10px 0}
.pista{font-size:12.5px;color:var(--suave);margin-top:7px}
.total-caja{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;
  padding-top:12px;border-top:2px solid #eceef2}
.total-caja .val{font-size:33px;font-weight:700;font-variant-numeric:tabular-nums}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--borde);border-radius:9px;padding:14px}
.kpi .et{font-size:11.5px;text-transform:uppercase;color:var(--suave);letter-spacing:.5px}
.kpi .val{font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:4px}
.kpi .sub{font-size:12.5px;color:var(--suave);margin-top:2px}

/* ---------- modal ---------- */
#modal-fondo{position:fixed;inset:0;background:rgba(20,24,30,.5);display:flex;align-items:flex-start;
  justify-content:center;padding:40px 16px;overflow:auto;z-index:100}
#modal{max-width:780px;width:100%;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.25);margin:0}
#modal h2{font-size:17px;text-transform:none;color:var(--texto);letter-spacing:0;margin-bottom:16px}
#modal .acciones{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;
  padding-top:14px;border-top:1px solid #eceef2}

/* ---------- buscador de listas ---------- */
.barra-busqueda{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.barra-busqueda input[type=text]{min-width:260px}
.codigo-grande{width:100%;font-size:25px;padding:13px 16px;border:2px solid var(--azul);
  border-radius:8px;font-family:ui-monospace,Consolas,monospace;letter-spacing:1px}
#lista-sug{position:absolute;background:#fff;border:1px solid var(--borde);border-radius:6px;
  max-height:260px;overflow:auto;z-index:30;box-shadow:0 6px 18px rgba(0,0,0,.14);min-width:260px}
#lista-sug div{padding:9px 13px;cursor:pointer;font-size:14px}
#lista-sug div:hover{background:var(--gris)}
.rel{position:relative}

/* ---------------------------------------------------------------- mostrador
   Pantalla de venta en dos columnas: a la izquierda el código y los botones de
   venta rápida; a la derecha la venta en curso y el cobro. */
.mostrador { display: flex; gap: 14px; align-items: flex-start; }
.panel-izq { flex: 0 0 40%; min-width: 300px; }
.panel-der { flex: 1; min-width: 0; }
@media (max-width: 950px) {
  .mostrador { flex-direction: column; }
  .panel-izq { flex: 1 1 auto; min-width: 0; width: 100%; }
}

/* Botones de venta rápida: un toque y el artículo va al carrito */
.gr-botones { margin-bottom: 10px; }
.gr-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: #6b7280; margin: 8px 0 5px; font-weight: 700; }
.botones { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; }
.btn-articulo { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 9px; border: 1px solid var(--borde); background: #fff; border-radius: 8px;
  cursor: pointer; text-align: left; font: inherit; font-size: 13px; position: relative;
  transition: border-color .12s, background .12s; }
.btn-articulo:hover { border-color: var(--azul); background: #f6faff; }
.btn-articulo:active { transform: scale(.98); }
.btn-articulo .n { font-weight: 600; line-height: 1.15; }
.btn-articulo .p { color: var(--verde); font-weight: 700; font-size: 12px; }
.btn-articulo.sug { border-style: dashed; }
.btn-articulo .sug-marca { font-size: 9px; text-transform: uppercase; color: #9aa1ac;
  letter-spacing: .4px; }

/* ---------------------------------------------------------------- diálogos
   Los avisos y preguntas son parte de la pantalla, no del navegador. */
.dlg-msg { margin: 4px 0 2px; line-height: 1.5; color: #374151; font-size: 14px; }
.campo-ancho { display: block; width: 100%; margin-top: 14px; }
.campo-ancho label { display: block; margin-bottom: 4px; }
.campo-ancho input, .campo-ancho textarea, .campo-ancho select { font: inherit; }
.campo-ancho textarea { resize: vertical; min-height: 62px; }

/* Botón de acciones que no se deshacen: anular, borrar, bajar precios. */
button.peligro { background: #c0392b; color: #fff; border: 1px solid #a93226; }
button.peligro:hover { background: #a93226; }
button.peligro:focus-visible { outline: 2px solid #c0392b; outline-offset: 2px; }

/* ---------------------------------------------------------------- modo demo */
#banner-demo { position: sticky; top: 0; z-index: 60; display: flex; align-items: center;
  gap: 12px; padding: 9px 16px; background: #fff8e1; border-bottom: 1px solid #f0d98c;
  font-size: 13px; }
#banner-demo .bd-txt { flex: 1; color: #7a5c00; line-height: 1.35; }
#dlg-error { margin: 14px 0 0; font-size: 13px; }