/* ==========================================================================
   POS DESIGN SYSTEM — Fastbot Point of Sale
   --------------------------------------------------------------------------
   Normalización de la UI del POS: una sola escala de tamaños, radios,
   paddings y colores para TODA la página. Cada tipo de elemento (h*, p,
   label, input, select, button, span, small) tiene un tamaño fijo y
   consistente; ningún elemento se estiliza con utilidades sueltas.

   Principios:
   • Colores   → solo tokens semánticos del tema (--color-*) → adaptan a dark.
   • Radii     → escala 6/8/12px: badges 6px, átomos 8px, contenedores 12px.
   • Elevación → bordes + shadow-card (sutil). Sin sombras grandes de color.
   • Tipografía: escala compacta fija por tipo de elemento (ver abajo).
   ========================================================================== */

/* --------------------------------------------------------------------------
   TIPOGRAFÍA (escala única)
   --------------------------------------------------------------------------
   .pos-panel-title   → h2 de panel / títulos de modal   (14px, 700, MAY)
   .pos-panel-sub     → subtítulo bajo el título          (11px, 600, MAY)
   .pos-section-title → títulos de sección (sidebar)      (11px, 800, MAY)
   .pos-field-label   → etiquetas de campos               (10px, 700, MAY)
   .pos-meta          → metadatos / descripciones         (11px, 500)
   .pos-name          → nombre de producto / venta        (13px, 700)
   .pos-value         → valores generales                 (13px, 700)
   .pos-price         → precios unitarios / subtotales    (15px, 700)
   .pos-amount        → montos destacados                 (18px, 700)
   .pos-total         → TOTAL a pagar (único)             (24px, 700)
   .pos-empty-title   → títulos de estados vacíos         (13px, 700, MAY)
   .pos-empty-sub     → subtítulo de estados vacíos       (12px, 500)
   -------------------------------------------------------------------------- */
.pos-panel-title   { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: -.025em; color: var(--color-secondary); }
.pos-panel-sub     { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-subtle); }
.pos-section-title { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--color-subtle); }
.pos-field-label   { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-subtle); }
.pos-field-label-lg { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-subtle); }
.pos-meta          { font-size: .6875rem; font-weight: 500; color: var(--color-muted); }
.pos-name          { font-size: .8125rem; font-weight: 700; color: var(--color-secondary); }
.pos-value         { font-size: .8125rem; font-weight: 700; color: var(--color-secondary); }
.pos-price         { font-size: .9375rem; font-weight: 700; color: var(--color-secondary); }
.pos-amount        { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; color: var(--color-secondary); }
.pos-total         { font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; color: var(--color-secondary); }
.pos-empty-title   { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.pos-empty-sub     { font-size: .75rem; font-weight: 500; color: var(--color-subtle); }

/* Utilidades de color (ganan a la tipografía del POS; reemplazan a text-*) */
.pos-text-primary { color: var(--color-primary); }
.pos-text-secondary { color: var(--color-secondary); }
.pos-text-muted { color: var(--color-muted); }
.pos-text-subtle { color: var(--color-subtle); }
.pos-text-success { color: var(--color-success); }
.pos-text-danger { color: var(--color-danger); }
.pos-text-warning { color: var(--color-warning); }

/* --------------------------------------------------------------------------
   BOTONES (complementan el .btn global; radios de átomo 8px)
   -------------------------------------------------------------------------- */
.btn-solid-success { background: var(--color-success); color: #fff; }
.btn-solid-success:hover { background: var(--color-success); filter: brightness(.93); }
.btn-solid-danger  { background: var(--color-danger); color: #fff; }
.btn-solid-danger:hover  { background: var(--color-danger); filter: brightness(.93); }

/* --------------------------------------------------------------------------
   BÚSQUEDA PRINCIPAL
   -------------------------------------------------------------------------- */
.pos-search {
  display: block;
  width: 100%;
  border: 1px solid transparent;
  border-radius: .5rem;
  background: var(--color-surface-input);
  color: var(--color-secondary);
  font-size: .875rem;
  font-weight: 600;
  padding: .5625rem 1rem .5625rem 2.5rem;
  outline: none;
  transition: background-color .15s ease, border-color .15s ease;
  min-width: 300px;
}
.pos-search::placeholder { color: var(--color-subtle); }
.pos-search:focus { background: var(--color-surface); border-color: var(--color-primary); }
.pos-search-icon {
  position: absolute;
  inset-block: 0;
  left: .875rem;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--color-subtle);
}

/* Campo en estado de error (borde de peligro, complementa .field) */
.pos-field-error { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); }
.pos-field-error:focus { border-color: var(--color-danger); }

/* Texto de error pequeño (ej: "RUT Inválido") */
.pos-error-text {
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-danger);
}

