:root{
  --ink: oklch(22% 0.02 25);
  --ink-soft: oklch(45% 0.03 25);
  --bg: oklch(96% 0.014 50);
  --card: oklch(99% 0.003 40);
  --border: oklch(89% 0.015 35);
  --accent: oklch(38% 0.13 20);
  --accent-hover: oklch(34% 0.13 20);
  --accent-ink: oklch(97% 0.01 30);
  --accent-soft: oklch(90% 0.05 25);
  --danger: oklch(55% 0.19 25);
  --danger-bg: oklch(95% 0.04 25);
  --exito: oklch(42% 0.13 150);
  --exito-bg: oklch(95% 0.04 150);

  --verde: oklch(43% 0.1 165);
  --verde-suave: oklch(93% 0.045 165);

  --osc-1: oklch(34% 0.012 260);
  --osc-2: oklch(16% 0.01 260);
  --plata-1: oklch(91% 0.004 260);
  --plata-2: oklch(72% 0.008 260);
  --plata-ink: oklch(20% 0.01 260);
  --rojo-1: oklch(58% 0.18 25);
  --rojo-2: oklch(45% 0.18 25);
  --neutro: oklch(93% 0.006 260);
  --neutro-borde: oklch(84% 0.008 260);

  --azul-1: oklch(50% 0.135 253);
  --azul-2: oklch(36% 0.15 258);
  --gris-card-1: oklch(52% 0.02 255);
  --gris-card-2: oklch(37% 0.022 258);
  --ambar-1: oklch(85% 0.11 75);
  --ambar-2: oklch(76% 0.14 60);
  --ambar-ink: oklch(30% 0.08 55);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-liquido: cubic-bezier(0.32, 1.4, 0.6, 1);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
.icono{ flex-shrink: 0; vertical-align: middle; }

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}

/* ---------- login ---------- */

body.login-page{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  body.login-page{ grid-template-columns: 1.05fr 1fr; }
}

