@charset "UTF-8";
:root,
html[data-theme=dark] {
  color-scheme: dark;
  --color-fondo: #050505;
  --color-fondo-elevado: #0b0b0c;
  --color-superficie: #171718;
  --color-superficie-alta: #1e1f20;
  --color-superficie-flotante: #202122;
  --color-superficie-hover: #242526;
  --color-superficie-tarjeta: var(--color-superficie);
  --color-superficie-panel: var(--color-superficie-alta);
  --color-superficie-tarjeta-flotante: var(--color-superficie-flotante);
  --color-borde: #2c2d2f;
  --color-borde-suave: #1d1e20;
  --color-borde-fuerte: #343537;
  --color-texto: #f4f4f5;
  --color-texto-secundario: #b7bbc2;
  --color-texto-tenue: #777d87;
  --color-acento: #ffffff;
  --color-superficie-contraste: #f4f4f5;
  --color-texto-contraste: #111111;
  --color-interactivo-suave: rgba(255, 255, 255, 0.015);
  --color-interactivo-medio: rgba(255, 255, 255, 0.03);
  --color-interactivo-hover: rgba(255, 255, 255, 0.05);
  --color-interactivo-fuerte: rgba(255, 255, 255, 0.08);
  --color-overlay: rgba(0, 0, 0, 0.62);
  --color-input-bg: rgba(255, 255, 255, 0.015);
  --color-input-bg-hover: rgba(255, 255, 255, 0.025);
  --color-input-bg-focus: rgba(255, 255, 255, 0.03);
  --color-input-border-hover: #343537;
  --color-input-border-focus: #4b4d50;
  --color-focus-ring: rgba(255, 255, 255, 0.03);
  --color-fila-tabla-hover: var(--color-interactivo-suave);
  --color-fila-tabla-seleccionada: var(--color-interactivo-medio);
  --color-checkbox-border: #333436;
  --color-checkbox-border-hover: #494b4e;
  --color-checkbox-checked-bg: #f4f4f5;
  --color-checkbox-checked-border: #f4f4f5;
  --color-checkbox-check: #111111;
  --color-checkbox-focus-ring: rgba(255, 255, 255, 0.06);
  --color-nav-hover-bg: rgba(255, 255, 255, 0.035);
  --color-nav-active-bg: var(--color-superficie);
  --color-nav-active-border: var(--color-borde);
  --sombra-nav-activo: none;
  --color-boton-principal-bg: #f4f4f5;
  --color-boton-principal-border: #f4f4f5;
  --color-boton-principal-texto: #111111;
  --color-boton-principal-hover-bg: #ffffff;
  --color-boton-principal-hover-border: #ffffff;
  --color-boton-principal-hover-texto: #050505;
  --color-boton-secundario-bg: var(--color-superficie-alta);
  --color-boton-secundario-border: var(--color-borde);
  --color-boton-secundario-texto: var(--color-texto);
  --color-boton-secundario-hover-bg: var(--color-superficie-hover);
  --color-boton-secundario-hover-border: var(--color-borde-fuerte);
  --color-boton-secundario-hover-texto: var(--color-texto);
  --color-boton-ghost-bg: transparent;
  --color-boton-ghost-border: transparent;
  --color-boton-ghost-texto: var(--color-texto-secundario);
  --color-boton-ghost-hover-bg: var(--color-superficie);
  --color-boton-ghost-hover-border: transparent;
  --color-boton-ghost-hover-texto: var(--color-texto);
  --color-peligro: #ff8b97;
  --color-peligro-suave: rgba(255, 93, 108, 0.12);
  --color-peligro-borde: rgba(255, 93, 108, 0.24);
  --color-peligro-borde-hover: rgba(255, 93, 108, 0.36);
  --color-chip-bg: var(--color-interactivo-medio);
  --color-chip-border: var(--color-borde);
  --color-chip-texto: var(--color-texto-secundario);
  --color-chip-hover-bg: var(--color-interactivo-fuerte);
  --color-chip-hover-texto: var(--color-texto);
  --color-status-neutral-bg: var(--color-interactivo-medio);
  --color-status-neutral-border: var(--color-borde);
  --color-status-neutral-text: var(--color-texto-secundario);
  --color-status-success-bg: rgba(34, 197, 94, 0.12);
  --color-status-success-border: rgba(34, 197, 94, 0.18);
  --color-status-success-text: #31d36b;
  --color-status-warning-bg: rgba(232, 116, 33, 0.12);
  --color-status-warning-border: rgba(232, 116, 33, 0.2);
  --color-status-warning-text: #e87421;
  --color-status-pending-bg: rgba(226, 168, 0, 0.12);
  --color-status-pending-border: rgba(226, 168, 0, 0.18);
  --color-status-pending-text: #e8b109;
  --color-status-danger-bg: rgba(239, 68, 68, 0.12);
  --color-status-danger-border: rgba(239, 68, 68, 0.2);
  --color-status-danger-text: #ef5f6c;
  --color-switch-track: rgba(255, 255, 255, 0.1);
  --color-switch-track-activo: #f4f4f5;
  --color-switch-thumb: #ffffff;
  --color-switch-thumb-activo: #111111;
  --color-avatar-fondo: #f4f4f5;
  --color-avatar-texto: #111111;
  --color-azul: #4f8cff;
  --color-verde: #38d778;
  --color-amarillo: #ffd43b;
  --color-rojo: #ff5d6c;
  --radio-xs: 6px;
  --radio-sm: 10px;
  --radio-card: 8px;
  --radio-md: 14px;
  --radio-lg: 20px;
  --radio-pill: 999px;
  --sombra-tarjeta: 0 18px 60px rgba(0, 0, 0, 0.35);
  --sombra-flotante: 0 20px 70px rgba(0, 0, 0, 0.5);
  --sombra-imagen-producto-dashboard: 0 6px 12px rgba(0, 0, 0, 0.18);
  --dashboard-top-emm-gradient: linear-gradient(102.36deg, #f5c800 0.45%, #f5a300 100%);
  --dashboard-top-mxc-gradient: linear-gradient(102.36deg, #e73725 0.45%, #b51100 100%);
  --dashboard-top-foreground: #ffffff;
  --dashboard-top-placeholder-border: rgba(255, 255, 255, 0.72);
  --dashboard-top-placeholder-text: rgba(255, 255, 255, 0.9);
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 20px;
  --espacio-6: 24px;
  --espacio-8: 32px;
  --espacio-10: 40px;
  --menu-ancho: 268px;
  --menu-ancho-colapsado: 76px;
  --barra-movil-alto: 76px;
  --transicion-rapida: 160ms ease;
  --transicion-media: 240ms ease;
}

html[data-theme=light] {
  color-scheme: light;
  --color-fondo: #f6f4f0;
  --color-fondo-elevado: #ffffff;
  --color-superficie: #ffffff;
  --color-superficie-alta: #fcfbf8;
  --color-superficie-flotante: #ffffff;
  --color-superficie-hover: #f3f0ea;
  --color-superficie-tarjeta: var(--color-superficie);
  --color-superficie-panel: var(--color-superficie-alta);
  --color-superficie-tarjeta-flotante: var(--color-superficie-flotante);
  --color-borde: #e3ddd4;
  --color-borde-suave: #ece7df;
  --color-borde-fuerte: #d7d1c8;
  --color-texto: #212226;
  --color-texto-secundario: #676a72;
  --color-texto-tenue: #8b8f97;
  --color-acento: #111111;
  --color-superficie-contraste: #111111;
  --color-texto-contraste: #ffffff;
  --color-interactivo-suave: rgba(17, 17, 17, 0.02);
  --color-interactivo-medio: rgba(17, 17, 17, 0.04);
  --color-interactivo-hover: rgba(17, 17, 17, 0.06);
  --color-interactivo-fuerte: rgba(17, 17, 17, 0.08);
  --color-overlay: rgba(20, 20, 20, 0.18);
  --color-input-bg: #ffffff;
  --color-input-bg-hover: #fcfbfa;
  --color-input-bg-focus: #ffffff;
  --color-input-border-hover: #ddd7ce;
  --color-input-border-focus: #cbc4bb;
  --color-focus-ring: rgba(17, 17, 17, 0.04);
  --color-fila-tabla-hover: rgba(17, 17, 17, 0.02);
  --color-fila-tabla-seleccionada: rgba(17, 17, 17, 0.05);
  --color-checkbox-border: #d7d1c8;
  --color-checkbox-border-hover: #bdb6ac;
  --color-checkbox-checked-bg: #111111;
  --color-checkbox-checked-border: #111111;
  --color-checkbox-check: #ffffff;
  --color-checkbox-focus-ring: rgba(17, 17, 17, 0.08);
  --color-nav-hover-bg: #f5f2ec;
  --color-nav-active-bg: #ffffff;
  --color-nav-active-border: #e1dbd2;
  --sombra-nav-activo: 0 6px 18px rgba(17, 17, 17, 0.06);
  --color-boton-principal-bg: #111111;
  --color-boton-principal-border: #111111;
  --color-boton-principal-texto: #ffffff;
  --color-boton-principal-hover-bg: #1e1e1e;
  --color-boton-principal-hover-border: #1e1e1e;
  --color-boton-principal-hover-texto: #ffffff;
  --color-boton-secundario-bg: #ffffff;
  --color-boton-secundario-border: var(--color-borde);
  --color-boton-secundario-texto: var(--color-texto);
  --color-boton-secundario-hover-bg: #fcfbfa;
  --color-boton-secundario-hover-border: var(--color-borde-fuerte);
  --color-boton-secundario-hover-texto: var(--color-texto);
  --color-boton-ghost-bg: transparent;
  --color-boton-ghost-border: transparent;
  --color-boton-ghost-texto: var(--color-texto-secundario);
  --color-boton-ghost-hover-bg: var(--color-nav-hover-bg);
  --color-boton-ghost-hover-border: transparent;
  --color-boton-ghost-hover-texto: var(--color-texto);
  --color-peligro: #d85e6b;
  --color-peligro-suave: rgba(216, 94, 107, 0.09);
  --color-peligro-borde: rgba(216, 94, 107, 0.22);
  --color-peligro-borde-hover: rgba(216, 94, 107, 0.34);
  --color-chip-bg: rgba(17, 17, 17, 0.03);
  --color-chip-border: var(--color-borde);
  --color-chip-texto: var(--color-texto-secundario);
  --color-chip-hover-bg: rgba(17, 17, 17, 0.06);
  --color-chip-hover-texto: var(--color-texto);
  --color-status-neutral-bg: var(--color-interactivo-medio);
  --color-status-neutral-border: var(--color-borde);
  --color-status-neutral-text: var(--color-texto-secundario);
  --color-status-success-bg: rgba(37, 177, 93, 0.12);
  --color-status-success-border: rgba(37, 177, 93, 0.22);
  --color-status-success-text: #25b15d;
  --color-status-warning-bg: rgba(232, 116, 33, 0.1);
  --color-status-warning-border: rgba(232, 116, 33, 0.18);
  --color-status-warning-text: #c7631e;
  --color-status-pending-bg: rgba(215, 154, 17, 0.12);
  --color-status-pending-border: rgba(215, 154, 17, 0.24);
  --color-status-pending-text: #d79a11;
  --color-status-danger-bg: rgba(220, 102, 115, 0.12);
  --color-status-danger-border: rgba(220, 102, 115, 0.22);
  --color-status-danger-text: #dc6673;
  --color-switch-track: #e5e1da;
  --color-switch-track-activo: #111111;
  --color-switch-thumb: #ffffff;
  --color-switch-thumb-activo: #ffffff;
  --color-avatar-fondo: #111111;
  --color-avatar-texto: #ffffff;
  --color-azul: #4f8cff;
  --color-verde: #25b15d;
  --color-amarillo: #d79a11;
  --color-rojo: #dc6673;
  --sombra-tarjeta: 0 10px 30px rgba(17, 17, 17, 0.05);
  --sombra-flotante: 0 20px 60px rgba(17, 17, 17, 0.12);
  --sombra-imagen-producto-dashboard: 0 5px 10px rgba(17, 17, 17, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  min-height: 100vh;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  clip: rect(0, 0, 0, 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.material-symbols-rounded,
.app-icon {
  direction: ltr;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: "Material Symbols Rounded";
  font-feature-settings: "liga";
  font-size: 1em;
  font-style: normal;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  font-weight: normal;
  height: 1em;
  justify-content: center;
  letter-spacing: normal;
  line-height: 1;
  overflow: hidden;
  text-transform: none;
  user-select: none;
  white-space: nowrap;
  width: 1em;
  word-wrap: normal;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.app-icon--brand {
  align-items: center;
  font-family: inherit;
}
.app-icon--brand img,
.app-icon--brand svg {
  display: block;
  height: 1em;
  width: 1em;
}

.app-button .app-icon,
.boton .app-icon,
.menu-lateral__icono .app-icon,
.barra-movil__boton .app-icon {
  font-size: 1.15em;
}

.app-button--icon .app-icon,
.boton--icono .app-icon {
  font-size: 1.25em;
}

.app-status__icon .app-icon,
.pedidos-status__icon .app-icon {
  font-size: 1em;
}

.app-page {
  margin: 0 auto;
  max-width: 1600px;
  padding: 32px 0;
}

.app-page-header {
  align-items: flex-start;
  display: flex;
  gap: var(--espacio-3);
  justify-content: space-between;
}

.app-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.app-page-title {
  font-size: 1.65rem;
  line-height: 1.15;
  margin: 0;
}

.app-page-description {
  color: var(--color-texto-secundario);
  margin: var(--espacio-2) 0 0;
  max-width: 760px;
}

.app-grid {
  display: grid;
  gap: 18px;
}

.app-grid--editor {
  align-items: start;
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.45fr);
}

.app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.app-statusline {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-4);
}

.app-section-title {
  color: var(--color-texto);
  font-size: 1rem;
  font-weight: 760;
  margin: var(--espacio-5) 0 10px;
}

.app-text-small {
  font-size: 0.82rem;
}

.app-text-danger {
  color: var(--color-status-danger-text);
}

@media (max-width: 980px) {
  .app-page-header,
  .app-page-header__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .app-grid--editor {
    grid-template-columns: 1fr;
  }
}
.display-flex {
  display: flex !important;
}

.display-grid {
  display: grid !important;
}

.display-block {
  display: block !important;
}

.display-inline-flex {
  display: inline-flex !important;
}

.display-inline-block {
  display: inline-block !important;
}

.is-hidden {
  display: none !important;
}

.oculto {
  display: none !important;
}

.items-centro {
  align-items: center !important;
}

.items-inicio {
  align-items: flex-start !important;
}

.items-final {
  align-items: flex-end !important;
}

.items-stretch {
  align-items: stretch !important;
}

.contenido-centro {
  justify-content: center !important;
}

.contenido-between {
  justify-content: space-between !important;
}

.contenido-around {
  justify-content: space-around !important;
}

.contenido-final {
  justify-content: flex-end !important;
}

.contenido-inicio {
  justify-content: flex-start !important;
}

.flex-columna {
  flex-direction: column !important;
}

.flex-fila {
  flex-direction: row !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-1 {
  flex: 1 1 0 !important;
}

.flex-auto {
  flex: 1 1 auto !important;
}

.flex-none {
  flex: none !important;
}

.gap-1 {
  gap: var(--espacio-1) !important;
}

.gap-2 {
  gap: var(--espacio-2) !important;
}

.gap-3 {
  gap: var(--espacio-3) !important;
}

.gap-4 {
  gap: var(--espacio-4) !important;
}

.gap-5 {
  gap: var(--espacio-5) !important;
}

.gap-6 {
  gap: var(--espacio-6) !important;
}

.gap-8 {
  gap: var(--espacio-8) !important;
}

.margen-0 {
  margin: 0 !important;
}

.margen-arriba-2 {
  margin-top: var(--espacio-2) !important;
}

.margen-arriba-4 {
  margin-top: var(--espacio-4) !important;
}

.margen-arriba-6 {
  margin-top: var(--espacio-6) !important;
}

.margen-abajo-2 {
  margin-bottom: var(--espacio-2) !important;
}

.margen-abajo-4 {
  margin-bottom: var(--espacio-4) !important;
}

.margen-abajo-6 {
  margin-bottom: var(--espacio-6) !important;
}

.padding-0 {
  padding: 0 !important;
}

.padding-2 {
  padding: var(--espacio-2) !important;
}

.padding-3 {
  padding: var(--espacio-3) !important;
}

.padding-4 {
  padding: var(--espacio-4) !important;
}

.padding-6 {
  padding: var(--espacio-6) !important;
}

.ancho-5 {
  width: 5% !important;
}

.ancho-10 {
  width: 10% !important;
}

.ancho-15 {
  width: 15% !important;
}

.ancho-20 {
  width: 20% !important;
}

.ancho-25 {
  width: 25% !important;
}

.ancho-30 {
  width: 30% !important;
}

.ancho-33 {
  width: 33.333% !important;
}

.ancho-40 {
  width: 40% !important;
}

.ancho-50 {
  width: 50% !important;
}

.ancho-60 {
  width: 60% !important;
}

.ancho-66 {
  width: 66.666% !important;
}

.ancho-75 {
  width: 75% !important;
}

.ancho-100 {
  width: 100% !important;
}

.ancho-auto {
  width: auto !important;
}

.ancho-min-0 {
  min-width: 0 !important;
}

.texto-centro {
  text-align: center !important;
}

.texto-derecha {
  text-align: right !important;
}

.texto-izquierda {
  text-align: left !important;
}

.texto-tenue {
  color: var(--color-texto-tenue) !important;
}

.texto-secundario {
  color: var(--color-texto-secundario) !important;
}

.texto-principal {
  color: var(--color-texto) !important;
}

.texto-fuerte {
  font-weight: 760 !important;
}

.texto-verde {
  color: var(--color-verde) !important;
}

.texto-amarillo {
  color: var(--color-amarillo) !important;
}

.texto-rojo {
  color: var(--color-rojo) !important;
}

.superficie {
  background: var(--color-superficie) !important;
  border: 1px solid var(--color-borde) !important;
}

.superficie-alta {
  background: var(--color-superficie-alta) !important;
  border: 1px solid var(--color-borde) !important;
}

.radio-card {
  border-radius: var(--radio-card) !important;
}

.radio-pill {
  border-radius: var(--radio-pill) !important;
}

body.app-shell.tiene-menu,
body.tiene-menu,
body:has(.menu-lateral) {
  display: grid;
  grid-template-columns: var(--menu-ancho) minmax(0, 1fr);
  transition: grid-template-columns var(--transicion-media);
}

body.app-shell.tiene-menu.menu-colapsado,
body.tiene-menu.menu-colapsado,
body:has(.menu-lateral).menu-colapsado {
  grid-template-columns: var(--menu-ancho-colapsado) minmax(0, 1fr);
}

.contenido-principal,
.app-main {
  min-width: 0;
  padding: var(--espacio-8);
}

.velo-menu {
  background: var(--color-overlay);
  inset: 0;
  position: fixed;
  z-index: 80;
}

@media (max-width: 1024px) {
  body.app-shell.tiene-menu,
  body.app-shell.tiene-menu.menu-colapsado,
  body.tiene-menu,
  body.tiene-menu.menu-colapsado,
  body:has(.menu-lateral),
  body:has(.menu-lateral).menu-colapsado {
    display: block;
  }
  .contenido-principal,
  .app-main {
    padding: calc(var(--barra-movil-alto) + var(--espacio-5)) var(--espacio-5) var(--espacio-5);
  }
  .velo-menu {
    top: var(--barra-movil-alto);
  }
}
.app-button,
.boton {
  align-items: center;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 760;
  gap: var(--espacio-2);
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  text-decoration: none;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida), color var(--transicion-rapida), box-shadow var(--transicion-rapida);
  white-space: nowrap;
}

.app-button--icon,
.boton--icono {
  border-radius: 50%;
  flex: 0 0 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  width: 34px;
}

.app-button,
.boton {
  background: var(--color-boton-secundario-bg);
  border-color: var(--color-boton-secundario-border);
  color: var(--color-boton-secundario-texto);
}

.app-button:hover,
.boton:hover {
  background: var(--color-boton-secundario-hover-bg);
  border-color: var(--color-boton-secundario-hover-border);
  color: var(--color-boton-secundario-hover-texto);
}

.app-button--secondary {
  background: var(--color-boton-secundario-bg);
  border-color: var(--color-boton-secundario-border);
  color: var(--color-boton-secundario-texto);
}

.app-button--secondary:hover {
  background: var(--color-boton-secundario-hover-bg);
  border-color: var(--color-boton-secundario-hover-border);
  color: var(--color-boton-secundario-hover-texto);
}

.app-button svg,
.boton svg {
  flex: 0 0 18px;
  height: 18px;
  width: 18px;
}

.app-button--small {
  font-size: 0.82rem;
  min-height: 36px;
  padding: 0 14px;
}

.app-button--primary,
.app-button--success,
.boton--claro {
  background: var(--color-boton-principal-bg);
  border-color: var(--color-boton-principal-border);
  box-shadow: 0 0 0 1px var(--color-focus-ring);
  color: var(--color-boton-principal-texto);
}

.app-button--primary:hover,
.app-button--success:hover,
.boton--claro:hover {
  background: var(--color-boton-principal-hover-bg);
  border-color: var(--color-boton-principal-hover-border);
  color: var(--color-boton-principal-hover-texto);
}

.app-button--danger-outline {
  background: transparent;
  border-color: var(--color-peligro-borde);
  color: var(--color-peligro);
}

.app-button--danger-outline:hover {
  background: var(--color-peligro-suave);
  border-color: var(--color-peligro-borde-hover);
}

.app-button--ghost,
.boton--peligro {
  background: var(--color-boton-ghost-bg);
  border-color: var(--color-boton-ghost-border);
}

.app-button--ghost {
  color: var(--color-boton-ghost-texto);
}

.app-button--ghost:hover {
  background: var(--color-boton-ghost-hover-bg);
  border-color: var(--color-boton-ghost-hover-border);
  color: var(--color-boton-ghost-hover-texto);
}

.boton--peligro {
  color: var(--color-peligro);
}

.app-button--icon svg,
.boton--icono svg {
  flex-basis: 18px;
}

/* Estado deshabilitado visible: hasta ahora un botón inactivo se veía idéntico
   a uno activo, lo que hacía parecer que "no pasaba nada" al hacer clic. */
.app-button:disabled,
.app-button[disabled],
.app-button.is-disabled,
.boton:disabled,
.boton[disabled],
.boton.is-disabled {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.45;
}

.menu-lateral {
  background: var(--color-fondo);
  border-right: 1px solid var(--color-borde-suave);
  display: flex;
  flex-direction: column;
  height: 100vh;
  inset: 0 auto 0 0;
  padding: var(--espacio-4);
  position: sticky;
  top: 0;
  transition: transform var(--transicion-media), width var(--transicion-media);
  width: var(--menu-ancho);
  z-index: 90;
}

.menu-lateral * {
  min-width: 0;
}

.menu-lateral__encabezado {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
  justify-content: space-between;
  margin-bottom: var(--espacio-6);
  position: relative;
}
@media (max-width: 1024px) {
  .menu-lateral__encabezado {
    display: none;
  }
}

.menu-lateral__marca {
  align-items: center;
  display: inline-flex;
  gap: var(--espacio-3);
  min-width: 0;
  text-decoration: none;
}

.menu-lateral__marca-icono {
  align-items: center;
  background: var(--color-superficie-contraste);
  border-radius: 50%;
  color: var(--color-texto-contraste);
  display: inline-flex;
  flex: 0 0 34px;
  font-weight: 800;
  height: 34px;
  width: 34px;
  justify-content: center;
}

.menu-lateral__marca-logo {
  display: inline-block;
  height: 35px;
  width: 35px;
  object-fit: contain;
}

html[data-theme=dark] .menu-lateral__marca-logo {
  filter: invert(1);
}

.menu-lateral__marca-texto {
  font-size: 0.96rem;
  font-weight: 750;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-lateral__control {
  background: transparent;
  border: 0;
  color: var(--color-texto-secundario);
  padding: 0;
}

.menu-lateral__control:hover {
  background: var(--color-superficie);
  color: var(--color-texto);
}

.menu-lateral__navegacion {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-color: var(--color-borde) transparent;
  scrollbar-width: thin;
}

.menu-lateral__navegacion::-webkit-scrollbar {
  width: 6px;
}

.menu-lateral__navegacion::-webkit-scrollbar-thumb {
  background: var(--color-borde);
  border-radius: var(--radio-pill);
}

.menu-lateral__seccion {
  display: grid;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-6);
}

.menu-lateral__titulo-seccion {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radio-sm);
  color: var(--color-texto);
  display: flex;
  font-size: 0.78rem;
  font-weight: 800;
  justify-content: space-between;
  min-height: 32px;
  padding: 0 var(--espacio-2);
  text-align: left;
  width: 100%;
}

.menu-lateral__titulo-seccion:hover {
  background: var(--color-nav-hover-bg);
}

.menu-lateral__flecha-seccion {
  color: var(--color-texto-secundario);
  font-size: 14px;
  height: 14px;
  transition: transform var(--transicion-rapida);
  width: 14px;
}

.menu-lateral__titulo-seccion:not(.is-abierto) .menu-lateral__flecha-seccion {
  transform: rotate(180deg);
}

.menu-lateral__lista {
  display: grid;
  gap: var(--espacio-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-lateral__item {
  min-width: 0;
}

.menu-lateral__enlace,
.menu-lateral__boton {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radio-pill);
  color: var(--color-texto-secundario);
  display: flex;
  font-size: 0.9rem;
  font-weight: 700;
  gap: var(--espacio-3);
  min-height: 42px;
  padding: 0 var(--espacio-3);
  text-align: left;
  text-decoration: none;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida), color var(--transicion-rapida);
  width: 100%;
}

.menu-lateral__enlace:hover,
.menu-lateral__boton:hover,
.menu-lateral__boton.is-abierto {
  background: var(--color-nav-hover-bg);
  border-color: transparent;
  color: var(--color-texto);
}

.menu-lateral__enlace.is-activo,
.menu-lateral__boton.is-activo {
  background: var(--color-nav-active-bg);
  border-color: var(--color-nav-active-border);
  box-shadow: var(--sombra-nav-activo);
  color: var(--color-texto);
}

.menu-lateral__icono {
  color: currentColor;
  flex: 0 0 20px;
  height: 20px;
  width: 20px;
}

.menu-lateral__texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-lateral__flecha {
  color: var(--color-texto-tenue);
  font-size: 16px;
  height: 16px;
  margin-left: auto;
  transition: transform var(--transicion-rapida);
  width: 16px;
}

.menu-lateral__boton.is-abierto .menu-lateral__flecha {
  transform: rotate(90deg);
}

.menu-lateral__sublista {
  display: grid;
  gap: var(--espacio-1);
  list-style: none;
  margin: var(--espacio-2) 0 0 40px;
  padding: 0;
}

.menu-lateral__subenlace {
  border-radius: var(--radio-sm);
  color: var(--color-texto-secundario);
  display: block;
  font-size: 0.86rem;
  font-weight: 650;
  padding: 9px var(--espacio-3);
  text-decoration: none;
}

.menu-lateral__subenlace:hover,
.menu-lateral__subenlace.is-activo {
  background: var(--color-nav-hover-bg);
  color: var(--color-acento);
}

.menu-lateral__pie {
  display: grid;
  gap: var(--espacio-3);
  margin-top: var(--espacio-4);
}

.menu-lateral__herramientas {
  display: grid;
  gap: var(--espacio-1);
}

.menu-lateral__accion {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radio-pill);
  color: var(--color-texto-secundario);
  display: flex;
  font-size: 0.86rem;
  font-weight: 700;
  gap: var(--espacio-3);
  min-height: 40px;
  padding: 0 var(--espacio-3);
  text-decoration: none;
}

.menu-lateral__accion:hover {
  background: var(--color-nav-hover-bg);
  color: var(--color-texto);
}

.menu-lateral__accion--peligro {
  color: var(--color-peligro);
}

.menu-lateral__accion--switch {
  justify-content: space-between;
}

.theme-toggle {
  align-items: center;
  background: var(--color-switch-track);
  border-radius: var(--radio-pill);
  display: inline-flex;
  flex: 0 0 44px;
  height: 24px;
  margin-left: auto;
  padding: 2px;
  transition: background var(--transicion-rapida);
  width: 44px;
}

.theme-toggle__thumb {
  background: var(--color-switch-thumb);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  display: block;
  height: 20px;
  transform: translateX(0);
  transition: transform var(--transicion-rapida), background var(--transicion-rapida);
  width: 20px;
}

[data-theme-toggle][aria-checked=true] .theme-toggle {
  background: var(--color-switch-track-activo);
}

[data-theme-toggle][aria-checked=true] .theme-toggle__thumb {
  background: var(--color-switch-thumb-activo);
  transform: translateX(20px);
}

.menu-lateral__usuario {
  align-items: center;
  background: linear-gradient(180deg, var(--color-superficie-alta), var(--color-superficie));
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  display: flex;
  gap: var(--espacio-3);
  padding: var(--espacio-2);
  text-decoration: none;
}

.menu-lateral__avatar {
  border-radius: 50%;
  flex: 0 0 38px;
  height: 38px;
  object-fit: cover;
  width: 38px;
}

.menu-lateral__usuario-info {
  min-width: 0;
}

.menu-lateral__usuario-nombre,
.menu-lateral__usuario-correo {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-lateral__usuario-nombre {
  font-size: 0.84rem;
  font-weight: 760;
}

.menu-lateral__usuario-correo {
  color: var(--color-texto-tenue);
  font-size: 0.74rem;
}

.barra-movil {
  display: none;
}

.barra-movil__boton {
  order: 1;
}

.barra-movil__boton,
.barra-movil__perfil {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 46px;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.barra-movil__boton {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
}

.barra-movil__marca {
  color: var(--color-texto);
  flex: 1 1 0;
  font-size: 1rem;
  font-weight: 780;
  min-width: 0;
  order: 2;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-movil__perfil {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  margin-left: auto;
  order: 3;
  overflow: hidden;
  text-decoration: none;
}

.barra-movil__perfil img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.menu-lateral__form-logout {
  display: flex;
  margin: 0;
  padding: 0;
  width: 100%;
}

:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral {
  width: var(--menu-ancho-colapsado);
}

:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__encabezado {
  justify-content: center;
}

:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__control {
  background: var(--color-fondo-elevado);
  border: 1px solid var(--color-borde);
  box-shadow: var(--sombra-flotante);
  position: absolute;
  right: -34px;
  top: -1px;
  z-index: 2;
}

:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__marca-texto,
:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__titulo-seccion,
:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__texto,
:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__flecha,
:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__flecha-seccion,
:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__sublista,
:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__usuario-info {
  display: none;
}

:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__enlace,
:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__boton,
:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__accion {
  justify-content: center;
  padding: 0;
  width: 100%;
}

:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__form-logout {
  justify-content: center;
}

:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__accion--switch .theme-toggle {
  display: none;
}

:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__usuario {
  background: transparent;
  border-color: transparent;
  border-radius: 50%;
  justify-content: center;
  padding: 0;
}

:is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__avatar {
  flex-basis: 42px;
  height: 42px;
  width: 42px;
}

/* Submenú Flotante (Flyout Popover) */
.menu-lateral__flyout {
  background: var(--color-superficie-alta, var(--color-fondo-elevado));
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: 270px;
  padding: var(--espacio-2);
  position: fixed;
  z-index: 1000;
  animation: flyout-aparecer 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-lateral__flyout[hidden] {
  display: none !important;
}

@keyframes flyout-aparecer {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.menu-lateral__flyout-encabezado {
  border-bottom: 1px solid var(--color-borde-suave);
  color: var(--color-texto);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-2) var(--espacio-2);
  text-transform: uppercase;
}

.menu-lateral__flyout-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-lateral__flyout-enlace {
  align-items: center;
  border-radius: var(--radio-sm);
  color: var(--color-texto-secundario);
  display: flex;
  font-size: 0.86rem;
  font-weight: 650;
  padding: var(--espacio-2) var(--espacio-3);
  text-decoration: none;
  transition: background var(--transicion-rapida), color var(--transicion-rapida);
}
.menu-lateral__flyout-enlace:hover, .menu-lateral__flyout-enlace.is-activo {
  background: var(--color-nav-hover-bg);
  color: var(--color-acento);
}

@media (max-width: 1024px) {
  .barra-movil {
    align-items: center;
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde-suave);
    display: flex;
    gap: var(--espacio-4);
    height: var(--barra-movil-alto);
    inset: 0 0 auto 0;
    padding: 0 var(--espacio-4);
    position: fixed;
    z-index: 110;
  }
  .menu-lateral {
    height: calc(100vh - var(--barra-movil-alto));
    inset: var(--barra-movil-alto) auto 0 0;
    position: fixed;
    transform: translateX(-105%);
    width: min(86vw, var(--menu-ancho));
  }
  body.menu-movil-abierto .menu-lateral {
    transform: translateX(0);
  }
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral {
    width: var(--menu-ancho);
  }
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__marca-texto,
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__titulo-seccion,
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__texto,
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__flecha,
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__flecha-seccion,
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__usuario-info {
    display: initial;
  }
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__sublista {
    display: grid;
  }
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__enlace,
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__boton,
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__accion {
    justify-content: flex-start;
    padding: 0 var(--espacio-3);
  }
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__accion--switch .theme-toggle {
    display: inline-flex;
  }
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__control {
    background: transparent;
    border: 0;
    box-shadow: none;
    position: static;
  }
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__usuario {
    background: linear-gradient(180deg, var(--color-superficie-alta), var(--color-superficie));
    border-color: var(--color-borde);
    border-radius: var(--radio-lg);
    justify-content: flex-start;
    padding: var(--espacio-2);
  }
  :is(html.menu-colapsado, body.menu-colapsado) .menu-lateral__avatar {
    flex-basis: 38px;
    height: 38px;
    width: 38px;
  }
  .menu-lateral__flyout {
    display: none !important;
  }
}
.app-input,
.campo {
  background: var(--color-input-bg);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  color: var(--color-texto);
  outline: none;
  transition: border-color var(--transicion-rapida), background var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.app-input,
.campo {
  min-height: 44px;
  padding: 0 16px;
  width: 100%;
}

select.app-input,
select.campo {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6f78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 18px center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  padding-right: 48px;
}

select.app-input option,
select.campo option {
  background-color: var(--color-superficie-flotante);
  color: var(--color-texto);
}

select.app-input option:disabled,
select.campo option:disabled {
  color: var(--color-texto-tenue);
}

.app-input::placeholder,
.campo::placeholder {
  color: var(--color-texto-tenue);
}

.app-input:hover,
.campo:hover {
  background: var(--color-input-bg-hover);
  border-color: var(--color-input-border-hover);
}

select.app-input:hover,
select.campo:hover {
  background-color: var(--color-input-bg-hover);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6f78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 18px center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

.app-input:focus,
.campo:focus {
  background: var(--color-input-bg-focus);
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

select.app-input:focus,
select.campo:focus {
  background-color: var(--color-input-bg-focus);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6f78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 18px center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

.app-input--small {
  min-height: 35px;
  padding: 0 10px;
}

.app-input[type=file] {
  min-height: 54px;
  padding: 8px;
}

.app-input[type=file]::file-selector-button {
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  color: var(--color-texto);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  margin-right: 12px;
  min-height: 36px;
  padding: 0 16px;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida), color var(--transicion-rapida);
}

.app-input[type=file]::-webkit-file-upload-button {
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  color: var(--color-texto);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  margin-right: 12px;
  min-height: 36px;
  padding: 0 16px;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida), color var(--transicion-rapida);
}

.app-input[type=file]:hover::file-selector-button,
.app-input[type=file]:hover::-webkit-file-upload-button {
  background: var(--color-superficie-elevada);
  border-color: var(--color-input-border-hover);
}

.app-label {
  color: var(--color-texto-secundario);
  display: block;
  font-size: 0.84rem;
  font-weight: 650;
}

.app-label--small {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.app-check {
  align-items: center;
  color: var(--color-texto-secundario);
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  min-width: 0;
}

.app-check span {
  min-width: 0;
}

.app-check-input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  border: 1px solid var(--color-checkbox-border);
  border-radius: 7px;
  color: var(--color-checkbox-check);
  cursor: pointer;
  display: inline-grid;
  flex: 0 0 18px;
  height: 18px;
  margin: 0;
  place-items: center;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
  width: 18px;
}

.app-check-input::after {
  content: none;
}

.app-check-input:hover {
  border-color: var(--color-checkbox-border-hover);
}

.app-check-input:checked {
  background: var(--color-checkbox-checked-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.6 8.8 10 3.4' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 75% 75%;
  border-color: var(--color-checkbox-checked-border);
}

.app-check-input:focus-visible {
  box-shadow: 0 0 0 3px var(--color-checkbox-focus-ring);
  outline: none;
}

html[data-theme=light] .app-check-input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.6 8.8 10 3.4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.app-field {
  display: grid;
  gap: var(--espacio-2);
  min-width: 0;
}

.app-field--full {
  grid-column: 1/-1;
}

.app-field--actions {
  align-items: end;
  display: flex;
  gap: var(--espacio-3);
}

.app-form-grid {
  display: grid;
  gap: 18px 16px;
}

.app-form-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-input--truncate:not(textarea) {
  overflow: hidden;
  text-overflow: ellipsis;
}

textarea.app-input {
  border-radius: var(--radio-card);
  line-height: 1.38;
  min-height: 112px;
  padding: 14px 16px;
  resize: vertical;
}

.app-input--textarea-sm {
  min-height: 104px;
}

.app-input--textarea-md {
  min-height: 116px;
}

.app-input--textarea-lg {
  min-height: 190px;
}

.app-input--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9rem;
}

@media (max-width: 980px) {
  .app-form-grid--2 {
    grid-template-columns: 1fr;
  }
  .app-field--actions {
    align-items: stretch;
  }
  .app-field--actions .app-button {
    width: 100%;
  }
}
.app-card,
.tarjeta {
  background: var(--color-superficie-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-tarjeta);
  overflow: hidden;
}

.app-card--flat,
.tarjeta--plana {
  box-shadow: none;
}

.app-card__header,
.app-card__body,
.app-card__footer,
.tarjeta__cabecera,
.tarjeta__cuerpo,
.tarjeta__pie {
  padding: var(--espacio-4);
}

.app-card__header,
.tarjeta__cabecera {
  align-items: center;
  border-bottom: 1px solid var(--color-borde-suave);
  display: flex;
  gap: var(--espacio-3);
  justify-content: space-between;
}

.app-card__title,
.tarjeta__titulo {
  color: var(--color-texto);
  font-size: 0.95rem;
  font-weight: 760;
  margin: 0;
}

.app-card__description,
.tarjeta__descripcion {
  color: var(--color-texto-secundario);
  font-size: 0.86rem;
  margin: var(--espacio-1) 0 0;
}

.app-card__footer,
.tarjeta__pie {
  border-top: 1px solid var(--color-borde-suave);
}

.app-card__body--table {
  padding: 0;
}

.app-panel,
.panel {
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-card);
  padding: var(--espacio-5);
}

.app-upload-zone {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1.5px dashed var(--color-borde);
  border-radius: var(--radio-card);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 170px;
  padding: 22px;
  text-align: center;
  transition: border-color var(--transicion-rapida), background var(--transicion-rapida);
}

.app-upload-zone.is-dragging {
  background: var(--color-superficie);
  border-color: currentColor;
}

.app-upload-zone input {
  display: none;
}

.app-upload-zone strong {
  display: block;
  font-size: 1rem;
  margin-top: var(--espacio-3);
}

.app-upload-zone span {
  color: var(--color-texto-secundario);
}

.app-media-grid {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  margin-top: var(--espacio-4);
}

.app-media-grid--single {
  grid-template-columns: 1fr;
  gap: 14px;
}

.app-media-card {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  margin: 0;
  overflow: hidden;
}

.app-media-card.is-base {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.app-media-card img {
  aspect-ratio: 1/1;
  background: var(--color-superficie-panel);
  display: block;
  object-fit: cover;
  width: 100%;
}

.app-media-card--contain img {
  background: #ffffff;
  object-fit: contain;
}

.app-media-card button {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-borde);
  color: inherit;
  cursor: pointer;
  font-weight: 700;
  padding: var(--espacio-2);
  width: 100%;
}

.app-media-card figcaption {
  font-weight: 700;
  padding: 10px 12px;
}

.app-alert {
  align-items: flex-start;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  color: var(--color-texto-secundario);
  display: flex;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-4);
  padding: 12px 14px;
}

.app-alert .app-icon {
  flex: 0 0 auto;
  font-size: 20px;
  margin-top: 1px;
}

.app-alert--success {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.app-alert--warning {
  background: var(--color-status-warning-bg);
  border-color: var(--color-status-warning-border);
  color: var(--color-status-warning-text);
}

.app-alert--danger {
  background: var(--color-status-danger-bg);
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-text);
}

.app-alert--info {
  background: var(--color-status-neutral-bg);
  border-color: var(--color-status-neutral-border);
  color: var(--color-status-neutral-text);
}

.app-code-preview {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  font-size: 0.85rem;
  margin-top: 14px;
  max-height: 280px;
  overflow: auto;
  padding: var(--espacio-3);
}

.app-toast-stack {
  display: grid;
  gap: 12px;
  justify-items: center;
  left: 50%;
  pointer-events: none;
  position: fixed;
  top: 64px;
  transform: translateX(-50%);
  z-index: 1200;
}

.app-toast {
  background: #1f242d;
  border: 1px solid #303846;
  border-radius: var(--radio-card);
  box-shadow: 0 18px 44px rgba(15, 18, 24, 0.24);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  max-width: 560px;
  min-width: 360px;
  padding: 16px 20px;
  text-align: center;
}

.app-toast--pending {
  background: #7a5200;
  border-color: #a66f00;
  color: #fff7dc;
}

.app-toast--error {
  background: #8f2433;
  border-color: #b93a4d;
  color: #fff;
}

.app-status,
.pedidos-status,
.etiqueta {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radio-pill);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 760;
  gap: 8px;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  white-space: nowrap;
}

.app-status--compact {
  min-height: 24px;
  padding-inline: var(--espacio-2);
}

.app-status__icon,
.pedidos-status__icon {
  align-items: center;
  color: currentColor;
  display: inline-flex;
  flex: 0 0 14px;
  height: 14px;
  justify-content: center;
  width: 14px;
}

.app-status__icon svg,
.pedidos-status__icon svg,
.app-status__icon .app-icon,
.pedidos-status__icon .app-icon {
  display: block;
  font-size: 14px;
  height: 14px;
  width: 14px;
}

.app-status--neutral,
.pedidos-status--neutral {
  background: var(--color-status-neutral-bg);
  border-color: var(--color-status-neutral-border);
  color: var(--color-status-neutral-text);
}

.app-status--success,
.pedidos-status--success,
.etiqueta--verde {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.app-status--warning,
.pedidos-status--warning {
  background: var(--color-status-warning-bg);
  border-color: var(--color-status-warning-border);
  color: var(--color-status-warning-text);
}

.app-status--pending,
.pedidos-status--pending,
.etiqueta--amarilla {
  background: var(--color-status-pending-bg);
  border-color: var(--color-status-pending-border);
  color: var(--color-status-pending-text);
}

.app-status--danger,
.pedidos-status--danger,
.etiqueta--roja {
  background: var(--color-status-danger-bg);
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-text);
}

.app-status--icon-only,
.pedidos-status--icon-only {
  min-width: 28px;
  padding: 0;
}

.app-table,
.tabla {
  border-collapse: collapse;
  color: var(--color-texto-secundario);
  font-size: 0.86rem;
  width: 100%;
}

.app-table th,
.app-table td,
.tabla th,
.tabla td {
  border-bottom: 1px solid var(--color-borde-suave);
  padding: 3px var(--espacio-2);
  text-align: left;
  vertical-align: middle;
}

.app-table th,
.tabla th {
  color: var(--color-texto);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0;
}

.app-table__center {
  text-align: center;
}

.app-table__actions-header {
  text-align: right;
}

.app-table__muted {
  color: var(--color-texto-tenue);
  font-weight: 700;
}

.app-table tbody tr,
.tabla tbody tr {
  transition: background var(--transicion-rapida);
}

.app-table tbody tr:hover,
.tabla tbody tr:hover {
  background: var(--color-fila-tabla-hover);
}

.app-table-container,
.tabla-contenedor {
  background: var(--color-superficie-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  overflow: auto;
}

.app-table-container--flush {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: auto;
}

.app-table-container--sticky-header {
  max-height: var(--app-table-sticky-max-height, 70vh);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.app-table-container--sticky-header > .app-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-table-container--sticky-header > .app-table thead th {
  background: var(--color-superficie-tarjeta);
}

.app-table--integrated {
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
}

.app-table--integrated thead th {
  background: var(--color-superficie-tarjeta);
  border-top: 0;
  border-bottom-color: var(--color-borde);
  padding: 18px 10px;
  white-space: nowrap;
}

.app-table--integrated tbody td {
  border-top: 0;
  padding: 14px 10px;
}

.app-table--integrated thead th:first-child,
.app-table--integrated tbody td:first-child {
  padding-left: 28px;
}

.app-table--integrated thead th:last-child,
.app-table--integrated tbody td:last-child {
  padding-right: 28px;
}

.app-table--integrated tbody tr:last-child td {
  border-bottom: 0;
}

.app-table-actions,
.tabla-acciones {
  align-items: center;
  display: flex;
  gap: var(--espacio-2);
  justify-content: flex-end;
}

.app-table__empty-cell {
  color: var(--color-texto-tenue);
  padding: 42px 20px !important;
  text-align: center;
}

.borde-end {
  border-right: 1px dashed var(--color-borde-suave);
}

.app-list-shell,
.pedidos-table-shell {
  background: var(--color-superficie-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: 30px;
  box-shadow: var(--sombra-tarjeta);
  overflow: visible;
}

.app-list-toolbar,
.pedidos-toolbar {
  display: grid;
  gap: 14px;
  padding: 26px 28px 20px;
}

.app-list-toolbar__row,
.pedidos-toolbar__row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}

.app-list-toolbar__row--primary,
.pedidos-toolbar__row--primary {
  justify-content: space-between;
}

.app-list-toolbar__row--secondary,
.pedidos-toolbar__row--secondary {
  justify-content: space-between;
}

.app-list-toolbar__search,
.app-list-toolbar__filters,
.pedidos-toolbar__search,
.pedidos-toolbar__filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}

.app-list-toolbar__search,
.pedidos-toolbar__search {
  flex: 0 1 420px;
  justify-content: flex-start;
  min-width: 260px;
}

.app-list-toolbar__filters,
.pedidos-toolbar__filters {
  flex: 1 1 420px;
  justify-content: flex-start;
}

.app-list-toolbar__selection,
.pedidos-toolbar__selection {
  display: flex;
  flex: 0 0 auto;
  margin-left: auto;
}

.app-list-toolbar__selection-button,
.pedidos-toolbar__selection-button {
  background: var(--color-superficie-contraste);
  border-color: var(--color-superficie-contraste);
  color: var(--color-texto-contraste);
  min-height: 36px;
  padding-inline: 14px;
}

.app-list-toolbar__selection-button:hover,
.pedidos-toolbar__selection-button:hover {
  background: var(--color-boton-principal-hover-bg);
  border-color: var(--color-boton-principal-hover-border);
  color: var(--color-boton-principal-hover-texto);
}

.app-list-toolbar__selection-button svg,
.pedidos-toolbar__selection-button svg,
.app-list-toolbar__selection-button .app-icon,
.pedidos-toolbar__selection-button .app-icon {
  flex: 0 0 16px;
  font-size: 16px;
  height: 16px;
  width: 16px;
}

.app-list-toolbar__mobile-actions,
.app-mobile-filters,
.app-floating-selection,
.pedidos-toolbar__mobile-actions,
.pedidos-mobile-filters,
.pedidos-floating-selection {
  display: none;
}

.app-mobile-filters[hidden],
.pedidos-mobile-filters[hidden] {
  display: none !important;
}

.app-mobile-filter-button__count,
.pedidos-mobile-filter-button__count {
  align-items: center;
  background: var(--color-superficie-contraste);
  border-radius: 999px;
  color: var(--color-texto-contraste);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 780;
  height: 20px;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
}

.app-filter-group,
.pedidos-filter-group {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}

.app-filter,
.pedidos-filter {
  position: relative;
}

.app-filter__trigger,
.pedidos-filter__trigger {
  align-items: center;
  background: var(--color-interactivo-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  color: var(--color-texto);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.84rem;
  font-weight: 730;
  gap: 10px;
  min-height: 36px;
  padding: 0 14px;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida);
}

.app-filter__trigger::after,
.pedidos-filter__trigger::after {
  border-bottom: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  content: "";
  height: 6px;
  margin-top: -3px;
  transform: rotate(45deg);
  width: 6px;
}

.app-filter.is-open .app-filter__trigger,
.app-filter__trigger:hover,
.pedidos-filter.is-open .pedidos-filter__trigger,
.pedidos-filter__trigger:hover {
  background: var(--color-interactivo-medio);
  border-color: var(--color-borde-fuerte);
}

/* Filtros rápidos: presets de un clic sobre los filtros de pago y recepción. */
.pedidos-toolbar__quick-row {
  gap: 8px;
}

.pedidos-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.pedidos-quick-filter {
  align-items: center;
  background: var(--color-interactivo-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  color: var(--color-texto);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 730;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida), color var(--transicion-rapida);
}

.pedidos-quick-filter svg {
  flex: 0 0 15px;
  height: 15px;
  width: 15px;
}

.pedidos-quick-filter:hover {
  background: var(--color-interactivo-medio);
  border-color: var(--color-borde-fuerte);
}

.pedidos-quick-filter.is-active {
  background: var(--color-boton-principal-bg);
  border-color: var(--color-boton-principal-border);
  color: var(--color-boton-principal-texto);
}

.app-filter__panel,
.pedidos-filter__panel {
  background: var(--color-superficie-tarjeta-flotante);
  border: 1px solid var(--color-borde);
  border-radius: 20px;
  box-shadow: var(--sombra-flotante);
  display: grid;
  gap: 8px;
  left: 0;
  margin-top: 10px;
  min-width: 220px;
  padding: 14px;
  position: absolute;
  right: auto;
  top: 100%;
  z-index: 140;
}

.app-filter__panel--wide,
.pedidos-filter__panel--wide {
  min-width: 300px;
}

.app-filter__panel--scroll,
.pedidos-filter__panel--scroll {
  max-height: 280px;
  overflow: auto;
}

.app-filter__search,
.pedidos-filter__search {
  margin-bottom: 4px;
}

.app-filter__option,
.pedidos-filter__option {
  min-width: 0;
}

.app-filter__divider,
.pedidos-filter__divider {
  border: 0;
  border-top: 1px solid var(--color-borde-suave);
  margin: 6px 0;
}

.app-date-range,
.pedidos-date-range {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.app-filter-chips,
.pedidos-active-filters {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 10px;
}

.app-filter-chip,
.pedidos-filter-chip {
  align-items: center;
  background: var(--color-chip-bg);
  border: 1px solid var(--color-chip-border);
  border-radius: var(--radio-pill);
  color: var(--color-chip-texto);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 10px;
  min-height: 34px;
  padding: 0 8px 0 14px;
}

.app-filter-chip__remove,
.pedidos-filter-chip__remove {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--color-texto-tenue);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 20px;
  font-size: 1rem;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.app-results-meta {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
  font-weight: 680;
  white-space: nowrap;
}

.app-results-meta strong {
  color: var(--color-texto);
  font-weight: 820;
}

.proveedores-page {
  display: grid;
  gap: var(--espacio-5);
}

.proveedores-create-card {
  margin-inline: auto;
  max-width: 880px;
  width: 100%;
}

.proveedores-create-card > .app-card__footer .app-button {
  width: 100%;
}

.proveedores-page__eyebrow {
  color: var(--color-texto-tenue);
  font-size: 0.75rem;
  font-weight: 820;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.proveedor-detail-page {
  gap: var(--espacio-6);
}

.proveedor-detail-grid {
  align-items: stretch;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.proveedor-detail-grid .app-card {
  height: 100%;
}

.proveedor-detail-grid .app-card__body {
  padding-block: 22px 24px;
}

.proveedor-detail-orders {
  overflow: hidden;
}

.proveedor-detail-orders__table th,
.proveedor-detail-orders__table td {
  padding-block: 15px;
}

.proveedor-brands-page {
  gap: var(--espacio-6);
}

.proveedor-brands-layout {
  align-items: start;
  gap: var(--espacio-5);
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.35fr);
}

.proveedor-brands-message {
  margin: 0;
}

.proveedor-brands-summary .app-card__body {
  display: grid;
  gap: var(--espacio-4);
}

.proveedor-brands-manager .app-card__header {
  align-items: flex-start;
}

.proveedor-brands-toolbar {
  align-items: end;
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: var(--espacio-4);
}

.proveedor-brands-toolbar__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.proveedor-brands-list {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.proveedor-brand-card {
  align-items: center;
  background: var(--color-superficie-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  cursor: pointer;
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: auto auto minmax(0, 1fr);
  min-width: 0;
  padding: 0.9rem 1rem;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida), transform var(--transicion-rapida);
}

.proveedor-brand-card:hover {
  background: var(--color-interactivo-suave);
  border-color: var(--color-borde-fuerte);
}

.proveedor-brand-card.is-selected,
.proveedor-brand-card:has(.marca-checkbox:checked) {
  background: color-mix(in srgb, var(--color-status-success-bg) 72%, var(--color-superficie-tarjeta));
  border-color: var(--color-status-success-border);
}

.proveedor-brand-card .app-check-input {
  margin: 0;
}

.proveedor-brand-card__icon {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  color: var(--color-texto-secundario);
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.proveedor-brand-card__icon .app-icon {
  font-size: 18px;
}

.proveedor-brand-card.is-selected .proveedor-brand-card__icon,
.proveedor-brand-card:has(.marca-checkbox:checked) .proveedor-brand-card__icon {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.proveedor-brand-card__body {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.proveedor-brand-card__body strong {
  color: var(--color-texto);
  font-weight: 820;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proveedor-brand-card__body small {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  font-weight: 700;
}

.proveedor-brands-empty {
  margin-bottom: var(--espacio-4);
}

.proveedor-brands-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4);
  justify-content: space-between;
}

.proveedor-brands-count {
  margin: 0;
}

@media (max-width: 980px) {
  .proveedor-detail-grid {
    grid-template-columns: 1fr;
  }
  .proveedor-brands-layout {
    grid-template-columns: 1fr;
  }
  .proveedor-brands-toolbar {
    grid-template-columns: 1fr;
  }
  .proveedor-brands-toolbar__actions {
    justify-content: flex-start;
  }
}
@media (max-width: 640px) {
  .proveedor-brand-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .proveedor-brand-card__icon {
    display: none;
  }
  .proveedor-brands-footer .app-actions {
    width: 100%;
  }
  .proveedor-brands-footer .app-button {
    flex: 1 1 auto;
  }
}
.proveedores-list__search {
  flex-basis: min(520px, 100%);
}

.proveedores-table {
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.proveedores-table thead th {
  background: var(--color-superficie-tarjeta);
  border-top: 0;
  border-bottom: 1px solid var(--color-borde);
  color: var(--color-texto);
  font-size: 0.77rem;
  font-weight: 760;
  padding: 18px 10px;
  white-space: nowrap;
}

.proveedores-table tbody td {
  border-top: 0;
  border-bottom: 1px solid var(--color-borde-suave);
  color: var(--color-texto);
  font-size: 0.84rem;
  padding: 14px 10px;
  vertical-align: middle;
}

.proveedores-table thead th:first-child,
.proveedores-table tbody td:first-child {
  padding-left: 28px;
}

.proveedores-table thead th:last-child,
.proveedores-table tbody td:last-child {
  padding-right: 28px;
}

.proveedores-table tbody tr:last-child td {
  border-bottom: 0;
}

.proveedores-table__contact {
  min-width: 240px;
}

.proveedores-contact {
  color: var(--color-texto-secundario);
  display: grid;
  font-size: 0.78rem;
  gap: 5px;
}

.proveedores-contact span,
.proveedores-contact a {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 7px;
  min-width: 0;
  text-decoration: none;
}

.proveedores-contact a:hover {
  color: var(--color-texto);
}

.proveedores-contact .app-icon {
  color: var(--color-texto-tenue);
  font-size: 1em;
}

.proveedores-entity .app-entity__avatar {
  flex-basis: 36px;
  font-size: 0.76rem;
  height: 36px;
  width: 36px;
}

.proveedores-table .app-status {
  font-size: 0.7rem;
}

.app-filter-chip__remove .app-icon,
.pedidos-filter-chip__remove .app-icon {
  font-size: 15px;
  height: 15px;
  width: 15px;
}

.app-filter-chip__remove:hover,
.pedidos-filter-chip__remove:hover {
  background: var(--color-chip-hover-bg);
  color: var(--color-chip-hover-texto);
}

.app-results,
.pedidos-results {
  color: var(--color-texto-tenue);
}

.app-results__text,
.pedidos-results__text {
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  gap: 6px;
}

.app-results__text strong,
.pedidos-results__text strong {
  color: var(--color-texto);
  font-weight: 760;
}

.app-results__separator,
.pedidos-results__separator {
  margin-left: 8px;
}

.app-list-footer,
.pedidos-table-footer {
  border-top: 1px solid var(--color-borde-suave);
  display: grid;
  gap: 18px;
  padding: 18px 28px 26px;
}

.app-list-footer__meta,
.pedidos-table-footer__meta {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.app-list-footer .app-results,
.pedidos-table-footer .pedidos-results {
  display: flex;
}

.app-list-footer__meta .app-results:last-child,
.pedidos-table-footer__meta .pedidos-results:last-child {
  justify-content: flex-end;
}

.app-pagination,
.pedidos-pages {
  display: flex;
  justify-content: center;
  padding: 0;
}

.app-pagination__list,
.pedidos-pages__list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-pagination__link,
.pedidos-pages__link {
  align-items: center;
  background: var(--color-interactivo-suave);
  border: 1px solid var(--color-borde);
  border-radius: 50%;
  color: var(--color-texto-secundario);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 760;
  height: 44px;
  justify-content: center;
  min-width: 44px;
  padding: 0 10px;
  text-decoration: none;
}

.app-pagination__item.is-active .app-pagination__link,
.pedidos-pages__item.is-active .pedidos-pages__link {
  background: var(--color-interactivo-medio);
  border-color: var(--color-borde-fuerte);
  color: var(--color-texto);
}

.app-pagination__item.is-disabled .app-pagination__link,
.pedidos-pages__item.is-disabled .pedidos-pages__link {
  opacity: 0.45;
  pointer-events: none;
}

.app-mobile-filters-open,
body.pedidos-filtros-movil-abierto {
  overflow: hidden;
}

.app-mobile-filters,
.pedidos-mobile-filters {
  inset: 0;
  position: fixed;
  z-index: 220;
}

.app-mobile-filters__backdrop,
.pedidos-mobile-filters__backdrop {
  background: var(--color-overlay);
  inset: 0;
  position: absolute;
}

.app-mobile-filters__sheet,
.pedidos-mobile-filters__sheet {
  background: var(--color-superficie);
  display: grid;
  grid-template-rows: auto 1fr auto;
  inset: 0;
  position: absolute;
}

.app-mobile-filters__header,
.app-mobile-filters__footer,
.pedidos-mobile-filters__header,
.pedidos-mobile-filters__footer {
  align-items: center;
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde-suave);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 18px 18px 16px;
}

.app-mobile-filters__footer,
.pedidos-mobile-filters__footer {
  border-bottom: 0;
  border-top: 1px solid var(--color-borde-suave);
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.app-mobile-filters__title,
.pedidos-mobile-filters__title {
  font-size: 1.15rem;
  font-weight: 780;
  margin: 0;
}

.app-mobile-filters__close,
.pedidos-mobile-filters__close {
  align-items: center;
  background: var(--color-interactivo-suave);
  border: 1px solid var(--color-borde);
  border-radius: 50%;
  color: var(--color-texto);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 36px;
  font-size: 1.4rem;
  height: 36px;
  justify-content: center;
  line-height: 1;
  width: 36px;
}

.app-mobile-filters__close .app-icon,
.pedidos-mobile-filters__close .app-icon {
  font-size: 18px;
  height: 18px;
  width: 18px;
}

.app-mobile-filters__body,
.pedidos-mobile-filters__body {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding: 16px 18px 24px;
}

.app-mobile-filters__section,
.pedidos-mobile-filters__section {
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde);
  border-radius: 20px;
  overflow: hidden;
}

.app-mobile-filters__summary,
.pedidos-mobile-filters__summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 0.96rem;
  font-weight: 760;
  justify-content: space-between;
  list-style: none;
  padding: 16px 18px;
}

.app-mobile-filters__summary::-webkit-details-marker,
.pedidos-mobile-filters__summary::-webkit-details-marker {
  display: none;
}

.app-mobile-filters__summary::after,
.pedidos-mobile-filters__summary::after {
  border-bottom: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  content: "";
  flex: 0 0 7px;
  height: 7px;
  transform: rotate(45deg);
  transition: transform var(--transicion-rapida);
  width: 7px;
}

.app-mobile-filters__section[open] .app-mobile-filters__summary::after,
.pedidos-mobile-filters__section[open] .pedidos-mobile-filters__summary::after {
  transform: rotate(-135deg);
}

.app-mobile-filters__content,
.pedidos-mobile-filters__content {
  border-top: 1px solid var(--color-borde-suave);
  display: none;
  gap: 10px;
  padding: 14px 18px 18px;
}

.app-mobile-filters__section[open] .app-mobile-filters__content,
.pedidos-mobile-filters__section[open] .pedidos-mobile-filters__content {
  display: grid;
}

.app-mobile-filters__provider-list,
.pedidos-mobile-filters__provider-list {
  display: grid;
  gap: 10px;
}

.app-mobile-filters__footer .app-button,
.pedidos-mobile-filters__footer .app-button {
  flex: 1 1 0;
}

.app-floating-selection,
.pedidos-floating-selection {
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 18px;
  position: fixed;
  right: 18px;
  z-index: 180;
}

.app-floating-selection__button,
.pedidos-floating-selection__button {
  min-height: 52px;
  width: 100%;
}

@media (max-width: 1024px) {
  .app-list-shell,
  .pedidos-table-shell {
    border-radius: 26px;
  }
  .app-list-toolbar,
  .pedidos-toolbar {
    padding: 22px 18px 18px;
  }
  .app-list-toolbar__row--primary,
  .pedidos-toolbar__row--primary {
    justify-content: flex-start;
  }
  .app-list-toolbar__row,
  .app-list-toolbar__search,
  .app-list-toolbar__filters,
  .pedidos-toolbar__row,
  .pedidos-toolbar__search,
  .pedidos-toolbar__filters {
    align-items: stretch;
    flex-direction: column;
  }
  .app-list-toolbar__search,
  .app-list-toolbar__filters,
  .pedidos-toolbar__search,
  .pedidos-toolbar__filters {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
  }
  .app-list-toolbar__row--secondary,
  .pedidos-toolbar__row--secondary {
    gap: 12px;
  }
  .app-list-toolbar__selection,
  .pedidos-toolbar__selection {
    margin-left: 0;
    width: 100%;
  }
  .app-list-toolbar__selection .app-button,
  .pedidos-toolbar__selection .app-button {
    margin-left: auto;
  }
  .app-filter-group,
  .pedidos-filter-group {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    overflow: auto;
    padding-bottom: 4px;
    white-space: nowrap;
    width: 100%;
  }
  .app-list-footer,
  .pedidos-table-footer {
    padding: 18px 18px 24px;
  }
  .app-list-footer__meta,
  .pedidos-table-footer__meta {
    align-items: flex-start;
    flex-direction: column;
  }
  .app-list-footer .app-results,
  .pedidos-table-footer .pedidos-results {
    justify-content: flex-start;
  }
  .app-filter,
  .pedidos-filter {
    flex: 0 0 auto;
  }
}
@media (max-width: 860px) {
  .app-list-shell,
  .pedidos-table-shell {
    border-radius: 22px;
  }
  .app-list-toolbar,
  .pedidos-toolbar {
    gap: 12px;
  }
  .app-list-toolbar__row--primary,
  .app-list-toolbar__row--secondary,
  .pedidos-toolbar__row--primary,
  .pedidos-toolbar__row--secondary {
    gap: 10px;
  }
  .app-list-toolbar__search,
  .pedidos-toolbar__search {
    min-width: 0;
  }
  .app-list-toolbar__filters,
  .app-list-toolbar__selection,
  .app-list-toolbar__row--secondary,
  .pedidos-toolbar__filters,
  .pedidos-toolbar__selection,
  .pedidos-toolbar__row--secondary {
    display: none;
  }
  .app-list-toolbar__mobile-actions,
  .app-mobile-filters,
  .app-floating-selection,
  .pedidos-toolbar__mobile-actions,
  .pedidos-mobile-filters,
  .pedidos-floating-selection {
    display: block;
  }
  .app-list-toolbar__mobile-actions .app-button,
  .pedidos-toolbar__mobile-actions .app-button {
    width: 100%;
  }
  .app-filter-chips,
  .pedidos-active-filters {
    gap: 8px;
  }
  .app-filter-chip,
  .pedidos-filter-chip {
    max-width: 100%;
  }
  .proveedores-page {
    padding-top: 18px;
  }
  .proveedores-page__header .app-page-header__actions {
    align-items: stretch;
  }
  .proveedores-page__header .app-button {
    width: 100%;
  }
  .proveedores-table thead {
    display: none;
  }
  .proveedores-table,
  .proveedores-table tbody,
  .proveedores-table tr,
  .proveedores-table td {
    display: block;
    width: 100%;
  }
  .proveedores-table tr {
    border-bottom: 1px solid var(--color-borde-suave);
    padding: 16px;
  }
  .proveedores-table tr:last-child {
    border-bottom: 0;
  }
  .proveedores-table td {
    border-bottom: 0;
    padding: 7px 0;
  }
  .proveedores-table tbody td:first-child,
  .proveedores-table tbody td:last-child {
    padding-left: 0;
    padding-right: 0;
  }
  .proveedores-table td[data-label] {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
  }
  .proveedores-table td[data-label]::before {
    color: var(--color-texto-tenue);
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 780;
  }
  .proveedores-table td[data-label=Proveedor],
  .proveedores-table td[data-label=Contacto],
  .proveedores-table td[data-label=Acciones] {
    align-items: stretch;
    display: grid;
    gap: 8px;
  }
  .proveedores-table td[data-label=Proveedor]::before,
  .proveedores-table td[data-label=Contacto]::before,
  .proveedores-table td[data-label=Acciones]::before {
    margin-bottom: 2px;
  }
  .proveedores-table .app-table-actions {
    justify-content: flex-start;
  }
  .proveedores-contact {
    gap: 8px;
  }
}
.pedidos-view {
  display: grid;
  gap: var(--espacio-6);
}

.pedidos-view__header {
  align-items: center;
  display: flex;
  gap: var(--espacio-4);
  justify-content: space-between;
}

.pedidos-view__title {
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  font-weight: 780;
  letter-spacing: 0;
  margin: 0;
}

.pedidos-view__cta .app-icon {
  flex-basis: 16px;
  height: 16px;
  font-size: 16px;
  width: 16px;
}

.pedidos-search {
  flex: 1 1 auto;
  max-width: 420px;
}

.pedidos-table {
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.pedidos-table thead th {
  background: var(--color-superficie-tarjeta);
  border-bottom: 1px solid var(--color-borde);
  color: var(--color-texto);
  font-size: 0.77rem;
  font-weight: 760;
  padding: 18px 10px;
  white-space: nowrap;
}

.pedidos-table tbody td {
  border-bottom: 1px solid var(--color-borde-suave);
  color: var(--color-texto);
  font-size: 0.84rem;
  padding: 14px 10px;
  vertical-align: middle;
}

.pedidos-table tbody tr:last-child td {
  border-bottom: 0;
}

.pedidos-table__row {
  transition: background var(--transicion-rapida);
}

.pedidos-table__row:hover {
  background: var(--color-fila-tabla-hover);
}

.pedidos-table__row:has(.pedido-row-check:checked) {
  background: var(--color-fila-tabla-seleccionada);
}

.pedidos-table__center {
  text-align: center;
}

.pedidos-table__center .app-check-input {
  display: block;
  margin-inline: auto;
}

.pedidos-table__small {
  color: var(--color-texto-secundario);
  white-space: nowrap;
}

.pedidos-table__select {
  text-align: center;
  width: 46px;
}

.pedidos-table__select .app-check-input,
#seleccionar_todos_pedidos {
  border-radius: 10px;
  height: 20px;
  width: 20px;
}

.pedidos-table__date {
  min-width: 92px;
  white-space: nowrap;
}

.pedidos-table__provider-column,
.pedidos-table__provider {
  min-width: 170px;
}

.pedidos-table__flag-cell,
.pedidos-table__invoice-state-cell {
  width: 54px;
}

.pedidos-table__payment-cell {
  min-width: 180px;
}

.pedidos-table__received-cell {
  min-width: 110px;
}

.app-entity,
.pedidos-provider-link {
  align-items: center;
  color: var(--color-texto);
  display: inline-flex;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}

.app-entity__avatar,
.pedidos-provider-link__avatar {
  align-items: center;
  background: var(--provider-avatar-bg, var(--color-avatar-fondo));
  border-radius: 50%;
  color: var(--provider-avatar-text, var(--color-avatar-texto));
  display: inline-flex;
  flex: 0 0 32px;
  font-size: 0.72rem;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.app-entity__body,
.pedidos-provider-link__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.app-entity__title,
.pedidos-provider-link__name {
  font-size: 0.84rem;
  font-weight: 760;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

.app-entity__meta,
.pedidos-provider-link__meta {
  color: var(--color-texto-tenue);
  font-size: 0.68rem;
}

/* La fecha (sobre el nombre), el estado de pago y el número de factura solo se
   muestran en móvil; en escritorio esa información vive en sus columnas. */
.pedidos-provider-link__date {
  display: none;
}

.pedidos-status__pay-mobile,
.pedidos-provider-link__invoice {
  display: none;
}

/* Apilado en columna; con stretch ambas píldoras (recepción y pago) toman el
   ancho de la más ancha, para que queden siempre del mismo tamaño. */
.pedidos-status-stack {
  align-items: stretch;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

.app-entity--muted,
.pedidos-provider-link.is-muted,
.pedidos-table .is-muted {
  color: var(--color-texto-tenue);
}

.pedidos-payment {
  --pago-color: #888e98;
  --pago-fondo: rgba(136, 142, 152, 0.12);
  display: grid;
  gap: 6px;
  min-width: 0;
}

.pedidos-payment__topline,
.pedidos-payment__meta {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.pedidos-payment__amount {
  color: var(--color-texto);
  font-size: 0.82rem;
  font-weight: 780;
  white-space: nowrap;
}

.pedidos-payment__status {
  background: var(--pago-fondo);
  border: 1px solid color-mix(in srgb, var(--pago-color) 30%, transparent);
  border-radius: var(--radio-pill);
  color: var(--pago-color);
  font-size: 0.64rem;
  font-weight: 780;
  line-height: 1;
  padding: 5px 8px;
}

.pedidos-payment__bar,
.pedidos-progress {
  background: var(--color-interactivo-fuerte);
  border-radius: var(--radio-pill);
  overflow: hidden;
}

.pedidos-payment__bar {
  height: 7px;
}

.pedidos-payment__bar-fill {
  background: var(--pago-color);
  display: block;
  height: 100%;
  min-width: 4px;
}

.pedidos-payment__meta {
  color: var(--color-texto-tenue);
  display: grid;
  font-size: 0.68rem;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: left;
}

.pedidos-payment__meta strong {
  color: var(--color-texto-secundario);
  font-size: 0.74rem;
  font-weight: 780;
}

.pedidos-payment--paid {
  --pago-color: #2edb76;
  --pago-fondo: rgba(46, 219, 118, 0.12);
}

.pedidos-payment--partial {
  --pago-color: #e8b109;
  --pago-fondo: rgba(232, 177, 9, 0.12);
}

.pedidos-payment--pending {
  --pago-color: #ff7b87;
  --pago-fondo: rgba(255, 123, 135, 0.12);
}

.pedidos-payment--overpaid {
  --pago-color: #69a0ff;
  --pago-fondo: rgba(105, 160, 255, 0.12);
}

.pedidos-progress {
  height: 8px;
  min-width: 84px;
}

.pedidos-progress--mini {
  height: 6px;
  margin: 0;
  min-width: 52px;
}

.pedidos-progress__bar {
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 4px;
  width: 0;
}

.pedidos-progress__bar--success {
  background: linear-gradient(90deg, #2edb76, #7be2a3);
}

.pedidos-progress__bar--warning {
  background: linear-gradient(90deg, #f4b400, #f7d16b);
}

.pedidos-progress__bar--danger {
  background: linear-gradient(90deg, #ff6b78, #ff9ca4);
}

.pedidos-progress__bar--neutral {
  background: linear-gradient(90deg, #5d636d, #818792);
}

.pedidos-progress-popover {
  display: inline-block;
  position: relative;
}

.pedidos-progress-popover summary {
  align-items: center;
  color: var(--color-texto-secundario);
  cursor: pointer;
  display: grid;
  font-size: 0.72rem;
  font-weight: 720;
  justify-items: center;
  list-style: none;
  position: relative;
  row-gap: 8px;
}

.pedidos-progress-popover summary::-webkit-details-marker {
  display: none;
}

.pedidos-progress-popover summary::after {
  content: none;
}

.pedidos-progress-popover[open] summary {
  color: var(--color-texto);
}

.pedidos-progress-popover__summary {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
}

.pedidos-progress-popover__summary .pedidos-progress {
  margin: 0;
  min-width: 96px;
}

.pedidos-progress-popover__summary-text {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  white-space: nowrap;
}

.pedidos-progress-popover__summary-text::after {
  border-bottom: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  content: "";
  flex: 0 0 6px;
  height: 6px;
  margin-top: -3px;
  transform: rotate(45deg);
  transition: transform var(--transicion-rapida);
  width: 6px;
}

.pedidos-progress-popover[open] .pedidos-progress-popover__summary-text::after {
  margin-top: 2px;
  transform: rotate(-135deg);
}

.pedidos-progress-popover__menu {
  background: var(--color-superficie-tarjeta-flotante);
  border: 1px solid var(--color-borde);
  border-radius: 16px;
  box-shadow: var(--sombra-flotante);
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  min-width: 210px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 30;
}

.pedidos-progress-popover__item {
  align-items: center;
  color: var(--color-texto-secundario);
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.pedidos-progress-popover__label {
  align-items: center;
  display: flex;
  gap: 10px;
}

.pedidos-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.pedidos-action-link {
  align-items: center;
  background: var(--color-interactivo-suave);
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  color: var(--color-texto-secundario);
  display: inline-flex;
  flex: 0 0 34px;
  height: 34px;
  justify-content: center;
  text-decoration: none;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida), color var(--transicion-rapida);
  width: 34px;
}

.pedidos-action-link:hover {
  background: var(--color-interactivo-hover);
  border-color: var(--color-borde-fuerte);
  color: var(--color-texto);
}

.pedidos-action-link--danger {
  color: var(--color-peligro);
}

.pedidos-action-link .app-icon {
  font-size: 18px;
  height: 18px;
  width: 18px;
}

.pedidos-empty-cell {
  color: var(--color-texto-tenue);
  padding: 42px 20px !important;
  text-align: center;
}

.pedidos-filter__panel--providers {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  gap: 14px;
  max-height: min(460px, 62vh);
  min-width: min(880px, 100vw - 120px);
  overflow: auto;
  width: min(880px, 100vw - 120px);
}

.pedidos-filter__panel--providers .pedidos-filter__search {
  margin-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 1;
}

.pedidos-filter__panel--providers .pedidos-filter__search.app-input {
  background: var(--color-superficie-tarjeta-flotante);
}

#proveedores_list {
  display: grid;
  gap: 12px 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#proveedores_list .pedidos-filter__option {
  break-inside: avoid;
}

.pedidos-filter__panel--providers .app-check {
  align-items: flex-start;
}

.pedidos-filter__panel--providers .app-check span {
  line-height: 1.25;
}

@media (max-width: 1024px) {
  .pedidos-view__header {
    align-items: stretch;
    flex-direction: column;
  }
  .pedidos-view__cta {
    align-self: flex-start;
  }
  .pedidos-filter__panel--providers {
    min-width: min(720px, 100vw - 72px);
    width: min(720px, 100vw - 72px);
  }
  #proveedores_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pedidos-table thead th:nth-child(2),
  .pedidos-table thead th:nth-child(3),
  .pedidos-table thead th:nth-child(n+6),
  .pedidos-table tbody td:nth-child(2),
  .pedidos-table tbody td:nth-child(3),
  .pedidos-table tbody td:nth-child(n+6) {
    display: none;
  }
  .pedidos-table thead th,
  .pedidos-table tbody td {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* El checkbox de selección ocupaba demasiado ancho útil. Se sube la
     especificidad para ganarle a la regla general de padding de celdas. */
  .pedidos-table thead th.pedidos-table__select,
  .pedidos-table tbody td.pedidos-table__select {
    padding-left: 6px;
    padding-right: 0;
    width: 30px;
  }
  .pedidos-table tbody td.pedidos-table__provider {
    padding-left: 8px;
  }
  .pedidos-table__provider {
    width: 100%;
  }
  .pedidos-provider-link {
    gap: 9px;
  }
  .pedidos-provider-link__avatar {
    flex-basis: 36px;
    font-size: 0.78rem;
    height: 36px;
    width: 36px;
  }
  .pedidos-provider-link__name {
    font-size: 0.9rem;
  }
  .pedidos-provider-link__meta {
    font-size: 0.76rem;
  }
  /* En móvil basta el número: "Pedido #83793" -> "#83793". */
  .pedidos-provider-link__meta-label {
    display: none;
  }
  /* Número de factura junto al número de pedido. */
  .pedidos-provider-link__invoice {
    display: inline;
  }
  /* Fecha como antetítulo, encima del nombre del proveedor. */
  .pedidos-provider-link__date {
    color: var(--color-texto-tenue);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
  }
  /* Estado de pago apilado debajo del estado de recepción. */
  .pedidos-status__pay-mobile {
    display: inline-flex;
  }
  /* Ambas píldoras (recepción y pago) al mismo tamaño compacto. */
  .pedidos-status-stack .app-status {
    font-size: 0.66rem;
    min-height: 24px;
    padding-inline: var(--espacio-2);
  }
}
@media (max-width: 860px) {
  .pedidos-view {
    padding-bottom: 86px;
  }
  .pedidos-view__title {
    font-size: 1.45rem;
  }
  /* Layout automático: la columna de estado conserva su ancho y el nombre del
     proveedor (word-break) absorbe el espacio restante sin colapsar a Estado. */
  .pedidos-table {
    table-layout: auto;
  }
  .pedidos-filter__panel--providers {
    min-width: min(100vw - 40px, 100%);
    width: min(100vw - 40px, 100%);
  }
}
.app-detail-view {
  display: grid;
  gap: 24px;
}

.app-detail-header {
  display: grid;
  gap: 18px;
}

.app-detail-header__heading {
  display: grid;
  gap: 8px;
}

.app-detail-header__eyebrow {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
  font-weight: 760;
  margin: 0;
  text-transform: uppercase;
}

.app-detail-header__title {
  color: var(--color-texto);
  font-size: clamp(2rem, 2vw, 2.5rem);
  line-height: 1;
  margin: 0;
}

.app-inline-meta {
  color: var(--color-texto-secundario);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.app-inline-meta span {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.app-inline-meta span:not(:last-child)::after {
  color: var(--color-texto-tenue);
  content: "•";
  margin-left: 6px;
}

.app-detail-header__status-group,
.app-detail-header__actions,
.app-section-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pedido-header-action-form {
  display: inline-flex;
  margin: 0;
}

.pedido-feedback-stack {
  display: grid;
  gap: 10px;
}

.pedido-feedback {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde);
  border-radius: 15px;
  color: var(--color-texto);
  display: flex;
  gap: 12px;
  padding: 14px 18px;
}

.pedido-feedback--danger {
  border-color: var(--color-peligro-borde);
  color: var(--color-peligro);
}

.pedido-feedback--success {
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.pedido-feedback__icon {
  display: inline-flex;
  flex: 0 0 18px;
  height: 18px;
  width: 18px;
}

.pedido-feedback__icon svg,
.pedido-feedback__icon .app-icon {
  font-size: 18px;
  height: 100%;
  width: 100%;
}

.pedido-feedback--compact {
  border-radius: 12px;
  font-size: 0.86rem;
  padding: 10px 12px;
}

.pedido-ai-test-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.pedido-ai-json {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  color: var(--color-texto);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 12px 0 0;
  max-height: 360px;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.pedido-ai-json-details {
  margin-top: 12px;
}

.pedido-ai-json-details summary {
  color: var(--color-texto-secundario);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 720;
}

.pedido-ai-json-details .pedido-ai-json {
  margin-top: 10px;
}

.pedido-summary-grid,
.pedido-dual-grid {
  display: grid;
  gap: 24px;
}

.pedido-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pedido-dual-grid {
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
}

.app-info-list {
  display: grid;
  gap: 14px;
}

.app-info-list--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-info-list--columns {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-info-list__column {
  display: grid;
  gap: 14px;
}

.app-info-row {
  align-items: center;
  border-bottom: 1px solid var(--color-borde-suave);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 34px;
  padding-bottom: 10px;
}

.app-info-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.app-info-row__label {
  color: var(--color-texto-secundario);
  flex: 1 1 auto;
}

.pedido-inline-toggle {
  min-height: 36px;
}

.pedido-add-product-grid,
.pedido-modal-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pedido-modal-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pedido-payment-form {
  display: grid;
  gap: 18px;
}

.pedido-payment-form__row {
  display: grid;
  gap: 16px;
}

.pedido-payment-form__row--top {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.pedido-field {
  display: grid;
  gap: 8px;
}

.pedido-field--wide {
  grid-column: 1/-2;
}

.pedido-field--span-2 {
  grid-column: span 2;
}

.pedido-field--action {
  align-self: end;
}

.pedido-field__help {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  margin: 0;
}

.pedido-field__label-row {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.pedido-inline-config {
  background: transparent;
  border: 0;
  color: var(--color-acento);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 760;
  padding: 0;
}

.pedido-config-list {
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  display: grid;
  margin-top: 18px;
  overflow: hidden;
}

.pedido-config-list__item {
  align-items: center;
  border-bottom: 1px solid var(--color-borde-suave);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 12px;
}

.pedido-config-list__item:last-child {
  border-bottom: 0;
}

.pedido-product-select-wrapper {
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-radius: 0;
  min-height: 0;
  min-width: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

.pedido-product-select-wrapper.app-input,
.pedido-product-select-wrapper.pedido-product-select {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 0;
  padding: 0;
}

.pedido-product-select-wrapper input {
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.pedido-product-select-wrapper.single .pedido-product-control,
.pedido-product-control {
  align-items: center;
  background: var(--color-input-bg);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  color: var(--color-texto);
  cursor: text;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  min-height: 54px;
  overflow: hidden;
  padding: 5px 46px 5px 18px;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
  width: 100%;
}

.pedido-product-select-wrapper.focus .pedido-product-control,
.pedido-product-select-wrapper.input-active .pedido-product-control {
  background: var(--color-input-bg-focus);
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.pedido-product-control input {
  color: var(--color-texto);
  flex: 1 1 auto;
  font: inherit;
  min-width: 8rem;
}

.pedido-product-select-wrapper.has-items .pedido-product-control input {
  caret-color: transparent;
  flex: 0 0 0;
  min-width: 0;
  opacity: 0;
  width: 0 !important;
}

.pedido-product-select-wrapper.has-items.input-active:not(.dropdown-active) .pedido-product-control input {
  opacity: 0;
}

.pedido-product-control input::placeholder {
  color: var(--color-texto-tenue);
}

.pedido-product-select-wrapper.single .pedido-product-control::after {
  border-color: var(--color-texto-secundario) transparent transparent;
  border-width: 5px 5px 0;
  right: 18px;
}

.pedido-product-select-wrapper.single.dropdown-active .pedido-product-control::after {
  border-color: transparent transparent var(--color-texto-secundario);
  border-width: 0 5px 5px;
}

.pedido-product-dropdown {
  background: var(--color-superficie-flotante);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  color: var(--color-texto);
  margin-top: 8px;
  max-height: min(420px, 52vh);
  overflow: hidden;
  padding: 8px;
  position: absolute;
  z-index: 260;
}

.pedido-product-dropdown .ts-dropdown-content {
  display: grid;
  gap: 4px;
  max-height: calc(min(420px, 52vh) - 16px);
  overflow: auto;
}

.pedido-product-dropdown__option {
  border-radius: 14px;
  color: var(--color-texto);
  cursor: pointer;
  padding: 8px;
  transition: background var(--transicion-rapida), color var(--transicion-rapida);
}

.pedido-product-dropdown__option.active,
.pedido-product-dropdown__option:hover {
  background: var(--color-superficie-panel);
}

.pedido-product-option,
.pedido-product-selected {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.pedido-product-option__media {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: 12px;
  color: var(--color-texto-secundario);
  display: inline-flex;
  flex: 0 0 48px;
  font-size: 0.78rem;
  font-weight: 800;
  height: 48px;
  justify-content: center;
  overflow: hidden;
  width: 48px;
}

.pedido-product-option__media img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.pedido-product-option__body,
.pedido-product-selected {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pedido-product-control__item {
  min-width: 0;
  max-width: 100%;
}

.pedido-product-control .pedido-product-selected {
  width: 100%;
}

.pedido-product-option__body strong,
.pedido-product-selected strong {
  color: var(--color-texto);
  font-weight: 760;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pedido-product-option__body small,
.pedido-product-selected small {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pedido-product-empty {
  color: var(--color-texto-secundario);
  padding: 14px 12px;
}

.pedido-create-page.is-start {
  align-content: start;
  max-width: 1440px;
  padding-top: 32px;
}

.pedido-create-page.is-start.app-detail-view {
  gap: 20px;
}

.pedido-create-page.is-start .app-detail-header {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  text-align: left;
}

.pedido-create-page.is-start .app-detail-header__heading {
  max-width: 720px;
}

.pedido-create-page.is-start .app-detail-header__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 0;
}

.pedido-create-page.is-start .app-section-card {
  margin-inline: 0;
  max-width: 960px;
  width: min(100%, 960px);
}

.pedido-create-page.is-start .pedido-feedback-stack:empty {
  display: none;
}

.pedido-create-page.is-start .app-form-grid--2 {
  align-items: end;
  grid-template-columns: minmax(360px, 1fr) auto;
}

.pedido-create-page.is-start .app-field--actions .app-button {
  min-height: 56px;
  padding-inline: 24px;
}

.pedido-create-page.is-start .app-section-card > .app-card__body {
  padding-block: 22px;
}

.pedido-provider-option__avatar {
  border-radius: 50%;
  flex-basis: 38px;
  font-size: 0.72rem;
  height: 38px;
  width: 38px;
}

.pedido-provider-select-wrapper .pedido-product-control {
  align-items: center;
  flex-wrap: nowrap;
  height: 56px;
  min-height: 56px;
  padding-block: 0;
  position: relative;
}

.pedido-provider-select-wrapper .pedido-product-control::after {
  border-color: var(--color-texto-secundario) transparent transparent;
  border-style: solid;
  border-width: 6px 5px 0;
  content: "";
  height: 0;
  pointer-events: none;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
}

.pedido-provider-select-wrapper.dropdown-active .pedido-product-control::after {
  border-color: transparent transparent var(--color-texto-secundario);
  border-width: 0 5px 6px;
}

.pedido-provider-select-wrapper .pedido-product-control input {
  height: 44px;
  line-height: 44px;
  padding: 0;
}

.pedido-provider-select-wrapper.has-items.focus .pedido-product-control input,
.pedido-provider-select-wrapper.has-items.input-active .pedido-product-control input,
.pedido-provider-select-wrapper.has-items.dropdown-active .pedido-product-control input {
  caret-color: auto;
  flex: 1 1 10rem;
  min-width: 8rem;
  opacity: 1;
  width: auto !important;
}

.pedido-provider-select-wrapper.has-items.focus .pedido-product-control__item,
.pedido-provider-select-wrapper.has-items.input-active .pedido-product-control__item,
.pedido-provider-select-wrapper.has-items.dropdown-active .pedido-product-control__item {
  display: none;
}

.pedido-provider-select-wrapper .pedido-product-control__item {
  align-items: center;
  display: flex;
  min-height: 44px;
}

.pedido-provider-selected {
  align-items: center;
  display: flex;
  min-height: 44px;
}

.pedido-provider-selected strong {
  line-height: 1.2;
  white-space: nowrap;
}

.pedido-textarea,
.pedido-comment-composer__input {
  border-radius: var(--radio-card);
  min-height: 132px;
  padding-block: 14px;
  resize: vertical;
}

.pedido-textarea--compact {
  min-height: 86px;
}

.pedido-file-drop {
  align-items: center;
  background: var(--color-input-bg);
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio-card);
  color: var(--color-texto);
  cursor: pointer;
  display: flex;
  gap: 14px;
  min-height: 78px;
  padding: 14px 16px;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.pedido-file-drop:hover,
.pedido-file-drop:focus-within {
  background: var(--color-input-bg-hover);
  border-color: var(--color-input-border-hover);
}

.pedido-file-drop.is-filled {
  background: var(--color-superficie-panel);
  border-style: solid;
}

.pedido-file-drop__icon {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: 14px;
  color: var(--color-texto-secundario);
  display: inline-flex;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.pedido-file-drop.is-filled .pedido-file-drop__icon {
  color: var(--color-texto);
}

.pedido-file-drop__icon svg,
.pedido-file-drop__icon .app-icon {
  font-size: 20px;
  height: 20px;
  width: 20px;
}

.pedido-file-drop__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.pedido-file-drop__body strong,
.pedido-file-drop__body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pedido-file-drop__body strong {
  color: var(--color-texto);
  font-weight: 760;
}

.pedido-file-drop__body small {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
}

.pedido-file-drop__input {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.pedido-kpi-inline {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.pedido-kpi-inline__label,
.pedido-table-muted {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
}

.pedido-invoice-shell,
.pedido-modal-invoice {
  display: grid;
  gap: 18px;
}

.pedido-invoice-shell {
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde);
  border-radius: 22px;
  margin-top: 18px;
  padding: 20px;
}

.pedido-invoice-shell--flat {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-top: 0;
  padding: 0;
}

.pedido-invoice-shell__header,
.pedido-modal-invoice__summary,
.pedido-modal-invoice__section-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.pedido-invoice-shell__title,
.pedido-modal-invoice__title {
  color: var(--color-texto);
  font-size: 1.02rem;
  font-weight: 760;
  margin: 0;
}

.pedido-invoice-shell__description,
.pedido-modal-invoice__description,
.pedido-invoice-shell__empty p {
  color: var(--color-texto-secundario);
  margin: 4px 0 0;
}

.pedido-invoice-alert {
  align-items: flex-start;
  border-radius: 15px;
  display: flex;
  gap: 10px;
  padding: 8px 20px;
}

.pedido-invoice-alert--warning {
  background: color-mix(in srgb, var(--color-status-warning-bg) 72%, var(--color-superficie-panel));
  border: 1px solid var(--color-status-warning-border);
}

.pedido-invoice-alert__icon,
.pedido-invoice-shell__empty-icon {
  color: var(--color-status-warning-text);
  display: inline-flex;
  flex: 0 0 24px;
  height: 24px;
  width: 24px;
}

.pedido-invoice-alert__icon svg,
.pedido-invoice-shell__empty-icon svg,
.pedido-invoice-alert__icon .app-icon,
.pedido-invoice-shell__empty-icon .app-icon {
  font-size: 24px;
  height: 100%;
  width: 100%;
}

.pedido-invoice-alert strong,
.pedido-invoice-shell__empty strong {
  color: var(--color-texto);
  display: block;
  font-size: 1rem;
  margin-bottom: 1px;
}

.pedido-invoice-shell__meta {
  display: grid;
  gap: 12px;
  grid-template-columns: 1;
}

.pedido-invoice-metric {
  background: var(--color-superficie-primaria);
  border: 1px solid var(--color-borde-suave);
  border-radius: 15px;
  display: grid;
  gap: 2px;
  min-height: 88px;
  padding: 12px 16px;
}

.pedido-invoice-metric span,
.pedido-modal-invoice__section-head span {
  color: var(--color-texto-secundario);
  font-size: 0.9rem;
}

.pedido-invoice-metric strong,
.pedido-modal-invoice__section-head strong {
  color: var(--color-texto);
  font-size: 1.5rem;
  font-weight: 760;
  margin: 0;
}

.pedido-invoice-shell__list-header {
  align-items: center;
  color: var(--color-texto);
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.pedido-invoice-shell__list-header span {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
}

.pedido-invoice-files,
.pedido-modal-invoice__files {
  display: grid;
  gap: 12px;
}

.pedido-invoice-file {
  align-items: center;
  background: var(--color-superficie-primaria);
  border: 1px solid var(--color-borde-suave);
  border-radius: 15px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 16px;
}

.pedido-invoice-file__meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.pedido-invoice-file__meta strong {
  color: var(--color-texto);
}

.pedido-invoice-file__meta span {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
}

.pedido-invoice-shell__empty {
  align-items: flex-start;
  background: var(--color-superficie-primaria);
  border: 1px dashed var(--color-borde);
  border-radius: 15px;
  display: flex;
  gap: 14px;
  padding: 12px 18px;
}

.pedido-retention-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.pedido-retention-card {
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: 14px;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.pedido-retention-summary--compact .pedido-retention-card {
  min-height: 0;
}

.pedido-retention-card__header,
.pedido-retention-card__meta {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.pedido-retention-card__header strong,
.pedido-retention-card__meta strong {
  color: var(--color-texto);
  font-weight: 760;
}

.pedido-retention-card__state {
  border-radius: var(--radio-pill);
  font-size: 0.7rem;
  font-weight: 760;
  padding: 4px 8px;
}

.pedido-retention-card__state.is-active {
  background: var(--color-status-success-bg);
  border: 1px solid var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.pedido-retention-card__state.is-inactive {
  background: var(--color-superficie-primaria);
  border: 1px solid var(--color-borde);
  color: var(--color-texto-secundario);
}

.pedido-retention-card__meta {
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
}

.pedido-retention-card__meta > div {
  align-items: baseline;
  display: inline-flex;
  gap: 5px;
  min-width: 0;
}

.pedido-retention-card__meta span {
  color: var(--color-texto-secundario);
  font-size: 0.76rem;
}

.pedido-retention-card__meta strong {
  font-size: 0.82rem;
}

.app-payment-summary {
  --payment-accent: #ff7b87;
  --payment-surface: rgba(255, 123, 135, 0.1);
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde);
  border-radius: 15px;
  display: grid;
  gap: 18px;
  padding: 22px;
}

.app-payment-summary--paid {
  --payment-accent: #2edb76;
  --payment-surface: rgba(46, 219, 118, 0.12);
}

.app-payment-summary--partial {
  --payment-accent: #e8b109;
  --payment-surface: rgba(232, 177, 9, 0.12);
}

.app-payment-summary--pending {
  --payment-accent: #ff7b87;
  --payment-surface: rgba(255, 123, 135, 0.1);
}

.app-payment-summary__headline {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.app-payment-summary__copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.app-payment-summary__eyebrow {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  font-weight: 760;
  text-transform: uppercase;
}

.app-payment-summary__amount-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.app-payment-summary__amount {
  color: var(--color-texto);
  font-size: clamp(1.8rem, 2.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
}

.app-payment-summary__description,
.app-section-subheader__description {
  color: var(--color-texto-secundario);
  margin: 0;
}

.app-payment-summary__ratio {
  align-items: center;
  background: var(--payment-surface);
  border: 1px solid color-mix(in srgb, var(--payment-accent) 28%, transparent);
  border-radius: 10px;
  color: var(--payment-accent);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  min-width: 144px;
  padding: 10px 20px;
  text-align: center;
  white-space: nowrap;
}

.app-payment-summary__ratio strong {
  font-size: 1.2rem;
  line-height: 1;
}

.app-payment-summary__ratio span {
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
}

.app-payment-summary__bar {
  background: var(--color-interactivo-fuerte);
  border-radius: var(--radio-pill);
  height: 10px;
  overflow: hidden;
}

.app-payment-summary__bar-fill {
  background: var(--payment-accent);
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 4px;
}

.app-payment-summary__metrics {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-payment-summary__metric {
  display: grid;
  gap: 6px;
}

.app-payment-summary__metric span {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
}

.app-payment-summary__metric strong,
.app-section-subheader__title {
  color: var(--color-texto);
  font-size: 0.96rem;
  font-weight: 760;
}

.app-section-subheader {
  align-items: center;
  border-top: 1px solid var(--color-borde-suave);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 15px;
}

.app-section-subheader > div {
  display: grid;
  gap: 6px;
}

.app-section-subheader__title {
  margin: 0;
}

.app-empty-state {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px dashed var(--color-borde);
  border-radius: 15px;
  display: flex;
  gap: 18px;
  padding: 22px;
}

.app-empty-state--compact {
  margin-top: 16px;
}

.app-empty-state__icon {
  color: var(--color-texto-secundario);
  display: inline-flex;
  flex: 0 0 28px;
  height: 28px;
  width: 28px;
}

.app-empty-state__icon svg,
.app-empty-state__icon .app-icon {
  font-size: 28px;
  height: 100%;
  width: 100%;
}

.app-empty-state h3,
.app-empty-state p {
  margin: 0;
}

.app-empty-state h3 {
  font-size: 1rem;
}

.app-empty-state p {
  color: var(--color-texto-secundario);
  margin-top: 6px;
}

.pedido-detail-table th:last-child,
.pedido-detail-table td:last-child {
  text-align: right;
}

.pedido-col-actions {
  width: 140px;
}

.pedido-file-meta {
  display: grid;
  gap: 4px;
}

.pedido-file-meta span {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
}

.pedido-table-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

button.pedidos-action-link {
  appearance: none;
  padding: 0;
}

.pedido-note-trigger {
  align-items: center;
  appearance: none;
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-pill);
  color: var(--color-texto);
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  font: inherit;
  max-width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  text-align: left;
}

.pedido-note-trigger svg,
.pedido-note-trigger .app-icon {
  color: var(--color-texto-secundario);
  flex: 0 0 16px;
  font-size: 16px;
  height: 16px;
  width: 16px;
}

.pedido-note-trigger span {
  display: block;
  font-weight: 720;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pedido-note-modal__content {
  background: var(--color-superficie-tarjeta-flotante);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-flotante);
  color: var(--color-texto);
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 14px 16px;
}

.pedido-comment-composer {
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: 15px;
  display: grid;
  gap: 18px;
  margin-bottom: 26px;
  padding: 18px;
}

.pedido-comment-composer__header {
  align-items: center;
  display: flex;
  gap: 14px;
}

.pedido-comment-composer__header p {
  color: var(--color-texto-secundario);
  margin: 4px 0 0;
}

.pedido-comment-composer__avatar {
  border: 1px solid var(--color-borde);
  border-radius: 50%;
  flex: 0 0 48px;
  height: 48px;
  overflow: hidden;
  width: 48px;
}

.pedido-comment-composer__avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.pedido-comment-composer__form,
.pedido-comment-composer__actions {
  display: grid;
  gap: 14px;
}

.app-timeline {
  display: grid;
  gap: 20px;
}

.app-timeline__item {
  display: grid;
  gap: 18px;
  grid-template-columns: 48px minmax(0, 1fr);
}

.app-timeline__rail {
  display: flex;
  justify-content: center;
  position: relative;
}

.app-timeline__rail::after {
  background: var(--color-borde);
  content: "";
  inset: 48px auto -20px 50%;
  transform: translateX(-50%);
  width: 1px;
}

.app-timeline__item:last-child .app-timeline__rail::after {
  display: none;
}

.app-timeline__dot {
  align-items: center;
  background: var(--color-superficie-contraste);
  border-radius: 50%;
  color: var(--color-texto-contraste);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.app-timeline__dot svg,
.app-timeline__dot .app-icon {
  font-size: 14px;
  height: 14px;
  width: 14px;
}

.app-timeline__avatar {
  align-items: center;
  background: var(--color-avatar-fondo);
  border: 2px solid var(--color-superficie-tarjeta);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-borde-suave);
  color: var(--color-avatar-texto);
  display: inline-flex;
  flex: 0 0 44px;
  font-size: 0.78rem;
  font-weight: 800;
  height: 44px;
  justify-content: center;
  overflow: visible;
  position: relative;
  width: 44px;
  z-index: 1;
}

.app-timeline__avatar img {
  border-radius: 50%;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.app-timeline__event-icon {
  align-items: center;
  background: var(--color-superficie-contraste);
  border: 2px solid var(--color-superficie-tarjeta);
  border-radius: 50%;
  bottom: -3px;
  color: var(--color-texto-contraste);
  display: inline-flex;
  height: 20px;
  justify-content: center;
  position: absolute;
  right: -5px;
  width: 20px;
}

.app-timeline__event-icon svg,
.app-timeline__event-icon .app-icon {
  font-size: 11px;
  height: 11px;
  width: 11px;
}

.app-timeline__content {
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: 15px;
  display: grid;
  gap: 10px;
  padding: 16px 18px;
}

.app-timeline__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
}

.app-timeline__heading {
  display: grid;
  gap: 4px;
}

.app-timeline__heading strong {
  color: var(--color-texto);
}

.app-timeline__heading span,
.app-timeline__meta time {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
}

.app-timeline__meta time {
  white-space: nowrap;
}

.app-timeline__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.pedido-note-list {
  display: grid;
  gap: 14px;
}

.pedido-note-card {
  background: color-mix(in srgb, var(--color-status-danger-bg) 52%, var(--color-superficie-panel));
  border: 1px solid var(--color-status-danger-border);
  border-radius: 15px;
  box-shadow: var(--sombra-suave);
  display: grid;
  gap: 16px;
  padding: 18px 20px;
}

.pedido-note-card__header,
.pedido-note-card__footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.pedido-note-card__description {
  color: var(--color-texto);
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.5;
  margin: 0;
}

.pedido-note-card__meta {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
}

.pedido-note-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pedido-provider-alerts {
  border-color: var(--color-status-danger-border);
}

.pedido-provider-alerts .app-card__header {
  background: color-mix(in srgb, var(--color-status-danger-bg) 42%, transparent);
}

.pedido-provider-alerts .app-card__description {
  max-width: 50ch;
}

.modal--small {
  max-width: min(460px, 100vw - 32px);
}

.modal--medium {
  max-width: min(640px, 100vw - 32px);
}

.modal--large {
  max-width: min(860px, 100vw - 32px);
}

.modal--preview {
  max-width: min(960px, 100vw - 32px);
}

.pedido-modal-form {
  display: grid;
  gap: 18px;
}

.pedido-modal-preview {
  min-height: 320px;
}

.pedido-modal-preview iframe,
.pedido-modal-preview img {
  border: 0;
  border-radius: 15px;
  display: block;
  max-height: 70vh;
  width: 100%;
}

.pedido-modal-preview img {
  object-fit: contain;
}

.pedido-items-shell {
  display: grid;
  gap: 18px;
  --pedido-select-col-width: 35px;
  --pedido-product-col-width: 300px;
  --pedido-row-bg-default: var(--color-superficie-tarjeta);
  --pedido-row-bg-hover: color-mix(in srgb, var(--color-superficie-tarjeta) 94%, var(--color-texto) 6%);
  --pedido-row-bg-selected: color-mix(in srgb, var(--color-superficie-tarjeta) 90%, var(--color-texto) 10%);
  --pedido-row-bg-selected-hover: color-mix(in srgb, var(--color-superficie-tarjeta) 86%, var(--color-texto) 14%);
}

.pedido-items-table-container {
  --app-table-sticky-max-height: clamp(320px, calc(100vh - 190px), 900px);
}

.pedido-items-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.pedido-items-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pedido-items-footer {
  display: grid;
  gap: 18px;
  margin-top: 5px;
  padding-top: 20px;
}

.pedido-items-footer__actions,
.pedido-items-footer__submit {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pedido-items-footer__actions {
  justify-content: flex-start;
}

.pedido-items-footer__submit {
  justify-content: space-between;
}

.pedido-items-table__group,
.pedido-items-table__numeric,
.pedido-items-table__cell--select {
  text-align: center !important;
}

.pedido-items-table {
  border-collapse: separate;
  border-spacing: 0;
}

.pedido-items-table__cell--select {
  background-clip: padding-box;
  left: 0;
  min-width: var(--pedido-select-col-width);
  overflow: hidden;
  position: sticky;
  width: var(--pedido-select-col-width);
  z-index: 3;
}

.pedido-items-table__cell--product {
  background-clip: padding-box;
  border-right: 1px solid var(--color-borde-suave);
  left: var(--pedido-select-col-width);
  max-width: var(--pedido-product-col-width);
  min-width: var(--pedido-product-col-width);
  overflow: hidden;
  position: sticky;
  width: var(--pedido-product-col-width);
  z-index: 2;
  padding-left: 0px !important;
}

.pedido-items-table__product {
  align-items: center;
  display: flex;
  gap: 12px;
}

.pedido-items-table__product img {
  border-radius: 12px;
  flex: 0 0 46px;
  height: 46px;
  object-fit: cover;
  width: 46px;
}

.pedido-items-table__meta {
  display: grid;
  gap: 2px;
}

.pedido-items-table__meta a {
  color: var(--color-texto);
  font-weight: 700;
  text-decoration: none;
}

.pedido-items-table__meta a:hover {
  color: var(--color-texto);
  text-decoration: underline;
}

.pedido-items-table__meta span {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
}

.pedido-items-table__value {
  color: var(--color-texto);
  font-weight: 650;
}

.pedido-items-table .app-input {
  min-width: 62px;
  text-align: center;
}

.pedido-items-table .app-input-pesos {
  min-width: 105px;
}

.pedido-mobile-stepper {
  display: contents;
}

.pedido-mobile-stepper__button {
  display: none;
}

.pedido-items-table .app-button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.pedido-items-table td[data-label] {
  white-space: normal;
}

.pedido-items-table thead th {
  background: var(--color-superficie-tarjeta);
}

.pedido-items-table .pedido-items-table__cell--select,
.pedido-items-table .pedido-items-table__cell--product {
  background: var(--pedido-row-bg, var(--color-superficie-tarjeta));
}

.pedido-items-table tbody .fila-item {
  --pedido-row-bg: var(--pedido-row-bg-default);
}

.pedido-items-table tbody .fila-item:hover {
  --pedido-row-bg: var(--pedido-row-bg-hover);
}

.pedido-items-table tbody .fila-item.is-selected {
  --pedido-row-bg: var(--pedido-row-bg-selected);
}

.pedido-items-table tbody .fila-item.is-selected:hover {
  --pedido-row-bg: var(--pedido-row-bg-selected-hover);
}

.pedido-items-table tbody .fila-item:hover td,
.pedido-items-table tbody .fila-item.is-selected td {
  background: var(--pedido-row-bg);
}

.pedido-items-table tbody .fila-item.is-selected .pedido-items-table__meta a,
.pedido-items-table tbody .fila-item.is-selected .pedido-items-table__value {
  color: var(--color-texto);
}

@media (max-width: 1200px) {
  .pedido-summary-grid,
  .pedido-dual-grid {
    grid-template-columns: 1fr;
  }
  .app-payment-summary__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pedido-retention-summary {
    grid-template-columns: 1fr;
  }
  .pedido-invoice-shell__meta {
    grid-template-columns: 1fr;
  }
  .pedido-modal-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pedido-payment-form__row--top,
  .pedido-payment-form__row--support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .pedido-create-page.is-start .app-detail-header {
    align-items: stretch;
    display: grid;
    text-align: left;
  }
  .pedido-create-page.is-start .app-detail-header__actions {
    display: flex;
    justify-content: flex-start;
  }
  .pedido-create-page.is-start .app-form-grid--2 {
    grid-template-columns: 1fr;
  }
  .app-detail-header__actions {
    align-items: stretch;
    display: grid;
    gap: 18px;
  }
  .app-detail-header__actions > div:first-child {
    display: flex;
  }
  .app-detail-header__actions > div:nth-child(2) {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .app-detail-header__actions > div:nth-child(2) .app-button {
    min-height: 48px;
    padding-inline: 12px;
    width: 100%;
  }
  .app-detail-header__actions > div:nth-child(2) .pedido-header-action-form {
    width: 100%;
  }
  .app-detail-header__actions {
    gap: 10px;
  }
  .pedido-create-page.is-start .app-detail-header__actions {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }
  .pedido-create-page.is-start .app-detail-header__actions .app-button {
    width: auto;
  }
  .app-info-list--split,
  .app-info-list--columns,
  .pedido-add-product-grid,
  .pedido-modal-grid,
  .pedido-modal-grid--three,
  .pedido-payment-form__row--top,
  .pedido-payment-form__row--support {
    grid-template-columns: 1fr;
  }
  .app-payment-summary__headline,
  .app-section-subheader,
  .pedido-invoice-shell__header,
  .pedido-modal-invoice__summary,
  .pedido-modal-invoice__section-head,
  .pedido-invoice-shell__list-header {
    align-items: stretch;
    flex-direction: column;
  }
  .app-payment-summary__ratio {
    min-width: 0;
    text-align: left;
  }
  .pedido-field--wide {
    grid-column: auto;
  }
  .pedido-field--span-2 {
    grid-column: auto;
  }
  .pedido-items-table,
  .pedido-items-table thead,
  .pedido-items-table tbody,
  .pedido-items-table tr,
  .pedido-items-table td {
    display: block;
    width: 100%;
  }
  .pedido-items-table thead {
    display: none;
  }
  .pedido-items-table-container {
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }
  .pedido-items-table__cell--select,
  .pedido-items-table__cell--product {
    max-width: none;
    left: auto;
    min-width: 0;
    position: static;
    width: auto;
  }
  .pedido-items-table tr {
    background: var(--pedido-row-bg, var(--color-superficie-tarjeta));
    border: 1px solid var(--color-borde);
    border-radius: 15px;
    box-shadow: var(--sombra-suave);
    margin-bottom: 14px;
    overflow: hidden;
    padding: 14px;
    position: relative;
  }
  .pedido-items-table tbody .fila-item.is-selected {
    --pedido-row-bg: color-mix(in srgb, var(--color-superficie-tarjeta) 91%, var(--color-status-success-text) 9%);
    border-color: color-mix(in srgb, var(--color-status-success-text) 34%, var(--color-borde));
  }
  .pedido-items-table tbody .fila-item.is-selected:hover {
    --pedido-row-bg: color-mix(in srgb, var(--color-superficie-tarjeta) 88%, var(--color-status-success-text) 12%);
  }
  .pedido-items-table tbody .fila-item:hover td,
  .pedido-items-table tbody .fila-item.is-selected td {
    background: transparent;
  }
  .pedido-items-toolbar,
  .pedido-items-toolbar__group,
  .pedido-items-footer__actions,
  .pedido-items-footer__submit {
    align-items: stretch;
    flex-direction: column;
  }
  .pedido-items-toolbar .app-button,
  .pedido-items-footer .app-button {
    width: 100%;
  }
  .pedido-note-card__header,
  .pedido-note-card__footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .pedido-invoice-file {
    align-items: stretch;
    flex-direction: column;
  }
  .pedido-items-footer__submit .pedido-inline-toggle {
    width: 100%;
  }
  .pedido-items-table td {
    align-items: center;
    border-bottom: 0;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 36px;
    padding: 7px 0;
  }
  .pedido-items-table td::before {
    color: var(--color-texto-secundario);
    content: attr(data-label);
    flex: 0 0 86px;
    font-size: 0.78rem;
    font-weight: 700;
  }
  .pedido-detail-table td[data-label]::before {
    content: none;
    display: none;
  }
  .pedido-detail-table th:last-child,
  .pedido-detail-table td:last-child {
    text-align: left;
  }
  .pedido-items-table td[data-label=Producto] {
    align-items: flex-start;
  }
  .pedido-items-table td[data-label=Producto]::before {
    content: none;
    display: none;
  }
}
@media (max-width: 640px) {
  .app-detail-header__title {
    font-size: 1.8rem;
  }
  .app-detail-header__actions {
    margin-top: 4px;
  }
  .app-detail-header__actions > div:first-child .app-button {
    width: auto;
  }
  .app-detail-header__actions > div:nth-child(2) .app-button {
    border-radius: 15px;
    font-size: 0.84rem;
    justify-content: center;
    min-height: 50px;
    padding: 0 10px;
  }
  .app-detail-header__actions > div:nth-child(2) .app-button .app-icon {
    font-size: 18px;
    height: 18px;
    width: 18px;
  }
  .app-section-card > .app-card__header {
    gap: 12px;
    padding: 20px;
  }
  .app-section-card > .app-card__body {
    padding: 20px;
  }
  .app-section-card .app-card__description {
    font-size: 0.92rem;
    line-height: 1.25;
  }
  .app-payment-summary {
    padding: 16px;
  }
  .app-payment-summary__metrics {
    grid-template-columns: 1fr;
  }
  .pedido-retention-summary {
    gap: 10px;
    margin-bottom: 16px;
  }
  .pedido-retention-card {
    border-radius: 15px;
    gap: 8px;
    padding: 14px;
  }
  .pedido-retention-card__header strong {
    font-size: 1rem;
  }
  .pedido-retention-card__meta {
    align-items: flex-start;
    display: grid;
    gap: 6px;
  }
  .pedido-retention-card__meta > div {
    justify-content: space-between;
    width: 100%;
  }
  .app-info-row {
    gap: 16px;
    min-height: 46px;
    padding: 10px 0;
  }
  .app-info-row__label {
    font-size: 0.94rem;
    line-height: 1.2;
  }
  .app-info-row strong {
    font-size: 0.98rem;
    white-space: nowrap;
  }
  .pedido-detail-table {
    min-width: 760px;
  }
  .pedido-detail-table th,
  .pedido-detail-table td {
    padding: 12px 14px;
    white-space: normal;
  }
  .pedido-detail-table td {
    vertical-align: top;
  }
  .pedido-items-shell {
    gap: 14px;
  }
  .pedido-items-toolbar {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pedido-items-toolbar__group {
    display: contents;
  }
  .pedido-items-toolbar .app-button {
    border-radius: 15px;
    font-size: 0.82rem;
    gap: 8px;
    justify-content: center;
    min-height: 44px;
    padding-inline: 10px;
    white-space: normal;
  }
  .pedido-items-toolbar .app-button--danger-outline {
    grid-column: 1/-1;
  }
  .pedido-items-shell .app-table-container {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .pedido-items-table {
    border-spacing: 0;
  }
  .pedido-items-table tr {
    align-items: stretch;
    border-radius: 15px;
    display: grid;
    gap: 6px 8px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 14px;
    padding: 12px;
  }
  .pedido-items-table td {
    box-sizing: border-box;
    display: grid;
    font-size: 0.92rem;
    gap: 8px;
    grid-column: 1/-1;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    min-height: 28px;
    padding: 4px 0;
    width: auto !important;
  }
  .pedido-items-table td::before {
    font-size: 0.78rem;
    line-height: 1.1;
  }
  .pedido-items-table__cell--select {
    display: flex !important;
    justify-content: flex-end !important;
    min-height: 24px !important;
    padding: 0 !important;
    position: absolute !important;
    right: 12px;
    top: 12px;
    width: auto !important;
    z-index: 2;
  }
  .pedido-items-table__cell--select::before {
    content: none !important;
    display: none !important;
  }
  .pedido-items-table__cell--product {
    background: color-mix(in srgb, var(--pedido-row-bg, var(--color-superficie-tarjeta)) 88%, var(--color-texto) 5%);
    border-bottom: 1px solid var(--color-borde-suave);
    border-right: 0;
    border-radius: 16px 16px 10px 10px;
    display: block !important;
    grid-column: 1/-1;
    margin-bottom: 8px;
    margin-left: -2px;
    margin-right: -2px;
    padding: 14px 44px 14px 14px !important;
    width: auto !important;
  }
  .pedido-items-table__product {
    align-items: center;
    gap: 14px;
    justify-content: flex-start;
    width: 100%;
  }
  .pedido-items-table__product img {
    border-radius: 12px;
    flex-basis: 58px;
    height: 58px;
    width: 58px;
  }
  .pedido-items-table__meta {
    min-width: 0;
  }
  .pedido-items-table__meta a {
    display: -webkit-box;
    font-size: 1rem;
    line-height: 1.15;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .pedido-items-table__meta span {
    font-size: 0.82rem;
  }
  .pedido-items-table__numeric {
    background: color-mix(in srgb, var(--pedido-row-bg, var(--color-superficie-tarjeta)) 92%, var(--color-texto) 3%);
    border-radius: 12px;
    grid-column: 1/-1;
    grid-template-columns: minmax(0, 1fr);
    min-height: 42px;
    padding: 8px 10px;
    text-align: left !important;
  }
  .pedido-items-table__numeric::before {
    color: var(--color-texto-secundario);
    font-size: 0.72rem;
    text-align: left;
  }
  .pedido-items-table__numeric--month-sale {
    grid-column: span 1 !important;
    gap: 4px;
    min-height: 54px;
    padding: 8px 4px;
    text-align: center !important;
  }
  .pedido-items-table__numeric--month-sale::before {
    font-size: 0.66rem;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pedido-items-table__numeric--month-sale .pedido-items-table__value,
  .pedido-items-table__numeric--month-sale {
    justify-items: center;
  }
  .pedido-items-table__numeric--third {
    grid-column: span 2 !important;
  }
  .pedido-items-table__numeric--half {
    grid-column: span 3 !important;
  }
  .pedido-items-table__numeric--full,
  .pedido-items-table__numeric--stepper,
  .pedido-items-table td[data-label="Total und."] {
    grid-column: 1/-1 !important;
  }
  .pedido-items-table__numeric--stepper,
  .pedido-items-table td[data-label="Total und."] {
    background: transparent;
    padding-inline: 0;
  }
  .pedido-items-table td[data-label="Total und."] {
    margin-top: 4px;
  }
  .pedido-items-table td[data-label="Total item"] {
    background: color-mix(in srgb, var(--pedido-row-bg, var(--color-superficie-tarjeta)) 88%, var(--color-texto) 6%);
    border-radius: 14px;
    grid-column: 1/-1 !important;
    margin-top: 4px;
    padding: 10px 12px;
  }
  .pedido-items-table td[data-label="Bruto und."] {
    border-top: 1px solid var(--color-borde-suave);
    margin-top: 8px;
    padding-top: 12px;
  }
  .pedido-items-table td[data-label="Subt. bruto"] {
    border-top: 1px solid var(--color-borde-suave);
    margin-top: 8px;
    padding-top: 12px;
  }
  .pedido-items-table .app-input {
    flex: 1 1 auto;
    min-height: 40px;
    min-width: 0;
    max-width: 100%;
  }
  .pedido-items-table .app-input-pesos {
    min-width: 0;
  }
  .pedido-items-table__numeric {
    align-items: center;
    text-align: left !important;
  }
  .pedido-items-table__numeric::before {
    text-align: left;
  }
  .pedido-items-table__numeric > .app-input {
    justify-self: stretch;
  }
  .pedido-items-table__numeric > .app-check-input,
  .pedido-items-table__value {
    justify-self: start;
  }
  .pedido-items-table__numeric > .pedido-mobile-stepper {
    justify-self: stretch;
  }
  .pedido-mobile-stepper {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    width: 100%;
  }
  .pedido-mobile-stepper .app-input {
    justify-self: stretch;
    min-height: 44px;
    width: 100%;
  }
  .pedido-mobile-stepper__button {
    align-items: center;
    background: var(--color-superficie-panel);
    border: 1px solid var(--color-borde-suave);
    border-radius: 999px;
    color: var(--color-texto);
    cursor: pointer;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    transition: background var(--transicion-rapida), border-color var(--transicion-rapida), transform var(--transicion-rapida);
    width: 40px;
  }
  .pedido-mobile-stepper__button:hover {
    background: var(--color-superficie-elevada);
    border-color: var(--color-borde);
  }
  .pedido-mobile-stepper__button:active {
    transform: scale(0.96);
  }
  .pedido-mobile-stepper__button .app-icon {
    font-size: 20px;
    height: 20px;
    width: 20px;
  }
  .pedido-items-table__numeric.borde-end,
  .pedido-items-table .borde-end {
    border-right: 0;
  }
  .pedido-items-table td[data-label=Acciones] {
    border-top: 1px solid var(--color-borde-suave);
    grid-column: 1/-1 !important;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 8px;
    padding-top: 12px;
  }
  .pedido-items-table td[data-label=Acciones] .pedido-table-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .pedido-items-table td[data-label=Acciones] .app-button--icon {
    min-height: 54px;
    min-width: 54px;
  }
  .pedido-items-table td[data-label=Acciones] .app-button--icon .app-icon {
    font-size: 1.45rem;
    height: 1.45rem;
    width: 1.45rem;
  }
}
/* Anulación lógica de ítems de órdenes */
.pedido-anulados-card {
  overflow: hidden;
}

.pedido-anulados-card__summary {
  cursor: pointer;
  list-style: none;
  align-items: center;
  gap: var(--espacio-4);
}

.pedido-anulados-card__summary::-webkit-details-marker {
  display: none;
}

.pedido-anulados-card__summary::after {
  content: "expand_more";
  font-family: "Material Symbols Rounded";
  font-size: 1.35rem;
  margin-left: auto;
  transition: transform 0.2s ease;
}

.pedido-anulados-card[open] .pedido-anulados-card__summary::after {
  transform: rotate(180deg);
}

.pedido-items-anulados-table .is-muted,
.pedido-items-anulados-table tr.is-muted td {
  color: var(--color-texto-muted, #6b7280);
}

.pedido-items-anulados-table td,
.pedido-items-anulados-table th {
  vertical-align: top;
}

/* ==========================================================================
   Panel de sincronización Shopify (recepción de pedidos)
   ========================================================================== */
.pedido-shopify-sync {
  --shopify-accent: var(--color-status-warning-text);
  border-left: 3px solid var(--shopify-accent);
}

.pedido-shopify-sync.is-success {
  --shopify-accent: var(--color-status-success-text);
}

.pedido-shopify-sync.is-error {
  --shopify-accent: var(--color-status-danger-text);
}

.pedido-shopify-sync__body {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
}

.pedido-shopify-sync__progress {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
}

.pedido-shopify-sync__progress-track {
  background: var(--color-interactivo-fuerte);
  border-radius: var(--radio-pill);
  flex: 1;
  height: 10px;
  min-width: 120px;
  overflow: hidden;
  position: relative;
}

.pedido-shopify-sync__progress-track [data-shopify-progress] {
  background: linear-gradient(90deg, var(--color-status-warning-text), #f7d16b);
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 6px;
  transition: width 0.35s ease;
  width: 0;
}

.pedido-shopify-sync.is-success .pedido-shopify-sync__progress-track [data-shopify-progress] {
  background: linear-gradient(90deg, #21c065, var(--color-status-success-text));
}

.pedido-shopify-sync.is-error .pedido-shopify-sync__progress-track [data-shopify-progress] {
  background: linear-gradient(90deg, var(--color-status-danger-text), #ff9ca4);
}

/* Barrido animado mientras el worker procesa productos. */
.pedido-shopify-sync.is-running .pedido-shopify-sync__progress-track::after {
  animation: pedido-shopify-shimmer 1.2s linear infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  content: "";
  inset: 0;
  position: absolute;
}

@keyframes pedido-shopify-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
.pedido-shopify-sync [data-shopify-progress-label] {
  color: var(--color-texto);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: right;
}

.pedido-shopify-sync__counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.pedido-shopify-sync__counts span {
  align-items: center;
  background: var(--color-superficie-alta);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-pill);
  color: var(--color-texto-secundario);
  display: inline-flex;
  font-size: 0.8rem;
  gap: 6px;
  padding: 4px 10px;
}

.pedido-shopify-sync__counts span::before {
  border-radius: 50%;
  content: "";
  height: 7px;
  width: 7px;
}

.pedido-shopify-sync__counts span strong {
  color: var(--color-texto);
  font-weight: 700;
}

.pedido-shopify-sync__counts span:nth-child(1)::before {
  background: var(--color-status-success-text);
}

.pedido-shopify-sync__counts span:nth-child(2)::before {
  background: var(--color-status-warning-text);
}

.pedido-shopify-sync__counts span:nth-child(3)::before {
  background: var(--color-status-danger-text);
}

.pedido-shopify-sync__counts span:nth-child(4)::before {
  background: var(--color-texto-tenue);
}

.pedido-shopify-sync__current {
  color: var(--color-texto-secundario);
  font-size: 0.86rem;
  margin: 0;
}

.pedido-shopify-sync__error-group {
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-sm);
  margin-top: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3);
}

.pedido-shopify-sync__error-group summary {
  color: var(--color-texto);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}

.pedido-shopify-sync__error-group ul {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
  margin: var(--espacio-2) 0 0;
  padding-left: var(--espacio-4);
}

.pedido-shopify-sync__technical {
  color: var(--color-texto-tenue);
  font-size: 0.78rem;
  margin: var(--espacio-2) 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .pedido-shopify-sync.is-running .pedido-shopify-sync__progress-track::after {
    animation: none;
  }
  .pedido-shopify-sync__progress-track [data-shopify-progress] {
    transition: none;
  }
}
.productos-page {
  padding-inline: clamp(16px, 2.6vw, 36px);
}

.productos-filter-form {
  display: grid;
  gap: var(--espacio-3);
}

.productos-filter-grid {
  grid-template-columns: minmax(280px, 1.8fr) repeat(4, minmax(170px, 1fr));
}

.productos-range-grid {
  align-items: end;
  gap: var(--espacio-3);
  grid-template-columns: repeat(5, minmax(118px, 1fr));
}

.productos-filter-actions {
  align-self: end;
  display: flex;
  gap: var(--espacio-2);
  justify-content: flex-start;
}

.productos-filter-summary {
  align-items: flex-start;
  border-top: 1px solid var(--color-borde-suave);
  display: grid;
  gap: var(--espacio-2);
  grid-template-columns: auto 1fr;
  margin-top: var(--espacio-4);
  padding-top: var(--espacio-4);
}

.productos-filter-summary__label {
  color: var(--color-texto-secundario);
  font-size: 0.74rem;
  font-weight: 760;
  letter-spacing: 0;
  padding-top: 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

.productos-table-card__header {
  align-items: flex-start;
}

.productos-simulator-card {
  padding: clamp(18px, 2vw, 24px);
}

.productos-simulator {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  justify-content: space-between;
}

.productos-simulator__control {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.productos-simulator__field {
  width: 108px;
}

.productos-simulator__input,
.productos-edit__input {
  text-align: center;
}

.productos-simulator__unit {
  color: var(--color-texto-secundario);
  font-weight: 760;
  padding-bottom: 9px;
}

.productos-table-wrap {
  overflow-x: auto;
}

.productos-table {
  min-width: 2040px;
}

.productos-table th,
.productos-table td {
  vertical-align: middle;
  white-space: nowrap;
}

.productos-check-col {
  width: 40px;
}

.productos-check {
  cursor: pointer;
  height: 18px;
  width: 18px;
}

.productos-table tbody .fila-item.is-verificado td {
  background: var(--color-status-success-bg);
}

/* ── Columnas congeladas: Checkbox, #, Producto (como inmovilizar en Excel) ── */
.productos-table thead th:nth-child(-n+3),
.productos-table tbody td:nth-child(-n+3) {
  background: var(--color-superficie-tarjeta);
  position: sticky;
}

.productos-table thead th:nth-child(-n+3) {
  z-index: 3;
}

.productos-table tbody td:nth-child(-n+3) {
  z-index: 2;
}

/* Desplazamientos acumulados (box-sizing: border-box) */
.productos-table th:nth-child(1),
.productos-table td:nth-child(1) {
  left: 0;
  width: 44px;
}

.productos-table th:nth-child(2),
.productos-table td:nth-child(2) {
  left: 44px;
  width: 44px;
}

.productos-table th:nth-child(3),
.productos-table td:nth-child(3) {
  box-shadow: inset -1px 0 0 var(--color-borde);
  left: 88px;
}

/* Reflejar los estados de fila en las columnas fijas */
.productos-table tbody tr:hover td:nth-child(-n+3) {
  background: var(--color-fila-tabla-hover);
}

.productos-table tbody .fila-item.is-verificado td:nth-child(-n+3) {
  background: var(--color-status-success-bg);
}

.productos-product {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
  min-width: 280px;
}

.productos-product__image,
.productos-product__placeholder {
  background: var(--color-superficie-alta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  flex: 0 0 48px;
  height: 48px;
  object-fit: contain;
  width: 48px;
}

.productos-product__placeholder {
  align-items: center;
  color: var(--color-texto-tenue);
  display: inline-flex;
  justify-content: center;
}

.productos-product__content {
  display: grid;
  min-width: 0;
}

.productos-product__name {
  color: var(--color-texto);
  font-weight: 760;
  line-height: 1.18;
  max-width: 260px;
  text-decoration: none;
  white-space: normal;
}

.productos-product__name:hover {
  text-decoration: underline;
}

.productos-product__sku {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-texto-secundario);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.78rem;
  gap: 6px;
  justify-self: start;
  margin-top: 3px;
  padding: 0;
}

.productos-product__sku:hover {
  color: var(--color-texto);
}

.productos-edit {
  align-items: center;
  display: inline-flex;
  gap: var(--espacio-2);
  justify-content: center;
}

.productos-edit__input {
  width: 112px;
}

.productos-ml-status {
  text-decoration: none;
}

.productos-list-footer {
  margin-top: var(--espacio-4);
}

.productos-ml-loading {
  align-items: center;
  color: var(--color-texto-secundario);
  display: grid;
  gap: var(--espacio-2);
  justify-items: center;
  min-height: 160px;
}

.productos-ml-loading p {
  margin: 0;
}

.productos-ml-loading .material-symbols-rounded {
  font-size: 1.5rem;
}

.productos-ml-preview {
  align-items: center;
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: auto 1fr;
}

.productos-ml-preview__image,
.productos-ml-preview__placeholder {
  background: var(--color-superficie-alta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  height: 96px;
  object-fit: contain;
  width: 96px;
}

.productos-ml-preview__placeholder {
  align-items: center;
  color: var(--color-texto-tenue);
  display: flex;
  justify-content: center;
}

.productos-ml-preview__content h3 {
  font-size: 1rem;
  font-weight: 760;
  margin: 0 0 6px;
}

.productos-ml-preview__price {
  color: var(--color-status-success-text);
  font-weight: 760;
  margin: 0 0 4px;
}

.productos-ml-preview__meta {
  color: var(--color-texto-secundario);
  font-size: 0.86rem;
  margin: 0 0 4px;
}

.productos-ml-preview__meta strong {
  color: var(--color-texto);
}

.productos-ml-divider {
  border: 0;
  border-top: 1px solid var(--color-borde-suave);
  margin: var(--espacio-2) 0;
}

.productos-ml-block {
  display: grid;
  gap: var(--espacio-2);
}

.productos-ml-category {
  display: grid;
  gap: var(--espacio-2);
  grid-template-columns: 1fr auto;
}

.productos-ml-category .app-label,
.productos-ml-category__selected,
.productos-ml-suggestions {
  grid-column: 1/-1;
}

.productos-ml-category__selected {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
  font-weight: 650;
}

.productos-ml-suggestions {
  background: var(--color-superficie-flotante);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  overflow: hidden;
}

.productos-ml-suggestion {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-borde-suave);
  color: var(--color-texto);
  cursor: pointer;
  display: block;
  font: inherit;
  padding: 10px 12px;
  text-align: left;
  transition: background var(--transicion-rapida);
  width: 100%;
}

.productos-ml-suggestion:last-child {
  border-bottom: 0;
}

.productos-ml-suggestion:hover {
  background: var(--color-superficie-hover);
}

.productos-ml-suggestion small {
  color: var(--color-texto-secundario);
  margin-left: 6px;
}

.productos-ml-message {
  color: var(--color-texto-secundario);
  margin: 0;
  padding: 10px 12px;
}

.productos-ml-message--danger {
  color: var(--color-status-danger-text);
}

.productos-ml-textarea {
  border-radius: var(--radio-card);
  min-height: 92px;
  padding-block: 12px;
  resize: vertical;
}

.productos-ia-history__eyebrow {
  color: var(--color-texto-secundario);
  font-size: 0.74rem;
  font-weight: 760;
  margin-bottom: var(--espacio-2);
}

.productos-ia-history__summary {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: var(--espacio-5);
}

.productos-ia-history__summary > div {
  background: var(--color-superficie-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
}

.productos-ia-history__summary span {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  font-weight: 700;
}

.productos-ia-history__summary strong {
  color: var(--color-texto);
  font-size: 1.5rem;
  line-height: 1;
}

.productos-ia-history__filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.productos-ia-history__filters .app-input {
  min-width: 220px;
}

.productos-ia-history__table td {
  vertical-align: middle;
}

.productos-ia-history__product {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
  min-width: 300px;
}

.productos-ia-history__image,
.productos-ia-history__placeholder {
  background: var(--color-superficie-alta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  flex: 0 0 58px;
  height: 58px;
  object-fit: contain;
  width: 58px;
}

.productos-ia-history__placeholder {
  align-items: center;
  color: var(--color-texto-tenue);
  display: flex;
  justify-content: center;
}

.productos-ia-history__product-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.productos-ia-history__name {
  color: var(--color-texto);
  font-weight: 760;
  line-height: 1.25;
  max-width: 430px;
  text-decoration: none;
}

.productos-ia-history__name:hover {
  text-decoration: underline;
}

.productos-ia-history__meta,
.productos-ia-history__error {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
}

.productos-ia-history__error {
  display: block;
  margin-top: 8px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.productos-ia-history__images {
  display: grid;
  gap: 5px;
  min-width: 130px;
}

.productos-ia-history__images span {
  align-items: center;
  color: var(--color-texto-secundario);
  display: inline-flex;
  font-size: 0.8rem;
  gap: 6px;
}

.productos-ia-history__images .app-icon {
  font-size: 16px;
}

.productos-ia-history__footer {
  border-top: 1px solid var(--color-borde-suave);
  margin: 0;
  padding: 18px 28px 22px;
}

@media (max-width: 980px) {
  .productos-ia-history__summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .productos-ia-history__table-wrap {
    overflow: visible;
  }
  .productos-ia-history__table,
  .productos-ia-history__table tbody,
  .productos-ia-history__table tr,
  .productos-ia-history__table td {
    display: block;
    width: 100%;
  }
  .productos-ia-history__table thead {
    display: none;
  }
  .productos-ia-history__table tbody {
    display: grid;
    gap: var(--espacio-3);
    padding: var(--espacio-3);
  }
  .productos-ia-history__table tbody tr {
    background: var(--color-superficie-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-card);
    padding: var(--espacio-3);
  }
  .productos-ia-history__table tbody td {
    align-items: flex-start;
    border: 0;
    display: grid;
    gap: var(--espacio-2);
    grid-template-columns: minmax(90px, 0.35fr) minmax(0, 1fr);
    padding: 9px 0;
  }
  .productos-ia-history__table tbody td::before {
    color: var(--color-texto-secundario);
    content: attr(data-label);
    font-size: 0.76rem;
    font-weight: 720;
  }
  .productos-ia-history__table tbody td:first-child {
    display: block;
    padding-top: 0;
  }
  .productos-ia-history__table tbody td:first-child::before {
    display: none;
  }
  .productos-ia-history__product {
    min-width: 0;
  }
}
@media (max-width: 640px) {
  .productos-ia-history__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .productos-ia-history__summary > div {
    padding: 15px 16px;
  }
  .productos-ia-history__filters,
  .productos-ia-history__filters .app-input,
  .productos-ia-history__filters .app-button {
    width: 100%;
  }
  .productos-ia-history__filters .app-button {
    justify-content: center;
  }
  .productos-ia-history__table tbody td {
    grid-template-columns: 1fr;
  }
}
.productos-ml-help,
.productos-ml-heading span {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
  font-weight: 600;
}

.productos-ml-heading,
.productos-ml-price-base,
.productos-ml-price-total {
  color: var(--color-texto-secundario);
  margin: 0;
}

.productos-ml-price-base strong {
  color: var(--color-texto);
}

.productos-ml-package-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.productos-ml-price-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.productos-ml-price-total {
  grid-column: 1/-1;
}

.productos-ml-price-total strong {
  color: var(--color-status-warning-text);
}

.productos-sync-page {
  display: grid;
  gap: var(--espacio-5);
}

.productos-sync-summary {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.productos-sync-metric .app-card__body {
  display: grid;
  gap: var(--espacio-3);
}

.productos-sync-metric__head {
  align-items: center;
  display: flex;
  gap: var(--espacio-2);
}

.productos-sync-metric__head .app-status {
  flex: 0 0 32px;
  min-height: 32px;
  width: 32px;
}

.productos-sync-metric__label {
  color: var(--color-texto-secundario);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.productos-sync-metric__value {
  color: var(--color-texto);
  font-size: 1.55rem;
  line-height: 1;
}

.productos-sync-metric__value--success {
  color: var(--color-status-success-text);
}

.productos-sync-metric__value--danger {
  color: var(--color-status-danger-text);
}

.productos-sync-results {
  display: grid;
  gap: var(--espacio-4);
}

.productos-sync-results > .app-statusline {
  margin: 0;
}

.productos-sync-store {
  min-width: 0;
}

.productos-sync-progress-row {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
}

.productos-sync-progress {
  flex: 1 1 auto;
}

.productos-sync-errors {
  display: grid;
  gap: var(--espacio-3);
  margin-top: var(--espacio-4);
}

.productos-sync-error {
  display: grid;
  gap: var(--espacio-2);
  min-width: 0;
}

.productos-sync-error__header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.productos-sync-error__item {
  border-top: 1px solid var(--color-status-danger-border);
  display: grid;
  gap: var(--espacio-2);
  padding-top: var(--espacio-3);
}

.productos-sync-error__item p {
  margin: 0;
}

.productos-sync-error__metrics {
  color: var(--color-texto-secundario);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4);
  font-size: 0.8rem;
}

.productos-sync-error__metrics strong {
  color: var(--color-texto);
}

.productos-sync-table-wrap {
  border-radius: 0;
  border-width: 1px 0 0;
  max-height: 560px;
}

.productos-sync-table {
  min-width: 960px;
}

.productos-sync-table th,
.productos-sync-table td {
  white-space: nowrap;
}

.productos-sync-table .productos-product {
  min-width: 300px;
}

@media (max-width: 1180px) {
  .productos-filter-grid,
  .productos-range-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .productos-page {
    padding-inline: var(--espacio-4);
  }
  .productos-filter-grid,
  .productos-range-grid,
  .productos-ml-package-grid,
  .productos-ml-price-grid {
    grid-template-columns: 1fr;
  }
  .productos-filter-summary {
    grid-template-columns: 1fr;
  }
  .productos-filter-actions,
  .productos-simulator,
  .productos-simulator__control {
    align-items: stretch;
    flex-direction: column;
  }
  .productos-simulator__field {
    width: 100%;
  }
  .productos-ml-preview {
    align-items: start;
    grid-template-columns: 72px 1fr;
  }
  .productos-ml-preview__image,
  .productos-ml-preview__placeholder {
    height: 72px;
    width: 72px;
  }
  .productos-ml-category {
    grid-template-columns: 1fr;
  }
  .productos-sync-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .productos-sync-table-wrap {
    max-height: none;
  }
}
@media (max-width: 480px) {
  .productos-sync-summary {
    grid-template-columns: 1fr;
  }
  .productos-sync-metric__label {
    font-size: 0.7rem;
  }
}
.desplegable,
.app-dropdown {
  position: relative;
}

.desplegable__panel,
.app-dropdown__panel {
  background: var(--color-superficie-tarjeta-flotante);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-flotante);
  min-width: 220px;
  padding: var(--espacio-2);
  position: absolute;
  right: 0;
  top: calc(100% + var(--espacio-2));
  z-index: 120;
}

.desplegable__opcion,
.app-dropdown__option {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radio-xs);
  color: var(--color-texto-secundario);
  display: flex;
  font-size: 0.86rem;
  font-weight: 650;
  gap: var(--espacio-2);
  min-height: 36px;
  padding: 0 var(--espacio-3);
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.desplegable__opcion:hover,
.desplegable__opcion.is-activo,
.app-dropdown__option:hover,
.app-dropdown__option.is-activo {
  background: var(--color-superficie-hover);
  color: var(--color-texto);
}

.desplegable__separador,
.app-dropdown__separator {
  background: var(--color-borde-suave);
  height: 1px;
  margin: var(--espacio-2);
}

.app-popover,
.pedidos-progress-popover {
  display: inline-block;
  position: relative;
}

.app-popover summary,
.pedidos-progress-popover summary {
  list-style: none;
}

.app-popover summary::-webkit-details-marker,
.pedidos-progress-popover summary::-webkit-details-marker {
  display: none;
}

.app-popover__menu,
.pedidos-progress-popover__menu {
  background: var(--color-superficie-tarjeta-flotante);
  border: 1px solid var(--color-borde);
  border-radius: 16px;
  box-shadow: var(--sombra-flotante);
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  min-width: 210px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 30;
}

body.modal-abierto {
  overflow: hidden;
}

.modal {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-flotante);
  color: var(--color-texto);
  max-width: min(560px, 100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: hidden;
  width: 100%;
}

.modal-fondo {
  align-items: center;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--espacio-4);
  position: fixed;
  z-index: 200;
}

.modal-fondo[hidden] {
  display: none;
}

.modal-fondo--debajo {
  background: transparent;
  pointer-events: none;
}

.modal__cabecera,
.modal__cuerpo,
.modal__pie {
  padding: var(--espacio-4);
}

.modal__cabecera {
  align-items: center;
  border-bottom: 1px solid var(--color-borde-suave);
  display: flex;
  gap: var(--espacio-3);
  justify-content: space-between;
}

.modal__titulo {
  font-size: 1rem;
  font-weight: 760;
  margin: 0;
}

.modal__cuerpo {
  max-height: calc(100vh - 210px);
  overflow: auto;
}

.modal__pie {
  border-top: 1px solid var(--color-borde-suave);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  justify-content: flex-end;
}

.modal--wide {
  max-width: min(920px, 100vw - 32px);
}

.modal--scroll {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.modal__cuerpo--stack {
  display: grid;
  gap: var(--espacio-4);
}

.rutas-page {
  display: grid;
  gap: var(--espacio-3);
}

.rutas-date-form {
  align-items: end;
  display: grid;
  gap: var(--espacio-2);
  grid-template-columns: minmax(170px, 220px) auto;
  margin-top: var(--espacio-3);
}

.rutas-date-form .app-input,
.rutas-date-form .app-button {
  min-height: 40px;
}

.rutas-toolbar {
  padding: var(--espacio-4);
}

.rutas-import-form,
.rutas-sync-launch,
.rutas-history-filters .app-list-toolbar__row {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(110px, 0.45fr) minmax(260px, 1.5fr) auto;
  gap: var(--espacio-4);
  align-items: end;
}

.rutas-sync-launch {
  grid-template-columns: auto;
  justify-content: start;
}

.rutas-import-form__mensajeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  align-items: center;
}

.rutas-check {
  min-height: 40px;
  padding: 0 var(--espacio-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  background: var(--color-interactivo-suave);
}

.rutas-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espacio-3);
}

.rutas-kpi {
  padding: var(--espacio-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  background: var(--color-superficie);
}

.rutas-kpi strong {
  display: block;
  color: var(--color-texto);
  font-size: 1.45rem;
  line-height: 1.1;
}

.rutas-kpi span {
  display: block;
  margin-top: var(--espacio-1);
  color: var(--color-texto-secundario);
  font-size: 0.85rem;
}

.rutas-workspace {
  display: block;
}

.rutas-board-shell {
  min-width: 0;
}

.rutas-board-actions,
.rutas-board-footer,
.rutas-action-row,
.rutas-delivery-card__actions,
.rutas-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  align-items: center;
}

.rutas-save-status {
  color: var(--color-texto-secundario);
  font-size: 0.9rem;
}

.rutas-save-status[data-type=ok] {
  color: var(--color-status-success-text);
}

.rutas-save-status[data-type=error] {
  color: var(--color-status-danger-text);
}

.rutas-save-status--configuration {
  background: var(--color-status-danger-bg);
  border: 1px solid var(--color-status-danger-border);
  border-radius: var(--radio-card);
  padding: var(--espacio-3);
}

.rutas-normalization-status {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-card);
  color: var(--color-texto-secundario);
  display: flex;
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
  padding: 10px 12px;
}

.rutas-prepare-card {
  display: grid;
  gap: var(--espacio-3);
  max-width: 1400px;
  padding: 12px;
}

.rutas-prepare-intro p {
  color: var(--color-texto-secundario);
  margin: 0;
}

.rutas-prepare-progress-group {
  display: grid;
  gap: 5px;
}

.rutas-prepare-progress-label {
  align-items: center;
  color: var(--color-texto-secundario);
  display: flex;
  font-size: 0.78rem;
  justify-content: space-between;
}

.rutas-prepare-progress-label strong {
  color: var(--color-texto);
}

.rutas-address-review-grid {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 2px;
}

.rutas-address-review-form {
  min-width: 0;
}

/* Resumen agregado por origen de normalizacion. */
.rutas-prepare-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rutas-nrm-chip {
  align-items: baseline;
  background: var(--color-status-neutral-bg);
  border: 1px solid var(--color-status-neutral-border);
  border-radius: 999px;
  color: var(--color-status-neutral-text);
  display: inline-flex;
  font-size: 0.76rem;
  gap: 5px;
  padding: 4px 10px;
}

.rutas-nrm-chip strong {
  color: var(--color-texto);
  font-size: 0.85rem;
  font-weight: 800;
}

.rutas-nrm-chip--ia {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.rutas-nrm-chip--fallback {
  background: var(--color-status-warning-bg);
  border-color: var(--color-status-warning-border);
  color: var(--color-status-warning-text);
}

.rutas-nrm-chip--pendiente {
  background: var(--color-status-pending-bg);
  border-color: var(--color-status-pending-border);
  color: var(--color-status-pending-text);
}

.rutas-nrm-chip--ia_descartada,
.rutas-nrm-chip--error,
.rutas-nrm-chip--revision {
  background: var(--color-status-danger-bg);
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-text);
}

.rutas-nrm-chip--ia strong,
.rutas-nrm-chip--fallback strong,
.rutas-nrm-chip--pendiente strong,
.rutas-nrm-chip--ia_descartada strong,
.rutas-nrm-chip--error strong,
.rutas-nrm-chip--revision strong {
  color: inherit;
}

.rutas-address-review-card {
  background: var(--color-superficie-tarjeta);
  border: 1px solid var(--color-borde);
  border-left: 3px solid var(--color-borde);
  border-radius: var(--radio-card);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: auto;
  min-width: 0;
  padding: 12px 13px;
  position: relative;
}

.rutas-address-review-card[data-normalizacion=ia] {
  border-left-color: var(--color-status-success-text);
}

.rutas-address-review-card[data-normalizacion=fallback] {
  border-left-color: var(--color-status-warning-text);
}

.rutas-address-review-card[data-normalizacion=pendiente] {
  border-left-color: var(--color-status-pending-text);
}

.rutas-address-review-card[data-normalizacion=ia_descartada],
.rutas-address-review-card[data-normalizacion=error] {
  border-left-color: var(--color-status-danger-text);
}

.rutas-address-review-card.is-review {
  border-color: var(--color-status-danger-border);
}

.rutas-address-review-card__header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: space-between;
}

.rutas-address-review-card__id {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}

.rutas-address-review-card__order {
  color: var(--color-texto);
  font-weight: 800;
}

.rutas-address-review-card__client {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22ch;
}

/* Insignia de origen de normalizacion (IA / reglas / fallback / etc.). */
.rutas-nrm-badge {
  align-items: center;
  background: var(--color-status-neutral-bg);
  border: 1px solid var(--color-status-neutral-border);
  border-radius: 999px;
  color: var(--color-status-neutral-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 4px;
  letter-spacing: 0.01em;
  padding: 3px 9px;
  white-space: nowrap;
}

.rutas-nrm-badge__icon {
  font-size: 0.82rem;
  line-height: 1;
}

.rutas-nrm-badge--ia {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.rutas-nrm-badge--fallback {
  background: var(--color-status-warning-bg);
  border-color: var(--color-status-warning-border);
  color: var(--color-status-warning-text);
}

.rutas-nrm-badge--pendiente {
  background: var(--color-status-pending-bg);
  border-color: var(--color-status-pending-border);
  color: var(--color-status-pending-text);
}

.rutas-nrm-badge--ia_descartada,
.rutas-nrm-badge--error {
  background: var(--color-status-danger-bg);
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-text);
}

/* Contenedor de las insignias del encabezado (normalizacion + validacion). */
.rutas-address-review-card__badges {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* Semaforo de la segunda verificacion (Address Validation). Comparte la forma de
   la insignia de normalizacion y usa los colores de estado del sistema de diseno. */
.rutas-val-badge {
  align-items: center;
  background: var(--color-status-neutral-bg);
  border: 1px solid var(--color-status-neutral-border);
  border-radius: 999px;
  color: var(--color-status-neutral-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 4px;
  letter-spacing: 0.01em;
  padding: 3px 9px;
  white-space: nowrap;
}

.rutas-val-badge__icon {
  font-size: 0.82rem;
  line-height: 1;
}

.rutas-val-badge__score {
  font-weight: 800;
  opacity: 0.75;
}

.rutas-val-badge--alta {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.rutas-val-badge--media {
  background: var(--color-status-warning-bg);
  border-color: var(--color-status-warning-border);
  color: var(--color-status-warning-text);
}

.rutas-val-badge--baja {
  background: var(--color-status-danger-bg);
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-text);
}

.rutas-address-review-compare {
  align-items: stretch;
  display: grid;
  gap: 5px 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.rutas-address-review-compare__head {
  color: var(--color-texto-tenue);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rutas-address-review-before {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px dashed var(--color-borde-suave);
  border-radius: var(--radio-sm);
  color: var(--color-texto-secundario);
  display: flex;
  line-height: 1.3;
  margin: 0;
  min-width: 0;
  padding: 6px 9px;
  word-break: break-word;
}

.rutas-address-review-before em {
  color: var(--color-texto-tenue);
  font-style: normal;
}

.rutas-address-review-input {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  box-sizing: border-box;
  color: var(--color-texto);
  font: inherit;
  line-height: 1.3;
  min-height: 34px;
  min-width: 0;
  padding: 6px 9px;
  width: 100%;
}

/* Complemento: textarea de una linea que crece con su contenido. Corto = se ve
   como un input; largo = se expande para mostrar todo el texto. */
.rutas-address-review-input--auto {
  display: block;
  max-height: 132px;
  overflow-y: auto;
  resize: none;
}

.rutas-address-review-input:focus {
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  outline: 0;
}

.rutas-address-review-input:disabled {
  cursor: wait;
  opacity: 0.65;
}

.rutas-address-review-card__note {
  align-items: baseline;
  background: var(--color-status-danger-bg);
  border-radius: var(--radio-sm);
  color: var(--color-status-danger-text);
  display: flex;
  font-size: 0.78rem;
  gap: 6px;
  line-height: 1.35;
  margin: 0;
  padding: 6px 9px;
}

@media (max-width: 520px) {
  .rutas-address-review-compare {
    grid-template-columns: 1fr;
  }
  .rutas-address-review-compare__head {
    display: none;
  }
}
.rutas-address-review-empty {
  background: var(--color-superficie-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  color: var(--color-texto-tenue);
  padding: 28px;
  text-align: center;
}

@media (max-width: 760px) {
  .rutas-address-review-grid {
    grid-template-columns: 1fr;
    max-height: none;
  }
  .rutas-prepare-card {
    padding: 10px;
  }
}
.rutas-prepare-footer {
  align-items: center;
  display: flex;
  gap: var(--espacio-2);
  justify-content: flex-end;
}

.rutas-prepare-footer .rutas-save-status {
  margin-right: auto;
}

.rutas-prepare-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radio-card);
  background: var(--color-interactivo-suave);
}

.rutas-prepare-card h2 {
  margin: 0 0 var(--espacio-1);
}

.rutas-prepare-card p {
  margin: 0;
  color: var(--color-texto-secundario);
}

.rutas-prepare-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-interactivo-medio);
}

.rutas-prepare-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-texto);
  transition: width 180ms ease;
}

.rutas-prepare-card.is-error .rutas-prepare-progress span {
  background: var(--color-status-danger-text);
}

.rutas-prepare-stats,
.rutas-normalizer-result {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--espacio-3);
  margin: 0;
}

.rutas-prepare-stats div,
.rutas-normalizer-result div {
  padding: var(--espacio-3);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-card);
  background: var(--color-superficie-panel);
}

.rutas-prepare-stats dt,
.rutas-normalizer-result dt {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
}

.rutas-prepare-stats dd,
.rutas-normalizer-result dd {
  margin: var(--espacio-1) 0 0;
  color: var(--color-texto);
  font-weight: 700;
}

.rutas-board {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--espacio-4);
  margin-top: var(--espacio-4);
}

.rutas-board-footer {
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--espacio-4);
}

.rutas-column {
  display: grid;
  grid-template-rows: auto minmax(120px, 1fr) auto;
  min-height: 120px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  background: var(--color-superficie);
  overflow: hidden;
}

.rutas-column--unassigned {
  grid-template-rows: auto minmax(120px, auto);
  margin-top: var(--espacio-4);
}

.rutas-column--messenger {
  align-content: stretch;
}

.rutas-column__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border-bottom: 1px solid var(--color-borde-suave);
}

.rutas-column__header h2 {
  margin: 0;
  font-size: 0.98rem;
}

.rutas-column__identity {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-width: 0;
}

.rutas-column__identity h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rutas-column__header span {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
}

.rutas-column__count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 9px;
  border: 1px solid var(--color-borde-suave);
  border-radius: 999px;
  background: var(--color-interactivo-suave);
  white-space: nowrap;
}

.rutas-column__count strong {
  color: var(--color-texto);
  font-size: 0.95rem;
  line-height: 1;
}

.rutas-column__count small {
  color: var(--color-texto-secundario);
  font-size: 0.68rem;
}

.rutas-column--unassigned .rutas-column__header > strong {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 30px;
  border-radius: var(--radio-card);
  background: var(--color-interactivo-medio);
}

.rutas-column__header-actions {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

.rutas-column__header-actions form {
  margin: 0;
}

.rutas-column__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  background: var(--color-superficie-alta);
  color: var(--color-texto);
  cursor: pointer;
}

.rutas-column__icon:hover {
  border-color: var(--color-borde-fuerte);
  background: var(--color-interactivo-suave);
}

.rutas-column__icon .app-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.rutas-column__icon--danger {
  color: var(--color-status-danger-text);
}

.rutas-column__icon--danger:hover {
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.08);
}

.rutas-column__list {
  display: grid;
  align-content: start;
  gap: var(--espacio-2);
  min-height: 120px;
  padding: var(--espacio-3);
}

.rutas-column__list--wide {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.rutas-card,
.rutas-delivery-card {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  background: var(--color-superficie-alta);
  box-shadow: none;
}

.rutas-messenger-viewer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.rutas-messenger-viewer .app-label {
  margin: 0;
  white-space: nowrap;
}

.rutas-messenger-viewer .app-input {
  min-width: 210px;
  width: auto;
}

.rutas-messenger-viewer .app-input[type=date] {
  min-width: 150px;
}

.rutas-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espacio-2);
  align-items: stretch;
  padding: 6px 8px;
  position: relative;
  cursor: grab;
}

.rutas-card--sur {
  border-color: #e08a8a;
}

.rutas-card__zone {
  background: var(--zona-color, var(--color-borde-fuerte));
  border-radius: 999px;
  bottom: 8px;
  left: 5px;
  position: absolute;
  top: 8px;
  width: 5px;
}

.rutas-card--zona {
  padding-left: 16px;
}

.rutas-card.is-dragging {
  opacity: 0.55;
}

.rutas-card.is-map-highlighted {
  border-color: var(--rutas-messenger-color, var(--color-borde-fuerte));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rutas-messenger-color, var(--color-borde-fuerte)) 20%, transparent);
}

.rutas-card__main {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.rutas-card__address,
.rutas-card__complement {
  margin: 0;
}

.rutas-card__map-pin {
  align-items: center;
  appearance: none;
  background: var(--rutas-map-color, var(--rutas-messenger-color, var(--color-superficie-contraste)));
  border: 0;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  height: 20px;
  justify-content: center;
  line-height: 1;
  margin-right: 5px;
  min-width: 20px;
  padding: 0 4px;
  vertical-align: 2px;
}

.rutas-card__map-pin:hover,
.rutas-card__map-pin:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rutas-map-color, var(--rutas-messenger-color)) 28%, transparent);
}

.rutas-card__map-pin[hidden] {
  display: none;
}

.rutas-card__icon[hidden] {
  display: none;
}

.rutas-card__zip {
  color: var(--color-texto-secundario);
  font-size: 0.86rem;
  white-space: nowrap;
}

.rutas-card__zip.is-empty {
  display: none;
}

.rutas-card__complement {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.rutas-card__localidad {
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 0.65rem;
  line-height: 0.55rem;
  color: #ffffff;
  background: var(--zona-color, var(--color-borde-fuerte));
}

.rutas-card__order-copy {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  margin: 0;
  padding: 0;
}

.rutas-card__order-copy:hover,
.rutas-card__order-copy:focus-visible {
  color: var(--color-texto-principal);
  text-decoration: underline;
}

.rutas-card__side {
  align-self: end;
  display: grid;
  justify-items: end;
  gap: 5px;
}

.rutas-card__actions {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}

.rutas-card__icon--placeholder {
  pointer-events: none;
  visibility: hidden;
}

.rutas-card--iconos-fila .rutas-card__actions {
  display: flex;
  justify-content: flex-end;
}

.rutas-card--iconos-fila .rutas-card__icon--placeholder:not(.rutas-card__icon--placeholder-notas) {
  display: none;
}

.rutas-card__side .app-status {
  max-width: 100%;
}

.rutas-card__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  background: var(--color-superficie);
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}

.rutas-card__icon .app-icon {
  font-size: 15px;
  height: 15px;
  width: 15px;
}

.rutas-card__icon--danger {
  color: var(--color-status-danger-text);
}

.rutas-card__icon--danger:hover {
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.08);
}

.rutas-shared-map {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  margin-top: var(--espacio-4);
  overflow: hidden;
}

.rutas-shared-map__header {
  align-items: center;
  border-bottom: 1px solid var(--color-borde-suave);
  display: flex;
  gap: var(--espacio-4);
  justify-content: space-between;
  padding: var(--espacio-3) var(--espacio-4);
}

.rutas-shared-map__header h2 {
  font-size: 1rem;
  margin: 0;
}

.rutas-shared-map__header [data-rutas-map-status] {
  color: var(--color-texto-secundario);
  display: block;
  font-size: 0.78rem;
  margin-top: 2px;
}

.rutas-shared-map__header [data-rutas-map-status][data-type=success] {
  color: var(--color-status-success-text);
}

.rutas-shared-map__header [data-rutas-map-status][data-type=warning],
.rutas-shared-map__header [data-rutas-map-status][data-type=error] {
  color: var(--color-status-danger-text);
}

.rutas-map-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  justify-content: flex-end;
}

.rutas-map-legend__item {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-pill);
  display: inline-flex;
  gap: 7px;
  min-height: 32px;
  padding: 4px 9px;
}

.rutas-map-legend__item input {
  accent-color: var(--color-texto);
  height: 16px;
  margin: 0;
  width: 16px;
}

.rutas-map-legend__swatch {
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-borde-fuerte);
  flex: 0 0 12px;
  height: 12px;
  width: 12px;
}

.rutas-map-legend__focus {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-texto);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0;
}

.rutas-map-legend__focus:hover,
.rutas-map-legend__focus:focus-visible {
  text-decoration: underline;
}

.rutas-map-legend__item small {
  color: var(--color-texto-secundario);
  font-size: 0.7rem;
}

.rutas-map,
.rutas-map-placeholder {
  min-height: 460px;
}

.rutas-map--shared,
.rutas-map-placeholder--shared {
  min-height: clamp(480px, 62vh, 720px);
}

.rutas-map-placeholder,
.rutas-empty {
  display: grid;
  place-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-8);
  text-align: center;
  color: var(--color-texto-secundario);
}

.rutas-map-errors {
  background: var(--color-status-danger-bg);
  border-top: 1px solid var(--color-status-danger-border);
  color: var(--color-status-danger-text);
  display: grid;
  gap: 4px;
  max-height: 180px;
  overflow: auto;
  padding: var(--espacio-3);
}

.rutas-map-errors[hidden] {
  display: none;
}

.rutas-map-errors strong,
.rutas-map-errors p {
  margin: 0;
}

.rutas-map-errors strong {
  font-size: 0.82rem;
}

.rutas-map-errors p {
  font-size: 0.74rem;
  line-height: 1.35;
}

.rutas-card__map-warning {
  align-items: center;
  color: var(--color-status-danger-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  gap: 3px;
}

.rutas-card__map-warning[hidden] {
  display: none;
}

.rutas-card__map-warning .app-icon {
  font-size: 15px;
}

.rutas-empty h2,
.rutas-empty p,
.rutas-map-placeholder p {
  margin: 0;
}

.rutas-delivery-list {
  display: grid;
  gap: 0;
}

.rutas-delivery-card {
  background: var(--color-superficie);
  border: 0;
  border-bottom: 1px solid var(--color-borde-suave);
  border-radius: 0;
  display: grid;
  gap: 0;
  min-width: 0;
  padding: var(--espacio-3);
}

.rutas-delivery-card:last-child {
  border-bottom: 0;
}

.rutas-delivery-card.is-delivered {
  background: var(--color-status-success-bg);
}

.rutas-delivery-card__order {
  align-items: center;
  background: var(--color-superficie-contraste);
  border-radius: 999px;
  color: var(--color-texto-contraste);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  min-width: 22px;
  padding: 0 7px;
  white-space: nowrap;
}

.rutas-delivery-card__top {
  align-items: flex-start;
  display: flex;
  gap: var(--espacio-3);
  justify-content: space-between;
  min-width: 0;
}

.rutas-delivery-card__top h2 {
  flex: 1;
  font-size: 0.98rem;
  line-height: 1.3;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rutas-delivery-card__ident {
  align-items: baseline;
  display: flex;
  gap: 6px;
  min-width: 0;
}

.rutas-delivery-card__ident strong {
  color: var(--color-texto);
  flex: 0 0 auto;
  font-size: 0.85rem;
}

.rutas-delivery-card__ident .rutas-delivery-card__ident-sep {
  color: var(--color-texto-tenue);
  flex: 0 0 auto;
}

.rutas-delivery-card__ident .rutas-delivery-card__cliente {
  color: var(--color-texto-secundario);
  flex: 1;
  font-size: 0.82rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rutas-delivery-card__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  justify-content: space-between;
  min-width: 0;
}

.rutas-delivery-card__badges {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.rutas-delivery-card__address-link {
  color: inherit;
  text-decoration: none;
}

.rutas-delivery-card__address-link:hover,
.rutas-delivery-card__address-link:focus-visible {
  text-decoration: underline;
}

/* Bloque de estado de pago en la página de detalle del pedido. */
.rutas-detail-pago {
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.rutas-detail-pago--ok {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
}

.rutas-detail-pago--cobrar {
  background: var(--color-status-danger-bg);
  border-color: var(--color-status-danger-border);
}

.rutas-detail-pago--alerta {
  background: var(--color-status-warning-bg);
  border-color: var(--color-status-warning-border);
}

.rutas-detail-pago__resumen {
  color: var(--color-texto);
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0;
}

.rutas-detail-pago__row {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.rutas-detail-pago__label {
  color: var(--color-texto-secundario);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rutas-detail-pago__grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
}

.rutas-detail-pago__grid dt {
  color: var(--color-texto-secundario);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.rutas-detail-pago__grid dd {
  color: var(--color-texto);
  font-weight: 700;
  margin: 2px 0 0;
}

.rutas-detail-pago__monto {
  font-size: 1.2rem;
  font-weight: 800;
}

.rutas-detail-pago--cobrar .rutas-detail-pago__monto {
  color: var(--color-status-danger-text);
}

.rutas-detail-pago__monto--ok {
  color: var(--color-status-success-text);
  font-size: 0.98rem;
}

.rutas-detail-pago__full {
  grid-column: 1/-1;
}

.rutas-delivery-card__meta .rutas-delivery-card__tienda {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rutas-delivery-card__meta .app-status {
  flex: 0 0 auto;
  white-space: nowrap;
}

.rutas-delivery-card__actions {
  align-items: center;
  display: flex;
  /* Envuelve solo cuando no cabe todo en una fila (p. ej. con el botón de
     verificar ubicación en móviles estrechos); en pantallas anchas queda igual. */
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-top: var(--espacio-1);
  min-width: 0;
  width: 100%;
}

.rutas-delivery-card__actions form {
  display: grid;
  flex: 1;
  min-width: 0;
}

.rutas-delivery-card__actions form .rutas-delivery-card__primary {
  width: 100%;
}

.rutas-delivery-card__quick {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--espacio-1);
  justify-content: flex-end;
}

.rutas-delivery-card__quick .app-button {
  height: 36px;
  min-height: 36px;
  min-width: 36px;
  width: 36px;
}

.rutas-delivery-card__quick .app-icon {
  font-size: 22px;
}

.rutas-delivery-card__primary {
  flex: 1;
  justify-content: center;
  min-height: 36px;
  min-width: 0;
  overflow: hidden;
  padding: 0 var(--espacio-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rutas-delivery-card__whatsapp {
  color: var(--color-status-success-text);
}

.rutas-route-list {
  overflow: hidden;
  padding: 0;
}

.rutas-route-list__header {
  align-items: center;
  border-bottom: 1px solid var(--color-borde);
  display: flex;
  justify-content: space-between;
  padding: var(--espacio-3) var(--espacio-4);
}

.rutas-route-list__header h2 {
  font-size: 1rem;
  margin: 0;
}

.rutas-route-list__header span {
  color: var(--color-texto-secundario);
  display: block;
  font-size: 0.76rem;
  margin-top: 2px;
}

.rutas-route-list__header > strong {
  align-items: center;
  background: var(--color-interactivo-medio);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-pill);
  display: inline-flex;
  font-size: 0.82rem;
  justify-content: center;
  min-height: 30px;
  min-width: 34px;
  padding: 0 9px;
}

.rutas-summary--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  background: var(--color-superficie);
}

.rutas-summary--compact .rutas-kpi {
  align-items: baseline;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  gap: var(--espacio-2);
  padding: 10px var(--espacio-4);
}

.rutas-summary--compact .rutas-kpi + .rutas-kpi {
  border-left: 1px solid var(--color-borde);
}

.rutas-summary--compact .rutas-kpi strong {
  font-size: 1.2rem;
}

.rutas-summary--compact .rutas-kpi span {
  margin: 0;
}

.rutas-route-scan {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
}

.rutas-route-scan__heading {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
  min-width: 0;
}

.rutas-route-scan__heading strong {
  display: block;
  font-size: 0.92rem;
}

.rutas-route-scan__heading small {
  color: var(--color-texto-secundario);
  display: block;
  font-size: 0.76rem;
  line-height: 1.3;
  margin-top: 2px;
}

.rutas-route-scan__icon {
  align-items: center;
  background: var(--color-interactivo-medio);
  border-radius: var(--radio-card);
  display: inline-flex;
  flex: 0 0 38px;
  height: 38px;
  justify-content: center;
}

.rutas-route-scan__button {
  min-width: 210px;
}

.rutas-scan-form,
.rutas-delivery-context,
.rutas-proof-form {
  padding: var(--espacio-4);
}

.rutas-inline-form .app-input {
  min-width: min(100%, 260px);
  flex: 1;
}

.rutas-detail-layout {
  align-items: start;
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: minmax(0, 2fr) minmax(440px, 1.2fr);
}

.rutas-detail-column {
  display: grid;
  gap: var(--espacio-4);
  min-width: 0;
}

.rutas-detail-page__eyebrow {
  align-items: center;
  color: var(--color-texto-secundario);
  display: flex;
  font-size: 0.82rem;
  gap: var(--espacio-2);
  margin: 0 0 var(--espacio-1);
}

.rutas-detail-nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
}

.rutas-detail-main,
.rutas-detail-side,
.rutas-detail-section {
  padding: var(--espacio-4);
}

.rutas-detail-main__header {
  align-items: center;
  display: flex;
  gap: var(--espacio-4);
  justify-content: space-between;
  margin-bottom: var(--espacio-4);
}

.rutas-detail-main__header h2,
.rutas-detail-side h2 {
  margin: 0;
}

.rutas-detail-main__header h2 {
  font-size: 1.35rem;
  line-height: 1.15;
}

.rutas-detail-main__label {
  color: var(--color-texto-secundario);
  font-size: 0.72rem;
  margin: 0 0 3px;
  text-transform: uppercase;
}

.rutas-detail-address {
  border-bottom: 1px solid var(--color-borde-suave);
  border-top: 1px solid var(--color-borde-suave);
  display: grid;
  gap: 3px;
  padding: var(--espacio-4) 0;
}

.rutas-detail-address > span,
.rutas-detail-messenger > span {
  color: var(--color-texto-secundario);
  font-size: 0.74rem;
}

.rutas-detail-address strong {
  color: var(--color-texto);
  font-size: 1.12rem;
  line-height: 1.3;
}

.rutas-detail-address p,
.rutas-detail-address small {
  color: var(--color-texto-secundario);
  margin: 0;
}

.rutas-detail-address p {
  font-size: 0.88rem;
}

.rutas-detail-address small {
  font-size: 0.75rem;
}

.rutas-detail-side {
  display: grid;
  gap: var(--espacio-3);
}

.rutas-detail-side__header,
.rutas-detail-section__header {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
  justify-content: space-between;
}

.rutas-detail-side__header h2,
.rutas-detail-section__header h2 {
  font-size: 1rem;
  margin: 0;
}

.rutas-detail-side__header > span > .app-status {
  display: none;
}

.rutas-detail-flow-actions {
  display: grid;
  gap: var(--espacio-2);
}

.rutas-detail-flow-actions form,
.rutas-detail-flow-actions .app-button {
  width: 100%;
}

.rutas-button--danger {
  background: var(--color-peligro);
  border-color: var(--color-peligro);
  color: var(--color-texto-contraste);
}

.rutas-button--danger:hover {
  background: var(--color-status-danger-text);
  border-color: var(--color-status-danger-text);
  color: var(--color-texto-contraste);
}

.rutas-detail-complete {
  align-items: center;
  background: var(--color-status-success-bg);
  border: 1px solid var(--color-status-success-border);
  border-radius: var(--radio-card);
  color: var(--color-status-success-text);
  display: flex;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
}

.rutas-detail-complete > .app-icon {
  flex: 0 0 auto;
}

.rutas-detail-complete div {
  display: grid;
  gap: 2px;
}

.rutas-detail-complete span {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
  line-height: 1.4;
}

.rutas-definition-list {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 var(--espacio-5);
}

.rutas-definition-list div {
  background: var(--color-interactivo-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  padding: var(--espacio-3);
}

.rutas-definition-list dt {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
}

.rutas-definition-list dd {
  margin: var(--espacio-1) 0 0;
}

.rutas-definition-list--compact {
  gap: 0;
  margin: 0;
}

.rutas-definition-list--compact div {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-borde-suave);
  border-radius: 0;
  min-width: 0;
  padding: var(--espacio-3) 0;
}

.rutas-definition-list--compact div:nth-child(odd) {
  padding-right: var(--espacio-3);
}

.rutas-definition-list--compact div:nth-child(even) {
  padding-left: var(--espacio-3);
}

.rutas-definition-list--compact dd {
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rutas-detail-assignment {
  align-items: end;
  border-bottom: 1px solid var(--color-borde-suave);
  display: grid;
  gap: var(--espacio-2);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--espacio-3) 0;
}

.rutas-detail-assignment .app-input,
.rutas-detail-assignment .app-button {
  min-height: 40px;
}

.rutas-detail-messenger {
  border-bottom: 1px solid var(--color-borde-suave);
  display: grid;
  gap: 2px;
  padding: var(--espacio-3) 0;
}

.rutas-detail-quick-actions {
  display: grid;
  gap: var(--espacio-2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--espacio-3);
}

.rutas-detail-quick-actions .app-button {
  min-width: 0;
  padding-inline: var(--espacio-2);
  width: 100%;
}

.rutas-detail-quick-actions__camino {
  grid-column: 1/-1;
}

.rutas-token-box {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  overflow-wrap: anywhere;
  padding: 0;
}

.rutas-token-box summary {
  align-items: center;
  color: var(--color-texto-secundario);
  cursor: pointer;
  display: flex;
  font-size: 0.78rem;
  justify-content: space-between;
  list-style: none;
  padding: var(--espacio-3);
}

.rutas-token-box summary::-webkit-details-marker {
  display: none;
}

.rutas-token-box summary .app-icon {
  transition: transform var(--transicion-rapida);
}

.rutas-token-box[open] summary .app-icon {
  transform: rotate(180deg);
}

.rutas-token-box code {
  border-top: 1px solid var(--color-borde-suave);
  display: block;
  font-size: 0.75rem;
  padding: var(--espacio-3);
}

.rutas-detail-section {
  min-width: 0;
}

.rutas-detail-section__header {
  margin-bottom: var(--espacio-3);
}

.rutas-detail-section__header > span {
  color: var(--color-texto-secundario);
  font-size: 0.76rem;
}

.rutas-detail-products {
  border-color: var(--color-borde-suave);
}

.rutas-detail-products td > strong {
  color: var(--color-texto);
}

.rutas-proof-grid {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rutas-proof-grid figure {
  display: grid;
  gap: var(--espacio-1);
  margin: 0;
  min-width: 0;
}

.rutas-proof-grid a {
  display: block;
}

.rutas-proof-grid img {
  aspect-ratio: 1/1;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  display: block;
  width: 100%;
}

.rutas-proof-grid__photo {
  object-fit: cover;
}

.rutas-proof-grid__signature {
  object-fit: contain;
}

.rutas-proof-grid figcaption {
  color: var(--color-texto-secundario);
  font-size: 0.72rem;
  text-align: center;
}

.rutas-proof-body {
  align-items: start;
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
}

.rutas-proof-photo {
  background: transparent;
  border: 0;
  cursor: zoom-in;
  display: grid;
  gap: var(--espacio-2);
  padding: 0;
  text-align: left;
  width: 100%;
}

.rutas-proof-photo img {
  aspect-ratio: 1/1;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  display: block;
  object-fit: cover;
  width: 100%;
}

.rutas-proof-photo__hint {
  align-items: center;
  color: var(--color-texto-secundario);
  display: inline-flex;
  font-size: 0.76rem;
  gap: 4px;
  justify-content: center;
}

.rutas-proof-photo__hint .app-icon {
  font-size: 16px;
}

.rutas-proof-recipient {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.rutas-proof-recipient__rol {
  align-self: start;
  background: var(--color-interactivo-medio);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-pill);
  color: var(--color-texto);
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 9px;
  width: fit-content;
}

.rutas-proof-recipient__label {
  color: var(--color-texto-secundario);
  font-size: 0.74rem;
  margin: 6px 0 0;
  text-transform: uppercase;
}

.rutas-proof-recipient__name {
  color: var(--color-texto);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
}

.rutas-proof-recipient__meta,
.rutas-proof-recipient__notes {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0;
}

.rutas-proof-recipient__notes {
  color: var(--color-texto);
}

.rutas-proof-modal-preview {
  background: #0b0d10;
  border-radius: var(--radio-card);
  min-height: 280px;
}

.rutas-proof-modal-preview img {
  border-radius: var(--radio-card);
  display: block;
  max-height: 72vh;
  object-fit: contain;
  width: 100%;
}

.rutas-proof-card__available {
  align-items: center;
  color: var(--color-status-success-text) !important;
  display: inline-flex;
  font-weight: 700;
  gap: var(--espacio-1);
}

.rutas-proof-card__available .app-icon {
  font-size: 16px;
}

.rutas-proof-card__empty {
  align-items: center;
  color: var(--color-texto-secundario);
  display: flex;
  font-size: 0.82rem;
  gap: var(--espacio-2);
  justify-content: center;
  min-height: 120px;
}

.rutas-detail-history {
  padding: 0;
}

.rutas-detail-history > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: var(--espacio-4);
}

.rutas-detail-history > summary::-webkit-details-marker {
  display: none;
}

.rutas-detail-history > summary h2 {
  font-size: 1rem;
  margin: 0;
}

.rutas-detail-history > summary div > span {
  color: var(--color-texto-secundario);
  display: block;
  font-size: 0.74rem;
  margin-top: 2px;
}

.rutas-detail-history > summary > .app-icon {
  transition: transform var(--transicion-rapida);
}

.rutas-detail-history[open] > summary > .app-icon {
  transform: rotate(180deg);
}

.rutas-timeline {
  border-top: 1px solid var(--color-borde-suave);
  display: grid;
  padding: 0 var(--espacio-4) var(--espacio-4);
}

.rutas-timeline__item {
  align-items: start;
  border-bottom: 1px solid var(--color-borde-suave);
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: 34px minmax(0, 1fr);
  padding: var(--espacio-3);
}

.rutas-timeline__item > div {
  display: grid;
  gap: 2px;
}

.rutas-timeline__item > div > span {
  color: var(--color-texto-secundario);
  font-size: 0.76rem;
}

.rutas-timeline__detail {
  color: var(--color-texto);
  font-size: 0.86rem;
  line-height: 1.4;
  margin: 2px 0 0;
}

.rutas-timeline__icon {
  align-items: center;
  background: var(--color-interactivo-suave);
  border-radius: var(--radio-card);
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.rutas-timeline__icon .app-icon {
  font-size: 18px;
}

.rutas-signature-pad {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  overflow: hidden;
  background: #ffffff;
}

.rutas-signature-pad canvas {
  display: block;
  width: 100%;
  touch-action: none;
}

.rutas-submit-wide {
  width: 100%;
  justify-content: center;
}

.rutas-scanner-video {
  display: block;
  height: min(64vh, 620px);
  object-fit: cover;
  width: 100%;
  background: #000000;
}

.rutas-scanner-stage {
  background: #000000;
  border-radius: var(--radio-card);
  overflow: hidden;
  position: relative;
}

.rutas-scanner-result {
  align-content: center;
  background: rgba(8, 10, 12, 0.88);
  color: #ffffff;
  display: grid;
  inset: 0;
  justify-items: center;
  padding: clamp(20px, 5vw, 48px);
  position: absolute;
  text-align: center;
  z-index: 2;
}

.rutas-scanner-result[hidden] {
  display: none;
}

.rutas-scanner-result__icon {
  align-items: center;
  background: var(--color-status-success-bg);
  border: 1px solid var(--color-status-success-border);
  border-radius: var(--radio-pill);
  color: var(--color-status-success-text);
  display: inline-flex;
  height: 48px;
  justify-content: center;
  margin-bottom: var(--espacio-4);
  width: 48px;
}

.rutas-scanner-result__icon .app-icon {
  font-size: 28px;
}

.rutas-scanner-result__order {
  font-size: clamp(2.25rem, 8vw, 4.5rem);
  line-height: 1;
}

.rutas-scanner-result__message {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 300;
}

.rutas-scanner-result__messenger {
  background: var(--color-fondo-elevado);
  color: var(--color-texto);
  border-radius: 50px;
  padding: 8px 20px;
  font-size: clamp(0.92rem, 2vw, 1.1rem);
  margin: var(--espacio-2) 0 var(--espacio-5);
}

.rutas-scanner-result .app-button {
  min-width: 160px;
}

.rutas-scanner-result.is-error .rutas-scanner-result__icon {
  background: var(--color-status-danger-bg);
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-text);
}

.rutas-scanner-status {
  margin-top: var(--espacio-3);
}

.rutas-history-table td > span:not(.app-status) {
  display: block;
  color: var(--color-texto-secundario);
  font-size: 0.8rem;
}

.rutas-history-toolbar {
  background: var(--color-superficie-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  gap: var(--espacio-4);
  padding: var(--espacio-4);
}

.rutas-history-search-row {
  align-items: end;
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: minmax(0, 1fr) auto;
}

.rutas-history-filter-row {
  align-items: end;
  border-top: 1px solid var(--color-borde-suave);
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: minmax(145px, 0.7fr) minmax(145px, 0.7fr) minmax(210px, 1fr) minmax(210px, 1fr) auto;
  padding-top: var(--espacio-4);
}

.rutas-history-filter-actions,
.rutas-history-results,
.rutas-history-results__totals,
.rutas-history-group__metrics,
.rutas-history-proof,
.rutas-history-empty {
  align-items: center;
  display: flex;
}

.rutas-history-filter-actions {
  gap: var(--espacio-2);
}

.rutas-history-results {
  color: var(--color-texto-secundario);
  font-size: 0.86rem;
  justify-content: space-between;
  min-height: 28px;
  padding: 0 var(--espacio-1);
}

.rutas-history-results p {
  margin: 0;
}

.rutas-history-results strong {
  color: var(--color-texto);
}

.rutas-history-results__totals {
  gap: var(--espacio-4);
}

.rutas-history-results__totals span {
  align-items: center;
  display: inline-flex;
  gap: var(--espacio-1);
}

.rutas-history-results__totals .app-icon {
  font-size: 17px;
}

.rutas-history-groups {
  display: grid;
  gap: var(--espacio-3);
}

.rutas-history-group {
  background: var(--color-superficie-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  overflow: hidden;
}

.rutas-history-group__summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: minmax(260px, 1fr) auto 28px;
  list-style: none;
  min-height: 76px;
  padding: var(--espacio-4);
  transition: background var(--transicion-rapida);
}

.rutas-history-group__summary::-webkit-details-marker {
  display: none;
}

.rutas-history-group__summary:hover {
  background: var(--color-fila-tabla-hover);
}

.rutas-history-group__summary:focus-visible {
  outline: 2px solid var(--color-texto);
  outline-offset: -2px;
}

.rutas-history-group__title {
  min-width: 0;
}

.rutas-history-group__title h2 {
  color: var(--color-texto);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.3;
  margin: 0;
}

.rutas-history-group__title > span {
  color: var(--color-texto-secundario);
  display: block;
  font-size: 0.78rem;
  margin-top: 3px;
}

.rutas-history-group__metrics {
  gap: var(--espacio-2);
}

.rutas-history-group__metrics > span {
  background: var(--color-interactivo-suave);
  border-radius: var(--radio-pill);
  color: var(--color-texto-secundario);
  font-size: 0.74rem;
  padding: 6px 10px;
  white-space: nowrap;
}

.rutas-history-group__metrics strong {
  color: var(--color-texto);
}

.rutas-history-group__chevron {
  color: var(--color-texto-secundario);
  display: grid;
  place-items: center;
  transition: transform var(--transicion-rapida);
}

.rutas-history-group[open] .rutas-history-group__chevron {
  transform: rotate(180deg);
}

.rutas-history-group__body {
  border-top: 1px solid var(--color-borde-suave);
  padding: 0 var(--espacio-3) var(--espacio-3);
}

.rutas-history-group__body .app-table-container {
  border: 0;
  border-radius: 0;
}

.rutas-history-table {
  min-width: 1040px;
}

.rutas-history-table th:first-child,
.rutas-history-table td:first-child {
  padding-left: var(--espacio-3);
  width: 105px;
}

.rutas-history-table th:last-child,
.rutas-history-table td:last-child {
  padding-right: var(--espacio-3);
  width: 48px;
}

.rutas-history-table td > strong {
  color: var(--color-texto);
}

.rutas-history-table__address {
  max-width: 360px;
  min-width: 260px;
}

.rutas-history-table__address > strong,
.rutas-history-table__address > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rutas-history-proof {
  gap: var(--espacio-1);
  white-space: nowrap;
}

.rutas-history-proof .app-icon {
  font-size: 16px;
}

.rutas-history-proof.is-available {
  color: var(--color-status-success-text) !important;
  font-weight: 700;
}

.rutas-history-empty {
  gap: var(--espacio-3);
  justify-content: center;
  min-height: 180px;
  padding: var(--espacio-6);
  text-align: left;
}

.rutas-history-empty > .app-icon {
  color: var(--color-texto-secundario);
  font-size: 30px;
}

.rutas-history-empty h2,
.rutas-history-empty p {
  margin: 0;
}

.rutas-history-empty h2 {
  font-size: 1rem;
}

.rutas-history-empty p {
  color: var(--color-texto-secundario);
  font-size: 0.85rem;
  margin-top: 3px;
}

.rutas-sync-toolbar .app-list-toolbar__row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(120px, 170px) minmax(280px, 1fr);
  gap: var(--espacio-4);
  align-items: end;
}

.rutas-sync-table-shell {
  overflow: hidden;
}

.rutas-sync-table {
  min-width: 1320px;
}

.rutas-sync-table td span,
.rutas-sync-table td em {
  display: block;
  color: var(--color-texto-secundario);
  font-size: 0.76rem;
  font-style: normal;
  margin-top: 3px;
}

.rutas-sync-table__created {
  min-width: 110px;
  white-space: nowrap;
}

.rutas-sync-table__address,
.rutas-sync-table__notes {
  min-width: 240px;
  max-width: 360px;
  white-space: normal;
}

.rutas-sync-order-link {
  color: var(--color-texto);
  text-decoration: none;
}

.rutas-sync-order-link:hover,
.rutas-sync-order-link:focus-visible {
  color: var(--color-status-warning-text);
  text-decoration: underline;
}

.rutas-sync-store-code {
  color: var(--color-texto-tenue) !important;
  font-size: 0.72rem !important;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rutas-sync-table__notes.is-noted {
  color: var(--color-status-warning-text);
  font-weight: 760;
}

.rutas-sync-row {
  opacity: 0.52;
  filter: grayscale(0.65);
}

.rutas-sync-row.is-selected {
  opacity: 1;
  filter: none;
}

.rutas-zones-layout {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(340px, 380px) minmax(0, 1fr);
}

.rutas-zone-form {
  padding: 22px;
}

.rutas-zone-form__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-3);
  margin-bottom: 18px;
}

.rutas-zone-form h2 {
  font-size: 1rem;
  margin: 0;
}

.rutas-zone-form .app-form-grid {
  gap: 16px 14px;
}

.rutas-zone-form__active {
  align-self: end;
  min-height: 44px;
  padding: 0 14px;
}

.app-input--color {
  min-height: 44px;
  padding: 6px;
}

.rutas-zone-form__group {
  border-top: 1px solid var(--color-borde-suave);
  display: grid;
  gap: 10px;
  padding-top: 14px;
}

.rutas-zone-form__range {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rutas-zone-form__actions {
  border-top: 1px solid var(--color-borde-suave);
  display: flex;
  margin-top: 18px;
  padding-top: 18px;
}

.rutas-zone-form__actions .app-button {
  width: 100%;
}

.rutas-normalizer-panel {
  display: grid;
  gap: var(--espacio-4);
}

.rutas-normalizer-test {
  display: grid;
  gap: var(--espacio-3);
  padding: 22px;
}

.rutas-normalizer-test h2 {
  font-size: 1rem;
  margin: 0;
}

.rutas-normalizer-table td:nth-child(2),
.rutas-normalizer-table td:nth-child(3) {
  overflow-wrap: anywhere;
}

.rutas-address-form-grid {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rutas-address-autocomplete {
  position: relative;
  z-index: 3;
}

.rutas-address-suggestions {
  background: var(--color-superficie, #fff);
  border: 1px solid var(--color-borde, #ded8cf);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(23, 23, 23, 0.16);
  left: 0;
  max-height: min(360px, 45vh);
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
}

.rutas-address-suggestions[hidden] {
  display: none;
}

.rutas-address-suggestion {
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-borde-suave, #eee9e2);
  color: var(--color-texto, #202124);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 2px;
  min-height: 58px;
  padding: 12px 16px;
  text-align: left;
  width: 100%;
}

.rutas-address-suggestion:last-child {
  border-bottom: 0;
}

.rutas-address-suggestion:hover,
.rutas-address-suggestion:focus-visible {
  background: var(--color-fondo-suave, #f6f4f1);
  outline: none;
}

.rutas-address-suggestion__principal {
  font-weight: 700;
}

.rutas-address-suggestion__secondary,
.rutas-address-suggestions__message {
  color: var(--color-texto-secundario, #686b73);
  font-size: 0.88rem;
}

.rutas-address-suggestions__message {
  margin: 0;
  padding: 14px 16px;
}

.rutas-address-suggestions__message[data-type=error] {
  color: var(--color-error, #d94e5d);
}

.rutas-address-suggestions__attribution {
  color: #5f6368;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 8px 16px;
  text-align: right;
}

.rutas-manual-order-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.rutas-manual-order-results {
  display: grid;
  gap: 8px;
}

.rutas-manual-order-results[hidden],
.rutas-manual-order-actions[hidden] {
  display: none;
}

.rutas-manual-order-result {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--color-border, #e4ddd3);
  border-radius: 8px;
  background: var(--color-surface, #fff);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.rutas-manual-order-result:hover,
.rutas-manual-order-result:focus-visible {
  border-color: var(--color-text, #222);
  outline: none;
}

.rutas-manual-order-result__main {
  display: grid;
  gap: 3px;
}

.rutas-manual-order-result small,
.rutas-manual-order-result__main span {
  color: var(--color-text-muted, #6b6d76);
}

.rutas-manual-order-selected {
  padding: 10px 12px;
  border-left: 4px solid var(--color-text, #222);
  background: var(--color-surface-subtle, #f7f6f4);
  font-weight: 700;
}

.rutas-manual-order-actions {
  margin: 18px -24px -24px;
}

@media (max-width: 700px) {
  .rutas-manual-order-search,
  .rutas-manual-order-result {
    grid-template-columns: 1fr;
  }
  .rutas-manual-order-search .app-button {
    width: 100%;
  }
}
.rutas-address-shopify-check {
  align-self: start;
  width: fit-content;
}

.rutas-zones-table-shell {
  border-radius: var(--radio-card);
}

.rutas-zones-table th,
.rutas-zones-table td {
  padding: 14px 16px;
  vertical-align: middle;
}

.rutas-zones-table td {
  font-size: 0.92rem;
}

.rutas-zones-table td:first-child {
  min-width: 180px;
}

.rutas-zones-table .app-table-actions {
  flex-wrap: nowrap;
  gap: 8px;
}

.rutas-zones-table .app-button--small {
  min-height: 34px;
  padding-inline: 12px;
}

.rutas-zone-swatch {
  background: var(--zona-color);
  border-radius: 999px;
  display: inline-block;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  width: 8px;
}

.rutas-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--espacio-4);
}

.rutas-settings-card {
  display: grid;
  gap: var(--espacio-2);
  padding: var(--espacio-5);
  color: inherit;
  text-decoration: none;
}

.rutas-settings-card:hover {
  border-color: var(--color-borde-fuerte);
  transform: translateY(-1px);
}

.rutas-settings-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radio-card);
  background: var(--color-interactivo-suave);
}

.rutas-settings-card strong {
  font-size: 1.05rem;
}

.rutas-settings-card small {
  color: var(--color-texto-secundario);
  line-height: 1.35;
}

.rutas-payment-layout {
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
}

.rutas-payment-mapping {
  border-top: 1px solid var(--color-borde-suave);
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
}

.rutas-payment-mapping h3 {
  font-size: 1rem;
  margin: 0;
}

.rutas-payment-table code {
  background: var(--color-interactivo-suave);
  border-radius: 999px;
  color: var(--color-texto);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 4px 9px;
}

.rutas-sync-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  background: var(--color-superficie);
  box-shadow: var(--sombra-elevada);
}

.rutas-staging-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  background: var(--color-superficie);
}

.rutas-staging-summary__item {
  align-items: baseline;
  display: flex;
  gap: var(--espacio-2);
  min-width: 0;
  padding: 10px var(--espacio-4);
}

.rutas-staging-summary__item + .rutas-staging-summary__item {
  border-left: 1px solid var(--color-borde);
}

.rutas-staging-summary__item strong {
  font-size: 1.2rem;
  line-height: 1;
}

.rutas-staging-summary__item span {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
}

.rutas-staging-summary__item.is-ready strong {
  color: var(--color-status-success-text);
}

.rutas-staging-summary__item.has-pending strong {
  color: var(--color-status-warning-text);
}

.rutas-staging-scan {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espacio-4);
}

.rutas-staging-scan__heading {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
  min-width: 0;
}

.rutas-staging-scan__heading strong {
  display: block;
  font-size: 0.92rem;
}

.rutas-staging-scan__heading small {
  color: var(--color-texto-secundario);
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
  margin-top: 2px;
}

.rutas-staging-scan__icon {
  align-items: center;
  background: var(--color-interactivo-medio);
  border-radius: var(--radio-card);
  display: inline-flex;
  flex: 0 0 38px;
  height: 38px;
  justify-content: center;
}

.rutas-staging-scan__button {
  min-width: 190px;
}

.rutas-staging-grid {
  align-items: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-3);
}

.rutas-staging-group {
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

.rutas-staging-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4) 10px;
  border-bottom: 1px solid var(--color-borde);
}

.rutas-staging-group__header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.rutas-staging-group__header span {
  color: var(--color-texto-secundario);
  font-size: 0.8rem;
}

.rutas-staging-group__missing {
  align-items: center;
  background: var(--color-status-warning-bg);
  border: 1px solid var(--color-status-warning-border);
  border-radius: var(--radio-pill);
  color: var(--color-status-warning-text);
  display: inline-flex;
  gap: 5px;
  min-height: 30px;
  padding: 0 10px;
}

.rutas-staging-group__missing strong {
  color: currentColor;
}

.rutas-staging-group__missing small {
  font-size: 0.72rem;
}

.rutas-staging-group__missing.is-complete {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.rutas-staging-progress {
  background: var(--color-interactivo-medio);
  height: 4px;
  overflow: hidden;
}

.rutas-staging-progress span {
  background: var(--color-status-success-text);
  display: block;
  height: 100%;
  transition: width var(--transicion-media);
}

.rutas-staging-group__list {
  display: grid;
}

.rutas-staging-card {
  align-items: center;
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde-suave);
  border-radius: 0;
  border-width: 0 0 1px;
  display: flex;
  gap: 10px;
  min-height: 58px;
  padding: 8px var(--espacio-3);
}

.rutas-staging-card:last-child {
  border-bottom: 0;
}

.rutas-staging-card.is-ready {
  background: var(--color-status-success-bg);
}

.rutas-staging-card__marker {
  align-self: stretch;
  background: var(--color-status-warning-text);
  border-radius: var(--radio-pill);
  flex: 0 0 3px;
}

.rutas-staging-card.is-ready .rutas-staging-card__marker {
  background: var(--color-status-success-text);
}

.rutas-staging-card__content {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.rutas-staging-card__title {
  align-items: baseline;
  display: flex;
  gap: 7px;
  min-width: 0;
}

.rutas-staging-card__title strong {
  flex: 0 0 auto;
  font-size: 0.9rem;
}

.rutas-staging-card__title span,
.rutas-staging-card__address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rutas-staging-card__title span {
  color: var(--color-texto);
  font-size: 0.86rem;
}

.rutas-staging-card__address {
  color: var(--color-texto-secundario);
  font-size: 0.76rem;
}

.rutas-staging-card__status {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.rutas-staging-card__status.has-manual-action .app-status {
  display: none;
}

.rutas-staging-card__manual {
  height: 32px;
  min-height: 32px;
  min-width: 32px;
  width: 32px;
}

.rutas-staging-card__remove {
  color: var(--color-status-danger-text);
  height: 32px;
  min-height: 32px;
  min-width: 32px;
  width: 32px;
}

.rutas-staging-manual-copy {
  font-size: 1rem;
  font-weight: 760;
  margin: 0;
}

.rutas-staging-group__empty {
  color: var(--color-texto-secundario);
  font-size: 0.85rem;
  padding: var(--espacio-5) var(--espacio-4);
  text-align: center;
}

.rutas-staging-unassigned {
  align-items: center;
  background: var(--color-status-warning-bg);
  border: 1px solid var(--color-status-warning-border);
  border-radius: var(--radio-card);
  color: var(--color-status-warning-text);
  display: flex;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
}

.rutas-staging-unassigned div {
  display: grid;
  flex: 1;
  gap: 2px;
}

.rutas-staging-unassigned span {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
}

.rutas-payment-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--espacio-3);
}

.rutas-messenger-colors {
  border-top: 1px solid var(--color-borde-suave);
  display: grid;
  gap: var(--espacio-3);
  margin-top: var(--espacio-4);
  padding-top: var(--espacio-4);
}

.rutas-messenger-colors h2,
.rutas-messenger-colors p {
  margin: 0;
}

.rutas-messenger-colors h2 {
  font-size: 1rem;
}

.rutas-messenger-colors p {
  color: var(--color-texto-secundario);
  font-size: 0.8rem;
  margin-top: 3px;
}

.rutas-messenger-colors__grid {
  display: grid;
  gap: var(--espacio-2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.rutas-messenger-color {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-card);
  display: flex;
  gap: var(--espacio-3);
  justify-content: space-between;
  min-height: 52px;
  padding: 8px 12px;
}

.rutas-messenger-color > span:first-child {
  font-size: 0.84rem;
  font-weight: 700;
}

.rutas-messenger-color__control {
  align-items: center;
  display: flex;
  gap: 8px;
}

.rutas-messenger-color__control input {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 32px;
  padding: 0;
  width: 42px;
}

.rutas-messenger-color__control output {
  color: var(--color-texto-secundario);
  font-size: 0.7rem;
  min-width: 54px;
}

@media (max-width: 1180px) {
  .rutas-detail-layout {
    grid-template-columns: 1fr;
  }
  .rutas-detail-column {
    display: contents;
  }
  .rutas-detail-main {
    order: 1;
  }
  .rutas-detail-side {
    order: 2;
  }
  .rutas-products-card {
    order: 3;
  }
  .rutas-proof-card {
    order: 4;
  }
  .rutas-detail-page--entregado .rutas-proof-card {
    order: 3;
  }
  .rutas-detail-page--entregado .rutas-products-card {
    order: 4;
  }
  .rutas-history-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rutas-history-filter-actions {
    grid-column: 1/-1;
  }
  .rutas-history-group__summary {
    grid-template-columns: minmax(260px, 1fr) 28px;
  }
  .rutas-history-group__metrics {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .rutas-history-group__chevron {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 760px) {
  .rutas-shared-map__header {
    align-items: stretch;
    flex-direction: column;
  }
  .rutas-map-legend {
    justify-content: flex-start;
  }
  .rutas-map--shared,
  .rutas-map-placeholder--shared {
    min-height: 420px;
  }
  .rutas-map-legend__item {
    max-width: 100%;
  }
  .rutas-map-legend__focus {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rutas-date-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .rutas-date-form .app-button {
    width: 100%;
  }
  .rutas-import-form,
  .rutas-sync-launch,
  .rutas-history-filters .app-list-toolbar__row,
  .rutas-sync-toolbar .app-list-toolbar__row,
  .rutas-summary,
  .rutas-definition-list {
    grid-template-columns: 1fr;
  }
  .rutas-detail-page {
    gap: var(--espacio-3);
  }
  .rutas-detail-page__header {
    gap: var(--espacio-3);
  }
  .rutas-detail-nav {
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    width: 100%;
  }
  .rutas-detail-nav .app-button {
    min-width: 0;
    padding-inline: var(--espacio-2);
    width: 100%;
  }
  .rutas-detail-main,
  .rutas-detail-side,
  .rutas-detail-section {
    padding: var(--espacio-3);
  }
  .rutas-detail-main__header {
    align-items: flex-start;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-3);
  }
  .rutas-detail-main__header h2 {
    font-size: 1.15rem;
  }
  .rutas-detail-main__header .app-status {
    flex: 0 0 auto;
  }
  .rutas-detail-address {
    padding: var(--espacio-3) 0;
  }
  .rutas-detail-address strong {
    font-size: 1rem;
  }
  .rutas-definition-list--compact div,
  .rutas-definition-list--compact div:nth-child(odd),
  .rutas-definition-list--compact div:nth-child(even) {
    padding: 9px 0;
  }
  .rutas-detail-assignment {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .rutas-detail-assignment .app-button {
    padding-inline: var(--espacio-3);
  }
  .rutas-detail-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rutas-detail-side__header {
    display: none;
  }
  .rutas-detail-flow-actions .app-button {
    min-height: 48px;
  }
  .rutas-detail-products .app-table {
    table-layout: fixed;
  }
  .rutas-detail-products th:first-child,
  .rutas-detail-products td:first-child {
    width: 56%;
  }
  .rutas-detail-products th:last-child,
  .rutas-detail-products td:last-child {
    text-align: center;
    width: 54px;
  }
  .rutas-detail-products th,
  .rutas-detail-products td {
    overflow-wrap: anywhere;
    padding-inline: 7px;
  }
  .rutas-proof-grid {
    gap: var(--espacio-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rutas-proof-body {
    grid-template-columns: 1fr;
  }
  .rutas-proof-recipient__name {
    font-size: 1.28rem;
  }
  .rutas-detail-history > summary,
  .rutas-timeline {
    padding-left: var(--espacio-3);
    padding-right: var(--espacio-3);
  }
  .rutas-timeline__item {
    padding-inline: 0;
  }
  .rutas-history-toolbar {
    gap: var(--espacio-3);
    padding: var(--espacio-3);
  }
  .rutas-history-search-row,
  .rutas-history-filter-row {
    grid-template-columns: 1fr;
  }
  .rutas-history-search-row .app-button,
  .rutas-history-filter-actions,
  .rutas-history-filter-actions .app-button {
    width: 100%;
  }
  .rutas-history-filter-actions {
    display: grid;
    grid-column: auto;
    grid-template-columns: 1fr 1fr;
  }
  .rutas-history-filter-actions .app-button:only-child {
    grid-column: 1/-1;
  }
  .rutas-history-results {
    align-items: flex-start;
    display: grid;
    gap: var(--espacio-2);
  }
  .rutas-history-results__totals {
    gap: var(--espacio-3);
  }
  .rutas-history-group__summary {
    gap: var(--espacio-3);
    grid-template-columns: minmax(0, 1fr) 24px;
    padding: var(--espacio-3);
  }
  .rutas-history-group__title h2 {
    font-size: 0.9rem;
  }
  .rutas-history-group__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .rutas-history-group__metrics > span {
    overflow: hidden;
    padding: 6px 7px;
    text-align: center;
    text-overflow: ellipsis;
  }
  .rutas-history-group__body {
    padding: 0;
  }
  .rutas-board {
    grid-template-columns: 1fr;
  }
  .rutas-zones-layout {
    grid-template-columns: 1fr;
  }
  .rutas-zone-form {
    padding: var(--espacio-4);
  }
  .rutas-zone-form__range {
    grid-template-columns: 1fr;
  }
  .rutas-address-form-grid {
    grid-template-columns: 1fr;
  }
  .rutas-zones-table .app-table-actions {
    flex-wrap: wrap;
  }
  .rutas-column__list--wide {
    grid-template-columns: 1fr;
  }
  .rutas-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .rutas-card__side {
    justify-items: start;
    min-width: 0;
  }
  .rutas-card__actions {
    grid-auto-flow: column;
    justify-content: start;
  }
  .rutas-mobile .app-page-header {
    align-items: stretch;
  }
  .rutas-messenger-viewer {
    align-items: stretch;
    display: grid;
    width: 100%;
  }
  .rutas-messenger-viewer .app-input {
    min-width: 0;
    width: 100%;
  }
  .rutas-summary--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rutas-summary--compact .rutas-kpi {
    align-items: center;
    display: grid;
    gap: 2px;
    padding: 9px 8px;
    text-align: center;
  }
  .rutas-summary--compact .rutas-kpi strong {
    font-size: 1.05rem;
  }
  .rutas-summary--compact .rutas-kpi span {
    font-size: 0.68rem;
  }
  .rutas-route-scan {
    grid-template-columns: 1fr;
    gap: var(--espacio-3);
  }
  .rutas-route-scan__heading small {
    display: none;
  }
  .rutas-route-scan__button {
    justify-content: center;
    min-width: 0;
    width: 100%;
  }
  .rutas-sync-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .rutas-staging-summary__item {
    align-items: center;
    display: grid;
    gap: 2px;
    padding: 9px 8px;
    text-align: center;
  }
  .rutas-staging-summary__item strong {
    font-size: 1.05rem;
  }
  .rutas-staging-summary__item span {
    font-size: 0.68rem;
  }
  .rutas-staging-scan {
    grid-template-columns: 1fr;
    gap: var(--espacio-3);
  }
  .rutas-staging-scan__heading small {
    display: none;
  }
  .rutas-staging-scan__button {
    justify-content: center;
    min-width: 0;
    width: 100%;
  }
  .rutas-staging-grid {
    gap: var(--espacio-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rutas-staging-group__header {
    align-items: flex-start;
    padding: 10px;
  }
  .rutas-staging-group__header h2 {
    font-size: 0.92rem;
    line-height: 1.15;
  }
  .rutas-staging-group__header span {
    font-size: 0.68rem;
  }
  .rutas-staging-group__missing {
    display: grid;
    gap: 0;
    min-height: 0;
    padding: 4px 7px;
    text-align: center;
  }
  .rutas-staging-group__missing small {
    display: none;
  }
  .rutas-staging-card {
    gap: 6px;
    min-height: 48px;
    padding: 7px 8px;
  }
  .rutas-staging-card__title {
    align-items: stretch;
    display: grid;
    gap: 1px;
  }
  .rutas-staging-card__title strong {
    font-size: 0.78rem;
  }
  .rutas-staging-card__title span {
    font-size: 0.72rem;
  }
  .rutas-staging-card__address {
    display: none;
  }
  .rutas-staging-card__status .app-status {
    min-height: 24px;
    min-width: 24px;
    padding: 0;
  }
  .rutas-staging-card__status .app-status > span:last-child {
    display: none;
  }
  .rutas-staging-unassigned {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .rutas-payment-fields {
    grid-template-columns: 1fr;
  }
}
@media print {
  body {
    background: #ffffff !important;
  }
  .menu-lateral,
  .barra-movil,
  .rutas-no-print {
    display: none !important;
  }
  .app-main {
    margin: 0 !important;
    padding: 0 !important;
  }
}
.rutas-optimization-duration {
  max-width: 280px;
}

.rutas-input-suffix {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(90px, 1fr) auto;
}

.rutas-messenger-config-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rutas-messenger-config-card {
  border: 1px solid var(--app-border, #ded8cf);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  padding: 18px;
}

.rutas-messenger-config-card > header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.rutas-messenger-config-card h3 {
  font-size: 1rem;
  margin: 0;
}

.rutas-messenger-config-card__points {
  display: grid;
  gap: 14px;
}

.rutas-route-point {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.rutas-route-point-map {
  aspect-ratio: 16/8;
  background: #f2f2f2;
  border: 1px solid var(--app-border, #ded8cf);
  border-radius: 8px;
  min-height: 360px;
  width: 100%;
}

/* --- Verificacion 1:1 de direcciones (pantalla "Revisar direcciones") --- */
.rutas-address-review-card__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.rutas-address-verify-btn {
  font-size: 0.8rem;
  gap: 6px;
  padding: 5px 12px;
}

.rutas-prepare-filter {
  margin: 4px 0 14px;
}

.rutas-prepare-filter__toggle {
  align-items: center;
  color: var(--color-texto-secundario);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.85rem;
  gap: 8px;
  user-select: none;
}

.rutas-prepare-filter__toggle strong {
  color: var(--color-texto);
}

/* Oculta las direcciones ya verificadas cuando el operador filtra por dudosas. */
.rutas-prepare-card.is-only-doubtful .rutas-address-review-card:not(.is-doubtful) {
  display: none;
}

.rutas-verify-address {
  background: var(--color-interactivo-medio, #f4f1ea);
  border: 1px solid var(--color-borde, #ded8cf);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
}

.rutas-verify-address__label {
  color: var(--color-texto-secundario);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rutas-verify-address__text {
  color: var(--color-texto);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
}

.rutas-verify-address__complement {
  color: var(--color-texto-secundario);
  font-size: 0.85rem;
  line-height: 1.35;
}

/* Buscador de Google Places dentro del modal de verificación: ancla el desplegable
   de sugerencias (que reutiliza .rutas-address-suggestions). */
.rutas-verify-search {
  position: relative;
}

.rutas-verify-map {
  background: #f2f2f2;
  border: 1px solid var(--app-border, #ded8cf);
  border-radius: 8px;
  min-height: 420px;
  width: 100%;
}

.rutas-verify-hint {
  color: var(--color-texto-secundario);
  font-size: 0.8rem;
  margin: 0;
}

.rutas-verify-footer {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.rutas-verify-footer__main {
  display: flex;
  gap: 10px;
}

@media (max-width: 560px) {
  .rutas-verify-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .rutas-verify-footer__main {
    justify-content: flex-end;
  }
}
/* --- Reordenar "Mi ruta" (mensajero) --- */
.rutas-reorder-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rutas-reorder-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  width: 100%;
}

.rutas-reorder-actions__buttons {
  display: flex;
  gap: 8px;
}

.rutas-reorder-hint {
  color: var(--color-texto-secundario);
  font-size: 0.8rem;
}

/* Flechas ▲▼ inyectadas en cada tarjeta durante el modo reordenar. */
.rutas-reorder-controls {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

/* Mientras se reordena: se ocultan las acciones normales y se atenúan los puntos
   ya entregados (no reordenables), para dejar claro qué se puede mover. */
.rutas-delivery-list.is-reordering .rutas-delivery-card__actions {
  display: none;
}

.rutas-delivery-list.is-reordering .rutas-delivery-card__address-link {
  pointer-events: none;
}

.rutas-delivery-list.is-reordering .rutas-delivery-card:not([data-rutas-reorder-item]) {
  opacity: 0.5;
}

.rutas-card__optimization-lock.is-active {
  background: #202124;
  color: #fff;
}

.rutas-card__optimization-lock:disabled {
  opacity: 0.5;
}

.rutas-optimization-modal {
  max-width: 1080px;
}

.rutas-optimization-modes {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rutas-optimization-mode {
  cursor: pointer;
  display: block;
  position: relative;
}

.rutas-optimization-mode input {
  inset: 0;
  opacity: 0;
  position: absolute;
}

.rutas-optimization-mode span {
  border: 1px solid var(--app-border, #ded8cf);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 18px;
}

.rutas-optimization-mode input:checked + span {
  border-color: #202124;
  box-shadow: inset 0 0 0 1px #202124;
}

.rutas-optimization-mode small,
.rutas-optimization-route-list small,
.rutas-optimization-vehicles small {
  color: var(--app-text-muted, #666a73);
}

.rutas-optimization-vehicles,
.rutas-optimization-route-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.rutas-optimization-vehicles article,
.rutas-optimization-route-list article {
  align-items: center;
  border-bottom: 1px solid var(--app-border, #ded8cf);
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(130px, 0.4fr) minmax(0, 1fr);
  padding: 10px 0;
}

.rutas-optimization-route-list article {
  grid-template-columns: minmax(150px, 0.4fr) minmax(0, 1fr);
}

.rutas-optimization-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rutas-optimization-metrics article {
  background: #f7f7f6;
  border: 1px solid var(--app-border, #ded8cf);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 14px;
}

.rutas-optimization-changes {
  font-weight: 700;
  margin-top: 16px;
}

@media (max-width: 800px) {
  .rutas-messenger-config-grid,
  .rutas-optimization-modes,
  .rutas-optimization-metrics {
    grid-template-columns: 1fr;
  }
  .rutas-route-point-map {
    aspect-ratio: 4/5;
    min-height: 420px;
  }
  .rutas-optimization-vehicles article,
  .rutas-optimization-route-list article {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .rutas-optimization-vehicles article small {
    grid-column: 1/-1;
  }
}
.rutas-card--stop {
  background: #f8fbff;
  border-style: dashed;
}

.rutas-card--stop.is-complete {
  opacity: 0.7;
}

.rutas-stop-badge {
  align-items: center;
  background: #eef4ff;
  border: 1px solid #c7d8f5;
  border-radius: 999px;
  color: #294b7a;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 700;
  gap: 5px;
  line-height: 1;
  padding: 5px 8px;
  white-space: nowrap;
}

.rutas-stop-badge svg {
  height: 14px;
  width: 14px;
}

.rutas-staging-card--stop {
  background: #f8fbff;
}

.rutas-staging-card--stop .rutas-staging-card__marker {
  background: #4d73a8;
}

.rutas-staging-card--stop .rutas-staging-card__status {
  align-items: center;
  display: flex;
  gap: 8px;
}

.rutas-frequent-page .rutas-settings-form {
  align-content: start;
  display: grid;
  gap: 14px;
}

.rutas-frequent-page .rutas-table-wrap {
  overflow-x: auto;
}

@media (max-width: 800px) {
  .rutas-card--stop .rutas-card__address span {
    display: block;
  }
  .rutas-staging-card--stop .rutas-staging-card__status {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
/* ============================================
   Wizard de entrega (mobile first)
   ============================================ */
.rutas-delivered-panel {
  align-items: center;
  display: grid;
  gap: var(--espacio-3);
  justify-items: center;
  padding: var(--espacio-6) var(--espacio-4);
  text-align: center;
}

.rutas-delivered-panel__icon {
  align-items: center;
  background: var(--color-status-success-bg);
  border-radius: 50%;
  color: var(--color-status-success-text);
  display: inline-flex;
  height: 56px;
  justify-content: center;
  width: 56px;
}

.rutas-delivered-panel__icon .app-icon {
  font-size: 30px;
}

.rutas-delivered-panel h2 {
  font-size: 1.15rem;
  margin: 0;
}

.rutas-delivered-panel p {
  color: var(--color-texto-secundario);
  margin: 0;
  max-width: 34ch;
}

.rutas-delivered-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  justify-content: center;
  margin-top: var(--espacio-2);
}

.rutas-wizard-steps {
  display: flex;
  gap: var(--espacio-2);
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rutas-wizard-step-item {
  align-items: center;
  color: var(--color-texto-tenue);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.rutas-wizard-step-item__dot {
  align-items: center;
  background: var(--color-superficie-alta);
  border: 1px solid var(--color-borde);
  border-radius: 50%;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  width: 40px;
}

.rutas-wizard-step-item__label {
  font-size: 0.78rem;
  font-weight: 600;
}

.rutas-wizard-step-item.is-active {
  color: var(--color-texto);
}

.rutas-wizard-step-item.is-active .rutas-wizard-step-item__dot {
  background: var(--color-boton-principal-bg);
  border-color: var(--color-boton-principal-border);
  color: var(--color-boton-principal-texto);
}

.rutas-wizard-step-item.is-complete {
  color: var(--color-status-success-text);
}

.rutas-wizard-step-item.is-complete .rutas-wizard-step-item__dot {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.rutas-delivery-wizard {
  padding: var(--espacio-4);
}

.rutas-delivery-wizard .rutas-delivery-context {
  display: grid;
  gap: 6px;
}

.rutas-delivery-wizard .rutas-delivery-context .app-page-description {
  margin: 0;
}

.rutas-delivery-wizard .rutas-delivery-context > span:not(.app-page-description),
.rutas-delivery-wizard .rutas-delivery-context small {
  color: var(--color-texto-secundario);
}

.rutas-wizard-step__body {
  display: grid;
  gap: var(--espacio-4);
}

.rutas-wizard-step__title {
  font-size: 1.2rem;
  margin: 0;
}

.rutas-wizard-step__actions-inline {
  display: flex;
  gap: var(--espacio-2);
  justify-content: flex-end;
}

.rutas-wizard-divider {
  align-items: center;
  color: var(--color-texto-tenue);
  display: flex;
  font-size: 0.78rem;
  gap: var(--espacio-3);
  text-transform: uppercase;
}

.rutas-wizard-divider::before,
.rutas-wizard-divider::after {
  background: var(--color-borde);
  content: "";
  flex: 1;
  height: 1px;
}

.rutas-qr-scan-button {
  justify-content: center;
  min-height: 56px;
  width: 100%;
}

.rutas-qr-input {
  font-size: 1rem;
  text-align: center;
}

.rutas-qr-status {
  border-radius: var(--radio-card);
  font-size: 0.92rem;
  line-height: 1.4;
  padding: var(--espacio-3) var(--espacio-4);
}

.rutas-qr-status--success {
  background: var(--color-status-success-bg);
  border: 1px solid var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.rutas-qr-status--warning {
  background: var(--color-status-warning-bg);
  border: 1px solid var(--color-status-warning-border);
  color: var(--color-status-warning-text);
}

.rutas-qr-status--neutral {
  background: var(--color-interactivo-medio);
  border: 1px solid var(--color-borde);
  color: var(--color-texto-secundario);
}

.rutas-qr-mismatch {
  background: var(--color-status-warning-bg);
  border: 1px solid var(--color-status-warning-border);
  border-radius: var(--radio-card);
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
}

.rutas-qr-mismatch__copy {
  display: grid;
  gap: 4px;
}

.rutas-qr-mismatch__copy strong {
  color: var(--color-status-warning-text);
}

.rutas-qr-mismatch__copy span {
  color: var(--color-texto-secundario);
  font-size: 0.9rem;
  line-height: 1.45;
}

.rutas-delivery-order {
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  margin: 0;
}

.rutas-cod-banner,
.rutas-paid-banner {
  align-items: center;
  border-radius: var(--radio-card);
  display: flex;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
}

.rutas-cod-banner {
  background: var(--color-status-warning-bg);
  border: 1px solid var(--color-status-warning-border);
}

.rutas-cod-banner__icon,
.rutas-paid-banner__icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
}

.rutas-cod-banner__icon {
  color: var(--color-status-warning-text);
}

.rutas-paid-banner__icon {
  color: var(--color-status-success-text);
}

.rutas-cod-banner__copy,
.rutas-paid-banner__copy {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.rutas-cod-banner__copy strong,
.rutas-paid-banner__copy strong {
  font-size: 0.98rem;
}

.rutas-cod-banner__copy span,
.rutas-paid-banner__copy span {
  color: var(--color-texto-secundario);
  font-size: 0.84rem;
}

.rutas-cod-banner__amount {
  color: var(--color-status-warning-text);
  font-size: 1.2rem;
  white-space: nowrap;
}

.rutas-paid-banner {
  background: var(--color-status-success-bg);
  border: 1px solid var(--color-status-success-border);
}

.rutas-paid-banner__copy strong {
  color: var(--color-status-success-text);
}

.rutas-delivery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}

.rutas-delivery-actions .app-button {
  flex: 1;
  justify-content: center;
  min-height: 48px;
  min-width: min(100%, 150px);
}

.rutas-photo-actions {
  display: grid;
  gap: var(--espacio-2);
}

.rutas-photo-button {
  justify-content: center;
  min-height: 56px;
  width: 100%;
}

.rutas-photo-preview {
  display: grid;
  gap: var(--espacio-2);
}

.rutas-photo-preview img {
  border-radius: var(--radio-card);
  display: block;
  max-height: 260px;
  object-fit: cover;
  width: 100%;
}

.rutas-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.rutas-role-chip {
  background: var(--color-superficie-alta);
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  color: var(--color-texto);
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  min-height: 44px;
  padding: 0 var(--espacio-4);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rutas-role-chip[aria-pressed=true] {
  background: var(--color-boton-principal-bg);
  border-color: var(--color-boton-principal-border);
  color: var(--color-boton-principal-texto);
}

.rutas-signature-pad--entrega {
  min-height: 190px;
}

.rutas-signature-pad--entrega canvas {
  min-height: 190px;
}

.rutas-signature-modal .modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(92dvh, 720px);
  max-width: min(560px, 100vw - 24px);
  width: 100%;
}

.rutas-signature-modal .modal__cuerpo {
  display: grid;
  max-height: none;
  min-height: 0;
}

.rutas-signature-pad--full {
  height: 100%;
  min-height: 0;
}

.rutas-signature-pad--full canvas {
  height: 100%;
  width: 100%;
}

.rutas-signature-modal__footer {
  display: flex;
  gap: var(--espacio-3);
}

.rutas-signature-modal__footer .app-button {
  flex: 1;
  justify-content: center;
  min-height: 48px;
}

.rutas-pay-methods {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rutas-pay-method {
  align-items: center;
  background: var(--color-superficie-alta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  color: var(--color-texto);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 6px;
  justify-items: center;
  min-height: 76px;
  padding: var(--espacio-3) var(--espacio-2);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rutas-pay-method__icon {
  color: var(--color-texto-secundario);
  display: inline-flex;
}

.rutas-pay-method__icon .app-icon {
  font-size: 26px;
}

.rutas-pay-method__label {
  font-size: 0.9rem;
  font-weight: 600;
}

.rutas-pay-method[aria-pressed=true] {
  background: var(--color-boton-principal-bg);
  border-color: var(--color-boton-principal-border);
  color: var(--color-boton-principal-texto);
}

.rutas-pay-method[aria-pressed=true] .rutas-pay-method__icon {
  color: inherit;
}

.rutas-pay-amount-wrap {
  position: relative;
}

.rutas-pay-amount-symbol {
  align-items: center;
  bottom: 0;
  color: var(--color-texto-secundario);
  display: inline-flex;
  font-size: 1.25rem;
  font-weight: 700;
  left: 0;
  padding-left: var(--espacio-3);
  position: absolute;
  top: 0;
  z-index: 1;
}

.rutas-pay-amount-input {
  font-size: 1.35rem;
  font-weight: 700;
  padding-left: 34px;
}

.rutas-wizard-nav {
  align-items: center;
  background: var(--color-superficie);
  border-top: 1px solid var(--color-borde);
  bottom: 0;
  display: flex;
  gap: var(--espacio-3);
  margin: var(--espacio-4) calc(-1 * var(--espacio-4)) calc(-1 * var(--espacio-4));
  padding: var(--espacio-3) var(--espacio-4);
  position: sticky;
  z-index: 4;
}

.rutas-wizard-nav__button {
  flex: 1;
  justify-content: center;
  min-height: 48px;
}

/* ============================================
   Notas de Shopify: indicador y tooltip
   ============================================ */
.rutas-card__note,
.rutas-staging-card__note,
.rutas-delivery-card__note,
.rutas-history-note {
  color: var(--color-status-warning-text);
}

.rutas-card__note .app-icon,
.rutas-staging-card__note .app-icon,
.rutas-delivery-card__note .app-icon,
.rutas-history-note .app-icon {
  font-size: 1.15em;
}

.rutas-notas-tooltip {
  background: var(--color-superficie-flotante);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-flotante);
  color: var(--color-texto);
  font-size: 0.82rem;
  line-height: 1.5;
  max-width: min(320px, 100vw - 24px);
  padding: var(--espacio-2) var(--espacio-3);
  pointer-events: none;
  position: fixed;
  white-space: pre-line;
  word-break: break-word;
  z-index: 2000;
}

/* Panel de progreso de "Empezar ruta": la sincronización con Shopify avanza por
   lotes vía AJAX y aquí se muestra el loader + la barra de progreso. */
.rutas-empezar__progress {
  border-top: 1px solid var(--color-borde-suave);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
  padding-top: var(--espacio-3);
  width: 100%;
}

.rutas-empezar__progress[hidden] {
  display: none;
}

.rutas-empezar__progress-head {
  align-items: center;
  color: var(--color-texto);
  display: flex;
  font-size: 0.9rem;
  gap: var(--espacio-2);
}

.rutas-empezar__progress-track {
  background: var(--color-interactivo-fuerte);
  border-radius: var(--radio-pill);
  height: 10px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.rutas-empezar__progress-track [data-rutas-empezar-bar] {
  background: linear-gradient(90deg, #21c065, var(--color-status-success-text));
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 6px;
  transition: width 0.35s ease;
  width: 0;
}

.rutas-empezar__progress-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.rutas-empezar__progress-counts span {
  align-items: center;
  background: var(--color-superficie-alta);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-pill);
  color: var(--color-texto-secundario);
  display: inline-flex;
  font-size: 0.8rem;
  gap: 6px;
  padding: 4px 10px;
}

.rutas-empezar__progress-counts span strong {
  color: var(--color-texto);
  font-weight: 700;
}

.tesoreria-page {
  display: grid;
  gap: var(--espacio-5);
}

.tesoreria-credit-card-grid {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.tesoreria-credit-card {
  border-top: 4px solid var(--color-acento);
}

.tesoreria-credit-card.is-pending {
  border-top-color: var(--color-advertencia, #b45309);
}

.tesoreria-card-metrics {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tesoreria-card-metrics > div,
.tesoreria-card-dashboard .app-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

.tesoreria-card-metrics span,
.tesoreria-card-dashboard span,
.tesoreria-card-dashboard small {
  color: var(--color-texto-tenue);
  font-size: 0.875rem;
}

.tesoreria-card-metrics strong {
  font-size: 1.125rem;
}

.tesoreria-reconciliation-form {
  display: grid;
  gap: var(--espacio-4);
}

.tesoreria-recon-summary {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--espacio-4);
}

.tesoreria-recon-diff {
  background: var(--color-status-warning-bg);
  border-color: var(--color-status-warning-border);
}
.tesoreria-recon-diff span,
.tesoreria-recon-diff small,
.tesoreria-recon-diff .tesoreria-metric {
  color: var(--color-status-warning-text);
}
.tesoreria-recon-diff.is-zero {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
}
.tesoreria-recon-diff.is-zero span,
.tesoreria-recon-diff.is-zero small,
.tesoreria-recon-diff.is-zero .tesoreria-metric {
  color: var(--color-status-success-text);
}

.tesoreria-recon-breakdown {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  margin-top: var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
}
.tesoreria-recon-breakdown__title {
  color: var(--color-texto-secundario);
  display: block;
  font-size: 0.85rem;
  margin-bottom: var(--espacio-2);
}
.tesoreria-recon-breakdown ul {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tesoreria-recon-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-3);
  color: var(--color-texto-secundario);
}
.tesoreria-recon-breakdown__total {
  border-top: 1px solid var(--color-borde);
  color: var(--color-texto);
  font-weight: 600;
  margin-top: 4px;
  padding-top: 6px;
}

.tesoreria-recon-list {
  display: grid;
  gap: var(--espacio-2);
}

.tesoreria-recon-item {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
}
.tesoreria-recon-item.is-excluded {
  background: var(--color-interactivo-suave);
  opacity: 0.75;
}
.tesoreria-recon-item__check {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: var(--espacio-3);
}
.tesoreria-recon-item__check input {
  margin-top: 3px;
}
.tesoreria-recon-item__info {
  display: grid;
  gap: 2px;
}
.tesoreria-recon-item__info small {
  color: var(--color-texto-tenue);
}
.tesoreria-recon-item__controls {
  display: grid;
  gap: var(--espacio-2);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
}
.tesoreria-recon-item__error-hint {
  color: var(--color-status-warning-text);
  font-size: 0.85rem;
  margin: 0;
}

.tesoreria-recon-resolve {
  background: var(--color-status-warning-bg);
  border-color: var(--color-status-warning-border);
}
.tesoreria-recon-resolve__lead {
  color: var(--color-status-warning-text);
  margin: 0 0 var(--espacio-3);
}
.tesoreria-recon-resolve__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.app-input--sm {
  min-height: 34px;
  padding: 4px 8px;
}

.tesoreria-recon-ai-cta {
  border-color: var(--color-acento);
}
.tesoreria-recon-ai-cta .app-card__body {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  justify-content: space-between;
}
.tesoreria-recon-ai-cta__text {
  flex: 1 1 260px;
}
.tesoreria-recon-ai-cta__form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.tesoreria-recon-ai-panel {
  border-color: var(--color-acento);
}
.tesoreria-recon-ai-panel__subtitle {
  font-size: 0.95rem;
  margin: var(--espacio-3) 0 var(--espacio-2);
}
.tesoreria-recon-ai-panel__list {
  display: grid;
  gap: var(--espacio-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tesoreria-recon-ai-panel__list li {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
  justify-content: space-between;
}

@media (max-width: 720px) {
  .tesoreria-recon-summary {
    grid-template-columns: 1fr;
  }
  .tesoreria-recon-item__controls {
    grid-template-columns: 1fr;
  }
}
.tesoreria-document-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
}

@media (max-width: 720px) {
  .tesoreria-card-metrics {
    grid-template-columns: 1fr;
  }
}
.tesoreria-landing {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
}

.tesoreria-icon-badge {
  align-items: center;
  background: var(--color-interactivo-medio);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  color: var(--color-texto);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.tesoreria-muted {
  color: var(--color-texto-secundario);
  display: block;
  margin: 0;
}

.tesoreria-category-table td {
  min-width: 110px;
}

.tesoreria-category-name {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
  min-width: 220px;
}

.tesoreria-category-name strong,
.tesoreria-category-name small {
  display: block;
}

.tesoreria-category-name small {
  color: var(--color-texto-tenue);
  margin-top: 2px;
}

.tesoreria-category-swatch {
  align-items: center;
  background: var(--color-interactivo-medio);
  border: 0;
  border-radius: 50%;
  color: var(--color-texto-secundario);
  display: inline-flex;
  flex: 0 0 34px;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.tesoreria-category-visual-grid {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tesoreria-color-picker {
  align-items: stretch;
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: 96px minmax(0, 1fr);
}

.tesoreria-category-preview {
  align-items: center;
  background: var(--tesoreria-category-preview-color);
  border: 0;
  border-radius: 50%;
  color: var(--tesoreria-category-preview-contrast, #ffffff);
  display: flex;
  height: 96px;
  justify-content: center;
  width: 96px;
}

.tesoreria-category-preview.is-empty {
  background: var(--color-interactivo-medio);
  color: var(--color-texto-secundario);
}

.tesoreria-category-preview .app-icon {
  font-size: 2.25rem;
}

.tesoreria-color-picker__controls {
  display: grid;
  gap: var(--espacio-3);
}

.tesoreria-color-picker__input {
  display: grid;
  gap: var(--espacio-2);
  grid-template-columns: 52px minmax(0, 1fr) 44px;
}

.tesoreria-color-picker__native {
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-input-bg);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  cursor: pointer;
  height: 44px;
  overflow: hidden;
  padding: 4px;
  width: 52px;
}

.tesoreria-color-picker__native::-webkit-color-swatch-wrapper {
  padding: 0;
}

.tesoreria-color-picker__native::-webkit-color-swatch,
.tesoreria-color-picker__native::-moz-color-swatch {
  border: 0;
  border-radius: 4px;
}

.tesoreria-color-palette {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, 28px);
}

.tesoreria-color-swatch {
  background: var(--tesoreria-color-swatch);
  border: 2px solid var(--color-superficie);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-borde);
  cursor: pointer;
  height: 28px;
  padding: 0;
  transition: box-shadow var(--transicion-rapida), transform var(--transicion-rapida);
  width: 28px;
}

.tesoreria-color-swatch:hover {
  box-shadow: 0 0 0 2px var(--color-texto-secundario);
  transform: scale(1.06);
}

.tesoreria-color-swatch[aria-pressed=true] {
  box-shadow: 0 0 0 3px var(--color-texto);
}

.tesoreria-color-swatch:focus-visible,
.tesoreria-color-picker__native:focus-visible,
.tesoreria-icon-picker-trigger:focus-visible,
.tesoreria-icon-option:focus-visible {
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  outline: 2px solid var(--color-input-border-focus);
  outline-offset: 2px;
}

.tesoreria-icon-picker-trigger {
  align-items: center;
  background: var(--color-input-bg);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  color: var(--color-texto);
  cursor: pointer;
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  min-height: 72px;
  padding: 10px 14px;
  text-align: left;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida);
  width: 100%;
}

.tesoreria-icon-picker-trigger:hover {
  background: var(--color-input-bg-hover);
  border-color: var(--color-input-border-hover);
}

.tesoreria-icon-picker-trigger__preview {
  align-items: center;
  background: var(--color-interactivo-medio);
  border: 0;
  border-radius: 50%;
  display: flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.tesoreria-icon-picker-trigger__preview .app-icon {
  font-size: 1.65rem;
}

.tesoreria-icon-picker-trigger__text {
  min-width: 0;
}

.tesoreria-icon-picker-trigger__text strong,
.tesoreria-icon-picker-trigger__text small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tesoreria-icon-picker-trigger__text small {
  color: var(--color-texto-tenue);
  font-size: var(--texto-xs);
  margin-top: 3px;
}

.tesoreria-icon-dialog {
  background: var(--color-superficie-flotante);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  color: var(--color-texto);
  grid-template-rows: auto auto minmax(160px, 1fr) auto;
  margin: auto;
  max-height: min(760px, 100vh - 48px);
  max-width: 760px;
  overflow: hidden;
  padding: 0;
  width: calc(100vw - 32px);
}

.tesoreria-icon-dialog[open] {
  display: grid;
}

.tesoreria-icon-dialog::backdrop {
  background: var(--color-overlay);
}

.tesoreria-icon-dialog__header,
.tesoreria-icon-dialog__footer {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
  justify-content: space-between;
  padding: var(--espacio-4);
}

.tesoreria-icon-dialog__header {
  border-bottom: 1px solid var(--color-borde);
}

.tesoreria-icon-dialog__header h2 {
  font-size: 1.1rem;
  margin: 0 0 2px;
}

.tesoreria-icon-dialog__footer {
  border-top: 1px solid var(--color-borde);
}

.tesoreria-icon-dialog__search {
  align-items: center;
  display: grid;
  gap: var(--espacio-2);
  grid-template-columns: 24px minmax(0, 1fr);
  padding: var(--espacio-3) var(--espacio-4);
}

.tesoreria-icon-dialog__search > .app-icon {
  color: var(--color-texto-tenue);
}

.tesoreria-icon-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  overflow: auto;
  padding: 0 var(--espacio-4) var(--espacio-4);
}

.tesoreria-icon-option {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--color-texto-secundario);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 84px;
  justify-content: center;
  min-width: 0;
  padding: 8px;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida), color var(--transicion-rapida);
}

.tesoreria-icon-option:hover {
  background: transparent;
  color: var(--color-texto);
}

.tesoreria-icon-option[hidden] {
  display: none;
}

.tesoreria-icon-option[aria-pressed=true] {
  background: transparent;
  color: var(--color-texto);
}

.tesoreria-icon-option .app-icon {
  align-items: center;
  background: var(--color-interactivo-medio);
  border-radius: 50%;
  display: flex;
  flex: 0 0 auto;
  font-size: 1.65rem;
  height: 48px;
  justify-content: center;
  transition: background var(--transicion-rapida), color var(--transicion-rapida), transform var(--transicion-rapida);
  width: 48px;
}

.tesoreria-icon-option:hover .app-icon {
  background: var(--color-interactivo-fuerte);
  transform: scale(1.05);
}

.tesoreria-icon-option[aria-pressed=true] .app-icon {
  background: var(--color-texto);
  color: var(--color-superficie);
}

.tesoreria-icon-option span:last-child {
  font-size: 0.68rem;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tesoreria-icon-dialog__empty {
  margin: 0 var(--espacio-4) var(--espacio-4);
  min-height: 160px;
}

.tesoreria-table-actions-heading {
  text-align: right !important;
}

.tesoreria-form-card {
  max-width: 860px;
}

.tesoreria-metrics {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tesoreria-metrics-grid {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tesoreria-metric {
  padding: var(--espacio-4);
}

.tesoreria-metric span,
.tesoreria-metric strong {
  display: block;
}

.tesoreria-metric span {
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
}

.tesoreria-metric strong {
  font-size: 1.35rem;
  margin-top: var(--espacio-2);
}

.tesoreria-metrics-grid .tesoreria-metric {
  display: block;
  font-size: 1.55rem;
  padding: 0;
}

.tesoreria-mini-list {
  color: var(--color-texto-secundario);
  display: grid;
  font-size: var(--texto-sm);
  gap: var(--espacio-1);
  margin-top: var(--espacio-3);
}

.tesoreria-danger-text {
  color: var(--color-status-danger-text);
}

.tesoreria-filter-card__check {
  align-items: end;
  display: flex;
}

.tesoreria-filter-card .app-form-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tesoreria-expense-table td {
  min-width: 110px;
}

.tesoreria-expenses-page {
  gap: var(--espacio-4);
}

.tesoreria-month-nav {
  align-items: center;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  margin-inline: calc(var(--espacio-5) * -1);
  overflow: hidden;
  padding-inline: var(--espacio-2);
}

.tesoreria-month-nav__arrow {
  justify-self: center;
  position: relative;
  z-index: 2;
}

.tesoreria-month-nav__viewport {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.tesoreria-month-nav__viewport::-webkit-scrollbar {
  display: none;
}

.tesoreria-month-nav__track {
  display: flex;
  min-width: max-content;
  padding-inline: calc(50% - 88px);
}

.tesoreria-month-nav__item {
  align-items: center;
  color: var(--color-texto-tenue);
  display: flex;
  flex: 0 0 176px;
  flex-direction: column;
  justify-content: center;
  min-height: 100px;
  position: relative;
  scroll-snap-align: center;
  text-decoration: none;
  transition: color var(--transicion-rapida), background var(--transicion-rapida);
}

.tesoreria-month-nav__item::after {
  background: var(--color-texto);
  bottom: 0;
  content: "";
  height: 3px;
  left: var(--espacio-4);
  opacity: 0;
  position: absolute;
  right: var(--espacio-4);
  transform: scaleX(0.5);
  transition: opacity var(--transicion-rapida), transform var(--transicion-rapida);
}

.tesoreria-month-nav__item:hover {
  background: var(--color-interactivo-suave);
  color: var(--color-texto-secundario);
}

.tesoreria-month-nav__item:focus-visible {
  outline: 2px solid var(--color-texto);
  outline-offset: -2px;
}

.tesoreria-month-nav__item strong,
.tesoreria-month-nav__item span {
  display: block;
  letter-spacing: 0;
}

.tesoreria-month-nav__item strong {
  font-size: 1.45rem;
  font-weight: 720;
  line-height: 1.1;
}

.tesoreria-month-nav__item span {
  font-size: 0.72rem;
  margin-top: 3px;
}

.tesoreria-month-nav__item.is-current {
  color: var(--color-texto);
}

.tesoreria-month-nav__item.is-current strong {
  font-size: 1.85rem;
  font-weight: 800;
}

.tesoreria-month-nav__item.is-current::after {
  opacity: 1;
  transform: scaleX(1);
}

.tesoreria-expense-overview {
  align-items: stretch;
  background: var(--color-superficie-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tesoreria-expense-overview > div {
  display: grid;
  gap: var(--espacio-1);
  padding: var(--espacio-4);
}

.tesoreria-expense-overview > div + div {
  border-left: 1px solid var(--color-borde-suave);
}

.tesoreria-expense-overview span {
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
}

.tesoreria-expense-overview strong {
  color: var(--color-texto);
  font-size: 1.25rem;
}

.tesoreria-expense-filters {
  background: var(--color-superficie-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  padding: var(--espacio-4);
}

.tesoreria-expense-filters__grid {
  align-items: end;
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(150px, 0.75fr)) auto;
}

.tesoreria-expense-filters__actions {
  display: flex;
  gap: var(--espacio-2);
}

.tesoreria-expense-groups {
  display: grid;
  gap: var(--espacio-3);
}

.tesoreria-expense-group {
  background: var(--color-superficie-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  overflow: hidden;
}

.tesoreria-expense-group__summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: minmax(240px, 1fr) auto 28px;
  list-style: none;
  min-height: 74px;
  padding: var(--espacio-4);
  transition: background var(--transicion-rapida);
}

.tesoreria-expense-group__summary::-webkit-details-marker {
  display: none;
}

.tesoreria-expense-group__summary:hover {
  background: var(--color-fila-tabla-hover);
}

.tesoreria-expense-group__summary:focus-visible {
  outline: 2px solid var(--color-texto);
  outline-offset: -2px;
}

.tesoreria-expense-group__identity {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
  min-width: 0;
}

.tesoreria-expense-group__swatch {
  background: var(--category-color, var(--color-interactivo-fuerte));
  border: 1px solid var(--color-borde);
  border-radius: 3px;
  flex: 0 0 7px;
  height: 38px;
}

.tesoreria-expense-group__identity h2 {
  color: var(--color-texto);
  font-size: 1rem;
  line-height: 1.25;
  margin: 0;
}

.tesoreria-expense-group__identity span {
  color: var(--color-texto-secundario);
  display: block;
  font-size: 0.76rem;
  margin-top: 3px;
}

.tesoreria-expense-group__metrics {
  align-items: center;
  display: flex;
  gap: var(--espacio-4);
}

.tesoreria-expense-group__metrics > span {
  color: var(--color-texto-secundario);
  font-size: 0.75rem;
  white-space: nowrap;
}

.tesoreria-expense-group__metrics strong {
  color: var(--color-texto);
  display: block;
  font-size: 0.9rem;
  margin-top: 2px;
}

.tesoreria-expense-group__chevron {
  color: var(--color-texto-secundario);
  display: grid;
  place-items: center;
  transition: transform var(--transicion-rapida);
}

.tesoreria-expense-group[open] .tesoreria-expense-group__chevron {
  transform: rotate(180deg);
}

.tesoreria-expense-group__body {
  border-top: 1px solid var(--color-borde-suave);
}

.tesoreria-expense-group__body .app-table-container {
  border: 0;
  border-radius: 0;
}

.tesoreria-expense-table--grouped {
  min-width: 1080px;
}

.tesoreria-expense-table--grouped th:first-child,
.tesoreria-expense-table--grouped td:first-child {
  padding-left: var(--espacio-4);
}

.tesoreria-expense-table--grouped th:last-child,
.tesoreria-expense-table--grouped td:last-child {
  padding-right: var(--espacio-4);
}

.tesoreria-expense-table--grouped td {
  min-width: 0;
}

.tesoreria-expense-table__concept strong,
.tesoreria-expense-table__concept small {
  display: block;
}

.tesoreria-expense-table__concept strong {
  color: var(--color-texto);
}

.tesoreria-expense-table__concept small {
  color: var(--color-texto-tenue);
  margin-top: 3px;
}

.tesoreria-expense-table__paid-label {
  align-items: center;
  color: var(--color-status-success-text) !important;
  display: inline-flex !important;
  font-weight: 700;
  gap: 3px;
}

.tesoreria-expense-table__paid-label .app-icon {
  font-size: 15px;
}

.tesoreria-expense-table__expected-date {
  color: var(--color-texto);
  white-space: nowrap;
}

.tesoreria-expense-table__expected-date > span {
  align-items: center;
  display: inline-flex;
  gap: var(--espacio-1);
}

.tesoreria-expense-table__expected-date .app-icon {
  color: var(--color-texto-tenue);
  font-size: 16px;
}

.tesoreria-expense-table--grouped tbody .tesoreria-expense-row.is-pagado {
  background: color-mix(in srgb, var(--color-status-success-bg) 72%, var(--color-superficie-tarjeta));
}

.tesoreria-expense-table--grouped tbody .tesoreria-expense-row.is-pagado:hover {
  background: color-mix(in srgb, var(--color-status-success-bg) 88%, var(--color-fila-tabla-hover));
}

.tesoreria-expense-row.is-pagado > td:first-child {
  box-shadow: inset 4px 0 0 var(--color-status-success-text);
}

.tesoreria-expense-row.is-pagado .tesoreria-expense-table__concept strong,
.tesoreria-expense-row.is-pagado td[data-label=Saldo] strong {
  color: var(--color-status-success-text);
}

.tesoreria-expense-row.is-pagado td:not(.tesoreria-expense-table__concept) {
  opacity: 0.88;
}

.tesoreria-expense-table--grouped tbody .tesoreria-expense-row.is-parcialmente-pagado {
  background: color-mix(in srgb, var(--color-status-warning-bg) 48%, var(--color-superficie-tarjeta));
}

.tesoreria-expense-row.is-parcialmente-pagado > td:first-child {
  box-shadow: inset 4px 0 0 var(--color-status-warning-text);
}

.tesoreria-expense-row.is-pendiente > td:first-child {
  box-shadow: inset 3px 0 0 var(--color-status-warning-border);
}

.tesoreria-expense-context {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tesoreria-expense-context a,
.tesoreria-expense-context span {
  align-items: center;
  color: var(--color-texto-secundario);
  display: inline-flex;
  gap: 3px;
  white-space: nowrap;
}

.tesoreria-expense-context .app-icon {
  font-size: 15px;
}

.tesoreria-quick-pay-trigger .app-icon {
  font-size: 17px;
}

.tesoreria-expenses-empty {
  padding: var(--espacio-5);
}

.tesoreria-quick-pay-modal__subtitle {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  margin: 3px 0 0;
}

.tesoreria-quick-pay-modal__expense {
  background: var(--color-interactivo-suave);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-card);
  display: grid;
  gap: 3px;
  padding: var(--espacio-3);
}

.tesoreria-quick-pay-modal__expense > span,
.tesoreria-quick-pay-modal__expense small {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
}

.tesoreria-quick-pay-modal__expense strong {
  color: var(--color-texto);
}

.tesoreria-quick-pay-modal__amount {
  font-size: 1.25rem;
  font-weight: 760;
}

.tesoreria-quick-pay-modal__check {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.tesoreria-quick-pay-modal__check span {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
}

.tesoreria-quick-pay-modal__check strong {
  color: var(--color-status-success-text);
}

.tesoreria-quick-pay-modal__optional {
  border-top: 1px solid var(--color-borde-suave);
  padding-top: var(--espacio-3);
}

.tesoreria-quick-pay-modal__optional > summary {
  color: var(--color-texto-secundario);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
}

.tesoreria-quick-pay-modal__optional-fields {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: var(--espacio-3);
}

.tesoreria-expense-table tr.is-overdue {
  background: color-mix(in srgb, var(--color-status-danger-bg) 38%, transparent);
}

.tesoreria-payment-table tr.is-muted,
.app-table tr.is-muted {
  opacity: 0.66;
}

.tesoreria-overdue {
  align-items: center;
  color: var(--color-status-danger-text);
  display: inline-flex;
  gap: 4px;
  margin-top: 2px;
}

.tesoreria-detail-grid {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
}

.tesoreria-side-stack {
  display: grid;
  gap: var(--espacio-4);
}

.tesoreria-text-block {
  border-top: 1px solid var(--color-borde);
  margin-top: var(--espacio-4);
  padding-top: var(--espacio-4);
}

.tesoreria-text-block p {
  color: var(--color-texto-secundario);
  margin: var(--espacio-2) 0 0;
}

.tesoreria-linked-order {
  max-width: 860px;
}

.tesoreria-note-form,
.tesoreria-document-form,
.tesoreria-assignment-form {
  display: grid;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-4);
}

.tesoreria-note-list,
.tesoreria-document-list {
  display: grid;
  gap: var(--espacio-3);
}

.tesoreria-note,
.tesoreria-document {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
}

.tesoreria-note.is-deleted,
.tesoreria-document.is-deleted {
  opacity: 0.62;
}

.tesoreria-note > div:first-child,
.tesoreria-document__meta {
  display: grid;
  gap: 2px;
}

.tesoreria-note span,
.tesoreria-document span {
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
}

.tesoreria-note p {
  margin: 0;
}

.tesoreria-payment-form {
  max-width: 1100px;
}

.tesoreria-payment-summary {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--espacio-4) 0;
  padding: var(--espacio-3);
}

.tesoreria-payment-summary__item span,
.tesoreria-payment-summary__item strong {
  display: block;
}

.tesoreria-payment-summary__item span {
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
}

.tesoreria-payment-summary__item strong {
  font-size: 1.1rem;
  margin-top: 2px;
}

.tesoreria-payment-summary__item strong.is-balanced {
  color: var(--color-status-success-text);
}

.tesoreria-payment-summary__item strong.is-unbalanced {
  color: var(--color-status-danger-text);
}

.tesoreria-payment-application-list {
  display: grid;
  gap: var(--espacio-3);
}

.tesoreria-payment-application {
  align-items: center;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  padding: var(--espacio-3);
}

.tesoreria-payment-application.is-selected {
  border-color: var(--color-primario);
}

.tesoreria-payment-application strong,
.tesoreria-payment-application span {
  display: block;
}

.tesoreria-payment-application span {
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
  margin-top: 2px;
}

.tesoreria-recurrence-table td {
  min-width: 120px;
}

.tesoreria-recurrence-table td:first-child {
  min-width: 220px;
}

.tesoreria-recurrence-form__body {
  display: grid;
  gap: var(--espacio-5);
}

.tesoreria-form-section {
  border: 0;
  border-top: 1px solid var(--color-borde-suave);
  margin: 0;
  padding: var(--espacio-4) 0 0;
}

.tesoreria-form-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.tesoreria-form-section legend {
  color: var(--color-texto);
  font-size: var(--texto-base);
  font-weight: 750;
  margin-bottom: var(--espacio-3);
  padding: 0;
}

.tesoreria-label-row {
  align-items: center;
  display: flex;
  gap: 6px;
  min-height: 22px;
}

.tesoreria-label-row .app-label {
  margin: 0;
}

.tesoreria-field-tooltip {
  display: inline-flex;
  position: relative;
}

.tesoreria-field-tooltip__trigger {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-texto-tenue);
  cursor: help;
  display: inline-flex;
  height: 20px;
  justify-content: center;
  padding: 0;
  width: 20px;
}

.tesoreria-field-tooltip__trigger .app-icon {
  font-size: 1.05rem;
}

.tesoreria-field-tooltip__trigger:focus-visible {
  border-radius: 50%;
  outline: 2px solid var(--color-input-border-focus);
  outline-offset: 2px;
}

.tesoreria-field-tooltip__content {
  background: var(--color-superficie-flotante);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  bottom: calc(100% + 8px);
  box-shadow: var(--sombra-flotante);
  color: var(--color-texto);
  font-size: var(--texto-xs);
  left: 50%;
  line-height: 1.4;
  opacity: 0;
  padding: 8px 10px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 4px);
  transition: opacity var(--transicion-rapida), transform var(--transicion-rapida);
  visibility: hidden;
  width: min(250px, 100vw - 32px);
  z-index: 20;
}

.tesoreria-field-tooltip:hover .tesoreria-field-tooltip__content,
.tesoreria-field-tooltip:focus-within .tesoreria-field-tooltip__content {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.tesoreria-indefinite-check {
  margin-top: var(--espacio-2);
}

.tesoreria-form-optional {
  border-top: 1px solid var(--color-borde-suave);
  padding-top: var(--espacio-4);
}

.tesoreria-form-optional summary {
  cursor: pointer;
  font-weight: 750;
}

.tesoreria-form-optional__content {
  display: grid;
  gap: var(--espacio-3);
  margin-top: var(--espacio-3);
}

.tesoreria-recurrence-form [hidden] {
  display: none !important;
}

.tesoreria-actions-stack {
  display: grid;
  gap: var(--espacio-3);
}

.tesoreria-actions-stack form {
  display: grid;
  gap: var(--espacio-2);
}

.tesoreria-payment-application__amounts {
  display: grid;
  gap: var(--espacio-2);
}

.tesoreria-payment-application__amounts .is-invalid {
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-text);
}

.tesoreria-payment-application__close {
  grid-column: 1/-1;
}

.tesoreria-payment-application__recurrence {
  grid-column: 1/-1;
}

.tesoreria-payment-application__warning {
  color: var(--color-status-warning-text);
  display: block;
  font-size: var(--texto-sm);
  grid-column: 1/-1;
}

.tesoreria-ia-section {
  display: grid;
  gap: var(--espacio-4);
  margin-bottom: var(--espacio-5);
}

.tesoreria-sugerencia-select-wrapper {
  min-width: 0;
  width: 100%;
}

.tesoreria-sugerencia-select-wrapper.single .pedido-product-control {
  align-items: center;
  box-sizing: border-box;
  gap: 6px;
  min-height: 54px;
  overflow: visible;
  padding: 7px 46px 7px 18px;
}

.tesoreria-sugerencia-select-wrapper .pedido-product-control input,
.tesoreria-sugerencia-select-wrapper.has-items .pedido-product-control input,
.tesoreria-sugerencia-select-wrapper.has-items.input-active:not(.dropdown-active) .pedido-product-control input {
  background: transparent;
  border: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--color-texto);
  caret-color: var(--color-texto);
  flex: 1 1 120px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  min-height: 2rem;
  min-width: 80px;
  opacity: 1;
  outline: 0;
  padding: 0;
  width: auto !important;
}

.tesoreria-sugerencia-select-wrapper .pedido-product-control input::placeholder {
  color: var(--color-texto-tenue);
  opacity: 1;
}

.tesoreria-sugerencia-select-wrapper.has-items .pedido-product-control input::placeholder {
  color: transparent;
}

.tesoreria-sugerencia-select-wrapper .pedido-product-control__item {
  flex: 0 1 auto;
  margin: 0;
  max-width: calc(100% - 86px);
  min-width: 0;
}

.tesoreria-sugerencia-select-wrapper.is-empty-selection .pedido-product-control__item {
  flex: 1 1 auto;
  max-width: 100%;
}

.tesoreria-sugerencia-select-wrapper.is-empty-selection .pedido-product-control .pedido-product-selected {
  width: 100%;
}

.tesoreria-sugerencia-select-wrapper.is-empty-selection .pedido-product-control input {
  display: none;
}

.tesoreria-sugerencia-select-wrapper .pedido-product-control .pedido-product-selected {
  display: block;
  max-width: 100%;
  overflow: hidden;
  width: auto;
}

.tesoreria-sugerencia-selected__text,
.tesoreria-sugerencia-option__text {
  color: var(--color-texto);
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tesoreria-sugerencia-select-wrapper .pedido-product-control .remove {
  align-items: center;
  color: var(--color-texto-secundario);
  display: inline-flex;
  font-size: 1.15rem;
  height: 24px;
  justify-content: center;
  margin-left: 2px;
  opacity: 1;
  width: 24px;
}

.tesoreria-sugerencia-select-wrapper .pedido-product-control .remove:hover {
  color: var(--color-texto);
}

.tesoreria-sugerencia-dropdown {
  min-width: min(100%, 420px);
}

.tesoreria-sugerencia-dropdown .tesoreria-sugerencia-option__text {
  padding: 6px 8px;
}

.tesoreria-ia-grid {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tesoreria-ia-card {
  border-top: 3px solid var(--color-acento);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
  padding: var(--espacio-4);
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida), transform var(--transicion-rapida);
}

.tesoreria-ia-card:hover {
  border-color: var(--color-borde-fuerte);
  border-top-color: var(--color-acento);
  box-shadow: var(--sombra-tarjeta);
  transform: translateY(-2px);
}

.tesoreria-ia-card.is-requires-edit {
  border-color: var(--color-status-warning-border);
  border-top-color: var(--color-status-warning-text);
}

.tesoreria-ia-card__head {
  border-bottom: 1px solid var(--color-borde-suave);
  display: block;
  min-width: 0;
  padding-bottom: var(--espacio-3);
}

.tesoreria-ia-card__identity {
  align-items: flex-start;
  display: flex;
  gap: var(--espacio-2);
  justify-content: space-between;
  min-width: 0;
}

.tesoreria-ia-card__identity-copy {
  min-width: 0;
}

.tesoreria-ia-card__confianza {
  border-radius: 999px;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1;
  padding: 4px 8px;
}

.tesoreria-ia-card__confianza.is-alta {
  background: var(--color-status-success-bg);
  color: var(--color-status-success-text);
}

.tesoreria-ia-card__confianza.is-media {
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning-text);
}

.tesoreria-ia-card__confianza.is-baja {
  background: var(--color-status-danger-bg);
  color: var(--color-status-danger-text);
}

.tesoreria-ia-card.is-duplicada {
  border-color: var(--color-status-danger-border);
  border-top-color: var(--color-status-danger-text);
}

.tesoreria-ia-card__head h3 {
  font-size: 0.98rem;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.tesoreria-ia-card__head p {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}

.tesoreria-ia-card__summary {
  align-items: baseline;
  display: flex;
  gap: var(--espacio-2);
  justify-content: space-between;
  min-width: 0;
  padding: 0;
}

.tesoreria-ia-card__summary strong {
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.tesoreria-ia-card__summary small {
  color: var(--color-texto-secundario);
  font-size: var(--texto-xs);
  font-weight: 760;
  letter-spacing: 0;
}

.tesoreria-ia-card__summary time {
  color: var(--color-texto-secundario);
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
}

.tesoreria-ia-card__meta {
  border-bottom: 1px solid var(--color-borde-suave);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-bottom: var(--espacio-3);
}

.tesoreria-ia-card__meta-item {
  align-items: baseline;
  display: flex;
  gap: var(--espacio-2);
  min-width: 0;
}

.tesoreria-ia-card__meta-item dt {
  color: var(--color-texto-secundario);
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  width: 52px;
}

.tesoreria-ia-card__meta-item dd {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tesoreria-ia-card__meta-faltante {
  color: var(--color-texto-secundario);
  font-style: italic;
  font-weight: 400;
}

.tesoreria-ia-card__duplicado {
  background: var(--color-status-danger-bg);
  border-radius: var(--radio-sm);
  color: var(--color-status-danger-text);
  font-size: var(--texto-sm);
  margin: 0;
  padding: var(--espacio-2);
}

.tesoreria-ia-card__warning {
  background: var(--color-status-warning-bg);
  border-radius: var(--radio-sm);
  color: var(--color-status-warning-text);
  font-size: var(--texto-sm);
  margin: 0;
  padding: var(--espacio-2);
}

.tesoreria-ia-card__actions {
  border-top: 1px solid var(--color-borde-suave);
  display: flex;
  margin-top: auto;
  min-width: 0;
  overflow: hidden;
  padding-top: var(--espacio-3);
}

.tesoreria-ia-card__action-group {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}

.tesoreria-ia-card__action-group form {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.tesoreria-ia-card__action-group .app-button {
  align-items: center;
  display: inline-flex;
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  width: 100%;
  font-size: 0.7rem;
  min-height: 32px;
  padding-inline: 7px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .tesoreria-ia-card {
    padding: var(--espacio-4);
  }
  .tesoreria-ia-card__action-group .app-button {
    font-size: 0.66rem;
    gap: 4px;
    padding-inline: 5px;
  }
}
@media (max-width: 1199px) {
  .tesoreria-ia-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .tesoreria-ia-grid {
    grid-template-columns: 1fr;
  }
}
.tesoreria-board {
  display: grid;
  gap: var(--espacio-4);
  grid-auto-columns: minmax(300px, 360px);
  grid-auto-flow: column;
  overflow-x: auto;
  padding-bottom: var(--espacio-2);
}

.tesoreria-board-column {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  display: grid;
  grid-template-rows: auto auto minmax(220px, 1fr);
  max-height: 78vh;
  min-width: 0;
}

.tesoreria-board-column__header {
  align-items: start;
  border-bottom: 1px solid var(--color-borde);
  display: flex;
  gap: var(--espacio-3);
  justify-content: space-between;
  padding: var(--espacio-3);
}

.tesoreria-board-column__header h2 {
  font-size: 1rem;
  margin: 0;
}

.tesoreria-board-column__header span,
.tesoreria-board-column__meta,
.tesoreria-board-empty {
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
}

.tesoreria-board-column__header strong {
  align-items: center;
  background: var(--color-interactivo-medio);
  border-radius: var(--radio-pill);
  display: inline-flex;
  min-height: 28px;
  padding: 0 var(--espacio-2);
}

.tesoreria-board-column__meta {
  border-bottom: 1px solid var(--color-borde);
  padding: var(--espacio-2) var(--espacio-3);
}

.tesoreria-board-list {
  display: grid;
  gap: var(--espacio-3);
  overflow-y: auto;
  padding: var(--espacio-3);
}

.tesoreria-board-list.is-drop-target {
  background: var(--color-interactivo-medio);
}

.tesoreria-board-card {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
}

.tesoreria-board-card.is-dragging {
  opacity: 0.55;
}

.tesoreria-board-card.is-overdue {
  border-color: var(--color-status-danger-border);
}

.tesoreria-board-card__top,
.tesoreria-board-card__footer,
.tesoreria-board-card__actions {
  align-items: center;
  display: flex;
  gap: var(--espacio-2);
  justify-content: space-between;
}

.tesoreria-board-card__top strong {
  line-height: 1.25;
  min-width: 0;
}

.tesoreria-board-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1);
}

.tesoreria-board-card__tags span {
  background: var(--color-interactivo-medio);
  border-radius: var(--radio-pill);
  color: var(--color-texto-secundario);
  font-size: 0.72rem;
  padding: 3px var(--espacio-2);
}

.tesoreria-board-card__numbers {
  display: grid;
  gap: var(--espacio-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.tesoreria-board-card__numbers div {
  border-top: 1px solid var(--color-borde);
  padding-top: var(--espacio-2);
}

.tesoreria-board-card__numbers dt,
.tesoreria-board-card__footer span {
  color: var(--color-texto-secundario);
  font-size: 0.72rem;
}

.tesoreria-board-card__numbers dd {
  font-weight: 760;
  margin: 2px 0 0;
}

.tesoreria-board-card__footer {
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
}

.tesoreria-board-card__actions {
  justify-content: flex-start;
}

.tesoreria-board-panel[hidden],
.tesoreria-recurrence-form [hidden] {
  display: none !important;
}

.tesoreria-budget-summary {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tesoreria-budget-summary div {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-card);
  padding: var(--espacio-3);
}

.tesoreria-budget-summary span,
.tesoreria-budget-summary strong {
  display: block;
}

.tesoreria-budget-summary span {
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
}

.tesoreria-budget-summary strong {
  font-size: 1.15rem;
  margin-top: var(--espacio-1);
}

.tesoreria-budget-copy {
  align-items: center;
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto) auto;
}

.tesoreria-budget-table td {
  min-width: 120px;
}

.app-alert--success {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.app-alert--danger {
  background: var(--color-status-danger-bg);
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-text);
}

.app-alert--info {
  background: var(--color-interactivo-medio);
  border-color: var(--color-borde);
  color: var(--color-texto);
}

@media (max-width: 980px) {
  .tesoreria-landing {
    grid-template-columns: 1fr;
  }
  .tesoreria-category-name {
    min-width: 180px;
  }
  .tesoreria-category-visual-grid {
    grid-template-columns: 1fr;
  }
  .tesoreria-metrics,
  .tesoreria-metrics-grid,
  .tesoreria-detail-grid,
  .tesoreria-payment-summary,
  .tesoreria-budget-summary,
  .tesoreria-budget-copy,
  .tesoreria-filter-card .app-form-grid--4 {
    grid-template-columns: 1fr;
  }
  .tesoreria-board {
    grid-auto-columns: minmax(280px, 86vw);
  }
  .tesoreria-board-column {
    max-height: none;
  }
  .tesoreria-payment-application {
    grid-template-columns: 1fr;
  }
  .tesoreria-expense-filters__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tesoreria-expense-filters__search {
    grid-column: 1/-1;
  }
  .tesoreria-expense-filters__actions {
    align-self: end;
  }
  .tesoreria-expense-group__summary {
    grid-template-columns: minmax(220px, 1fr) 28px;
  }
  .tesoreria-expense-group__metrics {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .tesoreria-expense-group__chevron {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 560px) {
  .tesoreria-color-picker {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .tesoreria-category-preview {
    height: 72px;
    width: 72px;
  }
  .tesoreria-color-palette {
    grid-template-columns: repeat(6, 24px);
  }
  .tesoreria-color-swatch {
    height: 24px;
    width: 24px;
  }
  .tesoreria-icon-dialog {
    max-height: calc(100vh - 20px);
    width: calc(100vw - 20px);
  }
  .tesoreria-icon-dialog__header,
  .tesoreria-icon-dialog__footer {
    padding: var(--espacio-3);
  }
  .tesoreria-icon-dialog__search {
    padding: var(--espacio-3);
  }
  .tesoreria-icon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 var(--espacio-3) var(--espacio-3);
  }
}
@media (max-width: 720px) {
  .tesoreria-month-nav {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    margin-inline: calc(var(--espacio-4) * -1);
    padding-inline: 0;
  }
  .tesoreria-month-nav__track {
    padding-inline: calc(50% - 70px);
  }
  .tesoreria-month-nav__item {
    flex-basis: 140px;
    min-height: 96px;
  }
  .tesoreria-month-nav__item strong {
    font-size: 1.15rem;
  }
  .tesoreria-month-nav__item.is-current strong {
    font-size: 1.45rem;
  }
  .tesoreria-expense-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tesoreria-expense-overview > div:nth-child(3) {
    border-left: 0;
  }
  .tesoreria-expense-overview > div:nth-child(n+3) {
    border-top: 1px solid var(--color-borde-suave);
  }
  .tesoreria-expense-overview strong {
    font-size: 1.05rem;
  }
  .tesoreria-expense-filters {
    padding: var(--espacio-3);
  }
  .tesoreria-expense-filters__grid {
    grid-template-columns: 1fr;
  }
  .tesoreria-expense-filters__search {
    grid-column: auto;
  }
  .tesoreria-expense-filters__actions {
    justify-content: flex-end;
  }
  .tesoreria-expense-group__summary {
    gap: var(--espacio-3);
    grid-template-columns: minmax(0, 1fr) 24px;
    padding: var(--espacio-3);
  }
  .tesoreria-expense-group__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .tesoreria-expense-group__metrics > span {
    background: var(--color-interactivo-suave);
    border-radius: var(--radio-sm);
    padding: var(--espacio-2);
  }
  .tesoreria-expense-table--grouped {
    min-width: 0;
  }
  .tesoreria-expense-table--grouped thead {
    display: none;
  }
  .tesoreria-expense-table--grouped tbody,
  .tesoreria-expense-table--grouped tr {
    display: grid;
  }
  .tesoreria-expense-table--grouped tr {
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--espacio-3);
  }
  .tesoreria-expense-table--grouped tr + tr {
    border-top: 1px solid var(--color-borde-suave);
  }
  .tesoreria-expense-table--grouped td,
  .tesoreria-expense-table--grouped th:first-child,
  .tesoreria-expense-table--grouped td:first-child,
  .tesoreria-expense-table--grouped th:last-child,
  .tesoreria-expense-table--grouped td:last-child {
    border: 0;
    min-width: 0;
    padding: var(--espacio-2);
  }
  .tesoreria-expense-table--grouped td {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
  }
  .tesoreria-expense-table--grouped td::before {
    color: var(--color-texto-tenue);
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
  }
  .tesoreria-expense-table--grouped .tesoreria-expense-table__concept,
  .tesoreria-expense-table--grouped td:last-child {
    grid-column: 1/-1;
  }
  .tesoreria-expense-table--grouped .app-table-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .tesoreria-quick-pay-trigger {
    flex: 1 1 auto;
    justify-content: center;
  }
  .tesoreria-quick-pay-modal__optional-fields {
    grid-template-columns: 1fr;
  }
}
.inventario-central-page {
  padding-bottom: 48px;
}

.inventario-central-page .app-detail-view {
  gap: 28px;
}

.inventario-central-page__header {
  align-items: center;
}

.inventario-central-page__header .app-page-header__actions {
  align-items: center;
}

.inventario-section-heading {
  align-items: end;
  display: flex;
  gap: var(--espacio-4);
  justify-content: space-between;
  margin-bottom: var(--espacio-3);
}

.inventario-section-heading .app-section-title {
  margin: 0;
}

.inventario-section-heading p {
  color: var(--color-texto-secundario);
  font-size: 0.86rem;
  margin: var(--espacio-1) 0 0;
}

.inventario-canales-grid {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inventario-canal-card {
  display: flex;
  flex-direction: column;
  min-height: 252px;
  position: relative;
}

.inventario-canal-card::before {
  background: var(--color-borde);
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

.inventario-canal-card--canonical::before {
  background: var(--color-status-success-text);
}

.inventario-canal-card > .app-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.inventario-canal-card > .app-card__footer {
  padding-block: 14px;
}

.inventario-canal-card__header {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
  justify-content: space-between;
}

.inventario-canal-card__icon {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-sm);
  color: var(--color-texto);
  display: inline-flex;
  flex: 0 0 38px;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.inventario-canal-card__icon .app-icon {
  font-size: 20px;
}

.inventario-canal-card__icon .app-icon--brand img {
  filter: grayscale(1);
}

html[data-theme=dark] .inventario-canal-card__icon .app-icon--brand img {
  filter: grayscale(1) invert(1);
}

.inventario-canal-card__identity {
  margin-top: var(--espacio-4);
}

.inventario-canal-card__identity h3 {
  font-size: 0.98rem;
  line-height: 1.3;
  margin: 0;
}

.inventario-canal-card__identity p {
  color: var(--color-texto-secundario);
  font-size: 0.8rem;
  margin: var(--espacio-1) 0 0;
}

.inventario-canal-card__metrics {
  border-top: 1px solid var(--color-borde-suave);
  display: grid;
  gap: var(--espacio-3);
  margin: var(--espacio-4) 0 0;
  padding-top: var(--espacio-4);
}

.inventario-canal-card__metrics div {
  align-items: baseline;
  display: flex;
  gap: var(--espacio-3);
  justify-content: space-between;
}

.inventario-canal-card__metrics dt,
.inventario-canal-card__metrics dd {
  margin: 0;
}

.inventario-canal-card__metrics dt {
  color: var(--color-texto-tenue);
  font-size: 0.74rem;
  font-weight: 700;
}

.inventario-canal-card__metrics dd {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  font-weight: 650;
  text-align: right;
}

.inventario-inline-state {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.inventario-inline-state > span {
  background: currentColor;
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.inventario-inline-state.is-success {
  color: var(--color-status-success-text);
}

.inventario-inline-state.is-muted {
  color: var(--color-texto-tenue);
}

.inventario-canal-card__error {
  align-items: flex-start;
  background: var(--color-status-danger-bg);
  border: 1px solid var(--color-status-danger-border);
  border-radius: var(--radio-sm);
  color: var(--color-status-danger-text);
  display: flex;
  font-size: 0.76rem;
  gap: var(--espacio-2);
  line-height: 1.35;
  margin-top: var(--espacio-3);
  padding: 9px 10px;
}

.inventario-canal-card__error .app-icon {
  flex: 0 0 16px;
  font-size: 16px;
  margin-top: 1px;
}

.inventario-control-grid {
  align-items: stretch;
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
}

.inventario-control-grid > .app-card {
  min-width: 0;
}

.inventario-card-icon {
  color: var(--color-texto-tenue);
  font-size: 22px;
}

.inventario-filtros-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.inventario-filtro-sku {
  grid-column: span 2;
}

.inventario-filtros-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  justify-content: space-between;
}

.inventario-operacion-card {
  height: 100%;
}

.inventario-operacion-card > .app-card__body {
  display: grid;
  gap: var(--espacio-4);
}

.inventario-operacion-metrica {
  align-items: flex-start;
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: 36px minmax(0, 1fr);
}

.inventario-operacion-metrica__icon {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-sm);
  color: var(--color-texto-secundario);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.inventario-operacion-metrica__icon .app-icon {
  font-size: 18px;
}

.inventario-operacion-metrica > div {
  display: grid;
  gap: var(--espacio-1);
  min-width: 0;
}

.inventario-operacion-metrica > div > span {
  color: var(--color-texto-tenue);
  font-size: 0.74rem;
  font-weight: 700;
}

.inventario-operacion-metrica strong {
  color: var(--color-texto);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.inventario-operacion-metrica__success {
  color: var(--color-status-success-text) !important;
}

.inventario-operacion-metrica__badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.inventario-operacion-alerta {
  font-size: 0.78rem;
  margin: 0;
}

.inventario-alertas-card {
  border-color: var(--color-status-danger-border);
}

.inventario-tabla {
  min-width: 820px;
}

.inventario-tabla--comparacion {
  min-width: 980px;
}

.inventario-tabla--alertas {
  min-width: 900px;
}

.inventario-tabla--timeline {
  min-width: 1240px;
}

.inventario-tabla__principal,
.inventario-tabla__secundario {
  display: block;
}

.inventario-tabla__principal {
  color: var(--color-texto);
}

.inventario-tabla__secundario {
  color: var(--color-texto-tenue);
  font-size: 0.76rem;
  margin-top: 3px;
}

.inventario-tabla__detalle {
  line-height: 1.45;
  max-width: 360px;
  white-space: normal;
}

.inventario-tabla__mensaje {
  line-height: 1.45;
  min-width: 320px;
  white-space: normal;
}

.inventario-tabla__cantidad {
  color: var(--color-texto);
  font-variant-numeric: tabular-nums;
  text-align: center !important;
}

.inventario-tabla__fecha {
  color: var(--color-texto-tenue);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inventario-clasificacion-form {
  align-items: center;
  display: flex;
  gap: var(--espacio-2);
  min-width: 270px;
}

.inventario-clasificacion-form .app-input {
  min-width: 150px;
}

.inventario-sku {
  color: var(--color-texto);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  white-space: nowrap;
}

.inventario-delta {
  align-items: center;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  display: inline-flex;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  justify-content: center;
  min-height: 26px;
  min-width: 42px;
  padding: 0 var(--espacio-2);
}

.inventario-delta.is-positive {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.inventario-delta.is-negative {
  background: var(--color-status-danger-bg);
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-text);
}

.inventario-delta.is-neutral {
  background: var(--color-status-neutral-bg);
  color: var(--color-status-neutral-text);
}

.inventario-saldo {
  align-items: center;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  gap: 6px;
  white-space: nowrap;
}

.inventario-saldo .app-icon {
  color: var(--color-texto-tenue);
  font-size: 16px;
}

.inventario-empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inventario-empty > .app-icon {
  color: var(--color-texto-tenue);
  font-size: 28px;
  margin-bottom: 3px;
}

.inventario-empty strong {
  color: var(--color-texto);
}

.inventario-empty span {
  color: var(--color-texto-tenue);
  font-size: 0.8rem;
}

@media (max-width: 1320px) {
  .inventario-canales-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inventario-filtros-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1080px) {
  .inventario-control-grid {
    grid-template-columns: 1fr;
  }
  .inventario-operacion-card > .app-card__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inventario-operacion-alerta {
    grid-column: 1/-1;
  }
}
@media (max-width: 720px) {
  .inventario-central-page {
    padding-bottom: var(--espacio-6);
  }
  .inventario-central-page .app-detail-view {
    gap: var(--espacio-5);
  }
  .inventario-section-heading {
    align-items: flex-start;
  }
  .inventario-canales-grid,
  .inventario-operacion-card > .app-card__body {
    grid-template-columns: 1fr;
  }
  .inventario-canal-card {
    min-height: auto;
  }
  .inventario-filtros-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inventario-filtro-sku {
    grid-column: 1/-1;
  }
  .inventario-filtros-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .inventario-filtros-actions .app-actions,
  .inventario-filtros-actions .app-button {
    width: 100%;
  }
  .inventario-filtros-actions .app-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .inventario-clasificacion-form {
    align-items: stretch;
    flex-direction: column;
    min-width: 180px;
  }
}
@media (max-width: 480px) {
  .inventario-filtros-grid {
    grid-template-columns: 1fr;
  }
  .inventario-filtro-sku {
    grid-column: auto;
  }
  .inventario-canal-card__metrics div {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--espacio-1);
  }
  .inventario-canal-card__metrics dd {
    text-align: left;
  }
}
/* Navegación y resumen comprensible */
.inventario-tabs {
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-md);
  display: flex;
  gap: var(--espacio-1);
  overflow-x: auto;
  padding: var(--espacio-1);
}

.inventario-tabs__item {
  align-items: center;
  border-radius: var(--radio-sm);
  color: var(--color-texto-secundario);
  display: inline-flex;
  flex: 1 0 auto;
  font-size: 0.86rem;
  font-weight: 700;
  gap: var(--espacio-2);
  justify-content: center;
  min-height: 42px;
  padding: 0 var(--espacio-4);
  text-decoration: none;
}

.inventario-tabs__item:hover {
  background: var(--color-superficie-hover);
  color: var(--color-texto);
}

.inventario-tabs__item.is-active {
  background: var(--color-superficie);
  box-shadow: var(--sombra-nav-activo);
  color: var(--color-texto);
}

.inventario-tabs__item .app-icon {
  font-size: 18px;
}

.inventario-tabs__count {
  align-items: center;
  background: var(--color-status-danger-bg);
  border-radius: var(--radio-pill);
  color: var(--color-status-danger-text);
  display: inline-flex;
  font-size: 0.7rem;
  justify-content: center;
  min-width: 22px;
  padding: 2px 6px;
}

.inventario-overview {
  display: grid;
  gap: var(--espacio-4);
}

.inventario-status-hero {
  align-items: center;
  display: grid;
  gap: var(--espacio-5);
  grid-template-columns: auto minmax(0, 1fr) minmax(270px, auto);
  overflow: hidden;
  padding: var(--espacio-5);
  position: relative;
}

.inventario-status-hero::before {
  background: var(--color-borde);
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 4px;
}

.inventario-status-hero--success::before {
  background: var(--color-status-success-text);
}

.inventario-status-hero--warning::before {
  background: var(--color-status-warning-text);
}

.inventario-status-hero--danger::before {
  background: var(--color-status-danger-text);
}

.inventario-status-hero__icon {
  align-items: center;
  background: var(--color-status-neutral-bg);
  border-radius: 50%;
  display: inline-flex;
  height: 54px;
  justify-content: center;
  width: 54px;
}

.inventario-status-hero--success .inventario-status-hero__icon {
  background: var(--color-status-success-bg);
  color: var(--color-status-success-text);
}

.inventario-status-hero--warning .inventario-status-hero__icon {
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning-text);
}

.inventario-status-hero--danger .inventario-status-hero__icon {
  background: var(--color-status-danger-bg);
  color: var(--color-status-danger-text);
}

.inventario-status-hero__icon .app-icon {
  font-size: 28px;
}

.inventario-status-hero__content > span,
.inventario-incidente__eyebrow {
  color: var(--color-texto-tenue);
  display: block;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inventario-status-hero__content h2 {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  margin: var(--espacio-1) 0;
}

.inventario-status-hero__content p,
.inventario-flow-card p,
.inventario-overview-problem p,
.inventario-diagnostic-card p {
  color: var(--color-texto-secundario);
  line-height: 1.5;
  margin: 0;
}

.inventario-status-hero__dates {
  border-left: 1px solid var(--color-borde-suave);
  display: grid;
  gap: var(--espacio-3);
  margin: 0;
  padding-left: var(--espacio-5);
}

.inventario-status-hero__dates div,
.inventario-flow-card dl div {
  display: grid;
  gap: 2px;
}

.inventario-status-hero__dates dt,
.inventario-flow-card dt {
  color: var(--color-texto-tenue);
  font-size: 0.72rem;
  font-weight: 700;
}

.inventario-status-hero__dates dd,
.inventario-flow-card dd {
  font-size: 0.82rem;
  font-weight: 720;
  margin: 0;
}

.inventario-summary-metrics {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inventario-summary-metric {
  color: inherit;
  display: grid;
  gap: var(--espacio-1);
  padding: var(--espacio-4);
  text-decoration: none;
}

.inventario-summary-metric:hover {
  border-color: var(--color-borde);
}

.inventario-summary-metric > span {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  font-weight: 720;
}

.inventario-summary-metric strong {
  font-size: 1.7rem;
  line-height: 1.15;
}

.inventario-summary-metric small {
  color: var(--color-texto-tenue);
  line-height: 1.4;
}

.inventario-summary-metric.is-urgent strong {
  color: var(--color-status-danger-text);
}

.inventario-summary-metric.is-error strong {
  color: var(--color-status-warning-text);
}

.inventario-flow-grid,
.inventario-overview-problems,
.inventario-diagnostic-grid {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inventario-flow-card > .app-card__body,
.inventario-diagnostic-card > .app-card__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.inventario-flow-card__top,
.inventario-diagnostic-card__top {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.inventario-flow-card__icon {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-sm);
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.inventario-flow-card h3,
.inventario-diagnostic-card h3 {
  font-size: 1rem;
  margin: var(--espacio-4) 0 var(--espacio-1);
}

.inventario-flow-card dl {
  border-top: 1px solid var(--color-borde-suave);
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: auto 0 0;
  padding-top: var(--espacio-4);
}

.inventario-flow-card p {
  margin-bottom: var(--espacio-4);
}

.inventario-overview-problem {
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  text-decoration: none;
}

.inventario-overview-problem:hover {
  border-color: var(--color-borde);
}

.inventario-overview-problem .app-status {
  align-self: flex-start;
}

.inventario-overview-problem__footer {
  color: var(--color-texto-tenue);
  font-size: 0.74rem;
  margin-top: auto;
}

.inventario-friendly-empty {
  align-items: center;
  color: var(--color-texto-secundario);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  justify-content: center;
  min-height: 180px;
  padding: var(--espacio-6);
  text-align: center;
}

.inventario-friendly-empty > .app-icon {
  color: var(--color-status-success-text);
  font-size: 32px;
}

.inventario-friendly-empty strong {
  color: var(--color-texto);
}

/* Problemas e incidentes */
.inventario-section-heading--top {
  align-items: center;
  margin-bottom: 0;
}

.inventario-problem-state {
  border-bottom: 1px solid var(--color-borde-suave);
  display: flex;
  gap: var(--espacio-5);
}

.inventario-problem-state a {
  border-bottom: 2px solid transparent;
  color: var(--color-texto-secundario);
  font-size: 0.85rem;
  font-weight: 720;
  padding: var(--espacio-3) 2px;
  text-decoration: none;
}

.inventario-problem-state a.is-active {
  border-color: var(--color-texto);
  color: var(--color-texto);
}

.inventario-problem-filters__grid {
  grid-template-columns: minmax(250px, 2fr) repeat(3, minmax(160px, 1fr));
}

.inventario-problem-filters__actions {
  display: flex;
  gap: var(--espacio-2);
  margin-top: var(--espacio-4);
}

.inventario-problems-list {
  display: grid;
  gap: var(--espacio-4);
}

.inventario-problema {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-suave);
  border-left: 4px solid var(--color-borde);
  border-radius: var(--radio-md);
  overflow: clip;
}

.inventario-problema--danger {
  border-left-color: var(--color-status-danger-text);
}

.inventario-problema--warning {
  border-left-color: var(--color-status-warning-text);
}

.inventario-problema__summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  list-style: none;
  padding: var(--espacio-4);
}

.inventario-problema__summary::-webkit-details-marker,
.inventario-advanced-settings > summary::-webkit-details-marker {
  display: none;
}

.inventario-problema__summary:hover {
  background: var(--color-superficie-hover);
}

.inventario-problema__heading {
  display: grid;
  gap: 3px;
}

.inventario-problema__heading strong {
  font-size: 0.95rem;
}

.inventario-problema__heading span {
  color: var(--color-texto-secundario);
  font-size: 0.8rem;
  line-height: 1.45;
}

.inventario-problema__meta {
  display: grid;
  gap: 2px;
  text-align: right;
}

.inventario-problema__meta strong {
  font-size: 0.78rem;
}

.inventario-problema__meta span {
  color: var(--color-texto-tenue);
  font-size: 0.72rem;
}

.inventario-problema__chevron {
  transition: transform 160ms ease;
}

.inventario-problema[open] .inventario-problema__chevron {
  transform: rotate(180deg);
}

.inventario-problema__body {
  border-top: 1px solid var(--color-borde-suave);
  display: grid;
  gap: var(--espacio-4);
  padding: var(--espacio-4);
}

.inventario-problema__guia {
  background: var(--color-superficie-panel);
  border-radius: var(--radio-sm);
  display: grid;
  gap: var(--espacio-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--espacio-4);
}

.inventario-problema__guia p,
.inventario-problema__guia ol {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
  line-height: 1.55;
  margin: var(--espacio-2) 0 0;
}

.inventario-problema__guia ol {
  padding-left: 1.2rem;
}

.inventario-problema__casos {
  display: grid;
  gap: var(--espacio-3);
}

.inventario-incidente {
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-sm);
  display: grid;
  gap: var(--espacio-4);
  padding: var(--espacio-4);
  scroll-margin-top: 90px;
}

.inventario-incidente.is-selected {
  box-shadow: 0 0 0 2px var(--color-status-warning-border);
}

.inventario-incidente__main {
  display: grid;
  gap: var(--espacio-5);
  grid-template-columns: minmax(0, 1fr) auto;
}

.inventario-incidente h3 {
  font-size: 0.98rem;
  margin: var(--espacio-1) 0;
}

.inventario-incidente__main p {
  color: var(--color-texto-secundario);
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 0;
}

.inventario-incidente__facts {
  display: grid;
  gap: var(--espacio-2);
  grid-template-columns: repeat(2, minmax(110px, auto));
  margin: 0;
}

.inventario-incidente__facts div {
  display: grid;
  gap: 2px;
}

.inventario-incidente__facts dt {
  color: var(--color-texto-tenue);
  font-size: 0.68rem;
  font-weight: 700;
}

.inventario-incidente__facts dd {
  font-size: 0.76rem;
  font-weight: 680;
  margin: 0;
}

.inventario-incidente__links,
.inventario-incidente__attention {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.inventario-incidente__affected {
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-sm);
  font-size: 0.8rem;
  padding: var(--espacio-3);
}

.inventario-incidente__affected > strong,
.inventario-incidente__affected > summary {
  color: var(--color-texto-principal);
  font-weight: 700;
}

.inventario-incidente__affected > summary {
  cursor: pointer;
}

.inventario-incidente__affected ul {
  display: grid;
  gap: var(--espacio-2);
  list-style: none;
  margin: var(--espacio-3) 0 0;
  padding: 0;
}

.inventario-incidente__affected li {
  align-items: center;
  border-top: 1px solid var(--color-borde-suave);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-4);
  justify-content: space-between;
  padding-top: var(--espacio-2);
}

.inventario-incidente__affected a {
  color: var(--color-acento);
  font-weight: 650;
  text-decoration: underline;
}

.inventario-incidente__affected small {
  color: var(--color-texto-tenue);
}

.inventario-incidente__attention {
  background: var(--color-status-neutral-bg);
  border: 1px solid var(--color-status-neutral-border);
  border-radius: var(--radio-sm);
  color: var(--color-status-neutral-text);
  font-size: 0.76rem;
  padding: var(--espacio-3);
}

.inventario-incidente__attention span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.inventario-incidente__attention .app-icon {
  font-size: 16px;
}

.inventario-incidente__actions {
  border-top: 1px solid var(--color-borde-suave);
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: var(--espacio-4);
}

.inventario-incidente__actions form {
  align-content: start;
  display: grid;
  gap: var(--espacio-2);
}

.inventario-incidente__actions label {
  align-items: center;
  display: grid;
  font-size: 0.72rem;
  gap: var(--espacio-1);
  grid-template-columns: auto minmax(100px, 1fr);
}

.inventario-incidente__actions small {
  color: var(--color-texto-tenue);
  line-height: 1.4;
}

.inventario-incidente__actions .app-button {
  justify-content: center;
}

.inventario-incidente__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4);
}

.inventario-incidente__details details,
.inventario-inline-details {
  color: var(--color-texto-secundario);
  font-size: 0.76rem;
}

.inventario-incidente__details summary,
.inventario-inline-details summary {
  color: var(--color-texto-secundario);
  cursor: pointer;
  font-weight: 680;
}

.inventario-incidente__timeline {
  display: grid;
  gap: var(--espacio-2);
  list-style: none;
  margin: var(--espacio-3) 0 0;
  padding: 0;
}

.inventario-incidente__timeline li {
  border-left: 2px solid var(--color-borde);
  display: grid;
  gap: 2px;
  padding-left: var(--espacio-3);
}

.inventario-incidente__timeline span {
  color: var(--color-texto-tenue);
}

.inventario-incidente__technical {
  display: grid;
  gap: var(--espacio-2);
  margin: var(--espacio-3) 0 0;
  max-width: 720px;
}

.inventario-incidente__technical div {
  display: grid;
  gap: 2px;
}

.inventario-incidente__technical dt {
  color: var(--color-texto-tenue);
  font-weight: 700;
}

.inventario-incidente__technical dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Diagnóstico */
.inventario-diagnostic-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inventario-diagnostic-card strong {
  font-size: 0.82rem;
  margin-top: var(--espacio-4);
}

.inventario-diagnostic-card .inventario-inline-details {
  margin-top: var(--espacio-4);
}

.inventario-diagnostic-card dl {
  display: grid;
  gap: var(--espacio-2);
}

.inventario-diagnostic-card dl div {
  display: grid;
  gap: 2px;
}

.inventario-diagnostic-card dt {
  color: var(--color-texto-tenue);
  font-weight: 700;
}

.inventario-diagnostic-card dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.inventario-queue-metrics {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inventario-queue-metrics div {
  background: var(--color-superficie-panel);
  border-radius: var(--radio-sm);
  display: grid;
  gap: var(--espacio-1);
  padding: var(--espacio-3);
}

.inventario-queue-metrics span {
  color: var(--color-texto-secundario);
  font-size: 0.76rem;
}

.inventario-queue-metrics strong {
  font-size: 1.2rem;
}

.inventario-canales-grid--diagnostic {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inventario-channel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.inventario-advanced-settings {
  overflow: clip;
}

.inventario-advanced-settings > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: var(--espacio-4);
}

.inventario-advanced-settings > summary span {
  display: grid;
  gap: 3px;
}

.inventario-advanced-settings > summary small {
  color: var(--color-texto-tenue);
  font-weight: 400;
}

.inventario-advanced-settings[open] > summary .app-icon {
  transform: rotate(180deg);
}

.inventario-advanced-settings > .app-card__body {
  border-top: 1px solid var(--color-borde-suave);
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: minmax(0, 1fr) auto;
}

.inventario-advanced-settings p {
  color: var(--color-texto-secundario);
  margin: var(--espacio-1) 0 0;
}

.inventario-inline-details > span {
  display: block;
  line-height: 1.5;
  margin-top: var(--espacio-2);
  max-width: 360px;
}

@media (max-width: 1180px) {
  .inventario-flow-grid,
  .inventario-diagnostic-grid,
  .inventario-canales-grid--diagnostic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inventario-problem-filters__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inventario-problem-filters__search {
    grid-column: span 2;
  }
}
@media (max-width: 720px) {
  .inventario-central-page__header {
    align-items: stretch;
  }
  .inventario-central-page__header form,
  .inventario-central-page__header .app-button {
    width: 100%;
  }
  .inventario-tabs {
    justify-content: flex-start;
  }
  .inventario-tabs__item {
    flex: 0 0 auto;
    padding-inline: var(--espacio-3);
  }
  .inventario-status-hero {
    align-items: flex-start;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .inventario-status-hero__dates {
    border-left: 0;
    border-top: 1px solid var(--color-borde-suave);
    grid-column: 1/-1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--espacio-4) 0 0;
  }
  .inventario-summary-metrics,
  .inventario-flow-grid,
  .inventario-overview-problems,
  .inventario-diagnostic-grid,
  .inventario-canales-grid--diagnostic,
  .inventario-queue-metrics {
    grid-template-columns: 1fr;
  }
  .inventario-problema__summary {
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .inventario-problema__summary > .app-status {
    grid-column: 1/-1;
    justify-self: start;
  }
  .inventario-problema__meta {
    grid-column: 1;
    text-align: left;
  }
  .inventario-problema__chevron {
    grid-column: 2;
    grid-row: 2/span 2;
  }
  .inventario-problema__guia,
  .inventario-incidente__main,
  .inventario-incidente__actions,
  .inventario-advanced-settings > .app-card__body {
    grid-template-columns: 1fr;
  }
  .inventario-incidente__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inventario-incidente__links .app-button {
    width: 100%;
  }
  .inventario-problem-filters__grid {
    grid-template-columns: 1fr;
  }
  .inventario-problem-filters__search {
    grid-column: auto;
  }
  .inventario-problem-filters__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .inventario-problem-filters__actions .app-button {
    width: 100%;
  }
  .inventario-responsive-table {
    min-width: 0;
  }
  .inventario-responsive-table thead {
    display: none;
  }
  .inventario-responsive-table,
  .inventario-responsive-table tbody,
  .inventario-responsive-table tr,
  .inventario-responsive-table td {
    display: block;
    width: 100%;
  }
  .inventario-responsive-table tr {
    border-bottom: 1px solid var(--color-borde);
    padding: var(--espacio-3);
  }
  .inventario-responsive-table td {
    align-items: flex-start;
    border: 0;
    display: flex;
    gap: var(--espacio-3);
    justify-content: space-between;
    padding: var(--espacio-2) 0;
    text-align: right;
    white-space: normal;
  }
  .inventario-responsive-table td::before {
    color: var(--color-texto-tenue);
    content: attr(data-label);
    flex: 0 0 34%;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: left;
  }
  .inventario-responsive-table td[colspan] {
    align-items: center;
    text-align: center;
  }
  .inventario-responsive-table td[colspan]::before {
    display: none;
  }
  .inventario-responsive-table .inventario-clasificacion-form {
    margin-left: auto;
  }
}
@media (max-width: 480px) {
  .inventario-status-hero {
    grid-template-columns: 1fr;
  }
  .inventario-status-hero__dates {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .inventario-incidente__facts {
    grid-template-columns: 1fr;
  }
  .inventario-problem-state {
    gap: var(--espacio-3);
  }
}
.contraentrega-page {
  padding-bottom: 48px;
}

.contraentrega-page .app-detail-view {
  gap: 28px;
}

.contraentrega-page__header {
  align-items: center;
}

.contraentrega-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}

.contraentrega-title-row .app-page-title {
  margin: 0;
}

.contraentrega-section-heading {
  align-items: end;
  display: flex;
  gap: var(--espacio-4);
  justify-content: space-between;
  margin-bottom: var(--espacio-3);
}

.contraentrega-section-heading h2,
.contraentrega-section-heading p {
  margin: 0;
}

.contraentrega-section-heading p,
.contraentrega-page .app-card__header p {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
  margin-top: var(--espacio-1);
}

.contraentrega-health-grid,
.contraentrega-kpi-grid {
  display: grid;
  gap: var(--espacio-4);
}

.contraentrega-health-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contraentrega-health-card {
  min-height: 184px;
  overflow: hidden;
  position: relative;
}

.contraentrega-health-card::before {
  background: var(--color-status-warning-text);
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

.contraentrega-health-card.is-ready::before {
  background: var(--color-status-success-text);
}

.contraentrega-health-card__top {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.contraentrega-health-card__icon {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-sm);
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.contraentrega-health-dot {
  background: var(--color-status-warning-text);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--color-status-warning-bg);
  height: 8px;
  width: 8px;
}

.is-ready .contraentrega-health-dot {
  background: var(--color-status-success-text);
  box-shadow: 0 0 0 4px var(--color-status-success-bg);
}

.contraentrega-health-card h3 {
  font-size: 0.98rem;
  margin: var(--espacio-5) 0 var(--espacio-1);
}

.contraentrega-health-card p {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0;
}

.contraentrega-inline-state {
  color: var(--color-status-warning-text);
  display: block;
  font-size: 0.74rem;
  font-weight: 750;
  margin-top: var(--espacio-4);
}

.is-ready .contraentrega-inline-state {
  color: var(--color-status-success-text);
}

.contraentrega-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.contraentrega-kpi {
  padding: var(--espacio-4);
}

.contraentrega-kpi > span,
.contraentrega-kpi > small {
  color: var(--color-texto-secundario);
  display: block;
  font-size: 0.74rem;
}

.contraentrega-kpi > span {
  font-weight: 720;
}

.contraentrega-kpi > strong {
  display: block;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  letter-spacing: -0.04em;
  margin: var(--espacio-2) 0;
}

.contraentrega-control-grid,
.contraentrega-config-grid,
.contraentrega-store-grid,
.contraentrega-detail-grid {
  display: grid;
  gap: var(--espacio-4);
}

.contraentrega-control-grid {
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
}

.contraentrega-filter-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.contraentrega-filter-search {
  grid-column: span 2;
}

.contraentrega-form-actions,
.contraentrega-config-actions,
.contraentrega-detail-actions,
.contraentrega-page .app-page-header__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}

.contraentrega-form-actions {
  justify-content: flex-end;
  margin-top: var(--espacio-4);
}

.contraentrega-history-form {
  display: grid;
  gap: var(--espacio-4);
}

.contraentrega-history-form .app-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contraentrega-table td {
  min-width: 145px;
  vertical-align: middle;
}

.contraentrega-table td:last-child {
  min-width: 48px;
  text-align: right;
  width: 48px;
}

.contraentrega-table td strong,
.contraentrega-table td small {
  display: block;
}

.contraentrega-table td small {
  color: var(--color-texto-secundario);
  font-size: 0.74rem;
  line-height: 1.4;
  margin-top: 3px;
}

.contraentrega-table__reason {
  max-width: 250px;
}

.contraentrega-worker-state {
  align-items: center;
  color: var(--color-texto-secundario);
  display: inline-flex;
  font-size: 0.76rem;
  gap: var(--espacio-2);
}

.contraentrega-empty {
  align-items: center;
  color: var(--color-texto-secundario);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  justify-content: center;
  min-height: 220px;
  text-align: center;
}

.contraentrega-empty > .app-icon {
  color: var(--color-texto-tenue);
  font-size: 32px;
}

.contraentrega-empty strong {
  color: var(--color-texto);
}

.contraentrega-mode-card > .app-card__body {
  align-items: center;
  display: flex;
  gap: var(--espacio-5);
  justify-content: space-between;
}

.contraentrega-mode-card h2,
.contraentrega-mode-card p {
  margin: 0;
}

.contraentrega-mode-card p {
  color: var(--color-texto-secundario);
  font-size: 0.84rem;
  margin-top: var(--espacio-2);
}

.contraentrega-eyebrow {
  color: var(--color-texto-tenue);
  display: block;
  font-size: 0.7rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  margin-bottom: var(--espacio-2);
  text-transform: uppercase;
}

.contraentrega-config-form {
  display: grid;
  gap: 28px;
}

.contraentrega-config-grid,
.contraentrega-store-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contraentrega-secret-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contraentrega-field-wide {
  grid-column: 1/-1;
}

.contraentrega-config-actions {
  justify-content: flex-end;
}

.contraentrega-test-form {
  align-items: center;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  width: fit-content;
}

.contraentrega-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contraentrega-platform-card {
  min-width: 0;
}

.contraentrega-data-list {
  display: grid;
  gap: var(--espacio-3);
  margin: 0;
}

.contraentrega-data-list > div {
  align-items: start;
  border-bottom: 1px solid var(--color-borde-suave);
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.4fr);
  padding-bottom: var(--espacio-3);
}

.contraentrega-data-list > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.contraentrega-data-list dt,
.contraentrega-data-list dd {
  margin: 0;
}

.contraentrega-data-list dt {
  color: var(--color-texto-tenue);
  font-size: 0.72rem;
  font-weight: 720;
}

.contraentrega-data-list dd {
  font-size: 0.8rem;
  overflow-wrap: anywhere;
  text-align: right;
}

.contraentrega-decision {
  display: grid;
  gap: var(--espacio-6);
}

.contraentrega-approval {
  background: color-mix(in srgb, var(--color-status-success-bg) 58%, var(--color-superficie-tarjeta));
  border: 1px solid var(--color-status-success-border);
  border-radius: var(--radio-md);
  display: grid;
  gap: var(--espacio-5);
  padding: var(--espacio-5);
}

.contraentrega-approval__intro {
  align-items: start;
  display: flex;
  gap: var(--espacio-4);
  justify-content: space-between;
}

.contraentrega-approval__intro h3,
.contraentrega-approval__intro p {
  margin: 0;
}

.contraentrega-approval__intro h3 {
  font-size: 0.94rem;
}

.contraentrega-approval__intro p {
  color: var(--color-texto-secundario);
  font-size: 0.8rem;
  line-height: 1.5;
  margin-top: var(--espacio-2);
  max-width: 820px;
}

.contraentrega-approval__icon {
  color: var(--color-status-success-text);
  flex: 0 0 auto;
}

.contraentrega-approval__form {
  display: grid;
  gap: var(--espacio-4);
}

.contraentrega-detail-actions {
  border-top: 1px solid var(--color-borde-suave);
  padding-top: var(--espacio-5);
}

.contraentrega-ignore-form {
  align-items: end;
  display: flex;
  flex: 1;
  gap: var(--espacio-3);
}

.contraentrega-ignore-form .app-field {
  flex: 1;
}

.contraentrega-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contraentrega-timeline li {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: 14px minmax(0, 1fr);
  padding-bottom: var(--espacio-5);
  position: relative;
}

.contraentrega-timeline li:not(:last-child)::before {
  background: var(--color-borde);
  content: "";
  left: 6px;
  position: absolute;
  top: 14px;
  bottom: 0;
  width: 1px;
}

.contraentrega-timeline__dot {
  background: var(--color-texto);
  border: 3px solid var(--color-superficie);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-borde-fuerte);
  height: 13px;
  margin-top: 3px;
  width: 13px;
  z-index: 1;
}

.contraentrega-timeline__top {
  align-items: baseline;
  display: flex;
  gap: var(--espacio-4);
  justify-content: space-between;
}

.contraentrega-timeline p,
.contraentrega-timeline small {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  margin: var(--espacio-1) 0 0;
}

.contraentrega-timeline time {
  color: var(--color-texto-tenue);
  font-size: 0.72rem;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .contraentrega-health-grid,
  .contraentrega-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contraentrega-detail-grid {
    grid-template-columns: 1fr;
  }
  .contraentrega-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .contraentrega-control-grid,
  .contraentrega-config-grid,
  .contraentrega-store-grid {
    grid-template-columns: 1fr;
  }
  .contraentrega-test-form {
    margin-top: 0;
  }
  .contraentrega-mode-card > .app-card__body,
  .contraentrega-ignore-form,
  .contraentrega-approval__intro {
    align-items: stretch;
    flex-direction: column;
  }
}
@media (max-width: 620px) {
  .contraentrega-health-grid,
  .contraentrega-kpi-grid,
  .contraentrega-filter-grid,
  .contraentrega-secret-grid,
  .contraentrega-history-form .app-form-grid {
    grid-template-columns: 1fr;
  }
  .contraentrega-filter-search,
  .contraentrega-field-wide {
    grid-column: auto;
  }
  .contraentrega-page .app-page-header__actions,
  .contraentrega-page .app-page-header__actions form,
  .contraentrega-page .app-page-header__actions .app-button {
    width: 100%;
  }
  .contraentrega-timeline__top {
    align-items: start;
    flex-direction: column;
    gap: var(--espacio-1);
  }
}
.auth-page {
  min-height: 100dvh;
  overflow-x: hidden;
}

.auth-layout {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: minmax(420px, 0.96fr) minmax(520px, 1.04fr);
  min-height: 100dvh;
  padding: var(--espacio-4);
}

.auth-access {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  padding: var(--espacio-6);
}

.auth-topbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.auth-brand {
  align-items: center;
  color: var(--color-texto);
  display: inline-flex;
  font-size: 1rem;
  font-weight: 800;
  gap: var(--espacio-3);
  text-decoration: none;
}

.auth-brand__logo {
  display: block;
  height: 42px;
  object-fit: contain;
  width: 38px;
}

html[data-theme=dark] .auth-brand__logo {
  filter: invert(1);
}

.auth-theme-toggle .material-symbols-rounded {
  font-size: 20px;
}

.auth-access__content {
  align-items: center;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: var(--espacio-8) 0;
  width: 100%;
}

.auth-card {
  max-width: 460px;
  min-width: 0;
  width: 100%;
}

.auth-card__content {
  min-width: 0;
  padding: 38px;
}

.auth-eyebrow,
.auth-visual__eyebrow {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 var(--espacio-2);
}

.auth-eyebrow {
  color: var(--color-texto-secundario);
}

.auth-title {
  font-size: 2.35rem;
  line-height: 1.08;
  margin: 0;
}

.auth-lead {
  color: var(--color-texto-secundario);
  line-height: 1.55;
  margin: var(--espacio-3) 0 0;
}

.auth-alert {
  align-items: center;
  display: flex;
  gap: var(--espacio-3);
  margin-top: var(--espacio-5);
}

.auth-alert--danger {
  background: var(--color-status-danger-bg);
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-text);
}

.auth-alert__message {
  flex: 1;
  min-width: 0;
}

.auth-alert__close {
  align-items: center;
  background: transparent;
  border: 0;
  color: currentColor;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  padding: 0;
  width: 32px;
}

.auth-alert__close .material-symbols-rounded {
  font-size: 19px;
}

.auth-form {
  display: grid;
  gap: var(--espacio-5);
  margin-top: var(--espacio-7);
  min-width: 0;
}

.auth-input {
  min-width: 0;
  position: relative;
}

.auth-input__icon {
  color: var(--color-texto-tenue);
  font-size: 20px;
  left: 16px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.auth-input__control {
  max-width: 100%;
  min-height: 52px;
  min-width: 0;
  padding-left: 48px;
  padding-right: 48px;
  width: 100%;
}

.auth-input__action {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--color-texto-secundario);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
}

.auth-input__action:hover {
  background: var(--color-interactivo-suave);
  color: var(--color-texto);
}

.auth-input__action .material-symbols-rounded {
  font-size: 20px;
}

.auth-remember {
  color: var(--color-texto-secundario);
  justify-self: start;
}

.auth-submit {
  min-height: 52px;
  width: 100%;
}

.auth-footer {
  color: var(--color-texto-tenue);
  font-size: 0.78rem;
  text-align: center;
}

.auth-visual {
  align-items: flex-end;
  background: url("../img/login-showcase.png") center/cover no-repeat;
  border-radius: var(--radio-card);
  display: flex;
  min-height: calc(100dvh - var(--espacio-4) * 2);
  overflow: hidden;
  position: relative;
}

.auth-visual::before {
  background: rgba(0, 0, 0, 0.5);
  content: "";
  inset: 0;
  position: absolute;
}

.auth-visual__content {
  color: #ffffff;
  max-width: 610px;
  padding: 52px;
  position: relative;
  z-index: 1;
}

.auth-visual__content h2 {
  font-size: 3rem;
  line-height: 1.05;
  margin: 0;
}

.auth-visual__content p:last-child {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: var(--espacio-4) 0 0;
  max-width: 510px;
}

@media (max-width: 1180px) {
  .auth-layout {
    grid-template-columns: minmax(390px, 0.92fr) minmax(440px, 1.08fr);
  }
  .auth-access {
    padding: var(--espacio-5);
  }
  .auth-visual__content {
    padding: 40px;
  }
  .auth-visual__content h2 {
    font-size: 2.55rem;
  }
}
@media (max-width: 1024px) {
  .auth-layout {
    display: block;
    padding: 0;
  }
  .auth-access {
    min-height: 100dvh;
    padding: var(--espacio-5);
  }
  .auth-visual {
    display: none;
  }
}
@media (max-width: 720px) {
  .auth-access {
    padding: var(--espacio-4);
  }
  .auth-access__content {
    padding: var(--espacio-6) 0;
  }
  .auth-card__content {
    padding: 28px 22px;
  }
  .auth-card {
    max-width: 100%;
  }
  .auth-title {
    font-size: 2rem;
  }
}
.facturacion-shopify-table {
  min-width: 1300px;
  table-layout: fixed;
}

.facturacion-shopify-table td:nth-child(2) .app-entity__title,
.facturacion-shopify-table td:nth-child(2) .app-entity__meta,
.facturacion-shopify-table td:nth-child(3) .app-entity__title,
.facturacion-shopify-table td:nth-child(3) .app-entity__meta {
  white-space: nowrap;
}

.usuarios-search {
  flex-basis: min(480px, 100%);
  margin-left: auto;
}

.usuarios-grid {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  padding: var(--espacio-2) 28px 28px;
}

.usuarios-grid > .app-empty-state {
  grid-column: 1/-1;
}

.usuarios-card {
  min-height: 300px;
}

.usuarios-card .app-card__body {
  align-items: center;
  display: grid;
  gap: var(--espacio-4);
  min-height: 100%;
  padding: var(--espacio-4);
  text-align: center;
}

.usuarios-card .app-entity {
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.usuarios-card .app-entity__avatar {
  border: 1px solid var(--color-borde);
  flex-basis: 72px;
  height: 72px;
  overflow: hidden;
  width: 72px;
}

.usuarios-card .app-entity__avatar img,
.usuarios-table .app-entity__avatar img {
  border-radius: inherit;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.usuarios-card .app-entity__body {
  gap: 5px;
  max-width: 100%;
}

.usuarios-card .app-entity__title {
  font-size: 0.96rem;
  font-weight: 800;
}

.usuarios-card .app-entity__meta {
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usuarios-card > .app-card__body > .app-status {
  justify-self: center;
}

.usuarios-card > .app-card__body > .app-check {
  justify-self: center;
}

.usuarios-card__meta {
  color: var(--color-texto-tenue);
  display: grid;
  font-size: 0.72rem;
  gap: 6px;
  width: 100%;
}

.usuarios-card__meta span {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: center;
}

.usuarios-card__meta .app-icon {
  flex: 0 0 14px;
  font-size: 14px;
}

.usuarios-table {
  min-width: 1040px;
}

.usuarios-table .app-entity__avatar {
  overflow: hidden;
}

.usuarios-table .app-check {
  white-space: nowrap;
}

.usuarios-create-card {
  margin-inline: auto;
  max-width: 880px;
  width: 100%;
}

.usuarios-create-card > .app-card__footer .app-button {
  width: 100%;
}

.usuarios-settings-layout {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.65fr);
}

.usuarios-avatar-picker {
  align-items: center;
  border-bottom: 1px solid var(--color-borde-suave);
  display: flex;
  gap: var(--espacio-4);
  margin-bottom: var(--espacio-5);
  padding-bottom: var(--espacio-5);
}

.usuarios-avatar-picker .app-entity__avatar,
.usuarios-profile-header .app-entity__avatar {
  border: 2px solid var(--color-superficie-tarjeta);
  box-shadow: 0 0 0 1px var(--color-borde);
  flex: 0 0 88px;
  height: 88px;
  overflow: hidden;
  width: 88px;
}

.usuarios-avatar-picker .app-entity__avatar img,
.usuarios-profile-header .app-entity__avatar img {
  border-radius: inherit;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.usuarios-avatar-picker__content {
  align-items: flex-start;
  display: grid;
  gap: var(--espacio-2);
}

.usuarios-avatar-picker__content > span {
  color: var(--color-texto-secundario);
  font-size: 0.8rem;
}

.usuarios-profile-header {
  align-items: center;
  display: flex;
  gap: var(--espacio-5);
  justify-content: space-between;
  overflow: visible;
  padding: var(--espacio-5);
}

.usuarios-profile-header__identity {
  align-items: center;
  display: flex;
  gap: var(--espacio-4);
  min-width: 0;
}

.usuarios-login-timeline .app-timeline__item {
  gap: 12px;
  grid-template-columns: 30px minmax(0, 1fr);
}

.usuarios-login-timeline .app-timeline__rail::after {
  inset-block-start: 30px;
}

.usuarios-login-timeline .app-timeline__content {
  border-radius: var(--radio-card);
  padding: 12px 14px;
}

@media (max-width: 1024px) {
  .usuarios-search {
    margin-left: 0;
  }
  .usuarios-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    padding-inline: 18px;
  }
  .usuarios-settings-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .usuarios-grid {
    grid-template-columns: 1fr;
  }
  .usuarios-card {
    min-height: 280px;
  }
  .usuarios-avatar-picker,
  .usuarios-profile-header,
  .usuarios-profile-header__identity {
    align-items: flex-start;
    flex-direction: column;
  }
  .usuarios-profile-header .app-page-header__actions,
  .usuarios-profile-header .app-button {
    width: 100%;
  }
}
.marcas-grid {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  padding: var(--espacio-2) 28px 28px;
}

.marcas-grid > .app-empty-state {
  grid-column: 1/-1;
}

.marcas-card {
  min-height: 286px;
}

.marcas-card .app-card__body {
  align-items: center;
  display: grid;
  gap: var(--espacio-4);
  min-height: 100%;
  padding: var(--espacio-4);
  text-align: center;
}

.marcas-logo {
  align-items: center;
  background: var(--color-superficie-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-card);
  color: var(--color-texto);
  display: inline-flex;
  flex: 0 0 76px;
  font-size: 0.75rem;
  font-weight: 800;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
  width: 76px;
}

.marcas-logo img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.marcas-logo--large {
  font-size: 1.15rem;
  height: 84px;
  justify-self: center;
  width: 148px;
}

.marcas-table {
  min-width: 820px;
}

@media (max-width: 1024px) {
  .marcas-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    padding-inline: 18px;
  }
}
@media (max-width: 640px) {
  .marcas-grid {
    grid-template-columns: 1fr;
  }
}
.app-loader {
  align-items: center;
  color: var(--color-texto);
  display: inline-flex;
  flex-direction: column;
  gap: var(--espacio-3);
  justify-content: center;
  min-width: var(--app-loader-size, 100px);
  text-align: center;
}

.app-loader__canvas {
  color: var(--color-texto);
  display: block;
  flex: 0 0 auto;
  height: var(--app-loader-size, 100px);
  width: var(--app-loader-size, 100px);
}

.app-loader__label {
  color: var(--color-texto-secundario);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.app-loader[data-loader-size="20"] {
  flex-direction: row;
  gap: var(--espacio-2);
  min-width: 0;
}

.app-loader[data-loader-size="20"] .app-loader__label {
  font-size: 0.78rem;
}

.app-loader[hidden] {
  display: none;
}

.is-loader-anchor {
  position: relative;
}

.app-loader-overlay {
  align-items: center;
  background: color-mix(in srgb, var(--color-fondo) 78%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: flex-start;
  padding-top: clamp(48px, 18vh, 200px);
  position: absolute;
  z-index: 60;
}

.app-loader-overlay[hidden] {
  display: none;
}

.dashboard-page {
  --dashboard-gap: var(--espacio-4);
  min-width: 0;
}

.dashboard-page__header {
  align-items: flex-end;
  border-bottom: 1px solid var(--color-borde-suave);
  padding-bottom: var(--espacio-6);
}

.dashboard-eyebrow {
  color: var(--color-texto-tenue);
  font-size: 0.74rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  margin: 0 0 var(--espacio-2);
  text-transform: uppercase;
}

.dashboard-page__actions {
  align-items: center;
}

.dashboard-date-popover {
  z-index: 75;
}

.dashboard-date-trigger {
  align-items: center;
  gap: var(--espacio-2);
  max-width: min(440px, 100%);
  white-space: nowrap;
}

.dashboard-date-trigger__range {
  border-left: 1px solid var(--color-borde);
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  font-weight: 600;
  overflow: hidden;
  padding-left: var(--espacio-2);
  text-overflow: ellipsis;
}

.dashboard-date-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  max-width: min(980px, 100vw - 32px);
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(980px, 100vw - 32px);
  z-index: 920;
}

.dashboard-date-panel__content {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 0;
  padding: 0;
}

.dashboard-date-presets {
  border-right: 1px solid var(--color-borde-suave);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding: var(--espacio-4);
}

.dashboard-date-preset {
  background: transparent;
  border: 0;
  border-radius: var(--radio-sm);
  color: var(--color-texto-secundario);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  min-height: 38px;
  padding: 0 var(--espacio-3);
  text-align: left;
  transition: background var(--transicion-rapida), color var(--transicion-rapida);
}

.dashboard-date-preset:hover,
.dashboard-date-preset.is-active {
  background: var(--color-superficie-hover);
  color: var(--color-texto);
}

.dashboard-date-preset.is-active {
  font-weight: 760;
}

.dashboard-calendar-area {
  min-width: 0;
  padding: var(--espacio-4) var(--espacio-5) var(--espacio-5);
}

.dashboard-calendar-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--espacio-3);
}

.dashboard-calendar-toolbar > span {
  color: var(--color-texto);
  font-size: 0.9rem;
  font-weight: 760;
}

.dashboard-calendars {
  display: grid;
  gap: var(--espacio-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-calendar__heading {
  color: var(--color-texto);
  font-size: 0.92rem;
  font-weight: 760;
  margin: 0 0 var(--espacio-4);
  text-align: center;
}

.dashboard-calendar__weekdays,
.dashboard-calendar__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.dashboard-calendar__weekdays {
  color: var(--color-texto-tenue);
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: var(--espacio-2);
  text-align: center;
}

.dashboard-calendar__day {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radio-sm);
  color: var(--color-texto-secundario);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 0.82rem;
  height: 38px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.dashboard-calendar__day:hover,
.dashboard-calendar__day.is-today {
  background: var(--color-interactivo-hover);
  color: var(--color-texto);
}

.dashboard-calendar__day.is-outside {
  color: var(--color-texto-tenue);
  opacity: 0.6;
}

.dashboard-calendar__day.is-in-range {
  background: var(--color-interactivo-medio);
  border-radius: 0;
}

.dashboard-calendar__day.is-start,
.dashboard-calendar__day.is-end {
  background: var(--color-superficie-contraste);
  border-radius: var(--radio-sm);
  color: var(--color-texto-contraste);
  font-weight: 760;
  z-index: 1;
}

.dashboard-calendar__day.is-disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.dashboard-date-selection {
  align-items: center;
  border-top: 1px solid var(--color-borde-suave);
  color: var(--color-texto-secundario);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4);
  margin-top: var(--espacio-5);
  padding-top: var(--espacio-4);
}

.dashboard-date-selection strong {
  color: var(--color-texto);
  font-weight: 760;
}

.dashboard-date-selection__hint {
  color: var(--color-texto-tenue);
  font-size: 0.78rem;
  margin-left: auto;
}

.dashboard-toolbar {
  align-items: center;
  color: var(--color-texto-secundario);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin: var(--espacio-5) 0;
}

.dashboard-toolbar__summary {
  color: var(--color-texto);
  font-weight: 700;
}

.dashboard-toolbar__timezone,
.dashboard-widget__source {
  color: var(--color-texto-tenue);
  font-size: 0.78rem;
}

.dashboard-toolbar__timezone::before {
  color: var(--color-borde-fuerte);
  content: "·";
  margin-right: var(--espacio-3);
}

.dashboard-toolbar__message {
  color: var(--color-status-danger-text);
  font-size: 0.8rem;
  font-weight: 700;
}

.dashboard-grid {
  min-height: 120px;
  min-width: 0;
  width: 100%;
}

.grid-stack-item-content.dashboard-widget {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  container-type: size;
}

.dashboard-grid.dashboard-editing .dashboard-quick__link {
  pointer-events: none;
}

@keyframes dashboard-skeleton {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.dashboard-widget.is-skeleton [data-kpi-status],
.dashboard-widget.is-skeleton [data-kpi-error],
.dashboard-widget.is-skeleton [data-trend-status],
.dashboard-widget.is-skeleton .dashboard-top__placeholder {
  visibility: hidden !important;
}
.dashboard-widget.is-skeleton .dashboard-kpi__value,
.dashboard-widget.is-skeleton .dashboard-kpi__facts span,
.dashboard-widget.is-skeleton .dashboard-kpi__delta span,
.dashboard-widget.is-skeleton .dashboard-top__name,
.dashboard-widget.is-skeleton .dashboard-top__qty,
.dashboard-widget.is-skeleton .dashboard-commission__name,
.dashboard-widget.is-skeleton .dashboard-commission__total,
.dashboard-widget.is-skeleton .dashboard-commission__line-label,
.dashboard-widget.is-skeleton .dashboard-commission__line-value,
.dashboard-widget.is-skeleton .dashboard-commission__line-sales,
.dashboard-widget.is-skeleton .dashboard-commission__avatar img,
.dashboard-widget.is-skeleton .dashboard-top__imagewrap,
.dashboard-widget.is-skeleton .dashboard-chart {
  animation: dashboard-skeleton 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, var(--color-interactivo-medio) 25%, var(--color-superficie-hover) 50%, var(--color-interactivo-medio) 75%);
  background-size: 200% 100%;
  border-radius: var(--radio-sm);
  color: transparent !important;
}
.dashboard-widget.is-skeleton .dashboard-kpi__value {
  height: 1.7rem;
  width: 65%;
}
.dashboard-widget.is-skeleton .dashboard-commission__total {
  height: 1.4rem;
  width: 55%;
}
.dashboard-widget.is-skeleton .dashboard-top__name {
  height: 1rem;
  width: 80%;
}
.dashboard-widget.is-skeleton .dashboard-kpi__facts span,
.dashboard-widget.is-skeleton .dashboard-kpi__delta span,
.dashboard-widget.is-skeleton .dashboard-top__qty,
.dashboard-widget.is-skeleton .dashboard-commission__name,
.dashboard-widget.is-skeleton .dashboard-commission__line-label,
.dashboard-widget.is-skeleton .dashboard-commission__line-value,
.dashboard-widget.is-skeleton .dashboard-commission__line-sales {
  display: inline-block;
  height: 0.8rem;
  min-width: 48px;
}
.dashboard-widget.is-skeleton .dashboard-kpi__facts span {
  min-width: 90px;
}
.dashboard-widget.is-skeleton .dashboard-commission__name {
  min-width: 60%;
}
.dashboard-widget.is-skeleton .dashboard-commission__avatar img {
  border-color: transparent;
}
.dashboard-widget.is-skeleton .dashboard-top__imagewrap {
  border-radius: var(--radio-lg);
  min-height: 40%;
}

.grid-stack-item-content.dashboard-widget--commission {
  container-type: size;
}

.dashboard-commission__body {
  align-items: center;
  display: flex;
  gap: var(--espacio-4);
  height: 100%;
  min-height: 0;
  padding: var(--espacio-4);
}

.dashboard-commission__avatar {
  flex: 0 0 auto;
}

.dashboard-commission__avatar img {
  aspect-ratio: 1/1;
  background: var(--color-interactivo-medio);
  border: 2px solid var(--color-borde);
  border-radius: 50%;
  height: clamp(60px, 18cqmin, 72px);
  object-fit: cover;
  width: clamp(60px, 18cqmin, 72px);
}

.dashboard-commission__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-width: 0;
}

.dashboard-commission__name {
  color: var(--color-texto-tenue);
  font-size: 0.8rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-commission__total {
  color: var(--color-texto);
  font-size: clamp(1.4rem, 6.5cqmin, 1.9rem);
  font-weight: 780;
  letter-spacing: -0.01em;
  line-height: 1;
}

.dashboard-commission__lines {
  border-top: 1px solid var(--color-borde);
  display: flex;
  gap: var(--espacio-4);
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 4px;
}

.dashboard-commission__line {
  align-items: baseline;
  column-gap: var(--espacio-1);
  display: grid;
  grid-template-columns: auto auto;
  min-width: 0;
}

.dashboard-commission__line-label {
  color: var(--color-texto-tenue);
  font-size: 0.8rem;
  font-weight: 700;
  grid-column: 1;
  grid-row: span 2/span 2;
}

.dashboard-commission__line-value {
  color: var(--color-texto);
  font-size: 0.8rem;
  font-weight: 600;
  grid-column: 2;
  grid-row: 1;
  line-height: 1.1;
}

.dashboard-commission__line-sales {
  color: var(--color-texto-secundario);
  font-size: 0.8rem;
  grid-column: 1/-1;
  grid-row: 2;
  grid-column-start: 2;
  grid-row-start: 2;
  line-height: 1.4;
}

.dashboard-commission__body[data-status=unavailable] .dashboard-commission__total,
.dashboard-commission__body[data-status=unavailable] .dashboard-commission__line-value {
  color: var(--color-texto-tenue);
}

.dashboard-editbar {
  align-items: center;
  background: var(--color-superficie-alta, var(--color-fondo-elevado));
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  color: var(--color-texto-secundario);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  gap: var(--espacio-3);
  justify-content: space-between;
  margin-bottom: var(--espacio-3);
  padding: var(--espacio-2) var(--espacio-4);
}

.dashboard-editbar__mode {
  color: var(--color-texto);
  font-weight: 600;
}

.dashboard-editbar__hint {
  align-items: center;
  display: inline-flex;
  gap: var(--espacio-1);
}

.dashboard-config-overlay {
  align-items: center;
  background: var(--color-overlay, rgba(0, 0, 0, 0.45));
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--espacio-4);
  position: fixed;
  z-index: 400;
}

.dashboard-config-overlay[hidden] {
  display: none;
}

.dashboard-config-modal {
  display: flex;
  flex-direction: column;
  max-height: min(85vh, 720px);
  max-width: 820px;
  width: 100%;
}

.dashboard-config-body {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  overflow: auto;
}

.dashboard-config-section__title {
  font-size: 0.95rem;
  font-weight: 640;
  margin: 0 0 var(--espacio-2);
}

.dashboard-config-section__hint {
  color: var(--color-texto-secundario);
  font-size: 0.8rem;
  margin: 0 0 var(--espacio-2);
}

.dashboard-config-grid-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4);
}

.dashboard-config-grid-fields label {
  align-items: center;
  color: var(--color-texto-secundario);
  display: flex;
  font-size: 0.82rem;
  gap: var(--espacio-2);
}

.dashboard-config-grid-fields input {
  width: 88px;
}

.dashboard-config-table-wrap {
  overflow-x: auto;
}

.dashboard-config-sizes-table {
  border-collapse: collapse;
  width: 100%;
}

.dashboard-config-sizes-table th,
.dashboard-config-sizes-table td {
  border-bottom: 1px solid var(--color-borde-suave);
  padding: var(--espacio-1) var(--espacio-2);
  text-align: center;
  white-space: nowrap;
}

.dashboard-config-sizes-table th:first-child,
.dashboard-config-sizes-table td:first-child {
  text-align: left;
}

.dashboard-config-sizes-table thead th {
  color: var(--color-texto-secundario);
  font-size: 0.76rem;
}

.dashboard-config-sizes-table input {
  width: 60px;
}

.dashboard-roles-table {
  border-collapse: collapse;
  width: 100%;
}

.dashboard-roles-table th,
.dashboard-roles-table td {
  border-bottom: 1px solid var(--color-borde-suave);
  padding: var(--espacio-2) var(--espacio-3);
  text-align: center;
}

.dashboard-roles-table th:first-child,
.dashboard-roles-table td:first-child {
  text-align: left;
}

.dashboard-roles-table thead th {
  color: var(--color-texto-secundario);
  font-size: 0.8rem;
  position: sticky;
  top: 0;
  background: var(--color-superficie-alta, var(--color-fondo-elevado));
}

.dashboard-grid-wrap {
  min-width: 0;
  position: relative;
}

.dashboard-loading {
  align-items: center;
  background: var(--color-fondo);
  border-radius: var(--radio-card);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  inset: 0;
  justify-content: flex-start;
  padding-top: clamp(48px, 14vh, 180px);
  position: absolute;
  z-index: 20;
}

.dashboard-loading[hidden] {
  display: none;
}

.dashboard-widget {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  position: relative;
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.dashboard-top__body {
  align-items: stretch;
  color: var(--dashboard-top-foreground);
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: visible;
  padding: 0 0 var(--espacio-4);
  position: relative;
}

.dashboard-widget--top[data-dashboard-widget=top_product_emm] {
  background: var(--dashboard-top-emm-gradient);
  border-color: transparent;
  box-shadow: none;
}

.dashboard-widget--top[data-dashboard-widget=top_product_mxc] {
  background: var(--dashboard-top-mxc-gradient);
  border-color: transparent;
  box-shadow: none;
}

.dashboard-top__label {
  color: var(--dashboard-top-foreground);
  font-size: 17cqi;
  font-weight: 850;
  letter-spacing: -2px;
  left: 50%;
  line-height: 0.88;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: 30px;
  transform: translateX(-50%);
  user-select: none;
  white-space: nowrap;
  z-index: 1;
}

.dashboard-top__store {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  min-width: 0;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 2;
}

.dashboard-top__imagewrap {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
  padding-top: 50px;
  position: relative;
  width: 100%;
  z-index: 2;
}

.dashboard-top__img {
  display: block;
  filter: drop-shadow(var(--sombra-imagen-producto-dashboard));
  height: auto;
  max-height: 100%;
  max-width: none;
  object-fit: contain;
  transform: rotate(5deg);
  transform-origin: center center;
  scale: 105%;
  transition: transform var(--transicion-media);
  width: 100%;
}

.dashboard-top__store:hover .dashboard-top__img {
  transform: rotate(-5deg) scale(1.02);
}

.dashboard-top__placeholder {
  align-items: center;
  border: 1px dashed var(--dashboard-top-placeholder-border);
  color: var(--dashboard-top-placeholder-text);
  display: flex;
  font-size: 34px;
  height: 96px;
  justify-content: center;
  width: 96px;
}

.dashboard-top__caption {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--espacio-2);
  max-width: 94%;
  padding-left: var(--espacio-4);
  padding-right: var(--espacio-4);
  padding-top: var(--espacio-3);
  position: relative;
  z-index: 3;
}

.dashboard-top__name {
  color: var(--dashboard-top-foreground);
  font-size: clamp(1.15rem, 1.2vw, 2.45rem);
  font-weight: 800;
  line-height: 0.98;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dashboard-top__qty {
  color: var(--dashboard-top-foreground);
  font-size: clamp(1rem, 1.4vw, 1.05rem);
  line-height: 1;
}

.dashboard-top__qty strong {
  color: var(--dashboard-top-foreground);
  font-weight: 800;
}

/* El layout antiguo tenía dos productos dentro del mismo body. Se conserva
 * el selector por compatibilidad con layouts guardados, aunque cada widget
 * nuevo sólo renderiza una tienda. */
.dashboard-top__body--single {
  gap: 0;
}

.dashboard-widget__header {
  flex: 0 0 auto;
  max-height: 88px;
  min-height: 0;
  overflow: hidden;
  padding: var(--espacio-2) var(--espacio-4);
}

.dashboard-widget > .app-card__body {
  flex: 1 1 auto;
  min-height: 0;
}

.dashboard-widget__footer,
.dashboard-kpi__footer {
  flex: 0 0 auto;
  max-height: 48px;
  overflow: hidden;
  padding: var(--espacio-2) var(--espacio-4);
}

.dashboard-widget--quick {
  align-items: center;
  color: var(--color-texto);
  display: flex;
  flex-direction: row;
  gap: var(--espacio-3);
  padding: var(--espacio-1);
  text-decoration: none;
}

.dashboard-quick__link {
  align-items: center;
  color: var(--color-texto);
  display: flex;
  flex: 1 1 auto;
  gap: var(--espacio-2);
  min-width: 0;
  text-decoration: none;
}

.dashboard-quick__link:hover {
  color: var(--color-texto);
}

.dashboard-widget--quick:hover {
  border-color: var(--color-borde-fuerte);
  color: var(--color-texto);
  transform: translateY(-2px);
}

.dashboard-quick__icon {
  align-items: center;
  color: var(--color-texto);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 24px;
  height: 1em;
  justify-content: center;
  width: 1em;
}

.dashboard-quick__content {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dashboard-quick__content strong {
  font-size: 0.82rem;
  line-height: 1.25;
}

.dashboard-quick__arrow {
  color: var(--color-texto-tenue);
  margin-left: auto;
}

.dashboard-kpi__brand {
  color: var(--color-texto-tenue);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.dashboard-widget__editor-actions {
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.dashboard-widget__editor-actions button {
  align-items: center;
  background: var(--color-interactivo-medio);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-xs);
  color: var(--color-texto-secundario);
  cursor: pointer;
  display: inline-flex;
  height: 27px;
  justify-content: center;
  padding: 0;
  width: 27px;
}

.dashboard-widget__editor-actions button:hover {
  background: var(--color-superficie-hover);
  color: var(--color-texto);
}

.dashboard-widget__drag {
  color: var(--color-texto-tenue);
  cursor: grab;
  display: inline-flex;
  font-size: 18px;
  margin-right: var(--espacio-1);
}

.dashboard-widget__resize-handle {
  bottom: 0;
  cursor: nwse-resize;
  display: none;
  height: 24px;
  position: absolute;
  right: 0;
  touch-action: none;
  width: 24px;
  z-index: 5;
}

.dashboard-widget__resize-handle::before,
.dashboard-widget__resize-handle::after {
  background: var(--color-azul);
  bottom: 5px;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  right: 4px;
  transform: rotate(-45deg);
  transform-origin: right center;
}

.dashboard-widget__resize-handle::before {
  width: 13px;
}

.dashboard-widget__resize-handle::after {
  bottom: 9px;
  opacity: 0.55;
  width: 8px;
}

.dashboard-widget__resize-handle:focus-visible {
  outline: 2px solid var(--color-azul);
  outline-offset: -2px;
}

.dashboard-widget.is-resizing {
  border-color: var(--color-azul);
  cursor: nwse-resize;
  user-select: none;
}

.dashboard-kpi__body {
  align-content: center;
  display: grid;
  flex: 1 1 auto;
  gap: var(--espacio-2);
  min-height: 0;
  padding: var(--espacio-3) var(--espacio-4);
}

.dashboard-kpi__value {
  color: var(--color-texto);
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.dashboard-kpi__facts,
.dashboard-kpi__delta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.dashboard-kpi__facts {
  color: var(--color-texto-secundario);
  font-size: 0.82rem;
}

.dashboard-kpi__facts span + span {
  border-left: 1px solid var(--color-borde);
  padding-left: var(--espacio-2);
}

.dashboard-kpi__facts strong {
  color: var(--color-texto);
}

.dashboard-kpi__delta {
  font-size: 0.8rem;
  font-weight: 760;
}

.dashboard-kpi__delta--positive {
  color: var(--color-status-success-text);
}

.dashboard-kpi__delta--negative {
  color: var(--color-status-danger-text);
}

.dashboard-kpi__delta--neutral {
  color: var(--color-texto-secundario);
}

.dashboard-kpi__comparison {
  color: var(--color-texto-tenue);
  font-size: 0.74rem;
  font-weight: 600;
}

.dashboard-kpi__error {
  color: var(--color-status-danger-text);
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 0;
}

.dashboard-kpi__error:empty {
  display: none;
}

.dashboard-kpi__footer {
  color: var(--color-texto-tenue);
  font-size: 0.72rem;
  white-space: nowrap;
}

.dashboard-kpi__footer [data-kpi-updated]:empty {
  display: none;
}

.dashboard-kpi__state {
  justify-self: start;
}

.dashboard-trend__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--espacio-3) var(--espacio-4);
  position: relative;
}

.dashboard-chart {
  height: 100%;
  min-height: 300px;
  width: 100%;
}

.dashboard-widget__footer {
  align-items: center;
  color: var(--color-texto-secundario);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  gap: var(--espacio-3);
  justify-content: space-between;
}

.dashboard-empty,
.dashboard-error {
  align-items: center;
  color: var(--color-texto-secundario);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  inset: 50% auto auto 50%;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  width: min(360px, 100% - 32px);
}

.dashboard-empty__icon {
  color: var(--color-texto-tenue);
  font-size: 32px;
}

.dashboard-empty strong,
.dashboard-error strong {
  color: var(--color-texto);
}

.dashboard-error {
  color: var(--color-status-danger-text);
}

.dashboard-editor-only {
  display: none;
}

.dashboard-page.is-personalizing .dashboard-editor-only {
  display: inline-flex;
}

.dashboard-page.is-personalizing .dashboard-editor-hint {
  display: flex;
}

.dashboard-grid.is-personalizing .dashboard-editor-only {
  display: inline-flex;
}

.dashboard-grid.is-personalizing .dashboard-widget__resize-handle {
  display: block;
}

.dashboard-grid.is-personalizing .dashboard-widget__footer,
.dashboard-grid.is-personalizing .dashboard-kpi__footer {
  padding-right: var(--espacio-8);
}

.dashboard-grid.is-personalizing .dashboard-widget {
  border-color: var(--color-borde-fuerte);
  cursor: grab;
}

.dashboard-grid.is-personalizing .dashboard-widget:active {
  cursor: grabbing;
}

.dashboard-quick__drag {
  color: var(--color-texto-tenue);
  cursor: grab;
  font-size: 18px;
}

.dashboard-quick__move {
  align-items: center;
  display: none;
  gap: 2px;
  margin-left: auto;
}

.dashboard-grid.is-personalizing .dashboard-quick__move {
  display: flex;
}

.dashboard-quick__move button {
  align-items: center;
  background: var(--color-interactivo-medio);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-xs);
  color: var(--color-texto-secundario);
  cursor: pointer;
  display: inline-flex;
  height: 27px;
  justify-content: center;
  padding: 0;
  width: 27px;
}

.dashboard-quick__move button:hover {
  background: var(--color-superficie-hover);
  color: var(--color-texto);
}

.dashboard-editor-hint {
  align-items: center;
  color: var(--color-texto-secundario);
  display: flex;
  font-size: 0.8rem;
  gap: var(--espacio-2);
  margin: var(--espacio-4) 0 0;
}

@media (max-width: 720px) {
  .dashboard-page__header {
    align-items: stretch;
  }
  .dashboard-page__actions {
    align-items: stretch;
  }
  .dashboard-date-trigger {
    justify-content: flex-start;
    max-width: none;
    width: 100%;
  }
  .dashboard-date-trigger__range {
    flex: 1 1 auto;
  }
  .dashboard-date-panel {
    bottom: var(--espacio-4);
    height: calc(100vh - 32px);
    left: var(--espacio-4);
    max-width: none;
    position: fixed;
    right: var(--espacio-4);
    top: var(--espacio-4);
    width: auto;
  }
  .dashboard-date-popover[open]::after {
    background: var(--color-overlay);
    content: "";
    inset: 0;
    position: fixed;
    z-index: 210;
  }
  .dashboard-date-panel__content {
    display: block;
    overflow: auto;
  }
  .dashboard-date-presets {
    border-bottom: 1px solid var(--color-borde-suave);
    border-right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-calendar-area {
    padding-inline: var(--espacio-4);
  }
  .dashboard-calendars {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    overflow-x: auto;
    padding-bottom: var(--espacio-2);
  }
  .dashboard-date-selection__hint {
    flex-basis: 100%;
    margin-left: 0;
  }
  .dashboard-chart {
    min-height: 260px;
  }
  .dashboard-toolbar__timezone::before {
    display: none;
  }
}