/* ==========================================================================
   Demo Maricre · Vista 1 — Simulador
   Afuera del teléfono: identidad Maricre (tokens --mc-* de maricre.css).
   Adentro del teléfono: estética de WhatsApp (tokens --wa-* y --swa-*).
   Todas las reglas van con prefijo sim- (layout) o swa- (WhatsApp) y, las de
   componentes, bajo .sim para no chocar con las otras vistas.
   ========================================================================== */
:root {
  --swa-cab: #ffffff;
  --swa-cab-tinta: #111b21;
  --swa-cab-sub: #667781;
  --swa-cab-ico: #54656f;
  --swa-cab-linea: rgb(11 20 26 / .09);
  --swa-campo: #ffffff;
  --swa-campo-tinta: #111b21;
  --swa-icono: #54656f;
  --swa-accion: #008069;
  --swa-accion-tinta: #ffffff;
  --swa-verde: #008069;
  --swa-cifrado: #ffeecd;
  --swa-cifrado-tinta: #54656f;
  --swa-pildora: rgb(255 255 255 / .94);
  --swa-pildora-tinta: #54656f;
  --swa-azul: #0a6fa3;
  --swa-meta-sale: #56666e;
  --swa-linea: rgb(11 20 26 / .14);
  --swa-suave: rgb(11 20 26 / .045);
  --swa-ok: #1a7f45;
  --swa-bajo: #9a5b00;
  --swa-sin: #c0392b;
  --swa-promo: #8f1d2c;
  --swa-onda-off: #aebbc2;
  --swa-onda-on: #0a8f6f;
  --swa-trans: #3b4a52;
  --swa-sobre-fondo: rgb(255 255 255 / .82);
  --swa-mezcla: #ffffff;
  --swa-sombra: 0 1px .5px rgb(11 20 26 / .13);
  --swa-cita: #06a57c;
  --swa-cita-fondo: rgb(11 20 26 / .055);
  --swa-mapa: #ece6da;
  --swa-mapa-calle: #ffffff;
  --swa-mapa-av: #f7dd8c;
  --swa-mapa-verde: #cfe6c4;
  --swa-mapa-agua: #b9d8f2;
  --swa-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23000' stroke-opacity='.075' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 34 L42 22 L42 34 Z'/%3E%3Ccircle cx='33' cy='30' r='1.8'/%3E%3Ccircle cx='38' cy='26.5' r='1.1'/%3E%3Ccircle cx='98' cy='24' r='8'/%3E%3Cpath d='M94 24h8M98 20v8'/%3E%3Cpath d='M146 14c7 0 12 5 12 12s-5 12-12 12'/%3E%3Cpath d='M20 86c5-7 13-7 18 0s13 7 18 0'/%3E%3Crect x='78' y='72' width='24' height='17' rx='4'/%3E%3Cpath d='M83 72v-5h14v5'/%3E%3Cpath d='M142 76l4.5 9 9.5 1.2-7 6.6 1.8 9.4-8.8-4.6-8.8 4.6 1.8-9.4-7-6.6 9.5-1.2z'/%3E%3Cpath d='M14 146c9-11 25-11 34 0'/%3E%3Cpath d='M21 139l-2-7M41 139l2-7'/%3E%3Cpath d='M80 130h24l-4 19H84z'/%3E%3Cellipse cx='146' cy='146' rx='16' ry='6.5' transform='rotate(-25 146 146)'/%3E%3Ccircle cx='60' cy='58' r='2.2'/%3E%3Ccircle cx='122' cy='118' r='2.2'/%3E%3Ccircle cx='168' cy='60' r='2'/%3E%3Ccircle cx='58' cy='112' r='1.6'/%3E%3Cpath d='M112 164l6-6 6 6'/%3E%3C/svg%3E");
  --sim-acento: #8f1d2c;
  --sim-t-exito: #17703d;
  --sim-t-alerta: #8a5300;
  --sim-t-error: #b03025;
  --sim-t-info: #2563a8;
  --sim-t-violeta: #5f3fb0;
  --sim-glow-1: rgb(242 178 27 / .30);
  --sim-glow-2: rgb(143 29 44 / .16);
  --sim-switch-off: #7a716b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --swa-cab: #202c33;
    --swa-cab-tinta: #e9edef;
    --swa-cab-sub: #aebac1;
    --swa-cab-ico: #aebac1;
    --swa-cab-linea: transparent;
    --swa-campo: #2a3942;
    --swa-campo-tinta: #e9edef;
    --swa-icono: #8696a0;
    --swa-accion: #00a884;
    --swa-accion-tinta: #0b141a;
    --swa-verde: #00a884;
    --swa-cifrado: #182229;
    --swa-cifrado-tinta: #ffd279;
    --swa-pildora: #182229;
    --swa-pildora-tinta: #aebac1;
    --swa-azul: #53bdeb;
    --swa-meta-sale: rgb(233 237 239 / .85);
    --swa-linea: rgb(233 237 239 / .16);
    --swa-suave: rgb(233 237 239 / .06);
    --swa-ok: #4cc47f;
    --swa-bajo: #f0b54a;
    --swa-sin: #ff8a80;
    --swa-promo: #f5a3ad;
    --swa-onda-off: #5f6f78;
    --swa-onda-on: #00d7a3;
    --swa-trans: #c9d3d8;
    --swa-sobre-fondo: rgb(11 20 26 / .78);
    --swa-mezcla: #2a3942;
    --swa-sombra: 0 1px .5px rgb(0 0 0 / .4);
    --swa-cita: #06cf9c;
    --swa-cita-fondo: rgb(0 0 0 / .18);
    --swa-mapa: #243239;
    --swa-mapa-calle: #34464f;
    --swa-mapa-av: #5b5236;
    --swa-mapa-verde: #25402f;
    --swa-mapa-agua: #1d3a52;
    --swa-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 34 L42 22 L42 34 Z'/%3E%3Ccircle cx='33' cy='30' r='1.8'/%3E%3Ccircle cx='38' cy='26.5' r='1.1'/%3E%3Ccircle cx='98' cy='24' r='8'/%3E%3Cpath d='M94 24h8M98 20v8'/%3E%3Cpath d='M146 14c7 0 12 5 12 12s-5 12-12 12'/%3E%3Cpath d='M20 86c5-7 13-7 18 0s13 7 18 0'/%3E%3Crect x='78' y='72' width='24' height='17' rx='4'/%3E%3Cpath d='M83 72v-5h14v5'/%3E%3Cpath d='M142 76l4.5 9 9.5 1.2-7 6.6 1.8 9.4-8.8-4.6-8.8 4.6 1.8-9.4-7-6.6 9.5-1.2z'/%3E%3Cpath d='M14 146c9-11 25-11 34 0'/%3E%3Cpath d='M21 139l-2-7M41 139l2-7'/%3E%3Cpath d='M80 130h24l-4 19H84z'/%3E%3Cellipse cx='146' cy='146' rx='16' ry='6.5' transform='rotate(-25 146 146)'/%3E%3Ccircle cx='60' cy='58' r='2.2'/%3E%3Ccircle cx='122' cy='118' r='2.2'/%3E%3Ccircle cx='168' cy='60' r='2'/%3E%3Ccircle cx='58' cy='112' r='1.6'/%3E%3Cpath d='M112 164l6-6 6 6'/%3E%3C/svg%3E");
    --sim-acento: #f19aa5;
    --sim-t-exito: #5fd08e;
    --sim-t-alerta: #f0b54a;
    --sim-t-error: #ff8a80;
    --sim-t-info: #8ab8f0;
    --sim-t-violeta: #bba6f7;
    --sim-glow-1: rgb(242 178 27 / .12);
    --sim-glow-2: rgb(214 60 80 / .14);
    --sim-switch-off: #6d645e;
  }
}
:root[data-theme="dark"] {
  --swa-cab: #202c33; --swa-cab-tinta: #e9edef; --swa-cab-sub: #aebac1; --swa-cab-ico: #aebac1; --swa-cab-linea: transparent; --swa-campo: #2a3942; --swa-campo-tinta: #e9edef;
  --swa-icono: #8696a0; --swa-accion: #00a884; --swa-accion-tinta: #0b141a; --swa-verde: #00a884; --swa-cifrado: #182229;
  --swa-cifrado-tinta: #ffd279; --swa-pildora: #182229; --swa-pildora-tinta: #aebac1; --swa-azul: #53bdeb;
  --swa-meta-sale: rgb(233 237 239 / .85); --swa-linea: rgb(233 237 239 / .16); --swa-suave: rgb(233 237 239 / .06);
  --swa-ok: #4cc47f; --swa-bajo: #f0b54a; --swa-sin: #ff8a80; --swa-promo: #f5a3ad; --swa-onda-off: #5f6f78; --swa-onda-on: #00d7a3;
  --swa-trans: #c9d3d8; --swa-sobre-fondo: rgb(11 20 26 / .78); --swa-mezcla: #2a3942; --swa-sombra: 0 1px .5px rgb(0 0 0 / .4);
  --swa-cita: #06cf9c; --swa-cita-fondo: rgb(0 0 0 / .18); --swa-mapa: #243239; --swa-mapa-calle: #34464f; --swa-mapa-av: #5b5236;
  --swa-mapa-verde: #25402f; --swa-mapa-agua: #1d3a52;
  --swa-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 34 L42 22 L42 34 Z'/%3E%3Ccircle cx='33' cy='30' r='1.8'/%3E%3Ccircle cx='98' cy='24' r='8'/%3E%3Cpath d='M94 24h8M98 20v8'/%3E%3Cpath d='M20 86c5-7 13-7 18 0s13 7 18 0'/%3E%3Crect x='78' y='72' width='24' height='17' rx='4'/%3E%3Cpath d='M142 76l4.5 9 9.5 1.2-7 6.6 1.8 9.4-8.8-4.6-8.8 4.6 1.8-9.4-7-6.6 9.5-1.2z'/%3E%3Cpath d='M14 146c9-11 25-11 34 0'/%3E%3Cpath d='M80 130h24l-4 19H84z'/%3E%3Cellipse cx='146' cy='146' rx='16' ry='6.5' transform='rotate(-25 146 146)'/%3E%3Ccircle cx='60' cy='58' r='2.2'/%3E%3Ccircle cx='122' cy='118' r='2.2'/%3E%3C/svg%3E");
  --sim-acento: #f19aa5; --sim-t-exito: #5fd08e; --sim-t-alerta: #f0b54a; --sim-t-error: #ff8a80; --sim-t-info: #8ab8f0;
  --sim-t-violeta: #bba6f7; --sim-glow-1: rgb(242 178 27 / .12); --sim-glow-2: rgb(214 60 80 / .14); --sim-switch-off: #6d645e;
}

