/* ================================================================
   EMBOTELLADORA — PULIDO DE SISTEMA (capa transversal)
   Se carga DESPUÉS de sdk/ui-components.css: sube el listón visual
   de TODOS los módulos a la vez sin tocar la paleta del tenant
   (marca sky-blue de EMACMSD viene de site-config).

   Objetivo: que todo se vea como un solo sistema pulido y calmado.
   Reglas de la Biblia UX-UI: jerarquía clara, respiro, sombras
   sutiles (no "floaty"), foco visible, una acción primaria clara.
   ================================================================ */

/* ================================================================
   SUPERFICIES NEUTRAS — el cambio grande.
   El tema del tenant tiñe TODO de azul (fondo, sub-secciones,
   bordes y hasta el texto), así que nada resalta = "azul sobre
   azul". Neutralizamos las superficies a gris muy claro y dejamos
   el AZUL DE MARCA (--brand #0284c7) solo como acento: botones,
   estado activo, cifras y enlaces. Resultado: blanco limpio que
   respira, con la identidad azul donde importa.

   Se re-declaran las variables en #app (gana sobre el :root inline
   que pone theme.js, y lo heredan todos los módulos, detalles y
   modales de una sola vez).
   ================================================================ */
#app {
  --bg: #f5f7fb;         /* fondo de página: gris azulado casi imperceptible */
  --panel: #ffffff;       /* tarjetas: blanco puro */
  --panel-2: #eef2f7;     /* sub-secciones / cabeceras / hover: gris muy claro */
  --border: #e3e8ef;      /* bordes limpios, neutros */
  --text: #0f172a;        /* texto casi-negro: legible, alto contraste */
  /* --brand (#0284c7), --muted, --success, etc. se mantienen: el azul vive en el acento */
}

/* El lienzo de contenido también neutro (no el lavado azul) */
.app-main,
#shell {
  background: var(--bg, #f5f7fb);
}

/* ----------------------------------------------------------------
   TARJETAS — sombra ambiente suave + esquinas más redondeadas.
   La sombra del tema (0 10px 15px) hace que las cards "floten"
   demasiado; la suavizamos para un aire moderno y limpio.
   ---------------------------------------------------------------- */
.sui-card {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
              0 6px 20px -8px rgba(15, 23, 42, 0.10);
}

.sui-card-header {
  border-radius: 14px 14px 0 0;
}

/* ----------------------------------------------------------------
   BOTONES — táctiles (44px), radio consistente, foco accesible.
   ---------------------------------------------------------------- */
.sui-btn {
  border-radius: 10px;
  font-weight: 600;
}

.sui-btn-primary,
.sui-btn-success,
.sui-btn-danger,
.sui-btn-secondary {
  min-height: 40px;
}

