/* Bot de soporte «¿Dudas?» (WP2). Solo tokens de public/estilo.css: hereda el modo oscuro (data-theme) sin colores propios.
   Objetivos táctiles ≥ 44 px, botón de 56 px, panel de 360 px en escritorio y hoja de borde a borde en móvil. Respeta prefers-reduced-motion. */
.sop-btn{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:35;min-width:56px;min-height:56px;padding:0 20px 0 16px;border-radius:999px;border:0;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);font:600 .95rem/1 var(--body);display:inline-flex;align-items:center;gap:8px;box-shadow:var(--sombra-acento);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.sop-btn:hover{transform:translateY(-2px)}
.sop-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sop-btn[aria-expanded="true"]{box-shadow:var(--sombra)}
.sop-ico{display:grid;place-items:center;width:24px;height:24px}
.sop-ico svg{width:24px;height:24px}
.sop-panel{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:35;width:min(370px,100vw - 32px);height:min(600px,calc(100vh - 110px));display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sombra-2);overflow:hidden;animation:sop-entra .35s var(--ease) both}
@keyframes sop-entra{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.sop-cab{display:flex;align-items:center;gap:12px;padding:14px 10px 12px 16px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.sop-tit{display:flex;flex-direction:column;min-width:0}
.sop-tit b{font-family:var(--display);font-size:1.02rem;letter-spacing:-.01em}
.sop-tit .hint{font-size:.76rem;line-height:1.3}
.sop-avatar{flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.sop-cerrar{margin-left:auto;flex:none;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--muted);font-size:1.1rem;cursor:pointer;border-radius:12px;box-shadow:none}
.sop-cerrar:hover{background:var(--accent-soft);color:var(--accent);transform:none;box-shadow:none}
.sop-cuerpo{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sop-log{padding:14px 16px 8px;display:flex;flex-direction:column;gap:8px}
.sop-m{max-width:88%;padding:10px 14px;border-radius:18px;white-space:pre-wrap;line-height:1.45;font-size:.95rem;overflow-wrap:anywhere}
.sop-m.bot{background:var(--bg-2);border:1px solid var(--line);border-bottom-left-radius:6px;align-self:flex-start}
.sop-m.yo{background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:6px;align-self:flex-end}
.sop-m.escribiendo{display:inline-flex;gap:5px;padding:14px 16px}
.sop-m.escribiendo i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:sop-puntos 1.2s ease-in-out infinite}
.sop-m.escribiendo i:nth-child(2){animation-delay:.15s}
.sop-m.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes sop-puntos{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.sop-calif{display:flex;gap:4px;align-items:center;align-self:flex-start;margin:-4px 0 2px 4px;min-height:32px}
.sop-calif button{min-width:44px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;font-size:1rem;border-radius:12px;color:var(--muted)}
.sop-calif button:hover{background:var(--accent-soft);transform:none;box-shadow:none}
.sop-calif .hint{padding:0 6px}
.sop-rapidas{display:flex;flex-wrap:wrap;gap:6px;padding:4px 16px 8px}
.sop-rapidas:empty{display:none}
.sop-rapidas button{min-height:44px;border-radius:999px;padding:8px 14px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:var(--surface);color:var(--accent);font:500 .85rem var(--body);cursor:pointer;box-shadow:none;text-align:left}
.sop-rapidas button:hover{background:var(--accent-soft);transform:none;box-shadow:none}
.sop-barra{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--line);background:var(--surface)}
.sop-barra input{flex:1;min-width:0;min-height:44px;padding:10px 14px;border-radius:14px}
.sop-barra button{min-height:44px;padding:10px 16px;border-radius:14px;white-space:nowrap}
.sop-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sop-tarjeta{margin:0 16px 10px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--bg-2);display:grid;gap:8px}
.sop-tarjeta b{font-family:var(--display)}
.sop-tarjeta p{margin:0;line-height:1.5}
.sop-tarjeta .row{display:flex;gap:8px;flex-wrap:wrap}
.sop-tarjeta .hint{font-size:.8rem}
.sop-tarjeta.ok{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:var(--ok-soft)}
.sop-tarjeta.ok b,.sop-tarjeta.ok p{color:var(--ink)}
.sop-num{font-family:var(--mono);letter-spacing:.06em;color:var(--ok)}
.sop-tarjeta .btn-s,.sop-form .ghost{min-height:44px;padding:8px 14px;border-radius:12px;font-size:.9rem}
.sop-form{margin:0 16px 10px;display:grid;gap:10px}
.sop-form .campo{display:grid;gap:5px}
.sop-form .campo label{font-size:.76rem;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.sop-form .opcional{font-weight:500;text-transform:none;letter-spacing:0}
.sop-form input,.sop-form select,.sop-form textarea{min-height:44px;padding:10px 14px;border-radius:12px;font-size:.95rem}
.sop-form textarea{min-height:96px;resize:vertical}
.sop-form .row{display:flex;gap:8px;flex-wrap:wrap}
.sop-form .row .primary{flex:1}
.sop-check{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:4px 0;cursor:pointer;font-size:.9rem;line-height:1.45}
.sop-check input{width:22px;height:22px;min-height:0;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.sop-check a{color:var(--accent);font-weight:600}
.sop-error{margin:0;padding:10px 12px;border-radius:12px;background:var(--coral-soft);color:var(--ink);font-weight:600;font-size:.88rem;border-left:4px solid var(--coral)}
.sop-pie{margin:0;padding:0 16px 12px;font-size:.72rem;line-height:1.4}
@media (max-width:599px){
  .sop-panel{left:0;right:0;bottom:0;width:100%;height:min(92vh,92dvh);border-radius:28px 28px 0 0;animation-name:sop-sube}
  @keyframes sop-sube{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
  .sop-panel .sop-cab{padding-top:16px}
  .sop-btn .sop-txt{display:none}
  .sop-btn{padding:0;width:56px;justify-content:center}
  .sop-btn[aria-expanded="true"]{display:none} /* la hoja cubre el botón: el cierre es la ✕ o Esc */
  .sop-barra{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  .sop-m.escribiendo i{animation:none}
  .sop-panel{animation:none}
  .sop-btn,.sop-btn:hover{transition:none;transform:none}
}
@media print{.sop-btn,.sop-panel{display:none}}
/* María: tarjetas del motor (planes, cuenta, proyectos, abrir). Solo tokens de estilo.css. */
.sop-tarjeta .btn-s{min-height:44px;padding:8px 14px;border-radius:12px;font-size:.9rem;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.sop-tarjeta .btn-s.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);border:0}
.sop-planes{display:grid;gap:8px}
.sop-plan{display:grid;gap:4px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.sop-plan.reco{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.sop-plan-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sop-plan-cab b{font-family:var(--display)}
.sop-reco{font-size:.66rem;font-weight:700;color:var(--accent-ink);background:linear-gradient(135deg,var(--accent),var(--accent-2));padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.sop-plan-precio{font-family:var(--display);font-size:1.05rem;letter-spacing:-.01em}
.sop-plan-precio small{font-family:var(--body);font-size:.78rem;color:var(--muted)}
.sop-plan .btn-s{justify-self:start;margin-top:2px}
.sop-saldo{display:flex;align-items:center;gap:8px;margin:0}
.sop-sem{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:none}
.sop-sem.verde{background:var(--ok)}
.sop-sem.amarillo{background:var(--warn)}
.sop-sem.rojo{background:var(--coral)}
.sop-proys{display:grid;gap:6px}
.sop-proy{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.sop-proy>div{display:grid;min-width:0}
.sop-proy b{font-family:var(--display);font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sop-proy .hint{font-size:.74rem}
.sop-proy.vencido{opacity:.65}
.sop-props{display:grid;gap:6px}
.sop-prop{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;min-height:44px}
.sop-prop input{width:20px;height:20px;min-height:0;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.sop-prop>span{display:grid;gap:2px;min-width:0;font-size:.9rem;line-height:1.4}
.sop-prop .hint{font-size:.76rem}
.sop-imp{font-style:normal;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-left:4px}
.sop-prop.wow .sop-imp{color:var(--accent)}

/* Escalera Fundadora: insignia del peldaño y precio de lista tachado en las tarjetas de planes de María (punto lima de la marca, rgb 198 255 61). */
.sop-lanz{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;color:var(--accent);margin:2px 0}
.sop-lanz i{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:rgb(198 255 61);flex:none}
.sop-plan-precio s{color:var(--muted);font-weight:600;margin-right:2px}