.sop{
  --ch-fondo:#fff; --ch-fondo-2:#F2F4F8; --ch-lienzo:#F3F5F9;                  
  --ch-tinta:#0B0F1A; --ch-texto-2:#3F4658; --ch-texto-3:#5E667A;               
  --ch-borde:#E1E5EE; --ch-borde-2:#C5CBD9;                                     
  --ch-azul:#1466FF; --ch-azul-2:#0B53E6; --ch-azul-tinte:#EBF2FF; --ch-azul-borde:#C7DAFF;   
  --ch-sobre:#fff; --ch-error:#B42318; --ch-alerta:#D92D20; --ch-alerta-tinte:#FEF3F2;
  --ch-sombra:0 28px 70px -18px rgba(11,15,26,.45), 0 4px 14px rgba(11,15,26,.14);
  --ch-flota:0 1px 2px rgba(11,15,26,.07), 0 8px 20px -10px rgba(11,15,26,.2);                 
  --ch-flota-alta:0 2px 4px rgba(11,15,26,.07), 0 16px 30px -12px rgba(11,15,26,.28);          
  --ch-ease:cubic-bezier(0.23, 1, 0.32, 1); --ch-ease-mover:cubic-bezier(0.77, 0, 0.175, 1);   
  position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); z-index:60; font-family:var(--vr-fuente, 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif); font-size:.9375rem; line-height:1.4;
  color:var(--ch-tinta); -webkit-text-size-adjust:100%;}
.sop button, .sop textarea{font:inherit; color:inherit; -webkit-tap-highlight-color:transparent;}
.sop button{touch-action:manipulation; cursor:pointer;}
.sop :focus-visible{outline:2px solid var(--ch-azul); outline-offset:2px;}
.sop-web{z-index:2147483000;}                                      

.sop-lanzador{position:relative; display:grid; place-items:center; width:56px; height:56px; padding:0; border:0; border-radius:50%; background:var(--ch-azul); color:var(--ch-sobre);
  box-shadow:0 10px 28px -8px rgba(11,15,26,.55), 0 2px 6px rgba(11,15,26,.22); transition:transform .16s var(--ch-ease), background-color .16s var(--ch-ease);}
.sop-lanzador:active{transform:scale(.94);}
.sop-lanzador-ic{position:relative; display:block; width:26px; height:26px;}
.sop-lanzador-ic svg{position:absolute; inset:0; transition:transform .22s var(--ch-ease), opacity .16s var(--ch-ease);}
.sop-ic-abajo{opacity:0; transform:rotate(-90deg) scale(.6);}
.sop.abierto .sop-ic-chat{opacity:0; transform:rotate(90deg) scale(.6);}
.sop.abierto .sop-ic-abajo{opacity:1; transform:none;}
.sop-insignia{position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--ch-alerta); color:#fff;
  font-size:12px; font-weight:700; line-height:20px; text-align:center; box-shadow:0 0 0 2px #fff;}
.sop-insignia[hidden]{display:none;}
.sop-modo-admin{z-index:150;}                                      
.sop-modo-admin .sop-insignia{top:-5px; right:-5px; min-width:24px; height:24px; border-radius:12px; font-size:13px; line-height:24px;}
.sop-pulso{animation:sop-pulso .5s var(--ch-ease);}
.sop.abierto .sop-insignia{display:none;}

.sop-panel{position:absolute; right:0; bottom:68px; display:flex; flex-direction:column; width:min(400px, calc(100vw - 32px)); height:min(700px, calc(100dvh - 104px)); min-height:320px; overflow:hidden;
  color-scheme:light; background:var(--ch-fondo); color:var(--ch-tinta); border:1px solid var(--ch-borde); border-radius:22px; box-shadow:var(--ch-sombra);
  transform-origin:bottom right; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px) scale(.96);
  transition:opacity .14s var(--ch-ease), transform .14s var(--ch-ease), visibility 0s linear .14s;}
.sop.abierto .sop-panel{opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .2s var(--ch-ease), transform .24s var(--ch-ease), visibility 0s;}