.sui-btn:focus-visible {
  outline: 2px solid var(--brand, #0284c7);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------
   PESTAÑAS — subrayado limpio, activa con peso claro.
   ---------------------------------------------------------------- */
.sui-tab {
  border-radius: 10px 10px 0 0;
  transition: color .15s ease, background .15s ease;
}

.sui-tab:hover {
  background: color-mix(in srgb, var(--brand, #0284c7) 7%, transparent);
}

.sui-tab.active {
  font-weight: 700;
}

.sui-tab:focus-visible {
  outline: 2px solid var(--brand, #0284c7);
  outline-offset: -2px;
}

/* ----------------------------------------------------------------
   BADGES / PILLS — un pelín más de aire, legibles.
   ---------------------------------------------------------------- */
.sui-badge {
  padding: 0.3rem 0.7rem;
  font-weight: 600;
}

/* ----------------------------------------------------------------
   TABLAS — cabecera calmada, filas con hover claro, más aire.
   ---------------------------------------------------------------- */
.sui-table thead th {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sui-table tbody td {
  padding: 0.85rem 1rem;
}

/* ----------------------------------------------------------------
   INPUTS / SELECTS — foco de marca consistente.
   ---------------------------------------------------------------- */
.sui-input:focus-visible,
.sui-select:focus-visible,
.sui-input:focus,
.sui-select:focus {
  outline: none;
  border-color: var(--brand, #0284c7);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #0284c7) 18%, transparent);
}

/* ----------------------------------------------------------------
   EMPTY STATES — icono con respiro y jerarquía (cuando el módulo
   usa .split-placeholder o .sui-empty).
   ---------------------------------------------------------------- */
.sui-empty-title,
.split-placeholder p:first-of-type {
  font-weight: 700;
  color: var(--text, #0f172a);
}

/* ================================================================
   TALLA ÚNICA DE CONTROLES — Biblia Cap. 5 (targets ≥44px)
   Medido en vivo ANTES: 12 alturas distintas (22→64px) en una
   misma pantalla. Regla de sistema:
     · Botones / selects / inputs / tabs de acción  → 44px
     · Chips de filtro                              → 40px
     · Botones de cierre / utilitarios              → 40×40
   !important a propósito: los CSS de módulo cargan DESPUÉS de esta
   hoja y esta capa es la constitución del sistema de diseño.
   ================================================================ */

/* --- Botones SDK: una sola talla, tipografía y radio --- */
.sui-btn,
.sui-btn.sui-btn-sm,
.sui-btn.sui-btn-lg {
  min-height: 44px !important;
  padding: 0.5rem 1.1rem !important;
  font-size: 0.875rem !important;
  border-radius: 10px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

/* --- Botones propios de módulos: misma talla --- */
#pedidos-module .action-btn-large,
#pedidos-module .table-action-btn,
#pedidos-module .btn-asignar-header,
#pedidos-module .refresh-list-btn,
#pedidos-module .pedidos-empty-clear,
#payments-manual-module .filters-toggle,
#payments-manual-module .receipt-tool-btn,
#delivery-admin-module .sui-btn {
  min-height: 44px !important;
  border-radius: 10px !important;
  font-size: 0.875rem !important;
}

#pedidos-module .action-btn-large {
  height: 44px !important;
  padding: 0 1.1rem !important;
}

#pedidos-module .refresh-list-btn {
  width: 44px !important;
  height: 44px !important;
}

/* Tabs del detalle de pedido y del SDK: misma altura de control */
.sui-tab,
#pedidos-module .tab-btn {
  min-height: 44px !important;
  font-size: 0.875rem !important;
}

/* --- Campos de formulario: alineados con los botones --- */
.sui-input,
.sui-select,
#pedidos-module .filter-select,
#pedidos-module .search-input,
#payments-manual-module .modern-select,
#payments-manual-module .modern-search {
  min-height: 44px !important;
  font-size: 0.875rem !important;
  border-radius: 10px !important;
}

/* --- Chips de filtro: talla secundaria uniforme (40px) --- */
#pedidos-module .pchip,
#payments-manual-module .filter-pill {
  min-height: 40px !important;
}

/* --- Utilitarios: cerrar modal / acciones de panel, mínimo tocable --- */
.modal-close {
  min-width: 40px !important;
  min-height: 40px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notification-panel-action {
  min-height: 36px !important;
  padding: 0.375rem 0.75rem !important;
}

/* ================================================================
   JERARQUÍA DE ACCIÓN — una sola acción primaria por barra.
   En el detalle de pedido, "Cambiar Estado" es la primaria;
   "Expandir" no puede competir en el mismo azul (Biblia Cap. 4).
   ================================================================ */
#pedidos-module .fullscreen-action-btn {
  background: var(--panel, #fff) !important;
  color: var(--muted, #64748b) !important;
  border: 1px solid var(--border, #e3e8ef) !important;
}

#pedidos-module .fullscreen-action-btn:hover {
  color: var(--brand, #0284c7) !important;
  border-color: var(--brand, #0284c7) !important;
}

/* Botones globales de modales/login (.btn de styles.css): misma talla */
.btn {
  min-height: 44px !important;
  border-radius: 10px !important;
  font-size: 0.875rem !important;
}

/* --- Detalle de pedido: botones de items/notas a talla estándar --- */
#pedidos-module #agregar-producto-btn,
#pedidos-module #guardar-pesos-btn,
#pedidos-module #guardar-notas-btn {
  min-height: 44px !important;
  padding: 0.5rem 1.1rem !important;
  font-size: 0.875rem !important;
  border-radius: 10px !important;
}

/* --- Acciones de estado del pedido: jerarquía correcta.
   "Listo para Cobrar" es LA acción de avance → destacada (52px).
   "Cancelar Pedido" es secundaria destructiva → talla estándar,
   no puede competir en tamaño con la primaria (Biblia Cap. 4). --- */
#pedidos-module .action-quick-btn-large {
  min-height: 52px !important;
  height: auto !important;
  border-radius: 12px !important;
  font-size: 0.9375rem !important;
}

#pedidos-module .action-quick-btn-large.action-danger {
  min-height: 44px !important;
  font-size: 0.875rem !important;
}

/* --- Acciones de estado (Cancelar / Listo para Cobrar): rediseño.
   Antes: ambos 64px, degradado + resplandor + MAYÚSCULAS a lo ancho
   (todo grita = nada se escucha). Ahora: la primaria es sólida y
   destacada (52px); cancelar es outline discreto (44px). --- */
#pedidos-module .action-buttons-row {
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

#pedidos-module .action-quick-btn-large,
#pedidos-module .action-buttons-row .action-quick-btn-large {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 52px !important;
  padding: 0 1.75rem !important;
  font-size: 0.9375rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: var(--success, #16a34a) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--success, #16a34a) 25%, transparent) !important;
  border-radius: 12px !important;
  margin: 1rem 0 !important;
}

#pedidos-module .action-quick-btn-large:hover:not(:disabled) {
  background: color-mix(in srgb, var(--success, #16a34a) 88%, #000) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--success, #16a34a) 32%, transparent) !important;
}

#pedidos-module .action-quick-btn-large.action-danger {
  min-height: 44px !important;
  padding: 0 1.25rem !important;
  font-size: 0.875rem !important;
  background: var(--panel, #fff) !important;
  color: var(--danger, #ef4444) !important;
  border: 1.5px solid color-mix(in srgb, var(--danger, #ef4444) 45%, transparent) !important;
  box-shadow: none !important;
}

#pedidos-module .action-quick-btn-large.action-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger, #ef4444) 8%, transparent) !important;
  border-color: var(--danger, #ef4444) !important;
}