/* Sellala — panel: pedidos de sello + Herramientas */

/* pedidos de sello (Hoy y Sellar) */
.x-sol{background:var(--blanco);border-radius:var(--r-caja);box-shadow:0 0 0 2px var(--cobalto),0 8px 22px -12px rgba(35,64,224,.45);padding:16px;display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.x-sol .cab-sol{display:flex;flex-direction:column;gap:2px}
.x-sol .cab-sol b{font:700 var(--t-encabezado)/1.2 var(--display)}
.x-sol .cab-sol small{color:var(--gris);font-size:var(--t-nota)}
.x-sol ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.x-sol li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border-radius:12px;background:var(--papel)}
.x-sol li .t{display:flex;flex-direction:column;min-width:0}
.x-sol li .t small{color:var(--gris);font-size:var(--t-chico)}
.x-sol .acc{display:flex;gap:6px}
.x-doble{display:inline-block;font:700 var(--t-micro)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--lima);color:var(--tinta);padding:3px 6px;border-radius:6px;vertical-align:2px}
.feed li:has(.x-anular){grid-template-columns:34px minmax(0,1fr) auto auto}
.x-anular{min-height:34px;padding:6px 12px}

/* sección Herramientas */
.x-herr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
@media (max-width:1400px){.x-herr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.x-herr{grid-template-columns:minmax(0,1fr);gap:12px}}
.x-grupo{grid-column:1/-1;margin:10px 0 -4px}
/* tarjeta cerrada: mismo alto para todas; abierta: ocupa todo el ancho y muestra sus opciones */
.x-tool{display:flex;flex-direction:column;gap:14px}
.x-tool .x-cab{flex:1}
.x-tool.abierta{grid-column:1/-1}
.x-pie-tool{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--linea)}
.x-estado{font:600 var(--t-etiqueta)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gris);display:inline-flex;align-items:center;gap:6px}
.x-estado::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--linea)}
.x-estado.si{color:var(--ok)}.x-estado.si::before{background:var(--ok)}
.x-estado.neutro::before{display:none}
.x-abrir{gap:6px}
.x-chev{width:16px;height:16px;transition:transform .2s var(--ease)}
.x-tool.abierta .x-chev{transform:rotate(180deg)}
.x-tool.abierta .x-cuerpo{padding-top:4px}
.x-tool{transition:box-shadow .25s var(--ease)}
.x-tool.on{box-shadow:0 0 0 1.5px var(--ok),var(--sombra)}
.x-tool.brilla,.x-regalos li.brilla{animation:xbrilla 1.6s var(--ease)}
@keyframes xbrilla{0%,40%{box-shadow:0 0 0 3px var(--woop)}100%{box-shadow:var(--sombra)}}
.x-cab{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;align-items:start}
.x-cab h2{font:700 var(--t-encabezado)/1.25 var(--display)}
.x-cab p{color:var(--gris);font-size:var(--t-nota);margin-top:3px}
.x-ic{width:42px;height:42px;border-radius:12px;background:var(--papel);display:grid;place-items:center;color:var(--cobalto)}
.x-ic svg{width:22px;height:22px}
.x-ic.chico{width:32px;height:32px;border-radius:9px}.x-ic.chico svg{width:18px;height:18px}
.x-tool.on .x-ic{background:var(--ok-suave);color:var(--ok)}
.x-cuerpo{display:flex;flex-direction:column;gap:14px;min-width:0}
.x-fila{display:flex;gap:8px;align-items:center}
.x-fila .inp{flex:1;min-width:0}
.x-num{max-width:110px}
.inp-pre em{position:absolute;font-style:normal;color:var(--gris);font-weight:600;pointer-events:none;right:14px}
.inp-pre em:first-child{left:14px;right:auto}
.inp-pre em:first-child + .inp{padding-left:30px}
.inp-pre .inp:not(:last-child){padding-right:74px}
.x-stats{grid-template-columns:repeat(2,minmax(0,1fr))}