/* --------------------------------------------------------------------------
   BADGES (estado / método de pago)
   -------------------------------------------------------------------------- */
.pos-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .125rem .5rem;
  border-radius: .375rem;
  font-size: .625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.15;
  white-space: nowrap;
}
.pos-badge--success { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); }
.pos-badge--danger  { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); }
.pos-badge--warning { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); }
.pos-badge--primary { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); }
.pos-badge--muted   { background: var(--color-surface-input); color: var(--color-muted); }

/* --------------------------------------------------------------------------
   TARJETAS / CONTENEDORES
   -------------------------------------------------------------------------- */
.pos-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: .75rem;   /* 12px: contenedores */
  box-shadow: var(--shadow-card);
}
.pos-card--neutral { background: var(--color-neutral-light); }
.pos-card--hoverable { transition: border-color .15s ease; }
.pos-card--hoverable:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); }
.pos-card--stock-danger { border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
.pos-card--stock-warning { border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); background: color-mix(in srgb, var(--color-warning) 10%, transparent); }
.pos-card--selected { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.pos-card--hover-danger:hover { border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); background: color-mix(in srgb, var(--color-danger) 5%, transparent); }

/* Chips: botones/etiquetas compactas (Ver Lotes, Item Exento) */
.pos-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: .5rem;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  font-size: .6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.pos-chip:hover { background: color-mix(in srgb, var(--color-primary) 16%, transparent); }
.pos-chip--neutral { background: var(--color-neutral-light); border-color: var(--color-border-subtle); color: var(--color-muted); }
.pos-chip--neutral:hover { background: var(--color-surface-input); color: var(--color-secondary); }

/* --------------------------------------------------------------------------
   CABECERA DE PANEL (pestañas Ventas/Productos/Pagos/Devoluciones/Movimientos)
   -------------------------------------------------------------------------- */
.pos-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
}
.pos-panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .625rem;
  flex-shrink: 0;
}
.pos-panel-icon--primary { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); }
.pos-panel-icon--success { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); }
.pos-panel-icon--danger  { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); }
.pos-panel-icon--warning { background: color-mix(in srgb, var(--color-warning) 10%, transparent); color: var(--color-warning); }
.pos-panel-icon--muted   { background: var(--color-surface-input); color: var(--color-muted); }

/* --------------------------------------------------------------------------
   CONTROLES SEGMENTADOS (modalidad de entrega, bloque horario, tipo de op.)
   -------------------------------------------------------------------------- */
.pos-segmented {
  display: flex;
  gap: .25rem;
  padding: .1875rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: .5rem;
  background: var(--color-surface-input);
}
.pos-segmented__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .4375rem .625rem;
  border-radius: .375rem;
  font-size: .6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pos-segmented__btn:hover { color: var(--color-secondary); }
