/* Consola · Reclamos: estilos propios de la pantalla. Solo tokens; clases con prefijo .cons-reclamos-
   La conversación, la prioridad y el indicador de plazo vienen de paginas/reclamos.css (las mismas piezas que ve
   el operador). Acá solo va lo que cambia en la consola. */

/* ---------- Filtros: chips de estado + operador, prioridad y "vence pronto" ---------- */
.cons-reclamos-filtros { display: flex; flex-direction: column; align-items: stretch; gap: var(--e-3); margin-bottom: var(--e-4); }
.cons-reclamos-filtros .filtros { margin-bottom: 0; }
.cons-reclamos-filtros__resto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); min-width: 0; }
.cons-reclamos-filtro { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.cons-reclamos-filtro .campo__etiqueta { margin: 0; font-size: var(--t-13); color: var(--texto-2); white-space: nowrap; }
.cons-reclamos-filtro .select { width: 220px; max-width: 100%; }
.cons-reclamos-filtro-vence { min-height: 40px; align-items: center; white-space: nowrap; }

/* ---------- Tabla ---------- */
.cons-reclamos-tabla td.cons-reclamos-asunto { white-space: normal; min-width: 200px; max-width: 240px; }
.cons-reclamos-tabla td.cons-reclamos-asunto .celda-principal { font-weight: 600; line-height: 1.4; }
.cons-reclamos-tabla td.cons-reclamos-rel { white-space: normal; }
.cons-reclamos-tabla td.cons-reclamos-rel > * { display: block; }
.cons-reclamos-buscar { font-size: var(--t-12); font-weight: 500; color: var(--primario-texto); white-space: nowrap; }
.cons-reclamos-tabla td[data-etiqueta="Estado"] { white-space: normal; max-width: 150px; }
.cons-reclamos-tabla td[data-etiqueta="Estado"] .celda-sub { line-height: 1.35; margin-top: 4px; }
.cons-reclamos-tabla .rec-sla { min-width: 150px; }
.cons-reclamos-tabla .persona__nombre { font-weight: 500; white-space: nowrap; }
.cons-reclamos-factura { font-weight: 500; color: var(--primario-texto); text-decoration: none; }
.cons-reclamos-factura:hover { text-decoration: underline; }
/* El plazo que vence se lee en ámbar con su texto (no solo la barrita) */
.cons-reclamos-tabla .rec-sla--riesgo .rec-sla__valor,
.rec-resumen .rec-sla--riesgo .rec-sla__valor { color: var(--alerta); }
.rec-sla__nota .ico { flex: none; }
.cons-reclamos-vacio { border-top: 1px solid var(--borde); }

/* ---------- Drawer ---------- */
.cons-reclamos-operador { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-12); font-weight: 600; color: var(--texto-2); }
.cons-reclamos-operador .ico { color: var(--texto-3); }

/* En la consola los mensajes propios son los del equipo de la plataforma: van a la derecha con el isotipo */
.rec-msj--propio > .rec-avatar-soporte { grid-column: 2; grid-row: 1; }
.cons-reclamos-firma { display: flex; align-items: center; gap: 4px; margin-top: var(--e-2); padding-top: var(--e-2); border-top: 1px dashed color-mix(in srgb, var(--primario) 30%, transparent); font-size: var(--t-12); color: var(--texto-2); }
.cons-reclamos-firma .ico { flex: none; color: var(--texto-3); }
.cons-reclamos-adjunto-nuevo { margin-top: var(--e-2); }

/* Lo atiende: desplegable + Asignarme */
.cons-reclamos-atiende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e-2); }
.cons-reclamos-atiende .desplegable__item[disabled] { color: var(--texto-3); cursor: not-allowed; }

/* Botón "Cambiar estado": texto corto en celular */
.cons-reclamos-solo-movil { display: none; }

/* ---------- Modal de estado ---------- */
.cons-reclamos-estados { display: grid; gap: var(--e-2); }
.cons-reclamos-estados .opcion-tarjeta { align-items: flex-start; }
.cons-reclamos-estados .opcion-tarjeta:has(input:disabled) { opacity: 0.7; cursor: not-allowed; }
.cons-reclamos-actual { display: inline-block; margin-left: 4px; font-size: var(--t-12); font-weight: 600; color: var(--texto-2); }
.cons-reclamos-actual[hidden] { display: none; }
.cons-reclamos-campo-check { align-self: end; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .cons-reclamos-filtros__resto { flex-basis: 100%; }
}

@media (max-width: 767px) {
  .cons-reclamos-filtros > .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + 32px); margin: 0 -16px; padding: 2px 16px; }
  .cons-reclamos-filtros > .filtros::-webkit-scrollbar { display: none; }
  .cons-reclamos-filtro { flex: 1 1 calc(50% - var(--e-3)); flex-direction: column; align-items: stretch; gap: 4px; }
  .cons-reclamos-filtro .select { width: auto; }
  .cons-reclamos-filtro .campo__etiqueta { font-size: var(--t-12); }
  .cons-reclamos-tabla td[data-etiqueta="Estado"] { max-width: none; }
  .cons-reclamos-tabla td.cons-reclamos-rel > * { text-align: right; }
  .cons-reclamos-filtro-vence { flex: 1 1 100%; }
  .rec-msj--propio { padding-left: 0; }
  .cons-reclamos-solo-movil { display: inline; }
  .rec-responder .campo__ayuda { font-size: var(--t-12); }
}

@media (max-width: 640px) {
  .cons-reclamos-lista.tarjeta { background: transparent; border: 0; box-shadow: none; }
  .cons-reclamos-lista .paginacion { background: transparent; border-top: 0; padding-left: 0; padding-right: 0; }
  .cons-reclamos-lista .cons-reclamos-vacio { border: 1px solid var(--borde); border-radius: var(--radio-3); background: var(--superficie); }
  .cons-reclamos-tabla td.cons-reclamos-asunto,
  .cons-reclamos-tabla td.cons-reclamos-rel { max-width: none; min-width: 0; }
  .cons-reclamos-tabla td.cons-reclamos-asunto > span,
  .cons-reclamos-tabla td.cons-reclamos-rel > * { text-align: right; }
  .cons-reclamos-tabla .rec-sla { justify-items: end; text-align: right; min-width: 0; width: min(200px, 100%); }
  .cons-reclamos-tabla .rec-sla__pista { width: 100%; }
}

@media (pointer: coarse) {
  .cons-reclamos-atiende .btn { min-height: 44px; }
  .cons-reclamos-filtro-vence { min-height: 44px; }
}

/* Modal "Abrir reclamo": los campos de una misma fila arrancan alineados arriba */
#form-abrir .form-grilla { align-items: start; }
#form-abrir .campo { align-content: start; }