/* ==========================================
   TOKENS
   --marca y --marca-osc son canales "R G B" para poder usar transparencias: rgb(var(--marca) / .1).
   negocio.js los cambia según el color de cada empresa.
   ========================================== */
:root {
  --marca: 224 106 18;
  --marca-osc: 184 82 8;
  --fondo: #f7f5f2;
  --superficie: #ffffff;
  --linea: #ebe6df;
  --linea-fuerte: #ddd6cc;
  --tinta: #1c1917;
  --suave: #78716c;
  --tenue: #a8a29e;
  --sombra-1: 0 1px 2px rgba(41, 37, 36, .04), 0 1px 3px rgba(41, 37, 36, .04);
  --sombra-2: 0 10px 30px -12px rgba(41, 37, 36, .14), 0 2px 6px -2px rgba(41, 37, 36, .05);
  --radio: 16px;
}

body { font-feature-settings: "cv11", "ss01"; letter-spacing: -.006em; background: var(--fondo); color: var(--tinta); }
::selection { background: rgb(var(--marca) / .18); }

.scroll-fino::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-fino::-webkit-scrollbar-thumb { background: #e2ddd6; border-radius: 6px; }
.scroll-fino::-webkit-scrollbar-thumb:hover { background: #cfc8be; }

.wa-bg {
  background-color: #f4efe8;
  background-image: radial-gradient(rgb(var(--marca) / .07) 1px, transparent 0);
  background-size: 20px 20px;
}
.burbuja p { white-space: pre-wrap; word-break: break-word; }

.vista:not(.hidden) { animation: entrar-vista .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes entrar-vista { from { opacity: 0; transform: translateY(6px); } }

/* ==========================================
   GLOBOS DE CHAT
   ========================================== */
.globo { padding: 8px 13px 7px; font-size: 13px; line-height: 1.5; border-radius: 18px; }
.globo.nuevo { animation: aparecer .22s ease-out; }
.globo-entrante {
  background: #fff; color: var(--tinta); border-bottom-left-radius: 6px;
  box-shadow: 0 1px 1.5px rgba(41, 37, 36, .08);
}
.globo-saliente {
  background: rgb(var(--marca) / .13); color: var(--tinta); border-bottom-right-radius: 6px;
  box-shadow: 0 1px 1.5px rgba(41, 37, 36, .06), inset 0 0 0 1px rgb(var(--marca) / .12);
}
.globo-saliente .hora i { color: rgb(var(--marca-osc)); opacity: 1; }
.globo-asesor { background: #d9fdd3; color: #0b3d20; border-bottom-right-radius: 6px; box-shadow: 0 1px 1.5px rgba(41, 37, 36, .08); }
.globo .hora { font-size: 10px; opacity: .55; float: right; margin: 6px 0 0 10px; line-height: 1; }
.globo img { display: block; border-radius: 13px; margin: -3px -8px 6px; max-width: calc(100% + 16px); }
.globo .chips { margin-bottom: 6px; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px) scale(.98); } }

.escribiendo { display: inline-flex; gap: 4px; padding: 12px 14px; }
.escribiendo span { width: 6px; height: 6px; border-radius: 50%; background: var(--tenue); animation: rebote 1.2s infinite ease-in-out; }
.escribiendo span:nth-child(2) { animation-delay: .15s; }
.escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes rebote { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ==========================================
   SUPERFICIES
   ========================================== */
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-1); }
.tarjeta thead tr { background: #faf8f5 !important; }
.tarjeta thead th { font-weight: 600; color: var(--tenue); letter-spacing: .07em; white-space: nowrap; }
.tarjeta tbody tr { transition: background .12s; }
.tarjeta tbody tr:hover { background: #fbf9f6 !important; }
.tarjeta td.text-right, .tarjeta td.text-center { white-space: nowrap; }
.titulo-tarjeta { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--tinta); letter-spacing: -.01em; }
.titulo-tarjeta i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; background: rgb(var(--marca) / .1); color: rgb(var(--marca-osc)); }

.vista .grid > * { min-width: 0; }

/* Encabezado de cada vista */
.vista h2 { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.025em !important; color: var(--tinta); }
.vista h2 + p { margin-top: 3px; font-size: 12.5px; color: var(--suave); max-width: 720px; }

/* KPIs */
.kpi {
  position: relative; overflow: hidden; padding: 18px 18px 16px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-1);
  transition: transform .18s, box-shadow .18s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.kpi::after {
  content: ''; position: absolute; right: -28px; top: -28px; width: 96px; height: 96px; border-radius: 50%;
  background: rgb(var(--c) / .08); pointer-events: none;
}
.kpi-icono { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 14px; background: rgb(var(--c) / .12); color: rgb(var(--c)); }
.kpi-titulo { margin-top: 14px; font-size: 12px; color: var(--suave); font-weight: 500; }
.kpi-valor { margin-top: 2px; font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.kpi-sub { margin-top: 8px; font-size: 11.5px; color: var(--tenue); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tendencia { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.tendencia.sube { background: #dcfce7; color: #15803d; }
.tendencia.baja { background: #fee2e2; color: #b91c1c; }
.tendencia.igual { background: #f5f5f4; color: var(--suave); }

/* Gráficos */
.grafico-svg { width: 100%; overflow: visible; }
.grafico-svg .punto { transition: r .15s; }
.grafico-svg g:hover .punto { r: 5.5; }
.barra { transition: height .5s cubic-bezier(.2, .7, .2, 1), opacity .15s; }
.barra:hover { opacity: .8; }
.progreso { height: 8px; border-radius: 999px; background: #f2eee8; overflow: hidden; }
.progreso > div { height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2, .7, .2, 1); }

/* Estados vacíos */
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 20px; color: var(--suave); }
.vacio-icono {
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 12px;
  font-size: 20px; color: rgb(var(--marca-osc)); background: rgb(var(--marca) / .1);
  box-shadow: 0 0 0 8px rgb(var(--marca) / .04);
}
.vacio b { display: block; font-size: 13.5px; color: var(--tinta); font-weight: 600; margin-bottom: 3px; }
.vacio p { font-size: 12px; max-width: 320px; line-height: 1.5; }

/* Siluetas de carga */
.esqueleto { border-radius: 10px; background: linear-gradient(90deg, #efebe5 25%, #f7f4f0 50%, #efebe5 75%); background-size: 200% 100%; animation: brillo 1.3s infinite linear; }
@keyframes brillo { to { background-position: -200% 0; } }

/* ==========================================
   FORMULARIOS Y BOTONES
   ========================================== */
.campo {
  width: 100%; background: #fff; border: 1px solid var(--linea); border-radius: 11px;
  padding: .56rem .8rem; font-size: 13px; color: var(--tinta); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.campo::placeholder { color: var(--tenue); }
.campo:hover { border-color: var(--linea-fuerte); }
.campo:focus { border-color: rgb(var(--marca)); box-shadow: 0 0 0 3px rgb(var(--marca) / .15); }
fieldset:disabled .campo { background: #faf8f5; color: var(--suave); }
input[type="checkbox"], input[type="radio"] { accent-color: rgb(var(--marca)); }

.btn-primario {
  padding: .58rem 1.05rem; color: #fff; border-radius: 11px; font-size: 12.5px; font-weight: 600;
  background: linear-gradient(180deg, rgb(var(--marca)), rgb(var(--marca-osc)));
  box-shadow: 0 1px 2px rgb(var(--marca-osc) / .3), 0 4px 12px -4px rgb(var(--marca) / .5), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: filter .15s, transform .06s, box-shadow .15s;
}
.btn-primario:hover { filter: brightness(1.06); box-shadow: 0 1px 2px rgb(var(--marca-osc) / .3), 0 8px 18px -6px rgb(var(--marca) / .6), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-primario:active { transform: translateY(1px); }
.btn-primario:disabled { opacity: .6; cursor: wait; }
.btn-secundario {
  padding: .58rem 1.05rem; background: #fff; color: #44403c; border: 1px solid var(--linea);
  border-radius: 11px; font-size: 12.5px; font-weight: 500; box-shadow: var(--sombra-1);
  transition: border-color .15s, color .15s, background .15s;
}
.btn-secundario:hover { border-color: rgb(var(--marca) / .5); color: rgb(var(--marca-osc)); background: rgb(var(--marca) / .03); }

/* Selector de color (Tu negocio) */
.muestra-color { width: 28px; height: 28px; border-radius: 9px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--linea); transition: transform .12s, box-shadow .12s; }
.muestra-color:hover { transform: scale(1.1); }
.muestra-color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tinta); }

/* ==========================================
   SIDEBAR
   ========================================== */
.sidebar { background: #fff; border-right: 1px solid var(--linea); overflow-y: auto; scrollbar-width: thin; }
.sidebar > div { flex-shrink: 0; }
.sidebar #menu { overflow: visible; }
.monograma {
  width: 34px; height: 34px; border-radius: 11px; color: #fff; flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: -.02em;
  background: linear-gradient(135deg, rgb(var(--marca)), rgb(var(--marca-osc)));
  box-shadow: 0 4px 12px -4px rgb(var(--marca) / .6), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.etiqueta {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tenue);
}
.nav, .nav-grupo {
  position: relative; width: 100%; display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem;
  font-size: 13px; font-weight: 500; color: #57534e; border-radius: 10px; text-align: left;
  transition: color .15s, background .15s;
}
.nav i, .nav-grupo i { width: 1rem; text-align: center; font-size: 13px; color: var(--tenue); transition: color .15s, transform .2s; }
.nav:hover, .nav-grupo:hover { color: var(--tinta); background: #f5f2ee; }
.nav:hover i, .nav-grupo:hover i { color: #57534e; }
/* Grupo desplegable "Otros" */
.nav-grupo { list-style: none; cursor: pointer; user-select: none; }
.nav-grupo::-webkit-details-marker { display: none; }
.nav-grupo .chevron { margin-left: auto; font-size: 10px; }
.grupo-nav[open] > .nav-grupo .chevron { transform: rotate(180deg); }
.subnav { margin: 2px 0 2px 1.15rem; padding-left: .5rem; border-left: 1px solid var(--linea); }
.subnav .nav-activo::before { left: -10px; }
.nav-activo { color: rgb(var(--marca-osc)) !important; font-weight: 600; background: rgb(var(--marca) / .1) !important; }
.nav-activo i { color: rgb(var(--marca)) !important; }
.nav-activo::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--marca)); }
.insignia { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center; font-size: 10.5px; font-weight: 700; color: #fff; background: rgb(var(--marca)); box-shadow: 0 2px 6px -2px rgb(var(--marca) / .6); }
.insignia.alerta { background: #e11d48; box-shadow: 0 2px 6px -2px rgba(225, 29, 72, .6); animation: latido-insignia 2s ease-in-out infinite; }
@keyframes latido-insignia { 50% { box-shadow: 0 0 0 4px rgba(225, 29, 72, .15); } }

.caja-canal { padding: 12px; border-radius: 14px; background: #faf8f5; border: 1px solid var(--linea); }

.estado-wa { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--suave); padding: 2px 8px; border-radius: 999px; background: #f5f2ee; }
.estado-wa .punto { width: 6px; height: 6px; border-radius: 50%; background: #d6d3d1; }
.estado-wa[data-tono="ok"] { color: #15803d; background: #dcfce7; }
.estado-wa[data-tono="ok"] .punto { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.estado-wa[data-tono="proceso"] { color: #b45309; background: #fef3c7; }
.estado-wa[data-tono="proceso"] .punto { background: #f59e0b; animation: latido 1.4s ease-in-out infinite; }
.estado-wa[data-tono="off"] { color: #be123c; background: #ffe4e6; }
.estado-wa[data-tono="off"] .punto { background: #f43f5e; }
@keyframes latido { 50% { opacity: .35; } }

.interruptor { width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--tinta); }
.interruptor .riel { width: 32px; height: 19px; border-radius: 999px; background: #d6d3d1; position: relative; transition: background .2s; flex-shrink: 0; }
.interruptor .perilla {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s;
}
.interruptor[aria-checked="true"] .riel { background: rgb(var(--marca)); }
.interruptor[aria-checked="true"] .perilla { transform: translateX(13px); }

.segmentado { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; gap: 2px; background: #efebe5; border-radius: 11px; }
.segmentado button {
  padding: 5px 0; font-size: 11.5px; font-weight: 500; color: #78716c; border-radius: 8px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.segmentado button:hover { color: var(--tinta); }
.segmentado button[aria-checked="true"] { background: #fff; color: rgb(var(--marca-osc)); font-weight: 600; box-shadow: 0 1px 3px rgba(41, 37, 36, .12); }
.segmentado button[data-modo="apagado"][aria-checked="true"] { background: #44403c; color: #fff; }

.enlace-sidebar {
  display: flex; align-items: center; gap: .5rem; width: 100%; font-size: 12px;
  color: var(--suave); text-align: left; transition: color .15s;
}
.enlace-sidebar:hover { color: var(--tinta); }

/* Filtros tipo chip (bandeja, carta, pedidos) */
.filtro, .chip-filtro {
  white-space: nowrap; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
  color: #57534e; background: #fff; border: 1px solid var(--linea); transition: all .15s;
}
.filtro:hover, .chip-filtro:hover { border-color: var(--linea-fuerte); color: var(--tinta); }
.filtro[aria-pressed="true"], .chip-filtro[aria-pressed="true"] {
  color: #fff; border-color: transparent; background: rgb(var(--marca)); box-shadow: 0 3px 10px -4px rgb(var(--marca) / .7);
}

/* Avatares con color estable por persona */
.avatar { display: grid; place-items: center; flex-shrink: 0; border-radius: 999px; font-weight: 700; font-size: 11px; letter-spacing: .02em; color: rgb(var(--av)); background: rgb(var(--av) / .14); }

/* Toast */
#toast {
  display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 32px));
  background: #292524 !important; color: #fafaf9 !important; border: 0 !important; font-weight: 500;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45) !important; border-radius: 14px !important;
}
#toast.hidden { display: none; }
#toast:not(.hidden) { animation: toast-entra .32s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* Modales */
.modal:not(.hidden) { animation: fundido .18s ease-out; }
.modal:not(.hidden) > * { animation: modal-entra .26s cubic-bezier(.2, .8, .3, 1.1); border-radius: 20px !important; }
@keyframes fundido { from { opacity: 0; } }
@keyframes modal-entra { from { opacity: 0; transform: translateY(12px) scale(.97); } }

/* ==========================================
   PEDIDOS: TABLERO
   ========================================== */
.columna-kanban {
  border-radius: 18px; padding: 10px; min-height: 160px; background: rgb(var(--col) / .06);
  border: 1px solid rgb(var(--col) / .14); transition: background .15s, border-color .15s, box-shadow .15s;
}
.columna-kanban.sobre { background: rgb(var(--col) / .14); border-color: rgb(var(--col) / .5); box-shadow: inset 0 0 0 2px rgb(var(--col) / .25); }
.cabeza-kanban { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.cabeza-kanban .punto { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--col)); box-shadow: 0 0 0 3px rgb(var(--col) / .18); }
.cabeza-kanban .contador { margin-left: auto; min-width: 22px; padding: 1px 7px; text-align: center; border-radius: 999px; font-size: 11px; font-weight: 700; color: rgb(var(--col)); background: rgb(var(--col) / .12); }
.tarjeta-pedido { position: relative; cursor: grab; transition: transform .15s, box-shadow .15s; }
.tarjeta-pedido:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); }
.tarjeta-pedido:active { cursor: grabbing; }
.tarjeta-pedido.arrastrando { opacity: .45; transform: rotate(1.5deg); }
.tarjeta-pedido::before { content: ''; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento, transparent); }

/* Prospectos */
.chip-estado { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--linea); font-size: 11.5px; font-weight: 500; color: #57534e; background: #fff; transition: all .15s; }
.chip-estado:hover { border-color: var(--linea-fuerte); }
.chip-estado[aria-pressed="true"] { background: rgb(var(--marca)); border-color: transparent; color: #fff; box-shadow: 0 3px 10px -4px rgb(var(--marca) / .7); }
.chip-estado .n { font-size: 10.5px; opacity: .65; font-variant-numeric: tabular-nums; }
.sel-estado { border-radius: 999px; padding: 3px 24px 3px 10px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23737373'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.sel-estado[data-estado="por_contactar"] { background-color: #f5f5f4; color: #44403c; }
.sel-estado[data-estado="contactado"] { background-color: #eff6ff; color: #1d4ed8; }
.sel-estado[data-estado="respondio"] { background-color: #f5f3ff; color: #6d28d9; }
.sel-estado[data-estado="interesado"] { background-color: #fffbeb; color: #b45309; }
.sel-estado[data-estado="en_tramite"] { background-color: #fff7ed; color: #c2410c; }
.sel-estado[data-estado="cerrado"] { background-color: #ecfdf5; color: #047857; }
.sel-estado[data-estado="no_interesado"] { background-color: #fef2f2; color: #b91c1c; }
.btn-wa { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 10px; background: #25d366; color: #fff; font-size: 12px; font-weight: 600; transition: background .15s, transform .06s; white-space: nowrap; box-shadow: 0 3px 10px -4px rgba(37, 211, 102, .8); }
.btn-wa:hover { background: #1ebe5b; }
.btn-wa:active { transform: translateY(1px); }

/* ==========================================
   PERMISOS Y TIPO DE NEGOCIO
   ========================================== */
body.rol-asesor .solo-admin { display: none !important; }
body:not(.rol-superadmin) .solo-superadmin { display: none !important; }
/* Superadmin sin empresa elegida: solo ve la gestión de empresas. */
body.sin-empresa .requiere-empresa { display: none !important; }
body.tipo-restaurante .solo-tienda { display: none !important; }
body:not(.tipo-restaurante) .solo-restaurante { display: none !important; }
body.tipo-ventas .solo-tienda, body.tipo-ventas .no-ventas { display: none !important; }
body:not(.tipo-ventas) .solo-ventas { display: none !important; }

/* ==========================================
   MÓVIL
   ========================================== */
.barra-movil, .nav-inferior, .velo-menu { display: none; }

@media (max-width: 767px) {
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: 284px !important; max-width: 86vw;
    transform: translateX(-102%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 60px rgba(0, 0, 0, .25);
  }
  body.menu-abierto .sidebar { transform: none; }
  .velo-menu { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(28, 25, 23, .4); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.menu-abierto .velo-menu { opacity: 1; pointer-events: auto; }

  .barra-movil {
    display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px; flex-shrink: 0;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea);
  }
  .nav-inferior {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; flex-shrink: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(10px); border-top: 1px solid var(--linea);
  }
  .nav-movil { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 12px; font-size: 10.5px; font-weight: 500; color: var(--suave); }
  .nav-movil i { font-size: 17px; }
  .nav-movil.nav-activo { color: rgb(var(--marca-osc)); background: rgb(var(--marca) / .1); }
  .nav-movil.nav-activo::before { display: none; }
  .nav-movil .insignia { position: absolute; top: 1px; left: 52%; margin: 0; font-size: 9.5px; padding: 0 5px; min-width: 16px; }

  body .vista.p-6 { padding: 16px; }
  .vista h2 { font-size: 19px !important; }
  #toast { left: 16px; right: 16px; bottom: 84px !important; }

  /* Bandeja: lista o conversación, una a la vez */
  #vista-bandeja > div:first-child { width: 100% !important; border-right: 0; }
  #vista-bandeja #panel-chat { display: none; }
  #vista-bandeja.con-chat > div:first-child { display: none; }
  #vista-bandeja.con-chat #panel-chat { display: flex; }

  #cola-pedidos { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; }
  #cola-pedidos.hidden { display: none !important; }
  #cola-pedidos > .columna-kanban { flex: 0 0 86%; scroll-snap-align: start; }
}

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