/* ==========================================================================
   Botón "Soporte" y su formulario (assets/inicio/soporte.js).
   Usa los tokens de styles.css: se adapta solo a modo claro y oscuro.
   ========================================================================== */

.sp-raiz{
  position:fixed; right:22px; bottom:22px; z-index:95;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  pointer-events:none;
}
.sp-raiz > *{ pointer-events:auto; }

.sp-boton{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--touch-blue); color:#fff; border:none; border-radius:100px;
  padding:12px 20px 12px 16px; font-size:14px; font-weight:700; cursor:pointer;
  box-shadow:0 10px 24px rgba(24,112,156,0.32);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.sp-boton:hover{ background:var(--ink-3); transform:translateY(-1px); box-shadow:0 14px 30px rgba(24,112,156,0.42); }
.sp-boton:active{ transform:translateY(0); }
.sp-boton:focus-visible, .sp-panel button:focus-visible{ outline:3px solid var(--touch-cyan); outline-offset:2px; }
.sp-boton-icono svg{ width:18px; height:18px; display:block; }
.sp-boton[aria-expanded="true"]{ background:var(--ink); }

.sp-panel{
  width:360px; max-width:calc(100vw - 32px);
  max-height:calc(100vh - 110px); overflow:auto;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.sp-panel[hidden]{ display:none; }

.sp-cabecera{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:20px 20px 14px; border-bottom:1px solid var(--border);
}
.sp-cabecera h2{ font-size:17px; line-height:1.3; }
.sp-cabecera p{ font-size:13px; color:var(--text-soft); margin-top:4px; line-height:1.5; }
.sp-cerrar{
  width:32px; height:32px; border-radius:50%; border:none; flex-shrink:0;
  background:var(--surface-2); color:var(--text-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.sp-cerrar svg{ width:14px; height:14px; }
.sp-cerrar:hover{ background:var(--border-strong); color:var(--text); }

.sp-form{ padding:16px 20px 20px; display:flex; flex-direction:column; gap:14px; }
.sp-form[hidden]{ display:none; }
.sp-campo{ display:flex; flex-direction:column; gap:6px; }
.sp-campo label{ font-size:12.5px; font-weight:700; color:var(--text-soft); }
.sp-campo input, .sp-campo textarea{
  width:100%; font:inherit; font-size:14px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:10px 12px; resize:vertical;
}
.sp-campo textarea{ min-height:96px; }
.sp-campo input::placeholder, .sp-campo textarea::placeholder{ color:var(--text-muted); }
.sp-campo input:focus, .sp-campo textarea:focus{ outline:none; border-color:var(--touch-cyan); box-shadow:0 0 0 3px rgba(28,167,223,0.22); }
.sp-campo [aria-invalid="true"]{ border-color:#D64545; }
.sp-ayuda{ font-size:11.5px; color:var(--text-muted); line-height:1.4; }

.sp-trampa{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

.sp-mensaje{ font-size:13px; color:#C23B3B; line-height:1.45; }
.sp-mensaje:empty{ display:none; }
:root[data-theme="dark"] .sp-mensaje{ color:#FF8A8A; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sp-mensaje{ color:#FF8A8A; }
}

.sp-enviar{
  width:100%; border:none; border-radius:100px; padding:12px 18px;
  background:var(--touch-blue); color:#fff; font-size:14px; font-weight:700; cursor:pointer;
  transition:background-color .15s ease;
}
.sp-enviar:hover{ background:var(--ink-3); }
.sp-enviar:disabled{ opacity:.7; cursor:progress; }
.sp-secundario{
  width:100%; border:1px solid var(--border-strong); border-radius:100px; padding:11px 18px;
  background:transparent; color:var(--text); font-size:14px; font-weight:600; cursor:pointer;
}
.sp-secundario:hover{ background:var(--surface-2); }

.sp-gracias{ padding:22px 20px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
.sp-gracias[hidden]{ display:none; }
.sp-gracias-icono svg{ width:44px; height:44px; color:var(--touch-blue); display:block; }
.sp-gracias h3{ font-size:18px; outline:none; }
.sp-gracias p{ font-size:13.5px; color:var(--text-soft); line-height:1.5; word-break:break-word; }
.sp-gracias strong{ color:var(--text); }
.sp-acciones{ display:flex; flex-direction:column; gap:8px; width:100%; margin-top:10px; }

@media (max-width: 460px){
  .sp-raiz{ right:16px; bottom:16px; left:16px; }
  .sp-panel{ width:100%; max-width:none; max-height:calc(100vh - 160px); }
  .sp-boton{ padding:12px 16px; }
}
@media (prefers-reduced-motion: reduce){
  .sp-boton, .sp-enviar{ transition:none; }
}