/* --------------------------------------------------------------------------
   Contraste AA de chips y adaptables dentro del simulador (claro y oscuro)
   -------------------------------------------------------------------------- */
.sim [hidden] { display: none !important; }
.sim .mc-chip.exito, .sim-bienv .mc-chip.exito { color: var(--sim-t-exito); }
.sim .mc-chip.alerta, .sim .mc-chip.queso { color: var(--sim-t-alerta); }
.sim .mc-chip.error { color: var(--sim-t-error); }
.sim .mc-chip.info { color: var(--sim-t-info); }
.sim .mc-chip.violeta { color: var(--sim-t-violeta); }
.sim .mc-chip.bordo { color: var(--sim-acento); }
.sim .mc-adaptable, .sim-bienv .mc-adaptable { color: var(--sim-t-violeta); }
.sim .mc-seg button[aria-pressed="true"] { color: var(--sim-acento); }
.sim .mc-seg button { min-height: 34px; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.sim-vista { --sim-cab: 60px; --sim-barra-alto: calc(60px + env(safe-area-inset-bottom)); }
.sim {
  display: grid;
  grid-template-columns: 330px minmax(360px, 410px) minmax(360px, 1fr);
  grid-template-areas: "esc centro der";
  gap: 20px;
  align-items: start;
  padding: 18px 20px 24px;
  max-width: 1560px;
  margin: 0 auto;
}
.sim-slot-esc { grid-area: esc; min-width: 0; }
.sim-centro { grid-area: centro; min-width: 0; }
.sim-slot-der { grid-area: der; min-width: 0; }
.sim-slot-esc, .sim-slot-der, .sim-centro { position: sticky; top: calc(var(--sim-cab) + 14px); }
.sim-barra-media, .sim-barra-movil { display: none; }

.sim-esc, .sim-der {
  max-height: max(420px, calc(100dvh - var(--sim-top, 96px) - 42px - var(--sim-extra, 0px)));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--mc-linea) transparent;
  background: var(--mc-superficie);
  border: 1px solid var(--mc-linea);
  border-radius: 18px;
  box-shadow: var(--mc-sombra);
}

/* 820–1199: escenarios en un cajón lateral, teléfono + panel derecho */
.sim[data-modo="medio"] {
  --sim-extra: 76px;
  grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
  grid-template-areas: "barra barra" "centro der";
}
.sim[data-modo="medio"] .sim-slot-esc { display: none; }
.sim[data-modo="medio"] .sim-barra-media {
  grid-area: barra; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px;
  background: var(--mc-superficie); border: 1px solid var(--mc-linea); border-radius: 14px; box-shadow: var(--mc-sombra);
}
.sim-barra-media-txt { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--mc-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-progreso { font-size: 12px; font-weight: 600; color: var(--mc-tinta-3); white-space: nowrap; }
.sim[data-modo="medio"] .sim-slot-der, .sim[data-modo="medio"] .sim-centro { top: calc(var(--sim-cab) + 14px); }

/* <820: WhatsApp a pantalla completa + barra inferior con hojas */
.sim[data-modo="movil"] { display: block; padding: 0; max-width: none; }
.sim[data-modo="movil"] .sim-slot-esc,
.sim[data-modo="movil"] .sim-slot-der { display: none; }
.sim[data-modo="movil"] .sim-centro { position: static; gap: 0; }
.sim[data-modo="movil"] .sim-centro::before { display: none; }
/* En el celular, la barra de arriba del teléfono es la única pista de quién escribe (el
   WhatsApp muestra a Maricre): "Escribís como Julio · Autoservicio Los Hermanos · Cambiar".
   Alto fijo para descontarlo del alto del teléfono. */
.sim[data-modo="movil"] { --sim-quien-alto: 44px; }
.sim[data-modo="movil"] .sim-tel-top {
  box-sizing: border-box; height: var(--sim-quien-alto); min-height: 0; padding: 0 8px 0 12px; gap: 6px;
  background: var(--mc-superficie); border-bottom: 1px solid var(--mc-linea);
}
.sim[data-modo="movil"] .sim-quien { font-size: 13px; }
.sim[data-modo="movil"] .sim-ayuda { display: none; }   /* ya está en la barra inferior */
.sim[data-modo="movil"] .sim-tel {
  height: calc(100dvh - var(--sim-top, 150px) - var(--sim-barra-alto) - var(--sim-quien-alto) - var(--sim-demo-alto, 0px));
  min-height: 360px; padding: 0; border-radius: 0; background: none; box-shadow: none;
}
.sim[data-modo="movil"] .sim-tel::before, .sim[data-modo="movil"] .sim-tel::after { display: none; }
.sim[data-modo="movil"] .swa { border-radius: 0; }
.sim[data-modo="movil"] .swa-status { display: none; }
.sim[data-modo="movil"] .swa-cab { padding-top: 8px; }
.sim[data-modo="movil"] .sim-barra-movil {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--sim-barra-alto);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--mc-superficie); border-top: 1px solid var(--mc-linea); box-shadow: 0 -6px 18px rgb(31 26 23 / .08);
}
.sim-bm-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 8px;
  border: 1px solid var(--mc-linea); background: var(--mc-superficie-2); color: var(--mc-tinta); border-radius: 12px;
  font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
.sim-bm-av:empty { display: none; }
.sim-bm-ayuda {
  width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--mc-linea); background: var(--mc-superficie-2);
  color: var(--mc-tinta-2); font-weight: 800; font-size: 16px; cursor: pointer;
}
.sim-punto { position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px var(--mc-superficie-2); }

/* --------------------------------------------------------------------------
   Avatares
   -------------------------------------------------------------------------- */
.sim-av {
  width: var(--t, 36px); height: var(--t, 36px); flex: none; border-radius: 50%;
  display: inline-grid; place-items: center; color: #fff; font-weight: 800; letter-spacing: .02em;
  font-size: calc(var(--t, 36px) * .38); line-height: 1;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 78%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 82%, #000) 100%);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .14);
}

/* --------------------------------------------------------------------------
   Columna de escenarios
   -------------------------------------------------------------------------- */
.sim-esc { padding: 4px 12px 12px; }
.sim-sec { border-bottom: 1px solid var(--mc-linea); padding-bottom: 12px; }
.sim-sec > summary {
  list-style: none; display: flex; align-items: center; gap: 9px; padding: 12px 2px 8px; cursor: pointer;
  font-weight: 800; font-size: 14.5px; color: var(--mc-tinta); border-radius: 8px;
}
.sim-sec > summary::-webkit-details-marker { display: none; }
.sim-sec > summary::after {
  content: ""; width: 7px; height: 7px; margin: 0 6px 0 auto; flex: none;
  border-right: 2px solid var(--mc-tinta-3); border-bottom: 2px solid var(--mc-tinta-3);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.sim-sec:not([open]) > summary::after { transform: rotate(-45deg); }
.sim-sec-t { white-space: nowrap; }
.sim-sec-extra { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--mc-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sim-sec > summary:has(.sim-sec-extra)::after { margin-left: 8px; }
.sim-sec-n {
  width: 24px; height: 24px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--mc-bordo), var(--mc-bordo-oscuro)); color: var(--mc-queso); font-size: 12.5px; font-weight: 800;
}
.sim-sec-ayuda { margin: 0 0 10px; font-size: 12.5px; color: var(--mc-tinta-3); line-height: 1.45; }

.sim-personas { display: grid; gap: 4px; }
.sim-persona {
  position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 8px 10px; text-align: left; border-radius: 13px; border: 1px solid transparent; background: transparent;
  cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
}
.sim-persona:hover { background: var(--mc-superficie-2); border-color: var(--mc-linea); }
.sim-persona.activa {
  background: color-mix(in srgb, var(--c) 8%, var(--mc-superficie));
  border-color: color-mix(in srgb, var(--c) 42%, transparent);
  box-shadow: inset 3px 0 0 var(--c);
}
.sim-persona-txt { display: grid; gap: 2px; min-width: 0; }
.sim-persona-nombre { font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--mc-tinta); }
.sim-persona-sub { font-size: 12px; line-height: 1.3; color: var(--mc-tinta-3); }
/* Sobre el fondo teñido de la persona activa, el gris claro no llega a 4,5:1. */
.sim-persona.activa .sim-persona-sub { color: var(--mc-tinta-2); }
.sim-persona-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.sim-persona-chips .mc-chip { font-size: 11px; padding: 1px 7px; }
.sim-noleido {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center;
  background: var(--swa-verde); color: var(--swa-accion-tinta); font-size: 11.5px; font-weight: 800;
}

