/*  Portal del cliente — Mi Web PyME.
    Usa las variables de /brief/sitio.css (tinta, azul, verde, tipografía). */

body.portal{
  background:
    radial-gradient(900px 480px at 85% -120px, rgba(0,87,250,.10), transparent 70%),
    radial-gradient(700px 400px at -10% 30%, rgba(61,130,255,.07), transparent 70%),
    var(--azul-bruma);
  min-height:100vh;
}
.oculto{display:none!important}
.cargando{min-height:70vh;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--texto-2)}
.giro{width:38px;height:38px;border-radius:50%;border:4px solid var(--gris-2);border-top-color:var(--azul);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ───────── Barra superior ───────── */
.barra{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--gris-2)}
.barra__in{max-width:1080px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:14px}
.barra__logo img{height:34px;width:auto}
.barra__sp{flex:1}
.usuario{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--texto-2)}
.usuario b{color:var(--texto);font-weight:700}
.inicial{width:34px;height:34px;border-radius:50%;background:var(--azul);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.enlace{background:none;border:0;padding:6px 8px;font:inherit;font-size:14px;font-weight:600;color:var(--azul);cursor:pointer;border-radius:8px}
.enlace:hover{background:var(--azul-nube)}

/* ───────── Entrada ───────── */
.entrada{max-width:980px;margin:0 auto;padding:clamp(24px,6vw,72px) 20px;display:grid;grid-template-columns:1.05fr 1fr;gap:0;align-items:stretch}
.entrada__lado{
  background:linear-gradient(155deg,var(--tinta) 0%,#0B1450 55%,#0A3BB8 120%);
  color:#fff;border-radius:26px 0 0 26px;padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:space-between;gap:30px;position:relative;overflow:hidden;
}
.entrada__lado::after{content:"";position:absolute;right:-90px;bottom:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(61,130,255,.55),transparent 68%)}
.entrada__lado img{height:36px;width:auto;align-self:flex-start}
.entrada__lado h1{font-size:clamp(28px,3.6vw,40px);color:#fff}
.entrada__lado h1 em{color:#7FB0FF;font-style:normal}
.entrada__lado ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative;z-index:1}
.entrada__lado li{display:flex;gap:11px;align-items:flex-start;color:var(--texto-inv-2);font-size:15.5px}
.entrada__lado li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:rgba(34,216,34,.18);color:#6BF06B;font-weight:800;display:grid;place-items:center;font-size:13px;margin-top:1px}
.entrada__form{background:#fff;border-radius:0 26px 26px 0;padding:clamp(28px,4vw,52px);box-shadow:0 30px 60px -34px rgba(5,6,31,.35);display:flex;flex-direction:column;justify-content:center;gap:6px}
.entrada__form h2{font-size:clamp(23px,2.6vw,30px);margin-bottom:6px}
.entrada__form p.sub{color:var(--texto-2);margin:0 0 18px;font-size:15.5px}
@media(max-width:820px){
  .entrada{grid-template-columns:1fr;padding-top:16px}
  .entrada__lado{border-radius:22px 22px 0 0;padding-bottom:26px}
  .entrada__form{border-radius:0 0 22px 22px}
  .entrada__lado ul{display:none}
}

.fila{display:grid;gap:6px;margin-bottom:15px}
.fila label{font-weight:700;font-size:14.5px}
.fila input{width:100%;padding:13px 15px;border:1.5px solid var(--gris-2);border-radius:12px;font:inherit;font-size:16px;background:#fff;color:var(--texto);transition:border-color .15s, box-shadow .15s}
.fila input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(0,87,250,.12)}
.ver{position:relative}
.ver button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--azul);font-weight:700;font-size:13px;cursor:pointer;padding:6px 8px}
.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px 20px;border:0;border-radius:999px;background:var(--azul);color:#fff;font:inherit;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 12px 26px -14px rgba(0,87,250,.9);transition:transform .15s, background .15s}
.btn-p:hover{background:var(--azul-hondo);transform:translateY(-2px)}
.btn-p:disabled{opacity:.6;cursor:wait;transform:none}
.btn-p--verde{background:var(--verde);box-shadow:0 12px 26px -14px rgba(0,179,0,.9)}
.btn-p--verde:hover{background:var(--verde-2)}
.btn-s{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 20px;border:1.5px solid var(--gris-2);border-radius:999px;background:#fff;color:var(--texto);font:inherit;font-weight:700;font-size:15.5px;cursor:pointer;transition:border-color .15s,background .15s}
.btn-s:hover{border-color:var(--azul);background:var(--azul-nube)}
.o-linea{display:flex;align-items:center;gap:12px;color:var(--texto-2);font-size:13px;margin:16px 0}
.o-linea::before,.o-linea::after{content:"";flex:1;height:1px;background:var(--gris-2)}
.msg{padding:12px 14px;border-radius:12px;font-size:14.5px;margin-bottom:14px;line-height:1.45}
.msg--mal{background:#FFF1F0;color:#9A1B14;border:1px solid #FAD0CC}
.msg--bien{background:#EBFAEB;color:#0B6B0B;border:1px solid #BDEBBD}
.msg--info{background:var(--azul-nube);color:#143A8F;border:1px solid #CFE0FF}
.pie-ayuda{margin-top:18px;font-size:13.5px;color:var(--texto-2);text-align:center}

/* ───────── Aplicación ───────── */
.app{max-width:1080px;margin:0 auto;padding:22px 20px 80px}
.cabeza{
  background:linear-gradient(135deg,var(--tinta) 0%,#0B1450 60%,#0A3BB8 130%);
  color:#fff;border-radius:26px;padding:clamp(22px,4vw,40px);position:relative;overflow:hidden;margin-bottom:22px;
}
.cabeza::after{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(61,130,255,.5),transparent 68%)}
.hero__etq{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.12);padding:6px 13px;border-radius:999px;font-size:13px;font-weight:700;color:#CFE0FF;position:relative;z-index:1}
.cabeza h1{font-size:clamp(26px,4.2vw,42px);margin:14px 0 6px;color:#fff;position:relative;z-index:1}
.cabeza h1 em{color:#7FB0FF;font-style:normal}
.cabeza p{margin:0;color:var(--texto-inv-2);max-width:60ch;position:relative;z-index:1;font-size:16.5px}
.conmutador{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.conmutador button{border:1.5px solid var(--gris-2);background:#fff;border-radius:999px;padding:8px 15px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.conmutador button[aria-pressed=true]{background:var(--tinta);color:#fff;border-color:var(--tinta)}

.pestanas{display:flex;gap:4px;background:#fff;border:1px solid var(--gris-2);border-radius:16px;padding:5px;margin-bottom:22px;overflow-x:auto;scrollbar-width:none}
.pestanas::-webkit-scrollbar{display:none}
.pestanas button{flex:1 0 auto;border:0;background:none;padding:11px 18px;border-radius:12px;font:inherit;font-weight:700;font-size:15px;color:var(--texto-2);cursor:pointer;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,color .15s}
.pestanas button:hover{background:var(--azul-bruma);color:var(--texto)}
.pestanas button[aria-selected=true]{background:var(--azul);color:#fff;box-shadow:0 8px 18px -10px rgba(0,87,250,.9)}
.punto{width:8px;height:8px;border-radius:50%;background:#FFB020}
.pestanas button[aria-selected=true] .punto{background:#fff}

.rejilla{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start}
@media(max-width:860px){.rejilla{grid-template-columns:1fr}}
.tarjeta{background:#fff;border:1px solid var(--gris-2);border-radius:22px;padding:clamp(20px,3vw,30px);box-shadow:0 18px 40px -32px rgba(5,6,31,.35)}
.tarjeta + .tarjeta{margin-top:20px}
.tarjeta h2{font-size:clamp(20px,2.4vw,25px);margin-bottom:6px}
.tarjeta h3{font-size:17px;margin-bottom:8px}
.tarjeta p{margin:0 0 12px}
.tarjeta p:last-child{margin-bottom:0}
.suave{color:var(--texto-2);font-size:15.5px}
.chico{font-size:13.5px;color:var(--texto-2)}

/* Reloj */
.pr-reloj{text-align:center;padding:6px 0 2px}
.pr-reloj__etq{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--azul)}
.pr-reloj__num{font-family:var(--display);font-weight:800;font-size:clamp(46px,9vw,76px);letter-spacing:-.03em;line-height:1.05;margin:6px 0;font-variant-numeric:tabular-nums;color:var(--tinta)}
.pr-reloj__num small{font-size:.32em;color:var(--texto-2);font-weight:700;letter-spacing:0;margin-left:4px}
.pr-reloj__ent{font-weight:700;font-size:16.5px}
.barra-prog{height:10px;border-radius:999px;background:var(--gris-2);overflow:hidden;margin:16px 0 6px}
.barra-prog span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--azul),var(--azul-claro));transition:width .6s}
.pr-reloj--pausa .pr-reloj__num{color:var(--texto-2)}
.pr-reloj--pausa .barra-prog span{background:#F5B13D}
.pr-reloj--espera .pr-reloj__num{font-size:clamp(30px,5vw,44px);color:var(--texto-2)}
.insignia{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;font-size:13.5px;font-weight:700}
.insignia--ambar{background:#FFF4DD;color:#8A5A00}
.insignia--azul{background:var(--azul-nube);color:#143A8F}
.insignia--verde{background:#EBFAEB;color:#0B6B0B}
.reglas{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.reglas li{display:flex;gap:11px;font-size:15px;color:var(--texto-2)}
.reglas li b{color:var(--texto)}
.reglas li::before{content:attr(data-n);flex:none;width:24px;height:24px;border-radius:50%;background:var(--azul-nube);color:var(--azul);font-weight:800;font-size:13px;display:grid;place-items:center;margin-top:1px}

/* Etapas */
.etapas{list-style:none;margin:0;padding:0;display:grid;gap:0}
.etapa{display:grid;grid-template-columns:34px 1fr;gap:14px;position:relative;padding-bottom:20px}
.etapa:last-child{padding-bottom:0}
.etapa::before{content:"";position:absolute;left:16px;top:34px;bottom:-2px;width:2px;background:var(--gris-2)}
.etapa:last-child::before{display:none}
.etapa--hecha::before{background:var(--verde-claro)}
.etapa__ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--gris-2);color:var(--texto-2);z-index:1}
.etapa--hecha .etapa__ico{background:var(--verde);color:#fff}
.etapa--actual .etapa__ico{background:var(--azul);color:#fff;box-shadow:0 0 0 6px rgba(0,87,250,.15)}
.etapa__t{font-weight:800;font-size:16.5px;line-height:1.3;margin-top:4px}
.etapa__f{font-size:14px;color:var(--texto-2)}
.etapa--actual .etapa__f{color:var(--azul);font-weight:700}

/* Historial */
.hist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hist li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:14.5px}
.hist time{color:var(--texto-2);font-size:13px;white-space:nowrap}
.hist b{display:block;font-size:14.5px}
.hist span{color:var(--texto-2);font-size:13.5px}

/* Brief */
.progreso{position:sticky;top:64px;z-index:10;background:#fff;border:1px solid var(--gris-2);border-radius:18px;padding:14px 18px;margin-bottom:18px;box-shadow:0 14px 30px -24px rgba(5,6,31,.5)}
.progreso__fila{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.progreso__txt{flex:1;min-width:200px;font-size:14.5px}
.progreso__txt b{font-size:15.5px}
.progreso .barra-prog{margin:8px 0 0}
.progreso__est{font-size:13px;color:var(--texto-2);display:flex;align-items:center;gap:7px;white-space:nowrap}
.pr-faltan{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.pr-faltan button{border:1px solid #FFD58A;background:#FFF8E6;color:#7A4E00;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pr-faltan button:hover{background:#FFEFC2}
.brief--portal{max-width:none;padding:0}
.brief--portal .bloque{max-width:none}
.sellado .campo input,.sellado .campo textarea,.sellado .casillas input{pointer-events:none}
.sellado-aviso{background:#EBFAEB;border:1px solid #BDEBBD;color:#0B6B0B;border-radius:16px;padding:16px 18px;margin-bottom:18px;font-weight:600}
.barra-envio{background:#fff;border:1px solid var(--gris-2);border-radius:22px;padding:clamp(20px,3vw,30px);margin-top:20px;text-align:center}
.barra-envio h2{font-size:clamp(21px,2.6vw,27px);margin-bottom:6px}
.barra-envio p{max-width:56ch;margin:0 auto 18px;color:var(--texto-2)}
.barra-envio .btn-p{max-width:340px}

/* Archivos */
.zona{position:relative;border:2px dashed #BBD0F5;border-radius:20px;background:var(--azul-bruma);padding:30px 20px;text-align:center;transition:border-color .15s,background .15s}
.zona:hover,.zona--activa{border-color:var(--azul);background:var(--azul-nube)}
.zona input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.zona strong{display:block;font-size:17px;margin-bottom:4px}
.zona span{display:block;font-size:14px;color:var(--texto-2)}
.pr-lista{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.pr-lista li{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;background:#fff;border:1px solid var(--gris-2);border-radius:14px;padding:10px 14px;font-size:14.5px}
.pr-lista .pr-ico{width:36px;height:36px;border-radius:10px;background:var(--azul-nube);color:var(--azul);display:grid;place-items:center;font-size:11px;font-weight:800;text-transform:uppercase}
.pr-lista .nom{min-width:0}
.pr-lista .nom b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.pr-lista .nom small{color:var(--texto-2);font-size:12.5px}
.pr-lista .peso{color:var(--texto-2);font-size:13px;white-space:nowrap}
.pr-lista button.x{border:0;background:none;color:#B0182C;font-size:20px;cursor:pointer;padding:4px 8px;border-radius:8px;line-height:1}
.pr-lista button.x:hover{background:#FFF1F0}
.pr-lista li.sube{grid-template-columns:auto 1fr}
.pr-lista li.sube .barra-prog{margin:6px 0 0;height:7px}
.pr-lista li.error{border-color:#FAD0CC;background:#FFF8F7}
.pr-lista li.error small{color:#9A1B14}
.tope-info{font-size:13px;color:var(--texto-2);margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 14px}
.tope-info b{color:var(--texto)}

/* Modal */
.velo{position:fixed;inset:0;background:rgba(5,6,31,.55);backdrop-filter:blur(3px);z-index:50;display:grid;place-items:center;padding:20px}
.modal{background:#fff;border-radius:24px;max-width:480px;width:100%;padding:clamp(22px,4vw,34px);box-shadow:0 40px 80px -30px rgba(5,6,31,.6);max-height:90vh;overflow:auto}
.modal h2{font-size:24px;margin-bottom:8px}
.modal .suave{margin:0 0 16px}
.modal__bot{display:grid;gap:10px;margin-top:18px}
.modal ul.sug{margin:0 0 6px;padding-left:20px;color:var(--texto-2);font-size:15px}
.aviso-clave{background:linear-gradient(135deg,#EEF3FD,#E3EEFF);border:1px solid #CFE0FF;border-radius:18px;padding:16px 18px;margin-bottom:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.aviso-clave p{margin:0;flex:1;min-width:220px;font-size:15px}
.aviso-clave .enlace{border:1.5px solid var(--azul);background:#fff}
.vacio{text-align:center;padding:30px 10px;color:var(--texto-2)}
.vacio b{display:block;color:var(--texto);font-size:18px;margin-bottom:6px}

@media(max-width:560px){
  .barra__in{padding:9px 14px}
  .usuario span.nombre{display:none}
  .app{padding:14px 14px 70px}
  .pr-lista li{grid-template-columns:auto 1fr auto}
  .pr-lista .peso{display:none}
}

/* ───────── Recorrido (cronología) ───────── */
.tarjeta--ruta{padding:clamp(20px,3vw,32px)}
.ruta__enc{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px}
.ruta__pct{text-align:right;line-height:1}
.ruta__pct b{display:block;font-family:var(--display);font-size:clamp(32px,5vw,46px);font-weight:800;color:var(--azul);letter-spacing:-.03em}
.ruta__pct small{font-size:12.5px;color:var(--texto-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.barra-prog--ruta{height:12px;margin:0 0 28px;background:var(--azul-nube)}
.barra-prog--ruta span{background:linear-gradient(90deg,var(--verde-claro),var(--azul) 70%,var(--azul-claro))}
.ruta{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:paso}
.paso{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--azul-bruma);border:1.5px solid var(--gris-2);border-radius:20px;padding:18px 16px 20px;transition:transform .2s,box-shadow .2s,border-color .2s}
.paso::after{content:"";position:absolute;top:44px;right:-17px;width:18px;height:3px;background:var(--gris-2);border-radius:3px;z-index:2}
.paso:last-child::after{display:none}
.paso--hecho::after{background:var(--verde-claro)}
.paso__cab{display:flex;align-items:center;gap:11px}
.paso__ico{width:52px;height:52px;border-radius:16px;background:#fff;border:1.5px solid var(--gris-2);color:var(--texto-2);display:grid;place-items:center;flex:none}
.ruta__svg{display:grid;place-items:center}
.ruta__svg svg{width:26px;height:26px}
.paso__num{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-2)}
.paso__cuerpo{display:flex;flex-direction:column;gap:7px;flex:1}
.paso h3{font-size:18px;line-height:1.2;margin:2px 0 0}
.paso__que{font-size:14.5px;color:var(--texto-2);margin:0;line-height:1.45}
.paso__fecha{font-size:13.5px;font-weight:700;color:var(--texto);margin:2px 0 0}
.chip{align-self:flex-start;font-size:12.5px;font-weight:800;padding:5px 11px;border-radius:999px;letter-spacing:.01em}
.chip--hecho{background:#E4F8E4;color:#0B6B0B}
.chip--actual{background:var(--azul);color:#fff}
.chip--pendiente{background:var(--gris-2);color:var(--texto-2)}
.paso--hecho{background:#F4FCF4;border-color:#BDEBBD}
.paso--hecho .paso__ico{background:var(--verde);border-color:var(--verde);color:#fff}
.paso--actual{background:#fff;border-color:var(--azul);box-shadow:0 0 0 5px rgba(0,87,250,.12),0 22px 40px -26px rgba(0,87,250,.7);transform:translateY(-4px)}
.paso--actual .paso__ico{background:var(--azul);border-color:var(--azul);color:#fff;animation:late 2.2s ease-in-out infinite}
.paso--actual .paso__num{color:var(--azul)}
.paso--pendiente{opacity:.78}
.paso__btn{margin-top:8px;padding:12px 16px;font-size:15px}
@keyframes late{0%,100%{box-shadow:0 0 0 0 rgba(0,87,250,.45)}50%{box-shadow:0 0 0 10px rgba(0,87,250,0)}}
@media(prefers-reduced-motion:reduce){.paso--actual .paso__ico{animation:none}}
@media(max-width:900px){
  .ruta{grid-template-columns:1fr;gap:14px}
  .paso{flex-direction:row;gap:14px;align-items:flex-start}
  .paso::after{top:auto;bottom:-16px;right:auto;left:42px;width:3px;height:16px}
  .paso--actual{transform:none}
  .paso__cab{flex-direction:column;align-items:center;gap:6px}
}

a.btn-p,a.btn-s{text-decoration:none}

/* ───────── Mixo en el portal ───────── */
.mx-boton{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:10px;border:0;border-radius:999px;background:var(--azul);color:#fff;padding:9px 18px 9px 9px;font:inherit;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 18px 36px -14px rgba(0,87,250,.8),0 0 0 4px rgba(255,255,255,.7);transition:transform .15s}
.mx-boton:hover{transform:translateY(-3px)}
.mx-boton__cara{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--azul);display:grid;place-items:center;font-weight:800;font-size:19px;flex:none}
.mx-panel{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:41;width:min(400px,calc(100vw - 24px));height:min(620px,calc(100vh - 36px));background:#fff;border-radius:24px;box-shadow:0 40px 80px -24px rgba(5,6,31,.55),0 0 0 1px var(--gris-2);display:flex;flex-direction:column;overflow:hidden}
.mx-cab{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,var(--tinta),#0B1450 70%,#0A3BB8);color:#fff}
.mx-cab b{display:block;font-size:17px}
.mx-cab small{display:block;font-size:12.5px;color:var(--texto-inv-2)}
.mx-cab div{flex:1;min-width:0}
.mx-x{border:0;background:rgba(255,255,255,.14);color:#fff;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer}
.mx-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--azul-bruma)}
.mx-b{max-width:88%;padding:11px 14px;border-radius:18px;font-size:15px;line-height:1.5;word-wrap:break-word}
.mx-b p{margin:0 0 7px}.mx-b p:last-child{margin-bottom:0}
.mx-b ul{margin:4px 0 7px;padding-left:19px}.mx-b li{margin:2px 0}
.mx-b--mixo{align-self:flex-start;background:#fff;border:1px solid var(--gris-2);border-bottom-left-radius:6px}
.mx-b--yo{align-self:flex-end;background:var(--azul);color:#fff;border-bottom-right-radius:6px}
.mx-b--espera{opacity:.6}
.mx-accion{display:inline-block;margin:8px 6px 0 0;padding:8px 14px;border-radius:999px;border:1.5px solid var(--azul);background:#fff;color:var(--azul);font:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.mx-accion:hover{background:var(--azul-nube)}
.mx-accion--wa{border-color:#1BB855;background:#25D366;color:#06301A}
.mx-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 10px;background:var(--azul-bruma)}
.mx-chips:empty{display:none}
.mx-chips button{border:1px solid #CFE0FF;background:#fff;color:#143A8F;border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.mx-chips button:hover{background:var(--azul-nube)}
.mx-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--gris-2);background:#fff}
.mx-in{flex:1;resize:none;border:1.5px solid var(--gris-2);border-radius:14px;padding:11px 13px;font:inherit;font-size:16px;max-height:110px}
.mx-in:focus{outline:none;border-color:var(--azul)}
.mx-env{border:0;background:var(--azul);color:#fff;width:46px;border-radius:14px;font-size:18px;cursor:pointer}
.mx-pie{margin:0;padding:0 14px 10px;font-size:11.5px;color:var(--texto-2);background:#fff;text-align:center}
@media(max-width:560px){.mx-panel{right:0;bottom:0;width:100vw;height:86vh;border-radius:22px 22px 0 0}.mx-boton__txt{display:none}.mx-boton{padding:9px}}

/* ───────── Tutorial animado ───────── */
.tut{position:fixed;inset:0;z-index:60;background:rgba(5,6,31,.7);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px}
.tut__caja{background:#fff;border-radius:28px;width:min(640px,100%);max-height:94vh;overflow:auto;box-shadow:0 50px 100px -30px rgba(5,6,31,.7)}
.tut__escena{background:linear-gradient(160deg,#EEF3FD,#DCE8FF);padding:22px 22px 8px;border-radius:28px 28px 0 0;min-height:230px;display:grid;place-items:center}
.tut__escena svg{width:100%;max-width:440px;height:auto;display:block}
.tut__txt{padding:22px 28px 6px}
.tut__txt small{font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--azul);font-size:12.5px}
.tut__txt h2{font-size:clamp(23px,3.4vw,30px);margin:6px 0 10px}
.tut__txt p{margin:0;color:var(--texto-2);font-size:16.5px}
.tut__pie{display:flex;align-items:center;gap:12px;padding:18px 28px 24px;flex-wrap:wrap}
.tut__puntos{display:flex;gap:7px;margin-right:auto}
.tut__puntos i{width:9px;height:9px;border-radius:50%;background:var(--gris-2);transition:all .25s}
.tut__puntos i.on{width:26px;border-radius:9px;background:var(--azul)}
.tut__pie .btn-p,.tut__pie .btn-s{width:auto;padding:12px 22px}
.tut__saltar{border:0;background:none;color:var(--texto-2);font:inherit;font-weight:600;font-size:14px;cursor:pointer;padding:8px}
.tut .a-pop{animation:tpop .6s both}.tut .a-pop2{animation:tpop .6s .5s both}.tut .a-pop3{animation:tpop .6s 1s both}.tut .a-pop4{animation:tpop .6s 1.5s both}
@keyframes tpop{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
.tut .a-linea{stroke-dasharray:300;stroke-dashoffset:300;animation:tlinea 2.2s .2s forwards}
@keyframes tlinea{to{stroke-dashoffset:0}}
.tut .a-cohete{animation:tcohete 4s 1s ease-in-out infinite}
@keyframes tcohete{0%{transform:translateX(0)}50%{transform:translateX(340px)}100%{transform:translateX(0)}}
.tut .a-tecla{transform-origin:left;transform:scaleX(0);animation:ttecla 3.6s infinite}
.tut .a-tecla.t2{animation-delay:.7s}.tut .a-tecla.t3{animation-delay:1.4s}.tut .a-tecla.t4{animation-delay:2.1s}
@keyframes ttecla{0%{transform:scaleX(0)}25%,80%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.tut .a-guardado{animation:tguard 3.6s infinite;opacity:0}
@keyframes tguard{0%,60%{opacity:0;transform:translateY(6px)}72%,90%{opacity:1;transform:none}100%{opacity:0}}
.tut .a-barra{transform-origin:left;animation:tbarra 3.6s infinite}
@keyframes tbarra{0%{transform:scaleX(.1)}75%,100%{transform:scaleX(1)}}
.tut .a-arch1{animation:tarch 3s 0s infinite}.tut .a-arch2{animation:tarch 3s .6s infinite}.tut .a-arch3{animation:tarch 3s 1.2s infinite}
@keyframes tarch{0%{transform:translate(0,-70px);opacity:0}25%{opacity:1}55%,80%{transform:translate(0,0);opacity:1}100%{transform:translate(0,0);opacity:0}}
.tut .a-aguja{transform-origin:110px 110px;animation:taguja 6s linear infinite}
@keyframes taguja{to{transform:rotate(360deg)}}
.tut .a-marca{animation:tmarca 5s steps(1) infinite}
@keyframes tmarca{0%{transform:translateX(0)}12%{transform:translateX(30px)}24%{transform:translateX(60px)}36%{transform:translateX(90px)}48%{transform:translateX(120px)}60%{transform:translateX(120px)}100%{transform:translateX(0)}}
.tut .a-sube{animation:tsube 2.6s ease-in-out infinite}
@keyframes tsube{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.tut .a-latido{animation:tlate 1.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes tlate{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.tut .a-puntos circle{animation:tpuntos 1.2s infinite}.tut .a-puntos circle:nth-child(2){animation-delay:.2s}.tut .a-puntos circle:nth-child(3){animation-delay:.4s}
@keyframes tpuntos{0%,100%{opacity:.25}50%{opacity:1}}
.tut .a-msg1{animation:tmsg 5s infinite}.tut .a-msg2{animation:tmsg 5s 1.4s infinite}.tut .a-msg3{animation:tmsg 5s 2.8s infinite}
@keyframes tmsg{0%{opacity:0;transform:translateY(10px)}12%,80%{opacity:1;transform:none}100%{opacity:0}}
.tut .a-campana{transform-origin:50% 0;transform-box:fill-box;animation:tcampana 2.4s infinite}
@keyframes tcampana{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(9deg)}40%{transform:rotate(-6deg)}50%{transform:rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.tut *{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}
.ayuda-btn{border:1.5px solid var(--azul);background:#fff;color:var(--azul);border-radius:999px;padding:6px 14px;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.ayuda-btn:hover{background:var(--azul-nube)}
.mx-aviso{position:fixed;right:18px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:39;max-width:260px;background:#fff;border:1.5px solid var(--azul);border-radius:18px 18px 4px 18px;padding:12px 15px;font-size:14.5px;line-height:1.4;box-shadow:0 20px 40px -18px rgba(5,6,31,.5);cursor:pointer;animation:tpop .5s both}
.mx-aviso b{color:var(--azul)}