/* mapa de horas */
.x-mapa-wrap{overflow-x:auto;scrollbar-width:thin}
.x-mapa{position:relative;display:grid;grid-template-columns:34px repeat(var(--cols),minmax(14px,1fr));gap:3px;min-width:320px}
.x-mapa span{font:600 var(--t-micro)/1 var(--mono);color:var(--gris2);display:flex;align-items:center}
.x-mapa .h{justify-content:center;height:14px}
.x-mapa .d{height:18px}
.x-mapa i{height:18px;border-radius:4px;background:color-mix(in srgb,var(--cobalto) calc(var(--v) * 100%),var(--hundido))}
.x-mapa-vacio{position:absolute;inset:18px 0 0 34px;display:grid;place-items:center;background:rgba(255,255,255,.72);font-size:var(--t-nota);color:var(--gris);text-align:center;padding:10px}
.x-leyenda{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:var(--t-etiqueta);color:var(--gris)}
.x-leyenda i{width:90px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--hundido),var(--cobalto))}
.x-sug{display:flex;flex-direction:column;gap:8px}
.x-sug b{font-size:var(--t-texto)}
.x-sug div{display:flex;gap:8px;flex-wrap:wrap}
.x-sug .btn svg{color:var(--woop)}
.x-promos{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.x-promos li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px;border-radius:12px;background:var(--papel)}
.x-promos li.pausada{opacity:.6}
.x-promos .t{display:flex;flex-direction:column;min-width:0}
.x-promos .t small{color:var(--gris);font-size:var(--t-chico)}
.x-promos .acc{display:flex;gap:4px;align-items:center;flex-shrink:0}
.x-nueva{border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--linea);padding:4px 14px}
.x-nueva[open]{padding-bottom:14px;display:flex;flex-direction:column;gap:12px}
.x-nueva summary{cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:600;min-height:44px;list-style:none}
.x-nueva summary::-webkit-details-marker{display:none}
.x-nueva summary svg{width:18px;height:18px}
.x-nueva[open] > :not(summary){margin-top:10px}
.x-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.x-dias button{min-height:42px;border:none;border-radius:10px;background:var(--hundido);font-weight:600;font-size:var(--t-nota);color:var(--gris)}
.x-dias button[aria-pressed=true]{background:var(--tinta);color:#fff}

/* niveles */
.x-niveles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.x-niv{--nv:#A0673F;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:12px;background:var(--papel)}
.x-niv.n-plata{--nv:#7F8794}.x-niv.n-oro{--nv:#B7861F}
.x-niv .med{width:34px;height:34px;border-radius:50%;background:var(--nv);color:#fff;display:grid;place-items:center}
.x-niv .med svg{width:20px;height:20px}
.x-niv b{font:700 var(--t-apartado)/1 var(--display)}
.x-niv small{color:var(--gris);font-size:var(--t-etiqueta)}

/* sello sin mostrador */
.x-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.x-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.x-modo{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;background:var(--papel);min-width:0}
.x-modo-cab{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center}
.x-modo-cab b{font-size:var(--t-texto);line-height:1.2}
.x-modo p{font-size:var(--t-nota);color:var(--gris)}
.x-modo p b{color:var(--tinta)}
.x-modo .btn{align-self:flex-start}
.x-stickers{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.x-stickers li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--t-nota);background:var(--blanco);padding:8px 10px;border-radius:10px}
.x-stickers em{color:var(--gris);font-style:normal}
.x-claves{background:var(--tinta);color:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.x-claves p{color:#C9CBD2;font-size:var(--t-nota)}
.x-claves dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:var(--t-nota)}
.x-claves dt{color:#9A9EA8}
.x-claves dd{margin:0;word-break:break-all;color:var(--lima)}
.x-claves .btn{align-self:flex-start;background:#fff;color:var(--tinta)}

/* encuesta */
.x-enc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.x-enc .prom{display:flex;flex-direction:column}
.x-enc .prom b{font:800 2.2rem/1 var(--display)}
.x-enc .prom small{color:var(--gris);font-size:var(--t-chico);max-width:12ch}
.x-enc .barras{display:flex;flex-direction:column;gap:5px}
.x-enc .barras div{display:grid;grid-template-columns:12px minmax(0,1fr) 28px;gap:8px;align-items:center;font:600 var(--t-etiqueta)/1 var(--mono);color:var(--gris)}
.x-enc .barras div > i{height:8px;border-radius:4px;background:var(--hundido);overflow:hidden;display:block}
.x-enc .barras div > i > i{display:block;height:100%;border-radius:4px}
.x-enc .n5,.x-enc .n4{background:var(--ok)}.x-enc .n3{background:#C9A227}.x-enc .n2,.x-enc .n1{background:var(--error)}
.x-enc .barras em{font-style:normal;text-align:right}
.x-coment{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto}
.x-coment li{padding:10px 12px;border-radius:12px;background:var(--papel);font-size:var(--t-nota);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.x-coment p{width:100%;color:var(--tinta)}
.x-coment time{font-size:var(--t-etiqueta);color:var(--gris2)}

/* resumen de los lunes */
.x-wa{background:#E6DDD3;border-radius:12px;padding:14px}
.x-wa .burbuja{background:#fff;border-radius:10px 10px 10px 2px;padding:10px 12px;font-size:var(--t-nota);line-height:1.45;max-width:420px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.x-wa .de{display:block;font-weight:700;color:#1F7A5A;font-size:var(--t-chico);margin-bottom:4px}
.x-yendo{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:12px;background:var(--alerta-suave)}
.x-yendo > small{color:#6d4206;font-size:var(--t-chico)}
.x-yendo ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.x-yendo li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:center}
.x-yendo li .av{width:32px;height:32px;font-size:.75rem}
.x-yendo li > span:not(.av){display:flex;flex-direction:column;min-width:0}
.x-yendo li small{color:var(--gris);font-size:var(--t-chico)}
.x-yendo .btn{align-self:flex-start}
.x-costo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--t-nota);color:var(--gris)}

/* club */
.x-socios{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.x-socios li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--papel)}
.x-socios li.vencido{opacity:.6}
.x-socios li span{display:flex;flex-direction:column;min-width:0}
.x-socios small{color:var(--gris);font-size:var(--t-chico)}
.x-socios .acc{display:flex;gap:4px;align-items:center}

/* regalos */
.x-prods{display:flex;flex-direction:column;gap:8px}
.x-prod{display:grid;grid-template-columns:minmax(0,1fr) 130px 40px;gap:8px;align-items:center}
.x-link{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:var(--t-nota);color:var(--gris)}
.x-link:empty{display:none}
.x-link b{color:var(--tinta);word-break:break-all}
.x-regalos{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.x-regalos li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--papel)}
.x-regalos li.vacio{display:block;color:var(--gris);font-size:var(--t-nota)}
.x-regalos .t{display:flex;flex-direction:column;min-width:0}
.x-regalos .t small{color:var(--gris);font-size:var(--t-chico)}
.x-regalos .acc{display:flex;gap:4px;align-items:center}

@media (max-width:1180px){.x-3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.x-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1040px){.x-herr{grid-template-columns:minmax(0,1fr)}}
@media (max-width:899px){
  .x-herr{gap:14px}
  .x-sol li{grid-template-columns:36px minmax(0,1fr)}
  .x-sol .acc{grid-column:1/-1}
  .x-sol .acc .btn{flex:1}
  .x-regalos li{grid-template-columns:minmax(0,1fr) auto}
  .x-regalos .acc{grid-column:1/-1}
  .x-prod{grid-template-columns:minmax(0,1fr) 40px}
  .x-prod > .inp{grid-column:1/-1}
  .x-enc{grid-template-columns:minmax(0,1fr)}
  .x-promos li{flex-direction:column;align-items:stretch}
  .feed li:has(.x-anular){grid-template-columns:34px minmax(0,1fr) auto}
  .feed li:has(.x-anular) time{grid-column:2}
}
@media (prefers-reduced-motion:reduce){.x-tool.brilla,.x-regalos li.brilla{animation:none}}

/* ---------- Avisos: medidor por celular, recomendaciones, lista a mano, vista previa Android (29-sep) ---------- */
.x-rot-sub{font-weight:400;color:var(--gris);font-size:var(--t-chico);margin-left:4px}
/* Ficha del cliente en el celu (12-oct): cortina lateral desde la derecha. Ver panel-cortina.js */
@media (max-width:899px){
  .hoja{top:calc(8px + env(safe-area-inset-top,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));left:auto;right:8px;width:min(420px,calc(100vw - 36px));height:auto;border-radius:20px;overflow:hidden;opacity:1;transform:translateX(calc(100% + 16px));transition:transform .26s cubic-bezier(.4,0,1,1);box-shadow:0 10px 40px rgba(21,22,28,.28)}
  .hoja.ver{transform:none;transition:transform .5s cubic-bezier(.32,.72,0,1)}
  .hoja .agarre{display:none}
  .hoja .cab-hoja{border-radius:0;padding-top:16px}
  .velo{transition:opacity .4s cubic-bezier(.32,.72,0,1)}
}
/* Ficha del cliente en el celu, ajuste (12-oct): casi todo el ancho, hasta abajo, cabecera con pastillitas */
.f-datos{display:none}
@media (max-width:899px){
  .hoja{top:calc(10px + env(safe-area-inset-top,0px));bottom:0;left:10px;right:0;width:auto;border-radius:22px 0 0 0}
  .hoja .cab-hoja{flex-wrap:wrap;align-items:center;gap:10px 12px;padding:16px 10px 14px 16px}
  .hoja .cab-hoja .t{flex:1;min-width:0}
  .hoja #fNom{font-size:var(--t-subtitulo);line-height:1.15}
  .hoja #fDesde{display:none}
  .f-datos{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
  .f-datos span{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;background:var(--papel);font-size:var(--t-chico);color:var(--gris);white-space:nowrap}
  .hoja .f-datos b{display:inline;font:600 var(--t-etiqueta)/1 var(--mono);color:var(--tinta)}
}
/* Ayuda y soporte (12-oct): preguntas frecuentes y "Contanos qué pasó". Ver panel-soporte.js */
.sop{display:flex;flex-direction:column;gap:16px}
.sop-grupo{display:flex;flex-direction:column;gap:8px}.sop-grupo[hidden]{display:none}
.sop-grupo>.eti{padding-left:4px}
.sop-lista{border-radius:var(--r-caja);background:var(--blanco);box-shadow:var(--sombra);overflow:hidden}
.sop-q+.sop-q{border-top:1px solid var(--linea)}.sop-q[hidden]{display:none}
.sop-q summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 16px;font-weight:600;font-size:var(--t-texto);line-height:1.3;cursor:pointer;list-style:none}
.sop-q summary::-webkit-details-marker{display:none}
.sop-q summary svg{flex:none;width:18px;height:18px;color:var(--gris2);transition:transform .25s var(--ease)}
.sop-q[open] summary svg{transform:rotate(180deg)}
.sop-pasos{list-style:none;counter-reset:paso;margin:0;padding:0 16px 16px;display:flex;flex-direction:column;gap:10px}
.sop-pasos li{counter-increment:paso;display:flex;gap:10px;align-items:flex-start;font-size:var(--t-texto);line-height:1.45;color:var(--tinta)}
.sop-pasos li::before{content:counter(paso);flex:none;width:24px;height:24px;margin-top:-1px;border-radius:50%;display:grid;place-items:center;background:var(--woop);color:#fff;font:700 var(--t-etiqueta)/1 var(--mono)}
.sop-nada{margin:0;color:var(--gris);text-align:center}
.sop-escribir{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px;border-radius:var(--r-caja);background:var(--tinta);color:#fff}
.sop-escribir .ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.sop-escribir .ic svg{width:20px;height:20px}
.sop-escribir .t{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.sop-escribir small{color:#B9BBC3;font-size:var(--t-nota);line-height:1.35}
.sop-escribir .btn{flex-basis:100%}
.sop-chips{display:flex;flex-wrap:wrap;gap:8px}
.sop-chip{height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--linea);background:var(--blanco);font:500 var(--t-texto) var(--texto);color:var(--tinta);cursor:pointer}
.sop-chip[aria-checked="true"]{border-color:var(--woop);background:#FFF6F1;color:var(--woop);font-weight:600}
.sop-hoja .campo small{color:var(--gris);font-size:var(--t-chico)}
.sop-nota{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:14px;background:#E8F8EE;color:#11663A;font-size:var(--t-nota);line-height:1.4}
.sop-nota svg{flex:none;width:20px;height:20px;margin-top:1px}
.sop-hoja .pago-pie .btn svg{width:18px;height:18px}
/* Más en el celu (12-oct): grupos en tarjetas compactas; Ajustes de a una tarjeta */
@media (max-width:899px){
  .mas-menu{gap:18px}
  .mas-menu .mas-grupo{display:flex;flex-direction:column;gap:8px}
  .mas-menu .mas-grupo>.eti{padding-left:4px}
  .mas-menu .mas-grupo>ul{list-style:none;margin:0;padding:0;border-radius:var(--r-caja);background:var(--blanco);box-shadow:var(--sombra);overflow:hidden}
  .mas-menu .mas-grupo li+li{border-top:1px solid var(--linea)}
  .mas-menu .mas-grupo a,.mas-menu .mas-grupo button{box-shadow:none;border-radius:0;min-height:60px;padding:10px 14px;gap:12px;background:none}
  .mas-menu .mas-grupo .ic{width:34px;height:34px;border-radius:10px}
  .mas-menu .mas-grupo .ic svg{width:18px;height:18px}
  .mas-menu .mas-grupo b{font-size:var(--t-texto)}
  .mas-menu .mas-grupo small{font-size:var(--t-chico);display:block;line-height:1.3}
  .mas-menu>li[data-pwa]>button{box-shadow:var(--sombra)}
  /* "Instalar la app" va suelta (no dentro de un grupo): mismas medidas que las demás filas, para que el ícono y el texto queden alineados (14-oct) */
  .mas-menu>li[data-pwa]>button{min-height:60px;padding:10px 14px;gap:12px}
  .mas-menu>li[data-pwa] .ic{width:34px;height:34px;border-radius:10px}
  .mas-menu>li[data-pwa] .ic svg{width:18px;height:18px}
  .mas-menu>li[data-pwa] b{font-size:var(--t-texto)}
  .mas-menu>li[data-pwa] small{font-size:var(--t-chico);display:block;line-height:1.3}
  .mas-menu .mas-salir{margin-top:4px}
  #v-ajustes[data-solo]>.cabv{display:none}
  #v-ajustes[data-solo] .caja[id^="aj-"]:not(.solo){display:none!important}
  #v-ajustes[data-solo] .caja.solo:not([hidden]){display:block!important}
  #v-ajustes[data-solo] .caja.solo>.sub{margin-top:8px}
  /* Tu cuenta en el celu (15-oct): suelta como caja (display:block) quedaba todo pegado; con Google o Apple suma la línea de con qué
     entra y el aviso de la contraseña. Mismo aire que en la compu. */
  #v-ajustes[data-solo] #aj-cuenta.solo:not([hidden]){display:flex!important;flex-direction:column;gap:14px}
  #v-ajustes[data-solo] #aj-cuenta.solo>.sub{margin-top:-6px}
  #v-ajustes[data-solo] #aj-datos.solo:not([hidden]){display:flex!important;flex-direction:column;gap:16px} /* Datos del comercio (28-oct): mismo aire */
  #v-ajustes[data-solo] #aj-datos.solo>.sub{margin-top:-8px}
  .volver-mas{display:none}
  #v-ajustes[data-solo] .volver-mas{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;height:40px;padding:0 12px 0 6px;margin-bottom:-4px;border-radius:999px;background:var(--blanco);box-shadow:var(--sombra);font-weight:600;font-size:var(--t-texto);color:var(--tinta);text-decoration:none}
  .volver-mas .atras{width:18px;height:18px;transform:rotate(180deg)}
}
/* Nombres largos en el celu (12-oct): ver panel-nombres.js */
@media (max-width:899px){
  .fila .nom.nom-ajusta,.hoja #fNom.nom-ajusta{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip;overflow-wrap:anywhere;line-height:1.15}
}
/* Avisos chiquitos en el celu (12-oct): bajan desde arriba. Ver panel-aviso.js */
@media (max-width:899px){
  .aviso-baja{position:fixed;z-index:200;left:10px;right:10px;top:calc(env(safe-area-inset-top,0px) + 8px);display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:20px;background:rgba(21,22,28,.95);color:#fff;box-shadow:0 16px 34px -14px rgba(0,0,0,.5);transform:translateY(calc(-100% - 24px - env(safe-area-inset-top,0px)));transition:transform .45s cubic-bezier(.32,.72,0,1)}
  .aviso-baja.ver{transform:none}
  .aviso-baja i{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#34C759}
  .aviso-baja.mal i{background:#FF453A}
  .aviso-baja svg{width:18px;height:18px}
  .aviso-baja .t{min-width:0;display:flex;flex-direction:column;gap:2px}
  .aviso-baja b{font-weight:700;font-size:var(--t-texto);line-height:1.25}
  .aviso-baja small{font-size:var(--t-chico);line-height:1.3;color:#B9BBC3}
}
/* PWA (12-oct): tarjeta "Instalá Sellala" en Hoy y pasos para instalar. Solo celu. Verde claro en la herramienta prendida. */
.pwa-aviso{display:none}
@media (max-width:899px){
  .x-tool.on{box-shadow:0 0 0 1.5px #34C759,var(--sombra)}
  .x-tool.on .x-ic{background:#E3F7E8;color:#1E9E46}
  .pwa-aviso{display:flex;align-items:center;gap:12px;padding:12px 8px 12px 12px;border-radius:var(--r-caja);background:var(--blanco);box-shadow:var(--sombra)}
  .pwa-aviso img{flex:none;border-radius:11px}
  .pwa-aviso .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .pwa-aviso b{font-weight:700;font-size:var(--t-texto);line-height:1.25}
  .pwa-aviso small{color:var(--gris);font-size:var(--t-chico);line-height:1.3}
  .pwa-aviso .btn{flex:none}
  .pwa-aviso .icbtn{flex:none;width:36px;height:36px;color:var(--gris)}
  .pwa-pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .pwa-pasos li{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--blanco);border:1.5px solid var(--linea)}
  .pwa-pasos .n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--tinta);color:#fff;font:700 var(--t-chico)/1 var(--mono)}
  .pwa-pasos .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .pwa-pasos b{font-weight:500}.pwa-pasos b b{font-weight:700}
  .pwa-pasos small{color:var(--gris);font-size:var(--t-chico);line-height:1.35}
  .pwa-pasos .ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--papel);color:#0A84FF}
  .pwa-pasos .ic svg{width:22px;height:22px}
  .pwa-pasos li>img.ic{width:40px!important;height:40px!important;max-width:none;flex:none;padding:0;background:none;border-radius:11px;object-fit:cover}
}
/* Avisos en el celu, segunda tanda (12-oct): sin teléfono dibujado, Historial y automáticos desplegables. Solo celu. */
.solo-celu,.auto-abrir{display:none}
.auto-cuerpo{display:contents}
@media (max-width:899px){
  .solo-compu{display:none}
  .solo-celu{display:inline}
  .x-celu-col{display:none!important}
  .autos{gap:10px}
  .auto{padding:14px 14px 6px;gap:0}
  .auto .cab-auto{align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .auto-abrir{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;margin-top:6px;padding:0 2px;border:0;border-top:1px solid var(--linea);background:none;font:600 var(--t-nota) var(--texto);color:var(--gris);cursor:pointer}
  .auto-abrir .chev{width:18px;height:18px;transform:rotate(90deg);transition:transform .25s var(--ease)}
  .auto.abierta .auto-abrir .chev{transform:rotate(-90deg)}
  .auto-cuerpo{display:none}
  .auto.abierta .auto-cuerpo{display:flex;flex-direction:column;gap:12px;padding:4px 0 12px}
}
/* El interruptor de vidrio (12-oct, lab Gestos de app): todos los interruptores, solo celu */
@media (max-width:899px){
  .sw{width:64px;height:28px;-webkit-tap-highlight-color:transparent}
  .sw span{transition:background-color .3s ease,transform .3s ease}
  .sw input:checked+span{background:#34C759}
  .sw:active span{transform:scale(.75)}
  .sw span::before{content:"";position:absolute;left:21px;top:14px;width:1px;height:1px;border-radius:50%;box-shadow:0 0 40px 10px rgba(52,199,89,.65);opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none}
  .sw input:checked+span::before{transform:translateX(22px)}
  .sw:active span::before{opacity:1}
  .sw span::after{left:2px;top:2px;width:38px;height:24px;border-radius:999px;box-shadow:0 .5px 4px rgba(0,0,0,.12),0 6px 13px rgba(0,0,0,.12);transition:transform .3s ease,background-color .3s ease,box-shadow .3s ease}
  .sw input:checked+span::after{transform:translateX(22px)}
  .sw:active span::after{transform:translateX(-3.67px) scale(1.867);background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,.08) 55%,rgba(255,255,255,.35));box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),inset 1px 1px 2px rgba(255,255,255,.8),inset -1px -1px 2px rgba(0,0,0,.08),0 2px 10px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(2px) saturate(1.6);backdrop-filter:blur(2px) saturate(1.6)}
  .sw:active input:checked+span::after{transform:translateX(25.67px) scale(1.867)}
}
/* La página que retrocede (12-oct): con una hoja de filtro abierta, la página de atrás se achica sobre negro. Solo celu. */
@media (max-width:899px){
  body.retrocede{background:#08080A}
  body.retrocede .main{background:var(--papel)}
  .cab-cel,.main{transition:transform .5s cubic-bezier(.32,.72,0,1),clip-path .5s cubic-bezier(.32,.72,0,1)}
  .barra{transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .2s ease}
  body.retrocede .cab-cel,body.retrocede .main,body.retrocede .barra{transition-duration:.55s}
  /* la hoja de filtro sube desde el borde de abajo y baja entera */
  .filtro-hoja{opacity:1;transform:translateY(100%);transition:transform .42s cubic-bezier(.32,.72,0,1)}
  .filtro-hoja.ver{opacity:1;transform:none;transition:transform .55s cubic-bezier(.32,.72,0,1)}
  .velo:has(+ .filtro-hoja){transition:opacity .45s cubic-bezier(.32,.72,0,1)}
  body.retrocede .cab-cel,body.retrocede .main,body.retrocede .barra{transform:translateY(14px) scale(.91)}
  body.retrocede .cab-cel{clip-path:inset(0 round 24px 24px 0 0)}
  .filtro-hoja{max-height:calc(100dvh - 58px - env(safe-area-inset-top,0px))}
}
/* Avisos en el celu (12-oct): guía pintada y destino como filtro. La compu queda igual. */
.x-guia,.btn-dest{display:none}
@media (max-width:899px){
  #avMed,#avSug,.campo:has(>#avSug),#avDest,#avLista,#rotDest{display:none!important}
  .x-guia{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--papel)}
  .x-guia-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .x-guia-cab b{font-weight:700;font-size:var(--t-texto)}
  .x-guia-cab small{font:600 var(--t-micro)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
  .x-guia-txt{margin:0;font-size:var(--t-encabezado);line-height:1.75;word-break:break-word}
  .x-guia-txt mark{padding:2px 1px;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .x-guia-txt mark.v,.x-guia-ley i.v{background:#D6F2E0;color:#11663A}
  .x-guia-txt mark.a,.x-guia-ley i.a{background:#FBEFC8;color:#7A5A00}
  .x-guia-txt mark.r,.x-guia-ley i.r{background:#FBDADA;color:#B42318}
  .x-guia-txt .emo{display:inline-block;padding:0 3px;margin:0 1px;border-radius:6px;box-shadow:inset 0 0 0 2px var(--woop);background:var(--blanco)}
  .x-guia-ley{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:var(--t-chico);color:var(--gris)}
  .x-guia-ley li{display:flex;align-items:center;gap:6px}
  .x-guia-ley i{width:14px;height:14px;border-radius:4px;flex:none}
  .x-guia-ley i.e{background:var(--blanco);box-shadow:inset 0 0 0 2px var(--woop)}
  .x-guia-tip,.x-guia .x-med-corte{margin:0;font-size:var(--t-nota);color:var(--gris)}
  .btn-dest{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 14px 10px 12px;border:1.5px solid var(--linea);border-radius:16px;background:var(--blanco);text-align:left;font:inherit;color:var(--tinta);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s,background-color .15s}
  .btn-dest .ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--papel);color:var(--tinta)}
  .btn-dest .ic svg{width:20px;height:20px}
  .btn-dest .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .btn-dest small{font-size:var(--t-etiqueta);color:var(--gris)}
  .btn-dest b{font-weight:700;font-size:var(--t-texto);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .btn-dest .n{flex:none;min-width:32px;height:28px;padding:0 9px;border-radius:999px;display:grid;place-items:center;background:var(--tinta);color:#fff;font:700 var(--t-chico)/1 var(--mono)}
  .btn-dest .chev{flex:none;width:18px;height:18px;color:var(--gris2)}
  .btn-dest.elegido{border-color:var(--woop);background:#FFF6F1}
  .btn-dest.elegido .ic{background:var(--woop);color:#fff}
  .btn-dest.elegido .n{background:var(--woop)}
  .btn-dest:active{transform:scale(.99)}
  .dest-hoja .pago-cuerpo{gap:12px}
  .dh-lista{display:flex;flex-direction:column;gap:10px}
  .dh-lista[hidden]{display:none}
  .dh-lista .x-lista-ul{max-height:none}
}
.x-medidor{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;background:var(--papel);font-size:var(--t-nota);color:var(--gris);border-left:4px solid var(--linea)}
.x-medidor b{color:var(--tinta);font-size:var(--t-texto)}
.x-medidor.verde{border-left-color:var(--ok);background:var(--ok-suave)}
.x-medidor.verde b{color:var(--ok)}
.x-medidor.amarillo{border-left-color:#C9A227;background:var(--alerta-suave)}
.x-medidor.amarillo b{color:#8A6400}
.x-medidor.rojo{border-left-color:var(--error);background:var(--error-suave)}
.x-medidor.rojo b{color:var(--error)}
.x-med-corte q{color:var(--tinta);font-style:italic}
.x-med-tip{color:var(--gris)}
.x-sugs{display:flex;flex-direction:column;gap:6px}
.x-sugs button{display:flex;justify-content:space-between;align-items:center;gap:10px;border:none;background:var(--papel);box-shadow:inset 0 0 0 1px var(--linea);border-radius:12px;padding:9px 12px;text-align:left;font-size:var(--t-nota);min-height:42px;transition:background-color .15s var(--ease)}
.x-sugs button:hover{background:var(--hundido)}
.x-sugs .t{min-width:0}
.x-chip-os{flex-shrink:0;font:600 .68rem/1 var(--mono);letter-spacing:.02em;padding:5px 7px;border-radius:999px;white-space:nowrap}
.x-chip-os.verde{background:var(--ok-suave);color:var(--ok)}
.x-chip-os.amarillo{background:var(--alerta-suave);color:#8A6400}
.x-chip-os.rojo{background:var(--error-suave);color:var(--error)}
.x-dest-lista{box-shadow:inset 0 0 0 1.5px var(--linea);background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(21,22,28,.025) 8px 16px)}
.x-lista{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:var(--papel)}
.x-lista-acc{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.x-lista-acc .nota{font-size:var(--t-nota);color:var(--gris)}
.x-lista-ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:320px;overflow-y:auto}
.x-lista-ul label{display:grid;grid-template-columns:22px 32px minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--blanco);cursor:pointer}
.x-lista-ul input{width:20px;height:20px;accent-color:var(--tinta)}
.x-lista-ul label>span:not(.av){display:flex;flex-direction:column;min-width:0}
.x-lista-ul .av{width:32px;height:32px;font-size:.8rem}
.x-lista-ul small{color:var(--gris);font-size:var(--t-etiqueta)}
.x-lista-ul em{color:var(--alerta);font-style:normal}
.x-tope{display:block;margin-top:6px;color:var(--alerta)}
.x-celu-col{display:flex;flex-direction:column;gap:12px;align-items:center;position:sticky;top:24px}
.x-celu-col .celu{position:relative;top:auto}
.x-os{align-self:center}
.celu.android .pantalla{background:#1B1C1F;padding:14px 10px 20px;align-items:stretch}
.x-and{display:flex;flex-direction:column;gap:8px;width:100%}
.x-and-barra{display:flex;justify-content:space-between;font:500 .78rem/1 Roboto,system-ui,sans-serif;color:#E3E3E3;padding:2px 8px 10px}
.x-and-rot{font:600 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9A9EA8;padding:6px 4px 0}
.x-and-not{background:#2B2C30;border-radius:20px;padding:12px 14px;color:#F1F1F1;font-family:Roboto,system-ui,sans-serif;display:flex;flex-direction:column;gap:3px;text-align:left}
.x-and-cab{display:flex;align-items:center;gap:6px;font-size:.72rem;color:#B9BBC0}
.x-and-ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.x-and-ic svg{width:12px;height:12px}.x-and-ic img{width:100%;height:100%;object-fit:cover}
.x-and-not b{font-size:.9rem;font-weight:500}
.x-and-not p{font-size:.86rem;color:#D6D7DA;line-height:1.35;overflow-wrap:anywhere}
.x-and-not p.uno{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1180px){.x-celu-col{position:relative;top:auto}}
@media (max-width:899px){.x-sugs button{flex-direction:column;align-items:flex-start}}
/* Avisos: usar de nuevo uno que ya salió (17-oct, pedido de Mus). El texto vuelve arriba con un destello naranja. */
.x-chip-os.gris{background:var(--hundido);color:var(--gris)}
.x-reusado{animation:x-reusado 1.4s ease-out}
@keyframes x-reusado{0%{box-shadow:0 0 0 0 rgba(242,86,28,.5)}35%{box-shadow:0 0 0 6px rgba(242,86,28,.18)}100%{box-shadow:0 0 0 0 rgba(242,86,28,0)}}
@media (prefers-reduced-motion:reduce){.x-reusado{animation:none}}
/* En el celu, los que ya mandaste van en una línea cada uno (con "…"), para no alargar el formulario. */
@media (max-width:899px){#avRep button{flex-direction:row;align-items:center}#avRep .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* Mi tarjeta › Terminación (27-oct): 3 opciones con la franja real de la Wallet. En el celu, una debajo de la otra (miniatura a la izquierda). */
#eTermSec .term-ayuda{margin:-4px 0 0;font-size:var(--t-chico,13px);color:var(--gris)}
.term-ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.term-ops button{display:flex;flex-direction:column;align-items:stretch;gap:4px;text-align:left;padding:8px 8px 10px;border:0;border-radius:16px;background:var(--blanco,#fff);box-shadow:inset 0 0 0 1.5px var(--linea);cursor:pointer;color:var(--tinta);font:inherit;transition:box-shadow .15s ease,transform .12s ease}
.term-ops button:active{transform:scale(.98)}
.term-ops button[aria-pressed=true]{box-shadow:inset 0 0 0 2.5px var(--tinta)}
.term-ops button:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.term-ops .term-img{display:block;aspect-ratio:1125/369;border-radius:8px;overflow:hidden;background:#ECEDE6;margin-bottom:4px}
.term-ops .term-img.cargando{animation:term-carga 1.1s ease-in-out infinite alternate}
.term-ops .term-img img{display:block;width:100%;height:100%;object-fit:cover}
.term-ops .term-img img:not([src]){visibility:hidden}
.term-ops b{font-weight:600;font-size:14px;line-height:1.2}
.term-ops small{font-size:12px;line-height:1.3;color:var(--gris)}
@keyframes term-carga{to{opacity:.55}}
@media (prefers-reduced-motion:reduce){.term-ops .term-img.cargando{animation:none}}
@media (max-width:899px){
  .term-ops{grid-template-columns:1fr}
  .term-ops button{display:grid;grid-template-columns:132px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:8px}
  .term-ops .term-img{grid-row:1 / span 2;margin:0}
  .term-ops b{align-self:end}.term-ops small{align-self:start}
}
/* Vista previa de Avisos en tamaño REAL (27-oct, Mus: "respetar la cantidad de caracteres que se muestran en iPhone y Android").
   El celu se dibuja como uno de verdad (390 px de pantalla) y se achica entero con zoom para que entre en la columna.
   El texto del aviso usa la MISMA letra y el MISMO ancho con los que cortar() mide (CORTE en panel.js): iPhone 4 renglones
   de 272 px en 15 px; Android cerrada 1 renglón de 262 px en 14 px. Así lo que se ve acá es lo que se lee en el celular. */
.x-celu-col .celu{width:410px;max-width:none;height:852px;aspect-ratio:auto;flex:none;zoom:var(--celu-z,1)}
.x-celu-col .celu .pantalla{padding:58px 10px 22px}
.x-celu-col .celu .isla{width:120px;height:34px;margin-left:-60px;top:12px}
.x-celu-col .celu .fecha{font-size:18px}
.x-celu-col .celu .hora{font-size:88px;margin:0 0 30px}
.x-celu-col .celu .aviso-ios{position:relative;width:auto;grid-template-columns:38px 272px;gap:10px;padding:12px 14px;border-radius:22px}
.x-celu-col .celu .aviso-ios b{display:block;font:600 15px/1.3 -apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;padding-right:44px}
.x-celu-col .celu .aviso-ios p{width:272px;margin:1px 0 0;font:400 15px/1.33 -apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;color:#2A2C33;overflow-wrap:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.x-celu-col .celu .aviso-ios time{position:absolute;top:13px;right:14px;font-size:13px}
.x-celu-col .celu.android .pantalla{padding:16px 12px 22px}
.x-celu-col .x-and-barra{font-size:13px}
.x-celu-col .x-and-rot{font-size:11px}
.x-celu-col .x-and-not{padding:14px 16px;border-radius:24px}
.x-celu-col .x-and-cab{font-size:12px}
.x-celu-col .x-and-not b{font:500 15px/1.3 Roboto,"Segoe UI",system-ui,sans-serif}
.x-celu-col .x-and-not p{font:400 14px/1.4 Roboto,"Segoe UI",system-ui,sans-serif;overflow-wrap:normal}
.x-celu-col .x-and-not p.uno{width:262px;max-width:100%}
.x-celu-col .celu .pie-celu{font-size:13px}
#v-avisos #avRep .t{white-space:normal;overflow:visible;text-overflow:clip;text-align:left} /* el aviso a repetir se lee entero (27-oct) */
/* Mi tarjeta: combinaciones de colores listas (27-oct). Cada miniatura lleva el grano y los logos, como la tarjeta. */
.paletas{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.paletas .pal{border:0;padding:0;background:none;cursor:pointer;text-align:left;font:inherit;color:inherit;border-radius:16px}
.paletas .pal-mini{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1.55;border-radius:14px;padding:10px 11px;background:var(--f);color:var(--t);box-shadow:inset 0 0 0 1px rgba(21,22,28,.08);transition:transform .15s}
.paletas .pal-mini>.textura{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.paletas .pal-mini>*:not(.textura){position:relative;z-index:1}
.paletas .pal-mini b{font:700 10.5px/1.1 var(--texto);opacity:.92}
.paletas .pal-sellos{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;max-width:96px}
.paletas .pal-sellos i{aspect-ratio:1;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--t) 45%,transparent)}
.paletas .pal-sellos i.si{background:var(--s);border:0}
@media (hover:hover){.paletas .pal:hover .pal-mini{transform:translateY(-2px)}}
.paletas .pal-nom{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px;padding:0 2px;font-size:13px;font-weight:600}
.paletas .pal-ok{width:18px;height:18px;border-radius:50%;background:var(--tinta);color:#fff;display:none;place-items:center;flex:none}
.paletas .pal-ok svg{width:11px;height:11px}
.paletas .pal[aria-pressed="true"] .pal-mini{box-shadow:0 0 0 3px var(--blanco),0 0 0 5px var(--tinta)}
.paletas .pal[aria-pressed="true"] .pal-ok{display:grid}
.paletas .pal:focus-visible{outline:none}
.paletas .pal:focus-visible .pal-mini{box-shadow:0 0 0 3px var(--blanco),0 0 0 5px var(--woop)}
.paletas .propia .pal-mini{background:conic-gradient(from 0deg,#F2561C,#E9B730,#D6F24B,#1F8A5B,#2340E0,#6B2BD6,#F2561C);display:grid;place-items:center}
.paletas .propia .pal-mini span{background:var(--blanco);color:var(--tinta);border-radius:99px;padding:6px 11px;font-weight:700;font-size:12.5px}
#eMisColores{display:flex;flex-direction:column;gap:inherit;margin-top:6px}
#eMisColores[hidden]{display:none}
/* Emojis en los avisos (27-oct): botón con carita en la esquina del texto y la lista de emojis oficiales. */
.emo-env{position:relative}
.emo-env>textarea{padding-right:52px}
.emo-btn{position:absolute;right:8px;bottom:8px;width:38px;height:38px;border:0;border-radius:12px;background:var(--hundido);color:var(--tinta);display:grid;place-items:center;cursor:pointer}
.emo-btn svg{width:21px;height:21px}
.emo-btn:hover,.emo-btn[aria-expanded="true"]{background:#DFE0D8}
.emo-btn:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.emo-fondo{position:fixed;inset:0;z-index:9000}
.emo-fondo.cel{background:rgba(21,22,28,.38);opacity:0;transition:opacity .18s}
.emo-fondo.cel.ver{opacity:1}
.emo-caja{position:fixed;z-index:9001;display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--blanco);border-radius:16px;box-shadow:0 0 0 1px rgba(21,22,28,.08),0 14px 34px -10px rgba(21,22,28,.3);opacity:0;transform:translateY(-4px);transition:opacity .14s,transform .14s}
.emo-caja.ver{opacity:1;transform:none}
.emo-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:0 2px}
.emo-tabs::-webkit-scrollbar{display:none}
.emo-tabs button{flex:none;border:0;border-radius:99px;background:none;padding:7px 11px;font:600 13px/1 var(--texto);color:var(--gris);cursor:pointer;white-space:nowrap}
.emo-tabs button[aria-pressed="true"]{background:var(--tinta);color:#fff}
.emo-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:2px}
.emo-grilla button{aspect-ratio:1;border:0;border-radius:10px;background:none;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.emo-grilla button:hover,.emo-grilla button:focus-visible{background:var(--hundido);outline:none}
.emo-tip{margin:0;font-size:12.5px;color:var(--gris)}
.emo-caja.cel{left:0;right:0;bottom:0;border-radius:22px 22px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .24s cubic-bezier(.2,0,0,1)}
.emo-caja.cel.ver{transform:none}
.emo-asa{align-self:center;width:40px;height:5px;border-radius:99px;background:var(--linea)}
.emo-tit{font-size:17px}
.emo-caja.cel .emo-grilla button{font-size:28px}
/* Tu cuenta (27-oct): cómo entrás, tu email (se cambia con código) y contraseña. Desde el 28-oct, lo mismo en Datos del comercio. */
:is(#aj-cuenta,#aj-datos) .cta-sec{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--hundido)}
:is(#aj-cuenta,#aj-datos) .cta-rot{font:700 12px/1 var(--texto);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
:is(#aj-cuenta,#aj-datos) .cta-metodos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-radius:14px;background:var(--papel);padding:2px 12px}
:is(#aj-cuenta,#aj-datos) .cta-metodos li{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 0}
:is(#aj-cuenta,#aj-datos) .cta-metodos li+li{border-top:1px solid var(--hundido)}
:is(#aj-cuenta,#aj-datos) .cta-ic{width:30px;height:30px;border-radius:9px;background:var(--blanco);display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px rgba(21,22,28,.06)}
:is(#aj-cuenta,#aj-datos) .cta-ic svg{width:17px;height:17px}
:is(#aj-cuenta,#aj-datos) .cta-nom{flex:1;min-width:0;font:600 15px/1.3 var(--texto)}
:is(#aj-cuenta,#aj-datos) .cta-nom small{display:block;font:400 13px/1.3 var(--texto);color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#aj-cuenta,#aj-datos) .cta-ok{font:700 12px/1 var(--texto);padding:6px 9px;border-radius:99px;background:#DDF3E7;color:#17804F;flex:none}
:is(#aj-cuenta,#aj-datos) .cta-gris{color:var(--gris);font-size:13.5px}
:is(#aj-cuenta,#aj-datos) .cta-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
:is(#aj-cuenta,#aj-datos) .cta-fila b{font:600 15px/1.3 var(--texto);overflow-wrap:anywhere}
:is(#aj-cuenta,#aj-datos) .cta-form{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--papel)}
:is(#aj-cuenta,#aj-datos) .cta-form[hidden],:is(#aj-cuenta,#aj-datos) [hidden]{display:none!important}
:is(#aj-cuenta,#aj-datos) .cta-form .guardar-fila{display:flex;gap:8px;flex-wrap:wrap}
#aj-cuenta .cta-nombre{display:flex;gap:8px;align-items:center}
#aj-cuenta .cta-nombre .inp{flex:1;min-width:0}
#aj-datos #aHorEditor{padding:12px;border-radius:14px;background:var(--papel)}
#aj-cuenta .cta-codigo{font:600 22px/1 var(--mono,monospace);letter-spacing:.3em;max-width:220px}
#aj-cuenta .cta-aviso{margin:0;padding:10px 12px;border-radius:12px;font-size:14px}
#aj-cuenta .cta-aviso.ok{background:#DDF3E7;color:#13683F}
#aj-cuenta .cta-aviso.mal{background:#F9DEDE;color:#9C2525}
#aj-cuenta .bj-pie{padding-top:14px;border-top:1px solid var(--hundido)}
/* Datos del comercio (28-oct): nombre, dirección, horarios y redes con aire entre cada parte */
#aj-datos{display:flex;flex-direction:column;gap:16px}
#aj-datos > .sub{margin:-8px 0 0}
#aj-datos .guardar-fila{margin-top:2px}