/* ==========================================================================
   soporte.css — Centro de soporte (#/soporte y #/soporte/:id)

   Prefijo:    .sup-*
   Elementos:  alta de ticket, lista de tickets, hilo de mensajes, adjuntos
   Lo usan:    views/soporte.html, views/soporte_detalle.html,
               js/controllers/soporte.js, js/controllers/soporte_detalle.js
   Modo:       Operate. El estudiante viene a resolver un problema. Gana la
               consistencia con el resto de la app, no la expresión: mismos
               contenedores (.settings-page-wrapper / .profile-layout) que
               Configuración y Suscripción.

   Sobre el color: un solo acento (el violeta de marca) y solo para la acción
   principal, el foco y el estado actual. Las píldoras de estado usan fondos
   tenues con texto oscuro en vez de rellenos saturados, porque son etiquetas
   y no botones.

   Sobre --text-secondary: da 3.22:1 sobre el fondo de página y NO pasa AA.
   Aquí se usa --sup-muted, los mismos valores que css/pages/doc.css calculó
   para lo mismo.
   ========================================================================== */

.sup-page {
  --sup-muted: #5F5B57;
  --sup-surface: var(--bg-white, #fff);
  --sup-line: #E4E1DD;
  --sup-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Superficies de navegador: las partes que no dibujamos también son diseño. */
  accent-color: var(--violet, #6C2BFF);
  caret-color: var(--violet, #6C2BFF);
}

[data-theme="dark"] .sup-page {
  --sup-muted: #A5A3B4;
  --sup-surface: #1C1B22;
  --sup-line: #32303C;
}

.sup-page ::selection {
  background: rgba(108, 43, 255, 0.22);
  color: inherit;
}

/* Un solo anillo de foco en toda la pantalla, y visible en ambos temas. */
.sup-page :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--violet, #6C2BFF);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Cabecera ───────────────────────────────────────────────────────── */

/* El título lo define ahora .settings-page-title, compartido con el resto del
   área. Aquí sólo se aprieta el margen inferior, porque en Soporte al título le
   sigue una entradilla: título y entradilla son un par y deben ir juntos, con
   el aire debajo del par y no en medio. */
.sup-page .settings-page-title {
  margin-bottom: 8px;
}

.sup-lede {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sup-muted);
  max-width: 62ch;
  margin: 0 0 24px;
}

/* ── Atajos de autoservicio ─────────────────────────────────────────── */
/* Lista de texto, no tarjetas: son tres enlaces, y meterlos en cajas con icono
   los haría competir con el botón de escribir, que es la acción principal. */

.sup-shortcuts-lead {
  margin: 0 0 8px;
  font-size: 0.86rem;
  font-weight: var(--fw-semi, 600);
  color: var(--sup-muted);
}

.sup-shortcuts {
  margin: 0 0 24px;
  padding: 0 0 0 18px;
  display: grid;
  gap: 4px;
}

.sup-shortcuts li { font-size: 0.89rem; line-height: 1.6; }

.sup-shortcuts a {
  color: var(--violet, #6C2BFF);
  text-decoration: none;
  text-underline-offset: 3px;
}

.sup-shortcuts a:hover { text-decoration: underline; }

[data-theme="dark"] .sup-shortcuts a { color: #9D86FF; }

.sup-section-title {
  font-size: 1.05rem;
  font-weight: var(--fw-bold, 700);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  /* Más aire encima que debajo: el título pertenece a lo que sigue. */
  margin: 40px 0 14px;
}

.sup-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: var(--fw-semi, 600);
  color: var(--sup-muted);
  text-decoration: none;
  margin-bottom: 8px;
}

.sup-back .material-symbols-outlined { font-size: 20px; }

@media (hover: hover) and (pointer: fine) {
  .sup-back:hover { color: var(--text-primary); }
}

/* Cerrar el ticket. Acción de nivel «ticket», no de nivel «mensaje»: vive con
   el estado y NO junto a Enviar. Se pinta como texto y no como botón para que
   no compita con la acción principal, que es escribir. */
.sup-close-icono { display: none; }

/* Texto que solo leen los lectores de pantalla: cuando el botón se queda en
   icono, el nombre de la acción tiene que seguir estando en algún sitio. */
.sup-solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sup-close-ticket {
  margin-top: 10px;
  padding: 6px 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: var(--fw-semi, 600);
  color: var(--sup-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .sup-close-ticket:hover { color: var(--red, #EF4444); }
}

/* Fila del redactor: campo arriba, clip y enviar debajo a la derecha. */
.sup-compose-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

.sup-compose-row .sup-icon-btn { flex: none; }

/* ── Botones ────────────────────────────────────────────────────────── */

.sup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-md, 12px);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: var(--fw-semi, 600);
  cursor: pointer;
  /* Propiedades concretas, nunca `all`. */
  transition: background-color 180ms var(--sup-ease),
              border-color 180ms var(--sup-ease),
              transform 120ms var(--sup-ease);
}

.sup-btn .material-symbols-outlined { font-size: 20px; }

.sup-btn--primary {
  background: var(--violet, #6C2BFF);
  color: #fff;
  box-shadow: 0 1px 2px rgba(31, 12, 71, 0.16), 0 4px 12px rgba(108, 43, 255, 0.22);
}

.sup-btn--ghost {
  background: transparent;
  border-color: var(--sup-line);
  color: var(--text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .sup-btn--primary:hover { background: var(--violet-dark, #581BE5); }
  .sup-btn--ghost:hover { background: rgba(108, 43, 255, 0.06); border-color: var(--violet, #6C2BFF); }
}

.sup-btn:active { transform: scale(0.97); }

.sup-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.sup-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--r-full, 999px);
  background: transparent;
  color: var(--sup-muted);
  cursor: pointer;
  transition: background-color 150ms var(--sup-ease);
}

@media (hover: hover) and (pointer: fine) {
  .sup-icon-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--text-primary); }
}

[data-theme="dark"] .sup-icon-btn:hover { background: rgba(255, 255, 255, 0.08); }

/* ── Formulario ─────────────────────────────────────────────────────── */

.sup-compose { margin-bottom: 8px; }

.sup-form {
  margin-top: 16px;
  padding: 20px;
  background: var(--sup-surface);
  border: 1px solid var(--sup-line);
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 1px 2px rgba(20, 18, 33, 0.05), 0 8px 24px rgba(20, 18, 33, 0.06);
  /* El único momento de movimiento de la pantalla. */
  animation: supReveal 260ms var(--sup-ease);
}

@keyframes supReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.sup-field { margin-bottom: 16px; }

.sup-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.86rem;
  font-weight: var(--fw-semi, 600);
  color: var(--text-primary);
}

.sup-input {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--bg-primary, #F8F8F6);
  border: 1px solid var(--sup-line);
  border-radius: var(--r-md, 12px);
  transition: border-color 150ms var(--sup-ease), background-color 150ms var(--sup-ease);
}

[data-theme="dark"] .sup-input { background: #141319; }

.sup-input::placeholder { color: var(--sup-muted); opacity: 1; }

.sup-input:focus {
  outline: none;
  border-color: var(--violet, #6C2BFF);
  background: var(--sup-surface);
}

/* Sin tirador: la altura la lleva js/utils/autogrow.js. Las dos rayitas de la
   esquina son un gesto de escritorio que en el teléfono nadie usa y que se ve
   como un remiendo justo en la caja donde más se mira. */
.sup-textarea {
  resize: none;
  overflow-y: hidden;
  min-height: 108px;
  line-height: 1.6;
}

/* La del hilo arranca en una sola línea y crece al escribir. */
.sup-reply .sup-textarea {
  min-height: 46px;
}

.sup-hint {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--sup-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sup-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.sup-error {
  margin: 0 0 4px;
  padding: 10px 14px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #9B1C1C;
  background: var(--red-light, #FEE2E2);
  border-radius: var(--r-md, 12px);
}

[data-theme="dark"] .sup-error { color: #FCA5A5; background: rgba(239, 68, 68, 0.14); }

.sup-ok {
  margin: 14px 0 0;
  padding: 12px 16px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #14532D;
  background: var(--green-light, #DCFCE7);
  border-radius: var(--r-md, 12px);
}

[data-theme="dark"] .sup-ok { color: #86EFAC; background: rgba(34, 197, 94, 0.14); }

/* ── Desvíos ────────────────────────────────────────────────────────── */
/* Fondo tenue y un icono, sin la barra de color a la izquierda: la jerarquía
   la da el fondo, no un borde de adorno. */

.sup-detour {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: rgba(108, 43, 255, 0.07);
  border-radius: var(--r-md, 12px);
}

[data-theme="dark"] .sup-detour { background: rgba(157, 134, 255, 0.12); }

.sup-detour-icon {
  flex: none;
  font-size: 22px;
  color: var(--violet, #6C2BFF);
}

[data-theme="dark"] .sup-detour-icon { color: #9D86FF; }

.sup-detour-title {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: var(--fw-bold, 700);
  color: var(--text-primary);
}

.sup-detour-text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--sup-muted);
}

.sup-detour-text a { color: var(--violet, #6C2BFF); font-weight: var(--fw-semi, 600); }

[data-theme="dark"] .sup-detour-text a { color: #9D86FF; }

/* ── Adjuntos ───────────────────────────────────────────────────────── */

.sup-attach {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sup-attach-name {
  font-size: 0.85rem;
  color: var(--sup-muted);
  overflow-wrap: anywhere;
}

.sup-attach-img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--sup-line);
}

.sup-attach-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 0.88rem;
  font-weight: var(--fw-semi, 600);
  color: var(--violet, #6C2BFF);
  text-decoration: none;
  text-underline-offset: 3px;
}

.sup-attach-link:hover { text-decoration: underline; }

[data-theme="dark"] .sup-attach-link { color: #9D86FF; }

.sup-attach-failed { font-size: 0.82rem; color: var(--sup-muted); }

/* ── Lista de tickets ───────────────────────────────────────────────── */

.sup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.sup-card {
  display: block;
  padding: 16px 18px;
  background: var(--sup-surface);
  border: 1px solid var(--sup-line);
  border-radius: var(--r-lg, 16px);
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms var(--sup-ease),
              box-shadow 160ms var(--sup-ease),
              transform 120ms var(--sup-ease);
}

@media (hover: hover) and (pointer: fine) {
  .sup-card:hover {
    border-color: var(--violet, #6C2BFF);
    box-shadow: 0 2px 4px rgba(20, 18, 33, 0.06), 0 10px 28px rgba(20, 18, 33, 0.09);
  }
}

.sup-card:active { transform: scale(0.99); }

.sup-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.sup-radicado {
  font-size: 0.78rem;
  font-weight: var(--fw-bold, 700);
  letter-spacing: 0.04em;
  color: var(--sup-muted);
  /* El radicado se lee y se compara dígito a dígito. */
  font-variant-numeric: tabular-nums;
}

.sup-card-subject {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: var(--fw-semi, 600);
  color: var(--text-primary);
  line-height: 1.4;
}

.sup-card-snippet {
  margin: 0 0 10px;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--sup-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sup-card-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--sup-muted);
}

.sup-card.is-unread { border-color: rgba(108, 43, 255, 0.45); }

.sup-dot {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--violet, #6C2BFF);
}

/* ── Píldoras de estado ─────────────────────────────────────────────── */

.sup-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-full, 999px);
  font-size: 0.74rem;
  font-weight: var(--fw-bold, 700);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sup-pill--open   { background: #FEF3C7; color: #854D0E; }
.sup-pill--review { background: rgba(108, 43, 255, 0.12); color: #4C1D95; }
.sup-pill--reply  { background: #DBEAFE; color: #1E3A8A; }
.sup-pill--done   { background: var(--green-light, #DCFCE7); color: #14532D; }
.sup-pill--muted  { background: #E8E6E2; color: #4B4945; }

[data-theme="dark"] .sup-pill--open   { background: rgba(245, 158, 11, 0.18); color: #FCD34D; }
[data-theme="dark"] .sup-pill--review { background: rgba(157, 134, 255, 0.18); color: #C4B5FD; }
[data-theme="dark"] .sup-pill--reply  { background: rgba(59, 130, 246, 0.18); color: #93C5FD; }
[data-theme="dark"] .sup-pill--done   { background: rgba(34, 197, 94, 0.16); color: #86EFAC; }
[data-theme="dark"] .sup-pill--muted  { background: rgba(255, 255, 255, 0.09); color: #C9C6D4; }

/* ── Hilo ───────────────────────────────────────────────────────────── */

.sup-thread-head { margin-bottom: 20px; }

/* ── La cabecera se aparta al bajar ─────────────────────────── */
/* Fija sobre el hilo, una burbuja alta asomaba por encima y por debajo de la
   tarjeta y se leía partida en dos. La cabecera hace falta para cerrar el
   ticket y para ver el estado, pero no mientras lees: se va cuando bajas y
   vuelve en cuanto subes, que es justo cuando la buscas.

   Sale por arriba y además se desvanece. Lo segundo no es adorno: en móvil
   está anclada a 64px y un `translateY` de su propio alto no la saca del todo
   de la pantalla. `pointer-events` a ninguno para que el botón de cerrar no
   siga siendo pulsable cuando no se ve.

   La curva y los tiempos, según skills/emil-design-eng: curva propia, nunca
   `ease-in`, y opacidad y transform —nunca alto—. Quien pida menos movimiento
   no ve nada de esto: el controlador ni siquiera la esconde. */

.sup-thread-head {
  transition: transform 220ms var(--sup-ease), opacity 150ms var(--sup-ease);
}

.sup-thread-head.is-apartada {
  transform: translateY(calc(-100% - 20px));
  opacity: 0;
  pointer-events: none;
}

.sup-thread-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sup-thread-date { font-size: 0.8rem; color: var(--sup-muted); }

.sup-thread {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.sup-msg {
  padding: 14px 16px;
  border-radius: var(--r-lg, 16px);
  max-width: 85%;
}

/* La diferencia entre quién habla se lleva por posición y superficie, no por
   un bloque de color saturado: es una conversación de soporte, no un chat. */
.sup-msg--yo {
  justify-self: end;
  background: rgba(108, 43, 255, 0.08);
  border: 1px solid rgba(108, 43, 255, 0.18);
}

.sup-msg--skora {
  justify-self: start;
  background: var(--sup-surface);
  border: 1px solid var(--sup-line);
}

[data-theme="dark"] .sup-msg--yo {
  background: rgba(157, 134, 255, 0.14);
  border-color: rgba(157, 134, 255, 0.26);
}

.sup-msg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.sup-msg-author {
  font-size: 0.82rem;
  font-weight: var(--fw-bold, 700);
  color: var(--text-primary);
}

.sup-msg-date {
  font-size: 0.74rem;
  color: var(--sup-muted);
  font-variant-numeric: tabular-nums;
}

.sup-msg-body {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.sup-msg-attach { margin-top: 10px; font-size: 0.84rem; color: var(--sup-muted); }

.sup-reply {
  padding: 18px;
  background: var(--sup-surface);
  border: 1px solid var(--sup-line);
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 1px 2px rgba(20, 18, 33, 0.05), 0 8px 24px rgba(20, 18, 33, 0.06);
}

.sup-reply .sup-attach { margin-top: 12px; }

.sup-closed-note {
  padding: 16px 18px;
  background: var(--bg-secondary, #ECEAE7);
  border-radius: var(--r-lg, 16px);
  font-size: 0.89rem;
  line-height: 1.6;
  color: var(--sup-muted);
}

[data-theme="dark"] .sup-closed-note { background: rgba(255, 255, 255, 0.05); }

.sup-closed-note p { margin: 0; }
.sup-closed-note a { color: var(--violet, #6C2BFF); font-weight: var(--fw-semi, 600); }

[data-theme="dark"] .sup-closed-note a { color: #9D86FF; }

/* ── Botón de bajar al final ────────────────────────────────────────── */
/* Uno solo para dos necesidades: volver abajo, y enterarse de que llegó algo
   mientras leías arriba (el punto). Dos piezas separadas para eso competían
   entre sí y dejaban sin salida a quien se había ido al principio del hilo.

   Movimiento según skills/emil-design-eng: curva propia y no las de CSS, nunca
   `ease-in`, y 180 ms — dentro de los 125-200 que la guía da para algo de este
   tamaño. Se anima opacidad y transform, nunca alto ni ancho. */

.sup-fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--m-bottomnav-h, 64px) + var(--sup-composer-h, 128px) + 12px);
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--sup-line);
  border-radius: var(--r-full, 999px);
  background: var(--sup-surface);
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 18, 33, 0.10), 0 10px 26px rgba(20, 18, 33, 0.16);

  /* Estado oculto. Sale de una escala ya casi completa: arrancar de 0 haría
     que pareciera que crece desde la nada en vez de acercarse. */
  opacity: 0;
  transform: scale(0.85) translateY(6px);
  pointer-events: none;
  transition: opacity 180ms var(--sup-ease),
              transform 180ms var(--sup-ease);
}

.sup-fab.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sup-fab .material-symbols-outlined { font-size: 24px; }

.sup-fab:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .sup-fab:hover { border-color: var(--violet, #6C2BFF); }
}

.sup-fab:focus-visible {
  outline: 2px solid var(--violet, #6C2BFF);
  outline-offset: 2px;
}

/* El punto dice «hay algo que no has visto». No lleva número: en un hilo de
   soporte el recuento no aporta nada y obliga a mantenerlo cuadrado. */
.sup-fab-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--violet, #6C2BFF);
  border: 2px solid var(--sup-surface);
}

@media (min-width: 769px) {
  /* No hay barra inferior, pero el redactor ahora flota (sticky) y taparía el
     botón. Se apoya en la misma medida que publica el observador del campo. */
  .sup-fab {
    bottom: calc(var(--sup-composer-h, 120px) + 28px);
    right: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sup-fab { transition: none; }
}

/* ── El hilo en escritorio ─────────────────────────────── */
/* Mismo problema que en el teléfono y misma respuesta, con otra herramienta.
   En una conversación larga la cabecera se iba hacia arriba —para cerrar el
   ticket había que volver al principio— y el redactor quedaba al final del
   documento, a un scroll entero de distancia.

   Aquí NO se usa `fixed` como en móvil. En el teléfono hay una barra inferior
   a la que anclarse y el redactor se descuenta del `padding-bottom` del hilo;
   en escritorio un redactor fijo taparía el último mensaje para siempre.
   `sticky` resuelve las dos cosas con una sola regla: flota mientras queda
   hilo por debajo y aterriza en su sitio real al llegar al final, así que
   nunca esconde nada.

   El scroll sigue siendo el del documento y no un panel con scroll propio: el
   controlador mide el final del hilo con el `scrollHeight` de la página
   (js/controllers/soporte_detalle.js, `estaAbajo`), y meter un contenedor con
   scroll interno lo dejaría midiendo el sitio equivocado. */

@media (min-width: 769px) {

  .sup-page--hilo .sup-thread-head {
    position: sticky;
    /* Sin barra superior en escritorio: un poco de aire para que se vea que
       la tarjeta flota y que el hilo pasa por debajo. */
    top: 12px;
    z-index: 30;
    margin: 0 0 20px;
    padding: 14px 18px;
    background: var(--sup-surface);
    border: 1px solid var(--sup-line);
    border-radius: var(--r-lg, 16px);
    box-shadow: 0 2px 6px rgba(20, 18, 33, 0.07), 0 10px 24px rgba(20, 18, 33, 0.10);

    /* El botón de cerrar es hermano de la fila de metadatos, no hijo: hace
       falta rejilla para que comparta renglón con el título. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 6px;
  }

  [data-theme="dark"] .sup-page--hilo .sup-thread-head {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 10px 24px rgba(0, 0, 0, 0.42);
  }

  .sup-page--hilo .sup-thread-head .settings-page-title { grid-column: 1; }
  .sup-page--hilo .sup-thread-head .sup-close-ticket    { grid-column: 2; grid-row: 1; }
  .sup-page--hilo .sup-thread-head .sup-thread-meta     { grid-column: 1 / -1; }

  /* 1.8rem era el tamaño de un título de página; en una tarjeta fija de dos
     renglones se come la conversación. El asunto se recorta y completo sigue
     estando en el `title`. */
  .sup-page--hilo .sup-thread-head .settings-page-title {
    margin: 0;
    font-size: 1.22rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Botón de verdad, no un enlace subrayado suelto: está dentro de una tarjeta
     y tiene que leerse como acción. Discreto porque cerrar el ticket no es lo
     que la mayoría viene a hacer. */
  .sup-page--hilo .sup-close-ticket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    margin: 0;
    padding: 0 14px;
    border-radius: var(--r-full, 999px);
    background: var(--bg-secondary, #ECEAE7);
    color: var(--sup-muted);
    font-size: 0.83rem;
    font-weight: var(--fw-semi, 600);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms var(--sup-ease), color 150ms var(--sup-ease);
  }

  [data-theme="dark"] .sup-page--hilo .sup-close-ticket {
    background: rgba(255, 255, 255, 0.07);
  }

  .sup-page--hilo .sup-close-ticket:active { transform: scale(0.97); }

  /* En el botón redondo de móvil el texto largo sobra; aquí es al revés. */
  .sup-page--hilo .sup-close-largo { display: inline; }
  .sup-page--hilo .sup-close-icono { display: none; }
  /* Con la etiqueta larga a la vista, el texto para lectores de pantalla
     sobra: si no, se lee dos veces la misma accion. */
  .sup-page--hilo .sup-solo-lectores { display: none; }

  /* Un renglón de 1.500px no se lee: el ojo pierde el principio de la línea
     siguiente. Las burbujas se topan, aunque la columna siga siendo ancha. */
  .sup-page--hilo .sup-msg { max-width: min(85%, 620px); }

  /* Sitio para que el redactor flote sobre algo y el último mensaje no quede
     pegado a él al aterrizar. */
  .sup-page--hilo .sup-thread { margin-bottom: 16px; }

  .sup-page--hilo .sup-reply,
  .sup-page--hilo .sup-closed-note {
    position: sticky;
    bottom: 16px;
    z-index: 35;
  }

  /* Flotando sobre el hilo necesita separarse del fondo más que cuando era un
     bloque más del documento. */
  .sup-page--hilo .sup-reply {
    box-shadow: 0 2px 6px rgba(20, 18, 33, 0.07), 0 12px 32px rgba(20, 18, 33, 0.12);
  }

  [data-theme="dark"] .sup-page--hilo .sup-reply {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32), 0 12px 32px rgba(0, 0, 0, 0.45);
  }

  .sup-page--hilo .sup-closed-note {
    background: var(--sup-surface);
    border: 1px solid var(--sup-line);
    box-shadow: 0 2px 6px rgba(20, 18, 33, 0.07), 0 12px 32px rgba(20, 18, 33, 0.12);
  }

  [data-theme="dark"] .sup-page--hilo .sup-closed-note {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32), 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .sup-page--hilo .sup-close-ticket:hover {
    background: rgba(108, 43, 255, 0.10);
    color: var(--violet, #6C2BFF);
  }
  [data-theme="dark"] .sup-page--hilo .sup-close-ticket:hover {
    background: rgba(157, 134, 255, 0.16);
    color: #C4B5FD;
  }
}

/* ── Vacío y error ──────────────────────────────────────────────────── */

.sup-empty {
  padding: 40px 24px;
  text-align: center;
  background: var(--sup-surface);
  border: 1px dashed var(--sup-line);
  border-radius: var(--r-lg, 16px);
}

.sup-empty-icon { font-size: 40px; color: var(--sup-muted); }

.sup-empty-title {
  margin: 12px 0 6px;
  font-size: 1rem;
  font-weight: var(--fw-bold, 700);
  color: var(--text-primary);
}

.sup-empty-text {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--sup-muted);
}

.sup-empty--error .sup-btn { margin-top: 16px; }

/* ── Esqueletos ─────────────────────────────────────────────────────── */
/* Esqueleto y no un spinner en medio del contenido: la altura ya está
   reservada, así que la lista no salta cuando llegan los datos. */

.sup-skeleton { display: grid; gap: 12px; }

.sup-skel-card,
.sup-skel-msg {
  border-radius: var(--r-lg, 16px);
  background: linear-gradient(90deg,
    var(--bg-secondary, #ECEAE7) 25%,
    rgba(255, 255, 255, 0.55) 50%,
    var(--bg-secondary, #ECEAE7) 75%);
  background-size: 200% 100%;
  animation: supShimmer 1.4s ease-in-out infinite;
}

.sup-skel-card { height: 118px; }
.sup-skel-msg  { height: 92px; }

[data-theme="dark"] .sup-skel-card,
[data-theme="dark"] .sup-skel-msg {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.11) 50%,
    rgba(255, 255, 255, 0.05) 75%);
  background-size: 200% 100%;
}

@keyframes supShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */

.profile-layout--single { grid-template-columns: 1fr; }

@media (max-width: 768px) {

  /* En móvil la barra superior ya pinta la flecha de volver (el mapa
     SUBPAGE_TOPBAR de js/utils/topbar.js). Dejar también el enlace de la página
     daría dos «volver» pegados, que es peor que ninguno: el usuario no sabe
     cuál de los dos lo saca de dónde. En escritorio no hay barra superior, así
     que ahí el enlace sigue siendo el único camino de vuelta. */
  .sup-back { display: none; }

  /* ── Cabecera fija ────────────────────────────────────────────────────
     En una conversación larga la cabecera se iba hacia arriba y para cerrar el
     ticket había que recorrer el hilo entero de vuelta. Ahora se queda pegada
     bajo la barra de la app (fija, 56px) con lo único que hace falta mientras
     lees: de qué va, en qué estado está y cómo cerrarlo.

     El radicado y la fecha de apertura NO están aquí a propósito: se consultan
     una vez, y cada píxel de cabecera es un píxel menos de conversación. Siguen
     arriba del todo, en el primer scroll. */

  .sup-thread-head {
    position: sticky;
    /* Un pelo por debajo de la barra de la app (fija, 56px) para que se vea
       que flota y no que está soldada a ella. */
    top: 64px;
    z-index: 30;
    margin: 0 0 14px;
    padding: 11px 14px;
    background: var(--sup-surface);
    /* Mismo radio que las burbujas: es el mismo idioma, no un elemento ajeno. */
    border-radius: var(--r-lg, 16px);
    border: 1px solid var(--sup-line);
    /* Desplazamiento Y difuminado. Un halo sin desplazamiento es decoración;
       esto dice que el hilo pasa por debajo. */
    box-shadow: 0 2px 6px rgba(20, 18, 33, 0.07), 0 10px 24px rgba(20, 18, 33, 0.10);

    /* El botón es hermano de la fila de metadatos, no hijo: hace falta rejilla
       para que el título y el botón compartan renglón. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
  }

  [data-theme="dark"] .sup-thread-head {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 10px 24px rgba(0, 0, 0, 0.42);
  }

  .sup-thread-head .settings-page-title { grid-column: 1; }
  .sup-thread-head .sup-close-ticket    { grid-column: 2; grid-row: 1; }
  .sup-thread-head .sup-thread-meta     { grid-column: 1 / -1; min-width: 0; }

  /* Botón redondo, del tamaño de las píldoras que ya hay en la pantalla. */
  .sup-close-ticket {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: 0;
    padding: 0;
    border-radius: var(--r-full, 999px);
    background: var(--bg-primary, #F8F8F6);
    color: var(--sup-muted);
    text-decoration: none;
    transition: background-color 150ms var(--sup-ease), color 150ms var(--sup-ease);
  }

  [data-theme="dark"] .sup-close-ticket { background: rgba(255, 255, 255, 0.06); }

  /* El círculo se ve de 34px pero se pulsa en 44: el mínimo táctil se cumple
     agrandando el área, no el dibujo. Un botón de 44 visibles aquí pesaría
     demasiado al lado del título. */
  .sup-close-ticket { position: relative; }

  .sup-close-ticket::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .sup-close-ticket:active { transform: scale(0.94); }

  .sup-close-largo { display: none; }
  .sup-close-icono { display: block; font-size: 19px; }

  [data-theme="dark"] .sup-thread-head { background: var(--bg-primary, #121218); }

  /* El asunto se recorta: en una barra fija, un título de tres renglones se
     come la pantalla. Completo sigue estando en el atributo title. */
  .sup-thread-head .settings-page-title {
    font-size: 0.97rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sup-thread-meta { gap: 8px; }
  .sup-thread-date { display: none; }
  .sup-radicado { font-size: 0.7rem; }

  .sup-close-ticket {
    margin-top: 0;
    font-size: 0.78rem;
  }

  .sup-close-largo { display: none; }
  .sup-close-corto { display: inline; }

  /* ── El hilo, en móvil, se lee como conversación ──────────────────────
     Antes eran tarjetas casi a todo lo ancho con la fecha completa dentro
     («21 de septiembre de 2026 a las 10:14 p. m.»): dos renglones de reloj por
     mensaje y ninguna pista de quién hablaba. Parecía un formulario de
     escritorio apretado en un teléfono.

     Se toma la ERGONOMÍA del chat (burbujas que se ajustan al texto, lados
     claros, redactor anclado abajo) y NO su disfraz. Nada de verde ni de
     colitas: esto es un PQR con radicado y estado, y el radicado y la píldora
     siguen arriba porque son lo que lo hace un canal legal y no una
     conversación cualquiera. */

  .sup-thread {
    gap: 8px;
    margin-bottom: 0;
  }

  .sup-msg {
    max-width: 82%;
    padding: 10px 13px;
    /* La esquina del lado de quien habla se cierra: es lo que hace que el
       grupo se lea como un turno sin necesidad de dibujar una colita. */
    border-radius: 16px;
  }

  .sup-msg--yo    { border-bottom-right-radius: 5px; }
  .sup-msg--skora { border-bottom-left-radius: 5px; }

  .sup-msg-head { margin-bottom: 3px; gap: 8px; }
  .sup-msg-author { font-size: 0.75rem; }
  .sup-msg-date { font-size: 0.68rem; }
  .sup-msg-body { font-size: 0.92rem; line-height: 1.5; }

  /* Sitio para el redactor anclado y para la barra inferior de navegación.
     Sin esto, el último mensaje queda tapado y parece que el hilo se corta. */
  #sup-thread {
    padding-bottom: 12px;
  }

  .sup-page .profile-main {
    padding-bottom: calc(var(--m-bottomnav-h, 64px) + 168px);
  }

  /* ── Redactor anclado ─────────────────────────────────────────────────
     Estaba al final del flujo: para escribir había que recorrer el hilo
     entero. En un chat el campo está siempre donde el pulgar lo espera.

     Va sobre la barra de navegación, no en su lugar: quitar la navegación en
     una sub-pantalla deja al usuario sin salida, y el teclado tapa las dos
     igual cuando se abre. */
  .sup-reply {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--m-bottomnav-h, 64px);
    z-index: 40;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -6px 20px rgba(20, 18, 33, 0.10);
  }

  [data-theme="dark"] .sup-reply {
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
  }

  /* La etiqueta «Responder» sobra cuando el campo está anclado: el marcador de
     posición ya dice qué hacer y cada renglón cuenta. */
  .sup-reply > .sup-label { display: none; }

  .sup-reply .sup-textarea {
    min-height: 44px;
    padding: 11px 16px;
    border-radius: 22px;
  }

  /* Adjuntar y Enviar en una fila con el campo, como en cualquier chat. */
  .sup-reply .sup-attach {
    margin-top: 8px;
    justify-content: space-between;
  }

  .sup-reply .sup-compose-row { margin-top: 8px; }
  .sup-reply .sup-compose-row .sup-btn--primary { min-width: 104px; }

  /* El botón de cerrar sube con la cabecera; en el hilo anclado estorbaría. */
  .sup-close-ticket { margin-top: 8px; font-size: 0.8rem; }

  .sup-closed-note {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--m-bottomnav-h, 64px);
    z-index: 40;
    border-radius: 0;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .sup-form { padding: 16px; }

  .sup-msg { max-width: 94%; }

  /* En móvil los dos botones ocupan la fila completa: el pulgar no persigue
     objetivos pequeños en una esquina. */
  .sup-form-actions { flex-direction: column-reverse; }
  .sup-form-actions .sup-btn { width: 100%; }

  .sup-compose > .sup-btn--primary { width: 100%; }
}

/* ── Movimiento reducido ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sup-page *,
  .sup-page *::before,
  .sup-page *::after {
    animation: none !important;
    transition: none !important;
  }
}