/* ═══ Reclamos (R-42) ═══════════════════════════════════════════════════
   Pestañas "Nuevo reclamo" / "Mis reclamos", formulario con capturas y el
   hilo de cada reclamo. Colores por la regla de la rareza: naranja = tenés
   una respuesta sin leer (lo tuyo pendiente), verde = resuelto, azul =
   la voz del staff. Mobile-first. */

.tickets-tabs { margin-top: var(--space-lg); }
.tickets-tabs__badge { margin-left: var(--space-2xs); }
.tickets-notice { margin-bottom: var(--space-md); }

/* ── Capturas: zona para elegir o arrastrar ───────────────────────── */
/* El <input type="file"> queda oculto a la vista pero enfocable: su <label>
   es la zona que se toca, y muestra el foco del input */
.ticket-upload {
  display: grid;
  gap: var(--space-2xs);
  min-height: var(--touch-target);
  padding: var(--space-md);
  border: 1px dashed var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  text-align: center;
  cursor: pointer;
}
.ticket-upload:hover,
.ticket-upload[data-drag-over] { border-color: var(--color-data); }
.ticket-upload__input:focus-visible + .ticket-upload {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}
.ticket-upload__input:disabled + .ticket-upload {
  opacity: var(--opacity-disabled-control);
  cursor: not-allowed;
}
.ticket-upload__title {
  color: var(--color-data);
  font-weight: var(--font-weight-bold);
}
.ticket-upload__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
/* En la caja de comentario: un botón chico en vez de la zona grande */
.ticket-upload--compact {
  justify-self: start;
  align-items: center;
  padding: 0 var(--space-md);
}

.ticket-previews {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.ticket-previews__item { position: relative; }
.ticket-previews__image {
  width: var(--ticket-preview-size);
  height: var(--ticket-preview-size);
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.ticket-previews__remove {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-backdrop);
  border-radius: var(--radius-sm);
}

/* ── Mis reclamos ─────────────────────────────────────────────────── */
.tickets-list {
  display: grid;
  gap: var(--space-xs);
}
.tickets-list > .card { display: grid; gap: var(--space-xs); }

.ticket-card {
  display: grid;
  gap: var(--space-xs);
  width: 100%;
  color: var(--color-text);
  text-align: left;
}
.ticket-card:hover { border-color: var(--color-border-strong); }
/* Tiene una respuesta del staff que todavía no leíste */
.ticket-card--unread { border-left: var(--accent-border-width) solid var(--color-attention); }
.ticket-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}
.ticket-card__number {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-none);
}
.ticket-card__excerpt {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.ticket-card__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ── Hilo ─────────────────────────────────────────────────────────── */
.tickets-detail__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0;
  border: 0;
  background: none;
}
.tickets-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.tickets-thread {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.ticket-message { display: grid; gap: var(--space-xs); }
/* La respuesta del staff: acento azul, la voz oficial */
.ticket-message--staff { border-left: var(--accent-border-width) solid var(--color-data); }
.ticket-message__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.ticket-message__author {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}
/* El texto del jugador conserva sus saltos de línea */
.ticket-message__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ticket-message__images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.ticket-message__image-link { display: block; border-radius: var(--radius-sm); }
.ticket-message__image {
  width: var(--ticket-image-size);
  height: var(--ticket-image-size);
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.tickets-reply {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}