.sop-cab{position:relative; display:flex; align-items:center; gap:8px; flex:none; padding:14px 8px 12px 18px; background:var(--ch-fondo); border-bottom:1px solid var(--ch-borde);}
.sop-cab-textos{flex:1 1 auto; min-width:0;}
.sop-cab-titulo{font-size:.9375rem; font-weight:650; line-height:1.25; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sop-marca{display:inline-flex; align-items:center; gap:8px; color:var(--ch-tinta); vertical-align:middle;}
.sop-marca svg{flex:none; color:var(--ch-azul);}
.sop-marca-n{font-family:var(--vr-fuente-marca, var(--vr-fuente, 'Hanken Grotesk', system-ui, sans-serif)); font-size:1rem; font-weight:650; letter-spacing:-.015em;}
.sop-tech{color:var(--ch-azul);}
.sop-cab-sub{margin-top:2px; font-size:.78125rem; line-height:1.35; color:var(--ch-texto-3);}
.sop-cab-sub-p{display:block;}
.sop-cab-acciones{display:flex; flex:none; gap:2px; align-self:flex-start;}
.sop-atras, .sop-mas, .sop-x{display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ch-texto-2);}
.sop-atras:active, .sop-mas:active, .sop-x:active{transform:scale(.92);}

.sop-menu{position:absolute; top:58px; right:12px; z-index:3; min-width:230px; padding:6px; background:var(--ch-fondo); border:1px solid var(--ch-borde); border-radius:14px; box-shadow:0 16px 40px -12px rgba(11,15,26,.35), 0 2px 8px rgba(11,15,26,.1);
  transform-origin:top right; animation:sop-menu-in .14s var(--ch-ease);}
.sop-menu[hidden]{display:none;}
.sop-menu-item{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:transparent; color:var(--ch-tinta); font-size:.875rem; text-align:left;}
.sop-menu-item svg{flex:none; color:var(--ch-texto-3);}

.sop-cuerpo{display:flex; flex:1 1 auto; flex-direction:column; min-height:0; background:var(--ch-lienzo);}
.sop-cuerpo[hidden]{display:none;}

.sop-hilo{display:flex; flex:1 1 auto; flex-direction:column; gap:14px; padding:16px 18px; overflow-y:auto; overscroll-behavior:contain; min-height:0;}
.sop-mensajes{display:flex; flex-direction:column; gap:14px;}
.sop-mensajes:empty{display:none;}
.sop-fila-m{display:flex; flex-direction:column; max-width:100%;}
.sop-otro{align-items:flex-start;}
.sop-mio{align-items:flex-end;}
.sop-burbuja{max-width:88%; padding:10px 14px; border-radius:18px; font-size:.9375rem; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere;}
.sop-otro .sop-burbuja{background:var(--ch-fondo); color:var(--ch-tinta); border-bottom-left-radius:6px; box-shadow:var(--ch-flota);}
.sop-mio .sop-burbuja{background:var(--ch-azul); color:var(--ch-sobre); border-bottom-right-radius:6px; box-shadow:0 8px 18px -8px rgba(20,102,255,.55);}
.sop-meta{display:flex; gap:5px; margin:5px 6px 0; font-size:.75rem; line-height:1.2; color:var(--ch-texto-3);}
.sop-sep{opacity:.7;}
.sop-entra{animation:sop-entra .24s var(--ch-ease) both;}
.sop-puntos{display:flex; align-items:center; gap:5px; padding:14px 16px;}
.sop-puntos i{width:7px; height:7px; border-radius:50%; background:var(--ch-texto-3); animation:sop-punto 1.15s var(--ch-ease-mover) infinite;}
.sop-puntos i:nth-child(2){animation-delay:.16s;}
.sop-puntos i:nth-child(3){animation-delay:.32s;}
.sop-escribiendo[hidden]{display:none;}

.sop-aviso-hilo{display:flex; align-items:flex-start; gap:9px; padding:12px 14px; border-radius:14px; font-size:.8125rem; line-height:1.45; color:var(--ch-texto-2);
  background:var(--ch-fondo); box-shadow:var(--ch-flota);}
.sop-aviso-hilo svg{flex:none; margin-top:1px; color:var(--ch-azul);}
.sop-nota-hilo{align-self:center; margin:0; max-width:92%; font-size:.8125rem; line-height:1.4; text-align:center; color:var(--ch-texto-2);}
.sop-nota-hilo[hidden]{display:none;}
.sop-nota-hilo.sop-error{color:var(--ch-error);}

.sop-inicio{display:flex; flex-direction:column; gap:10px;}
.sop-inicio[hidden]{display:none;}
.sop-ficha{display:flex; align-items:center; gap:12px; width:100%; min-height:68px; padding:12px 14px; border:0; border-radius:16px; background:var(--ch-fondo); box-shadow:var(--ch-flota); text-align:left;
  transition:transform .16s var(--ch-ease), box-shadow .16s var(--ch-ease);}