.pos-segmented__btn--active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-card); }
.pos-segmented__btn--active-danger  { background: var(--color-danger); color: #fff; }
.pos-segmented__btn--active-success { background: var(--color-success); color: #fff; }

/* --------------------------------------------------------------------------
   MODALES
   -------------------------------------------------------------------------- */
.pos-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(2 6 23 / .6);
  backdrop-filter: blur(2px);
}
.pos-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: .75rem;   /* 12px: contenedores (antes 24px/32px) */
  box-shadow: var(--shadow-2xl);
  width: 100%;
}
.pos-modal--sm { max-width: 24rem; }
.pos-modal--md { max-width: 28rem; }
.pos-modal--lg { max-width: 42rem; }

/* --------------------------------------------------------------------------
   SIDEBAR (panel derecho de Caja) — más angosto y compacto
   -------------------------------------------------------------------------- */
.pos-sidebar {
  width: 460px;
  flex-shrink: 0;
  border-left: 1px solid var(--color-border-subtle);
  background: var(--color-neutral-light);
}
@media (max-width: 1280px) {
  .pos-sidebar { width: 400px; }
}

/* --------------------------------------------------------------------------
   FILAS DE RESUMEN (totales del footer de Caja)
   -------------------------------------------------------------------------- */
.pos-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .375rem 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.pos-summary-row:last-child { border-bottom: 0; }
.pos-summary-row .pos-meta { color: var(--color-subtle); }

/* --------------------------------------------------------------------------
   STEPPER DE CANTIDAD (+ / -)
   -------------------------------------------------------------------------- */
.pos-stepper {
  display: inline-flex;
  align-items: center;
  gap: .125rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  background: var(--color-surface);
}
.pos-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.pos-stepper__btn:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.pos-stepper__input {
  width: 2.5rem;
  border: none;
  background: transparent;
  outline: none;
  text-align: center;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--color-secondary);
  appearance: textfield;
  -moz-appearance: textfield;
}
.pos-stepper__input::-webkit-outer-spin-button,
.pos-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --------------------------------------------------------------------------
   NOTAS / AVISOS (info, stock, errores)
   -------------------------------------------------------------------------- */
.pos-note {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .75rem;
  border: 1px solid transparent;
  border-radius: .5rem;
}
.pos-note__icon { flex-shrink: 0; }
.pos-note__text { font-size: .6875rem; font-weight: 600; line-height: 1.4; }
.pos-note--info    { background: color-mix(in srgb, var(--color-primary) 8%, transparent); border-color: color-mix(in srgb, var(--color-primary) 18%, transparent); }
.pos-note--info .pos-note__icon { color: var(--color-primary); }
.pos-note--info .pos-note__text { color: var(--color-muted); }
.pos-note--danger  { background: color-mix(in srgb, var(--color-danger) 8%, transparent); border-color: color-mix(in srgb, var(--color-danger) 18%, transparent); }
.pos-note--danger .pos-note__icon { color: var(--color-danger); }
.pos-note--danger .pos-note__text { color: var(--color-danger); }
.pos-note--warning { background: color-mix(in srgb, var(--color-warning) 10%, transparent); border-color: color-mix(in srgb, var(--color-warning) 22%, transparent); }
.pos-note--warning .pos-note__icon { color: var(--color-warning); }
.pos-note--warning .pos-note__text { color: var(--color-warning); }
.pos-note--success { background: color-mix(in srgb, var(--color-success) 8%, transparent); border-color: color-mix(in srgb, var(--color-success) 18%, transparent); }
.pos-note--success .pos-note__icon { color: var(--color-success); }
.pos-note--success .pos-note__text { color: var(--color-success); }

/* --------------------------------------------------------------------------
   ESTADOS VACÍOS
   -------------------------------------------------------------------------- */
.pos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.pos-empty__icon { color: var(--color-subtle); opacity: .45; margin-bottom: .25rem; }

/* --------------------------------------------------------------------------
   CAJA DE ÍCONO ESTÁTICA (ej: chevron en resultados de búsqueda)
   -------------------------------------------------------------------------- */
