/* === Soporte (tickets) — acento AZUL INSTITUCIONAL ===
   Encolado por FUNAJIT Páginas solo donde hay shortcodes [soporte_...]. */

.sp-hero { --fjx-accent: #1D4ED8; }
.fjx-hero.sp-hero { padding-top:180px !important; padding-bottom:44px !important; min-height:0 !important; }
.sp-hero .fjx-eyebrow { color:#1D4ED8 !important; }
.sp-hero .fjx-btn { background:#1D4ED8 !important; }
.sp-hero .fjx-btn:hover { background:#1E3A8A !important; }
@media (max-width:760px){ .fjx-hero.sp-hero { padding-top:120px !important; } }

.sp-visual{position:relative;width:min(420px,78vw);aspect-ratio:1;margin:0 auto}
.sp-ring{position:absolute;inset:8%;border-radius:50%;border:1.5px dashed rgba(29,78,216,.35);animation:sp-spin 50s linear infinite}
.sp-core{position:absolute;top:50%;left:50%;width:56%;height:56%;transform:translate(-50%,-50%);display:grid;place-items:center;animation:sp-float 5.5s ease-in-out infinite}
.sp-core img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 40px rgba(30,58,138,.28))}
@keyframes sp-spin{to{transform:rotate(360deg)}}
@keyframes sp-float{0%,100%{margin-top:0}50%{margin-top:-10px}}

/* ===== formulario de solicitud ===== */
.sp-form { max-width:680px; margin-top:22px; }
.sp-field { margin:0 0 16px; }
.sp-field label { display:block; font-weight:800; font-size:14px; color:#0a1628; margin-bottom:6px; }
.sp-form input[type="text"], .sp-form input[type="email"], .sp-form select, .sp-form textarea {
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(16,42,67,.18);
  background:#fff; font:inherit; color:#0a1628; box-sizing:border-box; transition:border-color .15s ease, box-shadow .15s ease;
}
.sp-form input:focus, .sp-form select:focus, .sp-form textarea:focus {
  outline:none; border-color:#1D4ED8; box-shadow:0 0 0 3px rgba(29,78,216,.15);
}
.sp-form textarea { resize:vertical; min-height:130px; }
.sp-submit { margin-top:6px; }
.sp-submit .fjx-btn { background:#1D4ED8 !important; border:0; cursor:pointer; }
.sp-submit .fjx-btn:hover { background:#1E3A8A !important; }
/* honeypot: fuera de la vista pero accesible a los bots */
.sp-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.sp-form-err { max-width:680px; margin:0 0 18px; padding:14px 18px; border-radius:12px; background:#fef2f2; border:1px solid rgba(220,38,38,.3); color:#991B1B; font-weight:600; }

/* ===== éxito ===== */
.sp-ok { max-width:680px; margin:10px auto 0; padding:34px 30px; border-radius:22px; text-align:center; background:linear-gradient(160deg,#eef3fe,#e6eefc); border:1px solid rgba(29,78,216,.2); }
.sp-ok-ico { font-size:44px; }
.sp-ok-title { font-family:"Outfit",sans-serif; font-weight:900; font-size:26px; color:#0a1628; margin:8px 0 6px; }
.sp-ok-code { font-size:18px; color:#1e293b; margin:0 0 10px; }
.sp-ok-code strong { color:#1D4ED8; font-family:"Outfit",sans-serif; letter-spacing:.02em; }
.sp-ok-txt { font-size:15px; line-height:1.6; color:#4b5a75; margin:0 auto; max-width:52ch; }
.sp-ok-txt a { color:#1D4ED8; font-weight:700; }
/* Lo que no salió como debía. Va en ámbar dentro de la caja verde: el ticket sí se creó. */
.sp-ok-aviso { max-width:52ch; margin:16px auto 0; padding:12px 16px; border-radius:12px;
  background:#fff8ea; border:1px solid rgba(180,131,24,.4); color:#7a5a12;
  font-size:14px; line-height:1.55; font-weight:600; text-align:left; }

/* ===== consultar estado ===== */
.sp-track { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; max-width:680px; }
.sp-track input { flex:1; min-width:200px; padding:12px 14px; border-radius:12px; border:1px solid rgba(16,42,67,.18); background:#fff; font:inherit; box-sizing:border-box; }
.sp-track input:focus { outline:none; border-color:#1D4ED8; box-shadow:0 0 0 3px rgba(29,78,216,.15); }
.sp-track .fjx-btn { background:#1D4ED8 !important; border:0; cursor:pointer; white-space:nowrap; }
.sp-track .fjx-btn:hover { background:#1E3A8A !important; }
/* En el móvil el botón de consulta va a ancho completo, alineado con los dos campos, que ya se
   apilan solos por el flex-wrap. Un botón de 117 px descolgado bajo dos campos de 320 se ve
   suelto y se toca peor.

   AQUÍ NO HABÍA NINGÚN DESBORDAMIENTO, aunque la auditoría del 11-ago-2026 dijera que sí y una
   primera versión de este comentario lo repitiera: comprobado a 320 px con y sin estas reglas,
   `form.sp-track` y sus campos miden 320 en los dos casos. El `min-width:200px` no desborda
   porque el contenedor tiene flex-wrap y los apila. El elemento de 356 px que aparecía al medir
   era el campo trampa antispam (`.sp-hp`, aria-hidden), que vive fuera de la pantalla a propósito. */
@media (max-width:420px) {
  .sp-track .fjx-btn { width:100%; text-align:center; }
}

.sp-track-err { margin-top:18px; padding:14px 18px; border-radius:12px; background:#fef2f2; border:1px solid rgba(220,38,38,.3); color:#991B1B; font-weight:600; max-width:680px; }
.sp-track-ok { margin-top:18px; padding:14px 18px; border-radius:12px; background:#f0fdf4; border:1px solid rgba(22,163,74,.32); color:#166534; font-weight:600; max-width:680px; }

/* ficha del ticket consultado */
.sp-ticket { margin-top:22px; max-width:760px; border:1px solid rgba(16,42,67,.1); border-radius:18px; overflow:hidden; box-shadow:0 16px 40px rgba(16,42,67,.08); }
.sp-ticket-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:18px 22px; background:#f6f8fc; border-bottom:1px solid rgba(16,42,67,.08); font-size:14.5px; color:#4b5a75; }
.sp-ticket-head strong { color:#0a1628; font-family:"Outfit",sans-serif; }
.sp-badge { display:inline-block; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:800; color:#fff; }
.sp-badge--nuevo { background:#1D4ED8; }
.sp-badge--reabierto { background:#7C3AED; }
.sp-badge--proceso { background:#C1912A; }
.sp-badge--resuelto { background:#16A34A; }
.sp-badge--cerrado { background:#6b7280; }
.sp-ticket-msg, .sp-thread { padding:18px 22px; }
.sp-thread { border-top:1px solid rgba(16,42,67,.08); }
.sp-lbl { display:block; font-size:12px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#66748c; margin-bottom:8px; }
.sp-reply { border-left:3px solid #16A34A; background:#f6faf7; padding:12px 16px; border-radius:0 12px 12px 0; margin-bottom:12px; }
.sp-reply-meta { font-size:12.5px; font-weight:700; color:#50575e; margin-bottom:4px; }
.sp-reply-txt { font-size:14.5px; line-height:1.6; color:#243044; }
.sp-reply-files { margin-top:8px; font-size:13px; color:#4b5a75; }
.sp-reply-files em { color:#8a97ab; font-style:normal; }
.sp-noreply { font-size:14.5px; color:#66748c; margin:0; }
/* Lo que escribió la propia persona: mismo hilo, otro lado. El violeta lo separa del verde del
   equipo sin sacarlo de la conversación — es un ida y vuelta, no dos listas. */
.sp-reply--mio { border-left:0; border-right:3px solid #7C3AED; background:#faf7ff; border-radius:12px 0 0 12px; margin-left:auto; max-width:88%; }
.sp-reply--mio .sp-reply-meta { color:#5b21b6; }

/* responder al caso desde el propio hilo */
.sp-follow { padding:18px 22px; border-top:1px solid rgba(16,42,67,.08); background:#f9fafd; }
.sp-follow-nota { font-size:14px; line-height:1.55; color:#4b5a75; margin:0 0 12px; }
.sp-follow-form textarea { width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(16,42,67,.18); background:#fff; font:inherit; font-size:15px; line-height:1.5; box-sizing:border-box; resize:vertical; }
.sp-follow-form textarea:focus { outline:none; border-color:#1D4ED8; box-shadow:0 0 0 3px rgba(29,78,216,.15); }
.sp-follow-file { display:block; margin:12px 0; font-size:13.5px; font-weight:700; color:#4b5a75; }
.sp-follow-file input[type=file] { display:block; margin-top:6px; font-size:13px; max-width:100%; }
.sp-follow-hint { display:block; margin-top:4px; font-size:12.5px; font-weight:500; color:#8a97ab; }
.sp-follow-form .fjx-btn { background:#1D4ED8 !important; border:0; cursor:pointer; }
.sp-follow-form .fjx-btn:hover { background:#1E3A8A !important; }

/* fila CTA — degradado azul institucional */
.fjx-cta-row { background:linear-gradient(135deg,#1E3A8A 0%, #2563EB 100%) !important; }
.fjx-cta-row .fjx-title { max-width:none !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; color:#fff !important; }
.fjx-cta-row .fjx-lead { margin-left:auto !important; margin-right:auto !important; text-align:center !important; max-width:62ch; }
.fjx-cta-row .fjx-btn-light { color:#1E3A8A !important; }
.fjx-cta-row .fjx-btn-outline { color:#fff !important; border:2px solid rgba(255,255,255,.75) !important; background:transparent !important; }
.fjx-cta-row .fjx-btn-outline:hover { background:rgba(255,255,255,.16) !important; border-color:#fff !important; color:#fff !important; }