.brand{
  display: none;
  position: relative;
  background: linear-gradient(160deg, oklch(30% 0.12 18), oklch(20% 0.09 15));
  color: var(--accent-ink);
  padding: 4rem 3.5rem;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
@media (min-width: 900px){ .brand{ display: flex; } }
.brand::before{
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  right: -180px; top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, oklch(48% 0.13 20 / 0.55), transparent 70%);
}
.brand .mark{
  width: 44px; height: 44px;
  border-radius: 10px;
  background: oklch(97% 0.01 30 / 0.14);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.brand h1{
  font-size: clamp(1.75rem, 2.4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  max-width: 20ch;
  margin: 2.5rem 0 0.75rem;
  position: relative; z-index: 1;
}
.brand p{
  font-size: 1rem;
  line-height: 1.6;
  color: oklch(92% 0.03 30 / 0.85);
  max-width: 34ch;
  margin: 0;
  position: relative; z-index: 1;
}
.brand footer{
  font-size: 0.8125rem;
  color: oklch(92% 0.03 30 / 0.6);
  position: relative; z-index: 1;
}

.panel{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}
.card{ width: 100%; max-width: 380px; }
.card .mark-mobile{
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
}
@media (min-width: 900px){ .card .mark-mobile{ display: none; } }

h2{ font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.4rem; }
.sub{ color: var(--ink-soft); font-size: 0.9375rem; margin: 0 0 1.5rem; }

.alert-error{
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid oklch(80% 0.08 25);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
  margin: 0 0 1.25rem;
}
.alert-exito{
  background: var(--exito-bg);
  color: var(--exito);
  border: 1px solid oklch(78% 0.1 150);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
  margin: 0 0 1.25rem;
}

form{ display: flex; flex-direction: column; gap: 1.25rem; }
label{
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.field input,
.campo-grupo input,
.campo-grupo textarea,
.campo-grupo select{
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card);
  font-size: 0.9375rem;
  color: var(--ink);
  font-family: inherit;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.field input::placeholder,
.campo-grupo input::placeholder,
.campo-grupo textarea::placeholder{ color: oklch(65% 0.01 30); }
.field input:hover,
.campo-grupo input:hover,
.campo-grupo textarea:hover{ border-color: oklch(78% 0.02 30); }
.field input:focus-visible,
.campo-grupo input:focus-visible,
.campo-grupo textarea:focus-visible{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.campo-grupo{ margin-bottom: 1.25rem; }
.campo-grupo label{
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.campo-check label{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--ink);
}
.campo-check input{ accent-color: var(--accent); width: 16px; height: 16px; }
.campo-fila{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.dato-fijo-label{
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.dato-fijo{
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.9375rem;
}
.dato-ayuda{
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
form.formulario-ancho{ display: block; max-width: 640px; }
.acciones-formulario{
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.acciones-formulario button{ width: auto; flex: 1; }

.btn-primario,
.btn-secundario{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 120ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.btn-primario{ background: var(--accent); color: var(--accent-ink); }
.btn-primario:hover{ background: var(--accent-hover); }
.btn-secundario{ background: var(--card); color: var(--ink); border: 1.5px solid var(--border); }
.btn-secundario:hover{ border-color: oklch(78% 0.02 30); }
.btn-primario:active, .btn-secundario:active{ transform: scale(0.97); }

button{
  margin-top: 0.25rem;
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background 160ms var(--ease-out);
}
button:hover{ background: var(--accent-hover); }
button:active{ transform: scale(0.97); }
button:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--accent); }

.foot-note{ margin-top: 1.75rem; text-align: center; font-size: 0.8125rem; color: var(--ink-soft); }

/* ---------- paginas internas ---------- */

body.app-page{ padding: 0 1.5rem 3rem; max-width: 1080px; margin: 0 auto; }
body.pagina-ancha{ max-width: 1500px; }

.pie-app{
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.pie-app p{ margin: 0; font-size: 0.8125rem; color: var(--ink-soft); }
@media (max-width: 480px){
  body.app-page{ padding: 0 1rem 2.5rem; }
}

.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 1.25rem 1.5rem;
  margin: 0 -1.5rem 2rem;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 480px){
  .topbar{ padding: 1rem; margin: 0 -1rem 1.5rem; }
}
.topbar-titulo{ display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.topbar > .nav-links{ flex-basis: 100%; }
.topbar-marca{
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(155deg, oklch(44% 0.14 22), oklch(30% 0.11 15));
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px -4px oklch(30% 0.11 15 / 0.55);
}
.topbar h1{
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0.2rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip{
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ambar-ink);
  background: linear-gradient(135deg, var(--ambar-1), var(--ambar-2));
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px -2px oklch(60% 0.14 60 / 0.4);
}
.chip-cajero{ color: var(--plata-ink); background: var(--neutro); box-shadow: none; }
.chip-vigente{ color: var(--exito); background: var(--exito-bg); }
.chip-vencida{ color: var(--danger); background: var(--danger-bg); }

.punto-estado{
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--exito);
  margin-right: 0.4rem;
}
.punto-estado.inactivo{ background: oklch(65% 0.02 40); }

.topbar-cuenta{ display: flex; align-items: center; gap: 0.65rem; }
.boton-circular{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out),
    transform 120ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.boton-circular:hover{
  background: var(--danger-bg);
  color: var(--danger);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px oklch(55% 0.19 25 / 0.35);
}
.boton-circular:active{ transform: scale(0.94); }
.boton-circular:focus-visible{ outline: 2px solid var(--azul-2); outline-offset: 2px; }
.avatar-circular{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul-1), var(--azul-2));
  color: oklch(99% 0 0);
  font-weight: 700;
  font-size: 0.9375rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px -2px oklch(40% 0.15 258 / 0.5);
  user-select: none;
}

.nav-links{ display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.nav-links a{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color 200ms var(--ease-out), transform 120ms var(--ease-out);
}
.nav-links a .icono, .nav-links a .texto{ position: relative; z-index: 2; }
.nav-links a .capa{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, var(--azul-1), var(--azul-2));
  clip-path: inset(100% 0 0 0 round 999px);
  transition: clip-path 260ms var(--ease-liquido);
}
.nav-links a:hover{ color: oklch(99% 0 0); }
.nav-links a:hover .capa{ clip-path: inset(0% 0 0 0 round 999px); }
.nav-links a:active{ transform: scale(0.97); }
.nav-links a:focus-visible{ outline: 2px solid var(--azul-2); outline-offset: 2px; }
.nav-links a.activo{ color: oklch(99% 0 0); }
.nav-links a.activo .capa{
  clip-path: inset(0% 0 0 0 round 999px);
  animation: llenar-activo 320ms var(--ease-liquido) 60ms both;
}
@keyframes llenar-activo{
  from{ clip-path: inset(100% 0 0 0 round 999px); }
  to{ clip-path: inset(0% 0 0 0 round 999px); }
}
@media (prefers-reduced-motion: reduce){
  .nav-links a.activo .capa{ animation: none; }
}
@media (max-width: 640px){
  .nav-links a .texto{ display: none; }
  .nav-links a{ padding: 0.6rem; }
}

.toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.buscador{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  max-width: 360px;
  min-width: 220px;
}
.buscador .icono{ color: var(--ink-soft); }
.buscador input{
  width: 100%;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card);
  font-size: 0.875rem;
}
.buscador button{
  width: auto;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
}
.toolbar-acciones{ display: flex; flex-wrap: wrap; gap: 0.6rem; }
.toolbar-acciones a{ gap: 0.5rem; }
@media (max-width: 560px){
  .toolbar{ align-items: stretch; }
  .buscador{ max-width: none; }
  .toolbar-acciones{ width: 100%; }
  .toolbar-acciones a{ flex: 1; }
}

/* Inventario: acciones en columna al lado de la tabla. */
.con-lateral{ display: flex; align-items: flex-start; gap: 1.25rem; }
.con-lateral-principal{ flex: 1; min-width: 0; }
.acciones-lateral{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 168px;
  flex: none;
}
.acciones-lateral .btn-secundario{ justify-content: flex-start; gap: 0.5rem; }
.filtro-categoria{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.filtro-categoria label{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.filtro-categoria select{
  width: 100%;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-size: 0.875rem;
  font-family: inherit;
}
.filtro-categoria select:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.filtro-categoria button{ width: 100%; margin-top: 0; }
@media (max-width: 1100px){
  .con-lateral{ flex-direction: column; }
  .acciones-lateral{ width: 100%; flex-direction: row; flex-wrap: wrap; }
  .acciones-lateral .btn-secundario{ flex: 1; justify-content: center; }
  .filtro-categoria{ flex-basis: 100%; }
}
@media (max-width: 560px){
  .acciones-lateral .btn-secundario{ flex-basis: 100%; }
}

.tabla-envoltorio{ overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; }
.tabla{ width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tabla th, .tabla td{
  text-align: left;
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tabla th{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: oklch(97% 0.006 40);
}
.tabla tbody tr:last-child td{ border-bottom: none; }
.tabla tbody tr:hover{ background: oklch(98% 0.004 40); }
.col-acciones{ display: flex; gap: 0.4rem; align-items: center; flex-wrap: nowrap; }
.col-acciones form{ display: inline; }

.btn-fila{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: auto;
  height: 36px;
  padding: 0 0.75rem;
  margin: 0;
  border: none;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), box-shadow 160ms var(--ease-out), filter 160ms var(--ease-out);
}
.btn-fila:active{ transform: translateY(1px) scale(0.98); }

.btn-fila.oscuro{
  background: linear-gradient(180deg, var(--osc-1), var(--osc-2));
  color: oklch(97% 0 0);
  box-shadow: 0 2px 6px -1px oklch(0% 0 0 / 0.35), inset 0 1px 0 oklch(100% 0 0 / 0.1);
}
.btn-fila.oscuro:hover{ filter: brightness(1.15); box-shadow: 0 4px 10px -2px oklch(0% 0 0 / 0.4), inset 0 1px 0 oklch(100% 0 0 / 0.12); }

.btn-fila.plata{
  background: linear-gradient(180deg, var(--plata-1), var(--plata-2));
  color: var(--plata-ink);
  box-shadow: 0 2px 6px -1px oklch(0% 0 0 / 0.15), inset 0 1px 0 oklch(100% 0 0 / 0.6);
}
.btn-fila.plata:hover{ filter: brightness(1.05); box-shadow: 0 4px 10px -2px oklch(0% 0 0 / 0.2), inset 0 1px 0 oklch(100% 0 0 / 0.7); }

.btn-fila.rojo{
  background: linear-gradient(180deg, var(--rojo-1), var(--rojo-2));
  color: oklch(99% 0 0);
  box-shadow: 0 2px 6px -1px oklch(50% 0.19 25 / 0.45), inset 0 1px 0 oklch(100% 0 0 / 0.15);
}
.btn-fila.rojo:hover{ filter: brightness(1.1); box-shadow: 0 4px 10px -2px oklch(50% 0.19 25 / 0.5), inset 0 1px 0 oklch(100% 0 0 / 0.18); }

.btn-fila.azul{
  background: linear-gradient(180deg, var(--azul-1), var(--azul-2));
  color: oklch(99% 0 0);
  box-shadow: 0 2px 6px -1px oklch(36% 0.15 258 / 0.45), inset 0 1px 0 oklch(100% 0 0 / 0.15);
}
.btn-fila.azul:hover{ filter: brightness(1.1); box-shadow: 0 4px 10px -2px oklch(36% 0.15 258 / 0.5), inset 0 1px 0 oklch(100% 0 0 / 0.18); }

.btn-fila:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.vacio{ text-align: center; color: var(--ink-soft); padding: 2rem 1rem; white-space: normal; }

.etiqueta-tipo{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--neutro);
  border: 1px solid var(--neutro-borde);
}

.estado-vacio{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3.5rem 1rem;
  color: var(--ink-soft);
  border: 1px dashed var(--border);
  border-radius: 16px;
}
.estado-vacio .icono{ color: var(--accent-soft); background: var(--accent); border-radius: 50%; padding: 14px; box-sizing: content-box; }
.estado-vacio p{ margin: 0; font-size: 0.9375rem; }

.paginacion{ display: flex; gap: 0.4rem; margin-top: 1.25rem; }
.paginacion a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  border-radius: 8px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
}
.paginacion a:hover{ background: var(--accent-soft); }
.paginacion a.activa{ background: var(--accent); color: var(--accent-ink); }

.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.stat-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: oklch(99% 0 0);
}
.stat-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 100% 0%, oklch(100% 0 0 / 0.16), transparent 55%);
  pointer-events: none;
}
.stat-card.azul{ background: linear-gradient(150deg, var(--azul-1), var(--azul-2)); box-shadow: 0 10px 24px -12px oklch(40% 0.15 258 / 0.55); }
.stat-card.gris{ background: linear-gradient(150deg, var(--gris-card-1), var(--gris-card-2)); box-shadow: 0 10px 24px -12px oklch(46% 0.02 258 / 0.4); }
.stat-card.rojo{ background: linear-gradient(150deg, var(--rojo-1), var(--rojo-2)); box-shadow: 0 10px 24px -12px oklch(45% 0.18 25 / 0.55); }
.stat-card > div{ display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; position: relative; z-index: 1; }
.stat-icono{
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 13px;
  background: oklch(100% 0 0 / 0.18);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.stat-label{ font-size: 0.8125rem; font-weight: 600; opacity: 0.92; }
.stat-value{ font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- ventas ---------- */

.buscador-ancho{ max-width: 480px; }
.seccion-espaciada{ margin-bottom: 2rem; }
.subtitulo-seccion{ font-size: 1.05rem; font-weight: 700; margin: 1rem 0; }

.activo-filtro{ background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.activo-filtro:hover{ border-color: transparent; }

.buscador select{
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-size: 0.875rem;
  font-family: inherit;
  max-width: 180px;
}
.buscador select:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Filtro de rango de fechas + categoria: pastillas compactas. */
.filtro-fechas{ display: flex; flex-direction: row; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0; }
.pastilla-campo{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.pastilla-campo:has(:focus-visible){
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pastilla-campo .micro{
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pastilla-campo input[type="date"], .pastilla-campo select{
  border: none;
  padding: 0;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  font-family: inherit;
}
.pastilla-campo input[type="date"]:focus-visible, .pastilla-campo select:focus-visible{ outline: none; }
.flecha-rango{ color: var(--ink-soft); font-size: 0.8125rem; }
.boton-filtrar-circular{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.boton-filtrar-circular:hover{ background: var(--accent-hover); }
.boton-filtrar-circular:active{ transform: scale(0.94); }
.boton-filtrar-circular:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 620px){
  .filtro-fechas{ flex-direction: column; align-items: stretch; }
  .pastilla-campo{ justify-content: space-between; }
  .flecha-rango{ display: none; }
}

.advertencia-precio{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--danger);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.desglose{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.9375rem;
}
.desglose div{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink-soft);
}
.desglose div span:last-child{ font-variant-numeric: tabular-nums; white-space: nowrap; }
.desglose div.desglose-neto{
  border-top: 1px solid var(--border);
  padding-top: 0.4rem;
  font-weight: 700;
  color: var(--ink);
}

.resumen-total{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 1.25rem 0;
  font-weight: 600;
}
.resumen-total-valor{ font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }

.btn-cobrar{
  width: 100%;
  padding: 1.1rem;
  border-radius: 12px;
  border: none;
  background: linear-gradient(180deg, var(--osc-1), var(--osc-2));
  color: oklch(97% 0 0);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px -2px oklch(0% 0 0 / 0.4), inset 0 1px 0 oklch(100% 0 0 / 0.1);
  transition: filter 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.btn-cobrar:hover{ filter: brightness(1.12); }
.btn-cobrar:active{ transform: scale(0.99); }

/* ---------- comprobante ---------- */

.ticket{
  max-width: 320px;
  margin: 0 auto 1.5rem;
  padding: 1.5rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.8125rem;
}
.ticket-encabezado{ text-align: center; margin-bottom: 1rem; }
.ticket-encabezado strong{ display: block; font-size: 1rem; margin-bottom: 0.25rem; }
.ticket-encabezado p{ margin: 0.1rem 0; color: var(--ink-soft); }
.ticket-meta{
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  padding: 0.75rem 0;
  margin-bottom: 0.75rem;
}
.ticket-meta p{ margin: 0.15rem 0; }
.ticket-items{ width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; }
.ticket-items td{ padding: 0.5rem 0; border-bottom: 1px dashed var(--border); vertical-align: top; }
.ticket-items tr:last-child td{ border-bottom: none; }
.ticket-items small{ color: var(--ink-soft); }
.ticket-subtotal{ text-align: right; white-space: nowrap; font-weight: 600; }
.ticket-total{
  display: flex;
  justify-content: space-between;
  font-size: 1.05rem;
  font-weight: 700;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ink);
}
.ticket-pago{ padding-top: 0.5rem; }
.ticket-pago p{ display: flex; justify-content: space-between; margin: 0.2rem 0; color: var(--ink-soft); }
.ticket-nota{ text-align: center; color: var(--ink-soft); font-size: 0.75rem; margin: 0.75rem 0 0; }
.ticket-botones{ max-width: 320px; margin: 0 auto; }

.solo-impresion{ display: none; }

@media print{
  .topbar, .no-imprimir{ display: none !important; }
  body.recibo-page{ padding: 0; background: white; }
  .ticket{ max-width: none; margin: 0; border: none; box-shadow: none; }

  body.informe-imprimible{ padding: 0; background: white; }
  .solo-impresion{ display: block; margin-bottom: 1.5rem; }
  .solo-impresion h2{ margin: 0 0 0.25rem; font-size: 1.25rem; }
  .solo-impresion p{ margin: 0.15rem 0; color: black; }
  body.informe-imprimible .tabla-envoltorio{ border: none; overflow: visible; }
  body.informe-imprimible .tabla{ font-size: 0.8125rem; }
  body.informe-imprimible .col-acciones{ display: none; }
}