@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/CormorantGaramond-SemiBold.ttf"); font-weight: 600; }
@font-face { font-family: "Jost"; src: url("../assets/fonts/Jost.ttf"); font-weight: 100 900; }
@font-face { font-family: "Great Vibes"; src: url("../assets/fonts/GreatVibes.ttf"); }
@font-face { font-family: "Bodoni Moda"; src: url("../assets/fonts/BodoniModa-ExtraBold.ttf"); font-weight: 800; }

:root {
  --negro: #141414;
  --oro: #8C6A4A;
  --oro-claro: #C9A27A;
  --marfil: #FAF7F2;
  --hueso: #F4EFE6;
  --tinta: #3E3934;
  --gris: #5A544C;
  --linea: #E2DBCF;
  --ok: #3F6B4F;
  --alerta: #A4452F;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
  --bodoni: "Bodoni Moda", Georgia, serif;
  --radio-btn: 6px;
  --titulo-peso: 600;
}

/* ===== Identidad de cada tienda =====
   Se reutilizan los mismos nombres de variable: --oro es el color de acento de la tienda
   (dorado café en Joab, vino en Jafeth) y --oro-claro su versión sobre fondos oscuros. */
html[data-tienda="jafeth"] {
  --oro: #6E2433; --oro-claro: #C46A7E;
  --marfil: #FAF7F2; --hueso: #F3EEE6; --linea: #E7E0D4;
  --tinta: #3A3330; --gris: #6B625A;
  --serif: "Jost", "Helvetica Neue", Arial, sans-serif;
  --radio-btn: 999px; --titulo-peso: 500;
}
html[data-tienda="jafeth"] .cifra b, html[data-tienda="jafeth"] .etiqueta b,
html[data-tienda="jafeth"] .prod .precio, html[data-tienda="jafeth"] .prod h3 { font-weight: 500; }
html[data-tienda="jafeth"] .etiqueta { clip-path: none; border-radius: 18px; padding-left: 30px; }
html[data-tienda="jafeth"] .etiqueta::before { display: none; }
/* vista de las dos tiendas: neutra, para que no gane ninguna marca */
html[data-tienda="ambas"] { --oro: #2E2926; --oro-claro: #BDB3A5; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--marfil); color: var(--tinta); font: 400 16px/1.5 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: var(--titulo-peso); color: var(--negro); margin: 0; }
h1, h2, h3, .cifra b, .etiqueta b, .precio, .doc .tot.grande, #esperado { font-feature-settings: "lnum" 1, "tnum" 1; } /* cifras alineadas, no estilo antiguo */
h1 { font-size: 56px; line-height: 1; letter-spacing: -.01em; }
h2 { font-size: 28px; }
h3 { font-size: 21px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.suave { color: var(--gris); }
.der { text-align: right; }
[hidden] { display: none !important; }

/* ---------- estructura ---------- */
.shell { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; }
.lateral { background: var(--negro); color: var(--hueso); padding: 40px 22px 28px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; }
.marca { display: flex; align-items: center; gap: 14px; padding: 0 10px 26px; }
.marca img { height: 54px; width: auto; max-width: 70px; }
.marca b { font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: .95; color: var(--hueso); display: block; }
.marca small { color: var(--oro-claro); font-size: 14px; letter-spacing: .04em; }
.lateral nav { display: flex; flex-direction: column; gap: 6px; }
.lateral nav a { color: #cfc7ba; text-decoration: none; padding: 13px 16px; border-radius: 4px; border-left: 2px solid transparent; letter-spacing: .02em; font-size: 17px; }
.lateral nav a:hover { color: var(--hueso); }
.lateral nav a[aria-current="page"] { background: transparent; color: var(--oro-claro); border-left-color: var(--oro-claro); font-weight: 600; }
.lateral .pie { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid #2a2a2a; font-size: 14px; color: #a79f93; }
.lateral .pie button { background: none; border: 0; color: var(--oro-claro); padding: 4px 0; cursor: pointer; text-decoration: underline; }

main { padding: 60px 72px 90px; min-width: 0; max-width: 1480px; }
.cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.cabeza p { margin: 12px 0 0; color: var(--gris); font-size: 17px; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- controles ---------- */
.btn { border: 1.5px solid var(--negro); background: transparent; color: var(--negro); padding: 10px 18px; border-radius: var(--radio-btn); cursor: pointer; font-weight: 600; transition: background .15s, color .15s; }
.btn:hover { background: var(--negro); color: var(--marfil); }
.btn.primario { background: var(--negro); color: var(--marfil); }
.btn.primario:hover { background: var(--oro); border-color: var(--oro); }
.btn.oro { background: var(--oro); border-color: var(--oro); color: #fff; }
.btn.oro:hover { background: var(--negro); border-color: var(--negro); }
.btn.peligro { border-color: var(--alerta); color: var(--alerta); }
.btn.peligro:hover { background: var(--alerta); color: #fff; }
.btn.chico { padding: 5px 11px; font-size: 14px; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn.bloque { width: 100%; padding: 14px; font-size: 17px; }

label.campo { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--gris); }
.campo input, .campo select, .campo textarea, input.suelto, select.suelto { background: #fff; border: 1.5px solid var(--linea); border-radius: 6px; padding: 10px 12px; color: var(--negro); min-width: 0; }
.campo input:focus, .campo select:focus, .campo textarea:focus, input.suelto:focus, select.suelto:focus { border-color: var(--oro); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 16%, transparent); }
.rejilla2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.rejilla3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ---------- paneles ---------- */
.panel { background: #fff; border: 1px solid #EFE9DE; border-radius: 6px; padding: 36px 38px; }
.panel + .panel { margin-top: 28px; }
.panel h3 { margin-bottom: 22px; font-size: 26px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 400; color: var(--gris); font-size: 15px; padding: 10px 12px; border-bottom: 1px solid var(--oro-claro); }
td { padding: 17px 12px; border-bottom: 1px solid var(--hueso); vertical-align: middle; }
th.der, td.der { text-align: right; }
tbody tr.clic { cursor: pointer; }
tbody tr.clic:hover { background: var(--marfil); }
.vacio { padding: 36px 10px; text-align: center; color: var(--gris); }
.etq { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 13px; background: var(--hueso); color: var(--tinta); }
.etq.mal { background: #f6e1db; color: var(--alerta); }
.etq.bien { background: #dfece3; color: var(--ok); }

.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 44px; }
.cifra { background: transparent; border-top: 1.5px solid var(--oro-claro); padding: 20px 0 0; }
.cifra span { color: var(--gris); font-size: 15px; }
.cifra b { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 3vw, 46px); white-space: nowrap; line-height: 1.1; color: var(--negro); margin-top: 4px; }
.cifra.oro b { color: var(--oro); }

/* ---------- vender ---------- */
.vender { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: start; }
.buscador { width: 100%; margin-bottom: 30px; font-size: 18px; padding: 16px 20px; border-radius: 4px; }
.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px; }
.prod { background: #fff; border: 1px solid #EFE9DE; border-radius: 6px; padding: 28px 26px; transition: border-color .2s; }
.prod:hover { border-color: var(--oro-claro); }
.prod h3 { font-size: 28px; line-height: 1.1; }
.prod .cat { color: var(--gris); font-size: 14px; }
.prod .precio { font-family: var(--serif); font-size: 30px; color: var(--oro); font-weight: 600; margin: 10px 0 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--linea); background: var(--marfil); border-radius: 6px; padding: 7px 12px; cursor: pointer; font-size: 15px; }
.chip:hover:not([disabled]) { border-color: var(--oro); background: #fff; }
.chip[disabled] { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.chip small { color: var(--gris); }

.carrito { position: sticky; top: 24px; }
.linea { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 18px 0; border-bottom: 1px solid var(--hueso); }
.linea .nom { font-weight: 600; color: var(--negro); }
.linea .det { color: var(--gris); font-size: 14px; }
.cant { display: inline-flex; align-items: center; gap: 8px; }
.cant button { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--linea); background: #fff; cursor: pointer; line-height: 1; }
.cant button:hover { border-color: var(--oro); }
.totales { margin: 22px 0; display: grid; gap: 8px; }
.totales div { display: flex; justify-content: space-between; }
.etiqueta { background: var(--oro); color: #fff; padding: 24px 26px 24px 58px; position: relative; margin: 24px 0 28px; clip-path: polygon(30px 0, 100% 0, 100% 100%, 30px 100%, 0 50%); }
.etiqueta::before { content: ""; position: absolute; left: 14px; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--marfil); transform: translateY(-50%); }
.etiqueta span { font-size: 14px; opacity: .92; }
.etiqueta b { display: block; font-family: var(--serif); font-size: 54px; font-weight: 600; line-height: 1.05; }
.cambio { font-weight: 600; margin-top: 8px; }

/* ---------- modal y aviso ---------- */
#modal-capa { position: fixed; inset: 0; background: #141414b3; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow: auto; z-index: 50; }
.modal { background: var(--marfil); border-radius: 12px; width: min(620px, 100%); padding: 28px; }
.modal.ancho { width: min(820px, 100%); }
.modal h2 { margin-bottom: 18px; }
.modal .pie-modal { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.fila-var { display: grid; grid-template-columns: 1fr 1fr 90px 34px; gap: 8px; margin-bottom: 8px; }
.fila-var input { background: #fff; border: 1.5px solid var(--linea); border-radius: 6px; padding: 8px 10px; min-width: 0; }
#aviso { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 30px); background: var(--negro); color: var(--hueso); padding: 12px 22px; border-radius: 8px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 80; border-left: 4px solid var(--oro-claro); }
#aviso.ver { opacity: 1; transform: translate(-50%, 0); }
#aviso.mal { border-left-color: #e08a74; }

/* ---------- ingreso ---------- */
.ingreso { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.ingreso .izq { background: var(--hueso); display: grid; place-items: center; padding: 40px; }
.ingreso .izq img { width: min(440px, 80%); }
.ingreso .der { display: grid; place-items: center; padding: 40px; }
.ingreso form { width: min(380px, 100%); display: grid; gap: 14px; }
.ingreso h1 { margin-bottom: 4px; }
.error { color: var(--alerta); min-height: 22px; font-size: 15px; }

/* ---------- gráficos ---------- */
.barras text { font: 12px var(--sans); fill: var(--gris); }
.hbar { display: grid; grid-template-columns: 130px 1fr 120px; gap: 16px; align-items: center; padding: 11px 0; }
.hbar .pista { background: var(--hueso); height: 6px; border-radius: 3px; overflow: hidden; }
.hbar .pista i { display: block; height: 100%; background: var(--oro); border-radius: 3px; }

/* ---------- impresión (PDF) ---------- */
#print-area { display: none; }
.doc { font-family: var(--sans); color: #141414; max-width: 760px; margin: 0 auto; }
.doc header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--oro); padding-bottom: 22px; margin-bottom: 30px; }
.doc header img { width: 150px; }
.doc header .datos { text-align: right; font-size: 12px; color: var(--gris); }
.doc h1 { font-size: 40px; margin-bottom: 8px; }
.doc h2 { font-size: 24px; color: var(--oro); }
.doc table { font-size: 13px; margin: 14px 0 22px; }
.doc td { padding: 9px 10px; }
.doc .tot { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #EFE9DE; }
.doc .tot.grande { font-family: var(--serif); font-size: 28px; border-bottom: 0; border-top: 1px solid var(--oro); margin-top: 12px; padding-top: 14px; }
.doc .firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 60px; font-size: 12px; text-align: center; }
.doc .firmas div { border-top: 1px solid #141414; padding-top: 6px; }
.doc.ticket { max-width: 76mm; font-size: 12px; }
.doc.ticket header { flex-direction: column; gap: 6px; text-align: center; }
.doc.ticket header .datos { text-align: center; }
.doc.ticket header img { width: 90px; }
.doc.ticket table { font-size: 11px; }
.doc.ticket h1 { font-size: 22px; }
.doc.ticket .tot.grande { font-size: 20px; }

@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; }
  body { background: #fff; }
  @page { margin: 14mm; }
}

/* ---------- pantallas angostas ---------- */
@media (max-width: 1100px) {
  .vender { grid-template-columns: 1fr; gap: 32px; }
  main { padding: 44px 36px 70px; }
  .carrito { position: static; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; }
  .marca { padding: 0 12px 0 0; }
  .lateral nav { flex-direction: row; flex-wrap: wrap; }
  .lateral .pie { margin: 0; border: 0; padding: 0; }
  main { padding: 28px 18px 60px; }
  h1 { font-size: 38px; }
  .cabeza { margin-bottom: 28px; }
  .panel { padding: 22px 18px; }
  .cifras { gap: 22px; }
  .ingreso { grid-template-columns: 1fr; }
  .ingreso .izq { padding: 20px; }
  .ingreso .izq img { width: 180px; }
  .rejilla2, .rejilla3 { grid-template-columns: 1fr; }
  .fila-var { grid-template-columns: 1fr 1fr 70px 34px; }
  .panel { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- cambio rápido de tienda ---------- */
.duo { display: flex; gap: 4px; margin: 0 8px 26px; padding: 4px; border: 1px solid #2c2c2c; border-radius: 999px; }
.duo button { flex: 1; border: 0; background: transparent; color: #cfc7ba; padding: 9px 8px; border-radius: 999px; cursor: pointer; font-weight: 600; }
.duo button:hover:not([aria-pressed="true"]) { color: #fff; }
.duo button[aria-pressed="true"] { background: var(--oro); color: #fff; }
.duo.claro { margin: 0; border-color: var(--linea); background: #fff; }
.duo.claro button { color: var(--gris); padding: 8px 20px; }
.duo.claro button[aria-pressed="true"] { background: var(--negro); color: var(--marfil); }
.lateral nav a.conjunto { margin-top: 16px; border-top: 1px solid #2a2a2a; border-radius: 0 0 4px 4px; padding-top: 18px; }
.marca { flex-wrap: wrap; }

/* ---------- elegir tienda en el ingreso ---------- */
.elegir { width: min(520px, 100%); }
.elegir h2 { margin-bottom: 24px; font-size: 32px; }
.tarjetas { display: grid; gap: 18px; }
.tarjeta-tienda { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 22px; padding: 20px 24px; background: #fff; border: 1.5px solid var(--linea); border-radius: 12px; cursor: pointer; text-align: left; font-size: 19px; color: var(--negro); transition: border-color .15s, box-shadow .15s; }
.tarjeta-tienda img { width: 150px; height: 96px; object-fit: contain; }
.tarjeta-tienda:hover { border-color: var(--oro-claro); }
.tarjeta-tienda[aria-pressed="true"] { border-color: var(--oro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 16%, transparent); }
.leyenda { display: flex; gap: 22px; margin-top: 10px; font-size: 14px; color: var(--gris); }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
@media (max-width: 760px) {
  .tarjeta-tienda { grid-template-columns: 90px 1fr; gap: 14px; padding: 14px; }
  .tarjeta-tienda img { width: 90px; height: 60px; }
  .lateral .duo { margin: 0 8px; }
}

.ingreso .der { text-align: left; }

main a:not(.btn) { color: var(--oro); }

.cargando, .sin-red { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: 14px; padding: 24px; color: var(--gris); }
.sin-red h1 { color: var(--negro); }