/* ==========================================================
   SOPORTE — estilos propios de /soporte/
   Usa las variables de main.css, no redefine la marca.
   ========================================================== */

/* --- Listado de promesas del hero --- */
.sp-promesas{list-style:none;margin:var(--space-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
.sp-promesas li{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:15px}
.sp-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);flex:0 0 auto}

/* --- Cifra grande de los plazos --- */
.sp-plazo{font-family:var(--font-mono);font-size:30px;line-height:1.1;font-weight:500;color:var(--accent-2);margin:var(--space-2) 0 4px}

/* --- Panel del formulario --- */
.sp-panel{margin-top:var(--space-4)}
.sp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.sp-full{grid-column:1/-1}
.sp-panel .field{margin:0}

/* --- Mensajes de error --- */
.sp-err{display:none;margin-top:6px;font-size:14px;font-weight:600;color:#ff8080}
.field.is-invalid .sp-err,.sp-err.is-visible{display:block}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#ff8080}

/* --- Selector de urgencia --- */
.sp-urgencia{border:0;padding:0;margin:0;min-width:0}
.sp-urgencia legend{display:block;font-size:15px;font-weight:600;margin-bottom:8px;padding:0}
.sp-urg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sp-urg input{position:absolute;opacity:0;width:0;height:0}
.sp-urg label{display:block;text-align:center;cursor:pointer;margin:0;padding:12px 8px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card-dark-2);
  color:var(--ink-soft);font-size:14px;font-weight:700;transition:border-color .18s ease,background .18s ease,color .18s ease}
.sp-urg label small{display:block;font-weight:400;font-size:12px;color:var(--ink-faint);margin-top:3px}
.sp-urg input:checked + label{border-color:var(--accent);background:rgba(47,111,237,.14);color:var(--ink)}
.sp-urg input:focus-visible + label{outline:3px solid var(--accent-2);outline-offset:2px}

/* --- Zona de adjuntos --- */
.sp-drop{border:1.5px dashed var(--line);border-radius:var(--radius);padding:22px;text-align:center;
  background:var(--bg-card-dark-2);cursor:pointer;display:grid;gap:4px;
  transition:border-color .18s ease,background .18s ease}
.sp-drop:hover,.sp-drop.is-over{border-color:var(--accent);background:rgba(47,111,237,.07)}
.sp-drop strong{color:var(--accent-2)}
.sp-files{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.sp-files li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--bg-card-dark-2);border:1px solid var(--line);border-radius:10px;
  padding:9px 13px;font-size:14px;color:var(--ink-soft)}
.sp-files button{background:none;border:0;color:#ff8080;cursor:pointer;font-size:16px;padding:2px 6px;line-height:1}

/* --- Trampa antispam --- */
.sp-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* --- Bloque de resultado --- */
.sp-result{display:none;margin-top:var(--space-3);padding:var(--space-3);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card-dark-2)}
.sp-result.is-visible{display:block}
.sp-result.is-ok{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.07)}
.sp-result.is-bad{border-color:rgba(255,128,128,.45);background:rgba(255,128,128,.07)}
.sp-result h3{margin:12px 0 8px}
.sp-result p{color:var(--ink-soft)}
.sp-result p:last-child{margin-bottom:0}
.sp-codigo{display:inline-block;font-family:var(--font-mono);font-size:24px;letter-spacing:.06em;
  color:var(--ink);background:var(--bg-darker);border:1px dashed var(--line);
  border-radius:var(--radius);padding:14px 18px;margin:8px 0 14px}

/* --- Etiquetas de estado --- */
.sp-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:6px 13px;border-radius:999px;border:1px solid}
.sp-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sp-b-nuevo{color:var(--accent-2);border-color:rgba(110,161,255,.45);background:rgba(47,111,237,.12)}
.sp-b-curso{color:#f6c453;border-color:rgba(246,196,83,.45);background:rgba(246,196,83,.10)}
.sp-b-espera{color:#8fb8ff;border-color:rgba(143,184,255,.45);background:rgba(143,184,255,.10)}
.sp-b-hecho{color:var(--check);border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.10)}

/* --- Línea de fases --- */
.sp-fases{list-style:none;margin:var(--space-3) 0 0;padding:0}
.sp-fases li{position:relative;padding:0 0 22px 34px;color:var(--ink-faint);font-size:15px}
.sp-fases li::before{content:"";position:absolute;left:8px;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--bg-darker);border:2px solid var(--line)}
.sp-fases li::after{content:"";position:absolute;left:13px;top:17px;bottom:0;width:2px;background:var(--line)}
.sp-fases li:last-child{padding-bottom:0}
.sp-fases li:last-child::after{display:none}
.sp-fases li.is-done{color:var(--ink-soft)}
.sp-fases li.is-done::before{background:var(--check);border-color:var(--check)}
.sp-fases li.is-current{color:var(--ink);font-weight:700}
.sp-fases li.is-current::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(47,111,237,.22)}
.sp-fases strong{display:block}
.sp-fases small{display:block;color:var(--ink-faint);font-weight:400;font-size:13px}

/* --- Consulta de estado --- */
.sp-track{margin-top:var(--space-4)}
.sp-track-grid{display:grid;grid-template-columns:1.1fr 1.3fr auto;gap:var(--space-2);align-items:end}
.sp-track-grid .field{margin:0}
.sp-track-btn{display:flex;align-items:flex-end}
.sp-track-btn .btn{width:100%}

/* --- Indicador de carga --- */
.sp-spin{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:8px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp-giro .7s linear infinite}
@keyframes sp-giro{to{transform:rotate(360deg)}}

/* --- Bloque de ayuda en la página de contacto --- */
.sp-ayuda-card{display:flex;flex-direction:column;gap:10px}
.sp-ayuda-card .btn{align-self:flex-start;margin-top:4px}

/* --- Responsive --- */
@media (max-width:860px){
  .sp-cols{grid-template-columns:1fr}
  .sp-track-grid{grid-template-columns:1fr}
  .sp-urg{grid-template-columns:repeat(2,1fr)}
}

/* El input de archivos queda oculto: el selector por id gana al ancho
   del 100% que main.css aplica a los inputs del formulario. */
input#adjuntos.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Icono de tarjeta con SVG en línea. La clase .icon de main.css está
   pensada para imágenes, así que estas tarjetas usan la suya. */
.sp-ico{width:48px;height:48px;flex-shrink:0;border-radius:13px;display:flex;align-items:center;
  justify-content:center;margin-bottom:var(--space-2);background:rgba(43,107,255,.16);
  border:1px solid rgba(107,165,255,.30);color:#6BA5FF}
.sp-ico svg{width:23px;height:23px}

/* Tarjeta destacada propia: .card-featured de main.css lleva una etiqueta
   fija de "obligatorio por ley" que aquí no corresponde. */
.sp-destacada{border-color:rgba(107,165,255,.45);box-shadow:0 14px 38px rgba(47,111,237,.16)}
.section-alt .sp-destacada{border-color:rgba(47,111,237,.35)}

/* La cifra del plazo debe leerse igual de bien sobre claro y sobre oscuro */
.sp-plazo{font-size:34px;color:var(--accent)}
.section-alt .sp-plazo{color:var(--accent)}

/* La consulta de estado hereda los estilos de formulario del sitio */
.sp-track .field label{display:block}
.sp-track-grid .btn{white-space:nowrap}