/* ===================================================================
   EOS Papelería Creativa — estilos compartidos (cliente + admin)
   HTML = estructura · CSS (este archivo) = estilo · JS = comportamiento
   =================================================================== */

:root {
  --fondo: #f9f9f9;
  --tarjeta: #ffffff;
  --fog: #f2f2f2;
  --tinta: #14151a;
  --suave: #606060;
  --acento: #c42df9;
  --acento-strong: #9d1fcf;
  --marca: #6a1b9a;
  --bolivar: #606060;
  --borde: #dee0e3;
  --ok: #12a33a;
  --salida: #d63e0e;
  --aviso: #c2740a;
  --sombra: rgba(47, 43, 67, 0.08) 0px 1px 3px 0px, rgba(47, 43, 67, 0.06) 0px -1px 0px 0px inset;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  min-height: 100vh;
  padding: 24px 16px 48px;
  -webkit-font-smoothing: antialiased;
}

/* --- Cabecera + logo --- */
header { max-width: 560px; margin: 0 auto 16px; text-align: center; }
.logo { height: 72px; width: auto; display: block; margin: 0 auto 10px; }
header h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.8px; color: var(--marca); }
header p { color: var(--suave); font-size: 13px; font-weight: 500; margin-top: 4px; }

/* --- Barra del dueño --- */
.barra-dueno { max-width: 560px; margin: 0 auto 12px; display: flex; justify-content: flex-end; }
.btn-salir {
  padding: 8px 16px; border: 1px solid var(--borde); background: var(--tarjeta); border-radius: 9999px;
  font-size: 13px; font-weight: 600; color: var(--suave); cursor: pointer; font-family: inherit;
}
.btn-salir:hover { background: var(--fog); }