.sop-ficha:active{transform:scale(.985);}
.sop-ficha-ic{display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:12px; background:var(--ch-azul-tinte); color:var(--ch-azul);}
.sop-ficha-t{display:flex; flex:1 1 auto; flex-direction:column; gap:2px; min-width:0;}
.sop-ficha-t strong{font-size:.9375rem; font-weight:650; line-height:1.25;}
.sop-ficha-t span{font-size:.8125rem; line-height:1.35; color:var(--ch-texto-2);}
.sop-ficha > svg{flex:none; color:var(--ch-texto-3);}

.sop-auto{display:flex; flex-direction:column; gap:8px;}
.sop-auto[hidden]{display:none;}
.sop-auto-t{font-size:.8125rem; font-weight:650; color:var(--ch-texto-2); padding:0 2px;}
.sop-auto-p{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:48px; padding:10px 14px; border:0; border-radius:14px;
  background:var(--ch-fondo); box-shadow:var(--ch-flota); font-size:.875rem; line-height:1.35; text-align:left; transition:transform .16s var(--ch-ease), box-shadow .16s var(--ch-ease);}
.sop-auto-p:active{transform:scale(.985);}
.sop-auto-p svg{flex:none; color:var(--ch-texto-3);}
.sop-auto-no{align-self:center; min-height:40px; padding:0 14px; border:0; background:transparent; color:var(--ch-texto-3); font-size:.8125rem;}

.sop-acciones{display:flex; flex:none; flex-wrap:wrap; gap:8px; padding:0 18px 10px;}
.sop-acciones[hidden]{display:none;}
.sop-chip{display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px; border:0; border-radius:99px; background:var(--ch-fondo); box-shadow:var(--ch-flota);
  font-size:.8125rem; text-align:left; transition:transform .16s var(--ch-ease), box-shadow .16s var(--ch-ease), background-color .16s var(--ch-ease);}
.sop-chip:active{transform:scale(.97);}
.sop-chip svg{color:var(--ch-azul);}
.sop-chip.on{background:var(--ch-azul-tinte); box-shadow:0 0 0 2px var(--ch-azul);}

.sop-compositor{display:flex; flex:none; align-items:flex-end; gap:8px; margin:0 14px 14px; padding:5px 5px 5px 16px; background:var(--ch-fondo); border:1px solid var(--ch-borde); border-radius:24px; box-shadow:var(--ch-flota);
  transition:border-color .14s var(--ch-ease), box-shadow .14s var(--ch-ease);}
.sop-compositor:focus-within{border-color:var(--ch-azul); box-shadow:0 0 0 3px rgba(20,102,255,.2), var(--ch-flota);}
.sop-campo{flex:1 1 auto; min-width:0; max-height:120px; padding:9px 0; border:0; outline:0; resize:none; background:transparent; font-size:16px; line-height:1.4;}
.sop-campo::placeholder{color:var(--ch-texto-3);}
.sop-campo:focus-visible{outline:0;}
.sop-contador{align-self:center; flex:none; font-size:.6875rem; color:var(--ch-texto-3);}
.sop-contador[hidden]{display:none;}
.sop-enviar{display:grid; place-items:center; flex:none; width:38px; height:38px; padding:0; border:0; border-radius:50%; background:var(--ch-azul); color:var(--ch-sobre); transition:transform .14s var(--ch-ease), opacity .14s var(--ch-ease);}
.sop-enviar:active:not(:disabled){transform:scale(.92);}
.sop-enviar:disabled{opacity:.3; cursor:default;}

.sop-contacto{display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:16px; background:var(--ch-fondo); box-shadow:var(--ch-flota);}
.sop-contacto[hidden]{display:none;}
.sop-contacto-t{margin:0; font-size:.875rem; line-height:1.45; color:var(--ch-texto-2);}
.sop-campo-contacto{width:100%; box-sizing:border-box; min-height:46px; padding:0 14px; border:1px solid var(--ch-borde-2); border-radius:12px; background:var(--ch-fondo); font-size:16px; color:var(--ch-tinta);}
.sop-campo-contacto:focus{outline:0; border-color:var(--ch-azul); box-shadow:0 0 0 3px rgba(20,102,255,.2);}