.pos-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: .5rem;
  background: var(--color-surface);
  color: var(--color-muted);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   CAMPO DE ENTRADA INLINE (barra de entrada manual)
   -------------------------------------------------------------------------- */
.pos-inline-field {
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  padding: 0.4rem 0.4rem;
  border-radius: 6px;
  outline: none;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--color-secondary);
}
.pos-inline-field::placeholder { color: var(--color-subtle); }

/* Contenedor de entrada manual: borde primario al enfocar dentro */
.pos-manual-entry {
  border: 1px solid transparent;
  align-self: flex-start;
  max-width: 100%;
  flex-wrap: wrap;
}
.pos-manual-entry:focus-within { background: var(--color-surface); }

/* Separador vertical entre grupos de campos (sin fondo, se separa con líneas) */
.pos-divider {
  align-self: stretch;
  width: 1px;
  flex-shrink: 0;
  background: var(--color-border-subtle);
}

/* Fila 1 (búsqueda + cargar cotización): colapsa a 2 filas cuando el contenido
   no cabe y oculta el separador vertical. Container query ligada al ancho real
   de la fila (no al viewport). */
.pos-toolbar-row { container-type: inline-size; }
@container (max-width: 480px) {
  .pos-toolbar-row > .pos-divider { display: none; }
}

/* Badge de estado dentro del botón Confirmar (Saldado / Pendiente) */
.pos-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .625rem;
  border-radius: .5rem;
  background: rgb(255 255 255 / .15);
}
.pos-pending-badge__label {
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgb(255 255 255 / .8);
}
.pos-pending-badge__amount {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}

/* Anchos y paddings de campos: las utilidades w-* y pl-* de Tailwind viven en
   @layer utilities y NO pueden sobrescribir .field (fuera de capas). Estas
   utilidades nativas del POS sí ganan (misma especificidad, archivo posterior). */
.pos-w-16 { width: 4rem; }
.pos-w-20 { width: 5rem; }
.pos-w-24 { width: 6rem; }
.pos-w-28 { width: 7rem; }
.pos-w-36 { width: 9rem; }
.pos-pl-7 { padding-left: 1.75rem; }

/* Input del modal de búsqueda (paleta de comandos) */
.pos-modal-search {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-secondary);
}
.pos-modal-search::placeholder { color: var(--color-subtle); }

/* --------------------------------------------------------------------------
   TABLA DEL CARRITO (lista de productos añadidos)
   -------------------------------------------------------------------------- */
.pos-cart-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}
.pos-cart-table thead th {
  padding: .5rem;
  background: var(--color-surface-input);
  color: var(--color-muted);
  font-size: .625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border-subtle);
}
.pos-cart-table thead th.is-right,
.pos-cart-table tbody td.is-right { text-align: right; }
.pos-cart-table thead th.is-center,
.pos-cart-table tbody td.is-center { text-align: center; }
.pos-cart-table tbody td {
  padding: .5rem;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
  overflow: hidden;
}
.pos-cart-table tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); }
.pos-cart-table tbody tr.pos-cart-row--danger { background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface)); }
.pos-cart-table tbody tr.pos-cart-row--warning { background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface)); }

/* Columnas: la primera (Producto) toma el resto del ancho */
.pos-cart-table th:nth-child(2) { width: 52px; }
.pos-cart-table th:nth-child(3) { width: 108px; }
.pos-cart-table th:nth-child(4) { width: 112px; }
.pos-cart-table th:nth-child(5) { width: 70px; }
.pos-cart-table th:nth-child(6) { width: 112px; }
.pos-cart-table th:nth-child(7) { width: 44px; }
.pos-cart-product { overflow: hidden; }
.pos-cart-product > div { min-width: 0; }

/* Chip pequeño para la fila de lote del carrito */
.pos-chip--sm { padding: .125rem .5rem; font-size: .625rem; max-width: 100%; overflow: hidden; }

/* Ancho para el campo de carga de cotización */
.pos-w-32 { width: 8rem; }