/* --- Pestañas --- */
.tab-bar { max-width: 560px; margin: 0 auto 16px; display: flex; gap: 6px; background: var(--fog); padding: 5px; border-radius: 12px; }
.tab-btn {
  flex: 1; padding: 9px 4px; border: none; background: transparent; border-radius: 9px;
  font-size: 12px; font-weight: 600; color: var(--suave); cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.tab-btn.active { background: var(--tarjeta); color: var(--marca); box-shadow: var(--sombra); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* --- Panel genérico --- */
.panel {
  max-width: 560px; margin: 0 auto 16px; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 16px; padding: 18px 20px; box-shadow: var(--sombra);
}
.panel-titulo { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; margin-bottom: 12px; }

/* --- Formulario agregar producto --- */
.form-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-fila > input {
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px;
  font-size: 15px; color: var(--tinta); font-family: inherit; outline: none;
}
.form-fila > input:focus { border-color: var(--acento); }
#inNombre { flex: 1; min-width: 160px; }
.form-precio { display: flex; align-items: center; gap: 6px; border: 1px solid var(--borde); border-radius: 10px; padding: 0 11px; }
.form-precio:focus-within { border-color: var(--acento); }
.form-precio span { color: var(--suave); font-size: 15px; }
.form-precio input {
  width: 90px; border: none; padding: 10px 0; text-align: right; font-size: 15px;
  color: var(--tinta); font-family: inherit; outline: none; background: transparent;
}
#btnGuardar {
  padding: 10px 20px; border: none; background: var(--acento); color: #ffffff; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
#btnGuardar:hover { background: var(--acento-strong); }
#btnGuardar:disabled { opacity: .5; cursor: default; }
.form-msg { margin-top: 10px; font-size: 13px; font-weight: 600; min-height: 18px; }
.form-msg.ok { color: var(--ok); }
.form-msg.aviso { color: var(--aviso); }

/* --- Login del dueño --- */
.login-panel {
  max-width: 360px; margin: 56px auto 0; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 20px; padding: 28px 24px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 12px;
}
.login-titulo { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; text-align: center; margin-bottom: 4px; color: var(--marca); }
.login-panel input {
  padding: 11px 13px; border: 1px solid var(--borde); border-radius: 10px;
  font-size: 15px; color: var(--tinta); font-family: inherit; outline: none;
}
.login-panel input:focus { border-color: var(--acento); }
#btnEntrar {
  padding: 11px; border: none; background: var(--acento); color: #ffffff; border-radius: 10px;
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}
#btnEntrar:hover { background: var(--acento-strong); }
#btnEntrar:disabled { opacity: .5; cursor: default; }
.login-msg { font-size: 13px; font-weight: 600; color: var(--aviso); text-align: center; min-height: 16px; }

/* --- Lista de productos --- */
#lista { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.producto {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 16px 18px;
  box-shadow: var(--sombra); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.producto .nombre { font-size: 16px; font-weight: 600; letter-spacing: -0.1px; }
.producto .precios { text-align: right; white-space: nowrap; }
.producto .precio-usd { font-size: 17px; font-weight: 700; color: var(--acento); letter-spacing: -0.2px; }
.producto .precio-bs { font-size: 14px; font-weight: 600; color: var(--bolivar); margin-top: 2px; }
.producto .precio-costo { font-size: 12px; font-weight: 600; color: var(--suave); margin-top: 3px; }
.estado { max-width: 560px; margin: 0 auto; text-align: center; color: var(--suave); font-size: 14px; padding: 32px 0; }
.prod-izq { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stock-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stock-lbl { font-size: 12px; font-weight: 600; color: var(--suave); }
.stock-input {
  width: 72px; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 8px;
  font-size: 14px; font-family: inherit; color: var(--tinta); text-align: right; outline: none;
}
.stock-input:focus { border-color: var(--acento); }
.stock-save {
  padding: 6px 12px; border: none; background: var(--acento); color: #ffffff; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.stock-save:hover { background: var(--acento-strong); }
.stock-save:disabled { opacity: .5; cursor: default; }
.stock-msg { font-size: 12px; font-weight: 600; }
.stock-msg.ok { color: var(--ok); }
.stock-msg.aviso { color: var(--aviso); }
.stock-quit {
  padding: 6px 10px; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--suave);
  border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.stock-quit:hover { background: var(--fog); }

/* --- Badges del catálogo (cliente) --- */
.badge { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 9999px; letter-spacing: .2px; white-space: nowrap; }
.badge.b10 { background: rgba(194,116,10,.12); color: #b56a0a; }
.badge.b5 { background: rgba(194,116,10,.20); color: #985809; }
.badge.b1 { background: rgba(196,45,249,.12); color: #9d1fcf; }
.badge.b0 { background: var(--fog); color: var(--suave); }
.badge.bn { background: var(--fog); color: var(--suave); }
.badge.oferta { background: rgba(245,73,17,.12); color: #d63e0e; }
.precio-tachado { font-size: 13px; font-weight: 600; color: var(--suave); text-decoration: line-through; }

/* --- Nueva venta --- */
.venta-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.venta-add select {
  flex: 1; min-width: 160px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px;
  font-size: 15px; font-family: inherit; color: var(--tinta); background: var(--tarjeta); outline: none;
}
.venta-add select:focus { border-color: var(--acento); }
#ventaCant {
  width: 70px; padding: 10px; border: 1px solid var(--borde); border-radius: 10px;
  font-size: 15px; text-align: right; font-family: inherit; color: var(--tinta); outline: none;
}
#ventaCant:focus { border-color: var(--acento); }
#ventaAddBtn {
  padding: 10px 16px; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--tinta);
  border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
#ventaAddBtn:hover { background: var(--fog); }
#ventaLista { margin: 14px 0; display: flex; flex-direction: column; gap: 0; }
.venta-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--borde);
}
.venta-item .vi-nombre { flex: 1; }
.venta-item .vi-sub { font-weight: 700; color: var(--acento); white-space: nowrap; }
.venta-item .vi-quitar { border: none; background: none; color: var(--suave); cursor: pointer; font-size: 15px; font-family: inherit; }
.venta-vacia { color: var(--suave); font-size: 13px; padding: 10px 0; text-align: center; }
.venta-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.venta-total { font-size: 15px; font-weight: 600; }
.venta-total #ventaTotalUsd { color: var(--acento); font-weight: 700; }
.venta-total #ventaTotalBs { color: var(--suave); font-size: 13px; font-weight: 600; }
#ventaRegistrarBtn {
  padding: 10px 20px; border: none; background: var(--acento); color: #fff; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
#ventaRegistrarBtn:hover { background: var(--acento-strong); }
#ventaRegistrarBtn:disabled { opacity: .5; cursor: default; }
.venta-msg { margin-top: 10px; font-size: 13px; font-weight: 600; min-height: 16px; }
.venta-msg.ok { color: var(--ok); }
.venta-msg.aviso { color: var(--aviso); }

/* --- Ventas de hoy --- */
.hoy-total-chip, .caja-saldo-chip { font-size: 13px; font-weight: 700; color: var(--marca); }
.hoy-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--borde);
}
.hoy-item:last-child { border-bottom: none; }
.hoy-item .hi-info { color: var(--suave); font-size: 13px; }
.hoy-item .hi-total { font-weight: 700; color: var(--acento); white-space: nowrap; }

/* --- Caja (movimientos) --- */
.caja-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.caja-add select {
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px;
  font-size: 14px; font-family: inherit; color: var(--tinta); background: var(--tarjeta); outline: none;
}
#movConcepto {
  flex: 1; min-width: 150px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px;
  font-size: 15px; font-family: inherit; color: var(--tinta); outline: none;
}
#movConcepto:focus { border-color: var(--acento); }
#movBtn {
  padding: 10px 18px; border: none; background: var(--acento); color: #fff; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