.sop-sug{padding:16px 18px; overflow-y:auto;}
.sop-sug-form{display:flex; flex-direction:column; gap:12px;}
.sop-tipo{display:flex; flex-wrap:wrap; gap:8px;}
.sop-campo-grande{max-height:none; padding:12px 14px; background:var(--ch-fondo); border:1px solid var(--ch-borde); border-radius:16px; box-shadow:var(--ch-flota);}
.sop-campo-grande:focus{border-color:var(--ch-azul); box-shadow:0 0 0 3px rgba(20,102,255,.2);}
.sop-primario{min-height:46px; padding:0 18px; border:0; border-radius:14px; background:var(--ch-azul); color:var(--ch-sobre); font-weight:650; transition:transform .14s var(--ch-ease), opacity .14s var(--ch-ease);}
.sop-primario:active:not(:disabled){transform:scale(.98);}
.sop-primario:disabled{opacity:.5; cursor:default;}
.sop-hecho{display:flex; flex-direction:column; align-items:center; gap:14px; padding:36px 8px; text-align:center;}
.sop-hecho p{margin:0; font-size:.9375rem; line-height:1.45;}
.sop-hecho-ic{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--ch-azul-tinte); color:var(--ch-azul);}

.sop-admin{overflow-y:auto;}
.sop-bandeja{display:flex; flex-direction:column; gap:8px; padding:16px 18px;}
.sop-hilo-admin{flex:1 1 auto;}
.sop-sec{margin-top:6px; font-size:.75rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--ch-texto-3);}
.sop-nota{margin:0; font-size:.8125rem; color:var(--ch-texto-3);}
.sop-fila{display:flex; flex-direction:column; gap:3px; width:100%; padding:12px 14px; border:0; border-radius:14px; background:var(--ch-fondo); box-shadow:var(--ch-flota); color:var(--ch-tinta); text-align:left; transition:box-shadow .16s var(--ch-ease);}
.sop-fila.espera{background:var(--ch-alerta-tinte); box-shadow:0 0 0 2px var(--ch-alerta);}
.sop-fila.nueva{box-shadow:0 0 0 2px var(--ch-azul);}
.sop-fila.cerrada{opacity:.62;}
.sop-txt{white-space:pre-wrap; overflow-wrap:anywhere; font-size:.875rem;}

@keyframes sop-pulso{0%{transform:scale(1);} 35%{transform:scale(1.35);} 100%{transform:scale(1);}}
@keyframes sop-entra{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@keyframes sop-menu-in{from{opacity:0; transform:scale(.96);} to{opacity:1; transform:none;}}
@keyframes sop-punto{0%, 60%, 100%{transform:none; opacity:.45;} 30%{transform:translateY(-4px); opacity:1;}}

@media (hover:hover) and (pointer:fine){
  .sop-lanzador:hover{background:var(--ch-azul-2);}
  .sop-atras:hover, .sop-mas:hover, .sop-x:hover{background:var(--ch-fondo-2); color:var(--ch-tinta);}
  .sop-menu-item:hover, .sop-menu-item:focus-visible{background:var(--ch-fondo-2);}
  .sop-ficha:hover, .sop-auto-p:hover, .sop-chip:hover, .sop-fila:hover{transform:translateY(-1px); box-shadow:var(--ch-flota-alta);}
}
@media (pointer:coarse){
  .sop-atras, .sop-mas, .sop-x{width:44px; height:44px;}
  .sop-chip{min-height:44px;}
  .sop-menu-item{min-height:48px;}
}

@media (max-width:520px){
  .sop.sop-publico{right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom));}
  .sop-publico .sop-lanzador{width:48px; height:48px;}
  .sop-publico .sop-lanzador-ic{width:22px; height:22px;}
}

@media (max-width:520px){
  .sop-panel{position:fixed; top:var(--sop-arriba, 0); right:0; bottom:auto; left:0; width:auto; height:var(--sop-alto, 100dvh); min-height:0; border:0; border-radius:0; transform-origin:bottom right; transform:translateY(24px);}
  .sop-cab{padding-top:max(14px, env(safe-area-inset-top)); padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(8px, env(safe-area-inset-right));}
  .sop-compositor{margin-bottom:max(14px, env(safe-area-inset-bottom));}
  .sop.abierto .sop-lanzador{visibility:hidden;}
  .sop-menu{top:max(58px, calc(env(safe-area-inset-top) + 44px));}
}

@media (prefers-reduced-motion: reduce){
  .sop-panel, .sop.abierto .sop-panel{transform:none; transition:opacity .12s linear, visibility 0s linear .12s;}
  .sop.abierto .sop-panel{transition:opacity .12s linear, visibility 0s;}
  .sop-lanzador-ic svg, .sop-lanzador, .sop-ficha, .sop-auto-p, .sop-chip, .sop-enviar, .sop-primario, .sop-compositor{transition:none;}
  .sop-ic-abajo, .sop.abierto .sop-ic-chat{transform:none;}
  .sop-entra, .sop-menu, .sop-pulso{animation:none;}
  .sop-puntos i{animation:none; opacity:.7;}
}

.sop-web{--vr-fuente:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --vr-fuente-marca:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;}