/* ============================================================
   🧭 APPBAR SUPERIOR (franja negra)
   - Sticky en desktop / tablet / móvil
   - Izquierda: logo + restaurante + dueño
   - Derecha: correo arriba + rol abajo
   - Sin logout en el AppBar
   ============================================================ */

/* — Fondo general gris muy claro para todo el panel — */
.goournet-panel {
  margin: 0;
  display: block;
  min-height: 100vh;
  width: 100%;
  font-family: "Outfit", sans-serif;
  background: #f5f6f8;
  color: #111;
}

/* — Barra negra superior — */
.sa-appbar {
  position: sticky;
  top: 0;
  z-index: 950;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  min-height: 64px;
  padding: 12px 24px;

  background: #000;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  border-radius: 0 0 25px 25px;
  overflow: hidden;
}

/* ----- Lado izquierdo ----- */
.sa-appbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

#rp-logo-circle.sa-logo-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e03131;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.15rem;
  user-select: none;
  flex: 0 0 auto;
}

.sa-appbar__brand {
  min-width: 0;
}

.sa-appbar__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-appbar__sub {
  margin-top: 4px;
  font-size: .78rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----- Lado derecho ----- */
.sa-appbar__right {
  margin-left: auto;
  min-width: 0;
  flex: 0 1 auto;
  display: flex;
  justify-content: flex-end;
}

.sa-appbar__user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.sa-appbar__user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  max-width: min(36vw, 320px);
  text-align: right;
}

.sa-appbar__email {
  font-size: .78rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, .78);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sa-appbar__role {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.sa-appbar__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  font-size: .75rem;
  font-weight: 600;
  color: #111;
  max-width: 100%;
}

/* Seguridad extra:
   si por error queda el HTML viejo, ocultamos divider y logout */
.sa-appbar__divider,
#sa-logout-btn.sa-logout-btn--appbar {
  display: none !important;
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .sa-appbar {
    padding: 12px 18px;
    gap: 14px;
    min-height: 68px;
  }

  .sa-appbar__title {
    font-size: 1.02rem;
  }

  .sa-appbar__sub {
    font-size: .76rem;
  }

  .sa-appbar__user-meta {
    max-width: min(42vw, 280px);
  }
}

/* ----- Móvil ----- */
@media (max-width: 600px) {
  .sa-appbar {
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    min-height: auto;
  }

  .sa-appbar__left {
    gap: 10px;
  }

  #rp-logo-circle.sa-logo-circle {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
  }

  .sa-appbar__title {
    font-size: .98rem;
  }

  .sa-appbar__sub {
    font-size: .74rem;
  }

  .sa-appbar__right {
    flex: 0 0 auto;
  }

  .sa-appbar__user-meta {
    max-width: clamp(150px, 46vw, 220px);
    gap: 6px;
  }

  .sa-appbar__email {
    display: block;
    font-size: .74rem;
  }

  .sa-appbar__chip {
    min-height: 28px;
    padding: 0 10px;
    font-size: .72rem;
  }
}


/* ============================================================
   ✅ GOOURNET · APP BOTTOM NAV + "MÁS" (BLOQUE COMPLETO CORREGIDO)
   - Scope: SOLO panel + clases .sa-bottom-nav / .sa-bottom-sheet
   - Activo SIEMPRE rojo
   - Hover gris solo en dispositivos con mouse real
   - Backdrop con blur
   - Sheet tipo app en móvil/tablet: full width + animación bottom-up
   - Grid "Más": móvil 4 columnas | desktop 7 columnas
   ============================================================ */

/* ============================================================
   TOKENS COMPARTIDOS
   ============================================================ */
.goournet-panel .sa-bottom-nav,
.goournet-panel .sa-bottom-sheet{
  --sa-nav-accent: var(--cfg-sw-on, #ff002a);
  --sa-nav-accent-shadow: rgba(255, 0, 42, .22);

  --sa-nav-bg: rgba(255,255,255,.86);
  --sa-nav-bg-solid: #ffffff;
  --sa-nav-surface: rgba(255,255,255,.94);

  --sa-nav-border: rgba(17,17,17,.12);
  --sa-nav-text: rgba(17,17,17,.84);
  --sa-nav-muted: rgba(17,17,17,.56);
  --sa-nav-hover: rgba(17,17,17,.06);
  --sa-nav-focus: rgba(17,17,17,.45);
  --sa-nav-focus-on-accent: rgba(255,255,255,.85);

  --sa-nav-radius: 22px;
  --sa-nav-item-radius: 16px;
  --sa-nav-h: 74px;
  --sa-nav-item-h: 52px;

  --sa-nav-item-gap: 4px;
  --sa-nav-item-pad-y: 8px;
  --sa-nav-item-pad-x: 6px;

  --sa-nav-icon-size: 22px;
  --sa-nav-label-size: .72rem;
  --sa-nav-label-weight: 600;
  --sa-nav-label-spacing: -0.01em;

  --sa-nav-shadow:
    0 18px 40px rgba(0,0,0,.18),
    0 3px 10px rgba(17,17,17,.10);

  --sa-nav-active-shadow:
    0 14px 26px rgba(255,0,42,.20);

  --sa-sheet-open-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   BARRA INFERIOR
   ============================================================ */
.goournet-panel .sa-bottom-nav{
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);

  width: min(980px, calc(100vw - 20px));
  height: var(--sa-nav-h);

  padding: 8px;
  border-radius: var(--sa-nav-radius);
  border: 1px solid var(--sa-nav-border);
  background: var(--sa-nav-bg);
  box-shadow: var(--sa-nav-shadow);

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;

  z-index: 900;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .goournet-panel .sa-bottom-nav{
    background: var(--sa-nav-bg-solid);
  }
}

/* ============================================================
   BOTONES BASE COMPARTIDOS
   ============================================================ */
.goournet-panel .sa-bottom-nav .sa-bottom-nav-item,
.goournet-panel .sa-bottom-sheet .sa-sheet-item{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--sa-nav-muted);

  width: 100%;
  min-width: 0;
  min-height: var(--sa-nav-item-h);
  padding: var(--sa-nav-item-pad-y) var(--sa-nav-item-pad-x);
  border-radius: var(--sa-nav-item-radius);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sa-nav-item-gap);

  text-align: center;
  font-family: "Outfit", sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform .14s ease,
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    filter .18s ease,
    opacity .18s ease;
}

/* Focus visible base */
.goournet-panel .sa-bottom-nav .sa-bottom-nav-item:focus-visible,
.goournet-panel .sa-bottom-sheet .sa-sheet-item:focus-visible,
.goournet-panel .sa-bottom-sheet-close:focus-visible,
.goournet-panel .sa-bottom-logout:focus-visible{
  outline: 2px solid var(--sa-nav-focus);
  outline-offset: 2px;
}

/* ============================================================
   HOVER SOLO EN DISPOSITIVOS CON MOUSE REAL
   - Evita el gris "pegado" en touch
   ============================================================ */
@media (hover: hover) and (pointer: fine){
  .goournet-panel .sa-bottom-nav .sa-bottom-nav-item:not(.is-active):hover,
  .goournet-panel .sa-bottom-sheet .sa-sheet-item:not(.is-active):hover,
  .goournet-panel #sa-bottom-more:not(.is-active):hover{
    color: var(--sa-nav-text);
    background: var(--sa-nav-hover);
    transform: translateY(-1px);
  }

  .goournet-panel .sa-bottom-sheet-close:hover{
    border-color: rgba(17,17,17,.28);
    transform: translateY(-1px);
  }

  .goournet-panel .sa-bottom-logout:hover{
    transform: translateY(-1px);
    filter: brightness(1.02);
  }
}

.goournet-panel .sa-bottom-nav .sa-bottom-nav-item:active,
.goournet-panel .sa-bottom-sheet .sa-sheet-item:active,
.goournet-panel .sa-bottom-sheet-close:active,
.goournet-panel .sa-bottom-logout:active{
  transform: translateY(0);
}

/* ============================================================
   ÍCONOS COMPARTIDOS
   ============================================================ */
.goournet-panel .sa-bottom-nav .sa-bottom-ico,
.goournet-panel .sa-bottom-sheet .sa-sheet-ico,
.goournet-panel .sa-bottom-logout-ico{
  width: var(--sa-nav-icon-size);
  height: var(--sa-nav-icon-size);
  display: grid;
  place-items: center;
  color: currentColor;
  flex: 0 0 auto;
}

.goournet-panel .sa-bottom-nav .sa-bottom-ico svg,
.goournet-panel .sa-bottom-sheet .sa-sheet-ico svg,
.goournet-panel .sa-bottom-logout-ico svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   LABELS COMPARTIDOS
   ============================================================ */
.goournet-panel .sa-bottom-nav .sa-bottom-label,
.goournet-panel .sa-bottom-sheet .sa-sheet-label{
  font-size: var(--sa-nav-label-size);
  font-weight: var(--sa-nav-label-weight);
  letter-spacing: var(--sa-nav-label-spacing);
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   ACTIVO SIEMPRE ROJO
   - Nunca vuelve a gris por hover / focus / active
   ============================================================ */
.goournet-panel .sa-bottom-nav .sa-bottom-nav-item.is-active,
.goournet-panel .sa-bottom-sheet .sa-sheet-item.is-active,
.goournet-panel #sa-bottom-more.is-active{
  background: var(--sa-nav-accent);
  color: #fff;
  box-shadow: var(--sa-nav-active-shadow);
  transform: translateY(0);
}

.goournet-panel .sa-bottom-nav .sa-bottom-nav-item.is-active:hover,
.goournet-panel .sa-bottom-sheet .sa-sheet-item.is-active:hover,
.goournet-panel .sa-bottom-nav .sa-bottom-nav-item.is-active:active,
.goournet-panel .sa-bottom-sheet .sa-sheet-item.is-active:active,
.goournet-panel .sa-bottom-nav .sa-bottom-nav-item.is-active:focus-visible,
.goournet-panel .sa-bottom-sheet .sa-sheet-item.is-active:focus-visible,
.goournet-panel #sa-bottom-more.is-active:hover,
.goournet-panel #sa-bottom-more.is-active:active,
.goournet-panel #sa-bottom-more.is-active:focus-visible{
  background: var(--sa-nav-accent);
  color: #fff;
  box-shadow: var(--sa-nav-active-shadow);
  transform: translateY(0);
  filter: brightness(1.02);
  outline-color: var(--sa-nav-focus-on-accent);
}

/* ============================================================
   MOBILE (≤600px): 5 íconos (4 + Más)
   ============================================================ */
@media (max-width: 600px){
  .goournet-panel .sa-bottom-nav{
    width: calc(100vw - 16px);
    height: 70px;
    padding: 6px;
    gap: 6px;
    border-radius: 20px;
  }

  .goournet-panel .sa-bottom-nav,
  .goournet-panel .sa-bottom-sheet{
    --sa-nav-label-size: .68rem;
    --sa-nav-item-h: 50px;
  }

  .goournet-panel .sa-bottom-nav .sa-bottom-nav-item[data-view="metricas"],
  .goournet-panel .sa-bottom-nav .sa-bottom-nav-item[data-view="promos"],
  .goournet-panel .sa-bottom-nav .sa-bottom-nav-item[data-view="estado-horarios"]{
    display: none;
  }
}

/* ============================================================
   EVITAR QUE EL CONTENIDO QUEDE TAPADO POR LA BARRA
   ============================================================ */
.goournet-panel .sa-main{
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

@media (max-width: 600px){
  .goournet-panel .sa-main{
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   BOTTOM SHEET ("Más")
   ============================================================ */
.goournet-panel .sa-bottom-sheet[hidden]{
  display: none !important;
}

.goournet-panel .sa-bottom-sheet{
  position: fixed;
  inset: 0;
  z-index: 910;

  display: grid;
  place-items: end center;

  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* Fondo con blur real */
.goournet-panel .sa-bottom-sheet-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 18, .30);
  backdrop-filter: blur(14px) saturate(1.04);
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
  opacity: 0;
  transition: opacity .26s ease;
}

.goournet-panel .sa-bottom-sheet[aria-hidden="false"] .sa-bottom-sheet-backdrop{
  opacity: 1;
}

.goournet-panel .sa-bottom-sheet-card{
  position: relative;
  width: min(860px, calc(100vw - 48px));
  max-height: min(680px, calc(100dvh - 140px));
  overflow: auto;
  overscroll-behavior: contain;

  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.65);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,247,251,.96) 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.25);

  transform: translateY(28px) scale(.985);
  transform-origin: bottom center;
  opacity: 0;
  will-change: transform, opacity;

  transition:
    transform .34s var(--sa-sheet-open-ease),
    opacity .24s ease;
}

.goournet-panel .sa-bottom-sheet[aria-hidden="false"] .sa-bottom-sheet-card{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Grip */
.goournet-panel .sa-bottom-sheet-grip{
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: rgba(17,17,17,.18);
  margin: 10px auto 8px;
}

/* Header */
.goournet-panel .sa-bottom-sheet-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 14px 12px;
  border-bottom: 1px solid rgba(17,17,17,.10);
}

.goournet-panel .sa-bottom-sheet-title{
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: rgba(17,17,17,.88);
}

/* Botón cerrar */
.goournet-panel .sa-bottom-sheet-close{
  appearance: none;
  border: 1px solid rgba(17,17,17,.14);
  background: rgba(255,255,255,.92);
  color: rgba(17,17,17,.82);

  width: 46px;
  height: 46px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;

  padding: 0;
  line-height: 1;
  font-size: 28px;
  font-weight: 900;

  display: grid;
  place-items: center;

  cursor: pointer;
  transition:
    transform .14s ease,
    border-color .18s ease,
    background .18s ease;
}

/* ============================================================
   GRID DEL MENÚ “MÁS”
   - Desktop grande: 7 columnas
   - Desktop medio: 6
   - Tablet: 4 (igual que móvil, como pediste)
   - Teléfono: 4
   ============================================================ */
.goournet-panel .sa-bottom-sheet-grid{
  display: grid;
  gap: 8px;
  padding: 14px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

@media (max-width: 1279px){
  .goournet-panel .sa-bottom-sheet-grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 1024px){
  .goournet-panel .sa-bottom-sheet{
    padding: 0;
    place-items: end stretch;
  }

  .goournet-panel .sa-bottom-sheet-card{
    width: 100%;
    max-width: none;
    max-height: min(86dvh, 920px);
    border-radius: 26px 26px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    transform: translateY(56px) scale(1);
  }

  .goournet-panel .sa-bottom-sheet[aria-hidden="false"] .sa-bottom-sheet-card{
    transform: translateY(0) scale(1);
  }

  .goournet-panel .sa-bottom-sheet-head{
    padding: 12px 16px 14px;
  }

  .goournet-panel .sa-bottom-sheet-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 14px 12px 12px;
    gap: 8px;
  }

  .goournet-panel .sa-bottom-sheet-footer{
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 768px){
  .goournet-panel .sa-bottom-sheet-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 600px){
  .goournet-panel .sa-bottom-sheet-card{
    width: 100%;
    max-height: min(88dvh, 920px);
    border-radius: 24px 24px 0 0;
  }

  .goournet-panel .sa-bottom-sheet-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 12px;
    gap: 6px;
  }

  .goournet-panel .sa-bottom-sheet .sa-sheet-item{
    min-height: 66px;
    padding: 8px 4px;
    border-radius: 14px;
  }

  .goournet-panel .sa-bottom-sheet .sa-sheet-label{
    font-size: .64rem;
  }
}

/* Items ocultos por JS */
.goournet-panel .sa-bottom-sheet .is-sheet-hidden{
  display: none !important;
}

/* ============================================================
   FOOTER DEL SHEET
   ============================================================ */
.goournet-panel .sa-bottom-sheet-footer{
  padding: 12px 14px 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(17,17,17,.10);
  background: rgba(255,255,255,.78);
}

/* ============================================================
   LOGOUT DEL SHEET
   ============================================================ */
.goournet-panel .sa-bottom-logout{
  appearance: none;
  width: 100%;
  min-height: var(--sa-nav-item-h);
  padding: 0 18px;

  border: 0;
  border-radius: var(--sa-nav-item-radius);
  background: var(--sa-nav-accent);
  color: #fff;
  box-shadow: var(--sa-nav-active-shadow);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-family: "Outfit", sans-serif;
  font-size: var(--sa-nav-label-size);
  font-weight: var(--sa-nav-label-weight);
  letter-spacing: var(--sa-nav-label-spacing);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform .14s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

/* Bloqueo de scroll cuando el sheet está abierto */
body.sa-sheet-open .goournet-panel,
.goournet-panel.sa-sheet-open{
  overflow: hidden;
}

/* ============================================================
   GOOURNET · QUICK ACTION EN "MÁS"
   - Cambiar restaurante
   ============================================================ */

.goournet-panel .sa-bottom-sheet-quick-actions {
  padding: 12px 14px 0;
}

.goournet-panel .sa-sheet-quick-action[hidden] {
  display: none !important;
}

.goournet-panel .sa-sheet-quick-action {
  appearance: none;
  width: 100%;
  min-height: 64px;
  border: 1px solid rgba(17, 17, 17, .10);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,247,251,.96) 100%);
  box-shadow:
    0 10px 22px rgba(17, 17, 17, .06),
    inset 0 1px 0 rgba(255,255,255,.92);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition:
    transform .14s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.goournet-panel .sa-sheet-quick-action:focus-visible {
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .goournet-panel .sa-sheet-quick-action:hover {
    transform: translateY(-1px);
    border-color: rgba(17,17,17,.16);
    box-shadow:
      0 14px 24px rgba(17,17,17,.08),
      inset 0 1px 0 rgba(255,255,255,.92);
  }
}

.goournet-panel .sa-sheet-quick-action:active {
  transform: translateY(0);
}

.goournet-panel .sa-sheet-quick-action__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px;
  background: rgba(255, 0, 42, .08);
  color: #ff002a;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

.goournet-panel .sa-sheet-quick-action__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.goournet-panel .sa-sheet-quick-action__content {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.goournet-panel .sa-sheet-quick-action__title {
  color: rgba(17,17,17,.90);
  font-size: .96rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.goournet-panel .sa-sheet-quick-action__meta {
  color: rgba(17,17,17,.60);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.2;
}

.goournet-panel .sa-sheet-quick-action__arrow {
  width: 24px;
  height: 24px;
  min-width: 24px;
  color: rgba(17,17,17,.42);
  display: grid;
  place-items: center;
}

.goournet-panel .sa-sheet-quick-action__arrow svg {
  width: 20px;
  height: 20px;
  display: block;
}

@media (max-width: 1024px) {
  .goournet-panel .sa-bottom-sheet-quick-actions {
    padding: 12px 12px 0;
  }
}

@media (max-width: 600px) {
  .goournet-panel .sa-sheet-quick-action {
    min-height: 58px;
    padding: 10px 12px;
    border-radius: 16px;
  }

  .goournet-panel .sa-sheet-quick-action__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
  }

  .goournet-panel .sa-sheet-quick-action__title {
    font-size: .91rem;
  }

  .goournet-panel .sa-sheet-quick-action__meta {
    font-size: .76rem;
  }
}




/* ============================================================
   🧭 TOPBAR · FILA PRINCIPAL (Selector + Visible Web + Campana)
   - Desktop / tablet centrado
   - Móvil compacto y estable
   - Switch móvil corregido
   ============================================================ */

.sa-topbar{
  overflow: visible;
}

.sa-topbar .rp-topbar-head{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sa-topbar .rp-topbar-title-row{
  display: flex;
  align-items: center;
  justify-content: center;     /* ✅ CENTRADO en desktop/tablet */
  gap: 12px;
  flex-wrap: nowrap;
  width: 100%;
  padding: 16px 30px 14px;
  overflow: visible;

  --rp-topbar-ctrl-fs: 0.95rem;
  --rp-accent: #e03131;
  --rp-accent2: #ff4d4d;
  --rp-pill-w: clamp(260px, 22vw, 360px);
}

.rp-topbar-notif{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* 1) Selector de sucursal */
#rp-branch-selector.rp-topbar-branch-title--picker{
  appearance: none;
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  color: #111;
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow:
    0 10px 22px rgba(17,17,17,.10),
    0 2px 6px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.85);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
  width: var(--rp-pill-w);
  flex: 0 0 auto;
  font-family: "Outfit", sans-serif;
}

#rp-branch-selector.rp-topbar-branch-title--picker:hover{
  border-color: #111;
  box-shadow:
    0 14px 28px rgba(17,17,17,.14),
    0 3px 10px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-branch-selector.rp-topbar-branch-title--picker:active{
  transform: translateY(1px);
}

#rp-branch-selector.rp-topbar-branch-title--picker:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

#rp-branch-selector.is-disabled,
#rp-branch-selector:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

#rp-branch-selector .rp-topbar-branch-icon{
  width: 20px;
  height: 20px;
  display: inline-flex;
  color: #111;
  flex: 0 0 auto;
}

#rp-branch-selector .rp-topbar-branch-icon svg{
  width: 20px;
  height: 20px;
  display: block;
}

#rp-topbar-sucursal-title{
  margin: 0;
  font-size: var(--rp-topbar-ctrl-fs);
  font-weight: 650;
  line-height: 1.1;
  color: #111;
  font-family: "Outfit", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 2) Visible/Oculto en la web */
.rp-topbar-branch-visibility{
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  color: #111;
  border-radius: 999px;
  padding: 10px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  width: var(--rp-pill-w);
  flex: 0 0 auto;
  box-shadow:
    0 10px 22px rgba(17,17,17,.10),
    0 2px 6px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.85);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.rp-topbar-branch-visibility:hover{
  border-color: #111;
}

.rp-topbar-branch-visibility:focus-within{
  border-color: #111;
  box-shadow:
    0 14px 28px rgba(17,17,17,.14),
    0 3px 10px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-topbar-visible-label{
  font-size: var(--rp-topbar-ctrl-fs);
  font-weight: 650;
  color: #111;
  white-space: nowrap;
  font-family: "Outfit", sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

#rp-topbar-visible-label.is-active{
  color: #111;
}

/* 3) Campanita */
#rp-notif-bell.sa-notif-btn--lottie{
  appearance: none;
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  color: #111;
  width: 48px;                 /* ✅ un poco más grande */
  height: 48px;                /* ✅ un poco más grande */
  padding: 0;
  line-height: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  box-shadow:
    0 10px 22px rgba(17,17,17,.10),
    0 2px 6px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.85);
  cursor: pointer;
  position: relative;
  transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
  flex: 0 0 auto;
}

#rp-notif-bell.sa-notif-btn--lottie:hover{
  border-color: #111;
}

#rp-notif-bell.sa-notif-btn--lottie:active{
  transform: translateY(1px);
}

#rp-notif-bell.sa-notif-btn--lottie:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

#rp-notif-lottie.sa-notif-lottie{
  width: 36px;                 /* ✅ campana más grande */
  height: 36px;                /* ✅ campana más grande */
  margin: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

#rp-notif-bell.sa-notif-btn--lottie img{
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

#rp-notif-badge.sa-notif-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* 4) Switch */
.rp-topbar-branch-visibility .rp-switch-control{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.rp-topbar-branch-visibility .rp-switch-control .rp-switch-input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rp-topbar-branch-visibility .rp-switch-control .rp-switch-track{
  --sw-w: 40px;
  --sw-h: 22px;
  --sw-pad: 2px;
  --sw-thumb: 18px;
  --sw-shift: 18px;

  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;
  box-sizing: border-box;
  background: #ffffff;
  border: 2px solid rgba(17,17,17,.18);
  box-shadow:
    0 10px 22px rgba(17,17,17,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
  position: relative;
  display: inline-block;
  overflow: visible;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.rp-topbar-branch-visibility .rp-switch-control .rp-switch-track::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .18;
  background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 58%);
}

.rp-topbar-branch-visibility .rp-switch-control .rp-switch-track::after{
  content: "";
  position: absolute;
  top: var(--sw-pad);
  bottom: var(--sw-pad);
  right: var(--sw-pad);
  width: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.rp-topbar-branch-visibility .rp-switch-control .rp-switch-thumb{
  width: var(--sw-thumb);
  height: var(--sw-thumb);
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(17,17,17,.14);
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: var(--sw-pad);
  transform: translateY(-50%) translateX(0);
  box-shadow:
    0 10px 18px rgba(17,17,17,.18),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.rp-topbar-branch-visibility .rp-switch-control .rp-switch-thumb::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  pointer-events: none;
}

.rp-topbar-branch-visibility .rp-switch-control .rp-switch-input:checked + .rp-switch-track{
  background: #ff002a;
  border-color: rgba(0,0,0,.10);
  box-shadow:
    0 12px 22px rgba(255,0,42,.18),
    inset 0 2px 7px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.rp-topbar-branch-visibility .rp-switch-control .rp-switch-input:checked + .rp-switch-track::after{
  opacity: .55;
}

.rp-topbar-branch-visibility .rp-switch-control .rp-switch-input:checked + .rp-switch-track .rp-switch-thumb{
  transform: translateY(-50%) translateX(var(--sw-shift));
  border-color: rgba(0,0,0,.12);
}

.rp-topbar-branch-visibility .rp-switch-control .rp-switch-input:focus-visible + .rp-switch-track{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

.rp-topbar-branch-visibility .rp-switch-control .rp-switch-input:disabled + .rp-switch-track{
  opacity: .55;
  cursor: not-allowed;
}

.rp-topbar-branch-visibility .rp-switch-control:has(.rp-switch-input:disabled){
  cursor: not-allowed;
}

/* Tablet y desktop */
@media (min-width: 601px){
  .sa-topbar .rp-topbar-title-row{
    justify-content: center;
  }
}

/* Móvil */
@media (max-width: 600px){
  .sa-topbar .rp-topbar-head{
    align-items: stretch;
  }

  .sa-topbar .rp-topbar-title-row{
    justify-content: flex-start;  /* ✅ móvil sigue natural, no forzado al centro */
    padding: 12px 16px 10px;
    gap: 10px;
    --rp-topbar-ctrl-fs: 0.86rem;
  }

  #rp-branch-selector.rp-topbar-branch-title--picker{
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 9px 10px;
  }

  #rp-branch-selector .rp-topbar-branch-icon{
    width: 18px;
    height: 18px;
  }

  #rp-branch-selector .rp-topbar-branch-icon svg{
    width: 18px;
    height: 18px;
  }

  .rp-topbar-branch-visibility{
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 9px 10px;
    gap: 10px;
  }

  #rp-topbar-visible-label{
    max-width: 140px;
  }

  #rp-notif-bell.sa-notif-btn--lottie{
    width: 40px;
    height: 40px;
  }

  #rp-notif-lottie.sa-notif-lottie,
  #rp-notif-bell.sa-notif-btn--lottie img{
    width: 26px;
    height: 26px;
  }

  .rp-topbar-branch-visibility .rp-switch-control .rp-switch-track{
    --sw-w: 36px;
    --sw-h: 20px;
    --sw-pad: 2px;
    --sw-thumb: 16px;
    --sw-shift: 16px;
    width: var(--sw-w);
    height: var(--sw-h);
  }

  .rp-topbar-branch-visibility .rp-switch-control .rp-switch-thumb{
    width: var(--sw-thumb);
    height: var(--sw-thumb);
  }

  .rp-topbar-branch-visibility .rp-switch-control .rp-switch-input:checked + .rp-switch-track .rp-switch-thumb{
    transform: translateY(-50%) translateX(var(--sw-shift)); /* ✅ corregido */
  }
}

/* ==============================================================================================================
   ✅ SECCIÓN: ÓRDENES (solo #rp-view-ordenes)
   - Header + filtros + tarjetas + paginación + vacío + base modal
   - SIN estilos globales (todo va scoping a #rp-view-ordenes)
   ============================================================================================================== */

#rp-view-ordenes{
  padding: 10px 30px 28px;
  font-family: "Outfit", sans-serif;

  --ord-text: #111;
  --ord-muted: rgba(17,17,17,.62);
  --ord-border: rgba(17,17,17,.10);
  --ord-surface: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  --ord-shadow:
    0 12px 26px rgba(17,17,17,.10),
    0 2px 8px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.85);

  --ord-red1: #e03131;
  --ord-red2: #ff4d4d;

  --ord-delivery: #e03131;
  --ord-mesa: #2563eb;
  --ord-encamino: #f59e0b;
  --ord-recojo: #10b981;

  /* vivos */
  --ord-green1: #16a34a;
  --ord-green2: #22c55e;
  --ord-blue1: #2563eb;
  --ord-blue2: #3b82f6;
}

@media (max-width: 600px){
  #rp-view-ordenes{ padding: 8px 16px 20px; }
}

/* ------------------------------
   Header
   ------------------------------ */
#rp-view-ordenes .rp-page-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 6px 0 14px;
}

#rp-view-ordenes .rp-page-head > div:first-child{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

#rp-view-ordenes .rp-title{
  margin: 0;
  color: var(--ord-text);
  font-weight: 750;
  letter-spacing: -0.02em;
  font-size: clamp(1.15rem, 1.05rem + .6vw, 1.6rem);
}

#rp-view-ordenes .rp-subtitle{
  margin: 0;
  color: var(--ord-muted);
  font-size: .96rem;
  line-height: 1.2;
}

#rp-view-ordenes .rp-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

@media (max-width: 600px){
  #rp-view-ordenes .rp-page-head{
    flex-direction: column;
    align-items: stretch;
  }

  #rp-view-ordenes .rp-page-head > div:first-child{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  #rp-view-ordenes .rp-actions{
    width: 100%;
    justify-content: flex-start;
  }
}

/* ------------------------------
   Botones base
   ------------------------------ */
#rp-view-ordenes .rp-btn,
#rp-view-ordenes .rp-ord-page-nav,
#rp-view-ordenes .rp-ord-pagebtn{
  appearance: none;
  border: 1.5px solid transparent;
  background: var(--ord-surface);
  color: var(--ord-text);
  border-radius: 999px;
  min-height: 40px;
  padding: 9px 14px;
  font-family: "Outfit", sans-serif;
  font-weight: 650;
  font-size: .92rem;
  box-shadow: var(--ord-shadow);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease, opacity .12s ease, background .16s ease, color .16s ease;
}

#rp-view-ordenes .rp-btn:hover,
#rp-view-ordenes .rp-ord-page-nav:hover,
#rp-view-ordenes .rp-ord-pagebtn:hover{
  border-color: #111;
}

#rp-view-ordenes .rp-btn:active,
#rp-view-ordenes .rp-ord-page-nav:active,
#rp-view-ordenes .rp-ord-pagebtn:active{
  transform: translateY(1px);
}

#rp-view-ordenes .rp-btn:focus-visible,
#rp-view-ordenes .rp-ord-page-nav:focus-visible,
#rp-view-ordenes .rp-ord-pagebtn:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

#rp-view-ordenes .rp-btn:disabled,
#rp-view-ordenes .rp-ord-page-nav:disabled,
#rp-view-ordenes .rp-ord-pagebtn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#rp-view-ordenes .rp-btn-ghost,
#rp-view-ordenes .rp-btn--ghost{
  border-color: rgba(17,17,17,.10);
  box-shadow:
    0 10px 20px rgba(17,17,17,.08),
    0 2px 6px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.85);
}

#rp-view-ordenes .rp-btn-primary,
#rp-view-ordenes .rp-btn--primary{
  background: linear-gradient(135deg, var(--ord-red1) 0%, var(--ord-red2) 100%);
  color: #fff;
  border-color: rgba(0,0,0,.10);
  box-shadow:
    0 12px 26px rgba(224,49,49,.18),
    0 2px 8px rgba(17,17,17,.06);
}

#rp-view-ordenes .rp-btn-primary:hover,
#rp-view-ordenes .rp-btn--primary:hover{
  border-color: rgba(0,0,0,.28);
}

#rp-view-ordenes .rp-btn-danger{
  background: #fff;
  color: var(--ord-red1);
  border-color: rgba(224,49,49,.35);
  box-shadow:
    0 10px 20px rgba(17,17,17,.08),
    0 2px 6px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.85);
}

#rp-view-ordenes .rp-btn-danger:hover{
  border-color: rgba(224,49,49,.65);
  background: rgba(224,49,49,.06);
}

/* base para icon buttons */
#rp-view-ordenes .rp-icon-btn{
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(17,17,17,.10);
  background: var(--ord-surface);
  box-shadow: var(--ord-shadow);
  cursor: pointer;
  transition: border-color .16s ease, transform .12s ease, opacity .12s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

#rp-view-ordenes .rp-icon-btn:hover{
  border-color: #111;
  box-shadow:
    0 14px 28px rgba(17,17,17,.12),
    0 2px 8px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-view-ordenes .rp-icon-btn:active{ transform: translateY(1px); }

#rp-view-ordenes .rp-icon-btn svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* ------------------------------
   Filtros
   ------------------------------ */
#rp-view-ordenes .rp-ord-filters{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 16px;
}

#rp-view-ordenes .rp-ord-filter--accent[data-accent="delivery"]{ --ord-accent: var(--ord-delivery); }
#rp-view-ordenes .rp-ord-filter--accent[data-accent="mesa"]{ --ord-accent: var(--ord-mesa); }
#rp-view-ordenes .rp-ord-filter--accent[data-accent="encamino"]{ --ord-accent: var(--ord-encamino); }
#rp-view-ordenes .rp-ord-filter--accent[data-accent="recojo"]{ --ord-accent: var(--ord-recojo); }

#rp-view-ordenes .rp-ord-filter-btn{
  appearance: none;
  border: 1.5px solid rgba(17,17,17,.10);
  background: var(--ord-surface);
  color: var(--ord-text);
  border-radius: 999px;
  min-height: 46px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: .95rem;
  box-shadow: var(--ord-shadow);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease, background .16s ease, color .16s ease;
  position: relative;
}

#rp-view-ordenes .rp-ord-filter-btn:hover{ border-color: #111; }
#rp-view-ordenes .rp-ord-filter-btn:active{ transform: translateY(1px); }
#rp-view-ordenes .rp-ord-filter-btn:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

#rp-view-ordenes .rp-ord-filter-btn.rp-ord-filter--accent{
  width: clamp(148px, 12vw + 40px, 188px);
  flex: 0 0 auto;
}

#rp-view-ordenes .rp-ord-filter-btn.is-active{
  box-shadow:
    0 16px 34px rgba(17,17,17,.14),
    0 3px 10px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.18);
}

#rp-view-ordenes .rp-ord-filter-btn.rp-ord-filter--accent.is-active[data-accent="delivery"]{
  background: linear-gradient(135deg, #e03131 0%, #ff4d4d 100%);
  color: #fff;
  border-color: transparent;
}
#rp-view-ordenes .rp-ord-filter-btn.rp-ord-filter--accent.is-active[data-accent="mesa"]{
  background: linear-gradient(135deg, #2563eb 0%, #4f8cff 100%);
  color: #fff;
  border-color: transparent;
}
#rp-view-ordenes .rp-ord-filter-btn.rp-ord-filter--accent.is-active[data-accent="encamino"]{
  background: linear-gradient(135deg, #f59e0b 0%, #ffbc42 100%);
  color: #fff;
  border-color: transparent;
}
#rp-view-ordenes .rp-ord-filter-btn.rp-ord-filter--accent.is-active[data-accent="recojo"]{
  background: linear-gradient(135deg, #10b981 0%, #23d39a 100%);
  color: #fff;
  border-color: transparent;
}

#rp-view-ordenes .rp-ord-filter-btn:not(.rp-ord-filter--accent).is-active{
  border-color: #111;
  background: #fff;
  color: #111;
  box-shadow:
    0 14px 28px rgba(17,17,17,.10),
    0 2px 8px rgba(17,17,17,.05);
}

#rp-view-ordenes .rp-ord-filter-ico{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-color: var(--ord-accent, #111);
  -webkit-mask-image: var(--ico);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--ico);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

#rp-view-ordenes .rp-ord-filter-btn.rp-ord-filter--accent .rp-ord-filter-ico{
  width: 22px;
  height: 22px;
}

#rp-view-ordenes .rp-ord-filter-btn.rp-ord-filter--accent.is-active .rp-ord-filter-ico{
  background-color: #fff;
}

@supports not (-webkit-mask-image: url("")) {
  #rp-view-ordenes .rp-ord-filter-ico{
    background: var(--ico) center/contain no-repeat;
  }
}

#rp-view-ordenes .rp-ord-filter-label{
  white-space: nowrap;
}

#rp-view-ordenes .rp-ord-filter-badge{
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(17,17,17,.08);
  border: 1px solid rgba(17,17,17,.10);
  color: rgba(17,17,17,.85);
  font-size: .78rem;
  font-weight: 750;
  line-height: 1;
}

#rp-view-ordenes .rp-ord-filter-btn.rp-ord-filter--accent.is-active .rp-ord-filter-badge{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}

@media (max-width: 768px){
  #rp-view-ordenes .rp-ord-filters{ gap: 10px; }

  #rp-view-ordenes .rp-ord-filter-btn.rp-ord-filter--accent{
    width: clamp(132px, 36vw, 170px);
  }
}

@media (max-width: 600px){
  #rp-view-ordenes .rp-ord-filter-btn{
    min-height: 42px;
    padding: 9px 12px;
    font-size: .88rem;
  }

  #rp-view-ordenes .rp-ord-filter-btn.rp-ord-filter--accent{
    width: calc(50% - 6px);
    min-width: 140px;
  }

  #rp-view-ordenes .rp-ord-filter-btn.rp-ord-filter--accent .rp-ord-filter-ico{
    width: 20px;
    height: 20px;
  }
}

/* ------------------------------
   Grid de Órdenes
   ------------------------------ */
#rp-view-ordenes #rp-ord-list{
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
}

@media (min-width: 0px){
  #rp-view-ordenes #rp-ord-list{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
@media (min-width: 700px){
  #rp-view-ordenes #rp-ord-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  #rp-view-ordenes #rp-ord-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px){
  #rp-view-ordenes #rp-ord-list{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------
   Tarjetas
   ------------------------------ */
#rp-view-ordenes .rp-ord-card{
  position: relative;
  border-radius: 18px;
  background: var(--ord-surface);
  border: 1.5px solid rgba(17,17,17,.08);
  box-shadow: var(--ord-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

#rp-view-ordenes .rp-ord-card[data-modo="delivery"]{
  --card-accent: var(--ord-delivery);
  --card-unread-bg: rgba(239, 68, 68, .25);
}

#rp-view-ordenes .rp-ord-card[data-modo="mesa"]{
  --card-accent: var(--ord-mesa);
  --card-unread-bg: rgba(59, 130, 246, .25);
}

#rp-view-ordenes .rp-ord-card[data-modo="encamino"]{

    --card-accent: var(--ord-encamino);
  --card-unread-bg: rgba(245, 158, 11, .25);
}

#rp-view-ordenes .rp-ord-card[data-modo="recojo"]{
  --card-accent: var(--ord-recojo);
  --card-unread-bg: rgba(16, 185, 129, .25);
}

#rp-view-ordenes .rp-ord-card{
  --card-accent: rgba(17,17,17,.35);
  --card-unread-bg: rgba(17,17,17,.06);
  background: #fff;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

#rp-view-ordenes .rp-ord-card.is-unread{
  background:
    linear-gradient(0deg, rgba(255,255,255,.62), rgba(255,255,255,.62)),
    var(--card-unread-bg);
  border-color: rgba(17,17,17,.28);
  box-shadow:
    0 16px 34px rgba(17,17,17,.09),
    0 3px 10px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.88);
}

#rp-view-ordenes .rp-ord-card::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 5px;
  border-radius: 999px;
  background: var(--card-accent);
  opacity: .95;
}

#rp-view-ordenes .rp-ord-card:hover{
  border-color: rgba(17,17,17,.20);
  box-shadow:
    0 18px 40px rgba(17,17,17,.14),
    0 3px 10px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
}



/* head */
#rp-view-ordenes .rp-ord-card__head{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px 14px 12px 20px;
  border-bottom: 1px solid rgba(17,17,17,.08);
  min-width: 0;
}

#rp-view-ordenes .rp-ord-card__head-left{ min-width: 0; }

#rp-view-ordenes .rp-ord-ticket{
  font-weight: 800;
  color: var(--ord-text);
  letter-spacing: -0.01em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

#rp-view-ordenes .rp-ord-card__sub{
  margin-top: 4px;
  font-size: .82rem;
  color: var(--ord-muted);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

#rp-view-ordenes .rp-ord-card__head-right{
  text-align: right;
  display: grid;
  gap: 8px;
  justify-items: end;
  align-content: start;
  min-width: 0;
}

#rp-view-ordenes .rp-ord-card__total{
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ord-text);
  white-space: nowrap;
}

/* badge estado (VIVO + texto blanco) */
#rp-view-ordenes .rp-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  min-height: 30px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 850;
  line-height: 1;
  border: 1px solid transparent;
  color: #fff;
  white-space: nowrap;
  box-shadow:
    0 10px 18px rgba(17,17,17,.10),
    inset 0 1px 0 rgba(255,255,255,.18);
}

#rp-view-ordenes .rp-badge[data-status="pendiente"]{
  background: linear-gradient(135deg, #f59e0b 0%, #ffbc42 100%);
}
#rp-view-ordenes .rp-badge[data-status="revision"],
#rp-view-ordenes .rp-badge[data-status="comprobante"]{
  background: linear-gradient(135deg, var(--ord-blue1) 0%, #4f8cff 100%);
}
#rp-view-ordenes .rp-badge[data-status="aprobada"],
#rp-view-ordenes .rp-badge[data-status="aceptada"]{
  background: linear-gradient(135deg, var(--ord-green1) 0%, var(--ord-green2) 100%);
}
#rp-view-ordenes .rp-badge[data-status="contabilizada"]{
  background: linear-gradient(135deg, var(--ord-blue1) 0%, var(--ord-blue2) 100%);
}
#rp-view-ordenes .rp-badge[data-status="rechazada"],
#rp-view-ordenes .rp-badge[data-status="cancelada"]{
  background: linear-gradient(135deg, var(--ord-red1) 0%, var(--ord-red2) 100%);
}

/* body */
#rp-view-ordenes .rp-ord-card__body{
  padding: 12px 14px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

#rp-view-ordenes .rp-ord-client{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto; /* ✅ mantiene WhatsApp a la derecha */
  align-items: start;
  gap: 12px;
  min-width: 0;
}

#rp-view-ordenes .rp-ord-client-name{
  font-weight: 650;
  color: var(--ord-text);
  min-width: 0;
  line-height: 1.18;

  display: inline-flex;
  align-items: flex-start;
  gap: 8px;

  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#rp-view-ordenes .rp-ord-client-name::before{
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  background-color: rgba(17,17,17,.72);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12a4.5 4.5 0 1 0-4.5-4.5A4.5 4.5 0 0 0 12 12Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12a4.5 4.5 0 1 0-4.5-4.5A4.5 4.5 0 0 0 12 12Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

#rp-view-ordenes .rp-ord-client-meta{
  flex: 0 0 auto;
  justify-self: end;
}

#rp-view-ordenes .rp-ord-client-muted{
  color: var(--ord-muted);
  font-size: .86rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#rp-view-ordenes .rp-ord-info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

#rp-view-ordenes .rp-ord-info-row__left{
  min-width:0;
  flex:1 1 auto;
}

#rp-view-ordenes .rp-ord-info-row__right{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
}

#rp-view-ordenes .rp-ord-kitchen-pill{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  flex:0 0 auto;
}

#rp-view-ordenes .rp-ord-kitchen-pill[data-kitchen-state="pendiente"]{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.18);
  color: #b45309;
}

#rp-view-ordenes .rp-ord-kitchen-pill[data-kitchen-state="en_preparacion"]{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.16);
  color: #1d4ed8;
}

#rp-view-ordenes .rp-ord-kitchen-pill[data-kitchen-state="lista"]{
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.16);
  color: #047857;
}

/* WhatsApp */
#rp-view-ordenes .rp-ord-client-wa{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: 0;
  background: #22c55e;
  border: 1px solid rgba(0,0,0,.10);
  color: #fff;
  box-shadow:
    0 10px 20px rgba(34, 197, 94, .24),
    0 2px 6px rgba(17,17,17,.06);
  transition: transform .12s ease, border-color .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}

#rp-view-ordenes .rp-ord-client-wa:hover{
  border-color: rgba(0,0,0,.22);
  transform: translateY(-1px);
  box-shadow:
    0 14px 24px rgba(34, 197, 94, .28),
    0 3px 8px rgba(17,17,17,.06);
}

#rp-view-ordenes .rp-ord-client-wa:active{
  transform: translateY(0);
}

/* key-values */
#rp-view-ordenes .rp-ord-card__kv{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#rp-view-ordenes .rp-kv{
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.65);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  min-width: 0;
}

#rp-view-ordenes .rp-kv > span{
  margin: 0;
  display: inline;
  font-size: .78rem;
  font-weight: 750;
  color: rgba(17,17,17,.58);
}

#rp-view-ordenes .rp-kv > strong{
  margin: 0;
  display: inline;
  font-size: .92rem;
  font-weight: 850;
  color: var(--ord-text);
  text-align: right;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------
   Acciones: 6 botones circulares
   Orden: ver / imprimir / aprobar / métricas / rechazar / basurero
   ------------------------------ */
#rp-view-ordenes .rp-ord-card__actions{
  padding: 12px 14px 14px 20px;
  border-top: 1px solid rgba(17,17,17,.08);
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* todos los botones de acción visibles */
#rp-view-ordenes .rp-ord-action{ flex: 0 0 auto; }

/* los 5 botones de texto pasan a círculo e ícono-only */
#rp-view-ordenes .rp-ord-action.rp-btn{
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
  position: relative;

  background: var(--ord-surface);
  color: #222;
  border: 1.5px solid rgba(17,17,17,.10);
  box-shadow:
    0 10px 20px rgba(17,17,17,.08),
    0 2px 6px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.85);
}

/* iconos por máscara */
#rp-view-ordenes .rp-ord-action.rp-btn[data-act]::before{
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--rp-act-ico) center/contain no-repeat;
          mask: var(--rp-act-ico) center/contain no-repeat;
  opacity: 1;
}

/* orden visual */
#rp-view-ordenes .rp-ord-action[data-act="ver"]{ order: 1; }
#rp-view-ordenes .rp-ord-action[data-act="imprimir"]{ order: 2; }
#rp-view-ordenes .rp-ord-action[data-act="aprobar"]{ order: 3; }
#rp-view-ordenes .rp-ord-action[data-act="contabilizar"]{ order: 4; }
#rp-view-ordenes .rp-ord-action[data-act="rechazar"]{ order: 5; }
#rp-view-ordenes .rp-ord-action[data-act="delete"]{ order: 6; }

/* íconos */
#rp-view-ordenes .rp-ord-action.rp-btn[data-act="ver"]{
  --rp-act-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 3h8l3 3v15a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M9 13h6M9 17h6M9 9h3'/%3E%3C/svg%3E");
}
#rp-view-ordenes .rp-ord-action.rp-btn[data-act="imprimir"]{
  --rp-act-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9V3h12v6'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 14h12v7H6z'/%3E%3C/svg%3E");
}
#rp-view-ordenes .rp-ord-action.rp-btn[data-act="aprobar"]{
  --rp-act-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
#rp-view-ordenes .rp-ord-action.rp-btn[data-act="contabilizar"]{
  --rp-act-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 19V5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 19v-6M12 19V9M16 19v-8M20 19V7'/%3E%3C/svg%3E");
}
#rp-view-ordenes .rp-ord-action.rp-btn[data-act="rechazar"]{
  --rp-act-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* hover base neutro */
#rp-view-ordenes .rp-ord-action.rp-btn[data-act]:hover{
  transform: translateY(-1px);
  border-color: #111;
}
#rp-view-ordenes .rp-ord-action.rp-btn[data-act]:active{
  transform: translateY(0);
}

/* feedback vivo al PRESIONAR (sin opacidad baja) */
#rp-view-ordenes .rp-ord-action.rp-btn[data-act="aprobar"]:active:not(:disabled){
  background: linear-gradient(135deg, var(--ord-green1) 0%, var(--ord-green2) 100%);
  color: #fff;
  border-color: transparent;
}
#rp-view-ordenes .rp-ord-action.rp-btn[data-act="contabilizar"]:active:not(:disabled){
  background: linear-gradient(135deg, var(--ord-blue1) 0%, var(--ord-blue2) 100%);
  color: #fff;
  border-color: transparent;
}

/* rechazar: neutro, pero hover rojo */
#rp-view-ordenes .rp-ord-action.rp-btn[data-act="rechazar"]:hover{
  border-color: rgba(239,68,68,.70);
  color: #ef4444;
  background: #fff;
}

/* basurero: círculo perfecto + icono blanco SIEMPRE visible */
#rp-view-ordenes .rp-ord-action[data-act="delete"].rp-icon-btn{
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;

  background: linear-gradient(135deg, var(--ord-red1) 0%, var(--ord-red2) 100%);
  border-color: transparent;
  color: #fff;

  box-shadow:
    0 12px 24px rgba(224,49,49,.22),
    0 2px 6px rgba(17,17,17,.05);
}

#rp-view-ordenes .rp-ord-action[data-act="delete"].rp-icon-btn:hover{
  border-color: transparent;
  transform: translateY(-1px);
}
#rp-view-ordenes .rp-ord-action[data-act="delete"].rp-icon-btn:active{
  transform: translateY(0);
}

#rp-view-ordenes .rp-ord-action[data-act="delete"].rp-icon-btn svg{
  width: 18px;
  height: 18px;
  display: block;
  color: currentColor;
}
#rp-view-ordenes .rp-ord-action[data-act="delete"].rp-icon-btn svg *{
  stroke: currentColor !important;
  opacity: 1 !important;
}
#rp-view-ordenes .rp-ord-action[data-act="delete"].rp-icon-btn svg [fill]:not([fill="none"]){
  fill: currentColor !important;
}

/* ✅ Estado vivo aunque el botón esté disabled (por lógica del JS) */
#rp-view-ordenes .rp-ord-card:has(.rp-badge[data-status="aprobada"]) .rp-ord-action[data-act="aprobar"],
#rp-view-ordenes .rp-ord-card:has(.rp-badge[data-status="aprobada"]) .rp-ord-action[data-act="aprobar"]:disabled{
  background: linear-gradient(135deg, var(--ord-green1) 0%, var(--ord-green2) 100%);
  color: #fff;
  border-color: transparent;
  opacity: 1;
  cursor: default;
  box-shadow:
    0 12px 24px rgba(34,197,94,.26),
    0 2px 6px rgba(17,17,17,.05);
}

#rp-view-ordenes .rp-ord-card:has(.rp-badge[data-status="contabilizada"]) .rp-ord-action[data-act="contabilizar"],
#rp-view-ordenes .rp-ord-card:has(.rp-badge[data-status="contabilizada"]) .rp-ord-action[data-act="contabilizar"]:disabled{
  background: linear-gradient(135deg, var(--ord-blue1) 0%, var(--ord-blue2) 100%);
  color: #fff;
  border-color: transparent;
  opacity: 1;
  cursor: default;
  box-shadow:
    0 12px 24px rgba(37,99,235,.26),
    0 2px 6px rgba(17,17,17,.05);
}

/* ------------------------------
   Responsive interno (MÓVIL)
   - Mantiene la MISMA estructura que desktop
   - Nombre: máximo 2 líneas sin mover WhatsApp
   ------------------------------ */
@media (max-width: 600px){
  #rp-view-ordenes .rp-ord-card::before{
    left: 8px;
    top: 10px;
    bottom: 10px;
  }

  #rp-view-ordenes .rp-ord-card__head{
    padding: 12px 12px 10px 18px;
    gap: 10px;
  }

  /* ✅ precio + badge siguen a la derecha */
  #rp-view-ordenes .rp-ord-card__head-right{
    justify-items: end;
    text-align: right;
  }

  #rp-view-ordenes .rp-ord-card__total{
    font-size: 1rem;
  }

  #rp-view-ordenes .rp-badge{
    min-height: 28px;
    padding: 0 11px;
    font-size: .74rem;
  }

  #rp-view-ordenes .rp-ord-card__body{
    padding: 10px 12px 10px 18px;
  }

  #rp-view-ordenes .rp-ord-info-row{
    align-items:flex-start;
  }

  #rp-view-ordenes .rp-ord-info-row__right{
    width:100%;
    justify-content:flex-end;
  }

  #rp-view-ordenes .rp-ord-client{
    gap: 10px; /* más compacto */
  }

  /* Nombre: 2 líneas máximo + WhatsApp NO baja */
  #rp-view-ordenes .rp-ord-client-name{
    position: relative;
    padding-left: 26px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #rp-view-ordenes .rp-ord-client-name::before{
    position: absolute;
    left: 0;
    top: 2px;
    margin: 0;
  }

  #rp-view-ordenes .rp-ord-client-meta{
    justify-self: end;
  }

  #rp-view-ordenes .rp-ord-card__actions{
    padding: 10px 12px 12px 18px;
    gap: 8px;
  }

  #rp-view-ordenes .rp-ord-action.rp-btn,
  #rp-view-ordenes .rp-ord-action[data-act="delete"].rp-icon-btn{
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  #rp-view-ordenes .rp-ord-action.rp-btn[data-act]::before{
    width: 16px;
    height: 16px;
  }

  #rp-view-ordenes .rp-ord-action[data-act="delete"].rp-icon-btn svg{
    width: 16px;
    height: 16px;
  }
}

/* ------------------------------
   Wrap + vacío
   ------------------------------ */
#rp-view-ordenes .rp-ord-wrap{
  margin-top: 6px;
}

#rp-view-ordenes .rp-ord-tablewrap{
  overflow: visible;
}

#rp-view-ordenes .rp-ord-empty{
  margin-top: 14px;
  text-align: center;
  padding: 28px 16px;
  border-radius: 18px;
  border: 1.5px dashed rgba(17,17,17,.18);
  background: rgba(255,255,255,.65);
}

#rp-view-ordenes .rp-ord-empty-title{
  font-weight: 850;
  color: var(--ord-text);
  font-size: 1.05rem;
}

#rp-view-ordenes .rp-ord-empty-sub{
  margin-top: 4px;
  color: var(--ord-muted);
}

/* ------------------------------
   Paginación
   ------------------------------ */
#rp-view-ordenes .rp-ord-pager{
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

#rp-view-ordenes .rp-ord-pages{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

#rp-view-ordenes .rp-ord-pageinfo{
  display: none;
}

#rp-view-ordenes .rp-ord-page-nav{
  min-height: 42px;
  padding: 10px 18px;
  font-weight: 700;
  box-shadow:
    0 14px 28px rgba(17,17,17,.10),
    0 2px 8px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-view-ordenes .rp-ord-pagebtn{
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 999px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#rp-view-ordenes .rp-ord-pagebtn.is-active{
  border-color: #111;
  background: #fff;
  box-shadow:
    0 14px 28px rgba(17,17,17,.10),
    0 2px 8px rgba(17,17,17,.05);
}

#rp-view-ordenes .rp-ord-page-ellipsis{
  color: rgba(17,17,17,.45);
  font-weight: 800;
  padding: 0 4px;
}

/* ============================================================
   MODAL · VER ORDEN
   Scope: SOLO #rp-view-ordenes #rp-ord-modal
   ============================================================ */

#rp-view-ordenes #rp-ord-modal[hidden]{
  display: none !important;
}

#rp-view-ordenes #rp-ord-modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Outfit", sans-serif;

  --rom-surface: var(--ord-surface, linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%));
  --rom-surface-solid: #ffffff;
  --rom-text: rgba(17,17,17,.92);
  --rom-muted: rgba(17,17,17,.62);
  --rom-border: rgba(17,17,17,.10);
  --rom-border-strong: rgba(17,17,17,.16);
  --rom-focus: rgba(17,17,17,.45);

  --rom-accent: #ff002a;
  --rom-accent-strong: #e02b2b;
  --rom-accent-soft: rgba(255,0,42,.08);
  --rom-accent-shadow:
    0 14px 26px rgba(255,0,42,.22),
    0 2px 8px rgba(17,17,17,.06);

  --rom-sky-1: var(--pd-sky1, #00a8ff);
  --rom-sky-2: var(--pd-sky2, #0097e6);
  --rom-sky-shadow:
    0 12px 24px rgba(0,168,255,.18),
    0 2px 6px rgba(17,17,17,.05);

  --rom-wa: #25D366;
  --rom-wa-dark: #1fa855;
  --rom-wa-shadow:
    0 12px 24px rgba(37,211,102,.18),
    0 2px 6px rgba(17,17,17,.05);

  --rom-shadow:
    0 24px 60px rgba(0,0,0,.25),
    0 2px 8px rgba(17,17,17,.06);

  --rom-soft-shadow:
    0 12px 26px rgba(17,17,17,.06),
    0 2px 8px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.88);

  --rom-radius-xl: 22px;
  --rom-radius-lg: 20px;
  --rom-radius-md: 18px;
  --rom-radius-sm: 16px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-card{
  position: relative;
  width: min(1120px, calc(100vw - 28px));
  height: min(920px, calc(100dvh - 28px));
  max-height: calc(100dvh - 28px);

  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;

  border: 1px solid var(--rom-border-strong);
  border-radius: var(--rom-radius-xl);
  background: var(--rom-surface);
  box-shadow: var(--rom-shadow);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-head{
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  border-bottom: 1px solid var(--rom-border);
  background: var(--rom-surface);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-titlewrap{
  min-width: 0;
  flex: 1 1 auto;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-title{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;

  margin: 0;
  color: var(--rom-text);
  font-size: clamp(1.35rem, 1.05rem + .8vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-ticket{
  min-width: 0;
  overflow-wrap: anywhere;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-total{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 9px 15px;

  border-radius: 999px;
  background: var(--rom-accent-soft);
  color: var(--rom-accent-strong);
  border: 1px solid rgba(255,0,42,.12);

  font-size: clamp(1.05rem, .96rem + .35vw, 1.35rem);
  font-weight: 900;
  white-space: nowrap;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-sub{
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;

  color: var(--rom-muted);
  line-height: 1.35;
  font-size: .92rem;
  font-weight: 500;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-sub-part{
  color: var(--rom-muted);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-sub-part--strong{
  color: var(--rom-text);
  font-weight: 800;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-sub-sep{
  color: rgba(17,17,17,.32);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-close{
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;

  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.14);
  background: #fff;
  box-shadow:
    0 12px 22px rgba(17,17,17,.10),
    0 2px 6px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.92);

  cursor: pointer;
  position: relative;
  padding: 0;
  font-size: 0;
  line-height: 0;
  transition: transform .12s ease, border-color .16s ease, box-shadow .16s ease;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-close::before{
  content: "\00D7";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: rgba(17,17,17,.88);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-close:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.28);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-close:focus-visible{
  outline: 2px solid var(--rom-focus);
  outline-offset: 2px;
}

/* ============================================================
   BODY = ÚNICA ZONA CON SCROLL
   ============================================================ */
#rp-view-ordenes #rp-ord-modal .rp-ord-modal-body{
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;

  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  padding: 0;
  background: var(--rom-surface);
  scrollbar-width: thin;
  scrollbar-color: rgba(17,17,17,.22) transparent;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-body::-webkit-scrollbar{
  width: 10px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-body::-webkit-scrollbar-thumb{
  background: rgba(17,17,17,.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-modal-body::-webkit-scrollbar-track{
  background: transparent;
}

/* ============================================================
   LAYOUT INTERNO
   ============================================================ */
#rp-view-ordenes #rp-ord-modal .rp-ord-layout{
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .95fr);
  gap: 16px;
  align-items: start;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-col{
  min-width: 0;
  display: grid;
  gap: 16px;
  align-content: start;
}

/* ============================================================
   BLOQUES
   ============================================================ */
#rp-view-ordenes #rp-ord-modal .rp-ord-block{
  min-width: 0;
  padding: 16px;

  border: 1px solid var(--rom-border);
  border-radius: var(--rom-radius-lg);
  background: var(--rom-surface-solid);
  box-shadow: var(--rom-soft-shadow);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-block-title{
  margin: 0 0 12px;
  color: var(--rom-text);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-block--productos,
#rp-view-ordenes #rp-ord-modal .rp-ord-block--resumen,
#rp-view-ordenes #rp-ord-modal .rp-ord-block--entrega,
#rp-view-ordenes #rp-ord-modal .rp-ord-block--detalles,
#rp-view-ordenes #rp-ord-modal .rp-ord-block--wa,
#rp-view-ordenes #rp-ord-modal .rp-ord-block--cliente,
#rp-view-ordenes #rp-ord-modal .rp-ord-block--pago{
  position: relative;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-block--entrega{
  border-color: rgba(255,0,42,.14);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-block--entrega::before,
#rp-view-ordenes #rp-ord-modal .rp-ord-block--wa::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 999px 0 0 999px;
  background: var(--rom-accent);
  opacity: .92;
}

/* ============================================================
   PRODUCTOS
   ============================================================ */
#rp-view-ordenes #rp-ord-modal .rp-ord-items{
  display: grid;
  gap: 12px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item{
  border: 1px solid rgba(17,17,17,.08);
  border-radius: var(--rom-radius-sm);
  background: rgba(255,255,255,.96);
  padding: 14px;
  box-shadow:
    0 8px 18px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-meta{
  min-width: 0;
  flex: 1 1 auto;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-name{
  color: var(--rom-text);
  font-size: .98rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-total{
  flex: 0 0 auto;
  color: var(--rom-accent-strong);
  font-size: .98rem;
  font-weight: 900;
  white-space: nowrap;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-note{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(17,17,17,.04);
  color: rgba(17,17,17,.72);
  font-size: .90rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-sub{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(17,17,17,.08);
  display: grid;
  gap: 10px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-subgroup{
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(17,17,17,.03);
  border: 1px solid rgba(17,17,17,.05);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-subtitle{
  color: rgba(17,17,17,.82);
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-li{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-li-main{
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-li-name{
  color: rgba(17,17,17,.78);
  font-size: .90rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-li-qty{
  color: rgba(17,17,17,.50);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-li-price{
  color: var(--rom-text);
  font-size: .90rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

/* ============================================================
   TEXTOS / LINKS
   ============================================================ */
#rp-view-ordenes #rp-ord-modal .rp-ord-client-muted{
  color: var(--rom-muted);
  font-size: .90rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-proof-link,
#rp-view-ordenes #rp-ord-modal .rp-ord-client-wa,
#rp-view-ordenes #rp-ord-modal .rp-ord-map-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 999px;

  font-family: "Outfit", sans-serif;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform .12s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-proof-link{
  border: 1px solid rgba(17,17,17,.12);
  background: #fff;
  color: rgba(17,17,17,.86);
  box-shadow:
    0 8px 18px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-proof-link:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.22);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-client-wa{
  border: 0;
  background: linear-gradient(135deg, var(--rom-wa) 0%, var(--rom-wa-dark) 100%);
  color: #fff;
  box-shadow: var(--rom-wa-shadow);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-client-wa:hover{
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.05);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-map-btn{
  border: 0;
  background: linear-gradient(135deg, var(--rom-sky-1) 0%, var(--rom-sky-2) 100%);
  color: #fff;
  box-shadow: var(--rom-sky-shadow);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-map-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.05);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-proof-link:focus-visible,
#rp-view-ordenes #rp-ord-modal .rp-ord-client-wa:focus-visible,
#rp-view-ordenes #rp-ord-modal .rp-ord-map-btn:focus-visible{
  outline: 2px solid var(--rom-focus);
  outline-offset: 2px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-mt-6{ margin-top: 6px; }
#rp-view-ordenes #rp-ord-modal .rp-ord-mt-8{ margin-top: 8px; }
#rp-view-ordenes #rp-ord-modal .rp-ord-mt-10{ margin-top: 10px; }

/* ============================================================
   KEY / VALUE
   ============================================================ */
#rp-view-ordenes #rp-ord-modal .rp-ord-kv{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-kv > div{
  min-width: 0;
  font-size: .95rem;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-kv > div:nth-child(odd){
  color: var(--rom-muted);
  font-weight: 600;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-kv > div:nth-child(even){
  color: var(--rom-text);
  font-weight: 800;
  text-align: right;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-kv strong,
#rp-view-ordenes #rp-ord-modal .rp-ord-kv-total{
  color: var(--rom-accent-strong);
  font-weight: 900;
}

/* ============================================================
   TARJETA TOTAL DESTACADA
   ============================================================ */
#rp-view-ordenes #rp-ord-modal .rp-ord-block--total{
  border: 1px solid rgba(34, 197, 94, 0.34);
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 55%, #22c55e 100%);
  box-shadow:
    0 18px 34px rgba(34, 197, 94, 0.22),
    inset 0 1px 0 rgba(255,255,255,.10);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-block--total .rp-ord-block-title{
  margin-bottom: 10px;
  color: rgba(255,255,255,.92);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-total-line{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-total-label{
  color: rgba(240,253,244,.82);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.2;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-total-amount{
  color: #ffffff;
  font-size: clamp(1.38rem, 1.16rem + .7vw, 1.95rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: right;
  text-shadow: 0 1px 0 rgba(0,0,0,.10);
}

@media (max-width: 600px){
  #rp-view-ordenes #rp-ord-modal .rp-ord-total-line{
    flex-direction: column;
    align-items: flex-start;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-total-amount{
    text-align: left;
  }
}

/* ============================================================
   DETALLES
   ============================================================ */
#rp-view-ordenes #rp-ord-modal .rp-ord-details-stack{
  display: grid;
  gap: 10px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-detail-row{
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(17,17,17,.04);
  border: 1px solid rgba(17,17,17,.06);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-detail-label{
  color: rgba(17,17,17,.82);
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-detail-text{
  color: rgba(17,17,17,.68);
  font-size: .93rem;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-detail-text--address{
  color: rgba(17,17,17,.86);
  font-weight: 700;
}

/* ============================================================
   WHATSAPP
   ============================================================ */
#rp-view-ordenes #rp-ord-modal .rp-ord-wa-help{
  color: var(--rom-muted);
  font-size: .90rem;
  line-height: 1.35;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-wa-ta{
  width: 100%;
  min-height: 150px;
  margin-top: 12px;
  padding: 12px 14px;
  resize: vertical;

  border-radius: var(--rom-radius-sm);
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: var(--rom-text);

  font-family: "Outfit", sans-serif;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.45;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-wa-ta:focus{
  outline: none;
  border-color: rgba(17,17,17,.22);
  box-shadow:
    0 0 0 4px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions .rp-btn{
  appearance: none;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-family: "Outfit", sans-serif;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;

  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions .rp-btn--ghost,
#rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions [data-role="wa-confirm-copy"]{
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: rgba(17,17,17,.86);
  box-shadow:
    0 10px 20px rgba(17,17,17,.06),
    0 2px 6px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions .rp-btn--wa,
#rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions [data-role="wa-confirm-send"]{
  border: 0;
  background: linear-gradient(135deg, var(--rom-wa) 0%, var(--rom-wa-dark) 100%);
  color: #fff;
  box-shadow: var(--rom-wa-shadow);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions .rp-btn:hover{
  transform: translateY(-1px);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions .rp-btn--wa:hover,
#rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions [data-role="wa-confirm-send"]:hover{
  filter: brightness(1.03) saturate(1.05);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions .rp-btn--ghost:hover,
#rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions [data-role="wa-confirm-copy"]:hover{
  border-color: rgba(17,17,17,.22);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions .rp-btn:focus-visible{
  outline: 2px solid var(--rom-focus);
  outline-offset: 2px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-btn-ico{
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-btn-ico--wa{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2C6.48 2 2 6.14 2 11.25c0 2.01.69 3.87 1.87 5.38L2.5 22l5.7-1.5A10.36 10.36 0 0 0 12 20.5c5.52 0 10-4.14 10-9.25S17.52 2 12 2Zm0 16.25c-1.4 0-2.72-.32-3.88-.88l-.41-.2-2.48.65.67-2.32-.27-.39A7.18 7.18 0 0 1 4 11.25C4 7.38 7.58 4.25 12 4.25s8 3.13 8 7-3.58 7-8 7Zm3.92-4.15c-.22-.1-1.28-.61-1.48-.67-.2-.07-.34-.1-.48.1-.14.2-.55.67-.68.8-.12.14-.25.15-.47.05-.22-.1-.93-.33-1.77-1.06-.66-.57-1.11-1.27-1.24-1.48-.12-.2-.01-.31.09-.4.09-.09.2-.22.3-.33.1-.12.14-.2.21-.34.07-.14.03-.26-.02-.36-.05-.1-.48-1.1-.66-1.5-.17-.41-.34-.35-.48-.36h-.41c-.14 0-.36.05-.55.24-.19.2-.72.69-.72 1.67s.74 1.93.84 2.06c.1.14 1.45 2.18 3.5 3.05.49.21.87.33 1.17.42.49.15.94.13 1.29.08.39-.06 1.28-.52 1.46-1.02.18-.5.18-.94.13-1.03-.05-.1-.2-.15-.41-.25Z'/%3E%3C/svg%3E");
}

/* ============================================================
   COMPROBANTE
   ============================================================ */
#rp-view-ordenes #rp-ord-modal .rp-ord-proof{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-proof-title{
  color: rgba(17,17,17,.84);
  font-size: .90rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-proof-frame{
  overflow: hidden;
  border-radius: var(--rom-radius-sm);
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(17,17,17,.03);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-proof-frame iframe,
#rp-view-ordenes #rp-ord-modal .rp-ord-proof-frame img{
  display: block;
  width: 100%;
  min-height: 280px;
  max-height: 420px;
  border: 0;
  background: #fff;
  object-fit: contain;
}

/* ============================================================
   FOOTER DEL MODAL
   ============================================================ */
#rp-view-ordenes #rp-ord-modal .rp-ord-modal-foot{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;

  min-height: 82px;
  padding: 16px;

  border-top: 1px solid var(--rom-border);
  background: var(--rom-surface);
  box-shadow: 0 -14px 30px rgba(17,17,17,.06);
}

#rp-view-ordenes #rp-ord-modal #rp-ord-modal-print,
#rp-view-ordenes #rp-ord-modal #rp-ord-modal-close2{
  appearance: none;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;

  font-family: "Outfit", sans-serif;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;

  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}

#rp-view-ordenes #rp-ord-modal #rp-ord-modal-close2{
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: rgba(17,17,17,.86);
  box-shadow:
    0 10px 20px rgba(17,17,17,.06),
    0 2px 6px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-view-ordenes #rp-ord-modal #rp-ord-modal-print{
  border: 1.5px solid rgba(0,0,0,.10);
  background: var(--rom-accent);
  color: #fff;
  box-shadow: var(--rom-accent-shadow);
}

#rp-view-ordenes #rp-ord-modal #rp-ord-modal-print:hover,
#rp-view-ordenes #rp-ord-modal #rp-ord-modal-close2:hover{
  transform: translateY(-1px);
}

#rp-view-ordenes #rp-ord-modal #rp-ord-modal-print:hover{
  filter: brightness(1.03) saturate(1.05);
}

#rp-view-ordenes #rp-ord-modal #rp-ord-modal-close2:hover{
  border-color: rgba(17,17,17,.22);
}

#rp-view-ordenes #rp-ord-modal #rp-ord-modal-print:focus-visible,
#rp-view-ordenes #rp-ord-modal #rp-ord-modal-close2:focus-visible{
  outline: 2px solid var(--rom-focus);
  outline-offset: 2px;
}

/* ============================================================
   DELIVERY PICKER
   - Ya NO va absoluto
   - Queda primero en el footer
   ============================================================ */
#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-picker[hidden]{
  display: none !important;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-picker{
  position: relative;
  flex: 0 0 auto;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-trigger{
  appearance: none;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;

  display: grid;
  place-items: center;

  border: 1.5px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: var(--rom-accent);
  color: #fff;
  box-shadow: var(--rom-accent-shadow);

  cursor: pointer;
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-trigger:hover{
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.05);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-trigger[aria-expanded="true"]{
  box-shadow:
    0 18px 30px rgba(255,0,42,.28),
    0 3px 10px rgba(17,17,17,.06);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-trigger:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-trigger-ico{
  width: 22px;
  height: 22px;
  display: block;
  background-color: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-menu{
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: min(320px, calc(100vw - 32px));
  overflow: hidden;

  border: 1px solid rgba(17,17,17,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,247,251,.96) 100%);
  box-shadow:
    0 24px 50px rgba(0,0,0,.18),
    0 2px 8px rgba(17,17,17,.06);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-menu[hidden]{
  display: none !important;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-menu-head{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(17,17,17,.08);
  color: var(--rom-text);
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-menu-list{
  max-height: 260px;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  gap: 6px;
  scrollbar-width: thin;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-item{
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;

  border: 1px solid rgba(17,17,17,.08);
  border-radius: 14px;
  background: #fff;
  color: rgba(17,17,17,.88);

  font-family: "Outfit", sans-serif;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;

  transition: transform .12s ease, border-color .16s ease, box-shadow .16s ease;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-item:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.16);
  box-shadow:
    0 10px 20px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-item:focus-visible{
  outline: 2px solid var(--rom-focus);
  outline-offset: 2px;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-delivery-menu-empty{
  padding: 12px;
  color: var(--rom-muted);
  font-size: .90rem;
  line-height: 1.35;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  #rp-view-ordenes #rp-ord-modal{
    padding: 0;
    align-items: flex-end;
    justify-content: stretch;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-modal-card{
    width: 100%;
    max-width: 100%;
    height: min(94dvh, 980px);
    max-height: min(94dvh, 980px);

    border-radius: 24px 24px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;

    box-shadow:
      0 -18px 42px rgba(17,17,17,.18),
      0 -2px 10px rgba(17,17,17,.06);
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-modal-head{
    padding-top: 24px;
    position: relative;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-modal-head::before{
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: rgba(17,17,17,.18);
  }
}

@media (max-width: 920px){
  #rp-view-ordenes #rp-ord-modal .rp-ord-layout{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  #rp-view-ordenes #rp-ord-modal .rp-ord-modal-title{
    grid-template-columns: 1fr;
    align-items: start;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-modal-total{
    justify-self: start;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-kv{
    grid-template-columns: minmax(0,1fr);
    gap: 6px;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-kv > div:nth-child(even){
    text-align: left;
    margin-bottom: 8px;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-item-top{
    flex-direction: column;
    align-items: stretch;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-item-total{
    white-space: normal;
  }
}

@media (max-width: 600px){
  #rp-view-ordenes #rp-ord-modal .rp-ord-modal-card{
    height: 92dvh;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-modal-head{
    padding: 22px 14px 14px;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-modal-close{
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    flex: 0 0 42px;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-layout{
    padding: 14px;
    gap: 14px;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-col{
    gap: 14px;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-block{
    padding: 14px;
    border-radius: 16px;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-item{
    padding: 12px;
    border-radius: 15px;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions{
    flex-direction: column;
    align-items: stretch;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-wa-actions .rp-btn{
    width: 100%;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-modal-foot{
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 10px;
    align-items: center;
    padding: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    min-height: unset;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-delivery-picker{
    justify-self: start;
  }

  #rp-view-ordenes #rp-ord-modal #rp-ord-modal-print,
  #rp-view-ordenes #rp-ord-modal #rp-ord-modal-close2{
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-delivery-menu{
    left: 0;
    width: min(320px, calc(100vw - 28px));
  }

  #rp-view-ordenes #rp-ord-modal .rp-ord-proof-frame iframe,
  #rp-view-ordenes #rp-ord-modal .rp-ord-proof-frame img{
    min-height: 220px;
    max-height: 320px;
  }
}

@media (prefers-reduced-motion: reduce){
  #rp-view-ordenes #rp-ord-modal *,
  #rp-view-ordenes #rp-ord-modal *::before,
  #rp-view-ordenes #rp-ord-modal *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ================================ FIN SECCION ORDENES ============================================================= */


/* ============================================================
   MODAL: NUEVA ORDEN
   - Basado visualmente en el modal de Agregar rol
   - Responsive real: desktop / tablet / móvil
   - UX tipo app para caja
   ============================================================ */

#rp-view-ordenes .rp-ord-new-modal{
  position: fixed;
  inset: 0;
  z-index: 999;
  padding: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Outfit", sans-serif;

  --ron-surface: var(--ord-surface, linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%));
  --ron-text: var(--ord-text, rgba(17,17,17,.90));
  --ron-muted: var(--ord-muted, rgba(17,17,17,.62));
  --ron-border: rgba(17,17,17,.10);
  --ron-border-strong: rgba(17,17,17,.16);
  --ron-focus: rgba(17,17,17,.45);
  --ron-accent: var(--ord-delivery, #ff002a);
  --ron-accent-soft: rgba(255,0,42,.08);
  --ron-accent-soft-2: rgba(255,0,42,.12);
  --ron-white: #fff;
  --ron-shadow:
    0 24px 60px rgba(0,0,0,.25),
    0 2px 8px rgba(17,17,17,.06);
  --ron-card-shadow:
    0 12px 26px rgba(17,17,17,.06),
    0 2px 8px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.88);
}

#rp-view-ordenes .rp-ord-new-modal[hidden]{
  display: none !important;
}

/* Backdrop */
#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .18s ease;
}

#rp-view-ordenes .rp-ord-new-modal[aria-hidden="false"] .rp-ord-modal-backdrop{
  opacity: 1;
}

/* Card principal */
#rp-view-ordenes .rp-ord-new-card{
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 28px));
  height: min(920px, calc(100dvh - 28px));
  max-height: calc(100dvh - 28px);

  display: flex;
  flex-direction: column;
  overflow: hidden;

  margin: 0;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 22px;
  background: var(--ron-surface);
  box-shadow: var(--ron-shadow);

  transform: translateY(10px) scale(.99);
  transition: transform .18s ease;
}

#rp-view-ordenes .rp-ord-new-modal[aria-hidden="false"] .rp-ord-new-card{
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  #rp-view-ordenes .rp-ord-new-card,
  #rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-backdrop{
    transition: none;
  }
}

/* Header */
#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-head{
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,17,17,.10);
  background: var(--ron-surface);
}

#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-titlewrap{
  min-width: 0;
}

#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-title{
  margin: 0;
  font-size: clamp(1.35rem, 1.05rem + .8vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ron-text);
}

#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-sub{
  margin-top: 8px;
  color: var(--ron-muted);
  line-height: 1.3;
  font-size: .92rem;
  font-weight: 500;
  max-width: 860px;
}

#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-close{
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  align-self: flex-start;

  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.14);
  background: #fff;

  box-shadow:
    0 12px 22px rgba(17,17,17,.10),
    0 2px 6px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.92);

  cursor: pointer;
  position: relative;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-close::before{
  content: "\00D7";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: rgba(17,17,17,.88);
}

#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-close:hover{
  border-color: rgba(17,17,17,.28);
}

#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-close:focus-visible{
  outline: 2px solid var(--ron-focus);
  outline-offset: 2px;
}

/* Body con scroll interno real */
#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-body{
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;

  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  padding: 0;
  background: var(--ron-surface);
}

#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-body{
  scrollbar-width: thin;
  scrollbar-color: rgba(17,17,17,.22) transparent;
}

#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-body::-webkit-scrollbar{
  width: 10px;
}

#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-body::-webkit-scrollbar-thumb{
  background: rgba(17,17,17,.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-body::-webkit-scrollbar-track{
  background: transparent;
}

/* Grid principal */
#rp-view-ordenes .rp-ord-new-grid{
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  gap: 16px;
  align-items: start;
}

#rp-view-ordenes .rp-ord-new-col{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#rp-view-ordenes .rp-ord-new-col--summary{
  position: sticky;
  top: 0;
  align-self: start;
}

/* Toolbar de productos */
#rp-view-ordenes .rp-ord-new-toolbar{
  position: sticky;
  top: 0;
  z-index: 3;

  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 2px 0 0;
  background: var(--ron-surface);
}

#rp-view-ordenes .rp-ord-new-searchwrap{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

#rp-view-ordenes .rp-ord-new-search{
  width: 100%;
  min-height: 54px;
  padding: 0 16px;

  border-radius: 18px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: var(--ron-text);

  font-family: "Outfit", sans-serif;
  font-size: .98rem;
  font-weight: 600;

  box-shadow:
    0 10px 20px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.92);

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

#rp-view-ordenes .rp-ord-new-search::placeholder{
  color: rgba(17,17,17,.45);
  font-weight: 500;
}

#rp-view-ordenes .rp-ord-new-search:hover{
  border-color: rgba(17,17,17,.22);
}

#rp-view-ordenes .rp-ord-new-search:focus{
  outline: none;
  border-color: rgba(17,17,17,.42);
  box-shadow:
    0 0 0 3px rgba(17,17,17,.08),
    0 10px 20px rgba(17,17,17,.06);
}

#rp-view-ordenes .rp-ord-new-clear{
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 800;
}

#rp-view-ordenes .rp-ord-new-favs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

#rp-view-ordenes .rp-ord-new-chip{
  appearance: none;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: rgba(17,17,17,.84);
  font-family: "Outfit", sans-serif;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  box-shadow:
    0 8px 16px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.92);
  transition: transform .12s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#rp-view-ordenes .rp-ord-new-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.22);
}

#rp-view-ordenes .rp-ord-new-products,
#rp-view-ordenes .rp-ord-new-cart{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Producto card */
#rp-view-ordenes .rp-ord-new-row{
  border: 1px solid var(--ron-border);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--ron-card-shadow);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#rp-view-ordenes .rp-ord-new-row.is-open{
  border-color: rgba(17,17,17,.22);
  box-shadow:
    0 14px 28px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-view-ordenes .rp-ord-new-rowhead{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

#rp-view-ordenes .rp-ord-new-name{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#rp-view-ordenes .rp-ord-new-name strong{
  color: var(--ron-text);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.15;
  word-break: break-word;
}

#rp-view-ordenes .rp-ord-new-name span{
  color: var(--ron-muted);
  font-size: .88rem;
  line-height: 1.3;
  word-break: break-word;
}

#rp-view-ordenes .rp-ord-new-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

#rp-view-ordenes .rp-ord-new-actions .rp-btn,
#rp-view-ordenes .rp-ord-new-config .rp-btn{
  min-height: 42px;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
}

/* Botón lápiz en Nueva orden */
#rp-view-ordenes .rp-ord-new-note-btn{
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

#rp-view-ordenes .rp-ord-new-note-btn svg{
  width: 20px;
  height: 20px;
  display: block;
}

#rp-view-ordenes .rp-ord-new-note-btn svg,
#rp-view-ordenes .rp-ord-new-note-btn svg *{
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
}

#rp-view-ordenes .rp-ord-new-detail-field{
  grid-column: 1 / -1;
}

#rp-view-ordenes .rp-ord-new-cartgroup--note{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(17,17,17,.035);
  border: 1px solid rgba(17,17,17,.06);
}

#rp-view-ordenes .rp-ord-new-cartnote{
  margin: 0;
  color: rgba(17,17,17,.78);
  font-size: .90rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#rp-view-ordenes .rp-ord-new-cartnote strong{
  color: rgba(17,17,17,.92);
  font-weight: 800;
}

#rp-view-ordenes .rp-ord-new-cartnote span{
  font-weight: 500;
  color: rgba(17,17,17,.68);
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-note strong{
  color: rgba(17,17,17,.92);
  font-weight: 800;
}

#rp-view-ordenes #rp-ord-modal .rp-ord-item-note span{
  font-weight: 500;
  color: rgba(17,17,17,.68);
}

@media (max-width: 640px){
  #rp-view-ordenes .rp-ord-new-actions{
    gap: 8px;
  }

  #rp-view-ordenes .rp-ord-new-note-btn{
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  #rp-view-ordenes .rp-ord-new-note-btn svg{
    width: 18px;
    height: 18px;
  }
}

/* Config expandible */
#rp-view-ordenes .rp-ord-new-config{
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid rgba(17,17,17,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(246,247,251,.88) 100%);
}

#rp-view-ordenes .rp-ord-new-row.is-open > .rp-ord-new-config{
  display: block;
}

#rp-view-ordenes .rp-ord-new-configgrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 14px;
}

#rp-view-ordenes .rp-ord-new-field{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#rp-view-ordenes .rp-ord-new-field > span{
  display: inline-block;
  color: rgba(17,17,17,.88);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#rp-view-ordenes .rp-ord-new-field input:not([type="checkbox"]):not([type="radio"]),
#rp-view-ordenes .rp-ord-new-field select,
#rp-view-ordenes .rp-ord-new-field textarea,
#rp-view-ordenes #rp-ord-new-mesa,
#rp-view-ordenes #rp-ord-new-customer-name,
#rp-view-ordenes #rp-ord-new-customer-phone,
#rp-view-ordenes #rp-ord-new-pay{
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;

  border-radius: 16px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: var(--ron-text);

  font-family: "Outfit", sans-serif;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.2;

  box-shadow:
    0 8px 16px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.92);

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

#rp-view-ordenes .rp-ord-new-field input::placeholder,
#rp-view-ordenes #rp-ord-new-mesa::placeholder,
#rp-view-ordenes #rp-ord-new-customer-name::placeholder,
#rp-view-ordenes #rp-ord-new-customer-phone::placeholder{
  color: rgba(17,17,17,.44);
  font-weight: 500;
}

#rp-view-ordenes .rp-ord-new-field input:hover,
#rp-view-ordenes .rp-ord-new-field select:hover,
#rp-view-ordenes #rp-ord-new-mesa:hover,
#rp-view-ordenes #rp-ord-new-customer-name:hover,
#rp-view-ordenes #rp-ord-new-customer-phone:hover,
#rp-view-ordenes #rp-ord-new-pay:hover{
  border-color: rgba(17,17,17,.22);
}

#rp-view-ordenes .rp-ord-new-field input:focus,
#rp-view-ordenes .rp-ord-new-field select:focus,
#rp-view-ordenes #rp-ord-new-mesa:focus,
#rp-view-ordenes #rp-ord-new-customer-name:focus,
#rp-view-ordenes #rp-ord-new-customer-phone:focus,
#rp-view-ordenes #rp-ord-new-pay:focus{
  outline: none;
  border-color: rgba(17,17,17,.42);
  box-shadow:
    0 0 0 3px rgba(17,17,17,.08),
    0 8px 16px rgba(17,17,17,.06);
}

#rp-view-ordenes .rp-ord-new-field select:disabled,
#rp-view-ordenes .rp-ord-new-field input:disabled{
  background: rgba(17,17,17,.04);
  color: rgba(17,17,17,.56);
  cursor: not-allowed;
}

#rp-view-ordenes .rp-ord-new-field--full{
  grid-column: 1 / -1;
}

#rp-view-ordenes .rp-ord-new-groupstack{
  display: grid;
  gap: 14px;
}

#rp-view-ordenes .rp-ord-new-group{
  display: grid;
  gap: 10px;
}

#rp-view-ordenes .rp-ord-new-groupname{
  margin: 0;
  color: rgba(17,17,17,.90);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

#rp-view-ordenes .rp-ord-new-opts{
  display: grid;
  gap: 10px;
}

#rp-view-ordenes .rp-ord-new-opts--two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#rp-view-ordenes .rp-ord-new-opt{
  min-width: 0;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow:
    0 8px 16px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
  transition:
    transform .14s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

#rp-view-ordenes .rp-ord-new-opt:hover{
  border-color: rgba(17,17,17,.16);
  transform: translateY(-1px);
}

#rp-view-ordenes .rp-ord-new-opt.is-selected{
  border-color: rgba(224,49,49,.22);
  background: rgba(224,49,49,.05);
  box-shadow:
    0 10px 22px rgba(224,49,49,.10),
    inset 0 1px 0 rgba(255,255,255,.94);
}

#rp-view-ordenes .rp-ord-new-choice{
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

#rp-view-ordenes .rp-ord-new-choice input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#rp-view-ordenes .rp-ord-new-mark{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.28);
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

#rp-view-ordenes .rp-ord-new-mark::after{
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .16s ease;
  margin-top: -1px;
}

#rp-view-ordenes .rp-ord-new-choice input:focus-visible + .rp-ord-new-mark{
  border-color: var(--ron-accent);
  box-shadow: 0 0 0 4px rgba(224,49,49,.12);
}

#rp-view-ordenes .rp-ord-new-choice input:checked + .rp-ord-new-mark{
  background: var(--ron-accent);
  border-color: var(--ron-accent);
  transform: scale(1.02);
}

#rp-view-ordenes .rp-ord-new-choice input:checked + .rp-ord-new-mark::after{
  transform: rotate(-45deg) scale(1);
}

#rp-view-ordenes .rp-ord-new-copy{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#rp-view-ordenes .rp-ord-new-copy > span{
  color: rgba(17,17,17,.88);
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-word;
}

#rp-view-ordenes .rp-ord-new-price{
  color: var(--ron-accent);
  font-size: .84rem;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 640px){
  #rp-view-ordenes .rp-ord-new-opts--two{
    grid-template-columns: 1fr;
  }

  #rp-view-ordenes .rp-ord-new-choice{
    padding: 12px 14px;
  }
}

#rp-view-ordenes .rp-ord-new-config > div:last-child{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px !important;
}

/* Paneles de resumen */
#rp-view-ordenes .rp-ord-new-cardblock{
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--ron-card-shadow);
  padding: 14px;
}

#rp-view-ordenes .rp-ord-new-blocktitle{
  margin: 0 0 12px;
  color: rgba(17,17,17,.88);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

#rp-view-ordenes .rp-ord-new-fields{
  display: grid;
  gap: 12px;
}

#rp-view-ordenes .rp-ord-new-phone{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

#rp-view-ordenes .rp-ord-new-prefix{
  min-width: 78px;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: rgba(17,17,17,.04);
  color: rgba(17,17,17,.78);
  font-size: .95rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 16px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-view-ordenes .rp-ord-new-hint{
  margin: 2px 0 0;
  color: rgba(17,17,17,.54);
  line-height: 1.3;
  font-size: .82rem;
  font-weight: 400;
}

/* Carrito */
#rp-view-ordenes .rp-ord-new-cartitem{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#rp-view-ordenes .rp-ord-new-cartitem.is-active{
  border-color: rgba(255,0,42,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,245,248,.98) 100%);
  box-shadow:
    0 10px 22px rgba(255,0,42,.10),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-view-ordenes .rp-ord-new-cartmeta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#rp-view-ordenes .rp-ord-new-cartmeta strong{
  color: var(--ron-text);
  font-size: .98rem;
  font-weight: 850;
  line-height: 1.15;
  word-break: break-word;
}

#rp-view-ordenes .rp-ord-new-cartdetails{
  display: grid;
  gap: 8px;
}

#rp-view-ordenes .rp-ord-new-cartgroup{
  display: grid;
  gap: 4px;
}

#rp-view-ordenes .rp-ord-new-cartgroup-title{
  color: rgba(17,17,17,.80);
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.2;
}

#rp-view-ordenes .rp-ord-new-cartlist{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 3px;
  color: var(--ron-muted);
  font-size: .85rem;
  line-height: 1.3;
}

#rp-view-ordenes .rp-ord-new-cartlist li{
  margin: 0;
}

#rp-view-ordenes .rp-ord-new-cartprice{
  margin-top: 2px;
}

#rp-view-ordenes .rp-ord-new-cartempty{
  color: var(--ron-muted);
  font-size: .86rem;
  line-height: 1.28;
}

#rp-view-ordenes .rp-ord-new-cartmeta span{
  color: var(--ron-muted);
  font-size: .86rem;
  line-height: 1.28;
  word-break: break-word;
}

#rp-view-ordenes .rp-ord-new-cartctrl{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

#rp-view-ordenes .rp-ord-new-qty{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 999px;
  background: rgba(17,17,17,.03);
}

#rp-view-ordenes .rp-ord-new-qty button{
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: rgba(17,17,17,.88);
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    0 6px 12px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-view-ordenes .rp-ord-new-qty b{
  min-width: 24px;
  text-align: center;
  color: rgba(17,17,17,.88);
  font-size: .95rem;
  font-weight: 900;
}

#rp-view-ordenes .rp-ord-new-remove{
  appearance: none;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(224,49,49,.16);
  border-radius: 999px;
  background: rgba(224,49,49,.06);
  color: #b42318;
  font-family: "Outfit", sans-serif;
  font-size: .84rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, filter .16s ease, border-color .16s ease;
}

#rp-view-ordenes .rp-ord-new-remove:hover{
  transform: translateY(-1px);
  border-color: rgba(224,49,49,.26);
  filter: brightness(1.02);
}

#rp-view-ordenes .rp-ord-new-totals{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(17,17,17,.08);
  display: grid;
  gap: 10px;
}

#rp-view-ordenes .rp-ord-new-kv{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(17,17,17,.82);
  font-size: .95rem;
}

#rp-view-ordenes .rp-ord-new-kv strong{
  color: var(--ron-text);
  font-weight: 900;
}

/* Mensajes / vacíos */
#rp-view-ordenes .rp-ord-new-modal .rp-ord-client-muted{
  color: rgba(17,17,17,.56);
  font-size: .9rem;
  line-height: 1.35;
}

#rp-view-ordenes .rp-ord-new-msg{
  min-height: 20px;
  color: #b42318;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
}

#rp-view-ordenes .rp-ord-new-msg:empty{
  display: none;
}

/* Footer fijo */
#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-foot{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;

  min-height: 82px;
  padding: 16px;
  border-top: 1px solid rgba(17,17,17,.10);
  background: var(--ron-surface);
  box-shadow: 0 -14px 30px rgba(17,17,17,.06);
}

#rp-view-ordenes .rp-ord-new-footleft{
  min-width: 0;
}

#rp-view-ordenes .rp-ord-new-footactions{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}

#rp-view-ordenes .rp-ord-new-opencheck{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: rgba(17,17,17,.84);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
}

#rp-view-ordenes .rp-ord-new-opencheck input{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 6px;
  border: 1.5px solid rgba(17,17,17,.18);
  background: #fff;
  display: inline-grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .12s ease;
}

#rp-view-ordenes .rp-ord-new-opencheck input::after{
  content: "";
  width: 10px;
  height: 10px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .14s ease, transform .14s ease;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 6 9 17l-5-5 1.8-1.8L9 13.4 18.2 4.2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 6 9 17l-5-5 1.8-1.8L9 13.4 18.2 4.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

#rp-view-ordenes .rp-ord-new-opencheck input:checked{
  background: linear-gradient(135deg, #e03131 0%, #ff4d4d 100%);
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(224,49,49,.22);
}

#rp-view-ordenes .rp-ord-new-opencheck input:checked::after{
  opacity: 1;
  transform: scale(1);
}

#rp-view-ordenes .rp-ord-new-opencheck input:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(224,49,49,.18);
}

#rp-view-ordenes #rp-ord-new-create.rp-btn,
#rp-view-ordenes #rp-ord-new-close2.rp-btn{
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 18px;
  font-family: "Outfit", sans-serif;
  font-size: .96rem;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}

#rp-view-ordenes #rp-ord-new-create.rp-btn{
  color: #fff;
  background: var(--ron-accent);
  border: 1.5px solid rgba(0,0,0,.10);
  box-shadow:
    0 14px 26px rgba(255,0,42,.22),
    0 2px 8px rgba(17,17,17,.06);
}

#rp-view-ordenes #rp-ord-new-create.rp-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.05);
}

#rp-view-ordenes #rp-ord-new-close2.rp-btn{
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: rgba(17,17,17,.86);
  box-shadow:
    0 10px 20px rgba(17,17,17,.06),
    0 2px 6px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-view-ordenes #rp-ord-new-close2.rp-btn:hover{
  border-color: rgba(17,17,17,.22);
  transform: translateY(-1px);
}

/* Focus visible */
#rp-view-ordenes .rp-ord-new-modal button:focus-visible,
#rp-view-ordenes .rp-ord-new-modal input:focus-visible,
#rp-view-ordenes .rp-ord-new-modal select:focus-visible{
  outline: 2px solid var(--ron-focus);
  outline-offset: 2px;
}

/* =========================
   TABLET / NOTEBOOK
   ========================= */
@media (max-width: 1100px){
  #rp-view-ordenes .rp-ord-new-grid{
    grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr);
  }
}

@media (max-width: 1024px){
  #rp-view-ordenes .rp-ord-new-modal{
    padding: 0;
    align-items: flex-end;
  }

  #rp-view-ordenes .rp-ord-new-card{
    width: 100%;
    max-width: none;
    height: 92dvh;
    min-height: 92dvh;
    max-height: 92dvh;

    border-radius: 24px 24px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;

    transform: translateY(42px) scale(1);
  }

  #rp-view-ordenes .rp-ord-new-modal[aria-hidden="false"] .rp-ord-new-card{
    transform: translateY(0) scale(1);
  }

  #rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-head{
    padding-top: 24px;
    position: relative;
  }

  #rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-head::before{
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: rgba(17,17,17,.18);
  }

  #rp-view-ordenes .rp-ord-new-grid{
    grid-template-columns: 1fr;
  }

  #rp-view-ordenes .rp-ord-new-col--summary{
    position: static;
  }
}

/* =========================
   TABLET CHICA / MÓVIL GRANDE
   ========================= */
@media (max-width: 720px){
  #rp-view-ordenes .rp-ord-new-configgrid{
    grid-template-columns: 1fr;
  }

  #rp-view-ordenes .rp-ord-new-rowhead{
    grid-template-columns: 1fr;
  }

  #rp-view-ordenes .rp-ord-new-actions{
    justify-content: flex-start;
  }

  #rp-view-ordenes .rp-ord-new-cartitem{
    flex-direction: column;
    align-items: stretch;
  }

  #rp-view-ordenes .rp-ord-new-cartctrl{
    align-items: stretch;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
  }
}

/* =========================
   MÓVIL
   ========================= */
@media (max-width: 600px){
  #rp-view-ordenes .rp-ord-new-card{
    height: 90dvh;
    min-height: 90dvh;
    max-height: 90dvh;
    border-radius: 22px 22px 0 0;
  }

  #rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-title{
    font-size: 1.42rem;
    line-height: 1.05;
  }

  #rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-sub{
    font-size: .88rem;
  }

  #rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-close{
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    flex: 0 0 42px;
  }

  #rp-view-ordenes .rp-ord-new-grid{
    padding: 14px;
    gap: 14px;
  }

  #rp-view-ordenes .rp-ord-new-toolbar{
    gap: 10px;
  }

  #rp-view-ordenes .rp-ord-new-search{
    min-height: 50px;
    padding: 0 14px;
    border-radius: 16px;
  }

  #rp-view-ordenes .rp-ord-new-cardblock,
  #rp-view-ordenes .rp-ord-new-row,
  #rp-view-ordenes .rp-ord-new-cartitem,
  #rp-view-ordenes .rp-ord-new-opt{
    border-radius: 16px;
  }

  #rp-view-ordenes .rp-ord-new-rowhead,
  #rp-view-ordenes .rp-ord-new-config,
  #rp-view-ordenes .rp-ord-new-cardblock{
    padding-left: 12px;
    padding-right: 12px;
  }

  #rp-view-ordenes .rp-ord-new-rowhead{
    padding-top: 12px;
    padding-bottom: 12px;
  }

  #rp-view-ordenes .rp-ord-new-config{
    padding-bottom: 12px;
  }

  #rp-view-ordenes .rp-ord-new-phone{
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
  }

  #rp-view-ordenes .rp-ord-new-prefix{
    min-width: 72px;
    min-height: 50px;
    padding: 0 10px;
    font-size: .9rem;
  }

  #rp-view-ordenes .rp-ord-new-qty{
    width: fit-content;
  }

#rp-view-ordenes .rp-ord-new-modal .rp-ord-modal-foot{
  grid-template-columns: 1fr;
  align-items: stretch;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
}

#rp-view-ordenes .rp-ord-new-footactions{
  justify-content: flex-end;
}

#rp-view-ordenes .rp-ord-new-opencheck{
  width: 100%;
  justify-content: flex-start;
}

  #rp-view-ordenes #rp-ord-new-create.rp-btn,
  #rp-view-ordenes #rp-ord-new-close2.rp-btn{
    flex: 1 1 0;
    justify-content: center;
  }
}

/* =========================
   MÓVIL PEQUEÑO
   ========================= */
@media (max-width: 420px){
  #rp-view-ordenes .rp-ord-new-searchwrap{
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
  }

  #rp-view-ordenes .rp-ord-new-actions{
    width: 100%;
  }

  #rp-view-ordenes .rp-ord-new-actions .rp-btn{
    width: 100%;
    justify-content: center;
  }

  #rp-view-ordenes .rp-ord-new-cartctrl{
    flex-direction: column;
    align-items: stretch;
  }

  #rp-view-ordenes .rp-ord-new-qty{
    justify-content: center;
  }

  #rp-view-ordenes .rp-ord-new-remove{
    width: 100%;
  }
}



/* ============================================================
   ✅ SECCIÓN: MÉTRICAS (solo #rp-view-metricas)
   - Head + filtros + cards + paneles + heatmap + listas + picker
   - SIN estilos globales (scoping estricto)
   ============================================================ */

#rp-view-metricas{
  padding: 10px 30px 28px;
  font-family: "Outfit", sans-serif;

  --mx-text: #111;
  --mx-muted: rgba(17,17,17,.62);
  --mx-border: rgba(17,17,17,.10);
  --mx-surface: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  --mx-shadow:
    0 12px 26px rgba(17,17,17,.10),
    0 2px 8px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.85);

  --mx-blue1: #2563eb;
  --mx-blue2: #3b82f6;

  --mx-green1: #16a34a;
  --mx-green2: #22c55e;

  --mx-red1: #e03131;
  --mx-red2: #ff4d4d;

  /* ✅ colores modos (mismos que Órdenes) */
  --mx-mesa: #2563eb;
  --mx-delivery: #e03131;
  --mx-encamino: #f59e0b;
  --mx-recojo: #10b981;

  --mx-radius: 18px;
  --mx-radius-sm: 14px;

  /* SVGs (no recolor, se usan tal cual) */
  --mx-ico-excel: url("https://goournet.com/wp-content/uploads/2026/03/icono-exelRecurso-1.svg");
  --mx-ico-cal:   url("https://goournet.com/wp-content/uploads/2026/03/calendario.svg");
  --mx-ico-refresh:url("https://goournet.com/wp-content/uploads/2026/03/girar.svg");
}

@media (max-width: 600px){
  #rp-view-metricas{ padding: 8px 16px 20px; }
}

/* ------------------------------
   Head
   ------------------------------ */
#rp-view-metricas .mx-head{
  display: grid;
  gap: 14px;
  margin: 6px 0 14px;
}

#rp-view-metricas .mx-head-top{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

#rp-view-metricas .mx-head-copy{
  min-width: 0;
}

#rp-view-metricas .mx-title{
  margin: 0;
  color: var(--mx-text);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.15rem, 1.05rem + .6vw, 1.6rem);
  line-height: 1.1;
}

#rp-view-metricas .mx-sub{
  margin: 6px 0 0;
  color: var(--mx-muted);
  font-size: .96rem;
  line-height: 1.25;
}

#rp-view-metricas .mx-controls{
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

#rp-view-metricas .mx-view-switch{
  --mx-view-index: 0;
  --mx-switch-slot: 54px;
  --mx-switch-pad: 5px;
  --mx-switch-thumb: 42px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, var(--mx-switch-slot));
  align-items: center;
  justify-items: center;
  width: calc((var(--mx-switch-slot) * 3) + (var(--mx-switch-pad) * 2));
  min-width: calc((var(--mx-switch-slot) * 3) + (var(--mx-switch-pad) * 2));
  padding: var(--mx-switch-pad);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mx-red1) 0%, var(--mx-red2) 100%);
  box-shadow:
    0 14px 28px rgba(224,49,49,.18),
    inset 0 1px 0 rgba(255,255,255,.14);
}

#rp-view-metricas .mx-view-switch-thumb{
  position: absolute;
  top: 50%;
  left: calc(var(--mx-switch-pad) + ((var(--mx-switch-slot) - var(--mx-switch-thumb)) / 2));
  z-index: 0;
  pointer-events: none;
  width: var(--mx-switch-thumb);
  height: var(--mx-switch-thumb);
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 10px 22px rgba(17,17,17,.16),
    0 2px 8px rgba(17,17,17,.08);
  transform: translateY(-50%) translateX(calc(var(--mx-view-index) * var(--mx-switch-slot)));
  transition: transform .24s ease;
}

#rp-view-metricas .mx-view-switch[data-active="closures"] .mx-view-switch-thumb{
  transform: translateY(-50%) translateX(var(--mx-switch-slot));
}

#rp-view-metricas .mx-view-switch[data-active="audit"] .mx-view-switch-thumb{
  transform: translateY(-50%) translateX(calc(var(--mx-switch-slot) * 2));
}

#rp-view-metricas .mx-view-switch-btn{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  height: var(--mx-switch-slot);
  min-width: 0;
  min-height: var(--mx-switch-slot);
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.84);
  cursor: pointer;
  pointer-events: auto;
  transition: color .2s ease, transform .14s ease;
}

#rp-view-metricas .mx-view-switch-btn svg{
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}

#rp-view-metricas .mx-view-switch-btn[aria-selected="true"]{
  color: var(--mx-red2);
}

#rp-view-metricas .mx-view-switch-btn:hover{
  transform: translateY(-1px);
}

#rp-view-metricas .mx-view-switch-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.92);
  outline-offset: 2px;
  border-radius: 999px;
}

#rp-view-metricas .mx-view-panel[hidden]{
  display: none !important;
}

@media (max-width: 900px){
  #rp-view-metricas .mx-head-top{
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #rp-view-metricas .mx-controls{
    min-width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 600px){
  #rp-view-metricas .mx-head-copy{ min-width: 0; }
  #rp-view-metricas .mx-view-switch{
    --mx-switch-slot: 50px;
    --mx-switch-thumb: 38px;
    justify-self: start;
  }
  #rp-view-metricas .mx-controls{ width: 100%; }
}

/* ------------------------------
   Fields (select + periodo)
   ------------------------------ */
#rp-view-metricas .mx-field{
  display: grid;
  gap: 6px;
  min-width: 0;
}

#rp-view-metricas .mx-field > span,
#rp-view-metricas .mx-period-label{
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  color: var(--mx-muted);
  font-size: .82rem;
  font-weight: 750;
  line-height: 1.1;
}

#rp-view-metricas #mx-mode,
#rp-view-metricas .mx-period-input{
  appearance: none;
  border: 1.5px solid rgba(17,17,17,.10);
  background: var(--mx-surface);
  color: var(--mx-text);
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 14px;
  font-family: "Outfit", sans-serif;
  font-weight: 750;
  font-size: .92rem;
  box-shadow: var(--mx-shadow);
  outline: none;
}

#rp-view-metricas #mx-mode:focus-visible,
#rp-view-metricas .mx-period-input:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

#rp-view-metricas .mx-period-wrap{
  display: grid;
  grid-template-columns: minmax(0,1fr) 44px;
  gap: 10px;
  align-items: center;
  min-width: 280px;
}

@media (max-width: 600px){
  #rp-view-metricas .mx-period-wrap{ min-width: 100%; }
}

#rp-view-metricas .mx-period-input{ cursor: pointer; }

/* ============================================================
   ✅ BOTONES ICONO (CAL / REFRESH / EXCEL)
   - Circulares, blancos, mismo tamaño, borde negro en hover
   - Iconos desde TUS SVG (sin recolor)
   ============================================================ */

#rp-view-metricas #mx-period-open,
#rp-view-metricas #mx-refresh,
#rp-view-metricas #mx-download-xlsx{
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 999px;
  aspect-ratio: 1;

  background: #fff;
  border: 1.5px solid rgba(17,17,17,.12);
  box-shadow: var(--mx-shadow);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: border-color .16s ease, transform .12s ease, box-shadow .16s ease;
  position: relative;
}

#rp-view-metricas #mx-period-open:hover,
#rp-view-metricas #mx-refresh:hover,
#rp-view-metricas #mx-download-xlsx:hover{
  border-color: #111;
  transform: translateY(-1px);
}

#rp-view-metricas #mx-period-open:active,
#rp-view-metricas #mx-refresh:active,
#rp-view-metricas #mx-download-xlsx:active{
  transform: translateY(0);
}

/* si el botón de calendario tiene svg inline, lo ocultamos */
#rp-view-metricas #mx-period-open svg{ display:none; }

/* icono común */
#rp-view-metricas #mx-period-open::before,
#rp-view-metricas #mx-refresh::before,
#rp-view-metricas #mx-download-xlsx::before{
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

/* iconos desde tus SVG */
#rp-view-metricas #mx-period-open::before{ background-image: var(--mx-ico-cal); }
#rp-view-metricas #mx-refresh::before{ background-image: var(--mx-ico-refresh); }
#rp-view-metricas #mx-download-xlsx::before{ background-image: var(--mx-ico-excel); }

/* ✅ compensación visual: estos 2 SVG vienen “altos” → bajamos 1px */
#rp-view-metricas #mx-refresh::before,
#rp-view-metricas #mx-download-xlsx::before{
  transform: translateY(1px);
}

/* Excel y Refresh: sin texto visible */
#rp-view-metricas #mx-download-xlsx,
#rp-view-metricas #mx-refresh{
  font-size: 0;
  line-height: 0;
  color: transparent;
}

/* ------------------------------
   Cards (Resumen)
   ------------------------------ */
#rp-view-metricas .mx-cards{
  display: grid;
  gap: 12px;
  margin: 12px 0 14px;
  grid-template-columns: repeat(5, minmax(0,1fr));
}

@media (max-width: 1100px){
  #rp-view-metricas .mx-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 720px){
  #rp-view-metricas .mx-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 420px){
  #rp-view-metricas .mx-cards{ grid-template-columns: 1fr; }
}

#rp-view-metricas .mx-card{
  border-radius: var(--mx-radius);
  background: var(--mx-surface);
  border: 1.5px solid rgba(17,17,17,.08);
  box-shadow: var(--mx-shadow);
  padding: 12px 14px;
  min-width: 0;
}

#rp-view-metricas .mx-card .k{
  color: rgba(17,17,17,.70);
  font-weight: 850;
  font-size: .78rem;
  letter-spacing: .02em;
}

#rp-view-metricas .mx-card .v{
  margin-top: 6px;
  color: var(--mx-text);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.15rem, 1.05rem + .6vw, 1.55rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

#rp-view-metricas .mx-card .s{
  margin-top: 6px;
  color: var(--mx-muted);
  font-size: .86rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Pedidos (1) rojo */
#rp-view-metricas .mx-cards .mx-card:nth-child(1){
  background: linear-gradient(135deg, var(--mx-red1) 0%, var(--mx-red2) 100%);
  border-color: transparent;
  box-shadow:
    0 14px 28px rgba(224,49,49,.20),
    0 2px 6px rgba(17,17,17,.06);
}
#rp-view-metricas .mx-cards .mx-card:nth-child(1) .k,
#rp-view-metricas .mx-cards .mx-card:nth-child(1) .v{ color:#fff; }
#rp-view-metricas .mx-cards .mx-card:nth-child(1) .s{ color: rgba(255,255,255,.88); }

/* Total Ventas (5) verde */
#rp-view-metricas .mx-cards .mx-card:nth-child(5){
  background: linear-gradient(135deg, var(--mx-green1) 0%, var(--mx-green2) 100%);
  border-color: transparent;
  box-shadow:
    0 14px 28px rgba(34,197,94,.20),
    0 2px 6px rgba(17,17,17,.06);
}
#rp-view-metricas .mx-cards .mx-card:nth-child(5) .k,
#rp-view-metricas .mx-cards .mx-card:nth-child(5) .v{ color:#fff; }
#rp-view-metricas .mx-cards .mx-card:nth-child(5) .s{ color: rgba(255,255,255,.88); }

/* ------------------------------
   Panels grid
   ------------------------------ */
#rp-view-metricas .mx-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  align-items: stretch;
}

@media (max-width: 900px){
  #rp-view-metricas .mx-grid{ grid-template-columns: 1fr; }
}

#rp-view-metricas .mx-panel{
  border-radius: var(--mx-radius);
  background: var(--mx-surface);
  border: 1.5px solid rgba(17,17,17,.08);
  box-shadow: var(--mx-shadow);
  padding: 12px 14px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#rp-view-metricas .mx-panel h3{
  margin: 0 0 10px;
  color: var(--mx-text);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 1.02rem;
  line-height: 1.15;
}

#rp-view-metricas .mx-panel-body{
  min-width: 0;
  flex: 1;
  min-height: 0;
}

#rp-view-metricas .mx-panel--equal{
  min-height: 340px;
}

@media (max-width: 600px){
  #rp-view-metricas .mx-panel--equal{ min-height: 300px; }
}

#rp-view-metricas #mx-top-products{
  overflow: auto;
}

/* ------------------------------
   Heatmap (ROJO)
   ------------------------------ */
#rp-view-metricas #mx-heatmap{
  overflow: auto;
  border-radius: var(--mx-radius-sm);
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.72);
}

#rp-view-metricas .mx-heatmap{
  display: grid;
  grid-template-columns: 56px repeat(24, 22px);
  gap: 6px;
  padding: 10px;
  min-width: 728px;
}

#rp-view-metricas .mx-hlab{
  font-size: .72rem;
  font-weight: 900;
  color: rgba(17,17,17,.70);
  display: grid;
  place-items: center;
  height: 22px;
  user-select: none;
}

#rp-view-metricas .mx-hcell{
  height: 22px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 900;
  color: rgba(17,17,17,.82);
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(17,17,17,.04);
}

#rp-view-metricas .mx-hcell[data-lvl="0"]{ background: rgba(17,17,17,.04); }
#rp-view-metricas .mx-hcell[data-lvl="1"]{ background: rgba(224,49,49,.22); border-color: rgba(224,49,49,.22); }
#rp-view-metricas .mx-hcell[data-lvl="2"]{ background: rgba(224,49,49,.45); border-color: rgba(224,49,49,.28); color:#1b0b0b; }
#rp-view-metricas .mx-hcell[data-lvl="3"]{
  background: linear-gradient(135deg, var(--mx-red1) 0%, var(--mx-red2) 100%);
  border-color: transparent;
  color:#fff;
}

/* ------------------------------
   Lists
   ------------------------------ */
#rp-view-metricas .mx-list{
  display: grid;
  gap: 10px;
}

#rp-view-metricas .mx-item{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--mx-radius-sm);
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.72);
}

#rp-view-metricas .mx-item-main{ min-width: 0; }

#rp-view-metricas .mx-item-title{
  color: var(--mx-text);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#rp-view-metricas .mx-item-sub{
  margin-top: 3px;
  color: var(--mx-muted);
  font-size: .84rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#rp-view-metricas .mx-item-sub--empty{ opacity: .75; }

#rp-view-metricas .mx-item-val{
  color: var(--mx-text);
  font-weight: 950;
  font-size: .95rem;
  white-space: nowrap;
  text-align: right;
}

#rp-view-metricas .mx-empty{
  padding: 18px 12px;
  border-radius: var(--mx-radius-sm);
  border: 1.5px dashed rgba(17,17,17,.18);
  background: rgba(255,255,255,.70);
  color: var(--mx-muted);
  font-weight: 800;
  text-align: center;
}

/* ------------------------------
   Cierres de caja
   ------------------------------ */
#rp-view-metricas .mx-closures-section{
  margin-top: 16px;
  display: grid;
  gap: 14px;
}

#rp-view-metricas .mx-closures-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#rp-view-metricas .mx-closures-copy{
  min-width: 0;
}

#rp-view-metricas .mx-closures-head h3{
  margin: 0;
  color: var(--mx-text);
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: clamp(1.05rem, .96rem + .3vw, 1.3rem);
}

#rp-view-metricas .mx-closures-head p{
  margin: 6px 0 0;
  color: var(--mx-muted);
  font-size: .92rem;
  line-height: 1.35;
}

#rp-view-metricas .mx-closures-cards{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0,1fr));
}

@media (max-width: 1100px){
  #rp-view-metricas .mx-closures-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 720px){
  #rp-view-metricas .mx-closures-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 420px){
  #rp-view-metricas .mx-closures-cards{ grid-template-columns: 1fr; }
}

#rp-view-metricas .mx-closures-card{
  border-radius: var(--mx-radius);
  background: var(--mx-surface);
  border: 1.5px solid rgba(17,17,17,.08);
  box-shadow: var(--mx-shadow);
  padding: 12px 14px;
  min-width: 0;
}

#rp-view-metricas .mx-closures-card[data-tone="ventas"]{
  background: linear-gradient(135deg, var(--mx-green1) 0%, var(--mx-green2) 100%);
  border-color: transparent;
  box-shadow:
    0 14px 28px rgba(34,197,94,.20),
    0 2px 6px rgba(17,17,17,.06);
}

#rp-view-metricas .mx-closures-card[data-tone="diferencia-ok"]{
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  border-color: transparent;
  box-shadow:
    0 14px 28px rgba(20,184,166,.20),
    0 2px 6px rgba(17,17,17,.06);
}

#rp-view-metricas .mx-closures-card[data-tone="diferencia-alert"]{
  background: linear-gradient(135deg, #b45309 0%, #f97316 100%);
  border-color: transparent;
  box-shadow:
    0 14px 28px rgba(249,115,22,.20),
    0 2px 6px rgba(17,17,17,.06);
}

#rp-view-metricas .mx-closures-card .k{
  color: rgba(17,17,17,.70);
  font-weight: 850;
  font-size: .78rem;
  letter-spacing: .02em;
}

#rp-view-metricas .mx-closures-card .v{
  margin-top: 6px;
  color: var(--mx-text);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.08rem, 1rem + .45vw, 1.45rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

#rp-view-metricas .mx-closures-card .s{
  margin-top: 6px;
  color: var(--mx-muted);
  font-size: .86rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#rp-view-metricas .mx-closures-card[data-tone] :is(.k,.v){
  color: #fff;
}

#rp-view-metricas .mx-closures-card[data-tone] .s{
  color: rgba(255,255,255,.88);
}

#rp-view-metricas .mx-closures-panel{
  padding: 12px;
}

#rp-view-metricas .mx-closures-tablewrap{
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
  z-index: 1;
  border-radius: var(--mx-radius-sm);
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.72);
}

#rp-view-metricas .mx-closures-table{
  width: 100%;
  min-width: 1520px;
  border-collapse: collapse;
}

#rp-view-metricas .mx-closures-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 10px;
  background: #fff;
  color: rgba(17,17,17,.70);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-align: left;
  border-bottom: 1px solid rgba(17,17,17,.10);
  white-space: nowrap;
}

#rp-view-metricas .mx-closures-table tbody td{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(17,17,17,.08);
  color: var(--mx-text);
  font-size: .9rem;
  vertical-align: top;
}

#rp-view-metricas .mx-closures-table tbody tr:last-child td{
  border-bottom: 0;
}

#rp-view-metricas .mx-closures-table tbody tr:hover{
  background: rgba(17,17,17,.02);
}

#rp-view-metricas .mx-closures-table :is(th, td).mx-closures-col-state{
  position: sticky;
  right: 0;
  z-index: 2;
  background: #fff;
  min-width: 220px;
  box-shadow: -10px 0 18px rgba(17,17,17,.06);
}

#rp-view-metricas .mx-closures-table tbody td.mx-closures-col-state{
  z-index: 3;
  background: rgba(255,255,255,.98);
}

#rp-view-metricas .mx-closures-cell-main{
  display: grid;
  gap: 2px;
  min-width: 0;
}

#rp-view-metricas .mx-closures-cell-title{
  font-weight: 900;
  color: var(--mx-text);
}

#rp-view-metricas .mx-closures-cell-sub{
  color: var(--mx-muted);
  font-size: .82rem;
  line-height: 1.2;
}

#rp-view-metricas .mx-closures-money{
  font-weight: 900;
  white-space: nowrap;
}

#rp-view-metricas .mx-closure-pending{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--mx-muted);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}

#rp-view-metricas .mx-closures-status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
}

#rp-view-metricas .mx-closures-status[data-state="ok"]{
  background: rgba(34,197,94,.14);
  color: #166534;
}

#rp-view-metricas .mx-closures-status[data-state="sobrante"]{
  background: rgba(59,130,246,.14);
  color: #1d4ed8;
}

#rp-view-metricas .mx-closures-status[data-state="faltante"]{
  background: rgba(239,68,68,.14);
  color: #b91c1c;
}

#rp-view-metricas .mx-closures-loading{
  padding: 18px 12px;
  border-radius: var(--mx-radius-sm);
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.72);
  color: var(--mx-muted);
  font-weight: 800;
  text-align: center;
}

#rp-view-metricas .mx-closures-toolbar{
  display: grid;
  gap: 12px;
  align-items: end;
}

#rp-view-metricas .mx-closures-toolbar-main{
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

#rp-view-metricas .mx-closures-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
  width: clamp(150px, 16vw, 210px);
}

#rp-view-metricas .mx-closures-field--search{
  min-width: 260px;
  flex: 1 1 320px;
  width: auto;
}

#rp-view-metricas .mx-closures-field > span{
  font-size: .82rem;
  font-weight: 650;
  color: rgba(17,17,17,.70);
}

#rp-view-metricas .mx-closures-field select,
#rp-view-metricas .mx-closures-field input{
  appearance: none;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.88);
  box-shadow:
    0 10px 22px rgba(17,17,17,.08),
    0 2px 6px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.90);
  color: var(--mx-text);
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: .92rem;
  outline: none;
}

#rp-view-metricas .mx-closures-field input::placeholder{
  color: rgba(17,17,17,.45);
  font-weight: 600;
}

#rp-view-metricas .mx-closures-field select:focus,
#rp-view-metricas .mx-closures-field input:focus{
  border-color: rgba(17,17,17,.35);
  box-shadow:
    0 0 0 3px rgba(17,17,17,.08),
    0 10px 22px rgba(17,17,17,.08),
    0 2px 6px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.90);
}

@media (max-width: 1200px){
  #rp-view-metricas .mx-closures-toolbar-main{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  #rp-view-metricas .mx-closures-field,
  #rp-view-metricas .mx-closures-field--search{
    width: auto;
    min-width: 0;
  }

  #rp-view-metricas .mx-closures-field--search{
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px){
  #rp-view-metricas .mx-closures-toolbar-main{
    grid-template-columns: 1fr;
  }
}

#rp-view-metricas .mx-closures-actions{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
  flex-wrap: nowrap;
}

#rp-view-metricas .mx-closures-statuscell{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

#rp-view-metricas .mx-closures-menu-btn{
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(255,255,255,.96);
  color: var(--mx-text);
  font-weight: 900;
  cursor: pointer;
}

#rp-view-metricas .mx-closures-menu,
#mx-closures-menu-floating{
  position: fixed;
  z-index: 2200;
  min-width: 220px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(17,17,17,.10);
  background: #fff;
  box-shadow:
    0 18px 40px rgba(17,17,17,.12),
    0 2px 8px rgba(17,17,17,.06);
}

#mx-closures-menu-floating{
  color: var(--mx-text, #111827);
  opacity: 1;
  font-family: "Outfit", sans-serif;
}

#rp-view-metricas .mx-closures-menu[hidden],
#mx-closures-menu-floating[hidden]{
  display: none !important;
}

#rp-view-metricas .mx-closures-menu.is-open,
#mx-closures-menu-floating.is-open{
  visibility: visible;
}

#rp-view-metricas .mx-closures-menu button,
#mx-closures-menu-floating button{
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--mx-text, #111827);
  opacity: 1;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  -webkit-text-fill-color: currentColor;
}

#rp-view-metricas .mx-closures-menu button:hover,
#mx-closures-menu-floating button:hover{
  background: rgba(17,17,17,.05);
  color: var(--mx-text, #111827);
  opacity: 1;
}

#rp-view-metricas .mx-closures-menu button:focus-visible,
#mx-closures-menu-floating button:focus-visible{
  outline: 2px solid rgba(17,17,17,.18);
  outline-offset: 2px;
  color: var(--mx-text, #111827);
  opacity: 1;
}

#rp-view-metricas .mx-closures-menu button[data-tone="danger"],
#mx-closures-menu-floating button[data-tone="danger"]{
  color: #b91c1c;
}

#rp-view-metricas .mx-closures-muted{
  color: var(--mx-muted);
}

#rp-view-metricas .mx-audit-section{
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

#rp-view-metricas .mx-audit-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#rp-view-metricas .mx-audit-copy{
  display: grid;
  gap: 4px;
}

#rp-view-metricas .mx-audit-head h3{
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.15;
}

#rp-view-metricas .mx-audit-head p{
  margin: 0;
  color: var(--mx-muted);
}

#rp-view-metricas .mx-audit-toolbar{
  display: grid;
  gap: 12px;
  align-items: end;
}

#rp-view-metricas .mx-audit-toolbar-main{
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

#rp-view-metricas .mx-audit-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  width: clamp(180px, 18vw, 240px);
}

#rp-view-metricas .mx-audit-field > span{
  font-size: .82rem;
  font-weight: 650;
  color: rgba(17,17,17,.70);
}

#rp-view-metricas .mx-audit-field select{
  appearance: none;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.88);
  box-shadow:
    0 10px 22px rgba(17,17,17,.08),
    0 2px 6px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.90);
  color: var(--mx-text);
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: .92rem;
  outline: none;
}

#rp-view-metricas .mx-audit-field select:focus{
  border-color: rgba(17,17,17,.35);
  box-shadow:
    0 0 0 3px rgba(17,17,17,.08),
    0 10px 22px rgba(17,17,17,.08),
    0 2px 6px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-view-metricas .mx-audit-field select:disabled{
  color: rgba(17,17,17,.68);
  cursor: default;
}

#rp-view-metricas .mx-audit-cards{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#rp-view-metricas .mx-audit-panel{
  padding: 12px;
}

#rp-view-metricas .mx-audit-table{
  min-width: 1120px;
}

@media (max-width: 900px){
  #rp-view-metricas .mx-audit-cards{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  #rp-view-metricas .mx-audit-toolbar-main{
    display: grid;
    grid-template-columns: 1fr;
  }

  #rp-view-metricas .mx-audit-field{
    width: auto;
    min-width: 0;
  }
}

#rp-view-metricas .mx-closure-modal{
  position: fixed;
  inset: 0;
  z-index: 1500;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
}

#rp-view-metricas .mx-closure-modal[hidden]{
  display: none !important;
}

#rp-view-metricas .mx-closure-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#rp-view-metricas .mx-closure-modal-card{
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 28px));
  height: min(920px, calc(100dvh - 28px));
  max-height: calc(100dvh - 28px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(17,17,17,.12);
  background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  box-shadow:
    0 24px 60px rgba(0,0,0,.25),
    0 2px 8px rgba(17,17,17,.06);
}

#rp-view-metricas .mx-closure-modal-head{
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,17,17,.10);
  background: #fff;
}

#rp-view-metricas .mx-closure-modal-title{
  margin: 0;
  color: var(--mx-text);
  font-size: clamp(1.35rem, 1.05rem + .8vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

#rp-view-metricas .mx-closure-modal-sub{
  margin-top: 8px;
  color: var(--mx-muted);
  line-height: 1.3;
  font-size: .92rem;
  font-weight: 500;
}

#rp-view-metricas .mx-closure-modal-close{
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.14);
  background: #fff;
  color: rgba(17,17,17,.88);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 12px 22px rgba(17,17,17,.10),
    0 2px 6px rgba(17,17,17,.06);
}

#rp-view-metricas .mx-closure-modal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

#rp-view-metricas .mx-closure-modal-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

#rp-view-metricas .mx-closure-modal-col{
  display: grid;
  gap: 14px;
  align-content: start;
  align-self: start;
  min-width: 0;
}

#rp-view-metricas .mx-closure-panel{
  display: grid;
  gap: 14px;
  align-content: start;
  align-self: start;
  padding: 16px;
  border-radius: var(--mx-radius);
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.84);
  box-shadow: var(--mx-shadow);
}

#rp-view-metricas .mx-closure-panel[hidden]{
  display: none !important;
}

#rp-view-metricas .mx-closure-panel-head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}

#rp-view-metricas .mx-closure-panel-head h4{
  margin: 0;
  color: var(--mx-text);
  font-size: 1.02rem;
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

#rp-view-metricas .mx-closure-panel-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#rp-view-metricas .mx-closure-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .02em;
}

#rp-view-metricas .mx-closure-badge[data-state="ok"]{
  background: rgba(34,197,94,.14);
  color: #166534;
}

#rp-view-metricas .mx-closure-badge[data-state="sobrante"]{
  background: rgba(59,130,246,.14);
  color: #1d4ed8;
}

#rp-view-metricas .mx-closure-badge[data-state="faltante"]{
  background: rgba(239,68,68,.14);
  color: #b91c1c;
}

#rp-view-metricas .mx-closure-badge[data-state="ajustado"]{
  background: rgba(245,158,11,.14);
  color: #92400e;
}

#rp-view-metricas .mx-closure-badge[data-state="reabierto"]{
  background: rgba(99,102,241,.14);
  color: #4338ca;
}

#rp-view-metricas .mx-closure-badge[data-state="anulado"]{
  background: rgba(71,85,105,.16);
  color: #334155;
}

#rp-view-metricas .mx-closure-badge[data-state="revisar"]{
  background: rgba(217,119,6,.14);
  color: #b45309;
}

#rp-view-metricas .mx-closure-detail-grid,
#rp-view-metricas .mx-closure-summary-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

#rp-view-metricas .mx-closure-field-card{
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 15px 16px;
  border-radius: 14px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(17,17,17,.05);
}

#rp-view-metricas .mx-closure-field-card .k{
  color: var(--mx-muted);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .01em;
}

#rp-view-metricas .mx-closure-field-card .v{
  color: var(--mx-text);
  font-weight: 900;
  line-height: 1.2;
  font-size: .98rem;
  overflow-wrap: anywhere;
}

#rp-view-metricas .mx-closure-pay-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

#rp-view-metricas .mx-closure-notes{
  display: grid;
  gap: 10px;
}

#rp-view-metricas .mx-closure-note{
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.92);
  color: var(--mx-text);
  line-height: 1.45;
  box-shadow: 0 10px 22px rgba(17,17,17,.05);
}

#rp-view-metricas .mx-closure-history{
  display: grid;
  gap: 12px;
  align-content: start;
}

#rp-view-metricas .mx-closure-history-item{
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 15px 16px;
  border-radius: 14px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(17,17,17,.05);
}

#rp-view-metricas .mx-closure-history-top{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

#rp-view-metricas .mx-closure-history-title{
  font-weight: 900;
  color: var(--mx-text);
  font-size: .96rem;
  line-height: 1.2;
}

#rp-view-metricas .mx-closure-history-meta{
  color: rgba(17,17,17,.58);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: right;
}

#rp-view-metricas .mx-closure-history-body{
  color: var(--mx-muted);
  font-size: .89rem;
  line-height: 1.4;
}

#rp-view-metricas .mx-closure-history-body strong{
  color: var(--mx-text);
  font-weight: 850;
}

#rp-view-metricas .mx-closure-history-detail{
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed rgba(17,17,17,.10);
}

#rp-view-metricas .mx-closure-history-detail-item{
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

#rp-view-metricas .mx-closure-history-label{
  color: rgba(17,17,17,.62);
  font-size: .8rem;
  font-weight: 850;
}

#rp-view-metricas .mx-closure-history-value{
  color: var(--mx-text);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#rp-view-metricas .mx-closure-action-form{
  display: grid;
  gap: 14px;
  align-content: start;
}

#rp-view-metricas .mx-closure-action-form .mx-field{
  display: grid;
  gap: 6px;
}

#rp-view-metricas .mx-closure-action-form .mx-field > span{
  font-size: .82rem;
  font-weight: 700;
  color: rgba(17,17,17,.72);
}

#rp-view-metricas #mx-closure-action-field,
#rp-view-metricas #mx-closure-action-value,
#rp-view-metricas #mx-closure-action-text,
#rp-view-metricas #mx-closure-action-reason{
  width: 100%;
  border: 1.5px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.96);
  color: var(--mx-text);
  font: inherit;
  outline: none;
  box-shadow:
    0 10px 22px rgba(17,17,17,.06),
    0 2px 6px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-view-metricas #mx-closure-action-field,
#rp-view-metricas #mx-closure-action-value{
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 16px;
}

#rp-view-metricas #mx-closure-action-text,
#rp-view-metricas #mx-closure-action-reason{
  min-height: 120px;
  padding: 12px 14px;
  border-radius: 16px;
  resize: vertical;
}

#rp-view-metricas :is(#mx-closure-action-field, #mx-closure-action-value, #mx-closure-action-text, #mx-closure-action-reason):focus{
  border-color: rgba(17,17,17,.35);
  box-shadow:
    0 0 0 3px rgba(17,17,17,.08),
    0 10px 22px rgba(17,17,17,.06),
    0 2px 6px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-view-metricas .mx-closure-textarea{
  font: inherit;
}

#rp-view-metricas .mx-closure-action-help{
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(248,250,252,.96);
  color: var(--mx-muted);
  font-size: .88rem;
  line-height: 1.45;
}

#rp-view-metricas .mx-closure-modal-foot{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px 16px;
  align-items: center;
  min-height: 82px;
  padding: 16px;
  border-top: 1px solid rgba(17,17,17,.10);
  background: #fff;
  box-shadow: 0 -14px 30px rgba(17,17,17,.06);
}

#rp-view-metricas .mx-closure-modal-msg{
  min-height: 20px;
  color: var(--mx-muted);
  font-weight: 800;
}

#rp-view-metricas .mx-closure-modal-actions{
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

#rp-view-metricas .mx-closure-modal-actions-flow{
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

#rp-view-metricas .mx-closure-modal-actions-flow[hidden]{
  display: none !important;
}

#rp-view-metricas .mx-closure-modal-actions .mx-btn{
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.92);
  color: var(--mx-text);
  font: 800 .92rem/1 "Outfit", sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  box-shadow:
    0 10px 22px rgba(17,17,17,.06),
    0 2px 6px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-view-metricas .mx-closure-modal-actions .mx-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.20);
  box-shadow:
    0 14px 26px rgba(17,17,17,.08),
    0 3px 8px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.94);
}

#rp-view-metricas .mx-closure-modal-actions .mx-btn:active{
  transform: translateY(0);
}

#rp-view-metricas .mx-closure-modal-actions .mx-btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(17,17,17,.10),
    0 14px 26px rgba(17,17,17,.08),
    0 3px 8px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.94);
}

#rp-view-metricas .mx-closure-modal-actions .mx-btn:disabled{
  cursor: not-allowed;
  opacity: .55;
  transform: none;
  box-shadow: none;
}

#rp-view-metricas #mx-closure-close2,
#rp-view-metricas #mx-closure-cancel-action{
  background: rgba(255,255,255,.92);
  color: var(--mx-text);
}

#rp-view-metricas #mx-closure-submit-action{
  border-color: transparent;
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  color: #fff;
}

#rp-view-metricas #mx-closure-submit-action:hover{
  border-color: transparent;
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

@media (max-width: 1100px){
  #rp-view-metricas .mx-closure-modal-grid{
    grid-template-columns: 1fr;
  }

  #rp-view-metricas .mx-closure-modal-col{
    grid-template-columns: 1fr;
  }

  #rp-view-metricas .mx-closure-pay-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  #rp-view-metricas .mx-closures-table{
    min-width: 1280px;
  }

  #rp-view-metricas .mx-closures-table :is(th, td).mx-closures-col-state{
    right: 0;
    min-width: 190px;
  }

  #rp-view-metricas .mx-closures-actions{
    gap: 6px;
  }

  #rp-view-metricas .mx-closure-modal-card{
    width: min(100vw - 16px, 100%);
    height: 90dvh;
    min-height: 90dvh;
    max-height: 90dvh;
    border-radius: 22px 22px 0 0;
  }

  #rp-view-metricas .mx-closure-modal-body{
    padding: 14px;
  }

  #rp-view-metricas .mx-closure-detail-grid,
  #rp-view-metricas .mx-closure-summary-grid,
  #rp-view-metricas .mx-closure-pay-grid{
    grid-template-columns: 1fr;
  }

  #rp-view-metricas .mx-closure-modal-foot{
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  }

  #rp-view-metricas .mx-closure-modal-actions{
    justify-content: stretch;
  }

  #rp-view-metricas .mx-closure-modal-actions-flow{
    justify-content: stretch;
  }

  #rp-view-metricas .mx-closure-modal-actions .mx-btn{
    width: 100%;
    justify-content: center;
  }

  #rp-view-metricas .mx-closure-history-detail-item{
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ============================================================
   ✅ MODOS DE PEDIDO — colores por data-accent
   (se activa con el mini JS del Bloque B)
   ============================================================ */

#rp-view-metricas #mx-modes .mx-item{
  border: 1px solid rgba(17,17,17,.10);
}

#rp-view-metricas #mx-modes .mx-item[data-accent]{
  border-color: transparent;
}

#rp-view-metricas #mx-modes .mx-item[data-accent] .mx-item-title,
#rp-view-metricas #mx-modes .mx-item[data-accent] .mx-item-val{
  color: #fff;
}

#rp-view-metricas #mx-modes .mx-item[data-accent] .mx-item-sub{
  color: rgba(255,255,255,.88);
}

/* Mesa (azul) */
#rp-view-metricas #mx-modes .mx-item[data-accent="mesa"]{
  background: linear-gradient(135deg, var(--mx-mesa) 0%, #4f8cff 100%);
  box-shadow: 0 12px 24px rgba(37,99,235,.18);
}

/* Delivery (rojo) */
#rp-view-metricas #mx-modes .mx-item[data-accent="delivery"]{
  background: linear-gradient(135deg, var(--mx-delivery) 0%, var(--mx-red2) 100%);
  box-shadow: 0 12px 24px rgba(224,49,49,.18);
}

/* En camino (amarillo) */
#rp-view-metricas #mx-modes .mx-item[data-accent="encamino"]{
  background: linear-gradient(135deg, var(--mx-encamino) 0%, #ffbc42 100%);
  box-shadow: 0 12px 24px rgba(245,158,11,.18);
}

/* Recojo (verde) */
#rp-view-metricas #mx-modes .mx-item[data-accent="recojo"]{
  background: linear-gradient(135deg, var(--mx-recojo) 0%, #23d39a 100%);
  box-shadow: 0 12px 24px rgba(16,185,129,.18);
}

/* ============================================================
   📱 MÓVIL: controles en una sola línea (SIN overflow)
   Select + Input + 3 iconos
   ============================================================ */
@media (max-width: 600px){

  /* escondemos labels para ahorrar espacio */
  #rp-view-metricas .mx-field > span:not(.mx-period-label){ display:none !important; }

  /* fila única, sin wrap (clave para evitar saltos) */
  #rp-view-metricas .mx-controls{
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 6px;                 /* ✅ más compacto */
    width: 100%;
    min-width: 0;             /* ✅ permite encoger hijos */
  }

  /* 2 campos (select y periodo) como items flex */
  #rp-view-metricas .mx-controls > .mx-field{
    display: flex;
    align-items: center;
    min-width: 0;
  }

  /* el 2do field (periodo) ocupa el espacio restante */
  #rp-view-metricas .mx-controls > .mx-field:last-of-type{
    flex: 1 1 auto;
    min-width: 0;
  }

  /* select compacto */
  #rp-view-metricas #mx-mode{
    width: 74px;              /* ✅ un poco menor */
    min-height: 40px;
    padding: 8px 10px;
    font-size: .84rem;
    font-weight: 650;
  }

  /* wrap del periodo en fila */
  #rp-view-metricas .mx-period-wrap{
    display: flex;
    align-items: center;
    gap: 6px;                 /* ✅ más compacto */
    flex: 1 1 auto;
    min-width: 0;
  }

  /* input del periodo: debe encoger sin empujar iconos */
  #rp-view-metricas .mx-period-input{
    flex: 1 1 auto;
    min-width: 0;             /* ✅ IMPORTANTÍSIMO */
    min-height: 40px;
    padding: 8px 10px;
    font-size: .84rem;        /* ✅ texto más chico */
    font-weight: 650;         /* ✅ menos grueso */
    white-space: nowrap;      /* ✅ una línea */
    overflow: hidden;         /* ✅ evita overflow */
    text-overflow: ellipsis;  /* ✅ “…” */
  }

  /* 3 botones icono compactos */
  #rp-view-metricas #mx-period-open,
  #rp-view-metricas #mx-refresh,
  #rp-view-metricas #mx-download-xlsx{
    width: 40px;
    height: 40px;
    min-height: 40px;
    flex: 0 0 auto;
  }

  #rp-view-metricas #mx-period-open::before,
  #rp-view-metricas #mx-refresh::before,
  #rp-view-metricas #mx-download-xlsx::before{
    width: 18px;
    height: 18px;
  }

  /* tu ajuste visual (excel/refresh “altos”) se mantiene */
  #rp-view-metricas #mx-refresh::before,
  #rp-view-metricas #mx-download-xlsx::before{
    transform: translateY(1px);
  }
}

/* ============================================================
   📅 PICKER (mx-range-pop) — estilo + MES “pro”
   - se inserta en <body>
   - lo limitamos a cuando #rp-view-metricas está visible
   ============================================================ */

@supports selector(body:has(*)){

  body:has(#rp-view-metricas:not([hidden])):has(.mx-range-pop[data-mx-picker="1"])::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"]{
    position: fixed;
    z-index: 1000;
    width: min(380px, calc(100vw - 24px));
    border-radius: 20px;
    background: #fff;
    border: 1.5px solid rgba(17,17,17,.14);
    box-shadow:
      0 26px 70px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.90);
    overflow: hidden;
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-head{
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 44px 44px;
    gap: 10px;
    align-items: center;
    padding: 12px 12px;
    border-bottom: 1px solid rgba(17,17,17,.10);
    background: #fff;
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-title{
    text-align: center;
    color: #111;
    font-weight: 950;
    letter-spacing: -0.01em;
    font-size: 1rem;
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-btn{
    appearance: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    border: 1.5px solid rgba(17,17,17,.12);
    background: #fff;
    color: rgba(17,17,17,.86);
    font-weight: 950;
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .12s ease, border-color .16s ease;
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-btn:hover{
    border-color: #111;
    transform: translateY(-1px);
  }
  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-btn:active{
    transform: translateY(0);
  }

  /* ✅ MES: grid pro (12 botones tipo “card”) */
  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-month-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    padding: 12px;
    background: #fff;
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-month-btn{
    appearance: none;
    width: 100%;
    min-width: 0;
    height: 44px;
    border-radius: 14px;
    border: 1.5px solid rgba(17,17,17,.10);
    background: rgba(255,255,255,.96);
    color: #111;
    font-family: "Outfit", sans-serif;
    font-weight: 900;
    font-size: .95rem;
    text-transform: capitalize;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .12s ease, border-color .16s ease, background .16s ease, color .16s ease;
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-month-btn:hover{
    border-color: #111;
    transform: translateY(-1px);
  }

  /* activo rojo como el resto */
  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-month-btn.is-active{
    background: linear-gradient(135deg, #e03131 0%, #ff4d4d 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 14px 24px rgba(224,49,49,.22);
  }

  /* ✅ semana y días (Día/Rango) */
  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-week{
    display: grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
    gap: 8px;
    padding: 12px 12px 0;
    background: #fff;
    color: rgba(17,17,17,.62);
    font-weight: 950;
    font-size: .82rem;
    text-align: center;
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-grid{
    display: grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
    gap: 8px;
    padding: 12px;
    background: #fff;
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-day{
    appearance: none;
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    border: 1.5px solid rgba(17,17,17,.10);
    background: #fff;
    color: #111;
    font-weight: 950;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    transition: transform .12s ease, border-color .16s ease, background .16s ease, color .16s ease;
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-day:hover{
    border-color: #111;
    transform: translateY(-1px);
  }
  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-day:active{
    transform: translateY(0);
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-day.is-muted{
    opacity: .55;
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-day.is-in{
    background: rgba(224,49,49,.16);
    border-color: rgba(224,49,49,.18);
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-day.is-start,
  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-day.is-end{
    background: linear-gradient(135deg, #e03131 0%, #ff4d4d 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 22px rgba(224,49,49,.20);
  }

  body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"] .mx-range-help{
    padding: 12px 12px 14px;
    border-top: 1px solid rgba(17,17,17,.10);
    color: rgba(17,17,17,.62);
    font-weight: 900;
    font-size: .9rem;
    text-align: center;
    background: #fff;
  }

  @media (max-width: 600px){
    body:has(#rp-view-metricas:not([hidden])) .mx-range-pop[data-mx-picker="1"]{
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      max-height: calc(100vh - 24px);
      overflow: auto;
    }
  }
}


/* ============================================================
   ✅ SECCIÓN: CATEGORÍAS
   - Solo afecta: #rp-view-categorias y #rp-modal-categoria
   - Toolbar + Cards + Empty + Modal Crear/Editar
   ============================================================ */

#rp-view-categorias,
#rp-modal-categoria{
  font-family: "Outfit", sans-serif;

  --cat-text: #111;
  --cat-muted: rgba(17,17,17,.62);
  --cat-border: rgba(17,17,17,.10);

  --cat-surface: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  --cat-shadow:
    0 12px 26px rgba(17,17,17,.10),
    0 2px 8px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.85);

  --cat-red1: #e03131;
  --cat-red2: #ff4d4d;

  --cat-green1: #16a34a;
  --cat-green2: #22c55e;

  --cat-slate1: #64748b;
  --cat-slate2: #94a3b8;

  --cat-focus: rgba(37,99,235,.35);
}

/* ------------------------------
   View wrapper
   ------------------------------ */
#rp-view-categorias{
  padding: 10px 30px 28px;
}

@media (max-width: 600px){
  #rp-view-categorias{ padding: 8px 16px 20px; }
}

/* ------------------------------
   ✅ Quitar tarjeta contenedora (rp-card-categorias)
   (sin tocar HTML: solo la hacemos “invisible”)
   ------------------------------ */
#rp-view-categorias .rp-card-categorias{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* header (ya no como card) */
#rp-view-categorias .rp-card-categorias .sa-card-header{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 6px 0 12px;
  border-bottom: 1px solid rgba(17,17,17,.08);
}


#rp-view-categorias .rp-card-categorias .sa-card-header-main{
  min-width: 0;
}

#rp-view-categorias .rp-card-categorias .sa-card-title{
  margin: 0;
  color: var(--cat-text);
  font-weight: 850;
  letter-spacing: -0.02em;
  font-size: clamp(1.15rem, 1.05rem + .6vw, 1.55rem);
}

#rp-view-categorias .rp-card-categorias .sa-card-meta{
  margin: 6px 0 0;
  color: var(--cat-muted);
  line-height: 1.25;
  font-size: .95rem;
}

#rp-view-categorias .rp-card-categorias .sa-card-header-actions{
  justify-self: end;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* botón crear categoría (menos grueso) */
#rp-view-categorias #rp-categorias-nueva-btn.sa-primary-btn{
  appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: linear-gradient(135deg, var(--cat-red1) 0%, var(--cat-red2) 100%);
  color: #fff;
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 16px;
  font-weight: 700; /* ✅ menos grueso */
  font-size: .95rem;
  cursor: pointer;
  box-shadow:
    0 14px 26px rgba(224,49,49,.22),
    0 2px 8px rgba(17,17,17,.06);
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease;
  white-space: nowrap;
}

#rp-view-categorias #rp-categorias-nueva-btn.sa-primary-btn:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow:
    0 18px 30px rgba(224,49,49,.26),
    0 3px 10px rgba(17,17,17,.06);
}

#rp-view-categorias #rp-categorias-nueva-btn.sa-primary-btn:active{
  transform: translateY(0);
}

#rp-view-categorias #rp-categorias-nueva-btn.sa-primary-btn:focus-visible{
  outline: 2px solid var(--cat-focus);
  outline-offset: 2px;
}


/* mensaje de estado */
#rp-view-categorias #rp-categorias-msg.rp-card-msg{
  padding: 10px 0 0;
  min-height: 0;
}

/* body */
#rp-view-categorias .rp-categorias-body{
  padding: 12px 0 0;
}

/* ------------------------------
   Toolbar: filtro + búsqueda (SIN tarjeta)
   ------------------------------ */
#rp-view-categorias .rp-categorias-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap; /* ✅ no baja en tablet/móvil */
  margin: 10px 0 16px;
}

#rp-view-categorias .rp-categorias-toolbar-left{
  flex: 0 0 auto;
  min-width: 0;
}

/* ✅ ya no “card”: solo inline */
#rp-view-categorias .rp-categorias-filter{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

#rp-view-categorias .rp-categorias-filter-label{
  color: rgba(17,17,17,.72);
  font-weight: 750;
  font-size: .92rem;
  white-space: nowrap;
}

#rp-view-categorias .rp-categorias-select{
  appearance: none;
  border: 1.5px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.92);
  color: var(--cat-text);
  border-radius: 999px; /* ✅ súper redondeado */
  min-height: 46px;
  padding: 10px 40px 10px 14px;
  font-weight: 800;
  font-size: .93rem;
  cursor: pointer;
  outline: none;
  box-shadow:
    0 10px 20px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(17,17,17,.75) 50%),
    linear-gradient(135deg, rgba(17,17,17,.75) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#rp-view-categorias .rp-categorias-select:focus-visible{
  outline: 2px solid var(--cat-focus);
  outline-offset: 2px;
}

#rp-view-categorias .rp-categorias-search{
  flex: 1 1 auto;
  min-width: 0; /* ✅ permite que no baje */
}

#rp-view-categorias #rp-categorias-buscar{
  width: 100%;
  min-height: 46px;
  border-radius: 999px; /* ✅ súper redondeado */
  border: 1.5px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.92);
  padding: 10px 14px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--cat-text);
  box-shadow:
    0 10px 20px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  outline: none;
}

#rp-view-categorias #rp-categorias-buscar::placeholder{
  color: rgba(17,17,17,.45);
  font-weight: 650;
}

#rp-view-categorias #rp-categorias-buscar:focus-visible{
  outline: 2px solid var(--cat-focus);
  outline-offset: 2px;
}

/* si el dispositivo es extremadamente angosto, permitimos wrap (último recurso) */
@media (max-width: 360px){
  #rp-view-categorias .rp-categorias-toolbar{ flex-wrap: wrap; }
  #rp-view-categorias .rp-categorias-search{ flex: 1 1 100%; }
}

/* ------------------------------
   Grid de tarjetas
   ------------------------------ */
#rp-view-categorias #rp-categorias-list{
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
}

@media (min-width: 0px){
  #rp-view-categorias #rp-categorias-list{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
@media (min-width: 700px){
  #rp-view-categorias #rp-categorias-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  #rp-view-categorias #rp-categorias-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px){
  #rp-view-categorias #rp-categorias-list{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------
   Tarjeta categoría
   ------------------------------ */
#rp-view-categorias .rp-cat-card{
  border-radius: 18px;
  background: var(--cat-surface);
  border: 1.5px solid rgba(17,17,17,.08);
  box-shadow: var(--cat-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}

#rp-view-categorias .rp-cat-card:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.18);
  box-shadow:
    0 18px 40px rgba(17,17,17,.14),
    0 3px 10px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
}

/* head (MISMA estructura en desktop/tablet/móvil) */
#rp-view-categorias .rp-cat-card__head{
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(17,17,17,.08);
  min-width: 0;
}

#rp-view-categorias .rp-cat-color-badge--card{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  box-shadow:
    0 12px 24px rgba(17,17,17,.10),
    inset 0 1px 0 rgba(255,255,255,.35);
  border: 1px solid rgba(0,0,0,.10);
  flex: 0 0 auto;
}

#rp-view-categorias .rp-cat-color-badge--card span{
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

#rp-view-categorias .rp-cat-card__main{
  min-width: 0;
}

#rp-view-categorias .rp-cat-card__title{
  color: var(--cat-text);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

#rp-view-categorias .rp-cat-card__desc{
  margin-top: 6px;
  color: var(--cat-muted);
  font-size: .92rem;
  line-height: 1.25;
  overflow: hidden;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#rp-view-categorias .rp-cat-card__desc--empty{
  color: rgba(17,17,17,.38);
  font-style: italic;
}

/* estado */
#rp-view-categorias .rp-cat-estado-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .78rem;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow:
    0 10px 18px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.25);
}

#rp-view-categorias .rp-cat-estado-badge--on{
  background: linear-gradient(135deg, var(--cat-green1) 0%, var(--cat-green2) 100%);
  color: #fff;
}

#rp-view-categorias .rp-cat-estado-badge--off{
  background: linear-gradient(135deg, var(--cat-slate1) 0%, var(--cat-slate2) 100%);
  color: #fff;
}

/* meta (Orden / Productos) — SIEMPRE 2 columnas */
#rp-view-categorias .rp-cat-card__meta{
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#rp-view-categorias .rp-kv{
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.70);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  min-width: 0;
}

#rp-view-categorias .rp-kv > span{
  font-size: .78rem;
  font-weight: 850;
  color: rgba(17,17,17,.55);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 65%;
}

#rp-view-categorias .rp-kv > strong{
  font-size: .95rem;
  font-weight: 950;
  color: var(--cat-text);
  max-width: 40%;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* acciones — centradas y SOLO íconos circulares */
#rp-view-categorias .rp-cat-card__actions{
  margin-top: auto;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(17,17,17,.08);
  display: flex;
  justify-content: center; /* ✅ centradas */
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}

/* base icon button (sin inventar HTML) */
#rp-view-categorias .rp-cat-card__actions .rp-cat-action{
  appearance: none;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 50%;

  display: inline-flex;          /* ✅ centrar de verdad */
  align-items: center;           /* ✅ centro vertical */
  justify-content: center;       /* ✅ centro horizontal */

  cursor: pointer;
  font-size: 0;
  line-height: 0;

  border: 1.5px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.92);
  color: #111;

  box-shadow:
    0 12px 22px rgba(17,17,17,.10),
    0 2px 6px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.85);

  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

#rp-view-categorias .rp-cat-card__actions .rp-cat-action:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.28);
  box-shadow:
    0 16px 28px rgba(17,17,17,.12),
    0 3px 8px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-view-categorias .rp-cat-card__actions .rp-cat-action:active{
  transform: translateY(0);
}

#rp-view-categorias .rp-cat-card__actions .rp-cat-action:focus-visible{
  outline: 2px solid var(--cat-focus);
  outline-offset: 2px;
}

/* íconos por máscara */
#rp-view-categorias .rp-cat-card__actions .rp-cat-action::before{
  content: "";
  width: 18px;
  height: 18px;
  display: block;                /* ✅ evita alineación “arriba” */
  background-color: currentColor;
  -webkit-mask: var(--cat-act-ico) center/contain no-repeat;
          mask: var(--cat-act-ico) center/contain no-repeat;
}

/* icono editar */
#rp-view-categorias .rp-cat-card__actions .rp-cat-action[data-role="edit"]{
  --cat-act-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 20h9'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

/* botón eliminar: rojo + basurero blanco */
#rp-view-categorias .rp-cat-card__actions .rp-cat-action[data-role="delete"]{
  background: linear-gradient(135deg, var(--cat-red1) 0%, var(--cat-red2) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 14px 26px rgba(224,49,49,.22),
    0 2px 8px rgba(17,17,17,.06);
  --cat-act-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 6V4h8v2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 6l1 14h10l1-14'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

#rp-view-categorias .rp-cat-card__actions .rp-cat-action[data-role="delete"]:hover{
  border-color: transparent;
  box-shadow:
    0 18px 30px rgba(224,49,49,.28),
    0 3px 10px rgba(17,17,17,.06);
}

/* ajustes de tamaño en móvil (SIN cambiar estructura) */
@media (max-width: 600px){
  #rp-view-categorias .rp-cat-card__head{ padding: 12px 12px 10px; gap: 10px; }
  #rp-view-categorias .rp-cat-card__meta{ padding: 10px 12px; gap: 10px; }
  #rp-view-categorias .rp-cat-card__actions{ padding: 10px 12px 12px; }

  #rp-view-categorias .rp-cat-card__actions .rp-cat-action{
    width: 42px;
    height: 42px;
    min-height: 42px;
  }

  #rp-view-categorias .rp-cat-card__actions .rp-cat-action::before{
    width: 16px;
    height: 16px;
  }
}

/* ------------------------------
   Empty state
   ------------------------------ */
#rp-view-categorias .rp-categorias-empty-inline{
  margin-top: 14px;
  text-align: center;
  padding: 26px 16px;
  border-radius: 18px;
  border: 1.5px dashed rgba(17,17,17,.18);
  background: rgba(255,255,255,.65);
  color: rgba(17,17,17,.75);
  font-weight: 750;
}


/* ============================================================
   ✅ SECCIÓN: PRODUCTOS (solo #tab-productos + #modal-producto)
   - Toolbar + grid + tarjetas + pills + acciones + modal producto
   - 100% scoped (no afecta otras secciones)
   ============================================================ */

#tab-productos{
  padding: 10px 30px 28px;
  font-family: "Outfit", sans-serif;

  --prod-text: #111;
  --prod-muted: rgba(17,17,17,.62);
  --prod-border: rgba(17,17,17,.10);
  --prod-surface: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  --prod-shadow:
    0 12px 26px rgba(17,17,17,.10),
    0 2px 8px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.85);

  --prod-red1: #e03131;
  --prod-red2: #ff4d4d;

  --prod-green1: #16a34a;
  --prod-green2: #22c55e;

  --prod-amber1: #f59e0b;
  --prod-amber2: #ffbc42;

  --prod-blue1: #2563eb;
  --prod-blue2: #3b82f6;
}

@media (max-width: 600px){
  #tab-productos{ padding: 8px 16px 20px; }
}

/* ✅ QUITAR CONTENEDOR GRANDE (wrapper existe en HTML, apagamos su look) */
#tab-productos .rp-card-productos{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* Header */
#tab-productos .sa-card-header{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 14px;

  padding: 6px 0 14px;
  margin: 6px 0 14px;

  border-bottom: 1px solid rgba(17,17,17,.10);
}

#tab-productos .sa-card-header-main{ min-width: 0; }

#tab-productos .sa-card-title{
  margin: 0;
  color: var(--prod-text);
  font-weight: 850;
  letter-spacing: -0.02em;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.5rem);
}

#tab-productos .sa-card-meta{
  margin: 6px 0 0;
  color: var(--prod-muted);
  line-height: 1.25;
}

#tab-productos .sa-card-header-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Botón Agregar producto */
#tab-productos #btn-agregar-producto{
  appearance: none;
  border: 1.5px solid rgba(0,0,0,.10);
  background: linear-gradient(135deg, var(--prod-red1) 0%, var(--prod-red2) 100%);
  color: #fff;

  border-radius: 999px;
  min-height: 44px;
  padding: 10px 16px;

  font-family: "Outfit", sans-serif;
  font-weight: 650;
  font-size: .95rem;

  box-shadow:
    0 12px 26px rgba(224,49,49,.18),
    0 2px 8px rgba(17,17,17,.06);

  cursor: pointer;
  transition: transform .12s ease, filter .16s ease, box-shadow .16s ease;
}

#tab-productos #btn-agregar-producto:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}
#tab-productos #btn-agregar-producto:active{ transform: translateY(0); }
#tab-productos #btn-agregar-producto:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

/* Mensajes */
#tab-productos #feedback-producto{ padding: 0; }
#tab-productos #feedback-producto.is-empty{
  margin: 10px 0 0;
  padding: 16px;
  border-radius: 18px;
  border: 1.5px dashed rgba(17,17,17,.18);
  background: rgba(255,255,255,.65);
  color: rgba(17,17,17,.72);
}

/* Body */
#tab-productos .rp-productos-body{ padding: 0; }

/* =========================
   TOOLBAR: FILTROS + BUSCAR
   ========================= */
#tab-productos .rp-productos-toolbar{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

#tab-productos .rp-productos-toolbar-left{
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

#tab-productos .rp-productos-filter{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
  width: clamp(150px, 16vw, 210px);
}

#tab-productos .rp-productos-filter > span,
#tab-productos .rp-productos-search > span{
  font-size: .82rem;
  font-weight: 650;
  color: rgba(17,17,17,.70);
}

/* Inputs/Selects pill */
#tab-productos .rp-productos-filter select,
#tab-productos .rp-productos-search input{
  appearance: none;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;

  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.88);

  box-shadow:
    0 10px 22px rgba(17,17,17,.08),
    0 2px 6px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.90);

  color: var(--prod-text);
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: .92rem;

  outline: none;
}

#tab-productos .rp-productos-search input::placeholder{
  color: rgba(17,17,17,.45);
  font-weight: 600;
}

#tab-productos .rp-productos-filter select:focus,
#tab-productos .rp-productos-search input:focus{
  border-color: rgba(17,17,17,.35);
  box-shadow:
    0 0 0 3px rgba(17,17,17,.08),
    0 10px 22px rgba(17,17,17,.08),
    0 2px 6px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.90);
}

#tab-productos .rp-productos-search{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 260px;
  flex: 1 1 320px;
}

/* ✅ MÓVIL: toolbar 2x2 EXACTO
   Fila 1: Categoría | Estado
   Fila 2: Ordenar   | Buscar
*/
@media (max-width: 600px){
  #tab-productos .rp-productos-toolbar{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
  }

  /* convierte los 3 filtros en “hijos” directos del grid sin tocar HTML */
  #tab-productos .rp-productos-toolbar-left{
    display: contents;
  }

  #tab-productos .rp-productos-filter,
  #tab-productos .rp-productos-search{
    width: auto;
    min-width: 0;
  }

  /* posiciones del 2x2 */
  #tab-productos .rp-productos-toolbar-left .rp-productos-filter:nth-of-type(1){
    grid-column: 1; grid-row: 1;
  }
  #tab-productos .rp-productos-toolbar-left .rp-productos-filter:nth-of-type(2){
    grid-column: 2; grid-row: 1;
  }
  #tab-productos .rp-productos-toolbar-left .rp-productos-filter:nth-of-type(3){
    grid-column: 1; grid-row: 2;
  }
  #tab-productos .rp-productos-search{
    grid-column: 2; grid-row: 2;
    min-width: 0;
  }
}

/* =========================
   GRID: TARJETAS PRODUCTO
   ========================= */
#tab-productos #productos-lista{ margin-top: 6px; }

#tab-productos .rp-grid--prods{
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
}

@media (min-width: 0px){
  #tab-productos .rp-grid--prods{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
@media (min-width: 700px){
  #tab-productos .rp-grid--prods{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  #tab-productos .rp-grid--prods{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px){
  #tab-productos .rp-grid--prods{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================
   TARJETA PRODUCTO
   ========================= */
#tab-productos .rp-prod-card{
  border-radius: 18px;
  background: var(--prod-surface);
  border: 1.5px solid rgba(17,17,17,.08);
  box-shadow: var(--prod-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#tab-productos .rp-prod-card:hover{
  border-color: rgba(17,17,17,.20);
  box-shadow:
    0 18px 40px rgba(17,17,17,.14),
    0 3px 10px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
}

/* ✅ Re-layout para poder llevar “Visible” al borde derecho */
#tab-productos .rp-prod-card__row{
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto; /* título / categoría / pills */
  column-gap: 12px;
  row-gap: 6px;

  align-items: start;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(17,17,17,.08);
  min-width: 0;
}

#tab-productos .rp-prod-card__thumb{
  width: 68px;
  height: 68px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(17,17,17,.06);
  border: 1px solid rgba(17,17,17,.08);

  display: grid;
  place-items: center;

  grid-column: 1;
  grid-row: 1 / span 3; /* ✅ mantiene la foto alineada a todo el bloque */
}

#tab-productos .rp-prod-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* el contenedor main no “manda” layout; posicionamos sus hijos */
#tab-productos .rp-prod-card__main{ display: contents; }

#tab-productos .rp-prod-card__title{
  grid-column: 2;
  grid-row: 1;

  color: var(--prod-text);
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: 1rem;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#tab-productos .rp-prod-card__meta,
#tab-productos .rp-prod-card__meta--empty{
  grid-column: 2;
  grid-row: 2;

  margin: 0;
  font-size: .84rem;
  color: var(--prod-muted);
  line-height: 1.2;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* precio + orden */
#tab-productos .rp-prod-card__price{
  grid-column: 3;
  grid-row: 1 / span 2; /* ✅ queda alineado arriba como en desktop */

  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 92px;
}

#tab-productos .rp-prod-card__price-val{
  font-weight: 950;
  font-size: 1.02rem;
  color: var(--prod-text);
  white-space: nowrap;
}

#tab-productos .rp-prod-card__price-sub{
  font-size: .78rem;
  color: var(--prod-muted);
  white-space: nowrap;
  margin-top: 0;
}

/* ✅ Pills: Disponible a la izquierda, Visible al borde derecho */
#tab-productos .rp-prod-card__pills{
  grid-column: 2 / 4; /* ✅ ocupa hasta la columna del precio */
  grid-row: 3;

  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#tab-productos .rp-prod-card__pills .rp-pill:last-child{
  margin-left: auto; /* ✅ empuja Visible a la derecha */
}

@media (max-width: 600px){
  #tab-productos .rp-prod-card__row{
    grid-template-columns: 60px minmax(0, 1fr) auto;
    padding: 12px 12px 10px;
    column-gap: 10px;
  }

  #tab-productos .rp-prod-card__thumb{
    width: 60px;
    height: 60px;
    border-radius: 14px;
  }

  #tab-productos .rp-prod-card__price{
    min-width: 86px;
  }
}

/* Pills */
#tab-productos .rp-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  flex: 0 0 auto;
}

#tab-productos .rp-pill--ok{
  background: linear-gradient(135deg, var(--prod-green1) 0%, var(--prod-green2) 100%);
  color: #fff;
  box-shadow: 0 10px 20px rgba(34,197,94,.18);
}

#tab-productos .rp-pill--warn{
  background: linear-gradient(135deg, var(--prod-amber1) 0%, var(--prod-amber2) 100%);
  color: #fff;
  box-shadow: 0 10px 20px rgba(245,158,11,.18);
}

#tab-productos .rp-pill--muted{
  background: rgba(17,17,17,.08);
  border-color: rgba(17,17,17,.12);
  color: rgba(17,17,17,.78);
  box-shadow: none;
}

/* =========================
   ACCIONES (iconos CENTRO-CENTRO real)
   Reemplaza tu bloque actual de acciones por este
   ========================= */
#tab-productos .rp-prod-card__actions{
  padding: 14px 14px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
}

#tab-productos .rp-prod-card__actions .rp-icon-btn{
  appearance: none;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  aspect-ratio: 1;

  /* ✅ centro real */
  display: grid;
  place-items: center;

  /* ✅ elimina cualquier “corrimiento” por baseline/padding */
  padding: 0;
  font-size: 0;
  line-height: 0;

  border: 1.5px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.92);
  color: #111;

  box-shadow:
    0 12px 26px rgba(17,17,17,.10),
    0 2px 8px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.85);

  cursor: pointer;
  transition: border-color .16s ease, transform .12s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

#tab-productos .rp-prod-card__actions .rp-icon-btn:hover{
  border-color: #111;
  transform: translateY(-1px);
  box-shadow:
    0 16px 34px rgba(17,17,17,.14),
    0 3px 10px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
}
#tab-productos .rp-prod-card__actions .rp-icon-btn:active{ transform: translateY(0); }

#tab-productos .rp-prod-card__actions .rp-icon-btn:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

/* ✅ RESET FUERTE del SVG para evitar que algún CSS global lo empuje */
#tab-productos .rp-prod-card__actions .rp-icon-btn > svg{
  width: 20px;
  height: 20px;

  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;

  /* centro centro */
  justify-self: center;
  align-self: center;

  /* ⚠️ esto corrige el “corrimiento a la derecha” por reglas externas */
  margin: 0 !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  translate: none !important;
}

/* color estable */
#tab-productos .rp-prod-card__actions .rp-icon-btn > svg,
#tab-productos .rp-prod-card__actions .rp-icon-btn > svg *{
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;

  /* evita comportamientos raros en algunos navegadores */
  transform-box: fill-box;
  transform-origin: center;
}

#tab-productos .rp-prod-card__actions .rp-icon-btn > svg [fill]:not([fill="none"]){
  fill: currentColor !important;
}

/* Danger */
#tab-productos .rp-prod-card__actions .rp-icon-btn--danger{
  background: linear-gradient(135deg, var(--prod-red1) 0%, var(--prod-red2) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 12px 24px rgba(224,49,49,.22),
    0 2px 6px rgba(17,17,17,.05);
}
#tab-productos .rp-prod-card__actions .rp-icon-btn--danger:hover{
  border-color: transparent;
}

@media (max-width: 600px){
  #tab-productos .rp-prod-card__actions .rp-icon-btn{
    width: 46px;
    height: 46px;
  }
  #tab-productos .rp-prod-card__actions .rp-icon-btn > svg{
    width: 18px;
    height: 18px;
  }
}


/* ============================================================
   ✅ MODAL PRODUCTO (solo #modal-producto)
   - Mismo sistema visual del modal de categoría
   - Cards internas
   - Scroll interno correcto
   - Precios / Extras en una sola línea
   - Flags full width
   - Descuentos con opción activa en rojo
   ============================================================ */

#modal-producto,
#modal-producto *{
  box-sizing: border-box;
}

#modal-producto[aria-hidden="true"]{
  display: none;
}

#modal-producto{
  position: fixed;
  inset: 0;
  z-index: 999;
  padding: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Outfit", sans-serif;

  --prod-surface: #ffffff;
  --prod-text: rgba(17,17,17,.90);
  --prod-muted: rgba(17,17,17,.62);
  --prod-red: #ff002a;
  --prod-red-soft: rgba(255,0,42,.14);
  --prod-border: rgba(17,17,17,.10);
  --prod-shadow:
    0 12px 26px rgba(17,17,17,.06),
    0 2px 8px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.88);

  --prod-ico-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 6V4h8v2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 6l1 14h10l1-14'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
  --prod-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M8.2 13.6 4.9 10.3l-1.4 1.4 4.7 4.7L16.5 8l-1.4-1.4z'/%3E%3C/svg%3E");
}

@supports selector(body:has(*)){
  body:has(#modal-producto.is-open) #sa-modal-backdrop.sa-modal-backdrop{
    background: rgba(0,0,0,.40);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* Card principal */
#modal-producto .rp-modal-producto-card{
  width: min(1120px, calc(100vw - 28px));
  height: min(920px, calc(100dvh - 28px));
  max-height: calc(100dvh - 28px);

  display: flex;
  flex-direction: column;
  overflow: hidden;

  background: var(--prod-surface);
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);

  transform: translateY(10px) scale(.99);
  transition: transform .18s ease;
}

#modal-producto.is-open .rp-modal-producto-card{
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  #modal-producto .rp-modal-producto-card{
    transition: none;
    transform: none;
  }
}

/* Header */
#modal-producto .sa-modal-header{
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,17,17,.10);
  background: var(--prod-surface);
}

#modal-producto .sa-modal-head-copy{
  min-width: 0;
}

#modal-producto .sa-modal-header h2{
  margin: 0;
  font-size: clamp(1.35rem, 1.05rem + .8vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--prod-text);
}

#modal-producto .rp-producto-modal-subtitle{
  margin: 8px 0 0;
  color: var(--prod-muted);
  line-height: 1.3;
  font-size: .92rem;
  font-weight: 500;
}

#modal-producto .sa-modal-close{
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1 / 1;
  flex: 0 0 44px;
  align-self: flex-start;

  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.14);
  background: #fff;

  box-shadow:
    0 12px 22px rgba(17,17,17,.10),
    0 2px 6px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.92);

  cursor: pointer;
  position: relative;
  padding: 0;

  font-size: 0;
  line-height: 0;
}

#modal-producto .sa-modal-close::before{
  content: "\00D7";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: rgba(17,17,17,.88);
}

#modal-producto .sa-modal-close:hover{
  border-color: rgba(17,17,17,.28);
}

#modal-producto .sa-modal-close:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

/* Body */
#modal-producto .sa-modal-body.rp-modal-producto-body{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
  padding: 0;
  background: var(--prod-surface);
}

#modal-producto .rp-producto-form{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

#modal-producto .rp-producto-grid{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 16px;
  align-content: start;
}

#modal-producto .rp-producto-col{
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Cards internas */
#modal-producto .rp-producto-panel-card{
  padding: 14px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--prod-shadow);
}

#modal-producto .rp-producto-panel-card .sa-field{
  margin: 0;
}

/* Labels + hints */
#modal-producto .rp-field-label{
  display: block;
  margin: 0 0 8px;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: rgba(17,17,17,.84);
}

#modal-producto .sa-hint{
  display: block;
  margin: 8px 0 0;
  color: rgba(17,17,17,.54);
  line-height: 1.3;
  font-size: .82rem;
  font-weight: 400;
}

/* Inputs base */
#modal-producto input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#modal-producto select,
#modal-producto textarea{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;

  border-radius: 14px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: var(--prod-text);

  font-family: "Outfit", sans-serif;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.15;

  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

#modal-producto textarea{
  min-height: 110px;
  resize: vertical;
}

#modal-producto input::placeholder,
#modal-producto textarea::placeholder{
  color: rgba(17,17,17,.42);
}

#modal-producto input:focus,
#modal-producto select:focus,
#modal-producto textarea:focus{
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 0 0 4px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.92);
}

/* Header interno con toggle */
#modal-producto .rp-field-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#modal-producto .rp-field-title{
  min-width: 0;
  flex: 1 1 auto;
}

#modal-producto .rp-field-title .rp-field-label{
  margin-bottom: 0;
}

#modal-producto .rp-field-hint{
  margin-top: 6px;
}

/* Switches */
#modal-producto .rp-switch{
  --sw-w: 50px;
  --sw-h: 28px;
  --sw-pad: 3px;
  --sw-thumb: 22px;
  --sw-shift: 22px;

  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto;
}

#modal-producto .rp-switch-input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#modal-producto .rp-switch-track{
  position: relative;
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;
  background: rgba(17,17,17,.14);
  box-shadow: inset 0 2px 7px rgba(0,0,0,.10);
  transition: background .18s ease, box-shadow .18s ease;
}

#modal-producto .rp-switch-thumb{
  position: absolute;
  top: 50%;
  left: var(--sw-pad);
  width: var(--sw-thumb);
  height: var(--sw-thumb);
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
  transition: transform .18s ease, border-color .18s ease;
}

#modal-producto .rp-switch-input:checked + .rp-switch-track{
  background: var(--prod-red);
  box-shadow: 0 12px 22px rgba(255,0,42,.18), inset 0 2px 7px rgba(0,0,0,.14);
}

#modal-producto .rp-switch-input:checked + .rp-switch-track .rp-switch-thumb{
  transform: translateY(-50%) translateX(var(--sw-shift));
  border-color: rgba(0,0,0,.12);
}

#modal-producto .rp-switch-input:focus-visible + .rp-switch-track{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

/* Paneles dinámicos */
#modal-producto .rp-collapsible-panel{
  margin-top: 12px;
}

#modal-producto .rp-collapsible-panel[hidden]{
  display: none !important;
}

#modal-producto .rp-producto-dynamic-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================
   PRECIOS / EXTRAS / OPCIONES
   - orden: nombre / precio / menos / más / switch
   ============================================================ */
#modal-producto .precio-tamano-row,
#modal-producto .extra-row,
#modal-producto .rp-adicional-opcion-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 36px 36px 50px;
  align-items: center;
  gap: 8px;

  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#modal-producto .precio-tamano-row.is-disabled,
#modal-producto .extra-row.is-disabled,
#modal-producto .rp-adicional-opcion-row.is-disabled{
  opacity: .58;
}

#modal-producto .tamano-input,
#modal-producto .extra-nombre,
#modal-producto .rp-adicional-opcion-nombre,
#modal-producto .precio-input,
#modal-producto .extra-precio,
#modal-producto .rp-adicional-opcion-precio{
  min-width: 0;
}

#modal-producto .precio-input,
#modal-producto .extra-precio,
#modal-producto .rp-adicional-opcion-precio{
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

#modal-producto .rp-item-switch{
  justify-self: end;
  align-self: center;
}

/* Botones circulares */
#modal-producto .btn-agregar-tamano,
#modal-producto .btn-agregar-extra,
#modal-producto .rp-adicional-opcion-add,
#modal-producto .btn-quitar-tamano,
#modal-producto .btn-quitar-extra,
#modal-producto .rp-adicional-opcion-remove{
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  line-height: 1;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  transition: transform .12s ease, filter .16s ease, box-shadow .16s ease, border-color .16s ease;
}

#modal-producto .btn-agregar-tamano,
#modal-producto .btn-agregar-extra,
#modal-producto .rp-adicional-opcion-add{
  border: 0;
  background: var(--prod-red);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 10px 18px rgba(255,0,42,.16);
}

#modal-producto .btn-quitar-tamano,
#modal-producto .btn-quitar-extra,
#modal-producto .rp-adicional-opcion-remove{
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: rgba(17,17,17,.86);
  font-size: 22px;
}

#modal-producto .btn-agregar-tamano:hover,
#modal-producto .btn-quitar-tamano:hover,
#modal-producto .btn-agregar-extra:hover,
#modal-producto .btn-quitar-extra:hover,
#modal-producto .rp-adicional-opcion-add:hover,
#modal-producto .rp-adicional-opcion-remove:hover{
  transform: translateY(-1px);
}

#modal-producto .btn-quitar-tamano:hover,
#modal-producto .btn-quitar-extra:hover,
#modal-producto .rp-adicional-opcion-remove:hover{
  border-color: rgba(17,17,17,.22);
}

/* ============================================================
   FLAGS EXTRAS / ADICIONALES
   - misma línea
   - menos altos
   - input máx un poco más ancho
   ============================================================ */
#modal-producto .rp-extras-flags,
#modal-producto .rp-adicional-flags{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

#modal-producto .rp-extras-flags > *,
#modal-producto .rp-adicional-flags > *{
  min-width: 0;
}

#modal-producto .rp-adicional-flag,
#modal-producto .rp-extras-max{
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(17,17,17,.025);
}

#modal-producto .rp-adicional-flag{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;

  color: rgba(17,17,17,.80);
  font-size: .84rem;
  font-weight: 500;
}

#modal-producto .rp-adicional-flag span{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#modal-producto .rp-adicional-flag input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.22);
  background: #fff;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

#modal-producto .rp-adicional-flag input[type="checkbox"]:checked{
  background-color: var(--prod-red);
  border-color: var(--prod-red);
  box-shadow: 0 10px 18px rgba(255,0,42,.14);
  background-image: var(--prod-ico-check);
}

#modal-producto .rp-adicional-flag input[type="checkbox"]:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

#modal-producto .rp-extras-max{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  gap: 8px;
}

#modal-producto .rp-extras-max span{
  color: rgba(17,17,17,.80);
  font-size: .84rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#modal-producto .rp-extras-max input,
#modal-producto .rp-adicional-max{
  width: 100%;
  min-width: 0;
  min-height: 32px;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}

/* ============================================================
   ADICIONALES
   ============================================================ */
#modal-producto .rp-adicional-grupo{
  padding: 12px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 16px;
  background: rgba(17,17,17,.025);
}

#modal-producto .rp-adicional-grupo + .rp-adicional-grupo{
  margin-top: 12px;
}

#modal-producto .rp-adicional-grupo-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#modal-producto .rp-adicional-grupo-nombre{
  min-width: 0;
}

#modal-producto .rp-remove-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: rgba(17,17,17,.84);
  font-family: "Outfit", sans-serif;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

#modal-producto .rp-remove-link:hover{
  border-color: rgba(17,17,17,.22);
}

#modal-producto [data-role="del-grupo"].rp-remove-link{
  border: 0;
  background: var(--prod-red);
  color: #fff;
  box-shadow: 0 10px 18px rgba(255,0,42,.16);
}

#modal-producto [data-role="del-grupo"].rp-remove-link:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

#modal-producto .rp-adicional-opciones{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

#modal-producto #btn-agregar-adicional-grupo.rp-inline-secondary-btn{
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--prod-red);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: .96rem;
  font-weight: 600;
  box-shadow: 0 14px 26px rgba(255,0,42,.22);
  transition: transform .12s ease, filter .16s ease, box-shadow .16s ease;
}

#modal-producto #btn-agregar-adicional-grupo.rp-inline-secondary-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.05);
  box-shadow: 0 18px 30px rgba(255,0,42,.26);
}

/* ============================================================
   UPLOAD IMAGEN
   ============================================================ */
#modal-producto .sa-file-upload{
  position: relative;
}

#modal-producto .sa-file-upload-input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#modal-producto .sa-file-upload-label{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;

  border-radius: 18px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;

  box-shadow: 0 10px 22px rgba(17,17,17,.08), inset 0 1px 0 rgba(255,255,255,.92);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease;
}

#modal-producto .sa-file-upload-label:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.18);
}

#modal-producto .sa-file-upload-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--prod-red);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 12px 22px rgba(255,0,42,.18);
}

#modal-producto .sa-file-upload-icon img{
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  display: block;
}

#modal-producto .sa-file-upload-title{
  display: block;
  font-weight: 800;
  color: rgba(17,17,17,.84);
  line-height: 1.1;
}

#modal-producto .sa-file-upload-filename{
  display: block;
  margin-top: 4px;
  color: rgba(17,17,17,.56);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.3;
}

/* Preview imagen */
#modal-producto .rp-producto-preview-box{
  margin-top: 12px;
  border-radius: 18px;
  border: 1.5px dashed rgba(17,17,17,.18);
  background: rgba(17,17,17,.03);

  height: clamp(220px, 28vh, 320px);
  overflow: hidden;
  position: relative;

  display: grid;
  place-items: center;
  padding: 16px;
}

#modal-producto .rp-producto-preview-box.has-image{
  border-style: solid;
  border-color: rgba(17,17,17,.10);
  background: #fff;
  padding: 0;
}

#modal-producto .rp-producto-preview{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

#modal-producto .rp-producto-preview-box.has-image .rp-producto-preview{
  display: block;
}

#modal-producto .rp-producto-preview-placeholder{
  color: rgba(17,17,17,.72);
  font-size: clamp(.9rem, .84rem + .18vw, 1rem);
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

#modal-producto .rp-producto-preview-box.has-image .rp-producto-preview-placeholder{
  display: none;
}

#modal-producto #btn-quitar-producto-img{
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: var(--prod-red);
  color: #fff;

  box-shadow: 0 12px 22px rgba(255,0,42,.18), 0 2px 6px rgba(17,17,17,.06);
  cursor: pointer;

  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;

  text-indent: -9999px;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease;
}

#modal-producto #btn-quitar-producto-img::before{
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--prod-ico-trash) center/contain no-repeat;
          mask: var(--prod-ico-trash) center/contain no-repeat;
  position: absolute;
  inset: 0;
  margin: auto;
}

#modal-producto #btn-quitar-producto-img:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 16px 26px rgba(255,0,42,.22), 0 3px 10px rgba(17,17,17,.08);
}

/* ============================================================
   DESCUENTOS
   ============================================================ */
#modal-producto .rp-desc-panel{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#modal-producto .rp-desc-empty{
  padding: 14px;
  border: 1.5px dashed rgba(17,17,17,.18);
  border-radius: 16px;
  background: rgba(17,17,17,.025);
  color: rgba(17,17,17,.62);
  font-size: .86rem;
  line-height: 1.35;
}

#modal-producto .rp-desc-row{
  padding: 14px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 16px;
  background: rgba(17,17,17,.025);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#modal-producto .rp-desc-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#modal-producto .rp-desc-title{
  color: rgba(17,17,17,.88);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.15;
}

#modal-producto .rp-desc-meta{
  margin-top: 4px;
  color: rgba(17,17,17,.58);
  font-size: .82rem;
  line-height: 1.3;
}

#modal-producto .rp-desc-method{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#modal-producto .rp-desc-radio{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.10);
  background: #fff;
  color: rgba(17,17,17,.80);
  font-size: .86rem;
  font-weight: 600;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

#modal-producto .rp-desc-radio input{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

#modal-producto .rp-desc-radio span{
  display: block;
}

@supports selector(label:has(input:checked)){
  #modal-producto .rp-desc-radio:has(input:checked){
    background: var(--prod-red);
    color: #fff;
    border-color: var(--prod-red);
    box-shadow: 0 12px 22px rgba(255,0,42,.18);
  }
}

#modal-producto .rp-desc-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#modal-producto .rp-desc-box{
  padding: 12px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 14px;
  background: #fff;
}

#modal-producto .rp-desc-field label{
  display: block;
  margin: 0 0 8px;
  color: rgba(17,17,17,.78);
  font-size: .84rem;
  font-weight: 600;
}

#modal-producto .rp-desc-input{
  display: flex;
  align-items: center;
  gap: 8px;
}

#modal-producto .rp-desc-pref,
#modal-producto .rp-desc-suf{
  color: rgba(17,17,17,.58);
  font-size: .84rem;
  font-weight: 600;
  flex: 0 0 auto;
}

#modal-producto .rp-desc-input input{
  min-width: 0;
  flex: 1 1 auto;
}

#modal-producto .rp-desc-preview{
  margin-top: 10px;
  color: rgba(17,17,17,.56);
  font-size: .82rem;
  line-height: 1.3;
}

/* Footer */
#modal-producto .sa-modal-footer{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;

  min-height: 0;
  padding: 12px 16px;
  border-top: 1px solid rgba(17,17,17,.10);
  background: var(--prod-surface);
  box-shadow: 0 -10px 24px rgba(17,17,17,.06);
}

#modal-producto #producto-cancelar.sa-secondary-btn,
#modal-producto #producto-guardar-btn.sa-primary-btn{
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 18px;
  font-family: "Outfit", sans-serif;
  font-size: .96rem;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}

#modal-producto #producto-cancelar.sa-secondary-btn{
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: rgba(17,17,17,.86);
  box-shadow:
    0 10px 20px rgba(17,17,17,.06),
    0 2px 6px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#modal-producto #producto-cancelar.sa-secondary-btn:hover{
  border-color: rgba(17,17,17,.22);
  transform: translateY(-1px);
}

#modal-producto #producto-guardar-btn.sa-primary-btn{
  color: #fff;
  background: var(--prod-red);
  border: 1.5px solid rgba(0,0,0,.10);
  box-shadow:
    0 14px 26px rgba(255,0,42,.22),
    0 2px 8px rgba(17,17,17,.06);
}

#modal-producto #producto-guardar-btn.sa-primary-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.05);
  box-shadow:
    0 18px 30px rgba(255,0,42,.26),
    0 3px 10px rgba(17,17,17,.06);
}

#modal-producto #producto-guardar-btn.sa-primary-btn:active,
#modal-producto #producto-cancelar.sa-secondary-btn:active{
  transform: translateY(0);
}

#modal-producto #producto-guardar-btn.sa-primary-btn:focus-visible,
#modal-producto #producto-cancelar.sa-secondary-btn:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 1024px){
  #modal-producto{
    padding: 0;
    align-items: flex-end;
  }

  #modal-producto .rp-modal-producto-card{
    width: 100%;
    max-width: none;
    height: 90dvh;
    min-height: 90dvh;
    max-height: 90dvh;
    border-radius: 22px 22px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    transform: translateY(42px) scale(1);
  }

  #modal-producto .sa-modal-header{
    padding-top: 22px;
    position: relative;
  }

  #modal-producto .sa-modal-header::before{
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(17,17,17,.18);
  }

  #modal-producto .sa-modal-header h2{
    font-size: 1.42rem;
    line-height: 1.05;
  }

  #modal-producto .sa-modal-close{
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    flex: 0 0 42px;
  }

  #modal-producto .rp-producto-grid{
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 14px;
  }

  #modal-producto .rp-producto-col{
    gap: 14px;
  }

  #modal-producto .rp-producto-panel-card{
    padding: 12px;
    border-radius: 16px;
  }

  #modal-producto .sa-modal-footer{
    min-height: 78px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px){
  #modal-producto .rp-field-header{
    gap: 10px;
  }

  #modal-producto .rp-producto-preview-box{
    height: 220px;
  }

  #modal-producto .precio-tamano-row,
  #modal-producto .extra-row,
  #modal-producto .rp-adicional-opcion-row{
    grid-template-columns: minmax(0, 1fr) 92px 34px 34px 48px;
    gap: 6px;
  }

  #modal-producto .btn-agregar-tamano,
  #modal-producto .btn-quitar-tamano,
  #modal-producto .btn-agregar-extra,
  #modal-producto .btn-quitar-extra,
  #modal-producto .rp-adicional-opcion-add,
  #modal-producto .rp-adicional-opcion-remove{
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  #modal-producto .rp-switch{
    --sw-w: 48px;
    --sw-h: 27px;
    --sw-thumb: 21px;
    --sw-shift: 21px;
  }

  #modal-producto .rp-extras-flags,
  #modal-producto .rp-adicional-flags{
    gap: 8px;
  }

  #modal-producto .rp-adicional-flag,
  #modal-producto .rp-extras-max{
    min-height: 38px;
    padding: 6px 8px;
  }

  #modal-producto .rp-adicional-flag,
  #modal-producto .rp-extras-max span{
    font-size: .79rem;
  }

  #modal-producto .rp-extras-max{
    grid-template-columns: minmax(0, 1fr) 54px;
  }

  #modal-producto .rp-extras-max input,
  #modal-producto .rp-adicional-max{
    min-height: 30px;
  }
}

@media (max-width: 480px){
  #modal-producto .precio-tamano-row,
  #modal-producto .extra-row,
  #modal-producto .rp-adicional-opcion-row{
    grid-template-columns: minmax(0, 1fr) 84px 32px 32px 46px;
    gap: 6px;
  }

  #modal-producto .btn-agregar-tamano,
  #modal-producto .btn-quitar-tamano,
  #modal-producto .btn-agregar-extra,
  #modal-producto .btn-quitar-extra,
  #modal-producto .rp-adicional-opcion-add,
  #modal-producto .rp-adicional-opcion-remove{
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 20px;
  }

  #modal-producto .rp-extras-flags,
  #modal-producto .rp-adicional-flags{
    gap: 6px;
  }

  #modal-producto .rp-adicional-flag,
  #modal-producto .rp-extras-max{
    padding: 6px 7px;
  }

  #modal-producto .rp-adicional-flag{
    gap: 7px;
    font-size: .75rem;
  }

  #modal-producto .rp-adicional-flag input[type="checkbox"]{
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
  }

  #modal-producto .rp-extras-max{
    grid-template-columns: minmax(0, 1fr) 50px;
  }

  #modal-producto .rp-extras-max span{
    font-size: .75rem;
  }

  #modal-producto .rp-extras-max input,
  #modal-producto .rp-adicional-max{
    min-height: 29px;
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* ============================================================
   🎁 VISTA 3: PROMOS / DESCUENTOS (PRO + 100% RESPONSIVE)
   Scope total: #rp-view-promos
   ============================================================ */

#rp-view-promos{
  font-family: "Outfit", sans-serif;

  --pd-text: #111;
  --pd-muted: rgba(17,17,17,.62);
  --pd-border: rgba(17,17,17,.10);

  --pd-surface: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  --pd-shadow:
    0 12px 26px rgba(17,17,17,.10),
    0 2px 8px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.85);

  /* mismo look que “Cerrar sesión” */
  --pd-red1: #e03131;
  --pd-red2: #ff4d4d;
  --pd-accent-bg: linear-gradient(135deg, var(--pd-red1) 0%, var(--pd-red2) 100%);

  /* para que .sa-primary-btn no “dependa” de categorías */
  --cat-red1: var(--pd-red1);
  --cat-red2: var(--pd-red2);

  /* ✅ tamaño ÚNICO para TODOS los switches (base) */
  --pd-sw-w: 40px;
  --pd-sw-h: 22px;
  --pd-sw-pad: 2px;
  --pd-sw-thumb: 18px;
  --pd-sw-shift: 18px;

  --pd-focus: rgba(17,17,17,.45);

  padding: 10px 30px 28px;
}

@media (max-width: 600px){
  #rp-view-promos{ padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); }
}

#rp-view-promos,
#rp-view-promos *{ box-sizing: border-box; }

#rp-view-promos :is(h2,h3,p){ margin: 0; }

/* ✅ blindaje: lo que esté hidden NO se ve */
#rp-view-promos [hidden]{ display: none !important; }

/* ------------------------------------------------------------
   Card base
   ------------------------------------------------------------ */
#rp-view-promos .rp-card-promos{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* Header */
#rp-view-promos .rp-card-promos > .sa-card-header{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 6px 0 12px;
  border-bottom: 1px solid rgba(17,17,17,.08);
}

#rp-view-promos .sa-card-header-main{ min-width: 0; }

#rp-view-promos .sa-card-title{
  color: var(--pd-text);
  font-weight: 850;
  letter-spacing: -0.02em;
  font-size: clamp(1.15rem, 1.05rem + .6vw, 1.55rem);
}

#rp-view-promos .sa-card-meta{
  margin-top: 6px;
  color: var(--pd-muted);
  line-height: 1.25;
  font-size: .95rem;
}

#rp-view-promos .sa-card-header-actions{
  justify-self: end;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 320px;
}

#rp-view-promos #rp-promos-msg{ min-width: 0; }

#rp-view-promos #rp-promos-guardar-btn{
  justify-self: end;
  min-height: 44px;
  border-radius: 999px;
  font-family: "Outfit", sans-serif;
}

@media (max-width: 720px){
  #rp-view-promos .sa-card-header-actions{ min-width: 260px; }
}

@media (max-width: 520px){
  #rp-view-promos .sa-card-header-actions{
    min-width: 0;
    width: 100%;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
  }
  #rp-view-promos #rp-promos-guardar-btn{ grid-column: 2; grid-row: 1; }
  #rp-view-promos #rp-promos-msg{ grid-column: 1 / -1; grid-row: 2; }
}

/* Guardar */
#rp-view-promos #rp-promos-guardar-btn.rp-save-dirty{
  border: 0;
  background: var(--pd-accent-bg);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}

#rp-view-promos #rp-promos-guardar-btn.rp-save-dirty:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.30);
}

#rp-view-promos #rp-promos-guardar-btn.rp-save-dirty:active{
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,.20);
}

#rp-view-promos #rp-promos-guardar-btn.rp-save-clean{
  background: rgba(17,17,17,.10);
  border: 1px solid rgba(17,17,17,.14);
  color: rgba(17,17,17,.55);
  box-shadow: none;
  cursor: not-allowed;
}

#rp-view-promos #rp-promos-guardar-btn.rp-save-saving{
  background: rgba(17,17,17,.14);
  border: 1px solid rgba(17,17,17,.16);
  color: rgba(17,17,17,.70);
  box-shadow: none;
}

/* Body */
#rp-view-promos .rp-promos-body{
  padding-top: 14px;
  display: grid;
  gap: 14px;
}

/* Cards */
#rp-view-promos .pd-section,
#rp-view-promos .pd-block,
#rp-view-promos .pd-tiempo-block{
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: 22px;
  box-shadow: var(--pd-shadow);
  padding: 14px;
  min-width: 0;
}

#rp-view-promos .pd-section-title{
  color: var(--pd-text);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 1rem;
  line-height: 1.12;
}

#rp-view-promos .pd-section-help,
#rp-view-promos .pd-block-subtitle{
  margin-top: 6px;
  color: var(--pd-muted);
  line-height: 1.25;
  font-size: .92rem;
}

/* ------------------------------------------------------------
   ✅ DESKTOP: bloque no activo (JS pone .is-disabled)
   ------------------------------------------------------------ */
#rp-view-promos :is(.pd-block, .pd-tiempo-block).is-disabled{
  opacity: .45;
  filter: saturate(.75);
}

#rp-view-promos :is(.pd-block, .pd-tiempo-block).is-disabled :is(
  input, select, textarea, button, label, a
){
  pointer-events: none;
}

/* ------------------------------------------------------------
   Estado promo (pill)
   ------------------------------------------------------------ */
#rp-view-promos .pd-activo-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#rp-view-promos #pd-activo-switch{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 22px rgba(17,17,17,.10);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

#rp-view-promos #pd-activo-switch .pd-switch-text{
  font-weight: 850;
  letter-spacing: .08em;
  font-size: .78rem;
  line-height: 1;
  color: rgba(17,17,17,.78);
}

#rp-view-promos #pd-activo-switch.is-on{
  background: var(--pd-accent-bg);
  border-color: transparent;
  box-shadow: 0 12px 22px rgba(17,17,17,.18);
}

#rp-view-promos #pd-activo-switch.is-on .pd-switch-text{ color: #fff; }

@media (max-width: 600px){
  #rp-view-promos .pd-activo-row{ flex-direction: column; }
  #rp-view-promos #pd-activo-switch{ width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------
   Fieldsets / legend
   ------------------------------------------------------------ */
#rp-view-promos fieldset{
  border: 1px solid var(--pd-border);
  border-radius: 18px;
  padding: 12px;
  margin: 14px 0 0;
  background: rgba(255,255,255,.60);
}

#rp-view-promos .pd-legend{
  padding: 0 8px;
  color: rgba(17,17,17,.75);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: .86rem;
}

/* ------------------------------------------------------------
   Modo A/B
   ------------------------------------------------------------ */
#rp-view-promos .pd-modo-fieldset{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

#rp-view-promos .pd-radio-option{ display: block; cursor: pointer; }

#rp-view-promos .pd-radio-body{
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  padding: 12px;
  transition: transform .12s ease, box-shadow .16s ease;
}

#rp-view-promos .pd-radio-option:hover .pd-radio-body{ transform: translateY(-1px); }

#rp-view-promos .pd-radio-option:has(.pd-switch-input:checked) .pd-radio-body{
  background: var(--pd-accent-bg);
  border-color: transparent;
  box-shadow: 0 12px 22px rgba(17,17,17,.18);
}

#rp-view-promos .pd-radio-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#rp-view-promos .pd-radio-title{
  font-weight: 900;
  color: var(--pd-text);
}

#rp-view-promos .pd-radio-desc{
  margin-top: 6px;
  color: var(--pd-muted);
  font-size: .92rem;
  line-height: 1.25;
}

#rp-view-promos .pd-radio-option:has(.pd-switch-input:checked) :is(.pd-radio-title, .pd-radio-desc){
  color: #fff;
}

/* ------------------------------------------------------------
   ✅ Alcance (pseudo-switch) — arreglado a tamaño NORMAL
   ------------------------------------------------------------ */
#rp-view-promos .pd-alcance-fieldset{
  display: grid;
  gap: 10px;
}

#rp-view-promos .pd-radio-inline{
  /* 👇 MISMO tamaño que TODOS los switches */
  --sw-w: var(--pd-sw-w);
  --sw-h: var(--pd-sw-h);
  --sw-pad: var(--pd-sw-pad);
  --sw-thumb: var(--pd-sw-thumb);
  --sw-shift: var(--pd-sw-shift);

  --sw-off-bg: #ffffff;
  --sw-off-border: rgba(17,17,17,.18);
  --sw-thumb-bg: #ffffff;
  --sw-thumb-border: rgba(17,17,17,.14);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px calc(12px + var(--sw-w) + 14px) 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(255,255,255,.72);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#rp-view-promos .pd-radio-inline span{
  font-weight: 900;
  color: rgba(17,17,17,.86);
}

/* radio oculto */
#rp-view-promos .pd-radio-inline input[type="radio"]{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* track */
#rp-view-promos .pd-radio-inline::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;

  background: var(--sw-off-bg);
  border: 2px solid var(--sw-off-border);

  box-shadow:
    0 10px 22px rgba(17,17,17,.10),
    inset 0 1px 0 rgba(255,255,255,.95);

  z-index: 1;
}

/* thumb */
#rp-view-promos .pd-radio-inline::before{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--sw-thumb);
  height: var(--sw-thumb);
  border-radius: 999px;

  background: var(--sw-thumb-bg);
  border: 1px solid var(--sw-thumb-border);

  right: calc(12px + var(--sw-w) - var(--sw-pad) - var(--sw-thumb));

  box-shadow:
    0 10px 18px rgba(17,17,17,.18),
    inset 0 1px 0 rgba(255,255,255,.95);

  transition: right .18s ease;
  z-index: 2;
}

/* seleccionado: rojo + texto blanco */
#rp-view-promos .pd-radio-inline:has(input:checked){
  background: var(--pd-accent-bg);
  border-color: transparent;
  box-shadow: 0 12px 22px rgba(17,17,17,.18);
}
#rp-view-promos .pd-radio-inline:has(input:checked) span{ color: #fff; }

/* ON visual (thumb a la derecha) pero colores OFF */
#rp-view-promos .pd-radio-inline:has(input:checked)::before{
  right: calc(12px + var(--sw-pad));
}

/* ------------------------------------------------------------
   Grids
   ------------------------------------------------------------ */
#rp-view-promos .pd-modos-grid,
#rp-view-promos .pd-tiempo-grid{
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

@media (min-width: 900px){
  #rp-view-promos .pd-modos-grid,
  #rp-view-promos .pd-tiempo-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#rp-view-promos .pd-block-title{
  color: var(--pd-text);
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  line-height: 1.1;
}

/* ------------------------------------------------------------
   Inputs pro
   ------------------------------------------------------------ */
#rp-view-promos .sa-field{
  display: grid;
  gap: 6px;
  margin-top: 12px;
}
#rp-view-promos .sa-field:first-child{ margin-top: 0; }

#rp-view-promos .sa-field label{
  font-weight: 900;
  font-size: .86rem;
  color: rgba(17,17,17,.78);
}

#rp-view-promos .sa-input{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(17,17,17,.14);
  background: rgba(255,255,255,.88);
  color: var(--pd-text);
  font-family: "Outfit", sans-serif;
  font-weight: 750;
  font-size: .95rem;
  padding: 0 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
  transition: border-color .16s ease, box-shadow .16s ease;
}

#rp-view-promos .sa-input:focus-visible{
  outline: none;
  border-color: rgba(17,17,17,.30);
  box-shadow: 0 0 0 3px rgba(17,17,17,.10), inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-view-promos .sa-hint{
  margin: 6px 0 0;
  color: rgba(17,17,17,.55);
  line-height: 1.25;
  font-size: .86rem;
  font-weight: 650;
}

/* % */
#rp-view-promos .pd-inline-input,
#rp-view-promos .pd-cat-pct{ position: relative; display: block; }

#rp-view-promos .pd-inline-input .sa-input,
#rp-view-promos .pd-cat-pct .sa-input{ padding-right: 40px; }

#rp-view-promos .pd-input-suffix{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  color: rgba(17,17,17,.72);
  pointer-events: none;
}

/* ------------------------------------------------------------
   ✅ Categorías: SIN scroll interno
   ------------------------------------------------------------ */
#rp-view-promos .pd-cats-list{
  display: grid;
  gap: 10px;
  margin-top: 10px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

#rp-view-promos .pd-cat-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;

  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.72);
}

#rp-view-promos .pd-cat-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

#rp-view-promos .pd-cat-toggle .toggle-title{
  color: var(--pd-text);
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

#rp-view-promos .pd-cat-pct{
  width: clamp(120px, 34vw, 190px);
  max-width: 210px;
}

#rp-view-promos .pd-cat-pct .sa-input{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ⏱️ TIEMPO DE APLICACIÓN (REEMPLAZAR ESTE BLOQUE COMPLETO)
   ============================================================ */

/* Opciones (Rango / Día único / Semana) */
#rp-view-promos .pd-tiempo-modos{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

#rp-view-promos .pd-option-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(255,255,255,.72);

  cursor: pointer;
  user-select: none;
}

#rp-view-promos .pd-option-text{
  font-weight: 900;
  color: rgba(17,17,17,.86);
  min-width: 0;
}

#rp-view-promos .pd-option-row:has(.pd-switch-input:checked){
  background: var(--pd-accent-bg);
  border-color: transparent;
  box-shadow: 0 12px 22px rgba(17,17,17,.18);
}

#rp-view-promos .pd-option-row:has(.pd-switch-input:checked) .pd-option-text{
  color: #fff;
}

/* Contenedor interno (configuración) */
#rp-view-promos .pd-tiempo-inner{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.66);
}

/* ============================================================
   ✅ RANGO DE FECHAS (SIEMPRE 2 columnas)
   Arriba: Fecha inicio | Fecha fin
   Abajo: Hora inicio  | Hora fin
   ============================================================ */
#rp-view-promos :is(#pd-tiempo-rango-block, #pd-tiempoB-rango-block){
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#rp-view-promos :is(#pd-tiempo-rango-block, #pd-tiempoB-rango-block) .pd-fecha-row{
  display: contents;
}

/* Global */
#rp-view-promos #pd-tiempo-rango-block .sa-field:has(#pd-rango-fecha-inicio){ grid-column: 1; grid-row: 1; }
#rp-view-promos #pd-tiempo-rango-block .sa-field:has(#pd-rango-fecha-fin){    grid-column: 2; grid-row: 1; }
#rp-view-promos #pd-tiempo-rango-block .sa-field:has(#pd-rango-hora-inicio){  grid-column: 1; grid-row: 2; }
#rp-view-promos #pd-tiempo-rango-block .sa-field:has(#pd-rango-hora-fin){     grid-column: 2; grid-row: 2; }

/* Manual */
#rp-view-promos #pd-tiempoB-rango-block .sa-field:has(#pdB-rango-fecha-inicio){ grid-column: 1; grid-row: 1; }
#rp-view-promos #pd-tiempoB-rango-block .sa-field:has(#pdB-rango-fecha-fin){    grid-column: 2; grid-row: 1; }
#rp-view-promos #pd-tiempoB-rango-block .sa-field:has(#pdB-rango-hora-inicio){  grid-column: 1; grid-row: 2; }
#rp-view-promos #pd-tiempoB-rango-block .sa-field:has(#pdB-rango-hora-fin){     grid-column: 2; grid-row: 2; }

/* ============================================================
   ✅ DÍA ÚNICO (Día arriba + horas en una sola fila)
   Día (full)
   Abajo: Hora inicio | Hora fin
   ============================================================ */
#rp-view-promos :is(#pd-tiempo-dia-unico-block, #pd-tiempoB-dia-unico-block){
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#rp-view-promos :is(#pd-tiempo-dia-unico-block, #pd-tiempoB-dia-unico-block) .pd-fecha-row{
  display: contents;
}

/* Global */
#rp-view-promos #pd-tiempo-dia-unico-block .sa-field:has(#pd-diaunico-fecha){       grid-column: 1 / -1; grid-row: 1; }
#rp-view-promos #pd-tiempo-dia-unico-block .sa-field:has(#pd-diaunico-hora-inicio){ grid-column: 1;      grid-row: 2; }
#rp-view-promos #pd-tiempo-dia-unico-block .sa-field:has(#pd-diaunico-hora-fin){    grid-column: 2;      grid-row: 2; }

/* Manual */
#rp-view-promos #pd-tiempoB-dia-unico-block .sa-field:has(#pdB-diaunico-fecha){       grid-column: 1 / -1; grid-row: 1; }
#rp-view-promos #pd-tiempoB-dia-unico-block .sa-field:has(#pdB-diaunico-hora-inicio){ grid-column: 1;      grid-row: 2; }
#rp-view-promos #pd-tiempoB-dia-unico-block .sa-field:has(#pdB-diaunico-hora-fin){    grid-column: 2;      grid-row: 2; }

/* ============================================================
   ✅ DÍAS DE LA SEMANA
   Desktop: más ancho en horas, menos vacío central
   Móvil: 2 filas
     - Fila 1: Día (izq) + Switch (der)
     - Fila 2: Hora inicio + A + Hora fin
   ============================================================ */

#rp-view-promos .pd-semana-list{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

/* Base row */
#rp-view-promos .pd-dia-row{
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.72);
  overflow: hidden;
}

/* Desktop: día ocupa ancho fijo razonable, horarios “llenan” el resto */
#rp-view-promos .pd-dia-main{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;

  /* 👇 reduce el “vacío” central y estabiliza la columna del día */
  flex: 0 0 clamp(170px, 22vw, 260px);
}

#rp-view-promos .pd-dia-title{
  font-weight: 900;
  color: var(--pd-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#rp-view-promos .pd-dia-horarios{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Más ancho en desktop para ver el contenido completo */
#rp-view-promos .pd-dia-hora{
  width: clamp(150px, 18vw, 220px);
  min-width: 150px;
  height: 44px;
  padding: 0 12px;
  font-variant-numeric: tabular-nums;
}

#rp-view-promos .pd-hora-sep{
  width: 34px;
  height: 38px;
  display: grid;
  place-items: center;
  font-weight: 950;
  color: rgba(17,17,17,.72);
  border-radius: 999px;
  background: rgba(17,17,17,.06);
}

/* ✅ MÓVIL: layout 2 filas por día */
@media (max-width: 600px){
  #rp-view-promos .pd-dia-row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Fila 1: Día izq + Switch der */
  #rp-view-promos .pd-dia-main{
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Reorden: título primero, switch al final */
  #rp-view-promos .pd-dia-title{ order: 1; }
  #rp-view-promos .pd-dia-main .pd-switch-control{ order: 2; }

  /* Fila 2: horarios en una línea */
  #rp-view-promos .pd-dia-horarios{
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  #rp-view-promos .pd-dia-hora{
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    padding: 0 10px;
  }

  #rp-view-promos .pd-hora-sep{
    width: 30px;
    flex: 0 0 30px;
  }

  /* ✅ quitar íconos/flechitas en time (para que no corte a.m./p.m.) */
  #rp-view-promos input[type="time"]::-webkit-calendar-picker-indicator,
  #rp-view-promos input[type="time"]::-webkit-inner-spin-button,
  #rp-view-promos input[type="time"]::-webkit-clear-button{
    opacity: 0;
    display: none;
    width: 0;
    margin: 0;
  }

  #rp-view-promos input[type="time"]{
    -webkit-appearance: none;
    appearance: none;
    padding-right: 12px;
  }
}

/* ------------------------------------------------------------
   ✅ SWITCH (guía exacta) + tamaño ÚNICO
   ------------------------------------------------------------ */
#rp-view-promos .pd-switch-control{
  --sw-w: var(--pd-sw-w);
  --sw-h: var(--pd-sw-h);
  --sw-pad: var(--pd-sw-pad);
  --sw-thumb: var(--pd-sw-thumb);
  --sw-shift: var(--pd-sw-shift);

  --sw-on: #ff002a;
  --sw-off-bg: #ffffff;
  --sw-off-border: rgba(17,17,17,.18);
  --sw-thumb-bg: #ffffff;
  --sw-thumb-border: rgba(17,17,17,.14);
  --sw-focus: rgba(17,17,17,.45);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#rp-view-promos .pd-switch-input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#rp-view-promos .pd-switch-track{
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;

  background: var(--sw-off-bg);
  border: 2px solid var(--sw-off-border);

  box-shadow:
    0 10px 22px rgba(17,17,17,.10),
    inset 0 1px 0 rgba(255,255,255,.95);

  position: relative;
  display: inline-block;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#rp-view-promos .pd-switch-thumb{
  width: var(--sw-thumb);
  height: var(--sw-thumb);
  border-radius: 999px;

  background: var(--sw-thumb-bg);
  border: 1px solid var(--sw-thumb-border);

  position: absolute;
  top: 50%;
  left: var(--sw-pad);
  transform: translateY(-50%) translateX(0);

  box-shadow:
    0 10px 18px rgba(17,17,17,.18),
    inset 0 1px 0 rgba(255,255,255,.95);

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* ON normal */
#rp-view-promos .pd-switch-input:checked + .pd-switch-track{
  background: var(--sw-on);
  border-color: rgba(0,0,0,.10);
  box-shadow:
    0 12px 22px rgba(255,0,42,.18),
    inset 0 2px 7px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.18);
}

#rp-view-promos .pd-switch-input:checked + .pd-switch-track .pd-switch-thumb{
  transform: translateY(-50%) translateX(var(--sw-shift));
  border-color: rgba(0,0,0,.12);
}

/* Focus */
#rp-view-promos .pd-switch-input:focus-visible + .pd-switch-track{
  outline: 2px solid var(--sw-focus);
  outline-offset: 2px;
}

/* Disabled */
#rp-view-promos .pd-switch-control.is-disabled,
#rp-view-promos .pd-switch-input:disabled ~ .pd-switch-track{
  cursor: not-allowed;
  opacity: .55;
}

/* ✅ aunque exista --sm en HTML, queda igual al tamaño base */
#rp-view-promos .pd-switch-control--sm{
  --sw-w: var(--pd-sw-w);
  --sw-h: var(--pd-sw-h);
  --sw-thumb: var(--pd-sw-thumb);
  --sw-shift: var(--pd-sw-shift);
}

/* Contenedores rojos: ON con look OFF (thumb a la derecha) */
#rp-view-promos :is(
  #pd-activo-switch.is-on,
  .pd-radio-option:has(.pd-switch-input:checked) .pd-radio-body,
  .pd-option-row:has(.pd-switch-input:checked)
) .pd-switch-input:checked + .pd-switch-track{
  background: var(--sw-off-bg);
  border: 2px solid var(--sw-off-border);
  box-shadow:
    0 10px 22px rgba(17,17,17,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* ------------------------------------------------------------
   ✅ Móvil: quitar íconos/flechitas en time (para que no corte a.m./p.m.)
   ------------------------------------------------------------ */
@media (max-width: 600px){
  #rp-view-promos input[type="time"]::-webkit-calendar-picker-indicator,
  #rp-view-promos input[type="time"]::-webkit-inner-spin-button,
  #rp-view-promos input[type="time"]::-webkit-clear-button{
    opacity: 0;
    display: none;
    width: 0;
    margin: 0;
  }

  #rp-view-promos input[type="time"]{
    -webkit-appearance: none;
    appearance: none;
    padding-right: 12px;
  }
}


/* =========================================================
   PEDIDOS (rp-view-pedidos) — Pro, Responsive, App-like
   Scope: SOLO afecta #rp-view-pedidos y modales de Pedidos.
   ========================================================= */

#rp-view-pedidos,
#rp-modal-ubicacion-map,
#rp-modal-delivery-zones{
  font-family: "Outfit", sans-serif;

  --pd-text: #111;
  --pd-muted: rgba(17,17,17,.62);
  --pd-border: rgba(17,17,17,.10);

  --pd-surface: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  --pd-shadow:
    0 12px 26px rgba(17,17,17,.10),
    0 2px 8px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.85);

  --pd-radius: 18px;
  --pd-radius-sm: 14px;

  /* 🔴 Rojo panel */
  --pd-red1: #e03131;
  --pd-red2: #ff4d4d;

  /* 🔴 Rojo switch base */
  --pd-sw-on: #ff002a;

  /* 🔵 Celeste vivo */
  --pd-sky1: #00a8ff;
  --pd-sky2: #38d4ff;

  --pd-focus: rgba(17,17,17,.35);

  /* Alturas (solo tablet+ para cards con scroll interno) */
  --pd-card-h-tall: clamp(460px, 56vh, 620px); /* QR + Delivery */
  --pd-card-h-mid:  clamp(400px, 50vh, 520px); /* Contactos + Tipos */

  /* Icono basurero (mask) */
  --pd-ico-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 6V4h8v2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7 6l1 16h8l1-16'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

/* Hidden safety */
#rp-view-pedidos[hidden]{ display:none !important; }

/* =========================
   View wrapper (MISMO ancho que otras vistas)
   ========================= */
#rp-view-pedidos{
  padding: 10px 30px 28px;
  width: 100%;
  margin: 0;
  display: grid;
  gap: 14px;
  align-content: start;
}

@media (max-width: 600px){
  #rp-view-pedidos{ padding: 8px 16px 20px; }
}

#rp-view-pedidos{ grid-template-columns: 1fr; }

@media (min-width: 900px){
  #rp-view-pedidos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rp-view-pedidos .rp-card-ubicacion{ grid-column: 1 / -1; }
}

/* =========================
   Cards (solo Pedidos)
   ========================= */
#rp-view-pedidos .rp-card-pedidos{
  border-radius: var(--pd-radius);
  background: var(--pd-surface);
  border: 1.5px solid rgba(17,17,17,.08);
  box-shadow: var(--pd-shadow);
  overflow: hidden;
  min-width: 0;
}

#rp-view-pedidos .rp-card-pedidos:hover{
  border-color: rgba(17,17,17,.18);
  box-shadow:
    0 18px 40px rgba(17,17,17,.14),
    0 3px 10px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
}

/* =========================
   Header: SIEMPRE Guardar arriba derecha
   ========================= */
#rp-view-pedidos .sa-card-header{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(17,17,17,.08);
}

#rp-view-pedidos .sa-card-title{
  margin: 0;
  color: var(--pd-text);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.10rem, 1.02rem + .45vw, 1.45rem);
  line-height: 1.15;
}

#rp-view-pedidos .sa-card-meta{
  margin: 6px 0 0;
  color: var(--pd-muted);
  line-height: 1.28;
  font-size: .95rem;
  max-width: 72ch;
}

#rp-view-pedidos .rp-card-header-actions{
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}

#rp-view-pedidos .rp-card-save-btn{ order: -1; }

#rp-view-pedidos .rp-pedidos-msg{
  max-width: 240px;
  text-align: right;
}

@media (max-width: 420px){
  #rp-view-pedidos .rp-pedidos-msg{ max-width: 200px; }
}

/* =========================
   Botón Guardar (rojo cuando hay cambios)
   ========================= */
#rp-view-pedidos .rp-card-save-btn{
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  min-height: 44px;
  font-size: .85rem;
  font-weight: 700;
  font-family: "Outfit", sans-serif;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space: nowrap;
}

#rp-view-pedidos .rp-card-save-btn.rp-save-clean,
#rp-view-pedidos .rp-card-save-btn:disabled{
  background: rgba(17,17,17,.06);
  color: rgba(17,17,17,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  cursor: not-allowed;
  transform: none;
}

#rp-view-pedidos .rp-card-save-btn.rp-save-dirty{
  background: linear-gradient(135deg, var(--pd-red1) 0%, var(--pd-red2) 100%);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}

#rp-view-pedidos .rp-card-save-btn.rp-save-dirty:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.30);
}

#rp-view-pedidos .rp-card-save-btn.rp-save-dirty:active{
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,.20);
}

#rp-view-pedidos .rp-card-save-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
}

#rp-view-pedidos .rp-card-save-btn.rp-save-saving{
  background: linear-gradient(135deg, var(--pd-red1) 0%, var(--pd-red2) 100%);
  color: #fff;
  opacity: .75;
  cursor: not-allowed;
  transform: none;
}

/* =========================
   Body general
   ========================= */
#rp-view-pedidos .rp-pedidos-body{ padding: 14px; }

#rp-view-pedidos .rp-pedidos-subtitle{
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--pd-text);
  font-size: .98rem;
  margin: 0;
}

/* =========================
   Inputs “sin sa-input” (consistencia)
   ========================= */
#rp-view-pedidos .rp-ubicacion-input,
#rp-view-pedidos .transfer-row input,
#rp-view-pedidos .delivery-rule-row input,
#rp-view-pedidos #pedido-delivery-free,
#rp-view-pedidos #rp-delivery-extra-amount{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--pd-radius-sm);
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.88);
  color: var(--pd-text);
  font-size: .95rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90);
  min-width: 0;
}

#rp-view-pedidos .rp-ubicacion-input:focus,
#rp-view-pedidos .transfer-row input:focus,
#rp-view-pedidos .delivery-rule-row input:focus,
#rp-view-pedidos #pedido-delivery-free:focus,
#rp-view-pedidos #rp-delivery-extra-amount:focus{
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 0 0 4px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-view-pedidos .delivery-rule-row input[type="number"],
#rp-view-pedidos #pedido-delivery-free,
#rp-view-pedidos #rp-delivery-extra-amount{ text-align: right; }

/* =========================
   ✅ Switch base (map a rp-switch + rp-tipo-switch)
   ========================= */
#rp-view-pedidos .rp-switch,
#rp-view-pedidos .rp-tipo-switch{
  --sw-w: 40px;
  --sw-h: 22px;
  --sw-pad: 2px;
  --sw-thumb: 18px;
  --sw-shift: 18px;

  --sw-on: var(--pd-sw-on);
  --sw-off-bg: #ffffff;
  --sw-off-border: rgba(17,17,17,.18);
  --sw-thumb-bg: #ffffff;
  --sw-thumb-border: rgba(17,17,17,.14);
  --sw-focus: rgba(17,17,17,.45);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#rp-view-pedidos .rp-switch-input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#rp-view-pedidos .rp-switch-track{
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;
  background: var(--sw-off-bg);
  border: 2px solid var(--sw-off-border);
  box-shadow:
    0 10px 22px rgba(17,17,17,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
  position: relative;
  display: inline-block;
  overflow: visible;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#rp-view-pedidos .rp-switch-thumb{
  width: var(--sw-thumb);
  height: var(--sw-thumb);
  border-radius: 999px;
  background: var(--sw-thumb-bg);
  border: 1px solid var(--sw-thumb-border);
  position: absolute;
  top: 50%;
  left: var(--sw-pad);
  transform: translateY(-50%) translateX(0);
  box-shadow:
    0 10px 18px rgba(17,17,17,.18),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#rp-view-pedidos .rp-switch-input:checked + .rp-switch-track{
  background: var(--sw-on);
  border-color: rgba(0,0,0,.10);
  box-shadow:
    0 12px 22px rgba(255,0,42,.18),
    inset 0 2px 7px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.18);
}

#rp-view-pedidos .rp-switch-input:checked + .rp-switch-track .rp-switch-thumb{
  transform: translateY(-50%) translateX(var(--sw-shift));
  border-color: rgba(0,0,0,.12);
}

#rp-view-pedidos .rp-switch-input:focus-visible + .rp-switch-track{
  outline: 2px solid var(--sw-focus);
  outline-offset: 2px;
}

/* =========================
   Status pill (Activo/Inactivo) — rojo cuando activo
   ========================= */
#rp-view-pedidos .rp-qr-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

#rp-view-pedidos .rp-qr-status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: rgba(17,17,17,.06);
  border: 1px solid rgba(17,17,17,.10);
  color: rgba(17,17,17,.70);
  white-space: nowrap;
}

#rp-view-pedidos .rp-qr-status.is-active{
  background: var(--pd-sw-on);
  border-color: rgba(0,0,0,.10);
  color: #fff;
  box-shadow: 0 12px 22px rgba(255,0,42,.18);
}

/* =========================
   Icon button (basurero circular rojo)
   ========================= */
#rp-view-pedidos .rp-qr-remove-btn,
#rp-view-pedidos .transfer-remove-btn,
#rp-view-pedidos .delivery-remove-btn,
#rp-view-pedidos .rp-wa-remove{
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.10);
  background: var(--pd-sw-on);
  color: #fff;
  box-shadow:
    0 12px 22px rgba(255,0,42,.18),
    0 2px 6px rgba(17,17,17,.06);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  text-indent: -9999px;
  position: relative;
}

#rp-view-pedidos .rp-qr-remove-btn::before,
#rp-view-pedidos .transfer-remove-btn::before,
#rp-view-pedidos .delivery-remove-btn::before,
#rp-view-pedidos .rp-wa-remove::before{
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--pd-ico-trash) center/contain no-repeat;
          mask: var(--pd-ico-trash) center/contain no-repeat;
  position: absolute;
  inset: 0;
  margin: auto;
}

#rp-view-pedidos .rp-qr-remove-btn:hover,
#rp-view-pedidos .transfer-remove-btn:hover,
#rp-view-pedidos .delivery-remove-btn:hover,
#rp-view-pedidos .rp-wa-remove:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

#rp-view-pedidos .rp-qr-remove-btn:focus-visible,
#rp-view-pedidos .transfer-remove-btn:focus-visible,
#rp-view-pedidos .delivery-remove-btn:focus-visible,
#rp-view-pedidos .rp-wa-remove:focus-visible{
  outline: 2px solid rgba(0,0,0,.32);
  outline-offset: 2px;
}

/* =========================
   Link: Ver en Google Maps (menos grueso)
   ========================= */
#rp-view-pedidos .rp-ubicacion-preview-link{
  color: var(--pd-sky1);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#rp-view-pedidos .rp-ubicacion-preview-link:hover{
  color: #0097e6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================
   Card: Ubicación
   ========================= */
#rp-view-pedidos .rp-ubicacion-grid{
  display: grid;
  gap: 14px;
  min-width: 0;
}

@media (min-width: 900px){
  #rp-view-pedidos .rp-ubicacion-grid{
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: start;
  }
}

#rp-view-pedidos .rp-map-preview{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(17,17,17,.10);
  background: linear-gradient(135deg, rgba(0,168,255,.10) 0%, rgba(255,0,42,.06) 100%);
  box-shadow: 0 10px 20px rgba(17,17,17,.06);
  padding: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 190px;
  cursor: pointer;
}

#rp-view-pedidos .rp-map-preview__title{
  color: var(--pd-text);
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
}

#rp-view-pedidos .rp-map-preview__sub{
  color: var(--pd-muted);
  font-size: .92rem;
  line-height: 1.25;
}

#rp-view-pedidos .rp-ubicacion-coords{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--pd-muted);
  font-size: .85rem;
}

#rp-view-pedidos .rp-ubicacion-coords span{
  background: rgba(17,17,17,.04);
  border: 1px solid rgba(17,17,17,.06);
  border-radius: 999px;
  padding: 6px 10px;
}

#rp-view-pedidos .rp-ubicacion-side{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

#rp-view-pedidos .rp-ubicacion-label{
  font-weight: 900;
  color: rgba(17,17,17,.78);
  font-size: .86rem;
}

/* =========================================================
   ✅ Alturas iguales + scroll interno (tablet+)
   ========================================================= */
@media (min-width: 768px){
  #rp-view-pedidos section[data-section-id="qr"],
  #rp-view-pedidos section[data-section-id="delivery"]{
    height: var(--pd-card-h-tall);
    display: flex;
    flex-direction: column;
  }

  #rp-view-pedidos section[data-section-id="delivery-contactos"],
  #rp-view-pedidos section[data-section-id="tipos-pedido"]{
    height: var(--pd-card-h-mid);
    display: flex;
    flex-direction: column;
  }

  /* QR + Delivery: body con scroll interno si hace falta */
  #rp-view-pedidos section[data-section-id="qr"] .rp-pedidos-body,
  #rp-view-pedidos section[data-section-id="delivery"] .rp-pedidos-body{
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: auto;
  }

  /* Contactos + Tipos: body contenido, scroll lo maneja el listado interno */
  #rp-view-pedidos section[data-section-id="delivery-contactos"] .rp-pedidos-body,
  #rp-view-pedidos section[data-section-id="tipos-pedido"] .rp-pedidos-body{
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
}

/* =========================
   Card: QR + Transferencias
   ========================= */
#rp-view-pedidos .rp-qr-layout{
  display: grid;
  gap: 14px;
  align-items: start;
  min-width: 0;
}

@media (min-width: 768px){
  #rp-view-pedidos .rp-qr-layout{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 100%;
    min-height: 0;
  }
}

#rp-view-pedidos .rp-qr-left,
#rp-view-pedidos .rp-qr-right{
  min-width: 0;
}

/* left */
@media (min-width: 768px){
  #rp-view-pedidos .rp-qr-left{
    min-height: 0;
    overflow: auto;
    padding-right: 6px;
    overscroll-behavior: auto;
  }
}

#rp-view-pedidos .rp-field-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 10px;
}

#rp-view-pedidos .rp-field-header > label{
  margin: 0;
  font-weight: 900;
  color: rgba(17,17,17,.78);
  font-size: .86rem;
}

#rp-view-pedidos .rp-qr-section-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 10px;
}

#rp-view-pedidos .rp-qr-section-header .rp-pedidos-subtitle{
  line-height: 1.15;
  max-width: 240px;
}

#rp-view-pedidos .sa-file-upload{
  position: relative;
}

#rp-view-pedidos .sa-file-upload-input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#rp-view-pedidos .sa-file-upload-label{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 18px rgba(17,17,17,.06);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#rp-view-pedidos .sa-file-upload-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--pd-sw-on);
  border: 1px solid rgba(255,0,42,.22);
  flex: 0 0 auto;
  box-shadow: 0 10px 18px rgba(255,0,42,.16);
}

#rp-view-pedidos .sa-file-upload-icon img{
  width: 22px;
  height: 22px;
  display: block;
  filter: brightness(0) invert(1);
}

#rp-view-pedidos .sa-file-upload-title{
  display: block;
  font-weight: 900;
  color: rgba(17,17,17,.82);
  line-height: 1.1;
}

#rp-view-pedidos .sa-file-upload-filename{
  display: block;
  margin-top: 4px;
  color: rgba(17,17,17,.60);
  font-size: .88rem;
  line-height: 1.15;
}

/* Preview QR compacto + botón dentro abajo izquierda */
#rp-view-pedidos .rp-qr-preview-wrapper{
  margin-top: 12px;
  position: relative;
  width: 100%;
}

#rp-view-pedidos .rp-qr-preview{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 18px rgba(17,17,17,.06);
  overflow: hidden;
  position: relative;
  min-height: 180px;
  height: clamp(220px, 26vh, 280px);
  max-height: 280px;
  box-sizing: border-box;
}

/* ✅ La imagen SIEMPRE entra completa dentro del contenedor
   sin cortarse, sea vertical u horizontal */
#rp-view-pedidos #pedido-qr-preview > img{
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px) !important;
  height: calc(100% - 24px) !important;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: contain;
  object-position: center;
  margin: auto;
}

/* Placeholder */
#rp-view-pedidos .rp-qr-preview-placeholder{
  position: absolute;
  inset: 12px;
  display: grid;
  place-items: center;
  color: rgba(17,17,17,.55);
  font-size: .92rem;
  text-align: center;
  padding: 14px;
}

/* Botón dentro del preview, superpuesto abajo izquierda */
#rp-view-pedidos .rp-qr-remove-btn{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  margin: 0;
  justify-self: auto;
}

@media (max-width: 767px){
  #rp-view-pedidos .rp-qr-preview{
    min-height: 200px;
    height: clamp(220px, 48vw, 320px);
    max-height: none;
  }

  #rp-view-pedidos #pedido-qr-preview > img{
    inset: 12px;
    width: calc(100% - 24px) !important;
    height: calc(100% - 24px) !important;
  }

  #rp-view-pedidos .rp-qr-preview-placeholder{
    inset: 12px;
  }
}

/* right: transferencias con scroll interno */
@media (min-width: 768px){
  #rp-view-pedidos .rp-qr-right{
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 12px;
    padding-bottom: 12px;
  }

  #rp-view-pedidos #transfer-list{
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-right: 6px;
    overscroll-behavior: auto;
    scrollbar-gutter: stable;
  }

  #rp-view-pedidos .rp-qr-right .rp-transfer-add-btn{
    margin-top: 0;
    margin-bottom: 0;
  }
}

#rp-view-pedidos .rp-transfer-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  min-width: 0;
}

#rp-view-pedidos .transfer-row{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 10px 18px rgba(17,17,17,.05);
  min-width: 0;
}

#rp-view-pedidos .transfer-field label{
  display: block;
  margin: 0 0 6px;
  font-size: .78rem;
  font-weight: 900;
  color: rgba(17,17,17,.72);
}

#rp-view-pedidos .transfer-remove-btn{
  margin-top: 4px;
  margin-inline: auto;
}

#rp-view-pedidos .rp-transfer-add-btn{
  margin-top: 10px;
  border: 0;
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 16px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: .95rem;
  background: linear-gradient(135deg, var(--pd-red1) 0%, var(--pd-red2) 100%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(224,49,49,.18), 0 2px 6px rgba(17,17,17,.05);
  cursor: pointer;
}

/* =========================
   Costos de delivery
   ========================= */
#rp-view-pedidos .rp-delivery-grid{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Reglas: scroll interno (tablet+) */
@media (min-width: 768px){
  #rp-view-pedidos #delivery-rules-list{
    min-height: 0;
    overflow: auto;
    padding-right: 6px;
    overscroll-behavior: auto;
    scrollbar-gutter: stable;
  }
}

#rp-view-pedidos .rp-delivery-left{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-width: 0;
}

#rp-view-pedidos .rp-delivery-left .rp-pedidos-subtitle{
  grid-column: 1 / -1;
}

#rp-view-pedidos #delivery-rules-list{
  grid-column: 1 / -1;
}

#rp-view-pedidos .rp-delivery-add-btn{
  grid-column: 1;
  justify-self: start;
  margin-top: 0;
}

#rp-view-pedidos .rp-delivery-map-btn{
  grid-column: 2;
  justify-self: end;
  margin-top: 0;
}

@media (max-width: 720px){
  #rp-view-pedidos .rp-delivery-left{
    grid-template-columns: 1fr;
  }

  #rp-view-pedidos .rp-delivery-add-btn,
  #rp-view-pedidos .rp-delivery-map-btn{
    grid-column: 1;
    justify-self: stretch;
  }
}

#rp-view-pedidos .delivery-rule-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 10px 18px rgba(17,17,17,.05);
  min-width: 0;
}

#rp-view-pedidos .delivery-field label{
  display: block;
  margin: 0 0 6px;
  font-size: .78rem;
  font-weight: 900;
  color: rgba(17,17,17,.72);
}

#rp-view-pedidos .rp-delivery-add-btn{
  border: 0;
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 16px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: .95rem;
  background: linear-gradient(135deg, var(--pd-red1) 0%, var(--pd-red2) 100%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(224,49,49,.18), 0 2px 6px rgba(17,17,17,.05);
  cursor: pointer;
}

#rp-view-pedidos .rp-delivery-map-btn{
  border: 0;
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 16px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: .95rem;
  background: linear-gradient(135deg, var(--pd-sky1) 0%, var(--pd-sky2) 100%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(0,168,255,.18), 0 2px 6px rgba(17,17,17,.05);
  cursor: pointer;
}

#rp-view-pedidos .rp-delivery-right-grid{
  display: grid;
  gap: 12px;
  min-width: 0;
}

@media (min-width: 900px){
  #rp-view-pedidos .rp-delivery-right-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

#rp-view-pedidos .rp-delivery-right-grid .sa-field{
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 10px 18px rgba(17,17,17,.05);
}

#rp-view-pedidos .rp-delivery-right-grid .sa-field > label,
#rp-view-pedidos .rp-delivery-right-grid .rp-field-header > label{
  margin: 0;
  font-weight: 900;
  color: rgba(17,17,17,.78);
  font-size: .86rem;
}

#rp-view-pedidos .rp-delivery-free-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  margin-top: 8px;
}

#rp-view-pedidos .rp-delivery-free-suffix{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: var(--pd-radius-sm);
  background: rgba(17,17,17,.04);
  border: 1px solid rgba(17,17,17,.10);
  color: rgba(17,17,17,.70);
  font-weight: 900;
  white-space: nowrap;
}

/* =========================
   Contactos delivery (WhatsApp)
   ========================= */
#rp-view-pedidos .rp-pedidos-delivery-contactos{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#rp-view-pedidos .rp-pedidos-delivery-contactos .sa-input{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--pd-radius-sm);
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.88);
  color: var(--pd-text);
  font-size: .95rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-view-pedidos .rp-pedidos-delivery-contactos .sa-input:focus{
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 0 0 4px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-view-pedidos .rp-wa-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ✅ Contactos: scroll interno real (tablet+) */
@media (min-width: 768px){
  #rp-view-pedidos #delivery-contactos-list{
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    padding-right: 6px;
    overscroll-behavior: auto;
    scrollbar-gutter: stable;
  }
}

#rp-view-pedidos .rp-wa-row{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 160px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 10px 18px rgba(17,17,17,.05);
  min-width: 0;
}

@media (max-width: 720px){
  #rp-view-pedidos .rp-wa-row{
    grid-template-columns: 140px minmax(0, 1fr) auto;
    grid-template-areas:
      "name name name"
      "pref num remove";
  }

  #rp-view-pedidos .rp-wa-name{ grid-area: name; }
  #rp-view-pedidos .rp-wa-pref{ grid-area: pref; }
  #rp-view-pedidos .rp-wa-num{ grid-area: num; }
  #rp-view-pedidos .rp-wa-remove{
    grid-area: remove;
    justify-self: end;
  }
}

#rp-view-pedidos .rp-delivery-contactos-wrap{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex: 1;
  align-content: stretch;
}

#rp-view-pedidos #delivery-contactos-list{
  grid-column: 1 / -1;
  min-height: 0;
  height: 100%;
}

#rp-view-pedidos .rp-delivery-contactos-wrap .sa-hint{
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: rgba(17,17,17,.58);
  font-size: .86rem;
  align-self: center;
}

#rp-view-pedidos .rp-wa-add-row{
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin: 0;

  border: 0;
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 16px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: .95rem;
  background: linear-gradient(135deg, var(--pd-red1) 0%, var(--pd-red2) 100%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(224,49,49,.18), 0 2px 6px rgba(17,17,17,.05);
  cursor: pointer;
}

@media (max-width: 640px){
  #rp-view-pedidos .rp-delivery-contactos-wrap{
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
  }

  #rp-view-pedidos .rp-delivery-contactos-wrap .sa-hint{
    grid-column: 1;
    grid-row: 3;
  }

  #rp-view-pedidos .rp-wa-add-row{
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
  }
}

/* =========================
   Tipos de pedido
   ========================= */
#rp-view-pedidos .rp-tipos-grid{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

@media (min-width: 768px){
  #rp-view-pedidos .rp-pedidos-tipos{
    min-height: 0;
    overflow: hidden;
  }

  #rp-view-pedidos .rp-tipos-grid{
    min-height: 0;
    overflow: auto;
    padding-right: 6px;
    overscroll-behavior: auto;
  }
}

#rp-view-pedidos .rp-tipo-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 10px 18px rgba(17,17,17,.05);
  cursor: pointer;
  user-select: none;
}

#rp-view-pedidos .rp-tipo-content{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#rp-view-pedidos .rp-tipo-title{
  font-weight: 950;
  color: var(--pd-text);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

#rp-view-pedidos .rp-tipo-desc{
  color: var(--pd-muted);
  font-size: .86rem;
  line-height: 1.25;
}

/* =========================
   MODALES
   ========================= */
#rp-modal-ubicacion-map .rp-modal-ubicacion-map-body{
  display: grid;
  gap: 12px;
}

#rp-modal-ubicacion-map .rp-ubicacion-map--modal{
  width: 100%;
  height: clamp(320px, 60vh, 560px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(17,17,17,.03);
}

#rp-modal-ubicacion-map .rp-modal-ubicacion-map-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (max-width: 600px){
  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-foot{
    flex-direction: column;
    align-items: stretch;
  }
}


#rp-modal-delivery-zones .rp-delivery-zones-legend-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(17,17,17,.03);
  border: 1px solid rgba(17,17,17,.06);
}

#rp-modal-delivery-zones .rp-map-wrap{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(17,17,17,.03);
}

#rp-modal-delivery-zones .rp-delivery-zones-map{
  width: 100%;
  height: 380px;
}

@media (max-width: 600px){
  #rp-modal-delivery-zones .rp-delivery-zones-map{
    height: 320px;
  }
}

/* =========================================================
   ✅ Scrollbars visibles SOLO para listas clave
   ========================================================= */
@media (min-width: 768px){
  #rp-view-pedidos #delivery-rules-list,
  #rp-view-pedidos #transfer-list,
  #rp-view-pedidos #delivery-contactos-list{
    scrollbar-width: thin;
    scrollbar-color: rgba(17,17,17,.28) transparent;
  }

  #rp-view-pedidos #delivery-rules-list::-webkit-scrollbar,
  #rp-view-pedidos #transfer-list::-webkit-scrollbar,
  #rp-view-pedidos #delivery-contactos-list::-webkit-scrollbar{
    width: 10px;
  }

  #rp-view-pedidos #delivery-rules-list::-webkit-scrollbar-thumb,
  #rp-view-pedidos #transfer-list::-webkit-scrollbar-thumb,
  #rp-view-pedidos #delivery-contactos-list::-webkit-scrollbar-thumb{
    background: rgba(17,17,17,.20);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
  }

  #rp-view-pedidos #delivery-rules-list::-webkit-scrollbar-track,
  #rp-view-pedidos #transfer-list::-webkit-scrollbar-track,
  #rp-view-pedidos #delivery-contactos-list::-webkit-scrollbar-track{
    background: transparent;
  }
}

/* ============================================================
   🗺️ MODAL · ZONAS DE DELIVERY
   - corregido: separación real entre cards
   - reglas con scroll interno
   - desktop 2 columnas / tablet y móvil 1 columna estable
   ============================================================ */

#rp-modal-delivery-zones{
  --rp-dz-surface: #ffffff;
  --rp-dz-text: rgba(17,17,17,.90);
  --rp-dz-muted: rgba(17,17,17,.62);
  --rp-dz-border: rgba(17,17,17,.10);

  --rp-dz-map-h: clamp(400px, 58vh, 660px);
  --rp-dz-panel-h: clamp(560px, 74vh, 820px);
  --rp-dz-gap: 16px;
}

#rp-modal-delivery-zones .rp-modal-delivery-zones-card{
  width: min(1160px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  min-height: min(760px, calc(100dvh - 28px));

  display: flex;
  flex-direction: column;
  overflow: hidden;

  background: var(--rp-dz-surface);
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
}

#rp-modal-delivery-zones .sa-modal-header{
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,17,17,.10);
  background: var(--rp-dz-surface);
}

#rp-modal-delivery-zones .sa-modal-head-copy{
  min-width: 0;
}

#rp-modal-delivery-zones .sa-modal-header h2{
  margin: 0;
  font-size: clamp(1.35rem, 1.05rem + 0.8vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rp-dz-text);
}

#rp-modal-delivery-zones .rp-delivery-zones-subtitle{
  margin: 8px 0 0;
  color: var(--rp-dz-muted);
  line-height: 1.3;
  font-size: .92rem;
  font-weight: 500;
}

#rp-modal-delivery-zones .sa-modal-close{
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  align-self: flex-start;

  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.14);
  background: #fff;
  box-shadow:
    0 12px 22px rgba(17,17,17,.10),
    0 2px 6px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.92);

  appearance: none;
  cursor: pointer;
  position: relative;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

#rp-modal-delivery-zones .sa-modal-close::before{
  content: "\00D7";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: rgba(17,17,17,.88);
}

#rp-modal-delivery-zones .sa-modal-close:hover{
  border-color: rgba(17,17,17,.28);
}

#rp-modal-delivery-zones .sa-modal-close:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

#rp-modal-delivery-zones .sa-modal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: var(--rp-dz-surface);
}

#rp-modal-delivery-zones .rp-modal-delivery-zones-body{
  height: 100%;
  min-height: 0;
}

#rp-modal-delivery-zones .rp-delivery-zones-grid{
  height: 100%;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  padding: 16px;
  display: grid;
  grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--rp-dz-gap);
}

#rp-modal-delivery-zones .rp-delivery-zones-col{
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-card{
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 12px 26px rgba(17,17,17,.06),
    0 2px 8px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.88);
  overflow: hidden;
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-head{
  margin-bottom: 12px;
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-title{
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: rgba(17,17,17,.88);
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-sub{
  margin: 6px 0 0;
  color: rgba(17,17,17,.58);
  font-size: .84rem;
  line-height: 1.32;
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-card--legend{
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  height: var(--rp-dz-panel-h);
  min-height: var(--rp-dz-panel-h);
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-card--map{
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  height: var(--rp-dz-panel-h);
  min-height: var(--rp-dz-panel-h);
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-card--legend > .rp-delivery-zones-panel-head,
#rp-modal-delivery-zones .rp-delivery-zones-panel-card--map > .rp-delivery-zones-panel-head{
  margin-bottom: 0;
}

#rp-modal-delivery-zones .rp-delivery-zones-msg{
  min-height: 0;
}

#rp-modal-delivery-zones .rp-delivery-zones-msg:empty{
  display: none;
}

#rp-modal-delivery-zones #rp-delivery-zones-legend{
  min-height: 0;
  height: 100%;
  max-height: none;

  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 0 4px 0 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;

  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

#rp-modal-delivery-zones .rp-delivery-zones-legend-item{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;

  padding: 13px 14px;
  border-radius: 16px;
  background: #f8f8f9;
  border: 1px solid rgba(17,17,17,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
}

#rp-modal-delivery-zones .rp-delivery-zones-legend-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#rp-modal-delivery-zones .rp-delivery-zones-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 12px;
  box-shadow: 0 0 0 3px rgba(17,17,17,.05);
}

#rp-modal-delivery-zones .rp-delivery-zones-range{
  min-width: 0;
  font-size: .94rem;
  font-weight: 700;
  color: rgba(17,17,17,.84);
  line-height: 1.15;
}

#rp-modal-delivery-zones .rp-delivery-zones-price{
  font-size: .90rem;
  font-weight: 800;
  color: rgba(17,17,17,.72);
  white-space: nowrap;
}

#rp-modal-delivery-zones .sa-hint{
  display: block;
  margin: 0;
  color: rgba(17,17,17,.54);
  line-height: 1.35;
  font-size: .82rem;
  font-weight: 400;
}

#rp-modal-delivery-zones .rp-map-wrap{
  position: relative;
  min-height: 0;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(17,17,17,.03);
}

#rp-modal-delivery-zones .rp-delivery-zones-map{
  width: 100%;
  height: 100%;
  min-height: var(--rp-dz-map-h);
  display: block;
}

/* =========================
   Tablet
   ========================= */
@media (max-width: 1100px){
  #rp-modal-delivery-zones{
    padding: 0;
    align-items: flex-end;
    --rp-dz-map-h: clamp(320px, 40vh, 420px);
    --rp-dz-gap: 16px;
  }

  #rp-modal-delivery-zones .rp-modal-delivery-zones-card{
    width: 100%;
    min-height: 0;
    height: auto;
    max-height: min(94dvh, 980px);
    border-radius: 26px 26px 0 0;
  }

  #rp-modal-delivery-zones .sa-modal-header{
    padding-top: 22px;
    position: relative;
  }

  #rp-modal-delivery-zones .sa-modal-header::before{
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(17,17,17,.18);
  }

  #rp-modal-delivery-zones .sa-modal-body{
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #rp-modal-delivery-zones .rp-modal-delivery-zones-body{
    height: auto !important;
    min-height: 0 !important;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px !important;
    gap: var(--rp-dz-gap) !important;
    overflow: visible !important;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-col{
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-col + .rp-delivery-zones-col{
    margin-top: var(--rp-dz-gap) !important;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-panel-card--legend{
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: clamp(360px, 52dvh, 540px) !important;
    overflow: hidden !important;
    position: relative;
    z-index: 2;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-panel-card--map{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative;
    z-index: 1;
  }

  #rp-modal-delivery-zones #rp-delivery-zones-legend{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 2px !important;
  }

  #rp-modal-delivery-zones .rp-map-wrap{
    height: clamp(320px, 40vh, 420px) !important;
    min-height: 320px !important;
    flex: 0 0 auto !important;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-map{
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* =========================
   Móvil
   ========================= */
@media (max-width: 600px){
  #rp-modal-delivery-zones{
    --rp-dz-map-h: clamp(280px, 38vh, 340px);
    --rp-dz-gap: 14px;
  }

  #rp-modal-delivery-zones .rp-modal-delivery-zones-card{
    height: 94dvh;
    max-height: 94dvh;
    border-radius: 22px 22px 0 0;
  }

  #rp-modal-delivery-zones .sa-modal-header h2{
    font-size: 1.42rem;
    line-height: 1.05;
  }

  #rp-modal-delivery-zones .sa-modal-close{
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    flex: 0 0 42px;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-grid{
    padding: 14px !important;
    gap: var(--rp-dz-gap) !important;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-col + .rp-delivery-zones-col{
    margin-top: var(--rp-dz-gap) !important;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-panel-card{
    padding: 12px;
    border-radius: 16px;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-panel-card--legend{
    max-height: min(52dvh, 460px) !important;
  }

  #rp-modal-delivery-zones #rp-delivery-zones-legend{
    gap: 10px;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-legend-item{
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-range{
    font-size: .88rem;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-price{
    font-size: .84rem;
  }

  #rp-modal-delivery-zones .rp-map-wrap{
    height: clamp(280px, 38vh, 340px) !important;
    min-height: 280px !important;
  }
}

/* ======================================================================
   👥 ROLES / ADMINISTRACIÓN — UI PRO (Cards + Modal)
   Scope: #rp-view-roles + #rp-modal-rol
   - Tarjetas profesionales (listado)
   - Grid: 3 desktop / 2 tablet / 1 móvil
   - Edit/Delete centrados en la tarjeta
   - Botón “Agregar rol” rojo (estilo logout) SIEMPRE arriba derecha
   - Inputs pill + focus borde negro 2px
   - Switch rojo estilo Estado/Horarios (OFF blanco / ON rojo)
   ====================================================================== */

/* =========================
   VISTA: ROLES (LISTADO)
   ========================= */
#rp-view-roles{
  padding: 10px 30px 28px;
  font-family: "Outfit", sans-serif;

  --rl-text: #111;
  --rl-muted: rgba(17,17,17,.62);
  --rl-border: rgba(17,17,17,.10);

  --rl-surface: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  --rl-shadow:
    0 12px 26px rgba(17,17,17,.10),
    0 2px 8px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.85);

  --rl-red-solid: #ff002a;
  --rl-red1: #e03131;
  --rl-red2: #ff4d4d;

  --rl-green1: #16a34a;
  --rl-green2: #22c55e;

  --rl-slate1: #64748b;
  --rl-slate2: #94a3b8;

  --rl-focus: rgba(0,0,0,.35);
}

@media (max-width: 600px){
  #rp-view-roles{ padding: 8px 16px 20px; }
}

#rp-view-roles .rp-roles-card{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
}

/* Header */
#rp-view-roles .rp-roles-card .sa-card-header{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto; /* ✅ siempre 2 columnas */
  align-items: start;
  gap: 14px;
  padding: 6px 0 12px;
  border-bottom: 1px solid rgba(17,17,17,.08);
}

#rp-view-roles .rp-roles-card .sa-card-title{
  margin: 0;
  color: var(--rl-text);
  font-weight: 850;
  letter-spacing: -0.02em;
  font-size: clamp(1.15rem, 1.05rem + .6vw, 1.55rem);
}

#rp-view-roles .rp-roles-card .sa-card-meta{
  margin: 6px 0 0;
  color: var(--rl-muted);
  line-height: 1.25;
  font-size: .95rem;
}

#rp-view-roles .rp-card-header-actions{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Botón Agregar rol (rojo) */
#rp-view-roles #rp-roles-add-btn{
  appearance: none;
  border: 0;
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 16px;
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fff;
  background: var(--rl-red-solid);
  box-shadow:
    0 16px 26px rgba(255,0,42,.22),
    0 3px 10px rgba(17,17,17,.08);
  cursor: pointer;
  transition: transform .12s ease, filter .16s ease, box-shadow .16s ease;
}

#rp-view-roles #rp-roles-add-btn:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow:
    0 18px 30px rgba(255,0,42,.26),
    0 3px 10px rgba(17,17,17,.08);
}

#rp-view-roles #rp-roles-add-btn:active{ transform: translateY(0); }

#rp-view-roles #rp-roles-add-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.45);
  outline-offset: 2px;
}

@media (max-width: 600px){
  #rp-view-roles #rp-roles-add-btn{
    min-height: 40px;
    padding: 9px 14px;
  }
}

/* Toolbar */
#rp-view-roles .rp-roles-toolbar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  padding: 14px 0 10px;
}

@media (max-width: 600px){
  #rp-view-roles .rp-roles-toolbar{ grid-template-columns: 1fr; }
}

#rp-view-roles .rp-roles-toolbar .sa-field input,
#rp-view-roles .rp-roles-toolbar .sa-field select{
  width: 100%;
  min-height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90);
  padding: 10px 14px;
  font-family: "Outfit", sans-serif;
  color: var(--rl-text);
  outline: none;
}

#rp-view-roles .rp-roles-toolbar .sa-field input:focus,
#rp-view-roles .rp-roles-toolbar .sa-field select:focus,
#rp-view-roles .rp-roles-toolbar .sa-field input:focus-visible,
#rp-view-roles .rp-roles-toolbar .sa-field select:focus-visible{
  border-color: #111;
  box-shadow: none;
}

/* Grid wrapper */
#rp-view-roles .rp-roles-table-wrapper{ padding-top: 6px; }

/* Grid cards: 1/2/3 */
#rp-view-roles .rp-grid--roles{
  display: grid;
  gap: 14px;
  align-items: stretch;
  grid-template-columns: 1fr;
}

@media (min-width: 768px){
  #rp-view-roles .rp-grid--roles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  #rp-view-roles .rp-grid--roles{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Card */
#rp-view-roles .rp-role-card{
  background: var(--rl-surface);
  border: 1px solid var(--rl-border);
  border-radius: 18px;
  box-shadow: var(--rl-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease;
}

#rp-view-roles .rp-role-card:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.28);
  box-shadow:
    0 16px 30px rgba(17,17,17,.12),
    0 3px 10px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.90);
}

/* Head */
#rp-view-roles .rp-role-card__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(17,17,17,.08);
  min-width: 0;
}

#rp-view-roles .rp-role-card__titlewrap{ min-width: 0; }

#rp-view-roles .rp-role-card__title{
  color: var(--rl-text);
  font-weight: 950;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

#rp-view-roles .rp-role-card__sub{
  margin-top: 6px;
  color: var(--rl-muted);
  font-size: .92rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status pill */
#rp-view-roles .rp-roles-status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .78rem;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow:
    0 10px 18px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.25);
}

#rp-view-roles .rp-roles-status--activo{
  background: linear-gradient(135deg, var(--rl-green1) 0%, var(--rl-green2) 100%);
  color: #fff;
}
#rp-view-roles .rp-roles-status--invitado{
  background: linear-gradient(135deg, var(--rl-slate1) 0%, var(--rl-slate2) 100%);
  color: #fff;
}
#rp-view-roles .rp-roles-status--suspendido{
  background: linear-gradient(135deg, var(--rl-red1) 0%, var(--rl-red2) 100%);
  color: #fff;
}

/* =========================
   ✅ FIX: KV layout SIEMPRE como móvil
   Email (fila 1 full) + Teléfono/Sucursales (fila 2)
   ========================= */
#rp-view-roles .rp-role-card__grid{
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* ✅ siempre 2 columnas */
  gap: 10px;
}

/* Email (1) full width */
#rp-view-roles .rp-role-card__grid .rp-kv:nth-child(1){
  grid-column: 1 / -1;
}

/* Teléfono (2) col 1, Sucursales (3) col 2 */
#rp-view-roles .rp-role-card__grid .rp-kv:nth-child(2){
  grid-column: 1;
}
#rp-view-roles .rp-role-card__grid .rp-kv:nth-child(3){
  grid-column: 2;
}

/* KV */
#rp-view-roles .rp-kv{
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.70);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  min-width: 0;
}

/* Labels */
#rp-view-roles .rp-kv > span{
  font-size: .78rem;
  font-weight: 850;
  color: rgba(17,17,17,.55);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Values (1 línea) */
#rp-view-roles .rp-kv > strong{
  font-size: .95rem;
  font-weight: 950;
  color: var(--rl-text);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* ✅ una sola línea */
}

/* Email: más espacio al valor para que se vea mejor */
#rp-view-roles .rp-role-card__grid .rp-kv:nth-child(1) > span{ max-width: 30%; }
#rp-view-roles .rp-role-card__grid .rp-kv:nth-child(1) > strong{ max-width: 70%; }

/* Tel/Suc: balance normal */
#rp-view-roles .rp-role-card__grid .rp-kv:nth-child(2) > span,
#rp-view-roles .rp-role-card__grid .rp-kv:nth-child(3) > span{ max-width: 60%; }
#rp-view-roles .rp-role-card__grid .rp-kv:nth-child(2) > strong,
#rp-view-roles .rp-role-card__grid .rp-kv:nth-child(3) > strong{ max-width: 40%; }

#rp-view-roles .rp-kv--mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: -0.01em;
}

@media (max-width: 600px){
  #rp-view-roles .rp-role-card__grid{
    padding: 10px 12px;
    gap: 10px;
  }
}

/* Chips */
#rp-view-roles .rp-role-card__chips{
  padding: 0 14px 12px;
  display: grid;
  gap: 8px;
}

#rp-view-roles .rp-role-card__chips-label{
  font-size: .78rem;
  font-weight: 900;
  color: rgba(17,17,17,.70);
  letter-spacing: -0.01em;
}

#rp-view-roles .rp-roles-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#rp-view-roles .rp-roles-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(17,17,17,.10);
  color: rgba(17,17,17,.86);
  font-weight: 850;
  font-size: .78rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

/* Actions */
#rp-view-roles .rp-role-card__actions{
  margin-top: auto;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(17,17,17,.08);

  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 12px;
}

#rp-view-roles .rp-role-card__actions .rp-roles-action[data-role="copyInvite"]{
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 42px;
  border-radius: 999px;
  font-weight: 800;
}

#rp-view-roles .rp-role-card__actions .rp-roles-action[data-role="edit"]{
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
}
#rp-view-roles .rp-role-card__actions .rp-roles-action[data-role="delete"]{
  grid-column: 3;
  grid-row: 2;
  justify-self: center;
}

#rp-view-roles .rp-role-card__actions .rp-roles-action[data-role="edit"],
#rp-view-roles .rp-role-card__actions .rp-roles-action[data-role="delete"]{
  appearance: none;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.92);
  color: #111;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  cursor: pointer;

  box-shadow:
    0 12px 22px rgba(17,17,17,.10),
    0 2px 6px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.85);

  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

#rp-view-roles .rp-role-card__actions .rp-roles-action[data-role="edit"]::before,
#rp-view-roles .rp-role-card__actions .rp-roles-action[data-role="delete"]::before{
  content: "";
  width: 22px;
  height: 22px;
  background: var(--rl-act-ico) center / contain no-repeat;
  display: block;
}

#rp-view-roles .rp-role-card__actions .rp-roles-action[data-role="edit"]{
  --rl-act-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 20h9'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

#rp-view-roles .rp-role-card__actions .rp-roles-action[data-role="delete"]{
  background: linear-gradient(135deg, var(--rl-red1) 0%, var(--rl-red2) 100%);
  border-color: transparent;
  box-shadow:
    0 14px 26px rgba(224,49,49,.22),
    0 2px 8px rgba(17,17,17,.06);
  --rl-act-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 6V4h8v2'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 6l1 14h10l1-14'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

#rp-view-roles .rp-role-card__actions .rp-roles-action[data-role="edit"]:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.28);
}
#rp-view-roles .rp-role-card__actions .rp-roles-action[data-role="delete"]:hover{
  transform: translateY(-1px);
  box-shadow:
    0 18px 30px rgba(224,49,49,.28),
    0 3px 10px rgba(17,17,17,.06);
}

#rp-view-roles .rp-role-card__actions .rp-roles-action:active{ transform: translateY(0); }

#rp-view-roles .rp-role-card__actions .rp-roles-action:focus-visible{
  outline: 2px solid rgba(0,0,0,.45);
  outline-offset: 2px;
}

@media (max-width: 600px){
  #rp-view-roles .rp-role-card__head{ padding: 12px 12px 10px; }
  #rp-view-roles .rp-role-card__chips{ padding: 0 12px 10px; }
  #rp-view-roles .rp-role-card__actions{ padding: 10px 12px 12px; gap: 10px; }

  #rp-view-roles .rp-role-card__actions .rp-roles-action[data-role="edit"],
  #rp-view-roles .rp-role-card__actions .rp-roles-action[data-role="delete"]{
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
}

/* Empty */
#rp-view-roles .rp-roles-empty{
  margin: 18px 0 0;
  padding: 18px;
  border: 1px dashed rgba(17,17,17,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.65);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

#rp-view-roles .rp-roles-empty-title{
  font-weight: 950;
  color: var(--rl-text);
  letter-spacing: -0.01em;
}

#rp-view-roles .rp-roles-empty-text{
  margin-top: 6px;
  color: var(--rl-muted);
  line-height: 1.35;
}

/* ============================================================
   MODAL: CREAR / EDITAR ROL
   - Body con scroll interno real
   - Footer estático fuera del scroll
   - Franja inferior tipo modal de producto
   ============================================================ */

/* Blur del fondo cuando el modal está abierto */
@supports selector(body:has(*)){
  body:has(#rp-modal-rol.is-open) #sa-modal-backdrop.sa-modal-backdrop{
    background: rgba(0,0,0,.40);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* Base */
#rp-modal-rol[aria-hidden="true"]{
  display: none;
}

#rp-modal-rol{
  position: fixed;
  inset: 0;
  z-index: 999;
  padding: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Outfit", sans-serif;

  --rm-surface: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  --rm-text: rgba(17,17,17,.90);
  --rm-muted: rgba(17,17,17,.62);
  --rm-border: rgba(17,17,17,.10);
  --rm-red: #ff002a;
  --rm-focus: rgba(17,17,17,.45);
}

/* Card principal */
#rp-modal-rol .rp-modal-rol-card{
  width: min(1120px, calc(100vw - 28px));
  height: min(920px, calc(100dvh - 28px));
  max-height: calc(100dvh - 28px);

  display: flex;
  flex-direction: column;
  overflow: hidden;

  background: var(--rm-surface);
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);

  transform: translateY(10px) scale(.99);
  transition: transform .18s ease;
}

#rp-modal-rol.is-open .rp-modal-rol-card{
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  #rp-modal-rol .rp-modal-rol-card{
    transition: none;
    transform: none;
  }
}

/* Header */
#rp-modal-rol .sa-modal-header{
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,17,17,.10);
  background: var(--rm-surface);
}

#rp-modal-rol .sa-modal-header h2{
  margin: 0;
  font-size: clamp(1.35rem, 1.05rem + .8vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rm-text);
}

#rp-modal-rol .sa-sucursales-subtitle{
  margin: 8px 0 0;
  color: var(--rm-muted);
  line-height: 1.3;
  font-size: .92rem;
  font-weight: 500;
  max-width: 880px;
}

#rp-modal-rol .sa-modal-close{
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1 / 1;
  flex: 0 0 44px;
  align-self: flex-start;

  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.14);
  background: #fff;

  box-shadow:
    0 12px 22px rgba(17,17,17,.10),
    0 2px 6px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.92);

  cursor: pointer;
  position: relative;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

#rp-modal-rol .sa-modal-close::before{
  content: "\00D7";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: rgba(17,17,17,.88);
}

#rp-modal-rol .sa-modal-close:hover{
  border-color: rgba(17,17,17,.28);
}

#rp-modal-rol .sa-modal-close:focus-visible{
  outline: 2px solid var(--rm-focus);
  outline-offset: 2px;
}

/* ============================================================
   BODY = ÚNICA ZONA CON SCROLL
   ============================================================ */
#rp-modal-rol .sa-modal-body{
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;

  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  display: block;
  padding: 0;
  background: var(--rm-surface);
}

/* Scrollbar */
#rp-modal-rol .sa-modal-body{
  scrollbar-width: thin;
  scrollbar-color: rgba(17,17,17,.22) transparent;
}

#rp-modal-rol .sa-modal-body::-webkit-scrollbar{
  width: 10px;
}

#rp-modal-rol .sa-modal-body::-webkit-scrollbar-thumb{
  background: rgba(17,17,17,.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

#rp-modal-rol .sa-modal-body::-webkit-scrollbar-track{
  background: transparent;
}

/* Form principal */
#rp-modal-rol .rp-rol-form{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 16px;
}

/* ============================================================
   GRID SUPERIOR
   ============================================================ */
#rp-modal-rol .sa-modal-grid{
  padding: 16px 16px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
}

#rp-modal-rol .sa-modal-grid > .sa-field{
  margin: 0;
  padding: 14px;
  min-width: 0;

  border: 1px solid rgba(17,17,17,.10);
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 12px 26px rgba(17,17,17,.06),
    0 2px 8px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.88);
}

/* Orden visual */
#rp-modal-rol .sa-modal-grid > .sa-field:nth-child(1){
  grid-column: 1;
  grid-row: 1;
}
#rp-modal-rol .sa-modal-grid > .sa-field:nth-child(2){
  grid-column: 1;
  grid-row: 2;
}
#rp-modal-rol .sa-modal-grid > .sa-field:nth-child(3){
  grid-column: 2;
  grid-row: 1;
}
#rp-modal-rol .sa-modal-grid > .sa-field:nth-child(4){
  grid-column: 2;
  grid-row: 2;
}

/* Labels / ayudas */
#rp-modal-rol .sa-field label{
  display: inline-block;
  margin: 0 0 8px;
  font-size: .92rem;
  font-weight: 700;
  color: rgba(17,17,17,.88);
  letter-spacing: -0.01em;
}

#rp-modal-rol .rp-field-hint,
#rp-modal-rol .sa-hint{
  display: block;
  margin: 8px 0 0;
  color: rgba(17,17,17,.54);
  line-height: 1.3;
  font-size: .82rem;
  font-weight: 400;
}

/* Inputs */
#rp-modal-rol input:not([type="checkbox"]):not([type="radio"]),
#rp-modal-rol textarea,
#rp-modal-rol select{
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;

  border-radius: 16px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: var(--rm-text);

  font-family: "Outfit", sans-serif;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.15;

  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-modal-rol input::placeholder,
#rp-modal-rol textarea::placeholder{
  color: rgba(17,17,17,.42);
}

#rp-modal-rol input:focus,
#rp-modal-rol textarea:focus,
#rp-modal-rol select:focus{
  border-color: rgba(0,0,0,.25);
  box-shadow:
    0 0 0 4px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-modal-rol input:disabled{
  background: #f4f5f7;
  color: rgba(17,17,17,.60);
  cursor: not-allowed;
}

/* ============================================================
   TARJETA: ACCESO POR SUCURSAL
   ============================================================ */
#rp-modal-rol .rp-rol-branches{
  margin: 16px;
  padding: 14px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  border: 1px solid rgba(17,17,17,.10);
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 12px 26px rgba(17,17,17,.06),
    0 2px 8px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.88);
}

#rp-modal-rol .rp-rol-branches-head{
  margin-bottom: 0;
}

#rp-modal-rol .sa-section-subtitle{
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(17,17,17,.88);
}

#rp-modal-rol .rp-rol-branches-sub{
  margin: 6px 0 0;
  color: var(--rm-muted);
  font-size: .92rem;
  line-height: 1.3;
}

/* Lista de sucursales */
#rp-modal-rol .rp-rol-branches-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
  align-content: start;
}

/* Card de sucursal */
#rp-modal-rol .rp-rol-branch-card{
  border: 1px solid var(--rm-border);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  box-shadow:
    0 8px 18px rgba(17,17,17,.05),
    inset 0 1px 0 rgba(255,255,255,.88);
  overflow: hidden;
}

#rp-modal-rol .rp-rol-branch-card:has(.rp-rol-branch-enabled:checked){
  border-color: rgba(17,17,17,.22);
  box-shadow:
    0 12px 22px rgba(17,17,17,.10),
    inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-modal-rol .rp-rol-branch-head{
  padding: 14px 14px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.90);
}

#rp-modal-rol .rp-rol-branch-title{
  font-weight: 950;
  color: var(--rm-text);
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: 1rem;
}

#rp-modal-rol .rp-rol-branch-meta{
  margin-top: 6px;
  color: var(--rm-muted);
  font-size: .92rem;
  line-height: 1.25;
}

/* Permisos */
#rp-modal-rol .rp-rol-perms[hidden]{
  display: none !important;
}

#rp-modal-rol .rp-rol-perms{
  padding: 12px 14px 14px;
  background: rgba(255,255,255,.55);
}

#rp-modal-rol .rp-rol-perms-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

#rp-modal-rol .rp-rol-perm-row{
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

#rp-modal-rol .rp-rol-perm-row > div:first-child{
  flex: 1 1 auto;
  min-width: 0;
}

#rp-modal-rol .rp-rol-perm-title{
  font-weight: 900;
  color: rgba(17,17,17,.88);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

#rp-modal-rol .rp-rol-perm-meta{
  margin-top: 4px;
  color: var(--rm-muted);
  font-size: .90rem;
  line-height: 1.25;
}

/* Switch */
#rp-modal-rol .rp-switch{
  --sw-w: 48px;
  --sw-h: 28px;
  --sw-pad: 3px;
  --sw-thumb: 22px;
  --sw-shift: 20px;

  position: relative;
  width: var(--sw-w);
  height: var(--sw-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto;
}

#rp-modal-rol .rp-switch-input{
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

#rp-modal-rol .rp-switch-track{
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(17,17,17,.18);
  box-shadow:
    0 10px 22px rgba(17,17,17,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
  position: relative;
  display: inline-block;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#rp-modal-rol .rp-switch-thumb{
  width: var(--sw-thumb);
  height: var(--sw-thumb);
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(17,17,17,.14);
  position: absolute;
  top: 50%;
  left: var(--sw-pad);
  transform: translateY(-50%) translateX(0);
  box-shadow:
    0 10px 18px rgba(17,17,17,.18),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#rp-modal-rol .rp-switch-input:checked + .rp-switch-track{
  background: var(--rm-red);
  border-color: rgba(0,0,0,.10);
  box-shadow:
    0 12px 22px rgba(255,0,42,.18),
    inset 0 2px 7px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
}

#rp-modal-rol .rp-switch-input:checked + .rp-switch-track .rp-switch-thumb{
  transform: translateY(-50%) translateX(var(--sw-shift));
  border-color: rgba(0,0,0,.12);
}

#rp-modal-rol .rp-switch-input:focus-visible + .rp-switch-track{
  outline: 2px solid var(--rm-focus);
  outline-offset: 2px;
}

#rp-modal-rol .rp-switch-input:disabled + .rp-switch-track{
  opacity: .55;
  cursor: not-allowed;
}

/* ============================================================
   FOOTER REAL DEL MODAL
   - Fuera del scroll
   - Igual al patrón del modal de producto
   ============================================================ */
#rp-modal-rol .rp-modal-actions{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-height: 82px;
  padding: 16px;
  border-top: 1px solid rgba(17,17,17,.10);
  background: var(--rm-surface);
  box-shadow: 0 -14px 30px rgba(17,17,17,.06);
}

#rp-modal-rol #rp-rol-msg{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

#rp-modal-rol .rp-modal-actions-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
}

#rp-modal-rol #rp-rol-cancel.sa-secondary-btn,
#rp-modal-rol #rp-rol-save.sa-primary-btn{
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 18px;
  font-family: "Outfit", sans-serif;
  font-size: .96rem;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}

#rp-modal-rol #rp-rol-cancel.sa-secondary-btn{
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: rgba(17,17,17,.86);
  box-shadow:
    0 10px 20px rgba(17,17,17,.06),
    0 2px 6px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-modal-rol #rp-rol-cancel.sa-secondary-btn:hover{
  border-color: rgba(17,17,17,.22);
  transform: translateY(-1px);
}

#rp-modal-rol #rp-rol-save.sa-primary-btn{
  color: #fff;
  background: var(--rm-red);
  border: 1.5px solid rgba(0,0,0,.10);
  box-shadow:
    0 14px 26px rgba(255,0,42,.22),
    0 2px 8px rgba(17,17,17,.06);
}

#rp-modal-rol #rp-rol-save.sa-primary-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.05);
  box-shadow:
    0 18px 30px rgba(255,0,42,.26),
    0 3px 10px rgba(17,17,17,.06);
}

#rp-modal-rol #rp-rol-save.sa-primary-btn:active,
#rp-modal-rol #rp-rol-cancel.sa-secondary-btn:active{
  transform: translateY(0);
}

#rp-modal-rol #rp-rol-save.sa-primary-btn:focus-visible,
#rp-modal-rol #rp-rol-cancel.sa-secondary-btn:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE
   - Tablet y móvil como bottom-sheet
   - Ancho completo
   - Sale desde abajo
   ============================================================ */

/* TABLET + MÓVIL */
@media (max-width: 1024px){
  #rp-modal-rol{
    padding: 0;
    align-items: flex-end;
    justify-content: stretch;
  }

  #rp-modal-rol .rp-modal-rol-card{
    width: 100%;
    max-width: 100%;
    height: min(94dvh, 980px);
    max-height: min(94dvh, 980px);

    border-radius: 24px 24px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;

    box-shadow:
      0 -18px 42px rgba(17,17,17,.18),
      0 -2px 10px rgba(17,17,17,.06);

    transform: translateY(34px);
  }

  #rp-modal-rol.is-open .rp-modal-rol-card{
    transform: translateY(0);
  }

  #rp-modal-rol .sa-modal-header{
    padding-top: 24px;
    position: relative;
  }

  #rp-modal-rol .sa-modal-header::before{
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: rgba(17,17,17,.18);
  }
}

/* TABLET MEDIANA */
@media (max-width: 900px){
  #rp-modal-rol .rp-rol-perms-grid{
    grid-template-columns: 1fr;
  }
}

/* TABLET CHICA / MÓVIL GRANDE */
@media (max-width: 720px){
  #rp-modal-rol .sa-modal-grid{
    grid-template-columns: 1fr;
  }

  #rp-modal-rol .sa-modal-grid > .sa-field:nth-child(1),
  #rp-modal-rol .sa-modal-grid > .sa-field:nth-child(2),
  #rp-modal-rol .sa-modal-grid > .sa-field:nth-child(3),
  #rp-modal-rol .sa-modal-grid > .sa-field:nth-child(4){
    grid-column: auto;
    grid-row: auto;
  }

  #rp-modal-rol .rp-modal-actions{
    flex-direction: column;
    align-items: stretch;
    min-height: unset;
  }

  #rp-modal-rol #rp-rol-msg{
    width: 100%;
  }

  #rp-modal-rol .rp-modal-actions-right{
    width: 100%;
    justify-content: stretch;
  }

  #rp-modal-rol .rp-modal-actions-right > *{
    flex: 1 1 0;
  }
}

/* MÓVIL */
@media (max-width: 600px){
  #rp-modal-rol .rp-modal-rol-card{
    height: 90dvh;
    max-height: 90dvh;
    border-radius: 22px 22px 0 0;
  }

  #rp-modal-rol .sa-modal-header h2{
    font-size: 1.42rem;
    line-height: 1.05;
  }

  #rp-modal-rol .sa-modal-close{
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    flex: 0 0 42px;
  }

  #rp-modal-rol .sa-modal-grid{
    padding: 14px 14px 0;
    gap: 14px;
  }

  #rp-modal-rol .sa-modal-grid > .sa-field,
  #rp-modal-rol .rp-rol-branches,
  #rp-modal-rol .rp-rol-branch-card,
  #rp-modal-rol .rp-rol-perm-row{
    border-radius: 16px;
  }

  #rp-modal-rol .sa-modal-grid > .sa-field{
    padding: 12px;
  }

  #rp-modal-rol .rp-rol-branches{
    margin: 14px;
    padding: 12px;
    gap: 14px;
  }

  #rp-modal-rol .rp-rol-branch-head,
  #rp-modal-rol .rp-rol-perms{
    padding-left: 12px;
    padding-right: 12px;
  }

  #rp-modal-rol .rp-rol-perm-row{
    padding: 11px;
  }

  #rp-modal-rol .rp-switch{
    --sw-w: 46px;
    --sw-h: 26px;
    --sw-thumb: 20px;
    --sw-shift: 18px;
  }

  #rp-modal-rol .rp-modal-actions{
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  }
}


/* ======================================================================
   ✅ SECCIÓN: ESTADO / HORARIOS (Estado y horarios)
   - Guardar (apagado → gris / editado → rojo)
   - Barra ABIERTO + “24 horas” en una sola línea
   - Desktop: Horario 1 | Horario 2 (2 columnas). Mobile: 1 columna
   - Switch Horario Activo: ROJO (igual a los otros)
   - Switch Abierto por día: ROJO
   - Textos Activo/Abierto: NEGRO + mismo tamaño/grosor
   - Móvil: Día + switch (1ra línea) / horas + 24h (2da línea en 1 línea)
   ====================================================================== */

#rp-view-estado-horarios{
  padding: 10px 30px 28px;
  font-family: "Outfit", sans-serif;

  --eh-text: #111;
  --eh-muted: rgba(17,17,17,.62);

  --eh-surface: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  --eh-shadow:
    0 12px 26px rgba(17,17,17,.10),
    0 2px 8px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.85);

  --eh-red: #ff002a;      /* rojo panel (switches) */
  --eh-red1: #e03131;     /* rojo botón (logout style) */
  --eh-red2: #ff4d4d;

  --eh-border: rgba(17,17,17,.10);
  --eh-focus: rgba(17,17,17,.35);
}

@media (max-width: 600px){
  #rp-view-estado-horarios{ padding: 8px 16px 20px; }
}

/* ✅ Wrapper sin tarjeta extra */
#rp-view-estado-horarios .rp-card-horarios{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* ============================================================
   Header + Guardar (siempre a la derecha en móvil/tablet/desktop)
   ============================================================ */
#rp-view-estado-horarios .rp-card-horarios .sa-card-header{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 14px;

  padding: 6px 0 14px;
  margin: 6px 0 14px;
  border-bottom: 1px solid var(--eh-border);
}

#rp-view-estado-horarios .rp-card-horarios .sa-card-title{
  margin: 0;
  color: var(--eh-text);
  font-weight: 850;
  letter-spacing: -0.02em;
  font-size: clamp(1.1rem, 1rem + .55vw, 1.5rem);
}

#rp-view-estado-horarios .rp-card-horarios .sa-card-meta{
  margin: 6px 0 0;
  color: var(--eh-muted);
  line-height: 1.25;
  font-size: .95rem;
}

#rp-view-estado-horarios .rp-card-header-actions{
  justify-self: end;
  align-self: start;
  display: grid;
  justify-items: end;
  gap: 8px;
}

#rp-view-estado-horarios #rp-horarios-msg{
  min-height: 0;
  padding: 0;
}

/* ✅ Botón Guardar (estilo “Cerrar sesión”) */
#rp-view-estado-horarios #rp-horarios-guardar-btn{
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;

  font-family: "Outfit", sans-serif;
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -0.01em;

  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

#rp-view-estado-horarios #rp-horarios-guardar-btn.rp-save-clean{
  background: #eceef2;
  color: rgba(17,17,17,.55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

#rp-view-estado-horarios #rp-horarios-guardar-btn.rp-save-dirty{
  background: linear-gradient(135deg, var(--eh-red1) 0%, var(--eh-red2) 100%);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}

#rp-view-estado-horarios #rp-horarios-guardar-btn.rp-save-dirty:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.30);
  filter: saturate(1.05);
}

#rp-view-estado-horarios #rp-horarios-guardar-btn.rp-save-dirty:active{
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,.20);
}

#rp-view-estado-horarios #rp-horarios-guardar-btn.rp-save-saving{
  background: #e7e9ee;
  color: rgba(17,17,17,.60);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

#rp-view-estado-horarios #rp-horarios-guardar-btn:focus-visible{
  outline: 2px solid var(--eh-focus);
  outline-offset: 2px;
}

#rp-view-estado-horarios #rp-horarios-guardar-btn:disabled{
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* ============================================================
   Barra de estado (ABIERTO / CERRADO / SIN SUCURSAL)
   - “ABIERTO  - 24 horas” en una sola línea (cuando cabe)
   ============================================================ */
#rp-view-estado-horarios .rp-estado-bar{
  border-radius: 18px;
  background: var(--eh-surface);
  border: 1.5px solid rgba(17,17,17,.08);
  box-shadow: var(--eh-shadow);
  padding: 12px 14px;
  margin: 0 0 14px;
  cursor: pointer;
  user-select: none;
}

#rp-view-estado-horarios .rp-estado-main{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

#rp-view-estado-horarios #rp-estado-circle{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #9ca3af; /* JS lo cambia */
  margin-top: 3px;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 18px rgba(17,17,17,.12);
}

#rp-view-estado-horarios .rp-estado-text{
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

#rp-view-estado-horarios .estado-bold{
  display: inline;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--eh-text);
  line-height: 1.12;
}

#rp-view-estado-horarios .estado-normal{
  display: inline;
  margin: 0;
  color: var(--eh-muted);
  line-height: 1.15;
  font-weight: 600;
  font-size: .92rem;
}

/* ============================================================
   Layout Horario 1 / Horario 2 (responsive)
   ============================================================ */
#rp-view-estado-horarios .rp-horarios-grupos{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  align-items: start;
}

@media (max-width: 899px){
  #rp-view-estado-horarios .rp-horarios-grupos{ grid-template-columns: 1fr; }
}

/* Card por grupo */
#rp-view-estado-horarios .rp-horario-grupo{
  border-radius: 18px;
  background: var(--eh-surface);
  border: 1.5px solid rgba(17,17,17,.08);
  box-shadow: var(--eh-shadow);
  overflow: hidden;
  min-width: 0;
}

#rp-view-estado-horarios .rp-horario-grupo.is-inactive{ opacity: .62; }

#rp-view-estado-horarios .rp-horario-grupo-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(17,17,17,.08);
  min-width: 0;
}

#rp-view-estado-horarios .rp-horario-grupo-h{
  margin: 0;
  color: var(--eh-text);
  font-weight: 850;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  line-height: 1.15;
}

#rp-view-estado-horarios .rp-horario-grupo-sub{
  margin: 6px 0 0;
  color: var(--eh-muted);
  font-size: .9rem;
  line-height: 1.2;
  font-weight: 550;
}

/* Toggle Activo/Inactivo del grupo */
#rp-view-estado-horarios .rp-horario-grupo-toggle{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* ✅ Texto Activo/Inactivo: negro, mismo tamaño/grosor que Abierto/Cerrado */
#rp-view-estado-horarios .rp-horario-grupo-toggle .rp-switch-label{
  color: var(--eh-text);
  font-weight: 650;
  font-size: .85rem;
  letter-spacing: -0.01em;
}

#rp-view-estado-horarios .rp-horario-grupo.is-inactive .rp-horario-grupo-toggle .rp-switch-label{
  color: rgba(17,17,17,.50);
}

#rp-view-estado-horarios .rp-horarios-lista-glass{ padding: 10px 12px 12px; }
#rp-view-estado-horarios .rp-horarios-lista{ display: grid; gap: 10px; }

/* ============================================================
   Fila por día (menos grueso)
   ============================================================ */
#rp-view-estado-horarios .rp-horario-row{
  display: grid;
  grid-template-columns: 120px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  min-width: 0;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  box-shadow:
    0 10px 22px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-view-estado-horarios .rp-horario-dia-label{
  font-weight: 700;
  color: var(--eh-text);
  letter-spacing: -0.01em;
  font-size: .95rem;
  line-height: 1.1;
}

#rp-view-estado-horarios .rp-horario-inputs{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap; /* desktop ok */
}

/* ✅ Inputs menos bold */
#rp-view-estado-horarios .rp-horario-input{
  appearance: none;
  border: 1.5px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.95);
  color: var(--eh-text);
  border-radius: 12px;
  min-height: 40px;
  padding: 8px 10px;

  font-family: "Outfit", sans-serif;
  font-weight: 600;         /* ✅ menos grueso */
  font-size: .92rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;

  outline: none;
  width: 140px;
  max-width: 100%;
}

#rp-view-estado-horarios .rp-horario-input:focus-visible{
  outline: 2px solid var(--eh-focus);
  outline-offset: 2px;
}

#rp-view-estado-horarios .rp-horario-separador{
  color: rgba(17,17,17,.45);
  font-weight: 600;
  font-size: .9rem;
}

/* ✅ Botón 24h: menos bold + centrado perfecto */
#rp-view-estado-horarios .rp-horario-24h{
  appearance: none;
  border: 1.5px solid rgba(17,17,17,.14);
  background: #fff;
  color: #111;

  width: 40px;
  height: 40px;
  border-radius: 999px;

  font-family: "Outfit", sans-serif;
  font-weight: 650;         /* ✅ menos grueso */
  font-size: .78rem;
  letter-spacing: -0.02em;
  line-height: 1;

  display: grid;
  place-items: center;
  padding: 0;

  cursor: pointer;
  box-shadow:
    0 10px 18px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.90);

  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

#rp-view-estado-horarios .rp-horario-24h:hover{
  border-color: rgba(17,17,17,.28);
  transform: translateY(-1px);
}
#rp-view-estado-horarios .rp-horario-24h:active{ transform: translateY(0); }
#rp-view-estado-horarios .rp-horario-24h:focus-visible{
  outline: 2px solid var(--eh-focus);
  outline-offset: 2px;
}

#rp-view-estado-horarios .rp-horario-24h.is-active{
  background: linear-gradient(135deg, var(--eh-red1) 0%, var(--eh-red2) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 12px 22px rgba(224,49,49,.18),
    inset 0 2px 7px rgba(0,0,0,.14);
}

/* ============================================================
   Switches (mismo look, mismo color rojo para TODOS)
   ============================================================ */
#rp-view-estado-horarios .rp-switch-control,
#rp-view-estado-horarios .rp-horario-abierto{
  --sw-w: 40px;
  --sw-h: 22px;
  --sw-pad: 2px;
  --sw-thumb: 18px;
  --sw-shift: 18px;
}

#rp-view-estado-horarios .rp-switch-control{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#rp-view-estado-horarios .rp-switch-input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#rp-view-estado-horarios .rp-switch-track{
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid rgba(17,17,17,.18);
  box-shadow:
    0 10px 22px rgba(17,17,17,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
  position: relative;
  display: inline-block;
  overflow: visible;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#rp-view-estado-horarios .rp-switch-thumb{
  width: var(--sw-thumb);
  height: var(--sw-thumb);
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(17,17,17,.14);
  position: absolute;
  top: 50%;
  left: var(--sw-pad);
  transform: translateY(-50%) translateX(0);
  box-shadow:
    0 10px 18px rgba(17,17,17,.18),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* ✅ ON = ROJO (Horario 1/2) */
#rp-view-estado-horarios .rp-horario-grupo-toggle .rp-switch-input:checked + .rp-switch-track{
  background: var(--eh-red);
  border-color: rgba(0,0,0,.10);
  box-shadow:
    0 12px 22px rgba(255,0,42,.18),
    inset 0 2px 7px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
}
#rp-view-estado-horarios .rp-horario-grupo-toggle .rp-switch-input:checked + .rp-switch-track .rp-switch-thumb{
  transform: translateY(-50%) translateX(var(--sw-shift));
  border-color: rgba(0,0,0,.12);
}

/* ✅ ON = ROJO (Día abierto) */
#rp-view-estado-horarios .rp-horario-abierto .rp-switch-input:checked + .rp-switch-track{
  background: var(--eh-red);
  border-color: rgba(0,0,0,.10);
  box-shadow:
    0 12px 22px rgba(255,0,42,.18),
    inset 0 2px 7px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.18);
}
#rp-view-estado-horarios .rp-horario-abierto .rp-switch-input:checked + .rp-switch-track .rp-switch-thumb{
  transform: translateY(-50%) translateX(var(--sw-shift));
}

/* ✅ Label Abierto/Cerrado: NEGRO (abierto NO rojo) */
#rp-view-estado-horarios .rp-horario-abierto{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  cursor: pointer;
  justify-self: end;
  white-space: nowrap;
}

#rp-view-estado-horarios .rp-horario-abierto .rp-switch-label{
  font-weight: 650;
  font-size: .85rem;
  letter-spacing: -0.01em;
  color: rgba(17,17,17,.55); /* cerrado (default) */
}

/* Abierto = negro (no rojo) */
#rp-view-estado-horarios .rp-horario-abierto .rp-switch-input:checked ~ .rp-switch-label{
  color: var(--eh-text);
}

/* Focus */
#rp-view-estado-horarios .rp-switch-input:focus-visible + .rp-switch-track{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

#rp-view-estado-horarios .rp-horario-grupo :disabled{ cursor: not-allowed; }
#rp-view-estado-horarios .rp-horario-grupo :disabled + .rp-switch-track{ opacity: .55; }

/* ============================================================
   ✅ MÓVIL: layout exacto solicitado
   - Línea 1: Día (izq) + Switch (der)
   - Línea 2: Hora inicio + hora fin + 24h (en UNA SOLA LÍNEA)
   ============================================================ */
@media (max-width: 560px){
  #rp-view-estado-horarios .rp-horario-row{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "day toggle"
      "inputs inputs";
    align-items: center;
    gap: 10px;
    padding: 12px;
  }

  #rp-view-estado-horarios .rp-horario-dia-label{ grid-area: day; }
  #rp-view-estado-horarios .rp-horario-abierto{
    grid-area: toggle;
    justify-self: end;
  }

  /* Segunda línea siempre en una línea */
  #rp-view-estado-horarios .rp-horario-inputs{
    grid-area: inputs;
    flex-wrap: nowrap;           /* ✅ NO wrap */
    gap: 8px;
    min-width: 0;
  }

  /* Inputs se encogen para que quepan + 24h */
  #rp-view-estado-horarios .rp-horario-input{
    width: auto;
    flex: 1 1 0;
    min-width: 92px;
    max-width: 125px;
    padding: 7px 8px;
    min-height: 38px;
    font-size: .90rem;
  }

  #rp-view-estado-horarios .rp-horario-separador{
    flex: 0 0 auto;
    font-size: .88rem;
    margin-inline: 2px;
  }

  #rp-view-estado-horarios .rp-horario-24h{
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    font-size: .74rem;
    font-weight: 650;
  }

  /* ✅ Opcional: ocultar icono reloj en móviles (Chrome/Safari) */
  #rp-view-estado-horarios .rp-horario-input::-webkit-calendar-picker-indicator{
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
  }
}

/* Ultra pequeño */
@media (max-width: 380px){
  #rp-view-estado-horarios .rp-switch-control,
  #rp-view-estado-horarios .rp-horario-abierto{
    --sw-w: 36px;
    --sw-h: 20px;
    --sw-thumb: 16px;
    --sw-shift: 16px;
  }

  #rp-view-estado-horarios .rp-horario-input{
    min-width: 86px;
    max-width: 118px;
  }
}



/* =========================================================
   CONFIGURACIÃON (rp-view-configuracion) — Pro, Responsive, App-like
   Scope: SOLO afecta #rp-view-configuracion
   ========================================================= */

#rp-view-configuracion{
  font-family: "Outfit", sans-serif;

  --cfg-text: #111;
  --cfg-muted: rgba(17,17,17,.62);
  --cfg-border: rgba(17,17,17,.10);

  --cfg-surface: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  --cfg-shadow:
    0 12px 26px rgba(17,17,17,.10),
    0 2px 8px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.85);

  --cfg-radius: 18px;
  --cfg-radius-sm: 16px;

  --cfg-red1: #e03131;
  --cfg-red2: #ff4d4d;
  --cfg-sw-on: #ff002a;

  --cfg-focus: rgba(17,17,17,.35);

  --cfg-media-preview-h: clamp(230px, 20vw, 300px);

  --cfg-ico-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 6V4h8v2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7 6l1 16h8l1-16'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

#rp-view-configuracion[hidden]{ display:none !important; }

/* =========================
   View wrapper
   ========================= */
#rp-view-configuracion{
  padding: 10px 30px 28px;
  width: 100%;
  margin: 0;
  display: grid;
  gap: 14px;
  align-content: start;
  grid-template-columns: 1fr;
}

@media (max-width: 600px){
  #rp-view-configuracion{ padding: 8px 16px 20px; }
}

@media (min-width: 900px){
  #rp-view-configuracion{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  #rp-view-configuracion section[data-section-id="cfg-sucursal"]{
    grid-column: 1 / -1;
  }
}

/* =========================
   Orden visual de cards
   ========================= */
#rp-view-configuracion section[data-section-id="cfg-banner-principal"]{ order: 10; }
#rp-view-configuracion section[data-section-id="cfg-popup"]{ order: 11; }
#rp-view-configuracion section[data-section-id="cfg-redes"]{ order: 12; }

/* =========================
   Cards
   ========================= */
#rp-view-configuracion .rp-card-config{
  border-radius: var(--cfg-radius);
  background: var(--cfg-surface);
  border: 1.5px solid rgba(17,17,17,.08);
  box-shadow: var(--cfg-shadow);
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#rp-view-configuracion .rp-card-config:hover{
  border-color: rgba(17,17,17,.18);
  box-shadow:
    0 18px 40px rgba(17,17,17,.14),
    0 3px 10px rgba(17,17,17,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
}

/* =========================
   Header
   ========================= */
#rp-view-configuracion .sa-card-header{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(17,17,17,.08);
}

#rp-view-configuracion .sa-card-title{
  margin: 0;
  color: var(--cfg-text);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.10rem, 1.02rem + .45vw, 1.45rem);
  line-height: 1.15;
}

#rp-view-configuracion .sa-card-meta{
  margin: 6px 0 0;
  color: var(--cfg-muted);
  line-height: 1.28;
  font-size: .95rem;
  max-width: 72ch;
}

#rp-view-configuracion .rp-card-header-actions{
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}

#rp-view-configuracion .rp-card-save-btn{ order: -1; }

#rp-view-configuracion .rp-pedidos-msg{
  max-width: 240px;
  text-align: right;
}

@media (max-width: 420px){
  #rp-view-configuracion .rp-pedidos-msg{ max-width: 200px; }
}

/* =========================
   Botón Guardar
   ========================= */
#rp-view-configuracion .rp-card-save-btn{
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  min-height: 44px;
  font-size: .85rem;
  font-weight: 700;
  font-family: "Outfit", sans-serif;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space: nowrap;
}

#rp-view-configuracion .rp-card-save-btn.rp-save-clean,
#rp-view-configuracion .rp-card-save-btn:disabled{
  background: rgba(17,17,17,.06);
  color: rgba(17,17,17,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  cursor: not-allowed;
  transform: none;
}

#rp-view-configuracion .rp-card-save-btn.rp-save-dirty{
  background: linear-gradient(135deg, var(--cfg-red1) 0%, var(--cfg-red2) 100%);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}

#rp-view-configuracion .rp-card-save-btn.rp-save-dirty:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.30);
}

#rp-view-configuracion .rp-card-save-btn.rp-save-dirty:active{
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,.20);
}

#rp-view-configuracion .rp-card-save-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
}

#rp-view-configuracion .rp-card-save-btn.rp-save-saving{
  background: linear-gradient(135deg, var(--cfg-red1) 0%, var(--cfg-red2) 100%);
  color: #fff;
  opacity: .75;
  cursor: not-allowed;
  transform: none;
}

/* =========================
   Body base
   ========================= */
#rp-view-configuracion .rp-config-body{
  padding: 14px;
  display: grid;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

#rp-view-configuracion .sa-field{ min-width: 0; }

#rp-view-configuracion .sa-field > label,
#rp-view-configuracion .pd-label{
  display: block;
  margin: 0 0 6px;
  font-size: .78rem;
  font-weight: 900;
  color: rgba(17,17,17,.72);
}

#rp-view-configuracion .sa-hint{
  color: rgba(17,17,17,.58);
  font-size: .86rem;
  line-height: 1.25;
}

#rp-view-configuracion code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .90em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(17,17,17,.06);
  border: 1px solid rgba(17,17,17,.08);
}

/* =========================
   Inputs
   ========================= */
#rp-view-configuracion .sa-input{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.88);
  color: var(--cfg-text);
  font-size: .95rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90);
  min-width: 0;
}

#rp-view-configuracion .sa-input:focus{
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 0 0 4px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.90);
}

#rp-view-configuracion textarea.sa-input{
  border-radius: var(--cfg-radius-sm);
  padding: 12px 12px;
  min-height: 140px;
  resize: vertical;
}

#rp-view-configuracion select.sa-input{ cursor: pointer; }

#rp-view-configuracion :is(#cfg-sucursal-url, .rp-qr-input){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   Sucursal
   ========================= */
#rp-view-configuracion .rp-cfg-sucursal-grid{
  display: grid;
  gap: 14px;
  align-items: start;
  min-width: 0;
}

@media (min-width: 1024px){
  #rp-view-configuracion .rp-cfg-sucursal-grid{
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  }
}

#rp-view-configuracion .rp-cfg-sucursal-left,
#rp-view-configuracion .rp-cfg-sucursal-right{
  min-width: 0;
}

#rp-view-configuracion .rp-qr-section{
  min-width: 0;
}

#rp-view-configuracion .rp-qr-grid{
  display: grid;
  gap: 14px;
  min-width: 0;
}

@media (min-width: 768px){
  #rp-view-configuracion .rp-qr-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

#rp-view-configuracion .rp-qr-card{
  border-radius: var(--cfg-radius);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 10px 18px rgba(17,17,17,.05);
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#rp-view-configuracion .rp-qr-card-head{
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(17,17,17,.08);
}

#rp-view-configuracion .rp-qr-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(17,17,17,.88);
  font-size: 1rem;
  line-height: 1.12;
}

#rp-view-configuracion .rp-qr-sub{
  margin: 6px 0 0;
  color: rgba(17,17,17,.60);
  font-size: .90rem;
  line-height: 1.25;
}

#rp-view-configuracion .rp-qr-card-body{
  padding: 12px;
  display: grid;
  gap: 14px;
  min-width: 0;
  align-content: start;
  flex: 1;
}

#rp-view-configuracion .rp-qr-fields{
  display: grid;
  gap: 8px;
  min-width: 0;
}

#rp-view-configuracion .rp-qr-label{
  display: block;
  margin: 0 0 6px;
  font-size: .78rem;
  font-weight: 900;
  color: rgba(17,17,17,.72);
}

#rp-view-configuracion .rp-qr-row{
  display: grid;
  gap: 14px;
  align-items: center;
  justify-items: center;
  min-width: 0;
}

#rp-view-configuracion .rp-qr-canvas-wrap{
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  border-radius: var(--cfg-radius);
  border: 1px solid rgba(17,17,17,.10);
  background: #fff;
  box-shadow: 0 10px 18px rgba(17,17,17,.06);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  margin-inline: auto;
}

#rp-view-configuracion .rp-qr-canvas-wrap canvas{
  width: 100%;
  height: 100%;
  display: block;
}

#rp-view-configuracion .rp-qr-empty{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  text-align: center;
  color: rgba(17,17,17,.58);
  background: rgba(255,255,255,.88);
  opacity: 0;
  pointer-events: none;
}

#rp-view-configuracion .rp-qr-card.is-disabled .rp-qr-empty{ opacity: 1; }
#rp-view-configuracion .rp-qr-card.is-disabled canvas{ opacity: .12; filter: grayscale(1); }

/* Móvil + tablet:
   QR arriba centrado y botones debajo */
#rp-view-configuracion .rp-qr-actions{
  display: grid;
  gap: 10px;
  justify-items: stretch;
  align-content: center;
  align-self: center;
  min-width: 0;
  width: min(100%, 220px);
  margin-inline: auto;
}

#rp-view-configuracion .rp-qr-btn{
  width: 100%;
  min-height: 44px;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  font-size: .86rem;
  border: 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease;
  background: linear-gradient(135deg, var(--cfg-red1) 0%, var(--cfg-red2) 100%);
  color: #fff;
  box-shadow: 0 10px 18px rgba(224,49,49,.18);
}

#rp-view-configuracion .rp-qr-btn:hover{ transform: translateY(-1px); }
#rp-view-configuracion .rp-qr-btn:active{ transform: translateY(0); }

#rp-view-configuracion .rp-qr-btn--outline{
  background: transparent;
  color: var(--cfg-sw-on);
  border: 1.5px solid rgba(255,0,42,.35);
  box-shadow: none;
}

#rp-view-configuracion .rp-qr-btn--outline:hover{
  background: rgba(255,0,42,.06);
}

/* Desktop:
   dentro de cada card QR a la izquierda y botones a la derecha */
@media (min-width: 1024px){
  #rp-view-configuracion .rp-qr-row{
    grid-template-columns: minmax(220px, 240px) minmax(180px, 220px);
    justify-content: center;
    justify-items: stretch;
  }

  #rp-view-configuracion .rp-qr-canvas-wrap{
    margin-inline: 0;
  }

  #rp-view-configuracion .rp-qr-actions{
    width: clamp(180px, 18vw, 220px);
    margin-inline: 0;
  }
}

/* Teléfonos:
   una sola tarjeta por fila y QR bien centrado */
@media (max-width: 767px){
  #rp-view-configuracion .rp-qr-grid{
    grid-template-columns: 1fr;
  }

  #rp-view-configuracion .rp-qr-row{
    justify-items: center;
  }

  #rp-view-configuracion .rp-qr-canvas-wrap{
    margin-inline: auto;
  }
}

/* =========================
   Upload
   ========================= */
#rp-view-configuracion .sa-file-upload{ position: relative; }

#rp-view-configuracion .sa-file-upload-input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#rp-view-configuracion .sa-file-upload-label{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 18px rgba(17,17,17,.06);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#rp-view-configuracion .sa-file-upload-label:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.18);
  box-shadow: 0 14px 24px rgba(17,17,17,.08);
}

#rp-view-configuracion .sa-file-upload-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--cfg-sw-on);
  border: 1px solid rgba(255,0,42,.22);
  flex: 0 0 auto;
  box-shadow: 0 10px 18px rgba(255,0,42,.16);
}

#rp-view-configuracion .sa-file-upload-icon img{
  width: 22px;
  height: 22px;
  display: block;
  filter: brightness(0) invert(1);
}

#rp-view-configuracion .sa-file-upload-title{
  display: block;
  font-weight: 900;
  color: rgba(17,17,17,.82);
  line-height: 1.1;
}

#rp-view-configuracion .sa-file-upload-filename{
  display: block;
  margin-top: 4px;
  color: rgba(17,17,17,.60);
  font-size: .88rem;
  line-height: 1.15;
}

/* =========================
   FIX preview
   ========================= */
#rp-view-configuracion .rp-config-img-preview img[hidden]{
  display: none !important;
}

/* =========================
   Preview base
   ========================= */
#rp-view-configuracion .rp-config-img-preview{
  width: 100%;
  height: var(--cfg-media-preview-h);
  border-radius: var(--cfg-radius);
  border: 1px solid rgba(17,17,17,.10);
  background: #fff;
  box-shadow: 0 10px 18px rgba(17,17,17,.06);
  overflow: hidden;
  display: grid;
  place-items: center;
  min-width: 0;
}

#rp-view-configuracion :is(#cfg-banner-mobile-preview-wrap, #cfg-popup-preview-wrap){
  aspect-ratio: auto !important;
  height: var(--cfg-media-preview-h) !important;
}

#rp-view-configuracion .rp-config-img-preview img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

#rp-view-configuracion .rp-config-img-placeholder{
  color: rgba(17,17,17,.55);
  font-size: .92rem;
  padding: 14px;
  text-align: center;
}

/* =========================
   Basurero rojo overlay
   ========================= */
#rp-view-configuracion :is(
  #cfg-banner-mobile-remove,
  #cfg-popup-remove,
  .rp-wa-remove
){
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.10);
  background: var(--cfg-sw-on);
  color: #fff;
  box-shadow:
    0 12px 22px rgba(255,0,42,.18),
    0 2px 6px rgba(17,17,17,.06);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
  text-indent: -9999px;
  position: relative;
}

#rp-view-configuracion :is(
  #cfg-banner-mobile-remove,
  #cfg-popup-remove,
  .rp-wa-remove
)::before{
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--cfg-ico-trash) center/contain no-repeat;
          mask: var(--cfg-ico-trash) center/contain no-repeat;
  position: absolute;
  inset: 0;
  margin: auto;
}

#rp-view-configuracion :is(
  #cfg-banner-mobile-remove,
  #cfg-popup-remove,
  .rp-wa-remove
):hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

#rp-view-configuracion :is(
  #cfg-banner-mobile-remove,
  #cfg-popup-remove,
  .rp-wa-remove
):active{
  transform: translateY(0);
}

#rp-view-configuracion :is(
  #cfg-banner-mobile-remove,
  #cfg-popup-remove,
  .rp-wa-remove
):focus-visible{
  outline: 2px solid rgba(0,0,0,.40);
  outline-offset: 2px;
}

#rp-view-configuracion .rp-config-img-actions{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 5;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

#rp-view-configuracion .rp-config-img-actions > *{
  pointer-events: auto;
}

#rp-view-configuracion
  :is(#cfg-banner-mobile-preview-wrap, #cfg-popup-preview-wrap):not(.has-img)
  + .rp-config-img-actions{
  display: none;
}

/* =========================
   Banner principal
   ========================= */
#rp-view-configuracion .rp-config-banner-grid,
#rp-view-configuracion .rp-config-popup-grid{
  display: grid;
  gap: 14px;
  align-items: start;
  min-width: 0;
}

@media (min-width: 1200px){
  #rp-view-configuracion .rp-config-banner-grid,
  #rp-view-configuracion .rp-config-popup-grid{
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  }
}

#rp-view-configuracion .rp-config-banner-left,
#rp-view-configuracion .rp-config-popup-left{
  display: grid;
  gap: 12px;
  min-width: 0;
}

#rp-view-configuracion .rp-config-banner-right,
#rp-view-configuracion .rp-config-popup-right{
  display: grid;
  gap: 12px;
  min-width: 0;
  position: relative;
}

#rp-view-configuracion .rp-field-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 10px;
}

/* =========================
   País/Moneda + Impresión
   ========================= */
#rp-view-configuracion .rp-config-two{
  display: grid;
  gap: 14px;
  min-width: 0;
}

@media (min-width: 768px){
  #rp-view-configuracion .rp-config-two{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#rp-view-configuracion .rp-print-grid{
  display: grid;
  gap: 14px;
  min-width: 0;
}

@media (min-width: 768px){
  #rp-view-configuracion .rp-print-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

#rp-view-configuracion .rp-print-actions{
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}

#rp-view-configuracion .rp-print-actions--qz{
  gap: 10px;
  flex-wrap: wrap;
}

#rp-view-configuracion .rp-print-ops-grid{
  display: grid;
  gap: 12px;
}

#rp-view-configuracion .rp-print-qz-box{
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 18px rgba(17,17,17,.04);
}

#rp-view-configuracion .rp-print-qz-head{
  display: grid;
  gap: 4px;
}

#rp-view-configuracion .rp-print-qz-head strong{
  font-size: .98rem;
  font-weight: 900;
  color: rgba(17,17,17,.86);
}

#rp-view-configuracion .rp-print-qz-head span{
  color: rgba(17,17,17,.62);
  font-size: .89rem;
  line-height: 1.35;
}

#rp-view-configuracion .rp-print-grid--qz{
  margin-top: -2px;
}

#rp-view-configuracion .rp-print-switch-card{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(255,255,255,.74);
  box-shadow: 0 10px 18px rgba(17,17,17,.05);
}

#rp-view-configuracion .rp-print-switch-copy{
  display: grid;
  gap: 4px;
  min-width: 0;
}

#rp-view-configuracion .rp-print-switch-copy strong{
  font-size: .95rem;
  font-weight: 900;
  color: rgba(17,17,17,.86);
  line-height: 1.15;
}

#rp-view-configuracion .rp-print-switch-copy span{
  color: rgba(17,17,17,.62);
  font-size: .88rem;
  line-height: 1.32;
}

#rp-view-configuracion .rp-print-switch-card .rp-switch-control{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

#rp-view-configuracion .rp-print-switch-card .rp-switch-input{
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

#rp-view-configuracion .rp-print-switch-card .rp-switch-track{
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 62px;
  height: 34px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(17,17,17,.14);
  border: 1px solid rgba(17,17,17,.10);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#rp-view-configuracion .rp-print-switch-card .rp-switch-thumb{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(17,17,17,.18);
  transform: translateX(0);
  transition: transform .18s ease;
}

#rp-view-configuracion .rp-print-switch-card .rp-switch-input:checked + .rp-switch-track{
  background: linear-gradient(135deg, var(--cfg-red1) 0%, var(--cfg-red2) 100%);
  border-color: rgba(255,0,42,.28);
  box-shadow: 0 8px 18px rgba(255,0,42,.18);
}

#rp-view-configuracion .rp-print-switch-card .rp-switch-input:checked + .rp-switch-track .rp-switch-thumb{
  transform: translateX(28px);
}

#rp-view-configuracion .rp-print-switch-card .rp-switch-input:focus-visible + .rp-switch-track{
  outline: 2px solid rgba(17,17,17,.36);
  outline-offset: 2px;
}

@media (max-width: 640px){
  #rp-view-configuracion .rp-print-switch-card{
    grid-template-columns: 1fr;
    justify-items: start;
  }
}


/* =========================
   WhatsApp
   ========================= */
#rp-view-configuracion .rp-wa-list{
  display: grid;
  gap: 10px;
  min-width: 0;
}

#rp-view-configuracion .rp-wa-row{
  display: grid;
  grid-template-columns: minmax(140px, 210px) minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

@media (max-width: 520px){
  #rp-view-configuracion .rp-wa-row{
    grid-template-columns: 1fr 1fr 44px;
  }
}

#rp-view-configuracion .rp-wa-row :is(select, input){
  min-width: 0;
}

#rp-view-configuracion .rp-wa-add-row{
  margin-top: 10px;
}

@media (max-width: 520px){
  #rp-view-configuracion .rp-wa-add-row .sa-secondary-btn{
    width: 100%;
  }
}

/* =========================
   Pop-up
   ========================= */
#rp-view-configuracion .rp-config-switch-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--cfg-radius);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 10px 18px rgba(17,17,17,.05);
  cursor: pointer;
  user-select: none;
}

#rp-view-configuracion .rp-config-switch-title{
  display: block;
  font-weight: 900;
  color: rgba(17,17,17,.86);
  line-height: 1.1;
}

#rp-view-configuracion .rp-config-switch-desc{
  display: block;
  margin-top: 4px;
  color: rgba(17,17,17,.60);
  font-size: .88rem;
  line-height: 1.15;
}

#rp-view-configuracion .rp-config-switch{
  --sw-w: 46px;
  --sw-h: 26px;
  --sw-pad: 3px;
  --sw-thumb: 20px;
  --sw-shift: 20px;

  --sw-on: var(--cfg-sw-on);
  --sw-off-bg: #ffffff;
  --sw-off-border: rgba(17,17,17,.18);
  --sw-thumb-bg: #ffffff;
  --sw-thumb-border: rgba(17,17,17,.14);
  --sw-focus: rgba(17,17,17,.45);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#rp-view-configuracion .rp-config-switch .rp-switch-input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#rp-view-configuracion .rp-config-switch .rp-switch-track{
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;
  background: var(--sw-off-bg);
  border: 2px solid var(--sw-off-border);
  box-shadow:
    0 10px 22px rgba(17,17,17,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
  position: relative;
  display: inline-block;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#rp-view-configuracion .rp-config-switch .rp-switch-thumb{
  width: var(--sw-thumb);
  height: var(--sw-thumb);
  border-radius: 999px;
  background: var(--sw-thumb-bg);
  border: 1px solid var(--sw-thumb-border);
  position: absolute;
  top: 50%;
  left: var(--sw-pad);
  transform: translateY(-50%) translateX(0);
  box-shadow:
    0 10px 18px rgba(17,17,17,.18),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#rp-view-configuracion .rp-config-switch .rp-switch-input:checked + .rp-switch-track{
  background: var(--sw-on);
  border-color: rgba(0,0,0,.10);
  box-shadow:
    0 12px 22px rgba(255,0,42,.18),
    inset 0 2px 7px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.18);
}

#rp-view-configuracion .rp-config-switch .rp-switch-input:checked + .rp-switch-track .rp-switch-thumb{
  transform: translateY(-50%) translateX(var(--sw-shift));
  border-color: rgba(0,0,0,.12);
}

#rp-view-configuracion .rp-config-switch .rp-switch-input:focus-visible + .rp-switch-track{
  outline: 2px solid var(--sw-focus);
  outline-offset: 2px;
}

@media (max-width: 640px){
  #rp-view-configuracion .rp-config-switch-row{
    align-items: flex-start;
  }
}

/* =========================
   Alertas de pedidos
   ========================= */
#rp-view-configuracion [data-section-id="cfg-alertas-pedidos"] .rp-alerta-switch-wrap{
  margin-bottom: 14px;
}

#rp-view-configuracion [data-section-id="cfg-alertas-pedidos"] .rp-alerta-actions{
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}

#rp-view-configuracion [data-section-id="cfg-alertas-pedidos"] .rp-alerta-preview-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 0, 42, .14);
  background: linear-gradient(180deg, #ff1744 0%, #ff002a 100%);
  color: #fff;
  box-shadow:
    0 14px 26px rgba(255, 0, 42, .18),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease,
    opacity .16s ease;
}

#rp-view-configuracion [data-section-id="cfg-alertas-pedidos"] .rp-alerta-preview-btn .rp-alerta-preview-icon{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#rp-view-configuracion [data-section-id="cfg-alertas-pedidos"] .rp-alerta-preview-btn .rp-alerta-preview-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

#rp-view-configuracion [data-section-id="cfg-alertas-pedidos"] .rp-alerta-preview-btn .rp-alerta-preview-label{
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.01em;
}

@media (hover: hover) and (pointer: fine){
  #rp-view-configuracion [data-section-id="cfg-alertas-pedidos"] .rp-alerta-preview-btn:hover{
    transform: translateY(-1px);
    box-shadow:
      0 18px 30px rgba(255, 0, 42, .22),
      inset 0 1px 0 rgba(255,255,255,.20);
    filter: brightness(1.02);
  }
}

#rp-view-configuracion [data-section-id="cfg-alertas-pedidos"] .rp-alerta-preview-btn:active{
  transform: translateY(0);
}

#rp-view-configuracion [data-section-id="cfg-alertas-pedidos"] .rp-alerta-preview-btn:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

#rp-view-configuracion [data-section-id="cfg-alertas-pedidos"] .rp-alerta-preview-btn[disabled]{
  opacity: .56;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.08);
}

#rp-view-configuracion [data-section-id="cfg-alertas-pedidos"].is-alert-disabled .rp-config-two{
  opacity: .56;
}

#rp-view-configuracion [data-section-id="cfg-alertas-pedidos"].is-alert-disabled .rp-alerta-actions{
  opacity: .74;
}

@media (max-width: 520px){
  #rp-view-configuracion [data-section-id="cfg-alertas-pedidos"] .rp-alerta-preview-btn{
    width: 100%;
  }
}

/* ============================================================
   ✅ MODALES PRO: DELIVERY ZONES + UBICACIÓN MAPA
   - Delivery en tablet/móvil full width
   - Reglas directas sin “tarjeta dentro de tarjeta”
   - Reglas en 2 columnas
   - Ubicación con orden correcto y alto limpio en tablet
   ============================================================ */

/* ------------------------------
   Base compartida
   ------------------------------ */
#rp-modal-delivery-zones[aria-hidden="true"],
#rp-modal-ubicacion-map[aria-hidden="true"]{
  display: none;
}

#rp-modal-delivery-zones,
#rp-modal-ubicacion-map{
  position: fixed;
  inset: 0;
  z-index: 999;
  padding: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Outfit", sans-serif;

  --rp-surface: #ffffff;
  --rp-text: rgba(17,17,17,.90);
  --rp-muted: rgba(17,17,17,.62);
  --rp-border: rgba(17,17,17,.10);
  --rp-sw-on: #ff002a;

  --rp-delivery-map-h: clamp(360px, 58vh, 620px);
  --rp-location-map-h: clamp(360px, 60vh, 620px);
  --rp-delivery-panel-h: calc(var(--rp-delivery-map-h) + 98px);
}

/* ------------------------------
   Card principal
   ------------------------------ */
#rp-modal-delivery-zones .rp-modal-delivery-zones-card,
#rp-modal-ubicacion-map .rp-modal-ubicacion-map-card{
  max-height: calc(100dvh - 28px);

  display: flex;
  flex-direction: column;
  overflow: hidden;

  background: var(--rp-surface);
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);

  transform: translateY(10px) scale(.99);
  transition: transform .18s ease;
}

#rp-modal-delivery-zones .rp-modal-delivery-zones-card{
  width: min(1120px, calc(100vw - 28px));
}

#rp-modal-ubicacion-map .rp-modal-ubicacion-map-card{
  width: min(1040px, calc(100vw - 28px));
}

#rp-modal-delivery-zones.is-open .rp-modal-delivery-zones-card,
#rp-modal-ubicacion-map.is-open .rp-modal-ubicacion-map-card{
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  #rp-modal-delivery-zones .rp-modal-delivery-zones-card,
  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-card{
    transition: none;
    transform: none;
  }
}

/* ------------------------------
   Header compartido
   ------------------------------ */
#rp-modal-delivery-zones .sa-modal-header,
#rp-modal-ubicacion-map .sa-modal-header{
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,17,17,.10);
  background: var(--rp-surface);
}

#rp-modal-delivery-zones .sa-modal-head-copy,
#rp-modal-ubicacion-map .sa-modal-head-copy{
  min-width: 0;
}

#rp-modal-delivery-zones .sa-modal-header h2,
#rp-modal-ubicacion-map .sa-modal-header h2{
  margin: 0;
  font-size: clamp(1.35rem, 1.05rem + 0.8vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rp-text);
}

#rp-modal-delivery-zones .rp-delivery-zones-subtitle,
#rp-modal-ubicacion-map .rp-modal-ubicacion-map-subtitle{
  margin: 8px 0 0;
  color: var(--rp-muted);
  line-height: 1.3;
  font-size: .92rem;
  font-weight: 500;
}

#rp-modal-delivery-zones .sa-modal-close,
#rp-modal-ubicacion-map .sa-modal-close{
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1 / 1;
  flex: 0 0 44px;
  align-self: flex-start;

  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.14);
  background: #fff;

  box-shadow:
    0 12px 22px rgba(17,17,17,.10),
    0 2px 6px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.92);

  appearance: none;
  cursor: pointer;
  position: relative;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

#rp-modal-delivery-zones .sa-modal-close::before,
#rp-modal-ubicacion-map .sa-modal-close::before{
  content: "\00D7";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: rgba(17,17,17,.88);
}

#rp-modal-delivery-zones .sa-modal-close:hover,
#rp-modal-ubicacion-map .sa-modal-close:hover{
  border-color: rgba(17,17,17,.28);
}

#rp-modal-delivery-zones .sa-modal-close:focus-visible,
#rp-modal-ubicacion-map .sa-modal-close:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

/* ------------------------------
   Body compartido
   ------------------------------ */
#rp-modal-delivery-zones .sa-modal-body,
#rp-modal-ubicacion-map .sa-modal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: var(--rp-surface);
}

#rp-modal-delivery-zones .sa-hint,
#rp-modal-ubicacion-map .sa-hint{
  display: block;
  margin: 0;
  color: rgba(17,17,17,.54);
  line-height: 1.3;
  font-size: .82rem;
  font-weight: 400;
}

/* ------------------------------
   Cards internas compartidas
   ------------------------------ */
#rp-modal-delivery-zones .rp-delivery-zones-panel-card,
#rp-modal-ubicacion-map .rp-modal-ubicacion-map-panel-card{
  width: 100%;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 12px 26px rgba(17,17,17,.06),
    0 2px 8px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.88);
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-head,
#rp-modal-ubicacion-map .rp-modal-ubicacion-map-panel-head{
  margin-bottom: 12px;
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-title,
#rp-modal-ubicacion-map .rp-modal-ubicacion-map-panel-title{
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: rgba(17,17,17,.88);
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-sub,
#rp-modal-ubicacion-map .rp-modal-ubicacion-map-panel-sub{
  margin: 6px 0 0;
  color: rgba(17,17,17,.58);
  font-size: .84rem;
  line-height: 1.32;
}

/* ------------------------------
   Delivery zones
   ------------------------------ */
#rp-modal-delivery-zones .rp-modal-delivery-zones-body{
  height: 100%;
}

#rp-modal-delivery-zones .rp-delivery-zones-grid{
  height: 100%;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  padding: 16px;
  display: grid;
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

#rp-modal-delivery-zones .rp-delivery-zones-col{
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-card{
  min-height: 0;
  overflow: hidden;
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-card--legend{
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  row-gap: 12px;
  height: var(--rp-delivery-panel-h);
  min-height: var(--rp-delivery-panel-h);
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-card--map{
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 12px;
  height: var(--rp-delivery-panel-h);
  min-height: var(--rp-delivery-panel-h);
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-card--legend > .rp-delivery-zones-panel-head,
#rp-modal-delivery-zones .rp-delivery-zones-panel-card--map > .rp-delivery-zones-panel-head{
  margin-bottom: 0;
}

#rp-modal-delivery-zones .rp-delivery-zones-msg{
  min-height: 0;
}

#rp-modal-delivery-zones .rp-delivery-zones-msg:empty{
  display: none;
}

#rp-modal-delivery-zones .rp-delivery-zones-legend{
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;

  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;

  overflow: auto;
}

#rp-modal-delivery-zones .rp-delivery-zones-legend-item{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;

  padding: 11px 12px;
  border-radius: 14px;
  background: #f8f8f9;
  border: 1px solid rgba(17,17,17,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

#rp-modal-delivery-zones .rp-delivery-zones-legend-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#rp-modal-delivery-zones .rp-delivery-zones-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 12px;
  box-shadow: 0 0 0 3px rgba(17,17,17,.05);
}

#rp-modal-delivery-zones .rp-delivery-zones-range{
  min-width: 0;
  font-size: .92rem;
  font-weight: 700;
  color: rgba(17,17,17,.84);
  line-height: 1.15;
}

#rp-modal-delivery-zones .rp-delivery-zones-price{
  font-size: .88rem;
  font-weight: 800;
  color: rgba(17,17,17,.72);
  white-space: nowrap;
}

#rp-modal-delivery-zones .rp-map-wrap{
  position: relative;
  min-height: 0;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(17,17,17,.03);
}

#rp-modal-delivery-zones .rp-delivery-zones-map{
  width: 100%;
  height: var(--rp-delivery-map-h);
  min-height: 340px;
}

/* ------------------------------
   Ubicación mapa
   ------------------------------ */
#rp-modal-ubicacion-map .rp-modal-ubicacion-map-body{
  height: 100%;
}

#rp-modal-ubicacion-map .rp-modal-ubicacion-map-grid{
  height: 100%;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  align-items: start;
  gap: 16px;
}

#rp-modal-ubicacion-map .rp-modal-ubicacion-map-col{
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
}

#rp-modal-ubicacion-map .rp-modal-ubicacion-map-col--side{
  align-self: start;
  height: auto;
}

#rp-modal-ubicacion-map .rp-modal-ubicacion-map-panel-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#rp-modal-ubicacion-map .rp-modal-ubicacion-map-panel-card--action{
  gap: 14px;
}

#rp-modal-ubicacion-map .rp-map-wrap{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(17,17,17,.03);
}

#rp-modal-ubicacion-map .rp-ubicacion-map--modal{
  width: 100%;
  height: var(--rp-location-map-h);
  min-height: 320px;
  display: block;
}

#rp-modal-ubicacion-map .rp-modal-ubicacion-map-steps{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: rgba(17,17,17,.72);
  font-size: .9rem;
  line-height: 1.4;
}

#rp-modal-ubicacion-map #rp-modal-ubicacion-map-done.sa-primary-btn{
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  padding: 12px 18px;
  font-family: "Outfit", sans-serif;
  font-size: .98rem;
  font-weight: 700;
  color: #fff;
  background: var(--rp-sw-on);
  border: 1.5px solid rgba(0,0,0,.10);
  box-shadow:
    0 14px 26px rgba(255,0,42,.22),
    0 2px 8px rgba(17,17,17,.06);
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease;
}

#rp-modal-ubicacion-map #rp-modal-ubicacion-map-done.sa-primary-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.05);
  box-shadow:
    0 18px 30px rgba(255,0,42,.26),
    0 3px 10px rgba(17,17,17,.06);
}

#rp-modal-ubicacion-map #rp-modal-ubicacion-map-done.sa-primary-btn:active{
  transform: translateY(0);
}

#rp-modal-ubicacion-map #rp-modal-ubicacion-map-done.sa-primary-btn:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

/* ------------------------------
   Tablet real
   ------------------------------ */
@media (max-width: 1100px){
  #rp-modal-delivery-zones,
  #rp-modal-ubicacion-map{
    padding: 0;
    align-items: flex-end;

    --rp-delivery-map-h: clamp(300px, 38vh, 420px);
    --rp-location-map-h: clamp(280px, 34vh, 400px);
    --rp-delivery-panel-h: auto;
  }

  #rp-modal-delivery-zones .rp-modal-delivery-zones-card,
  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-card{
    width: 100%;
    height: auto;
    max-height: min(94dvh, 980px);
    border-radius: 26px 26px 0 0;
  }

  #rp-modal-delivery-zones .sa-modal-header,
  #rp-modal-ubicacion-map .sa-modal-header{
    padding-top: 22px;
    position: relative;
  }

  #rp-modal-delivery-zones .sa-modal-header::before,
  #rp-modal-ubicacion-map .sa-modal-header::before{
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(17,17,17,.18);
  }

  #rp-modal-delivery-zones .rp-modal-delivery-zones-body,
  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-body{
    height: auto;
    max-height: calc(94dvh - 92px);
    overflow: auto;
  }

  /* Delivery tablet: cards full width */
  #rp-modal-delivery-zones .rp-delivery-zones-grid{
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 16px;
    gap: 14px;
    overflow: visible;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-col{
    display: block;
    width: 100%;
    min-height: 0;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-panel-card{
    width: 100%;
  }



  #rp-modal-delivery-zones .rp-delivery-zones-legend{
    max-height: clamp(240px, 30vh, 360px);
  }

  #rp-modal-delivery-zones .rp-delivery-zones-map{
    min-height: 320px;
  }

  /* Ubicación tablet: cómo usar -> listo -> mapa */
  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-grid{
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 16px;
    gap: 14px;
    overflow: visible;
  }

  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-col{
    display: contents;
  }

  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-panel-card{
    width: 100%;
    margin: 0;
  }

  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-col--side > .rp-modal-ubicacion-map-panel-card:not(.rp-modal-ubicacion-map-panel-card--action){
    order: 1;
  }

  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-panel-card--action{
    order: 2;
    margin-top: 0;
  }

  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-panel-card--map{
    order: 3;
  }

  #rp-modal-ubicacion-map .rp-ubicacion-map--modal{
    min-height: 300px;
  }
}

/* ------------------------------
   Móvil
   ------------------------------ */
@media (max-width: 600px){
  #rp-modal-delivery-zones,
  #rp-modal-ubicacion-map{
    --rp-delivery-map-h: clamp(300px, 42vh, 380px);
    --rp-location-map-h: clamp(240px, 32vh, 310px);
  }

  #rp-modal-delivery-zones .rp-modal-delivery-zones-card,
  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-card{
    height: 94dvh;
    max-height: 94dvh;
    border-radius: 22px 22px 0 0;
  }

  #rp-modal-delivery-zones .sa-modal-header h2,
  #rp-modal-ubicacion-map .sa-modal-header h2{
    font-size: 1.42rem;
    line-height: 1.05;
  }

  #rp-modal-delivery-zones .sa-modal-close,
  #rp-modal-ubicacion-map .sa-modal-close{
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    flex: 0 0 42px;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-grid,
  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-grid{
    padding: 14px;
    gap: 14px;
  }

  #rp-modal-delivery-zones .rp-delivery-zones-panel-card,
  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-panel-card{
    padding: 12px;
    border-radius: 16px;
  }

  /* Delivery móvil: resumen arriba, mapa abajo */
#rp-modal-delivery-zones .rp-delivery-zones-grid{
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  height: auto;
  min-height: 0;
  overflow: visible;
}

#rp-modal-delivery-zones .rp-delivery-zones-col{
  display: block;
  width: 100%;
  min-height: 0;
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-card{
  width: 100%;
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-card--legend{
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: auto;
  min-height: 0;
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-card--legend > .rp-delivery-zones-panel-head,
#rp-modal-delivery-zones .rp-delivery-zones-msg,
#rp-modal-delivery-zones .rp-delivery-zones-panel-card--legend > .sa-hint{
  flex: 0 0 auto;
}

#rp-modal-delivery-zones .rp-delivery-zones-legend{
  flex: 0 1 auto;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: min(40dvh, 340px);
  overflow: auto;
  padding-right: 2px;
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-card--legend > .sa-hint{
  line-height: 1.42;
  padding-bottom: 2px;
}

#rp-modal-delivery-zones .rp-delivery-zones-legend-item{
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
}

#rp-modal-delivery-zones .rp-delivery-zones-range{
  font-size: .86rem;
}

#rp-modal-delivery-zones .rp-delivery-zones-price{
  font-size: .82rem;
}

#rp-modal-delivery-zones .rp-delivery-zones-panel-card--map{
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: auto;
  min-height: 0;
}

#rp-modal-delivery-zones .rp-delivery-zones-map{
  min-height: 300px;
}

  /* Ubicación móvil: cómo usar -> listo -> mapa */
  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-grid{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-col{
    display: contents;
  }

  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-panel-card{
    width: 100%;
  }

  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-col--side > .rp-modal-ubicacion-map-panel-card:not(.rp-modal-ubicacion-map-panel-card--action){
    order: 1;
  }

  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-panel-card--action{
    order: 2;
    margin-top: 0;
  }

  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-panel-card--map{
    order: 3;
  }

  #rp-modal-ubicacion-map .rp-ubicacion-map--modal{
    min-height: 250px;
  }

  #rp-modal-ubicacion-map .rp-modal-ubicacion-map-steps{
    font-size: .88rem;
  }
}

/* ============================================================
   ✅ MODAL PRO: CATEGORÍA (Agregar/Editar)
   - Cards por campo
   - Textos informativos más livianos
   - Footer equilibrado
   - Hover en Guardar categoría igual al botón Crear categoría
   ============================================================ */

/* ------------------------------
   Backdrop global (base)
   ------------------------------ */
#sa-modal-backdrop.sa-modal-backdrop[hidden]{
  display: none !important;
}

#sa-modal-backdrop.sa-modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0,0,0,.28);
}

@supports selector(body:has(*)){
  body:has(#rp-modal-categoria.is-open) #sa-modal-backdrop.sa-modal-backdrop,
  body:has(#rp-modal-delivery-zones.is-open) #sa-modal-backdrop.sa-modal-backdrop,
  body:has(#rp-modal-ubicacion-map.is-open) #sa-modal-backdrop.sa-modal-backdrop{
    background: rgba(0,0,0,.40);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* ------------------------------
   Modal base
   ------------------------------ */
#rp-modal-categoria[aria-hidden="true"]{
  display: none;
}

#rp-modal-categoria{
  position: fixed;
  inset: 0;
  z-index: 999;
  padding: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Outfit", sans-serif;

  --rp-surface: #ffffff;
  --rp-text: rgba(17,17,17,.90);
  --rp-muted: rgba(17,17,17,.62);

  --rp-red1: #e03131;
  --rp-red2: #ff4d4d;
  --rp-sw-on: #ff002a;

  --rp-ico-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 6V4h8v2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 6l1 14h10l1-14'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

/* ------------------------------
   Card del modal
   ------------------------------ */
#rp-modal-categoria .rp-modal-categoria-card{
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);

  display: flex;
  flex-direction: column;
  overflow: hidden;

  background: var(--rp-surface);
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);

  transform: translateY(10px) scale(.99);
  transition: transform .18s ease;
}

#rp-modal-categoria.is-open .rp-modal-categoria-card{
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  #rp-modal-categoria .rp-modal-categoria-card{
    transition: none;
    transform: none;
  }
}

/* ------------------------------
   Header
   ------------------------------ */
#rp-modal-categoria .sa-modal-header{
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,17,17,.10);
  background: var(--rp-surface);
}

#rp-modal-categoria .sa-modal-head-copy{
  min-width: 0;
}

#rp-modal-categoria .sa-modal-header h2{
  margin: 0;
  font-size: clamp(1.35rem, 1.05rem + 0.8vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rp-text);
}

#rp-modal-categoria .rp-categoria-modal-subtitle{
  margin: 8px 0 0;
  color: var(--rp-muted);
  line-height: 1.3;
  font-size: .92rem;
  font-weight: 500;
}

#rp-modal-categoria .sa-modal-close{
  width: 44px;
  height: 44px;
  min-width: 44px;     /* evita que se encoja */
  min-height: 44px;    /* evita que se encoja */
  aspect-ratio: 1 / 1; /* fuerza círculo perfecto */
  flex: 0 0 44px;      /* evita compresión dentro del header */
  align-self: flex-start;

  border-radius: 999px;
  border: 1.5px solid rgba(17,17,17,.14);
  background: #fff;

  box-shadow:
    0 12px 22px rgba(17,17,17,.10),
    0 2px 6px rgba(17,17,17,.06),
    inset 0 1px 0 rgba(255,255,255,.92);

  cursor: pointer;
  position: relative;
  padding: 0;

  font-size: 0;
  line-height: 0;
}
#rp-modal-categoria .sa-modal-close::before{
  content: "\00D7";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: rgba(17,17,17,.88);
}

#rp-modal-categoria .sa-modal-close:hover{
  border-color: rgba(17,17,17,.28);
}

#rp-modal-categoria .sa-modal-close:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

/* ------------------------------
   Body + form
   ------------------------------ */
#rp-modal-categoria .sa-modal-body.rp-modal-categoria-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: var(--rp-surface);
}

#rp-modal-categoria .rp-categoria-form{
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#rp-modal-categoria .rp-categoria-grid{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

#rp-modal-categoria .rp-categoria-col{
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ------------------------------
   Cards internas del modal
   - Cambia aquí el look de las tarjetas
   ------------------------------ */
#rp-modal-categoria .rp-categoria-panel-card{
  padding: 14px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 12px 26px rgba(17,17,17,.06),
    0 2px 8px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.88);
}

#rp-modal-categoria .rp-categoria-panel-card .sa-field{
  margin: 0;
}

/* ------------------------------
   Labels + hints
   - Aquí modificas los textos informativos
   ------------------------------ */
#rp-modal-categoria .sa-field > label,
#rp-modal-categoria .rp-field-header > label,
#rp-modal-categoria .rp-categoria-estado-text > label{
  display: block;
  margin: 0 0 8px;
  font-size: .96rem;   /* aquí cambias el tamaño de los nombres de las tarjetas */
  font-weight: 600;    /* aquí cambias qué tan gruesos se ven */
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: rgba(17,17,17,.84);
}

/* ✅ Textos informativos más pequeños y livianos */
#rp-modal-categoria .sa-hint{
  display: block;
  margin: 8px 0 0;
  color: rgba(17,17,17,.54);
  line-height: 1.3;
  font-size: .82rem;   /* cambia esto si lo quieres más grande/chico */
  font-weight: 400;    /* cambia esto si lo quieres un poco más fuerte */
}

/* ------------------------------
   Inputs
   ------------------------------ */
#rp-modal-categoria input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#rp-modal-categoria textarea{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;

  border-radius: 14px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: var(--rp-text);

  font-family: "Outfit", sans-serif;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.15;

  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-modal-categoria textarea{
  min-height: 110px;
  resize: vertical;
}

#rp-modal-categoria input::placeholder,
#rp-modal-categoria textarea::placeholder{
  color: rgba(17,17,17,.42);
}

#rp-modal-categoria input:focus,
#rp-modal-categoria textarea:focus{
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 0 0 4px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.92);
}

/* ------------------------------
   Estado
   ------------------------------ */
#rp-modal-categoria .rp-categoria-estado-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;

  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(17,17,17,.10);
  background: #fff;
  box-shadow:
    0 12px 26px rgba(17,17,17,.06),
    0 2px 8px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.88);
}

#rp-modal-categoria .rp-categoria-estado-text{
  min-width: 0;
  flex: 1 1 auto;
}

#rp-modal-categoria .rp-qr-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  margin-left: auto;
}

#rp-modal-categoria .rp-qr-status{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;

  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;

  background: rgba(17,17,17,.06);
  border: 1px solid rgba(17,17,17,.10);
  color: rgba(17,17,17,.70);
  white-space: nowrap;
}

#rp-modal-categoria .rp-qr-status.is-active{
  background: var(--rp-sw-on);
  border-color: rgba(0,0,0,.10);
  color: #fff;
  box-shadow: 0 12px 22px rgba(255,0,42,.18);
}

#rp-modal-categoria .rp-switch{
  --sw-w: 50px;
  --sw-h: 28px;
  --sw-pad: 3px;
  --sw-thumb: 22px;
  --sw-shift: 22px;

  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#rp-modal-categoria .rp-switch-input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#rp-modal-categoria .rp-switch-track{
  position: relative;
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;
  background: rgba(17,17,17,.14);
  box-shadow: inset 0 2px 7px rgba(0,0,0,.10);
  transition: background .18s ease, box-shadow .18s ease;
}

#rp-modal-categoria .rp-switch-thumb{
  position: absolute;
  top: 50%;
  left: var(--sw-pad);
  width: var(--sw-thumb);
  height: var(--sw-thumb);
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
  transition: transform .18s ease, border-color .18s ease;
}

#rp-modal-categoria .rp-switch-input:checked + .rp-switch-track{
  background: var(--rp-sw-on);
  box-shadow: 0 12px 22px rgba(255,0,42,.18), inset 0 2px 7px rgba(0,0,0,.14);
}

#rp-modal-categoria .rp-switch-input:checked + .rp-switch-track .rp-switch-thumb{
  transform: translateY(-50%) translateX(var(--sw-shift));
  border-color: rgba(0,0,0,.12);
}

#rp-modal-categoria .rp-switch-input:focus-visible + .rp-switch-track{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

/* ------------------------------
   Color principal
   ------------------------------ */
#rp-modal-categoria .rp-categoria-color-row{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#rp-modal-categoria #cat-color-badge.rp-categoria-color-badge{
  order: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: var(--rp-red1);
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);

  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 24px rgba(17,17,17,.10), inset 0 1px 0 rgba(255,255,255,.25);

  flex: 0 0 auto;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

#rp-modal-categoria #cat-color{
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
}

#rp-modal-categoria #cat-color-picker{
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;

  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  z-index: 2;
}

@supports selector(:has(*)){
  #rp-modal-categoria .rp-categoria-color-row:has(#cat-color-picker:focus-visible) #cat-color-badge{
    outline: 2px solid rgba(17,17,17,.45);
    outline-offset: 2px;
  }
}

/* ------------------------------
   Upload fondo
   ------------------------------ */
#rp-modal-categoria .sa-file-upload{
  position: relative;
}

#rp-modal-categoria .sa-file-upload-input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#rp-modal-categoria .sa-file-upload-label{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;

  border-radius: 18px;
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;

  box-shadow: 0 10px 22px rgba(17,17,17,.08), inset 0 1px 0 rgba(255,255,255,.92);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease;
}

#rp-modal-categoria .sa-file-upload-label:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.18);
}

#rp-modal-categoria .sa-file-upload-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--rp-sw-on);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 12px 22px rgba(255,0,42,.18);
}

#rp-modal-categoria .sa-file-upload-icon img{
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  display: block;
}

#rp-modal-categoria .sa-file-upload-title{
  display: block;
  font-weight: 800;
  color: rgba(17,17,17,.84);
  line-height: 1.1;
}

#rp-modal-categoria .sa-file-upload-filename{
  display: block;
  margin-top: 4px;
  color: rgba(17,17,17,.56);
  font-size: .82rem;  /* mismo tono que los hints */
  font-weight: 400;
  line-height: 1.3;
}

/* Preview */
#rp-modal-categoria .rp-categoria-fondo-preview{
  margin-top: 12px;
  border-radius: 18px;
  border: 1.5px dashed rgba(17,17,17,.18);
  background: rgba(17,17,17,.03);

  height: clamp(180px, 24vh, 260px);
  overflow: hidden;
  position: relative;

  display: grid;
  place-items: center;
  padding: 16px;
}

#rp-modal-categoria .rp-categoria-fondo-preview.has-image{
  border-style: solid;
  border-color: rgba(17,17,17,.10);
  background: #fff;
  padding: 0;
}

#rp-modal-categoria .rp-categoria-fondo-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#rp-modal-categoria .rp-categoria-fondo-placeholder{
  color: rgba(17,17,17,.72);
  font-size: clamp(.90rem, .84rem + .18vw, 1rem);
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

/* Botón basurero */
#rp-modal-categoria #cat-fondo-desktop-remove,
#rp-modal-categoria #cat-fondo-mobile-remove{
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: var(--rp-sw-on);
  color: #fff;

  box-shadow: 0 12px 22px rgba(255,0,42,.18), 0 2px 6px rgba(17,17,17,.06);
  cursor: pointer;

  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;

  text-indent: -9999px;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease;
}

#rp-modal-categoria #cat-fondo-desktop-remove::before,
#rp-modal-categoria #cat-fondo-mobile-remove::before{
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--rp-ico-trash) center/contain no-repeat;
          mask: var(--rp-ico-trash) center/contain no-repeat;
  position: absolute;
  inset: 0;
  margin: auto;
}

#rp-modal-categoria #cat-fondo-desktop-remove:hover,
#rp-modal-categoria #cat-fondo-mobile-remove:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 16px 26px rgba(255,0,42,.22), 0 3px 10px rgba(17,17,17,.08);
}

#rp-modal-categoria .rp-categoria-fondo-preview:not(.has-image) #cat-fondo-desktop-remove,
#rp-modal-categoria .rp-categoria-fondo-preview:not(.has-image) #cat-fondo-mobile-remove{
  display: none !important;
}

/* Compatibilidad si aún mantienes fondo desktop en tu HTML */
@supports selector(:has(*)){
  #rp-modal-categoria:has(#rp-categoria-form[data-edit-id]) .rp-categoria-fondos > .sa-field:has(#cat-fondo-desktop){
    display: none !important;
  }
}

/* ------------------------------
   Mensaje + footer
   ------------------------------ */
#rp-modal-categoria #rp-categoria-form-msg{
  padding: 10px 16px 0;
}

#rp-modal-categoria .sa-modal-footer{
  flex: 0 0 auto;
  display: flex;
  align-items: center;          /* centra verticalmente */
  justify-content: flex-end;    /* mantiene acciones a la derecha */
  gap: 12px;

  min-height: 82px;             /* ayuda a equilibrar el espacio arriba/abajo */
  padding: 16px;
  border-top: 1px solid rgba(17,17,17,.10);
  background: var(--rp-surface);

  box-shadow: 0 -14px 30px rgba(17,17,17,.06);
}

/* ------------------------------
   Botones footer
   - Aquí cambias peso y efecto
   ------------------------------ */
#rp-modal-categoria #rp-categoria-cancelar.sa-secondary-btn,
#rp-modal-categoria #rp-categoria-guardar.sa-primary-btn{
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 18px;
  font-family: "Outfit", sans-serif;
  font-size: .96rem;
  font-weight: 600; /* ✅ menos grueso */
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}

#rp-modal-categoria #rp-categoria-cancelar.sa-secondary-btn{
  border: 1.5px solid rgba(17,17,17,.12);
  background: #fff;
  color: rgba(17,17,17,.86);
  box-shadow:
    0 10px 20px rgba(17,17,17,.06),
    0 2px 6px rgba(17,17,17,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#rp-modal-categoria #rp-categoria-cancelar.sa-secondary-btn:hover{
  border-color: rgba(17,17,17,.22);
  transform: translateY(-1px);
}

#rp-modal-categoria #rp-categoria-guardar.sa-primary-btn{
  color: #fff;
  background: var(--rp-sw-on);
  border: 1.5px solid rgba(0,0,0,.10);
  box-shadow:
    0 14px 26px rgba(255,0,42,.22),
    0 2px 8px rgba(17,17,17,.06);
}

/* ✅ mismo efecto del botón "+ Crear categoría" */
#rp-modal-categoria #rp-categoria-guardar.sa-primary-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.05);
  box-shadow:
    0 18px 30px rgba(255,0,42,.26),
    0 3px 10px rgba(17,17,17,.06);
}

#rp-modal-categoria #rp-categoria-guardar.sa-primary-btn:active,
#rp-modal-categoria #rp-categoria-cancelar.sa-secondary-btn:active{
  transform: translateY(0);
}

#rp-modal-categoria #rp-categoria-guardar.sa-primary-btn:focus-visible,
#rp-modal-categoria #rp-categoria-cancelar.sa-secondary-btn:focus-visible{
  outline: 2px solid rgba(17,17,17,.45);
  outline-offset: 2px;
}

/* ------------------------------
   Responsive
   ------------------------------ */
@media (max-width: 1024px){
  #rp-modal-categoria{
    padding: 0;
    align-items: flex-end;
  }

  #rp-modal-categoria .rp-modal-categoria-card{
    width: 100%;
    max-width: none;
    height: 90dvh;
    min-height: 90dvh;
    max-height: 90dvh;
    border-radius: 22px 22px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    transform: translateY(42px) scale(1);
  }

  #rp-modal-categoria .sa-modal-header{
    padding-top: 22px;
    position: relative;
  }

  #rp-modal-categoria .sa-modal-header::before{
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(17,17,17,.18);
  }

  #rp-modal-categoria .sa-modal-header h2{
    font-size: 1.42rem;
    line-height: 1.05;
  }

  #rp-modal-categoria .sa-modal-close{
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    flex: 0 0 42px;
  }

  #rp-modal-categoria .rp-categoria-grid{
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 14px;
  }

  #rp-modal-categoria .rp-categoria-col{
    gap: 14px;
  }

  #rp-modal-categoria .rp-categoria-panel-card,
  #rp-modal-categoria .rp-categoria-estado-row{
    padding: 12px;
    border-radius: 16px;
  }

  #rp-modal-categoria #rp-categoria-form-msg{
    padding: 10px 14px 0;
  }

  #rp-modal-categoria .sa-modal-footer{
    min-height: 78px;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px){
  #rp-modal-categoria .rp-categoria-estado-row{
    align-items: center;
    flex-direction: row;
    gap: 10px;
  }

  #rp-modal-categoria .rp-categoria-estado-text{
    flex: 1 1 auto;
    min-width: 0;
  }

  #rp-modal-categoria .rp-qr-toggle{
    width: auto;
    justify-content: flex-end;
    margin-left: auto;
    gap: 8px;
  }

  #rp-modal-categoria .rp-qr-status{
    min-height: 28px;
    padding: 0 11px;
    font-size: .70rem;
  }

  #rp-modal-categoria .rp-switch{
    --sw-w: 48px;
    --sw-h: 27px;
    --sw-thumb: 21px;
    --sw-shift: 21px;
  }
}


/* ============================================================
   MODAL · ELEGIR SUCURSAL
   Scope: SOLO #rp-modal-branch
   ============================================================ */

/* Backdrop específico */
@supports selector(body:has(*)) {
  body:has(#rp-modal-branch.is-open) #sa-modal-backdrop {
    background: rgba(0, 0, 0, .40);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

#rp-modal-branch[aria-hidden="true"] {
  display: none;
}

#rp-modal-branch {
  position: fixed;
  inset: 0;
  z-index: 999;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;

  --rbm-surface: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  --rbm-text: rgba(17, 17, 17, .92);
  --rbm-muted: rgba(17, 17, 17, .62);
  --rbm-border: rgba(17, 17, 17, .10);
  --rbm-border-strong: rgba(17, 17, 17, .16);
  --rbm-red: #ff002a;
  --rbm-red-shadow: rgba(255, 0, 42, .22);
  --rbm-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  --rbm-soft-shadow:
    0 10px 22px rgba(17, 17, 17, .06),
    inset 0 1px 0 rgba(255, 255, 255, .88);
  --rbm-positive-bg: rgba(25, 135, 84, .12);
  --rbm-positive-border: rgba(25, 135, 84, .22);
  --rbm-positive-text: #156f4a;
  --rbm-negative-bg: rgba(220, 53, 69, .10);
  --rbm-negative-border: rgba(220, 53, 69, .18);
  --rbm-negative-text: #b42332;
  --rbm-focus: rgba(17, 17, 17, .45);
}

/* Card principal */
#rp-modal-branch .rp-modal-branch-card {
  width: min(860px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rbm-surface);
  border: 1px solid rgba(17, 17, 17, .12);
  border-radius: 22px;
  box-shadow: var(--rbm-shadow);
  transform: translateY(10px) scale(.99);
  transition: transform .18s ease;
}

#rp-modal-branch.is-open .rp-modal-branch-card {
  transform: none;
}

/* Header */
#rp-modal-branch .sa-modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(17, 17, 17, .10);
  background: var(--rbm-surface);
}

#rp-modal-branch .sa-modal-header h2 {
  margin: 0;
  font-size: clamp(1.35rem, 1.05rem + .8vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rbm-text);
}

#rp-modal-branch .sa-sucursales-subtitle {
  margin: 8px 0 0;
  color: var(--rbm-muted);
  line-height: 1.3;
  font-size: .92rem;
  font-weight: 500;
  max-width: 620px;
}

#rp-modal-branch .sa-modal-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  border-radius: 999px;
  border: 1.5px solid rgba(17, 17, 17, .14);
  background: #fff;
  box-shadow:
    0 12px 22px rgba(17, 17, 17, .10),
    0 2px 6px rgba(17, 17, 17, .06),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  cursor: pointer;
  position: relative;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

#rp-modal-branch .sa-modal-close::before {
  content: "\00D7";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: rgba(17, 17, 17, .88);
}

#rp-modal-branch .sa-modal-close:hover {
  border-color: rgba(17, 17, 17, .28);
}

#rp-modal-branch .sa-modal-close:focus-visible {
  outline: 2px solid var(--rbm-focus);
  outline-offset: 2px;
}

/* Body */
#rp-modal-branch .sa-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px;
}

#rp-modal-branch .rp-modal-branch-body {
  scrollbar-gutter: stable;
}

#rp-modal-branch .rp-branch-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-content: start;
}

/* Card interna */
#rp-modal-branch .rp-branch-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  padding-right: clamp(168px, 24vw, 236px);
  border: 1px solid var(--rbm-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--rbm-soft-shadow);
  transition:
    transform .14s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  #rp-modal-branch .rp-branch-card:hover {
    transform: translateY(-1px);
    border-color: var(--rbm-border-strong);
    box-shadow:
      0 14px 24px rgba(17, 17, 17, .07),
      inset 0 1px 0 rgba(255, 255, 255, .92);
  }
}

#rp-modal-branch .rp-branch-title {
  margin: 0;
  min-width: 0;
  color: var(--rbm-text);
  font-size: 1.14rem;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  word-break: break-word;
}

#rp-modal-branch .rp-branch-meta {
  min-width: 0;
  color: var(--rbm-muted);
  font-size: .95rem;
  line-height: 1.35;
  word-break: break-word;
}

#rp-modal-branch .rp-branch-card > .rp-branch-meta:last-of-type {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

/* Chips */
#rp-modal-branch .rp-branch-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, .10);
  background: rgba(17, 17, 17, .05);
  color: rgba(17, 17, 17, .78);
  font-size: .81rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84);
}

#rp-modal-branch .rp-branch-tag.is-positive {
  background: var(--rbm-positive-bg);
  border-color: var(--rbm-positive-border);
  color: var(--rbm-positive-text);
}

#rp-modal-branch .rp-branch-tag.is-negative {
  background: var(--rbm-negative-bg);
  border-color: var(--rbm-negative-border);
  color: var(--rbm-negative-text);
}

/* Acción fija arriba a la derecha */
#rp-modal-branch .rp-branch-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
  margin: 0;
}

#rp-modal-branch .rp-branch-select-btn {
  appearance: none;
  border: 1.5px solid rgba(0, 0, 0, .10);
  border-radius: 999px;
  min-height: 44px;
  min-width: 126px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rbm-red);
  color: #fff;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  font-size: .96rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  box-shadow:
    0 14px 26px var(--rbm-red-shadow),
    0 2px 8px rgba(17, 17, 17, .06);
  transition:
    transform .12s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

#rp-modal-branch .rp-branch-select-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.05);
  box-shadow:
    0 18px 30px rgba(255, 0, 42, .26),
    0 3px 10px rgba(17, 17, 17, .06);
}

#rp-modal-branch .rp-branch-select-btn:active {
  transform: translateY(0);
}

#rp-modal-branch .rp-branch-select-btn:focus-visible {
  outline: 2px solid rgba(17, 17, 17, .45);
  outline-offset: 2px;
}

/* Empty */
#rp-modal-branch .sa-empty-state,
#rp-modal-branch .sa-sucursal-meta {
  padding: 22px 18px;
  border: 1px dashed rgba(17, 17, 17, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .68);
  text-align: center;
  color: var(--rbm-muted);
  font-weight: 600;
}

/* Tablet y móvil: bottom-sheet */
@media (max-width: 1024px) {
  #rp-modal-branch {
    padding: 0;
    align-items: flex-end;
    justify-content: stretch;
  }

  #rp-modal-branch .rp-modal-branch-card {
    width: 100%;
    max-width: 100%;
    max-height: min(86dvh, 860px);
    border-radius: 24px 24px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow:
      0 -18px 42px rgba(17, 17, 17, .18),
      0 -2px 10px rgba(17, 17, 17, .06);
    transform: translateY(34px);
  }

  #rp-modal-branch.is-open .rp-modal-branch-card {
    transform: translateY(0);
  }

  #rp-modal-branch .sa-modal-header {
    padding-top: 24px;
    position: relative;
  }

  #rp-modal-branch .sa-modal-header::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: rgba(17, 17, 17, .18);
  }
}

@media (max-width: 600px) {
  #rp-modal-branch .rp-modal-branch-card {
    max-height: min(88dvh, 920px);
    border-radius: 22px 22px 0 0;
  }

  #rp-modal-branch .sa-modal-header h2 {
    font-size: 1.42rem;
    line-height: 1.05;
  }

  #rp-modal-branch .sa-modal-body {
    padding: 14px;
  }

  #rp-modal-branch .rp-branch-list {
    gap: 10px;
  }

  #rp-modal-branch .rp-branch-card {
    padding: 14px 14px 14px;
    padding-right: 134px;
    border-radius: 16px;
    gap: 8px;
  }

  #rp-modal-branch .rp-branch-title {
    font-size: 1rem;
  }

  #rp-modal-branch .rp-branch-meta {
    font-size: .89rem;
  }

  #rp-modal-branch .rp-branch-tag {
    min-height: 30px;
    font-size: .76rem;
    padding: 6px 10px;
  }

  #rp-modal-branch .rp-branch-actions {
    top: 12px;
    right: 12px;
  }

  #rp-modal-branch .rp-branch-select-btn {
    min-width: 108px;
    min-height: 40px;
    padding: 9px 14px;
    font-size: .90rem;
  }
}


/* ============================================================
   MODAL · ELEGIR RESTAURANTE
   Scope: SOLO #rp-modal-restaurante
   ============================================================ */

/* Backdrop específico */
@supports selector(body:has(*)) {
  body:has(#rp-modal-restaurante.is-open) #sa-modal-backdrop {
    background: rgba(0, 0, 0, .40);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

#rp-modal-restaurante[aria-hidden="true"] {
  display: none;
}

#rp-modal-restaurante {
  position: fixed;
  inset: 0;
  z-index: 999;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;

  --rrm-surface: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  --rrm-text: rgba(17, 17, 17, .92);
  --rrm-muted: rgba(17, 17, 17, .62);
  --rrm-border: rgba(17, 17, 17, .10);
  --rrm-border-strong: rgba(17, 17, 17, .16);
  --rrm-red: #ff002a;
  --rrm-red-shadow: rgba(255, 0, 42, .22);
  --rrm-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  --rrm-soft-shadow:
    0 10px 22px rgba(17, 17, 17, .06),
    inset 0 1px 0 rgba(255, 255, 255, .88);
  --rrm-focus: rgba(17, 17, 17, .45);
}

/* Card principal */
#rp-modal-restaurante .rp-modal-rest-card {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rrm-surface);
  border: 1px solid rgba(17, 17, 17, .12);
  border-radius: 22px;
  box-shadow: var(--rrm-shadow);
  transform: translateY(10px) scale(.99);
  transition: transform .18s ease;
}

#rp-modal-restaurante.is-open .rp-modal-rest-card {
  transform: none;
}

/* Header */
#rp-modal-restaurante .sa-modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(17, 17, 17, .10);
  background: var(--rrm-surface);
}

#rp-modal-restaurante .sa-modal-header h2 {
  margin: 0;
  font-size: clamp(1.35rem, 1.05rem + .8vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rrm-text);
}

#rp-modal-restaurante .sa-sucursales-subtitle {
  margin: 8px 0 0;
  color: var(--rrm-muted);
  line-height: 1.3;
  font-size: .92rem;
  font-weight: 500;
  max-width: 620px;
}

#rp-modal-restaurante .sa-modal-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  border-radius: 999px;
  border: 1.5px solid rgba(17, 17, 17, .14);
  background: #fff;
  box-shadow:
    0 12px 22px rgba(17, 17, 17, .10),
    0 2px 6px rgba(17, 17, 17, .06),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  cursor: pointer;
  position: relative;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

#rp-modal-restaurante .sa-modal-close::before {
  content: "\00D7";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: rgba(17, 17, 17, .88);
}

#rp-modal-restaurante .sa-modal-close:hover {
  border-color: rgba(17, 17, 17, .28);
}

#rp-modal-restaurante .sa-modal-close:focus-visible {
  outline: 2px solid var(--rrm-focus);
  outline-offset: 2px;
}

/* Body */
#rp-modal-restaurante .sa-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px;
}

#rp-modal-restaurante .rp-modal-rest-body {
  scrollbar-gutter: stable;
}

#rp-modal-restaurante .rp-rest-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-content: start;
}

/* Card interna */
#rp-modal-restaurante .rp-rest-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  padding-right: clamp(120px, 18vw, 156px);
  border: 1px solid var(--rrm-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--rrm-soft-shadow);
  transition:
    transform .14s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  #rp-modal-restaurante .rp-rest-card:hover {
    transform: translateY(-1px);
    border-color: var(--rrm-border-strong);
    box-shadow:
      0 14px 24px rgba(17, 17, 17, .07),
      inset 0 1px 0 rgba(255, 255, 255, .92);
  }
}

#rp-modal-restaurante .rp-rest-title {
  margin: 0;
  min-width: 0;
  color: var(--rrm-text);
  font-size: 1.14rem;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  word-break: break-word;
}

#rp-modal-restaurante .rp-rest-meta {
  min-width: 0;
  color: var(--rrm-muted);
  font-size: .95rem;
  line-height: 1.35;
  word-break: break-word;
}

/* Acción */
#rp-modal-restaurante .rp-rest-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
  margin: 0;
}

#rp-modal-restaurante .rp-rest-select-btn {
  appearance: none;
  border: 1.5px solid rgba(0, 0, 0, .10);
  border-radius: 999px;
  min-height: 44px;
  min-width: 96px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rrm-red);
  color: #fff;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  font-size: .96rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  box-shadow:
    0 14px 26px var(--rrm-red-shadow),
    0 2px 8px rgba(17, 17, 17, .06);
  transition:
    transform .12s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

#rp-modal-restaurante .rp-rest-select-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.05);
  box-shadow:
    0 18px 30px rgba(255, 0, 42, .26),
    0 3px 10px rgba(17, 17, 17, .06);
}

#rp-modal-restaurante .rp-rest-select-btn:active {
  transform: translateY(0);
}

#rp-modal-restaurante .rp-rest-select-btn:focus-visible,
#rp-modal-restaurante #rp-modal-rest-logout.sa-secondary-btn:focus-visible {
  outline: 2px solid rgba(17, 17, 17, .45);
  outline-offset: 2px;
}

/* Footer */
#rp-modal-restaurante .rp-modal-rest-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 78px;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(17, 17, 17, .10);
  background: var(--rrm-surface);
  box-shadow: 0 -14px 30px rgba(17, 17, 17, .06);
}

#rp-modal-restaurante #rp-modal-rest-logout.sa-secondary-btn {
  appearance: none;
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid rgba(17, 17, 17, .12);
  background: #fff;
  color: rgba(17, 17, 17, .86);
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1;
  box-shadow:
    0 10px 20px rgba(17, 17, 17, .06),
    0 2px 6px rgba(17, 17, 17, .04),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  transition:
    transform .12s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

#rp-modal-restaurante #rp-modal-rest-logout.sa-secondary-btn:hover {
  border-color: rgba(17, 17, 17, .22);
  transform: translateY(-1px);
}

#rp-modal-restaurante #rp-modal-rest-logout.sa-secondary-btn:active {
  transform: translateY(0);
}

/* Empty */
#rp-modal-restaurante .sa-empty-state {
  padding: 22px 18px;
  border: 1px dashed rgba(17, 17, 17, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .68);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

#rp-modal-restaurante .sa-empty-state p {
  margin: 0;
  color: var(--rrm-muted);
  line-height: 1.4;
  font-weight: 600;
}

/* Tablet y móvil: bottom-sheet */
@media (max-width: 1024px) {
  #rp-modal-restaurante {
    padding: 0;
    align-items: flex-end;
    justify-content: stretch;
  }

  #rp-modal-restaurante .rp-modal-rest-card {
    width: 100%;
    max-width: 100%;
    max-height: min(86dvh, 860px);
    border-radius: 24px 24px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow:
      0 -18px 42px rgba(17, 17, 17, .18),
      0 -2px 10px rgba(17, 17, 17, .06);
    transform: translateY(34px);
  }

  #rp-modal-restaurante.is-open .rp-modal-rest-card {
    transform: translateY(0);
  }

  #rp-modal-restaurante .sa-modal-header {
    padding-top: 24px;
    position: relative;
  }

  #rp-modal-restaurante .sa-modal-header::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: rgba(17, 17, 17, .18);
  }
}

@media (max-width: 600px) {
  #rp-modal-restaurante .rp-modal-rest-card {
    max-height: min(88dvh, 920px);
    border-radius: 22px 22px 0 0;
  }

  #rp-modal-restaurante .sa-modal-header h2 {
    font-size: 1.42rem;
    line-height: 1.05;
  }

  #rp-modal-restaurante .sa-modal-body {
    padding: 14px;
  }

  #rp-modal-restaurante .rp-rest-list {
    gap: 10px;
  }

  #rp-modal-restaurante .rp-rest-card {
    padding: 14px 14px 14px;
    padding-right: 118px;
    border-radius: 16px;
    gap: 8px;
  }

  #rp-modal-restaurante .rp-rest-title {
    font-size: 1rem;
  }

  #rp-modal-restaurante .rp-rest-meta {
    font-size: .89rem;
  }

  #rp-modal-restaurante .rp-rest-actions {
    top: 12px;
    right: 12px;
  }

  #rp-modal-restaurante .rp-rest-select-btn {
    min-width: 84px;
    min-height: 40px;
    padding: 9px 14px;
    font-size: .90rem;
  }

  #rp-modal-restaurante .rp-modal-rest-footer {
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  }

  #rp-modal-restaurante #rp-modal-rest-logout.sa-secondary-btn {
    width: 100%;
  }
}

/* ==========================================================
   INVENTARIO
   Scope: SOLO #rp-view-inventario
   ========================================================== */
#rp-view-inventario{
  --iv-border: rgba(15, 23, 42, 0.10);
  --iv-border-strong: rgba(15, 23, 42, 0.16);
  --iv-text-soft: #5b6476;
  --iv-surface: #ffffff;
  --iv-surface-soft: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  --iv-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  --iv-accent: #0f766e;
  --iv-accent-soft: rgba(15, 118, 110, 0.10);
  --iv-warn: #b45309;
  --iv-warn-soft: rgba(245, 158, 11, 0.14);
  --iv-danger: #b91c1c;
  --iv-danger-soft: rgba(239, 68, 68, 0.12);
  padding: 14px 18px 28px;
}

#rp-view-inventario .iv-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

#rp-view-inventario .iv-title{
  margin:0;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height:1.05;
  letter-spacing:-0.03em;
  color:#101828;
}

#rp-view-inventario .iv-sub{
  margin:8px 0 0;
  max-width:760px;
  color:var(--iv-text-soft);
  font-size:14px;
  line-height:1.6;
}

#rp-view-inventario .iv-cards{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:14px;
  margin-bottom:18px;
}

#rp-view-inventario .iv-card{
  background:var(--iv-surface-soft);
  border:1px solid var(--iv-border);
  border-radius:22px;
  box-shadow:var(--iv-shadow);
  padding:18px 18px 16px;
}

#rp-view-inventario .iv-card-k{
  color:var(--iv-text-soft);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

#rp-view-inventario .iv-card-v{
  margin-top:10px;
  color:#0f172a;
  font-size:28px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-0.03em;
}

#rp-view-inventario .iv-card-s{
  margin-top:8px;
  color:#6b7280;
  font-size:13px;
  line-height:1.45;
}

#rp-view-inventario .iv-toolbar{
  margin-bottom:18px;
}

#rp-view-inventario .iv-toolbar-left{
  display:grid;
  grid-template-columns: auto minmax(220px, 1.2fr) repeat(2, minmax(170px, .7fr));
  gap:12px;
  align-items:end;
}

#rp-view-inventario .iv-field{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}

#rp-view-inventario .iv-field--grow{
  min-width:0;
}

#rp-view-inventario .iv-field--full{
  grid-column:1 / -1;
}

#rp-view-inventario .iv-field--switch{
  justify-content:flex-end;
  align-self:end;
}

#rp-view-inventario .iv-field--switch input[type="checkbox"]{
  width:20px;
  height:20px;
  accent-color: var(--iv-accent);
}

#rp-view-inventario .iv-field > span{
  color:#475467;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

#rp-view-inventario .iv-field input:not([type="checkbox"]),
#rp-view-inventario .iv-field select,
#rp-view-inventario .iv-field textarea{
  width:100%;
  min-height:46px;
  border-radius:14px;
  border:1px solid var(--iv-border-strong);
  background:#fff;
  color:#0f172a;
  padding:0 14px;
  font:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#rp-view-inventario .iv-field textarea{
  min-height:120px;
  padding:12px 14px;
  resize:vertical;
}

#rp-view-inventario .iv-field input:focus,
#rp-view-inventario .iv-field select:focus,
#rp-view-inventario .iv-field textarea:focus{
  outline:none;
  border-color:rgba(15, 118, 110, 0.45);
  box-shadow:0 0 0 4px rgba(15, 118, 110, 0.12);
}

#rp-view-inventario .iv-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr);
  gap:18px;
  align-items:start;
}

#rp-view-inventario .iv-panel--history{
  margin-top:18px;
}

#rp-view-inventario .iv-panel{
  background:#fff;
  border:1px solid var(--iv-border);
  border-radius:24px;
  box-shadow:var(--iv-shadow);
  overflow:hidden;
}

#rp-view-inventario .iv-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(15, 23, 42, 0.06);
}

#rp-view-inventario .iv-panel-head h3{
  margin:0;
  color:#0f172a;
  font-size:18px;
  line-height:1.2;
}

#rp-view-inventario .iv-panel-head p{
  margin:6px 0 0;
  color:var(--iv-text-soft);
  font-size:13px;
  line-height:1.5;
}

#rp-view-inventario .iv-table-wrap{
  overflow:auto;
}

#rp-view-inventario .iv-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:980px;
}

#rp-view-inventario .iv-table th,
#rp-view-inventario .iv-table td{
  padding:14px 16px;
  border-bottom:1px solid rgba(15, 23, 42, 0.06);
  vertical-align:middle;
  text-align:left;
}

#rp-view-inventario .iv-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f8fafc;
  color:#475467;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

#rp-view-inventario .iv-table td{
  color:#172033;
  font-size:14px;
}

#rp-view-inventario .iv-table tr.is-inactive td{
  opacity:.72;
}

#rp-view-inventario .iv-row-btn{
  margin-right:8px;
  margin-bottom:6px;
}

#rp-view-inventario .iv-empty{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px 18px 34px;
  color:var(--iv-text-soft);
}

#rp-view-inventario .iv-empty strong{
  color:#0f172a;
  font-size:16px;
}

#rp-view-inventario .iv-alerts-grid{
  display:grid;
  gap:14px;
  padding:18px;
}

#rp-view-inventario .iv-alert-card{
  border-radius:18px;
  border:1px solid var(--iv-border);
  padding:16px;
  background:#fff;
}

#rp-view-inventario .iv-alert-card--danger{
  background:linear-gradient(180deg, rgba(239, 68, 68, 0.08) 0%, rgba(255,255,255,0.96) 100%);
  border-color:rgba(239, 68, 68, 0.18);
}

#rp-view-inventario .iv-alert-card--warn{
  background:linear-gradient(180deg, rgba(245, 158, 11, 0.10) 0%, rgba(255,255,255,0.96) 100%);
  border-color:rgba(245, 158, 11, 0.18);
}

#rp-view-inventario .iv-alert-title{
  color:#0f172a;
  font-size:14px;
  font-weight:800;
  margin-bottom:10px;
}

#rp-view-inventario .iv-alert-list{
  display:grid;
  gap:10px;
}

#rp-view-inventario .iv-alert-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.82);
  border:1px solid rgba(15, 23, 42, 0.05);
}

#rp-view-inventario .iv-alert-item strong{
  font-size:14px;
  color:#111827;
}

#rp-view-inventario .iv-alert-item span,
#rp-view-inventario .iv-alert-empty{
  font-size:13px;
  color:var(--iv-text-soft);
}

#rp-view-inventario .iv-status-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}

#rp-view-inventario .iv-status-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.03em;
  text-transform:uppercase;
}

#rp-view-inventario .iv-status-badge.is-ok{
  background:var(--iv-accent-soft);
  color:var(--iv-accent);
}

#rp-view-inventario .iv-status-badge.is-stock-bajo{
  background:var(--iv-warn-soft);
  color:var(--iv-warn);
}

#rp-view-inventario .iv-status-badge.is-agotado{
  background:var(--iv-danger-soft);
  color:var(--iv-danger);
}

#rp-view-inventario .iv-status-note{
  font-size:12px;
  color:#64748b;
  font-weight:600;
}

#rp-view-inventario .iv-inline-msg{
  min-height:20px;
  color:#667085;
  font-size:13px;
}

#rp-view-inventario .iv-inline-msg[data-tone="error"]{
  color:#b42318;
}

#rp-view-inventario .iv-modal[hidden]{
  display:none !important;
}

#rp-view-inventario .iv-modal{
  position:fixed;
  inset:0;
  z-index:2200;
  display:grid;
  place-items:center;
  padding:24px;
}

#rp-view-inventario .iv-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(8px);
}

#rp-view-inventario .iv-modal-card{
  position:relative;
  width:min(860px, 100%);
  max-height:min(88vh, 920px);
  overflow:auto;
  border-radius:28px;
  background:#fff;
  box-shadow:0 26px 80px rgba(15, 23, 42, 0.22);
  border:1px solid rgba(255,255,255,0.7);
}

#rp-view-inventario .iv-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:22px 24px 16px;
  border-bottom:1px solid rgba(15, 23, 42, 0.07);
}

#rp-view-inventario .iv-modal-copy h3{
  margin:0;
  color:#0f172a;
  font-size:24px;
  line-height:1.1;
}

#rp-view-inventario .iv-modal-sub{
  margin:8px 0 0;
  color:var(--iv-text-soft);
  font-size:14px;
  line-height:1.5;
}

#rp-view-inventario .iv-modal-close{
  border:0;
  background:rgba(15, 23, 42, 0.06);
  color:#0f172a;
  width:42px;
  height:42px;
  border-radius:999px;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

#rp-view-inventario .iv-form{
  padding:22px 24px 24px;
}

#rp-view-inventario .iv-form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}

#rp-view-inventario .iv-modal-actions{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

#rp-view-inventario .iv-modal-actions-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

@media (max-width: 1280px){
  #rp-view-inventario .iv-cards{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #rp-view-inventario .iv-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px){
  #rp-view-inventario{
    padding:10px 14px 24px;
  }

  #rp-view-inventario .iv-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #rp-view-inventario .iv-toolbar-left{
    grid-template-columns: 1fr;
  }

  #rp-view-inventario .iv-form-grid{
    grid-template-columns: 1fr;
  }

  #rp-view-inventario .iv-modal{
    padding:10px;
  }

  #rp-view-inventario .iv-modal-card{
    width:100%;
    max-height:92vh;
    border-radius:22px;
  }

  #rp-view-inventario .iv-modal-actions{
    flex-direction:column;
    align-items:stretch;
  }

  #rp-view-inventario .iv-modal-actions-right{
    width:100%;
  }

  #rp-view-inventario .iv-modal-actions-right > *{
    flex:1 1 auto;
  }
}

@media (max-width: 640px){
  #rp-view-inventario .iv-cards{
    grid-template-columns: 1fr;
  }

  #rp-view-inventario .iv-head{
    margin-bottom:16px;
  }

  #rp-view-inventario .iv-title{
    font-size:28px;
  }

  #rp-view-inventario .iv-panel-head,
  #rp-view-inventario .iv-form,
  #rp-view-inventario .iv-alerts-grid{
    padding-left:16px;
    padding-right:16px;
  }
}



/* ============================================================
   🔔 TOAST GLOBAL (SUCCESS / ERROR)
   - Desktop: abajo derecha
   - Tablet / móvil: abajo, arriba del bottom nav
   - Animación: entra de abajo hacia arriba / sale hacia abajo
   ============================================================ */
.goournet-panel{
  --sa-toast-z: 1200;
  --sa-toast-side: 16px;
  --sa-toast-bottom-desktop: 18px;
  --sa-toast-bottom-mobile: calc(96px + env(safe-area-inset-bottom));
  --sa-toast-radius: 20px;
  --sa-toast-shadow:
    0 20px 48px rgba(0,0,0,.22),
    0 8px 18px rgba(17,17,17,.14);
  --sa-toast-open-ease: cubic-bezier(.22, 1, .36, 1);
}

.goournet-panel .sa-toast-root{
  position: fixed;
  right: var(--sa-toast-side);
  bottom: var(--sa-toast-bottom-desktop);
  z-index: var(--sa-toast-z);
  width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}

.goournet-panel .sa-toast{
  --sa-toast-bg-1: #17a85a;
  --sa-toast-bg-2: #0e7f44;
  --sa-toast-ring: rgba(255,255,255,.22);
  --sa-toast-soft: rgba(255,255,255,.16);

  pointer-events: auto;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px) scale(.985);
  transform-origin: bottom right;
  transition:
    transform .34s var(--sa-toast-open-ease),
    opacity .22s ease,
    visibility 0s linear .34s;
  will-change: transform, opacity;
}

.goournet-panel .sa-toast--visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.goournet-panel .sa-toast[data-type="success"]{
  --sa-toast-bg-1: #17a85a;
  --sa-toast-bg-2: #0e7f44;
  --sa-toast-ring: rgba(220,255,232,.24);
  --sa-toast-soft: rgba(255,255,255,.16);
}

.goournet-panel .sa-toast[data-type="error"]{
  --sa-toast-bg-1: #df3a3a;
  --sa-toast-bg-2: #b91f1f;
  --sa-toast-ring: rgba(255,224,224,.20);
  --sa-toast-soft: rgba(255,255,255,.14);
}

.goournet-panel .sa-toast-body{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 12px 12px 12px 10px;
  border-radius: var(--sa-toast-radius);
  border: 1px solid var(--sa-toast-ring);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%),
    linear-gradient(135deg, var(--sa-toast-bg-1) 0%, var(--sa-toast-bg-2) 100%);
  box-shadow: var(--sa-toast-shadow);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(10px) saturate(1.02);
  -webkit-backdrop-filter: blur(10px) saturate(1.02);
}

.goournet-panel .sa-toast-body::after{
  content: "";
  position: absolute;
  inset: auto -28px -28px auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 68%);
  pointer-events: none;
  z-index: -1;
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .goournet-panel .sa-toast-body{
    background: linear-gradient(135deg, var(--sa-toast-bg-1) 0%, var(--sa-toast-bg-2) 100%);
  }
}

.goournet-panel .sa-toast-icon{
  width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--sa-toast-soft);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.goournet-panel .sa-toast-lottie{
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
}

.goournet-panel .sa-toast-text{
  min-width: 0;
  display: grid;
  gap: 4px;
}

.goournet-panel .sa-toast-title{
  margin: 0;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #fff;
}

.goournet-panel .sa-toast-message{
  margin: 0;
  font-size: .84rem;
  line-height: 1.35;
  font-weight: 400;
  color: rgba(255,255,255,.94);
}

.goournet-panel .sa-toast-close{
  appearance: none;
  align-self: start;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform .14s ease,
    background .18s ease,
    opacity .18s ease;
}

@media (hover: hover) and (pointer: fine){
  .goournet-panel .sa-toast-close:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.24);
  }
}

.goournet-panel .sa-toast-close:active{
  transform: translateY(0);
}

.goournet-panel .sa-toast-close:focus-visible{
  outline: 2px solid rgba(255,255,255,.92);
  outline-offset: 2px;
}

@media (max-width: 1024px){
  .goournet-panel{
    --sa-toast-side: 8px;
    --sa-toast-bottom-mobile: calc(98px + env(safe-area-inset-bottom));
  }

  .goournet-panel .sa-toast-root{
    left: var(--sa-toast-side);
    right: var(--sa-toast-side);
    bottom: var(--sa-toast-bottom-mobile);
    width: auto;
  }

  .goournet-panel .sa-toast{
    max-width: min(680px, 100%);
    margin: 0 auto;
    transform-origin: bottom center;
  }
}

@media (max-width: 600px){
  .goournet-panel{
    --sa-toast-bottom-mobile: calc(92px + env(safe-area-inset-bottom));
  }

  .goournet-panel .sa-toast-body{
    min-height: 76px;
    padding: 10px 10px 10px 8px;
    gap: 10px;
    border-radius: 18px;
  }

  .goournet-panel .sa-toast-icon{
    width: 54px;
    min-width: 54px;
    height: 54px;
    border-radius: 16px;
  }

  .goournet-panel .sa-toast-title{
    font-size: .92rem;
  }

  .goournet-panel .sa-toast-message{
    font-size: .78rem;
  }

  .goournet-panel .sa-toast-close{
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
}

@media (prefers-reduced-motion: reduce){
  .goournet-panel .sa-toast{
    transition: opacity .18s ease, visibility 0s linear .18s;
    transform: none;
  }

  .goournet-panel .sa-toast--visible{
    transform: none;
  }

  .goournet-panel .sa-toast-close{
    transition: background .18s ease, opacity .18s ease;
  }
}





/* ============================================================
   ⏳ LOADER DE ARRANQUE · GOOURNET
   - Fondo oscuro limpio
   - Solo logo centrado
   - Sin card / sin texto
   - Pulso suave + reflejo horizontal
   ============================================================ */
body.sa-booting .goournet-panel,
.goournet-panel.sa-booting{
  overflow: hidden;
}

.goournet-panel .sa-boot-loader{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(224, 43, 43, .10), rgba(224, 43, 43, 0) 28%),
    linear-gradient(180deg, #030303 0%, #0a0a0a 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .28s ease,
    visibility 0s linear .28s;
}

html.sa-login-boot .goournet-panel .sa-boot-loader{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.goournet-panel .sa-boot-loader__logo-wrap{
  position: relative;
  display: inline-grid;
  place-items: center;
  width: min(220px, 62vw);
  isolation: isolate;
}

.goournet-panel .sa-boot-loader__logo-wrap::before{
  content: "";
  position: absolute;
  inset: 12% 10%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 72%);
  filter: blur(16px);
  opacity: .55;
  z-index: -1;
}

.goournet-panel .sa-boot-loader__logo-wrap::after{
  content: "";
  position: absolute;
  top: -14%;
  bottom: -14%;
  left: -12%;
  width: 38%;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.08) 35%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,.08) 65%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-180%) skewX(-16deg);
  filter: blur(3px);
  mix-blend-mode: screen;
  pointer-events: none;
}

html.sa-login-boot .goournet-panel .sa-boot-loader__logo-wrap::after{
  animation: saBootShine 2.8s linear infinite;
}

.goournet-panel .sa-boot-loader__logo{
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  transform-origin: center;
  filter:
    brightness(1.03)
    saturate(1.02)
    drop-shadow(0 10px 26px rgba(255,255,255,.05))
    drop-shadow(0 12px 34px rgba(224, 43, 43, .14));
}

html.sa-login-boot .goournet-panel .sa-boot-loader__logo{
  animation: saBootPulse 1.9s cubic-bezier(.22, 1, .36, 1) infinite;
}

@keyframes saBootPulse{
  0%, 100%{
    transform: scale(.94);
    opacity: .96;
  }
  50%{
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes saBootShine{
  0%{
    transform: translateX(-190%) skewX(-16deg);
    opacity: 0;
  }
  14%{
    opacity: .95;
  }
  45%{
    opacity: .9;
  }
  100%{
    transform: translateX(310%) skewX(-16deg);
    opacity: 0;
  }
}

@media (max-width: 600px){
  .goournet-panel .sa-boot-loader__logo-wrap{
    width: min(180px, 58vw);
  }

  .goournet-panel .sa-boot-loader__logo{
    max-width: 180px;
  }
}

@media (prefers-reduced-motion: reduce){
  .goournet-panel .sa-boot-loader,
  .goournet-panel .sa-boot-loader__logo,
  .goournet-panel .sa-boot-loader__logo-wrap::after{
    transition: none;
    animation: none;
  }

  .goournet-panel .sa-boot-loader__logo{
    transform: none;
  }
}
/* ============================================================
   RECETAS · Fase 1
   Scope: SOLO #rp-view-recetas
   ============================================================ */
#rp-view-recetas[hidden]{
  display:none !important;
}

#rp-view-recetas:not([hidden]){
  --rc-border: rgba(15, 23, 42, 0.10);
  --rc-border-strong: rgba(15, 23, 42, 0.16);
  --rc-surface: #ffffff;
  --rc-surface-soft: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  --rc-text-soft: #5b6476;
  --rc-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  --rc-accent: #0f766e;
  --rc-accent-soft: rgba(15, 118, 110, 0.10);
  --rc-warn: #b45309;
  --rc-warn-soft: rgba(245, 158, 11, 0.14);
  --rc-danger: #b91c1c;
  --rc-danger-soft: rgba(239, 68, 68, 0.12);
  width:100%;
  margin:0;
  padding:10px 30px 28px;
  display:grid;
  gap:20px;
  align-content:start;
}

#rp-view-recetas .rc-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

#rp-view-recetas .rc-title{
  margin:0 0 6px;
  font-size:clamp(1.55rem, 2vw, 2rem);
  font-weight:800;
  letter-spacing:-0.03em;
}

#rp-view-recetas .rc-sub{
  margin:0;
  color:var(--rc-text-soft);
  max-width:760px;
}

#rp-view-recetas .rc-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px;
}

#rp-view-recetas .rc-card{
  background:var(--rc-surface-soft);
  border:1px solid var(--rc-border);
  border-radius:20px;
  box-shadow:var(--rc-shadow);
  padding:18px;
  display:grid;
  gap:8px;
}

#rp-view-recetas .rc-card-k{
  color:var(--rc-text-soft);
  font-size:.9rem;
  font-weight:600;
}

#rp-view-recetas .rc-card-v{
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:-0.03em;
}

#rp-view-recetas .rc-card-s{
  color:var(--rc-text-soft);
  font-size:.85rem;
}

#rp-view-recetas .rc-toolbar{
  display:flex;
  gap:12px;
}

#rp-view-recetas .rc-toolbar-left{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

#rp-view-recetas .rc-field{
  min-width:180px;
  display:grid;
  gap:6px;
}

#rp-view-recetas .rc-field--grow{
  flex:1 1 300px;
}

#rp-view-recetas .rc-field > span{
  font-size:.82rem;
  font-weight:700;
  color:var(--rc-text-soft);
  text-transform:uppercase;
  letter-spacing:.04em;
}

#rp-view-recetas .rc-field input,
#rp-view-recetas .rc-field select{
  width:100%;
  min-height:44px;
  border-radius:14px;
  border:1px solid var(--rc-border-strong);
  background:#fff;
  padding:0 14px;
  font:inherit;
}

#rp-view-recetas .rc-field input:focus,
#rp-view-recetas .rc-field select:focus{
  outline:none;
  border-color:rgba(15, 118, 110, 0.45);
  box-shadow:0 0 0 4px rgba(15, 118, 110, 0.10);
}

#rp-view-recetas .rc-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(280px, .9fr);
  gap:18px;
  align-items:start;
}

#rp-view-recetas .rc-panel{
  background:var(--rc-surface);
  border:1px solid var(--rc-border);
  border-radius:24px;
  box-shadow:var(--rc-shadow);
}

#rp-view-recetas .rc-panel-head{
  padding:20px 22px 14px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

#rp-view-recetas .rc-panel-head h3{
  margin:0 0 4px;
  font-size:1.05rem;
  font-weight:800;
}

#rp-view-recetas .rc-panel-head p{
  margin:0;
  color:var(--rc-text-soft);
  font-size:.92rem;
}

#rp-view-recetas .rc-table-wrap{
  overflow:auto;
  padding:0 18px 18px;
}

#rp-view-recetas .rc-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:920px;
}

#rp-view-recetas .rc-table th,
#rp-view-recetas .rc-table td{
  padding:14px 12px;
  border-bottom:1px solid rgba(15, 23, 42, 0.06);
  vertical-align:middle;
  text-align:left;
}

#rp-view-recetas .rc-table th{
  position:sticky;
  top:0;
  background:#fff;
  z-index:1;
  font-size:.78rem;
  color:var(--rc-text-soft);
  text-transform:uppercase;
  letter-spacing:.04em;
}

#rp-view-recetas .rc-row-btn{
  margin-right:8px;
  margin-bottom:6px;
}

#rp-view-recetas .rc-empty{
  padding:0 22px 22px;
  display:grid;
  gap:6px;
  color:var(--rc-text-soft);
}

#rp-view-recetas .rc-empty strong{
  color:#0f172a;
  font-size:1rem;
}

#rp-view-recetas .rc-alerts-grid{
  display:grid;
  gap:14px;
  padding:0 18px 18px;
}

#rp-view-recetas .rc-alert-card{
  border-radius:18px;
  border:1px solid var(--rc-border);
  padding:16px;
  display:grid;
  gap:12px;
  background:#fff;
}

#rp-view-recetas .rc-alert-card--neutral{
  background:linear-gradient(180deg, rgba(15, 118, 110, 0.05), rgba(255,255,255,0.98));
}

#rp-view-recetas .rc-alert-card--warn{
  background:linear-gradient(180deg, rgba(245, 158, 11, 0.09), rgba(255,255,255,0.98));
}

#rp-view-recetas .rc-alert-card--danger{
  background:linear-gradient(180deg, rgba(239, 68, 68, 0.10), rgba(255,255,255,0.98));
}

#rp-view-recetas .rc-alert-title{
  font-weight:800;
  font-size:.95rem;
}

#rp-view-recetas .rc-alert-list{
  display:grid;
  gap:10px;
}

#rp-view-recetas .rc-alert-item{
  display:grid;
  gap:2px;
}

#rp-view-recetas .rc-alert-item strong{
  font-size:.92rem;
}

#rp-view-recetas .rc-alert-item span,
#rp-view-recetas .rc-alert-empty{
  color:var(--rc-text-soft);
  font-size:.85rem;
}

#rp-view-recetas .rc-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}

#rp-view-recetas .rc-badge--recipe.is-lista,
#rp-view-recetas .rc-badge--availability.is-disponible{
  background:var(--rc-accent-soft);
  color:var(--rc-accent);
}

#rp-view-recetas .rc-badge--recipe.is-incompleta,
#rp-view-recetas .rc-badge--availability.is-en-riesgo{
  background:var(--rc-warn-soft);
  color:var(--rc-warn);
}

#rp-view-recetas .rc-badge--recipe.is-sin-receta,
#rp-view-recetas .rc-badge--availability.is-bloqueada{
  background:var(--rc-danger-soft);
  color:var(--rc-danger);
}

#rp-view-recetas .rc-badge--availability.is-none{
  background:rgba(148, 163, 184, 0.16);
  color:#475569;
}

#rp-view-recetas .rc-modal[hidden]{
  display:none !important;
}

#rp-view-recetas .rc-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:24px;
}

#rp-view-recetas .rc-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15, 23, 42, 0.55);
  backdrop-filter:blur(2px);
}

#rp-view-recetas .rc-modal-card{
  position:relative;
  width:min(1120px, 100%);
  max-height:min(88vh, 900px);
  overflow:auto;
  background:#fff;
  border-radius:26px;
  border:1px solid rgba(255,255,255,0.35);
  box-shadow:0 30px 80px rgba(15, 23, 42, 0.22);
}

#rp-view-recetas .rc-modal-card--summary{
  width:min(860px, 100%);
}

#rp-view-recetas .rc-modal-head{
  padding:22px 24px 16px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

#rp-view-recetas .rc-modal-copy h3{
  margin:0 0 4px;
  font-size:1.2rem;
  font-weight:800;
}

#rp-view-recetas .rc-modal-sub{
  margin:0;
  color:var(--rc-text-soft);
}

#rp-view-recetas .rc-modal-close{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--rc-border);
  background:#fff;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}

#rp-view-recetas .rc-form{
  display:grid;
  gap:18px;
  padding:0 24px 24px;
}

#rp-view-recetas .rc-editor-top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}

#rp-view-recetas .rc-editor-product-name{
  font-size:1.1rem;
  font-weight:800;
}

#rp-view-recetas .rc-editor-product-cat{
  margin-top:4px;
  color:var(--rc-text-soft);
}

#rp-view-recetas .rc-editor-state{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

#rp-view-recetas .rc-editor-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:12px;
}

#rp-view-recetas .rc-editor-kpi{
  border:1px solid var(--rc-border);
  border-radius:16px;
  padding:14px;
  display:grid;
  gap:6px;
  background:var(--rc-surface-soft);
}

#rp-view-recetas .rc-editor-kpi span{
  color:var(--rc-text-soft);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
}

#rp-view-recetas .rc-editor-kpi strong{
  font-size:1.05rem;
}

#rp-view-recetas .rc-editor-lines{
  display:grid;
  gap:14px;
}

#rp-view-recetas .rc-editor-row{
  border:1px solid var(--rc-border);
  border-radius:20px;
  padding:16px;
  display:grid;
  grid-template-columns:minmax(220px, 2fr) repeat(5, minmax(100px, 1fr)) 120px;
  gap:12px;
  background:#fff;
}

#rp-view-recetas .rc-editor-cell{
  display:grid;
  gap:6px;
}

#rp-view-recetas .rc-editor-cell--actions{
  align-content:start;
}

#rp-view-recetas .rc-editor-label{
  font-size:.78rem;
  font-weight:800;
  color:var(--rc-text-soft);
  text-transform:uppercase;
  letter-spacing:.04em;
}

#rp-view-recetas .rc-editor-select,
#rp-view-recetas .rc-editor-input{
  width:100%;
  min-height:42px;
  border-radius:12px;
  border:1px solid var(--rc-border-strong);
  padding:0 12px;
  font:inherit;
  background:#fff;
}

#rp-view-recetas .rc-editor-readonly{
  min-height:42px;
  border-radius:12px;
  border:1px dashed var(--rc-border-strong);
  background:#f8fafc;
  display:flex;
  align-items:center;
  padding:0 12px;
  font-weight:600;
}

#rp-view-recetas .rc-editor-warn{
  grid-column:1 / -1;
  font-size:.84rem;
  color:var(--rc-warn);
}

#rp-view-recetas .rc-editor-tools{
  display:flex;
  justify-content:flex-start;
}

#rp-view-recetas .rc-inline-msg{
  min-height:22px;
  color:var(--rc-text-soft);
}

#rp-view-recetas .rc-inline-msg[data-tone="error"]{
  color:var(--rc-danger);
}

#rp-view-recetas .rc-modal-actions{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
}

#rp-view-recetas .rc-modal-actions-right{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

#rp-view-recetas .rc-summary-body{
  padding:0 24px 24px;
  display:grid;
  gap:16px;
}

#rp-view-recetas .rc-summary-top{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
}

#rp-view-recetas .rc-summary-pill{
  border:1px solid var(--rc-border);
  border-radius:16px;
  padding:14px;
  background:var(--rc-surface-soft);
  display:grid;
  gap:6px;
}

#rp-view-recetas .rc-summary-pill span{
  color:var(--rc-text-soft);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
}

#rp-view-recetas .rc-summary-lines{
  display:grid;
  gap:12px;
}

#rp-view-recetas .rc-summary-line{
  display:grid;
  grid-template-columns:minmax(180px, 2fr) repeat(3, minmax(90px, 1fr)) minmax(120px, 1.2fr);
  gap:10px;
  border:1px solid var(--rc-border);
  border-radius:16px;
  padding:14px;
}

#rp-view-recetas .rc-summary-line-name{
  font-weight:800;
}

#rp-view-recetas .rc-summary-line-meta,
#rp-view-recetas .rc-summary-line-flag,
#rp-view-recetas .rc-summary-empty{
  color:var(--rc-text-soft);
  font-size:.9rem;
}

#rp-view-recetas .rc-summary-line-price{
  font-weight:800;
}

@media (max-width: 1180px){
  #rp-view-recetas .rc-grid{
    grid-template-columns:1fr;
  }

  #rp-view-recetas .rc-editor-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  #rp-view-recetas:not([hidden]){
    padding:8px 16px 20px;
  }

  #rp-view-recetas .rc-cards{
    grid-template-columns:1fr 1fr;
  }

  #rp-view-recetas .rc-toolbar-left{
    flex-direction:column;
  }

  #rp-view-recetas .rc-field,
  #rp-view-recetas .rc-field--grow{
    min-width:0;
    width:100%;
  }

  #rp-view-recetas .rc-editor-top,
  #rp-view-recetas .rc-modal-actions{
    flex-direction:column;
    align-items:stretch;
  }

  #rp-view-recetas .rc-editor-state,
  #rp-view-recetas .rc-modal-actions-right{
    justify-content:flex-start;
  }

  #rp-view-recetas .rc-editor-row,
  #rp-view-recetas .rc-summary-line{
    grid-template-columns:1fr;
  }
}

/* ==========================================================
   👨‍🍳 SECCIÓN: COCINA (solo #rp-view-cocina)
   - Vista operativa conectada a la misma colección `ordenes`
   - No muestra caja, métricas ni finanzas como protagonista
   ========================================================== */
#rp-view-cocina{
  --kitchen-text: #111111;
  --kitchen-muted: rgba(17,17,17,.62);
  --kitchen-surface: #ffffff;
  --kitchen-bg: #f5f6f8;
  --kitchen-border: rgba(17,17,17,.08);
  --kitchen-shadow: 0 10px 20px rgba(17,17,17,.04);
  --kitchen-red1: #e03131;
  --kitchen-red2: #ff4d4d;
  --kitchen-amber1: #f59e0b;
  --kitchen-amber2: #ffbc42;
  --kitchen-blue1: #2563eb;
  --kitchen-blue2: #4f8cff;
  --kitchen-green1: #16a34a;
  --kitchen-green2: #22c55e;
  padding: 12px 20px 26px;
  background: var(--kitchen-bg);
}

#rp-view-cocina .rp-btn{
  appearance: none;
  border: 1.5px solid transparent;
  background: var(--kitchen-surface);
  color: var(--kitchen-text);
  border-radius: 999px;
  min-height: 42px;
  padding: 10px 15px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: .92rem;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease, background .16s ease, color .16s ease, opacity .12s ease;
}

#rp-view-cocina .rp-btn:hover{ border-color: rgba(17,17,17,.24); }
#rp-view-cocina .rp-btn:active{ transform: translateY(1px); }
#rp-view-cocina .rp-btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#rp-view-cocina .rp-btn-ghost{
  border-color: rgba(17,17,17,.10);
}

#rp-view-cocina .rp-btn-primary{
  background: linear-gradient(135deg, var(--kitchen-red1) 0%, var(--kitchen-red2) 100%);
  color: #fff;
  border-color: rgba(0,0,0,.10);
  box-shadow: none;
}

#rp-view-cocina .rp-kitchen-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 6px 0 16px;
}

#rp-view-cocina .rp-kitchen-head-copy{
  min-width: 0;
}

#rp-view-cocina .rp-kitchen-title{
  margin: 0;
  color: var(--kitchen-text);
  font-weight: 780;
  letter-spacing: -0.02em;
  font-size: clamp(1.2rem, 1.08rem + .6vw, 1.68rem);
}

#rp-view-cocina .rp-kitchen-subtitle{
  margin: 8px 0 0;
  color: var(--kitchen-muted);
  max-width: 760px;
  line-height: 1.35;
  font-size: .96rem;
}

#rp-view-cocina .rp-kitchen-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

#rp-view-cocina .rp-kitchen-listwrap{
  margin-top: 10px;
}

#rp-view-cocina .rp-kitchen-list{
  display: grid;
  gap: 12px;
}

@media (min-width: 0px){
  #rp-view-cocina .rp-kitchen-list{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

@media (min-width: 700px){
  #rp-view-cocina .rp-kitchen-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px){
  #rp-view-cocina .rp-kitchen-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px){
  #rp-view-cocina .rp-kitchen-list{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

#rp-view-cocina .rp-kitchen-card{
  border-radius: 18px;
  border: 1.5px solid rgba(17,17,17,.08);
  background: #fff;
  box-shadow: 0 8px 16px rgba(17,17,17,.03);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

@media (min-width: 1024px){
  #rp-view-cocina .rp-kitchen-card{
    height: 392px;
  }
}

#rp-view-cocina .rp-kitchen-card[data-modo="delivery"]{
  --kitchen-accent: #e03131;
}

#rp-view-cocina .rp-kitchen-card[data-modo="mesa"]{
  --kitchen-accent: #2563eb;
}

#rp-view-cocina .rp-kitchen-card[data-modo="encamino"]{
  --kitchen-accent: #f59e0b;
}

#rp-view-cocina .rp-kitchen-card[data-modo="recojo"]{
  --kitchen-accent: #10b981;
}

#rp-view-cocina .rp-kitchen-card:hover{
  border-color: rgba(17,17,17,.18);
  box-shadow: 0 10px 18px rgba(17,17,17,.05);
}

#rp-view-cocina .rp-kitchen-card-head{
  display: grid;
  gap: 8px;
}

#rp-view-cocina .rp-kitchen-ticket{
  color: #fff;
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-align: center;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 14px;
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.28), transparent 42%),
    linear-gradient(135deg, #111827 0%, #0f172a 52%, #020617 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 18px rgba(15,23,42,.12);
}

#rp-view-cocina .rp-kitchen-time-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#rp-view-cocina .rp-kitchen-time-line{
  color: var(--kitchen-muted);
  font-size: .82rem;
  line-height: 1.2;
  min-width:0;
  flex:1 1 auto;
}

#rp-view-cocina .rp-kitchen-timer-line{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(17,17,17,.04);
  color: rgba(17,17,17,.82);
  font-size: .8rem;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}

#rp-view-cocina .rp-kitchen-timer-line::before{
  content:"";
  width:14px;
  height:14px;
  flex:0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='7.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 13V9.5M12 13l2.5 1.8M9 3h6M12 3v2.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='7.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 13V9.5M12 13l2.5 1.8M9 3h6M12 3v2.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

#rp-view-cocina .rp-kitchen-status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(17,17,17,.08);
}

#rp-view-cocina .rp-kitchen-card-body{
  display: grid;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  padding-top: 2px;
  align-content: start;
  justify-items: stretch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(17,17,17,.16) transparent;
}

#rp-view-cocina .rp-kitchen-card-body::-webkit-scrollbar{
  width: 6px;
}

#rp-view-cocina .rp-kitchen-card-body::-webkit-scrollbar-track{
  background: transparent;
}

#rp-view-cocina .rp-kitchen-card-body::-webkit-scrollbar-thumb{
  background: rgba(17,17,17,.14);
  border-radius: 999px;
}

#rp-view-cocina .rp-kitchen-card-body::-webkit-scrollbar-thumb:hover{
  background: rgba(17,17,17,.22);
}

#rp-view-cocina .rp-kitchen-state{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  min-height: 28px;
  border-radius: 999px;
  color: #fff;
  font-size: .74rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}

#rp-view-cocina .rp-kitchen-state[data-state="pendiente"]{
  background: linear-gradient(135deg, var(--kitchen-amber1) 0%, var(--kitchen-amber2) 100%);
}

#rp-view-cocina .rp-kitchen-state[data-state="en_preparacion"]{
  background: linear-gradient(135deg, var(--kitchen-blue1) 0%, var(--kitchen-blue2) 100%);
}

#rp-view-cocina .rp-kitchen-state[data-state="lista"]{
  background: linear-gradient(135deg, var(--kitchen-green1) 0%, var(--kitchen-green2) 100%);
}

#rp-view-cocina .rp-kitchen-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

#rp-view-cocina .rp-kitchen-chip{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(17,17,17,.04);
  color: rgba(17,17,17,.82);
  font-size: .78rem;
  font-weight: 700;
}

#rp-view-cocina .rp-kitchen-chip[data-modo="delivery"]{
  color: #fff;
  background: linear-gradient(135deg, #e03131 0%, #ff4d4d 100%);
  border-color: transparent;
}

#rp-view-cocina .rp-kitchen-chip[data-modo="mesa"]{
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #4f8cff 100%);
  border-color: transparent;
}

#rp-view-cocina .rp-kitchen-chip[data-modo="encamino"]{
  color: #fff;
  background: linear-gradient(135deg, #f59e0b 0%, #ffbc42 100%);
  border-color: transparent;
}

#rp-view-cocina .rp-kitchen-chip[data-modo="recojo"]{
  color: #fff;
  background: linear-gradient(135deg, #10b981 0%, #23d39a 100%);
  border-color: transparent;
}

#rp-view-cocina .rp-kitchen-chip--mesa{
  background: rgba(37,99,235,.08);
  color: #1d4ed8;
  border-color: rgba(37,99,235,.14);
}

#rp-view-cocina .rp-kitchen-items{
  display: grid;
  gap: 9px;
}

#rp-view-cocina .rp-kitchen-item{
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

#rp-view-cocina .rp-kitchen-item-qty{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(17,17,17,.06);
  border: 1px solid rgba(17,17,17,.08);
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}

#rp-view-cocina .rp-kitchen-item-content{
  min-width: 0;
}

#rp-view-cocina .rp-kitchen-item-name{
  color: var(--kitchen-text);
  font-size: .89rem;
  font-weight: 750;
  line-height: 1.22;
}

#rp-view-cocina .rp-kitchen-item-note{
  margin-top: 4px;
  color: var(--kitchen-muted);
  font-size: .8rem;
  line-height: 1.3;
  white-space: pre-wrap;
}

#rp-view-cocina .rp-kitchen-item-note-label{
  color: rgba(17,17,17,.78);
  font-weight: 800;
}

#rp-view-cocina .rp-kitchen-item-note-text{
  color: var(--kitchen-muted);
}

#rp-view-cocina .rp-kitchen-item-groups{
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

#rp-view-cocina .rp-kitchen-item-group{
  color: var(--kitchen-muted);
  font-size: .79rem;
  line-height: 1.32;
  white-space: pre-wrap;
}

#rp-view-cocina .rp-kitchen-item-group-name{
  color: rgba(17,17,17,.78);
  font-size: .79rem;
  font-weight: 800;
  line-height: inherit;
  text-transform: none;
  letter-spacing: 0;
}

#rp-view-cocina .rp-kitchen-item-group-text{
  color: var(--kitchen-muted);
}

#rp-view-cocina .rp-kitchen-notes{
  display: grid;
  gap: 10px;
}

#rp-view-cocina .rp-kitchen-note-block{
  border-radius: 12px;
  border: 1px dashed rgba(17,17,17,.14);
  background: #f8fafc;
  padding: 8px 10px;
}

#rp-view-cocina .rp-kitchen-note-label{
  display: block;
  color: rgba(17,17,17,.72);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#rp-view-cocina .rp-kitchen-note-text{
  margin-top: 4px;
  color: var(--kitchen-text);
  font-size: .83rem;
  line-height: 1.34;
  white-space: pre-wrap;
}

#rp-view-cocina .rp-kitchen-card-actions{
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(17,17,17,.08);
  align-items:center;
  justify-content:center;
  min-height: 40px;
}

#rp-view-cocina .rp-kitchen-action-btn{
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #fff;
  color: #222;
  border: 1.5px solid rgba(17,17,17,.10);
  box-shadow: none;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

#rp-view-cocina .rp-kitchen-action-btn::before{
  content:"";
  width:16px;
  height:16px;
  background-color: currentColor;
  -webkit-mask: var(--rp-kitchen-ico) center/contain no-repeat;
          mask: var(--rp-kitchen-ico) center/contain no-repeat;
}

#rp-view-cocina .rp-kitchen-action-btn[data-kitchen-act="start"]{
  --rp-kitchen-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

#rp-view-cocina .rp-kitchen-action-btn[data-kitchen-act="ready"]{
  --rp-kitchen-ico: url("https://goournet.com/wp-content/uploads/2026/04/campana-cocina.svg");
}

#rp-view-cocina .rp-kitchen-action-btn:hover{
  transform: translateY(-1px);
  border-color:#111;
  background: rgba(17,17,17,.03);
}

#rp-view-cocina .rp-kitchen-action-btn[data-kitchen-act="ready"]:not(:disabled){
  background: linear-gradient(135deg, var(--kitchen-green1) 0%, var(--kitchen-green2) 100%);
  color: #fff;
  border-color: transparent;
}

#rp-view-cocina .rp-kitchen-action-btn[data-kitchen-act="ready"]:not(:disabled):hover{
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  border-color: transparent;
}

#rp-view-cocina .rp-kitchen-action-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

#rp-view-cocina .rp-kitchen-action-btn[data-kitchen-act="start"]:disabled{
  color:#94a3b8;
}

#rp-view-cocina .rp-kitchen-action-btn[data-kitchen-act="ready"]:disabled{
  color:#94a3b8;
}

#rp-view-cocina .rp-kitchen-action-btn:active{
  transform: translateY(0);
}

#rp-view-cocina .rp-kitchen-action-btn[data-kitchen-act="start"]:active:not(:disabled){
  background: rgba(37,99,235,.10);
  color:#1d4ed8;
  border-color: rgba(37,99,235,.18);
}

#rp-view-cocina .rp-kitchen-action-btn[data-kitchen-act="ready"]:active:not(:disabled){
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  color:#fff;
  border-color: transparent;
}

#rp-view-cocina .rp-kitchen-empty{
  border-radius: 18px;
  border: 1.5px dashed rgba(17,17,17,.12);
  background: rgba(255,255,255,.75);
  color: var(--kitchen-muted);
}

#rp-view-cocina .rp-kitchen-empty{
  padding: 28px 22px;
  text-align: center;
}

#rp-view-cocina .rp-kitchen-empty-title{
  color: var(--kitchen-text);
  font-size: 1.04rem;
  font-weight: 780;
}

#rp-view-cocina .rp-kitchen-empty-sub{
  margin-top: 8px;
  font-size: .92rem;
  line-height: 1.4;
}

#rp-view-cocina .rp-kitchen-muted{
  color: var(--kitchen-muted);
  font-size: .84rem;
}

#rp-view-cocina .rp-kitchen-ready-note{
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.16);
  color: #047857;
  font-weight: 760;
  font-size: .9rem;
}

@media (max-width: 760px){
  #rp-view-cocina{
    padding: 10px 16px 22px;
  }

  #rp-view-cocina .rp-kitchen-head{
    flex-direction: column;
    align-items: stretch;
  }

  #rp-view-cocina .rp-kitchen-actions{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #rp-view-cocina .rp-kitchen-time-row,
  #rp-view-cocina .rp-kitchen-status-row{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  #rp-view-cocina .rp-kitchen-card-actions{
    justify-content:center;
  }
}

/* =========================================================
   CIERRE DE CAJA - FASE 1
   Scope: SOLO #rp-view-ordenes #rp-cash-close-modal
   ========================================================= */

#rp-view-ordenes .rp-cash-session-strip{
  display:grid;
  gap:12px;
  margin:0 0 18px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:0 16px 34px rgba(15, 23, 42, 0.06);
}

#rp-view-ordenes .rp-cash-session-strip-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

#rp-view-ordenes .rp-cash-session-strip-title{
  color:#0f172a;
  font-size:14px;
  font-weight:900;
  letter-spacing:.01em;
}

#rp-view-ordenes .rp-cash-session-strip-status{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  background:#e2e8f0;
  color:#334155;
}

#rp-view-ordenes .rp-cash-session-strip-status[data-state="open"]{
  background:rgba(34, 197, 94, 0.14);
  color:#166534;
}

#rp-view-ordenes .rp-cash-session-strip-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
}

#rp-view-ordenes .rp-cash-session-item{
  display:grid;
  gap:6px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(15, 23, 42, 0.08);
  background:rgba(255,255,255,.86);
}

#rp-view-ordenes .rp-cash-session-item-k{
  font-size:12px;
  font-weight:800;
  color:#64748b;
}

#rp-view-ordenes .rp-cash-session-item-v{
  font-size:14px;
  font-weight:800;
  color:#0f172a;
  line-height:1.35;
}

#rp-view-ordenes .rp-cash-session-empty{
  padding:12px 14px;
  border-radius:16px;
  background:#f8fafc;
  color:#475569;
  font-size:13px;
  font-weight:700;
}

#rp-view-ordenes #rp-cash-close-modal[hidden]{
  display:none !important;
}

#rp-view-ordenes #rp-cash-close-modal{
  position:fixed;
  inset:0;
  z-index:1900;
}

#rp-view-ordenes #rp-cash-close-modal .rp-ord-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15, 23, 42, 0.58);
  backdrop-filter:blur(3px);
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-card{
  position:relative;
  width:min(1120px, calc(100vw - 28px));
  height:min(900px, calc(100dvh - 28px));
  max-height:calc(100dvh - 28px);
  margin:0;
  border-color:rgba(15, 23, 42, 0.10);
  background:
    radial-gradient(circle at top left, rgba(15, 118, 110, 0.06), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-body{
  padding:20px 22px 24px;
  min-height:0;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  gap:18px;
  align-items:start;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-panel{
  display:grid;
  gap:14px;
  padding:18px;
  border:1px solid rgba(15, 23, 42, 0.08);
  border-radius:22px;
  background:#fff;
  box-shadow:0 18px 44px rgba(15, 23, 42, 0.07);
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-panel-title{
  font-size:16px;
  font-weight:800;
  color:#0f172a;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-subtitle{
  font-size:13px;
  font-weight:700;
  color:#334155;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-fields{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-field{
  display:grid;
  gap:6px;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-field--full{
  grid-column:1 / -1;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-field > span{
  font-size:12px;
  font-weight:700;
  color:#475569;
  letter-spacing:.01em;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-field input,
#rp-view-ordenes #rp-cash-close-modal .rp-close-field select,
#rp-view-ordenes #rp-cash-close-modal .rp-close-field textarea,
#rp-view-ordenes #rp-cash-close-modal .rp-close-arqueo-card--input input{
  width:100%;
  border:1px solid rgba(15, 23, 42, 0.12);
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
  color:#0f172a;
  font:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-field textarea{
  resize:vertical;
  min-height:108px;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-field input:hover,
#rp-view-ordenes #rp-cash-close-modal .rp-close-field select:hover,
#rp-view-ordenes #rp-cash-close-modal .rp-close-field textarea:hover,
#rp-view-ordenes #rp-cash-close-modal .rp-close-arqueo-card--input input:hover{
  border-color:rgba(15, 23, 42, 0.22);
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-field input:focus,
#rp-view-ordenes #rp-cash-close-modal .rp-close-field select:focus,
#rp-view-ordenes #rp-cash-close-modal .rp-close-field textarea:focus,
#rp-view-ordenes #rp-cash-close-modal .rp-close-arqueo-card--input input:focus{
  outline:none;
  border-color:#0f766e;
  box-shadow:0 0 0 4px rgba(15, 118, 110, 0.14);
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-help{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(15, 118, 110, 0.08);
  color:#0f5f59;
  font-size:13px;
  line-height:1.5;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-session-info{
  display:grid;
  gap:10px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(15, 23, 42, 0.08);
  background:#f8fafc;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-session-info--closing{
  background:rgba(15, 118, 110, 0.08);
  border-color:rgba(15, 118, 110, 0.12);
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-info{
  display:grid;
  gap:10px;
}

#rp-view-ordenes #rp-cash-close-modal .cc-info-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  font-size:13px;
}

#rp-view-ordenes #rp-cash-close-modal .cc-info-label{
  color:#64748b;
}

#rp-view-ordenes #rp-cash-close-modal .cc-info-value{
  color:#0f172a;
  text-align:right;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-summary-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

#rp-view-ordenes #rp-cash-close-modal .cc-summary-card{
  display:grid;
  gap:6px;
  padding:16px;
  border:1px solid rgba(15, 23, 42, 0.08);
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

#rp-view-ordenes #rp-cash-close-modal .cc-summary-card-k{
  font-size:12px;
  font-weight:700;
  color:#64748b;
}

#rp-view-ordenes #rp-cash-close-modal .cc-summary-card-v{
  font-size:26px;
  font-weight:800;
  color:#0f172a;
  line-height:1.1;
}

#rp-view-ordenes #rp-cash-close-modal .cc-summary-card-s{
  font-size:12px;
  color:#64748b;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-pay-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
}

#rp-view-ordenes #rp-cash-close-modal .cc-pay-item{
  display:grid;
  gap:6px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(15, 23, 42, 0.08);
  background:#f8fafc;
}

#rp-view-ordenes #rp-cash-close-modal .cc-pay-item-k{
  font-size:12px;
  color:#64748b;
}

#rp-view-ordenes #rp-cash-close-modal .cc-pay-item-v{
  font-size:16px;
  color:#0f172a;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-loading{
  padding:12px 14px;
  border-radius:14px;
  background:#eff6ff;
  color:#1d4ed8;
  font-weight:700;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-warnings{
  min-height:0;
  display:grid;
  gap:8px;
}

#rp-view-ordenes #rp-cash-close-modal .cc-warning-list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
  color:#92400e;
}

#rp-view-ordenes #rp-cash-close-modal .cc-warning-empty{
  padding:12px 14px;
  border-radius:14px;
  background:#f0fdf4;
  color:#166534;
  font-size:13px;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-duplicate-wrap{
  display:grid;
  gap:8px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(245, 158, 11, 0.20);
  background:rgba(245, 158, 11, 0.10);
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-duplicate-title{
  font-size:13px;
  font-weight:800;
  color:#92400e;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-duplicate-list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
  color:#92400e;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-check{
  display:grid;
  grid-template-columns:20px minmax(0, 1fr);
  gap:10px;
  align-items:start;
  font-size:13px;
  color:#78350f;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-check input{
  appearance:none;
  -webkit-appearance:none;
  inline-size:20px;
  block-size:20px;
  margin:0;
  border:1.5px solid rgba(180, 83, 9, 0.34);
  border-radius:6px;
  background:#fffdf7;
  box-shadow:0 1px 2px rgba(17,17,17,.04);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-check input::after{
  content:"";
  width:10px;
  height:6px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform .16s ease;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-check input:hover{
  border-color:rgba(180, 83, 9, 0.52);
  background:#fff7ed;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-check input:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(245, 158, 11, 0.18);
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-check input:checked{
  border-color:#b45309;
  background:#b45309;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-check input:checked::after{
  transform:rotate(-45deg) scale(1);
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-arqueo-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-arqueo-card{
  display:grid;
  gap:8px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(15, 23, 42, 0.08);
  background:#f8fafc;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-arqueo-card--input{
  align-content:start;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-arqueo-k{
  font-size:12px;
  font-weight:700;
  color:#64748b;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-arqueo-v{
  font-size:28px;
  line-height:1.1;
  color:#0f172a;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-arqueo-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  width:max-content;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-arqueo-state[data-state="ok"]{
  background:rgba(34, 197, 94, 0.14);
  color:#166534;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-arqueo-state[data-state="sobrante"]{
  background:rgba(59, 130, 246, 0.14);
  color:#1d4ed8;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-arqueo-state[data-state="faltante"]{
  background:rgba(239, 68, 68, 0.14);
  color:#b91c1c;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-foot{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:12px 16px;
  min-height:82px;
  padding:16px;
  border-top:1px solid rgba(15, 23, 42, 0.08);
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,249,252,0.98));
  box-shadow:0 -14px 30px rgba(15, 23, 42, 0.06);
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-footleft{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-msg{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-msg:empty{
  display:block;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-msg[data-tone="success"]{
  color:#166534;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-msg[data-tone="warning"]{
  color:#92400e;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-msg[data-tone="error"]{
  color:#b91c1c;
}

#rp-view-ordenes #rp-cash-close-modal .rp-close-footactions{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-left:auto;
}

#rp-view-ordenes #rp-cash-close-modal #cc-close-recalc.rp-btn{
  min-width:0;
  padding-inline:14px;
  flex:0 0 auto;
}

#rp-view-ordenes #rp-cash-close-modal #cc-close-save.rp-btn{
  min-width:170px;
  justify-content:center;
}

@media (max-width: 1100px){
  #rp-view-ordenes .rp-cash-session-strip-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  #rp-view-ordenes #rp-cash-close-modal .rp-close-grid{
    grid-template-columns:1fr;
  }

  #rp-view-ordenes #rp-cash-close-modal .rp-close-pay-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  #rp-view-ordenes .rp-cash-session-strip{
    padding:12px;
  }

  #rp-view-ordenes .rp-cash-session-strip-grid{
    grid-template-columns:1fr;
  }

  #rp-view-ordenes #rp-cash-close-modal .rp-close-card{
    width:min(100vw - 16px, 100%);
    height:90dvh;
    min-height:90dvh;
    max-height:90dvh;
    border-radius:22px 22px 0 0;
  }

  #rp-view-ordenes #rp-cash-close-modal .rp-close-body{
    padding:14px;
  }

  #rp-view-ordenes #rp-cash-close-modal .rp-close-fields,
  #rp-view-ordenes #rp-cash-close-modal .rp-close-summary-cards,
  #rp-view-ordenes #rp-cash-close-modal .rp-close-pay-grid,
  #rp-view-ordenes #rp-cash-close-modal .rp-close-arqueo-grid{
    grid-template-columns:1fr;
  }

  #rp-view-ordenes #rp-cash-close-modal .rp-close-foot{
    grid-template-columns:1fr;
    align-items:stretch;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  }

  #rp-view-ordenes #rp-cash-close-modal .rp-close-footactions{
    justify-content:flex-end;
  }

  #rp-view-ordenes #rp-cash-close-modal .rp-close-footactions .rp-btn,
  #rp-view-ordenes #rp-cash-close-modal .rp-close-footleft .rp-btn{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   Scope: SOLO #rp-view-ordenes #rp-cash-session-modal
   ========================================================= */

#rp-view-ordenes #rp-ord-close-cash[data-cash-state="closed"]{
  border-color:rgba(15, 118, 110, 0.18);
  color:#0f766e;
  background:rgba(15, 118, 110, 0.08);
}

#rp-view-ordenes #rp-ord-close-cash[data-cash-state="open"]{
  border-color:rgba(15, 23, 42, 0.14);
}

#rp-view-ordenes #rp-cash-session-modal[hidden]{
  display:none !important;
}

#rp-view-ordenes #rp-cash-session-modal{
  position:fixed;
  inset:0;
  z-index:1895;
}

#rp-view-ordenes #rp-cash-session-modal .rp-ord-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15, 23, 42, 0.58);
  backdrop-filter:blur(3px);
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-card{
  position:relative;
  width:min(880px, calc(100vw - 28px));
  height:min(760px, calc(100dvh - 28px));
  max-height:calc(100dvh - 28px);
  margin:0;
  border-color:rgba(15, 23, 42, 0.10);
  background:
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-body{
  padding:20px 22px 24px;
  min-height:0;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .9fr);
  gap:18px;
  align-items:start;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-panel{
  display:grid;
  gap:14px;
  padding:18px;
  border:1px solid rgba(15, 23, 42, 0.08);
  border-radius:22px;
  background:#fff;
  box-shadow:0 18px 44px rgba(15, 23, 42, 0.07);
  align-content:start;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-panel-title{
  font-size:16px;
  font-weight:800;
  color:#0f172a;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-fields{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-field{
  display:grid;
  gap:6px;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-field--full{
  grid-column:1 / -1;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-field > span{
  font-size:12px;
  font-weight:700;
  color:#475569;
  letter-spacing:.01em;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-field input,
#rp-view-ordenes #rp-cash-session-modal .rp-session-field textarea{
  width:100%;
  border:1px solid rgba(15, 23, 42, 0.12);
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
  color:#0f172a;
  font:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-field textarea{
  resize:vertical;
  min-height:112px;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-field input:hover,
#rp-view-ordenes #rp-cash-session-modal .rp-session-field textarea:hover{
  border-color:rgba(15, 23, 42, 0.22);
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-field input:focus,
#rp-view-ordenes #rp-cash-session-modal .rp-session-field textarea:focus{
  outline:none;
  border-color:#0ea5e9;
  box-shadow:0 0 0 4px rgba(14, 165, 233, 0.14);
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-note{
  padding:14px;
  border-radius:16px;
  background:#eff6ff;
  color:#0f172a;
  font-size:13px;
  line-height:1.55;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-system-note{
  display:grid;
  gap:6px;
  padding:14px;
  border-radius:16px;
  background:rgba(14, 165, 233, 0.10);
  border:1px solid rgba(14, 165, 233, 0.12);
  color:#0f172a;
  font-size:13px;
  line-height:1.55;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-system-note strong{
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#0369a1;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-note strong{
  color:#0f172a;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-note--muted{
  background:#f8fafc;
  color:#475569;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-foot{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:12px 16px;
  min-height:82px;
  padding:16px;
  border-top:1px solid rgba(15, 23, 42, 0.08);
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,249,252,0.98));
  box-shadow:0 -14px 30px rgba(15, 23, 42, 0.06);
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-footleft{
  min-width:0;
  display:grid;
  align-items:center;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-msg{
  min-height:20px;
  font-size:13px;
  font-weight:700;
  color:#475569;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-msg:empty{
  display:none;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-msg[data-tone="success"]{
  color:#166534;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-msg[data-tone="warning"]{
  color:#92400e;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-msg[data-tone="error"]{
  color:#b91c1c;
}

#rp-view-ordenes #rp-cash-session-modal .rp-session-footactions{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-left:auto;
}

#rp-view-ordenes #rp-cash-session-modal #cs-open-save.rp-btn{
  min-width:170px;
  justify-content:center;
}

@media (max-width: 960px){
  #rp-view-ordenes #rp-cash-session-modal .rp-session-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  #rp-view-ordenes #rp-cash-session-modal .rp-session-card{
    width:min(100vw - 16px, 100%);
    height:88dvh;
    min-height:88dvh;
    max-height:88dvh;
    border-radius:22px 22px 0 0;
  }

  #rp-view-ordenes #rp-cash-session-modal .rp-session-body{
    padding:14px;
  }

  #rp-view-ordenes #rp-cash-session-modal .rp-session-fields{
    grid-template-columns:1fr;
  }

  #rp-view-ordenes #rp-cash-session-modal .rp-session-foot{
    grid-template-columns:1fr;
    align-items:stretch;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  }

  #rp-view-ordenes #rp-cash-session-modal .rp-session-footactions{
    justify-content:flex-end;
  }

  #rp-view-ordenes #rp-cash-session-modal .rp-session-footactions .rp-btn{
    width:100%;
    justify-content:center;
  }
}