.sim-recorridos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sim-rec {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 11px 11px 10px;
  border: 1px solid var(--mc-linea); border-radius: 14px; background: var(--mc-superficie-2);
  transition: border-color .15s, box-shadow .15s;
}
.sim-rec:hover { border-color: color-mix(in srgb, var(--mc-bordo) 30%, var(--mc-linea)); }
.sim-rec.recomendado {
  border-color: color-mix(in srgb, var(--mc-queso) 70%, transparent);
  background: linear-gradient(180deg, var(--mc-queso-suave), var(--mc-superficie-2) 75%);
}
.sim-rec-n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--sim-acento); color: var(--sim-acento); background: var(--mc-superficie);
  font-size: 12.5px; font-weight: 800;
}
.sim-rec.hecho .sim-rec-n { background: var(--mc-exito); border-color: var(--mc-exito); color: #fff; }
.sim-rec-cuerpo { min-width: 0; }
.sim-rec-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.sim-rec-t { margin: 3px 0 0; font-size: 14px; line-height: 1.25; color: var(--mc-tinta); }
.sim-rec-cab .mc-chip { font-size: 10.5px; padding: 1px 7px; }
.sim-rec-ver { margin: 5px 0 9px; font-size: 12.5px; line-height: 1.42; color: var(--mc-tinta-2); }
.sim-rec-ver b { color: var(--mc-tinta); font-weight: 650; }
.sim-rec-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.sim-rec-modo {
  font-size: 11.5px; font-weight: 650; color: var(--mc-tinta-2); background: var(--mc-superficie);
  border: 1px solid var(--mc-linea); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.sim-rec-quien { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mc-tinta-3); white-space: nowrap; }
.sim-rec-btn { margin-left: auto; min-height: 32px; }

.sim-ajustes { display: grid; gap: 14px; }
.sim-ajuste-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 13px; font-weight: 700; color: var(--mc-tinta); }
.sim-ajuste-exp { margin: 6px 2px 0; font-size: 12px; line-height: 1.4; color: var(--mc-tinta-3); }
.sim-switch {
  position: relative; margin-left: auto; width: 46px; height: 28px; flex: none; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--sim-switch-off); transition: background .2s;
}
.sim-switch span {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s;
}
.sim-switch[aria-checked="true"] { background: var(--mc-exito); }
.sim-switch[aria-checked="true"] span { transform: translateX(18px); }
.sim-esc-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding-top: 10px; }
.sim-esc-pie .mc-btn { color: var(--mc-tinta-2); }
.sim-nota { font-size: 13px; color: var(--mc-tinta-3); }

/* --------------------------------------------------------------------------
   Teléfono (marco)
   -------------------------------------------------------------------------- */
.sim-centro { display: flex; flex-direction: column; gap: 10px; isolation: isolate; }
.sim-centro::before {
  content: ""; position: absolute; inset: 70px -46px 30px; z-index: -1; pointer-events: none; filter: blur(30px);
  background:
    radial-gradient(closest-side at 32% 38%, var(--sim-glow-1), transparent),
    radial-gradient(closest-side at 70% 68%, var(--sim-glow-2), transparent);
}
.sim-tel-top { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 4px; }
.sim-quien { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 13px; color: var(--mc-tinta-2); }
.sim-quien-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-quien b { color: var(--mc-tinta); }
.sim-tel-top-der { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.sim-quien-cambiar { display: none; }
.sim[data-modo="movil"] .sim-quien-cambiar { display: inline-flex; min-height: 32px; padding: 0 10px; }
.sim-quien.cambio { animation: sim-quien-cambio 1.2s ease-out; border-radius: 8px; }
@keyframes sim-quien-cambio { from { background: color-mix(in srgb, var(--mc-queso) 45%, transparent); } to { background: transparent; } }
.sim-ayuda {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--mc-linea); background: var(--mc-superficie);
  color: var(--mc-tinta-2); font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: var(--mc-sombra);
}
.sim-ayuda:hover { color: var(--sim-acento); border-color: var(--sim-acento); }

.sim-tel {
  position: relative;
  height: clamp(460px, calc(100dvh - var(--sim-top, 96px) - 84px - var(--sim-extra, 0px) - var(--sim-demo-alto, 0px)), 820px);
  padding: 11px;
  border-radius: 54px;
  background: linear-gradient(150deg, #3b3b42 0%, #16161a 20%, #0b0b0d 68%, #2a2a30 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .07),
    0 0 0 2px #1c1c20,
    0 44px 80px -34px rgb(31 26 23 / .6),
    0 18px 36px -20px rgb(31 26 23 / .4);
}
.sim-tel::before {
  content: ""; position: absolute; right: -3px; top: 130px; width: 3px; height: 44px; border-radius: 0 3px 3px 0; background: #222227;
}
.sim-tel::after {
  content: ""; position: absolute; right: -3px; top: 200px; width: 3px; height: 96px; border-radius: 0 3px 3px 0; background: #222227;
}

/* --------------------------------------------------------------------------
   WhatsApp (adentro del teléfono)
   -------------------------------------------------------------------------- */
.sim .swa {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 43px; background: var(--wa-fondo); color: var(--wa-tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.sim .swa-status {
  position: relative; flex: none; height: 36px; display: flex; align-items: center; justify-content: space-between;
  padding: 2px 26px 0 32px; background: var(--swa-cab); color: var(--swa-cab-tinta); font-size: 13.5px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
/* Cámara perforada de un Android (no la isla de un iPhone). */
.sim .swa-camara {
  position: absolute; left: 50%; top: 11px; width: 13px; height: 13px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #2c3a4a 0 18%, #07080a 45%); box-shadow: 0 0 0 1.5px #16171b;
}
.sim .swa-status-ico { display: inline-flex; align-items: center; gap: 4px; }
.sim .swa-status-ico svg { width: 15px; height: 15px; }
.sim .swa-cab {
  flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px 9px 4px;
  background: var(--swa-cab); color: var(--swa-cab-tinta); border-bottom: 1px solid var(--swa-cab-linea);
}
.sim .swa-cab-atras { display: grid; place-items: center; width: 30px; color: var(--swa-cab-ico); }
.sim .swa-cab-atras svg { width: 22px; height: 22px; }
.sim .swa-avatar-mc {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--mc-bordo), var(--mc-bordo-oscuro)); color: var(--mc-queso);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .18);
}
.sim .swa-avatar-mc svg { width: 25px; height: 25px; }
.sim .swa-cab-txt { flex: 1; min-width: 0; padding-left: 4px; }
.sim .swa-cab-nombre { display: flex; align-items: center; gap: 4px; font-size: 16.5px; font-weight: 600; line-height: 1.2; }
.sim .swa-cab-sub { font-size: 12.5px; color: var(--swa-cab-sub); line-height: 1.3; }
.sim .swa-cab-sub.escribiendo { color: var(--swa-verde); font-weight: 500; }
.sim .swa-cab-ico { display: inline-flex; align-items: center; padding-right: 6px; color: var(--swa-cab-ico); }
.sim .swa-cab-ico svg { width: 21px; height: 21px; }

.sim .swa-zona {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--swa-patron) 0 0 / 180px 180px repeat, var(--wa-fondo);
}
.sim .swa-pantalla { position: relative; flex: 1; min-height: 0; }
.sim .swa-cuerpo {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 8px 0 12px;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--wa-tinta-2) 45%, transparent) transparent;
}
.sim .swa-cuerpo:focus-visible { outline: 2px solid var(--mc-queso); outline-offset: -3px; border-radius: 0; }
.sim .swa-log { display: flex; flex-direction: column; }

.sim .swa-fila { display: flex; padding: 0 12px; margin-top: 2px; }
.sim .swa-fila.cola { margin-top: 10px; }
.sim .swa-fila.sale { justify-content: flex-end; }
.sim .swa-fila.centro { justify-content: center; margin: 8px 0 4px; }
.sim .swa-pila { display: flex; flex-direction: column; min-width: 0; max-width: 84%; }
.sim .swa-pila.ancha { width: min(300px, 88%); max-width: 88%; }
.sim .swa-pila.ancha > .swa-burbuja { width: 100%; }
.sim .swa-pila:has(> .swa-botones, > .swa-lista) { min-width: min(236px, 84%); }
.sim .swa-fila.sale .swa-pila { align-items: flex-end; }