#movBtn:hover { background: var(--acento-strong); }
#movBtn:disabled { opacity: .5; cursor: default; }
.caja-msg { margin-top: 10px; font-size: 13px; font-weight: 600; min-height: 16px; }
.caja-msg.ok { color: var(--ok); }
.caja-msg.aviso { color: var(--aviso); }
.caja-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--borde);
}
.caja-item:last-child { border-bottom: none; }
.caja-item .ci-concepto { flex: 1; }
.caja-item .ci-monto { font-weight: 700; white-space: nowrap; }
.ci-monto.entrada { color: var(--ok); }
.ci-monto.salida { color: var(--salida); }

/* --- Compras (costeo) --- */
.compra-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.compra-add select {
  flex: 1; min-width: 150px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px;
  font-size: 14px; font-family: inherit; color: var(--tinta); background: var(--tarjeta); outline: none;
}
.compra-add select:focus { border-color: var(--acento); }
#compraProveedor {
  flex: 1; min-width: 140px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px;
  font-size: 15px; font-family: inherit; color: var(--tinta); outline: none;
}
#compraProveedor:focus { border-color: var(--acento); }
#compraBtn {
  padding: 10px 18px; border: none; background: var(--acento); color: #fff; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
#compraBtn:hover { background: var(--acento-strong); }
#compraBtn:disabled { opacity: .5; cursor: default; }
.compra-unit { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--marca); min-height: 18px; }
.compra-msg { margin-top: 6px; font-size: 13px; font-weight: 600; min-height: 16px; }
.compra-msg.ok { color: var(--ok); }
.compra-msg.aviso { color: var(--aviso); }
.compra-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--borde);
}
.compra-item:last-child { border-bottom: none; }
.compra-item .cp-info { flex: 1; color: var(--suave); font-size: 13px; }
.compra-item .cp-info b { color: var(--tinta); font-weight: 600; }
.compra-item .cp-monto { font-weight: 700; color: var(--salida); white-space: nowrap; }

/* --- Tasa: barra compacta (admin) --- */
.tasa-bar {
  max-width: 560px; margin: 22px auto 0; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--suave); box-shadow: var(--sombra);
}
.tasa-bar-label { font-weight: 700; color: var(--tinta); }
.tasa-bar input {
  width: 110px; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--tinta); text-align: right; font-family: inherit; outline: none;
}
.tasa-bar input:focus { border-color: var(--acento); }
.btn-refrescar-mini {
  padding: 6px 11px; border: 1px solid var(--borde); background: var(--tarjeta); border-radius: 8px;
  font-size: 14px; cursor: pointer; font-family: inherit; color: var(--tinta);
}
.btn-refrescar-mini:hover { background: var(--fog); }
#tasaEstado { font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.punto.ok { background: var(--ok); }
.punto.aviso { background: var(--aviso); }
.texto-ok { color: var(--ok); font-weight: 600; }
.texto-aviso { color: var(--aviso); font-weight: 600; }
.tasa-fuente-mini { width: 100%; font-size: 11px; color: var(--suave); }
.tasa-fuente-mini a { color: var(--acento); text-decoration: none; font-weight: 600; }

/* --- Tasa: referencia del catálogo (cliente) --- */
.tasa-ref {
  max-width: 560px; margin: 24px auto 0; text-align: center; font-size: 12px; color: var(--suave);
  line-height: 1.6; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.tasa-ref strong { color: var(--tinta); font-weight: 600; }
.tasa-ref a { color: var(--acento); text-decoration: none; font-weight: 600; }

/* --- Reportes --- */
.rep-periodos { display: flex; gap: 6px; margin-bottom: 14px; }
.rep-btn {
  flex: 1; padding: 8px 6px; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--suave);
  border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.rep-btn.active { background: var(--marca); color: #fff; border-color: var(--marca); }
.rep-fila {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--borde); font-size: 14px;
}
.rep-fila:last-child { border-bottom: none; }
.rep-fila .rep-lbl { color: var(--suave); font-weight: 600; }
.rep-fila .rep-val { font-weight: 700; white-space: nowrap; }
.rep-fila.destacada { margin-top: 4px; padding-top: 14px; border-top: 2px solid var(--borde); }
.rep-fila.destacada .rep-lbl { color: var(--tinta); font-size: 15px; }
.rep-fila.destacada .rep-val { font-size: 18px; }
.rep-val.verde { color: var(--ok); }
.rep-val.roja { color: var(--salida); }
.rep-val.morada { color: var(--acento); }
.rep-nota { font-size: 12px; color: var(--suave); margin-top: 14px; line-height: 1.5; }