.sim .swa-burbuja {
  position: relative; border-radius: 8px; padding: 6px 8px 8px 9px; background: var(--wa-entrante); color: var(--wa-tinta);
  box-shadow: var(--swa-sombra); font-size: 14.2px; line-height: 1.37; overflow-wrap: anywhere;
  animation: swa-entra .22s ease-out;
}
.sim .swa-fila.sale .swa-burbuja { background: var(--wa-saliente); }
.sim .swa-fila.cola > .swa-pila > .swa-burbuja:first-child::before {
  content: ""; position: absolute; top: 0; width: 8px; height: 13px; background: inherit;
}
.sim .swa-fila.cola.entra > .swa-pila > .swa-burbuja:first-child { border-top-left-radius: 0; }
.sim .swa-fila.cola.entra > .swa-pila > .swa-burbuja:first-child::before { left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.sim .swa-fila.cola.sale > .swa-pila > .swa-burbuja:first-child { border-top-right-radius: 0; }
.sim .swa-fila.cola.sale > .swa-pila > .swa-burbuja:first-child::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
@keyframes swa-entra { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sim-tel { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 0 0 1.5px #3b3b42, 0 40px 80px -30px rgb(0 0 0 / .8); }
}
:root[data-theme="dark"] .sim-tel { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 0 0 1.5px #3b3b42, 0 40px 80px -30px rgb(0 0 0 / .8); }

.sim .swa-texto { white-space: normal; }
.sim .swa-texto::after { content: ""; display: inline-block; width: 44px; height: 1px; }
.sim .swa-fila.sale .swa-texto::after { width: 64px; }
.sim .swa-texto a { color: var(--swa-azul); }
.sim .swa-texto code { font-family: var(--mc-fuente-mono); font-size: 12.5px; background: var(--swa-suave); padding: 0 3px; border-radius: 3px; }
.sim .swa-meta {
  position: absolute; right: 8px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; line-height: 1; color: var(--wa-tinta-2); white-space: nowrap;
}
.sim .swa-fila.sale .swa-meta { color: var(--swa-meta-sale); }
.sim .swa-ticks { display: inline-flex; color: var(--swa-meta-sale); }
.sim .swa-ticks svg { width: 17px; height: 11px; }
.sim .swa-ticks[data-estado="leido"] { color: var(--wa-tilde); }
/* Formato de WhatsApp: listas, citas y monoespaciado (core.fmtWABloques). */
.sim .swa-texto .wa-lista { margin: 1px 0; padding-left: 20px; }
.sim .swa-texto ol.wa-lista { padding-left: 24px; }
.sim .swa-texto .wa-lista li { padding-left: 1px; }
.sim .swa-texto .wa-cita { margin: 2px 0; padding: 0 0 0 9px; border-left: 3px solid color-mix(in srgb, var(--wa-tinta-2) 55%, transparent); color: var(--wa-tinta-2); }
.sim .swa-texto code.wa-mono { display: inline; padding: 0; background: none; white-space: pre-wrap; font-size: 13px; }
/* Respuesta a un botón o a una fila de una lista: la cita del mensaje original arriba (como WhatsApp). */
.sim .swa-burbuja.con-cita { min-width: min(210px, 100%); padding-top: 4px; }
.sim .swa-cita {
  display: grid; gap: 1px; margin: 0 -4px 5px -5px; padding: 5px 9px 6px 9px; border-radius: 6px; overflow: hidden;
  background: var(--swa-cita-fondo); border-left: 4px solid var(--swa-cita); font-size: 13px; line-height: 1.3;
}
.sim .swa-cita b { color: var(--swa-cita); font-size: 12.8px; font-weight: 600; }
.sim .swa-cita span { color: var(--wa-tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sim .swa-resp-desc { display: block; font-size: 12.5px; color: var(--wa-tinta-2); }

.sim .swa-fecha {
  display: inline-block; padding: 5px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500;
  background: var(--swa-pildora); color: var(--swa-pildora-tinta); box-shadow: var(--swa-sombra);
}
.sim .swa-cifrado {
  margin: 0 20px; max-width: 330px; padding: 6px 12px; border-radius: 8px; text-align: center; font-size: 12px; line-height: 1.4;
  background: var(--swa-cifrado); color: var(--swa-cifrado-tinta); box-shadow: var(--swa-sombra);
}
/* Mensaje interactivo (botones de respuesta) y plantilla: encabezado, cuerpo, pie gris y
   chico, y los botones como filas pegadas debajo de la burbuja, como en WhatsApp. */
.sim .swa-pila-int { width: min(300px, 88%); max-width: 88%; }
.sim .swa-pila-int > .swa-burbuja { width: 100%; }
.sim .swa-int.con-botones { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sim .swa-int-img {
  display: block; width: calc(100% + 11px); margin: -3px -5px 6px -6px; aspect-ratio: 1.91 / 1; padding: 0; border: 0;
  border-radius: 6px; font: inherit; color: inherit; cursor: zoom-in; background: #fff;
}
.sim .swa-int-img:disabled { cursor: default; }
.sim .swa-fila.cola.entra .swa-int-img { border-top-left-radius: 2px; }
.sim .swa-int-cab { margin: 1px 0 3px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.sim .swa-int-pie { margin-top: 5px; font-size: 12.5px; line-height: 1.35; color: var(--wa-tinta-2); }
.sim .swa-int-pie::after { content: ""; display: inline-block; width: 40px; height: 1px; }
.sim .swa-int:has(.swa-int-pie) .swa-texto::after { display: none; }
.sim .swa-botones {
  display: flex; flex-direction: column; width: 100%; overflow: hidden;
  background: var(--wa-entrante); border-radius: 0 0 8px 8px; box-shadow: var(--swa-sombra);
}
.sim .swa-boton {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 42px; padding: 8px 12px;
  border: 0; border-top: 1px solid var(--swa-linea); border-radius: 0; background: transparent; color: var(--swa-azul);
  font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: background .15s;
}
.sim .swa-boton svg { width: 17px; height: 17px; flex: none; }
.sim .swa-boton:hover:not(:disabled) { background: var(--swa-suave); }
.sim .swa-boton:focus-visible { outline: 2px solid var(--mc-queso); outline-offset: -2px; }
.sim .swa-boton:disabled { cursor: default; color: color-mix(in srgb, var(--swa-azul) 55%, var(--wa-tinta-2)); }
.sim .swa-boton.elegido:disabled { color: var(--swa-azul); }

/* Hoja de una lista, adentro del teléfono */
.sim .swa-lista-capa { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: flex-end; }
.sim .swa-lista-fondo { position: absolute; inset: 0; background: rgb(11 20 26 / .45); animation: mc-entra .2s ease-out; }
.sim .swa-lista-hoja {
  position: relative; max-height: 82%; display: flex; flex-direction: column; min-height: 0;
  background: var(--wa-entrante); color: var(--wa-tinta); border-radius: 18px 18px 0 0; box-shadow: 0 -4px 18px rgb(0 0 0 / .18);
  animation: swa-sube .22s ease-out;
}
@keyframes swa-sube { from { transform: translateY(40%); opacity: .4; } }
.sim .swa-lista-cab { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.sim .swa-lista-cab h4 { flex: 1; margin: 0 34px 0 0; text-align: center; font-size: 16px; font-weight: 600; }
.sim .swa-lista-x {
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--wa-tinta-2);
  font-size: 17px; cursor: pointer;
}
.sim .swa-lista-x:hover { background: var(--swa-suave); }
.sim .swa-lista-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 4px; }
.sim .swa-lista-sec { margin: 8px 18px 2px; font-size: 13px; font-weight: 600; color: var(--swa-verde); }
.sim .swa-lista-fila {
  display: flex; align-items: center; gap: 14px; padding: 11px 18px; cursor: pointer; border-bottom: 1px solid var(--swa-linea);
}
.sim .swa-lista-fila:hover { background: var(--swa-suave); }
.sim .swa-lista-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sim .swa-lista-txt b { font-size: 15px; font-weight: 500; }
.sim .swa-lista-txt small { font-size: 13px; color: var(--wa-tinta-2); line-height: 1.3; }
.sim .swa-lista-fila input {
  appearance: none; width: 21px; height: 21px; flex: none; margin: 0; border: 2px solid var(--wa-tinta-2); border-radius: 50%;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.sim .swa-lista-fila input:checked { border-color: var(--swa-verde); box-shadow: inset 0 0 0 3px var(--wa-entrante), inset 0 0 0 10px var(--swa-verde); }
.sim .swa-lista-fila input:focus-visible { outline: 2px solid var(--mc-queso); outline-offset: 2px; }
.sim .swa-lista-radio { display: none; }
.sim .swa-lista-pie { flex: none; display: flex; justify-content: flex-end; padding: 10px 14px 14px; }

/* Ubicación: un mapa dibujado (sin mapas externos), el nombre y la dirección. */
.sim .swa-pila-ubi { width: min(270px, 80%); max-width: 80%; }
.sim .swa-ubi { width: 100%; padding: 3px 3px 18px; }
.sim .swa-ubi-mapa {
  position: relative; height: 128px; border-radius: 6px; overflow: hidden;
  background:
    radial-gradient(ellipse 34% 30% at 78% 26%, var(--swa-mapa-verde) 0 98%, transparent 100%),
    linear-gradient(112deg, transparent 0 60%, var(--swa-mapa-agua) 60% 66%, transparent 66%),
    linear-gradient(28deg, transparent 0 47%, var(--swa-mapa-av) 47% 51.5%, transparent 51.5%),
    repeating-linear-gradient(0deg, transparent 0 25px, var(--swa-mapa-calle) 25px 29px),
    repeating-linear-gradient(90deg, transparent 0 33px, var(--swa-mapa-calle) 33px 37px),
    var(--swa-mapa);
}
.sim .swa-fila.cola.entra .swa-ubi-mapa { border-top-left-radius: 2px; }
.sim .swa-ubi-pin { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -88%); filter: drop-shadow(0 2px 2px rgb(0 0 0 / .35)); }
.sim .swa-ubi-pin svg { width: 100%; height: 100%; }
.sim .swa-ubi-txt { display: grid; gap: 2px; padding: 7px 6px 0; }
.sim .swa-ubi-txt b { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.sim .swa-ubi-txt span { font-size: 12.8px; line-height: 1.35; color: var(--wa-tinta-2); }

/* Foto de producto: mensaje de imagen de WhatsApp con pie. Ancho fijo y cuadrada (el alto
   queda reservado antes de que cargue: el chat no salta). */
.sim .swa-pila-foto { width: min(264px, 80%); max-width: 80%; }
/* En el celular el chat visible mide unos 400 px de alto (en 812 de pantalla): la foto se achica
   con el alto disponible para que la foto y el pie entren juntos. */
.sim[data-modo="movil"] .swa-pila-foto { width: min(clamp(176px, 100svh - 590px, 264px), 80%); }
.sim .swa-foto { margin: 0; width: 100%; padding: 3px 3px 5px; display: flex; flex-direction: column; }
.sim .swa-foto-marco {
  display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 6px; font: inherit; color: inherit;
  cursor: zoom-in;
}
.sim .swa-fila.cola.entra > .swa-pila > .swa-foto:first-child .swa-foto-marco { border-top-left-radius: 2px; }
.sim .swa-foto-marco:disabled { cursor: default; }
.sim .swa-foto-marco:focus-visible { outline: 2px solid var(--mc-queso); outline-offset: 2px; }
.sim .swa-foto-marco:not(:disabled):hover img { filter: brightness(.97); }
.sim .swa-foto-pie { padding: 5px 5px 0 6px; }
/* Sin pie, la hora va sobre la foto, con una sombra que la hace legible. */
.sim .swa-foto.sin-pie { padding-bottom: 3px; }
.sim .swa-foto.sin-pie .swa-meta {
  right: 7px; bottom: 7px; padding: 2px 5px; border-radius: 8px; color: #fff; background: rgb(11 20 26 / .38);
}

/* Tarjeta de pedido */
.sim .swa-pedido { padding: 0 0 8px; }
/* El título ("Pedido PED-7157") y el depósito no se parten nunca: si no entran con el estado,
   el chip del estado baja a su propio renglón (flex-wrap), a la derecha. */
.sim .swa-ped-cab {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; padding: 10px 10px 9px; border-radius: 8px 8px 0 0; color: #fff;
  background: linear-gradient(135deg, var(--mc-bordo) 0%, var(--mc-bordo-oscuro) 100%);
}
.sim .swa-fila.cola.entra .swa-pedido .swa-ped-cab { border-top-left-radius: 0; }
.sim .swa-fila.cola.entra > .swa-pila > .swa-pedido:first-child::before { background: var(--mc-bordo); }
.sim .swa-ped-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: rgb(255 255 255 / .14); }
.sim .swa-ped-tit { flex: 1 1 auto; min-width: 0; display: grid; }
.sim .swa-ped-tit h4 { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim .swa-ped-tit > span { font-size: 11.5px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim .swa-ped-estado { flex: none; margin-left: auto; font-size: 11px; padding: 2px 8px; background: #fff; color: var(--mc-bordo); border: 0; }
.sim .swa-ped-estado.queso, .sim .swa-ped-estado.alerta { background: var(--mc-queso); color: #3d2600; }
.sim .swa-ped-estado.exito { background: #d7f5e2; color: #0f5130; }
.sim .swa-ped-estado.info { background: #dbeafb; color: #173f6d; }
.sim .swa-ped-estado.violeta { background: #e9e1fb; color: #432a84; }
.sim .swa-ped-estado.error { background: #fbdcd9; color: #7d1d16; }
.sim .swa-ped-lineas { list-style: none; margin: 0; padding: 10px 10px 2px; display: grid; gap: 8px; }
.sim .swa-ped-lineas li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.3; }
.sim .swa-ped-cant { min-width: 46px; font-weight: 750; white-space: nowrap; }
.sim .swa-ped-nom { min-width: 0; }
.sim .swa-ped-promo, .sim .swa-ped-stock { display: block; margin-top: 1px; font-size: 11px; font-weight: 650; color: var(--swa-promo); }
.sim .swa-ped-stock { color: var(--swa-bajo); }
.sim .swa-ped-stock.neutro { color: var(--wa-tinta-2); font-weight: 550; }
.sim .swa-ped-stock.info { color: var(--swa-azul); font-weight: 600; }
.sim .swa-ped-stock.alerta { color: var(--swa-bajo); }
.sim .swa-ped-stock.error { color: var(--swa-sin); }
.sim .swa-ped-motivo { margin: 8px 10px 0; font-size: 12.5px; line-height: 1.4; color: var(--wa-tinta); }
.sim .swa-ped-cambios, .sim .swa-ped-ajustes {
  margin: 8px 10px 0; padding: 7px 9px; border-radius: 7px; font-size: 12px; line-height: 1.4; background: var(--swa-suave); color: var(--wa-tinta);
}
.sim .swa-ped-cambios { border-left: 3px solid var(--swa-azul); }
.sim .swa-ped-ajustes { border-left: 3px solid var(--swa-linea); }
.sim .swa-ped-cambios ul, .sim .swa-ped-ajustes ul { margin: 3px 0 0; padding-left: 16px; }
.sim .swa-ped-tot { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sim .swa-ped-totales { display: grid; gap: 3px; margin: 9px 10px 0; padding-top: 8px; border-top: 1px dashed var(--swa-linea); font-size: 13px; }
.sim .swa-ped-totales div { display: flex; justify-content: space-between; gap: 10px; }
.sim .swa-ped-totales dt { color: var(--wa-tinta-2); }
.sim .swa-ped-totales dd { margin: 0; font-variant-numeric: tabular-nums; }
.sim .swa-ped-totales .desc dd { color: var(--swa-ok); font-weight: 650; }
.sim .swa-ped-totales .total { margin-top: 3px; font-size: 16.5px; font-weight: 800; }
.sim .swa-ped-totales .total dt { color: var(--wa-tinta); }
.sim .swa-ped-entrega { margin: 9px 10px 0; padding: 7px 9px; border-radius: 7px; font-size: 13px; font-weight: 650; background: var(--swa-suave); }
.sim .swa-ped-requiere {
  margin: 8px 10px 0; padding: 7px 9px; border-radius: 7px; font-size: 12.5px; line-height: 1.4;
  background: var(--mc-alerta-suave); color: var(--sim-t-alerta); border-left: 3px solid var(--mc-queso);
}
.sim .swa-ped-erp { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 8px 10px 0; font-size: 12.5px; color: var(--swa-ok); }
.sim .swa-ped-avisos .mc-adaptable, .sim .swa-ped-requiere .mc-adaptable { width: 18px; height: 18px; vertical-align: -3px; }
.sim .swa-ped-avisos { display: grid; gap: 2px; margin: 8px 10px 0; padding: 0 0 0 15px; font-size: 11.5px; line-height: 1.35; color: var(--wa-tinta-2); }
.sim .swa-ped-pie { display: flex; align-items: center; gap: 6px; padding: 8px 10px 0; font-size: 11px; color: var(--wa-tinta-2); }
.sim .swa-ped-pie .swa-meta { position: static; margin-left: auto; }

/* «Así lo registra el sistema» (Detrás de escena): la tarjeta del pedido y la de la derivación,
   con los colores del panel (no son mensajes del chat). */
.sim .sim-sistema {
  --wa-tinta: var(--mc-tinta); --wa-tinta-2: var(--mc-tinta-3); --wa-entrante: var(--mc-superficie-2);
  display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--mc-linea);
}
.sim .sim-sistema-t { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--mc-tinta-3); }
.sim .sim-sistema .swa-burbuja { animation: none; box-shadow: none; border: 1px solid var(--mc-linea); font-size: 13.5px; overflow-wrap: anywhere; }
.sim .sim-sistema .swa-deriv { padding-bottom: 10px; }

/* Tarjeta de derivación */
.sim .swa-deriv { display: flex; gap: 10px; padding: 10px 10px 20px; border-left: 3px solid var(--mc-violeta); }
.sim .swa-fila.cola.entra > .swa-pila > .swa-deriv:first-child { border-left-width: 3px; }
.sim .swa-deriv-ico {
  width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 19px;
  background: var(--mc-violeta-suave);
}
.sim .swa-deriv-cuerpo { min-width: 0; display: grid; gap: 2px; }
.sim .swa-deriv-cuerpo h4 { margin: 0; font-size: 14.5px; }
.sim .swa-deriv-rol { font-size: 12px; color: var(--wa-tinta-2); }
.sim .swa-deriv-cuerpo p { margin: 3px 0 0; font-size: 12.5px; color: var(--wa-tinta); }
.sim .swa-deriv-sigue { color: var(--wa-tinta-2) !important; }
.sim .swa-deriv-pausa {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 9px; border-radius: 999px;
  background: var(--mc-violeta-suave); color: var(--sim-t-violeta) !important; font-weight: 650;
}

/* Notas de voz */
.sim .swa-audio { min-width: 252px; padding: 7px 8px 20px 7px; }
.sim .swa-rep { display: flex; align-items: center; gap: 8px; }
.sim .swa-play {
  width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: transparent; color: var(--wa-tinta-2); cursor: pointer;
}
.sim .swa-play svg { width: 30px; height: 30px; }
.sim .swa-play[aria-disabled="true"] { opacity: .5; cursor: help; }
.sim .swa-rep-medio { flex: 1; min-width: 0; display: grid; gap: 4px; }
.sim .swa-onda { position: relative; height: 28px; display: flex; align-items: center; gap: 2px; border-radius: 4px; }
.sim .swa-onda i { flex: 1; min-width: 2px; height: calc(var(--h) * 100%); border-radius: 2px; background: var(--swa-onda-off); transition: background .15s; }
.sim .swa-onda i.on { background: var(--swa-onda-on); }
.sim .swa-seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sim .swa-seek:disabled { cursor: default; }
.sim .swa-onda:has(.swa-seek:focus-visible) { outline: 2px solid var(--mc-queso); outline-offset: 3px; }
.sim .swa-rep-dur { font-size: 11px; color: var(--wa-tinta-2); font-variant-numeric: tabular-nums; }
.sim .swa-fila.sale .swa-rep-dur { color: var(--swa-meta-sale); }
.sim .swa-rep-av { position: relative; flex: none; }
.sim .swa-rep-mic { position: absolute; bottom: -3px; right: -5px; width: 19px; height: 19px; display: grid; place-items: center; color: var(--swa-verde); }
.sim .swa-fila.entra .swa-rep-mic { right: auto; left: -5px; }
.sim .swa-rep-mic svg { width: 17px; height: 17px; filter: drop-shadow(0 0 1.5px var(--wa-entrante)); }
.sim .swa-rep.escuchada .swa-rep-mic { color: var(--wa-tilde); }
.sim .swa-fila.sale .swa-rep-mic { color: var(--swa-meta-sale); }
.sim .swa-fila.sale:has(.swa-ticks[data-estado="leido"]) .swa-rep-mic { color: var(--wa-tilde); }
.sim .swa-avatar-mc.chico { width: 40px; height: 40px; }
/* Visor de una foto del chat, como el de WhatsApp: adentro del teléfono, en negro, con quién la
   mandó y cuándo arriba y el pie abajo (con su formato). La barra de estado pasa a negro. */
.sim .swa.con-visor .swa-status { background: #000; color: #fff; }
.sim .swa-visor {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; flex-direction: column;
  background: #000; color: #fff; animation: swa-visor-entra .18s ease-out;
}
@keyframes swa-visor-entra { from { opacity: 0; } }
.sim .swa-visor-cab { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 4px; background: rgb(0 0 0 / .55); }
.sim .swa-visor-atras {
  width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer;
}
.sim .swa-visor-atras svg { width: 22px; height: 22px; }
.sim .swa-visor-atras:focus-visible { outline: 2px solid var(--mc-queso); outline-offset: 1px; }
.sim .swa-visor-txt { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.sim .swa-visor-txt b { font-size: 16px; font-weight: 600; }
.sim .swa-visor-txt span { font-size: 12.5px; color: rgb(255 255 255 / .75); }
.sim .swa-visor-ico { display: grid; place-items: center; width: 32px; color: #fff; }
.sim .swa-visor-ico svg { width: 20px; height: 20px; }
.sim .swa-visor-foto { flex: 1; min-height: 0; display: grid; place-items: center; background: #000; }
.sim .swa-visor-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sim .swa-visor-foto.sin-foto { background: #000; }
.sim .swa-visor-pie {
  flex: none; max-height: 38%; overflow-y: auto; padding: 10px 16px 16px; background: rgb(0 0 0 / .6);
  font-size: 14.5px; line-height: 1.4; color: #fff;
}
.sim .swa-visor-pie .swa-texto::after { display: none; }
.sim .swa-visor-pie .swa-texto a { color: #8ecdf7; }
.sim .swa-reintentar {
  margin-top: 4px; padding: 3px 9px; border: 0; border-radius: 9px; background: var(--swa-sobre-fondo);
  color: var(--swa-sin); font-size: 12px; font-weight: 650; cursor: pointer;
}

/* Controles de la demo, AFUERA del teléfono (debajo del marco): estado de la conversación,
   tip, sugerencias para arrancar y el audio de ejemplo. Con la identidad de Maricre (no de
   WhatsApp), para que se lea que no son parte del chat. */
.sim-demo {
  display: grid; gap: 8px; padding: 10px 12px; border-radius: 16px; font-family: var(--mc-fuente);
  background: var(--mc-superficie); border: 1px solid var(--mc-linea); box-shadow: var(--mc-sombra);
}
.sim[data-modo="movil"] .sim-demo { border-radius: 0; border-width: 1px 0 0; box-shadow: none; padding: 8px 10px; gap: 6px; }
.sim-demo-resto { display: grid; gap: 8px; min-width: 0; }
.sim-demo-resto:empty { display: none; }
.sim-demo-estado {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.35;
  background: var(--mc-violeta-suave); color: var(--sim-t-violeta); animation: mc-entra .25s ease-out;
}
.sim-demo-estado b { color: inherit; }
.sim-demo-estado .mc-adaptable { margin-left: auto; flex: none; }
.sim-sugs { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
.sim-sugs::-webkit-scrollbar { display: none; }
.sim:not([data-modo="movil"]) .sim-sugs { flex-wrap: wrap; overflow: visible; }
.sim-sugs-rot { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--mc-tinta-3); }
.sim-sug {
  flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--mc-linea); border-radius: 999px; background: var(--mc-superficie-2); color: var(--mc-tinta);
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.sim-sug > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.sim-sug:hover { border-color: var(--sim-acento); }
.sim-sug.resaltada { border-color: var(--mc-queso); animation: sim-pulso 1.8s ease-out infinite; }
@keyframes sim-pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mc-queso) 55%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.sim .sim-tip {
  position: relative; padding: 8px 32px 9px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.42;
  background: var(--mc-superficie-2); color: var(--mc-tinta);
  border: 1px solid color-mix(in srgb, var(--mc-queso) 55%, transparent); border-left: 4px solid var(--mc-queso);
  animation: mc-entra .25s ease-out;
  font-family: var(--mc-fuente);
}
.sim .sim-tip-rot { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sim-t-alerta); }
.sim .sim-tip p { margin: 2px 0 0; }
.sim .sim-tip-x {
  position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border: 0; border-radius: 8px;
  background: transparent; color: var(--mc-tinta-3); cursor: pointer;
}
.sim .sim-tip-x:hover { background: var(--mc-superficie); }
.sim .sim-tip-accion {
  padding: 0; border: 0; background: none; color: var(--sim-acento); font-weight: 750; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; font-size: inherit;
}
.sim-vencida {
  margin: 0; padding: 7px 12px; border-radius: 10px; text-align: center; font-size: 12.5px;
  background: var(--mc-alerta-suave); color: var(--sim-t-alerta);
}
/* En el celular, mientras el asistente trabaja, la barra de arriba del teléfono dice qué está
   haciendo (en escritorio se ve en «Detrás de escena»). */
.sim-vivo { display: none; }
.sim[data-modo="movil"] .sim-tel-top.con-vivo .sim-quien { display: none; }
.sim[data-modo="movil"] .sim-tel-top.con-vivo .sim-vivo {
  display: block; flex: 1; min-width: 0; margin: 0; font-size: 12.5px; font-weight: 650; color: var(--mc-tinta-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: mc-entra .2s ease-out;
}

/* Barra de entrada */
.sim .swa-entrada, .sim .swa-grabando { flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 6px 8px 9px; }
.sim .swa-campo, .sim .swa-grab-campo {
  flex: 1; min-width: 0; display: flex; align-items: flex-end; min-height: 46px; padding: 3px 6px;
  background: var(--swa-campo); color: var(--swa-campo-tinta); border-radius: 24px; box-shadow: var(--swa-sombra);
}
.sim .swa-campo:focus-within { box-shadow: var(--swa-sombra), 0 0 0 2px color-mix(in srgb, var(--swa-verde) 55%, transparent); }
.sim .swa-ico {
  width: 38px; height: 40px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: transparent; color: var(--swa-icono);
}
.sim .swa-ico svg { width: 24px; height: 24px; }
.sim .swa-clip, .sim .swa-cam { cursor: help; }
.sim .swa-cam svg { width: 23px; height: 23px; }
.sim .swa-clip svg { transform: rotate(-45deg); }
.sim .swa-input {
  flex: 1; min-width: 0; max-height: 124px; padding: 10px 4px; border: 0; outline: 0; resize: none; overflow-y: auto;
  background: transparent; color: var(--swa-campo-tinta); font: inherit; font-size: 15px; line-height: 20px;
}
.sim .swa-input::placeholder { color: var(--swa-icono); }
.sim .swa-input:disabled { cursor: not-allowed; }
.sim .swa-accion {
  width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--swa-accion); color: var(--swa-accion-tinta); box-shadow: var(--swa-sombra); transition: transform .12s, background .15s;
}
.sim .swa-accion svg { width: 23px; height: 23px; }
.sim .swa-accion.enviar svg { width: 21px; height: 21px; margin-left: 2px; }
.sim .swa-accion:active { transform: scale(.94); }
.sim .swa-accion[aria-disabled="true"] { background: #7f9199; color: #fff; cursor: help; }
.sim .swa-accion:disabled { opacity: .5; cursor: not-allowed; }
.sim .swa-grab-campo { align-items: center; gap: 8px; padding: 3px 12px 3px 3px; }
.sim .swa-grab-cancelar { color: #e5484d; cursor: pointer; }
.sim .swa-grab-punto { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #e5484d; animation: sim-latido 1s ease-in-out infinite; }
@keyframes sim-latido { 50% { opacity: .25; } }
.sim .swa-grab-tiempo { min-width: 38px; font-size: 15px; font-variant-numeric: tabular-nums; }
.sim .swa-grab-onda { flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; overflow: hidden; }
.sim .swa-grab-onda i { width: 3px; flex: none; height: calc(var(--h) * 100%); border-radius: 2px; background: var(--swa-icono); animation: swa-barra .2s ease-out; }
@keyframes swa-barra { from { transform: scaleY(.2); } }
.sim .swa-grab-tope { font-size: 11px; color: var(--swa-icono); white-space: nowrap; }

.sim .swa-abajo {
  position: absolute; right: 12px; bottom: 10px; width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--swa-campo); color: var(--swa-icono); box-shadow: 0 2px 8px rgb(0 0 0 / .22); cursor: pointer;
}
.sim .swa-abajo svg { width: 26px; height: 26px; }
.sim .swa-abajo-n {
  position: absolute; top: -6px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center;
  background: var(--swa-verde); color: var(--swa-accion-tinta); font-size: 11px; font-weight: 800;
}
.sim .swa-abajo-n:empty { display: none; }

/* --------------------------------------------------------------------------
   Panel derecho
   -------------------------------------------------------------------------- */
.sim-der { display: flex; flex-direction: column; }
.sim-tabs {
  position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px;
  background: var(--mc-superficie); border-bottom: 1px solid var(--mc-linea); border-radius: 18px 18px 0 0;
}
.sim-tabs [role="tab"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px;
  border: 0; border-radius: 11px; background: transparent; color: var(--mc-tinta-2); font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.sim-tabs [role="tab"]:hover { background: var(--mc-superficie-2); }
.sim-tabs [role="tab"][aria-selected="true"] { background: var(--mc-bordo-suave); color: var(--sim-acento); }
@media (max-width: 420px) { .sim-tab-extra { display: none; } }
.sim-badge {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: inline-grid; place-items: center;
  background: var(--mc-bordo); color: #fff; font-size: 11px; font-weight: 800;
}
.sim-panel { padding: 14px 14px 18px; }
.sim-panel-sub {
  display: flex; align-items: center; gap: 6px; margin: 18px 2px 10px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mc-tinta-3);
}

.sim-ctx-cab {
  display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--mc-superficie)), var(--mc-superficie-2) 80%);
  border: 1px solid color-mix(in srgb, var(--c) 22%, var(--mc-linea));
}
.sim-ctx-cab { flex-wrap: wrap; }
.sim-ctx-id { flex: 1 1 160px; min-width: 0; }
.sim-ctx-id h3 { margin: 0; font-size: 16px; line-height: 1.2; }
.sim-ctx-id p { margin: 3px 0 0; font-size: 12.5px; color: var(--mc-tinta-3); line-height: 1.35; }
.sim-tel-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sim-ctx-cab > .mc-chip { flex: none; align-self: flex-start; }
.sim-ctx-filas { display: grid; margin: 8px 0 0; }
.sim-ctx-fila { display: grid; grid-template-columns: minmax(84px, 112px) 1fr; gap: 10px; padding: 7px 2px; border-bottom: 1px dashed var(--mc-linea); font-size: 13px; line-height: 1.4; }
.sim-ctx-fila dt { display: flex; align-items: baseline; gap: 6px; color: var(--mc-tinta-3); }
.sim-ctx-fila dd { margin: 0; color: var(--mc-tinta); min-width: 0; }
.sim-ctx-fila dd small { color: var(--mc-tinta-3); font-size: 12px; }
.sim-ctx-fila dd .mc-adaptable { margin-left: 4px; }
.sim-ctx-fila .mc-chip { font-size: 11px; padding: 1px 7px; }
.sim-ctx-esc { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; }
.sim-ctx-esc-t { margin-right: 2px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mc-tinta-3); }

.sim-turnos-lista { display: grid; gap: 10px; }
.sim-vacio-detras {
  padding: 24px 18px; border: 1.5px dashed var(--mc-linea); border-radius: 14px; text-align: center;
  font-size: 13.5px; line-height: 1.5; color: var(--mc-tinta-2);
}
.sim-vacio-detras p { margin: 0; }
.sim-vacio-ico { display: block; margin-bottom: 6px; font-size: 28px; }
.sim-turno {
  padding: 11px 12px 10px; border: 1px solid var(--mc-linea); border-radius: 14px; background: var(--mc-superficie);
  animation: mc-entra .3s ease-out; transition: border-color .3s, box-shadow .3s;
}
.sim-turno.vivo { border-color: color-mix(in srgb, var(--mc-queso) 75%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-queso) 20%, transparent); }
.sim-turno.push { background: linear-gradient(180deg, var(--mc-info-suave), var(--mc-superficie) 55%); }
.sim-turno.error { border-color: color-mix(in srgb, var(--mc-error) 60%, transparent); }
.sim-turno-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sim-turno-n { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sim-acento); }
.sim-turno-cab time { font-size: 11.5px; color: var(--mc-tinta-3); font-variant-numeric: tabular-nums; }
.sim-turno-msg { margin: 4px 0 9px; font-size: 13.5px; font-weight: 650; line-height: 1.4; color: var(--mc-tinta); }
.sim-turno-etq { display: block; font-size: 12px; font-weight: 600; color: var(--mc-tinta-2); }
.sim-ident {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 9px; padding: 8px 10px; border-radius: 10px;
  background: var(--mc-exito-suave); font-size: 12.5px; line-height: 1.45; color: var(--mc-tinta);
}
.sim-ident p { margin: 0; flex: 1; }
.sim-pasos { list-style: none; margin: 0; padding: 0; display: grid; }
.sim-paso { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: start; padding: 4px 0 6px; animation: sim-aparece .3s ease-out both; }
.sim-paso:not(:last-child)::before { content: ""; position: absolute; left: 13.5px; top: 32px; bottom: -4px; width: 1.5px; background: var(--mc-linea); }
.sim-paso-ico {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  background: var(--mc-superficie-2); border: 1px solid var(--mc-linea);
}
.sim-paso-txt { display: grid; gap: 1px; min-width: 0; padding-top: 4px; }
.sim-paso-txt b { font-size: 13px; font-weight: 650; line-height: 1.35; color: var(--mc-tinta); }
.sim-paso-txt small { font-size: 12px; line-height: 1.4; color: var(--mc-tinta-3); overflow-wrap: anywhere; }
.sim-paso > .mc-adaptable, .sim-paso > .mc-cargando { margin-top: 5px; }
/* Paso «Le mandó la foto de …»: la misma foto, en chico (tocarla la agranda). */
.sim-paso.con-foto { grid-template-columns: 28px 1fr auto auto; }
.sim-paso-foto {
  width: 54px; aspect-ratio: 3 / 2; margin-top: 3px; padding: 0; border: 1px solid var(--mc-linea); border-radius: 6px;
  cursor: zoom-in; font: inherit;
}
.sim-paso-foto:disabled { cursor: default; }
.sim-paso-foto .mc-foto-ico { font-size: 18px; }
.sim-paso-foto .mc-foto-reemplazo small { display: none; }
.sim-paso.corriendo .sim-paso-ico { border-color: var(--mc-queso); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-queso) 22%, transparent); }
.sim-paso.listo .sim-paso-txt b { color: var(--mc-tinta-2); font-weight: 550; }
@keyframes sim-aparece { from { opacity: 0; transform: translateY(4px); } }
.sim-turno-pie { display: grid; gap: 7px; margin-top: 8px; }
.sim-turno-pie:empty { display: none; }
.sim-turno-estado { display: flex; flex-wrap: wrap; gap: 5px; }
.sim-turno-estado .mc-chip { font-size: 11.5px; }
.sim-tecnico { padding-top: 7px; border-top: 1px dashed var(--mc-linea); font-size: 12px; color: var(--mc-tinta-3); }
.sim-tecnico summary { cursor: pointer; font-family: var(--mc-fuente-mono); font-size: 11.5px; line-height: 1.45; border-radius: 6px; }
.sim-tecnico dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 8px 0 6px; }
.sim-tecnico dl div { display: contents; }
.sim-tecnico dd { margin: 0; font-family: var(--mc-fuente-mono); font-variant-numeric: tabular-nums; color: var(--mc-tinta-2); }
.sim-tecnico p { margin: 4px 0 0; }
.sim-evento {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 7px; align-items: start; padding: 7px 10px; border-radius: 11px;
  background: var(--mc-superficie-2); border: 1px solid var(--mc-linea); font-size: 12.5px; line-height: 1.4; color: var(--mc-tinta-2);
  animation: mc-entra .3s ease-out;
}
.sim-evento p { margin: 0; }
.sim-evento time { font-size: 11px; color: var(--mc-tinta-3); }
.sim-evento.retomada { grid-template-columns: 22px 1fr; }

/* Bandeja del vendedor */
.sim-bj-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sim-bj-op { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--mc-tinta-2); }
.sim-bj-op select {
  max-width: 260px; min-height: 36px; padding: 6px 8px; border: 1px solid var(--mc-linea); border-radius: 9px;
  background: var(--mc-superficie); color: var(--mc-tinta); font: inherit; font-size: 13px;
}
.sim-bj-consola { font-size: 12.5px; font-weight: 750; color: var(--sim-acento); text-decoration: none; }
.sim-bj-consola:hover { text-decoration: underline; }
.sim-bj-nota { margin: 9px 0 12px; font-size: 12px; line-height: 1.45; color: var(--mc-tinta-3); }
.sim-bj-lista { display: grid; gap: 6px; }
.sim-bj-item {
  width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 9px 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--mc-linea); border-radius: 12px; background: var(--mc-superficie); transition: border-color .15s, box-shadow .15s;
}
.sim-bj-item:hover { border-color: var(--mc-tinta-3); }
.sim-bj-item.sel { border-color: var(--sim-acento); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mc-bordo) 18%, transparent); }
.sim-bj-item-txt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }
.sim-bj-item-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--mc-tinta); }
.sim-bj-item-cab time { flex: none; font-size: 11px; color: var(--mc-tinta-3); }
.sim-bj-item-ult { font-size: 12.5px; color: var(--mc-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-bj-item-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sim-bj-item-chips .mc-chip { font-size: 11px; padding: 1px 7px; }
.sim-bj-detalle { margin-top: 12px; }
.sim-bj-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--mc-linea); border-radius: 14px; background: var(--mc-superficie-2); }
.sim-bj-card-cab { display: flex; align-items: center; gap: 10px; }
.sim-bj-card-cab > div { flex: 1; min-width: 0; }
.sim-bj-card-cab h4 { margin: 0; font-size: 14.5px; }
.sim-bj-card-cab > div > span { font-size: 12px; color: var(--mc-tinta-3); }
.sim-bj-card-cab .mc-chip { flex: none; }
.sim-bj-resumen { padding: 8px 10px; border: 1px solid var(--mc-linea); border-radius: 10px; background: var(--mc-superficie); font-size: 12.5px; line-height: 1.45; }
.sim-bj-resumen p { margin: 0 0 4px; }
.sim-bj-resumen p:last-child { margin: 0; }
.sim-bj-tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sim-bj-tickets li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.sim-bj-tickets small { margin-left: auto; color: var(--mc-tinta-3); }
.sim-bj-pedido { display: grid; gap: 6px; padding: 9px 10px; border: 1px solid var(--mc-linea); border-radius: 10px; background: var(--mc-superficie); font-size: 12.5px; }
.sim-bj-pedido-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sim-bj-total { margin-left: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.sim-bj-pedido p { margin: 0; color: var(--mc-tinta-2); line-height: 1.4; }
.sim-bj-pedido .sim-bj-aprob { color: var(--sim-t-alerta); }
.sim-bj-pedido .sim-bj-aprob.ok { color: var(--sim-t-exito); font-weight: 600; }
.sim-bj-pedido .sim-bj-aprob.error { color: var(--sim-t-error); }
.sim-bj-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sim-bj-acc .primario { margin-left: auto; }
.sim-bj-acc .mc-btn { min-height: 34px; }
.sim-bj-resp { display: grid; gap: 7px; }
.sim-bj-resp-t { font-size: 12.5px; color: var(--mc-tinta-2); }
.sim-bj-resp textarea {
  min-height: 70px; padding: 9px 10px; border: 1px solid var(--mc-linea); border-radius: 10px; resize: vertical;
  background: var(--mc-superficie); color: var(--mc-tinta); font: inherit; font-size: 13.5px; line-height: 1.4;
}
.sim-bj-resp textarea:focus-visible { outline: 2px solid var(--mc-queso); outline-offset: 1px; }
.sim-bj-sugs { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-bj-sug {
  padding: 5px 10px; border: 1px dashed var(--mc-linea); border-radius: 999px; background: var(--mc-superficie);
  color: var(--mc-tinta-2); font-size: 12px; text-align: left; cursor: pointer;
}
.sim-bj-sug:hover { border-color: var(--mc-tinta-3); color: var(--mc-tinta); }
.sim-bj-vacio { padding: 22px 16px; border: 1.5px dashed var(--mc-linea); border-radius: 14px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--mc-tinta-3); }
.sim-bj-vacio span { display: block; margin-bottom: 4px; font-size: 26px; }
.sim-bj-vacio p { margin: 0; }
.sim-rechazo label { display: block; margin-bottom: 8px; font-size: 13.5px; color: var(--mc-tinta-2); }
.sim-rechazo textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--mc-linea); border-radius: 10px; resize: vertical;
  background: var(--mc-superficie-2); color: var(--mc-tinta); font: inherit; font-size: 14px;
}

/* --------------------------------------------------------------------------
   Hojas inferiores (mobile) y cajón lateral (820–1199)
   -------------------------------------------------------------------------- */
.sim-hoja {
  margin: auto 0 0; width: 100%; max-width: 100%; max-height: 90dvh; padding: 0; border: 0;
  border-radius: 20px 20px 0 0; background: var(--mc-superficie); color: var(--mc-tinta); box-shadow: var(--mc-sombra-alta);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), overlay .3s allow-discrete, display .3s allow-discrete;
}
.sim-hoja[open] { display: flex; flex-direction: column; transform: none; }
@starting-style { .sim-hoja[open] { transform: translateY(100%); } }
.sim-hoja::backdrop { background: rgb(20 16 14 / 0); transition: background .3s, overlay .3s allow-discrete, display .3s allow-discrete; }
.sim-hoja[open]::backdrop { background: rgb(20 16 14 / .5); }
@starting-style { .sim-hoja[open]::backdrop { background: rgb(20 16 14 / 0); } }
.sim-hoja.arrastrando { transition: none; }
.sim-hoja.lateral {
  margin: 0 auto 0 0; width: min(390px, 92vw); height: 100dvh; max-height: 100dvh; border-radius: 0 20px 20px 0; transform: translateX(-100%);
}
.sim-hoja.lateral[open] { transform: none; }
@starting-style { .sim-hoja.lateral[open] { transform: translateX(-100%); } }
.sim-hoja-cab {
  position: relative; flex: none; display: flex; align-items: center; gap: 8px; padding: 16px 12px 10px 16px;
  border-bottom: 1px solid var(--mc-linea); touch-action: none; cursor: grab; user-select: none;
}
.sim-hoja-asa { position: absolute; top: 6px; left: 50%; width: 42px; height: 4px; border-radius: 2px; transform: translateX(-50%); background: var(--mc-linea); }
.sim-hoja.lateral .sim-hoja-asa { display: none; }
.sim-hoja-cab h2 { flex: 1; margin: 0; font-size: 16px; }
.sim-hoja-x { font-size: 16px; }
.sim-hoja-cuerpo { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
.sim-hoja .sim-esc, .sim-hoja .sim-der { max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
.sim-hoja .sim-tabs { border-radius: 0; }
.sim-hoja .sim-esc { padding-top: 0; }

/* --------------------------------------------------------------------------
   Bienvenida (diálogo de core.modal, fuera de .sim)
   -------------------------------------------------------------------------- */
.sim-bienv-dlg .mc-dialog-cab h2 { font-size: 24px; }
.sim-bienv-lead { margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--mc-tinta-2); }
.sim-bienv-lead b { color: var(--mc-tinta); }
.sim-bienv-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sim-bienv-pasos li {
  display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: center; padding: 10px;
  border: 1px solid var(--mc-linea); border-radius: 14px; background: var(--mc-superficie-2);
}
.sim-bienv-txt > b { display: block; font-size: 14.5px; color: var(--mc-tinta); }
.sim-bienv-txt > span { display: block; font-size: 13px; line-height: 1.45; color: var(--mc-tinta-2); }
.sim-bienv-ilus { position: relative; height: 66px; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sim-bienv-ilus.uno { background: linear-gradient(135deg, var(--mc-bordo-suave), var(--mc-queso-suave)); }
.sim-bienv-ilus.uno .sim-av { box-shadow: 0 0 0 2.5px var(--mc-superficie-2); }
.sim-bienv-ilus.uno .sim-av + .sim-av { margin-left: -6px; }
.sim-bienv-ilus.dos { flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; padding: 8px 9px; background: var(--wa-fondo); }
.sim-bienv-ilus.dos .b {
  max-width: 88%; padding: 3px 7px; border-radius: 6px; font-size: 9.5px; font-style: normal; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--wa-tinta); box-shadow: 0 1px .5px rgb(0 0 0 / .12);
}
.sim-bienv-ilus.dos .sale { align-self: flex-end; background: var(--wa-saliente); }
.sim-bienv-ilus.dos .entra { align-self: flex-start; background: var(--wa-entrante); }
.sim-bienv-ilus.dos .mic {
  position: absolute; right: 7px; bottom: 7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--swa-accion); color: var(--swa-accion-tinta);
}
.sim-bienv-ilus.dos .mic svg { width: 12px; height: 12px; }
.sim-bienv-ilus.tres { gap: 7px; background: var(--mc-info-suave); }
.sim-bienv-ilus.tres i {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-style: normal;
  background: var(--mc-superficie); box-shadow: var(--mc-sombra);
}
.sim-bienv-nota { margin: 14px 0 0; font-size: 13px; color: var(--mc-tinta-3); }
@media (max-width: 520px) {
  .sim-bienv-dlg .mc-dialog-cab h2 { font-size: 21px; }
  .sim-bienv-lead { font-size: 14.5px; }
  .sim-bienv-pasos li { grid-template-columns: 80px 1fr; gap: 10px; padding: 8px; }
  .sim-bienv-ilus { height: 58px; }
  .sim-bienv-ilus.dos .b { font-size: 8px; }
  .sim-bienv-ilus.uno .sim-av { --t: 28px !important; }
  .sim-bienv-dlg .mc-dialog-acciones .mc-btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sim-hoja, .sim-hoja.lateral { transform: none; }
  @starting-style { .sim-hoja[open], .sim-hoja.lateral[open] { transform: none; } }
  .sim-sug.resaltada { animation: none; }
}