/* Panel de Cheese: rediseño «Estado de un vistazo» (propuestas/panel-v2.css), con los datos reales.
   - Una sola pieza atrevida: la claqueta del resumen. Abierta, con el palo inclinado, mientras el chat
     espera a una persona; cerrada cuando alguien lo toma. Desde ahí el resumen queda fijo bajo el
     nombre y «Ver» lo despliega ahí mismo.
   - Rojo señal solo para lo urgente: «Te necesita», el botón principal, el globo de pendientes y los errores.
     Finalizar no lleva rojo.
   - Crema destello para lo tuyo: «Contigo», tus mensajes, enviar y el foco.
   - Menos líneas: sin fichas, eventos sin píldora y un borde suave solo en lo que manda Cheese.
   Celular primero; desde 960 px, las opciones van en una barra a la izquierda.
   Sin fuentes externas: system-ui para el texto y Bahnschrift para la marca y los títulos. */

:root {
  color-scheme: dark;
  --ink: #0a0707;
  --panel: #120e0e;
  --raise: #1b1515;
  --ash: #f2ece6;
  --smoke: #9a918c;
  --line: rgba(242, 236, 230, 0.12);
  --line-strong: rgba(242, 236, 230, 0.24);
  --fill: rgba(242, 236, 230, 0.1);
  --signal: #ff2a1a;
  --signal-hover: #ff4433;
  --signal-wash: rgba(255, 42, 26, 0.16);
  --flare: #ffe6c2;
  --flare-wash: rgba(255, 230, 194, 0.1);
  --flare-edge: rgba(255, 230, 194, 0.3);

  --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: Bahnschrift, "DIN Alternate", "Arial Narrow", system-ui, sans-serif;
  --banner: 34px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink);
  color: var(--ash);
  font: 16px/1.45 var(--text);
  -webkit-font-smoothing: antialiased;
}

button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--flare); outline-offset: 2px; }

.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;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Lo que lleva texto solo para el lector de pantalla queda posicionado: así ese texto no se sale de su sitio */
.msg, .pend__abrir, .fijado__boton, .nav__item { position: relative; }
.icon { flex: none; display: block; }

/* Franja de fallas: solo aparece si algo falla (la conexión, WhatsApp o la IA) */
.red { flex: none; }
.banner {
  margin: 0;
  min-height: var(--banner);
  display: flex; align-items: center; justify-content: center;
  padding: 6px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  color: var(--smoke);
  font-size: 13px;
  text-align: center;
}

/* ---------- Entrar y cambiar la contraseña temporal ---------- */

.acceso { flex: 1; overflow-y: auto; display: grid; place-items: center; padding: 40px 24px 56px; }
.acceso__caja { width: min(100%, 24rem); }
.acceso__marca { margin: 0; }
.acceso__marca .marca__logo { font-size: 44px; }
.acceso__sub { margin: 10px 0 34px; color: var(--smoke); font-size: 17px; font-weight: 400; }
.acceso__titulo { margin: 18px 0 8px; font-family: var(--display); font-stretch: 85%; font-size: 24px; font-weight: 600; line-height: 1.2; }
.acceso__texto { margin: 0 0 26px; color: var(--smoke); font-size: 15px; }

.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { color: var(--smoke); font-size: 14px; }
.field__help { margin: 0; color: var(--smoke); font-size: 13px; }
.input {
  width: 100%; min-height: 52px; padding: 0 14px;
  border-radius: 14px; border: 1px solid var(--line-strong); background: var(--panel);
  font-size: 16px;
}
.input-clave { position: relative; }
.input-clave .input { padding-right: 56px; }
.ver {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--smoke);
}
.ver:hover { color: var(--ash); }
.aviso { margin: -4px 0 18px; padding: 10px 12px; border-radius: 12px; background: var(--signal-wash); font-size: 14px; }
.aviso--info { background: var(--raise); }
.aviso--ok { background: var(--flare-wash); color: var(--flare); }
.nota { margin: 18px 0 0; color: var(--smoke); font-size: 14px; text-align: center; }

/* ---------- Botones ---------- */

.btn {
  min-height: 52px; padding: 0 22px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid transparent; background: transparent; color: var(--ash);
  font-weight: 600; font-size: 16px; line-height: 1.2; white-space: nowrap;
}
.btn--principal { background: var(--signal); color: var(--ink); }
.btn--principal:hover { background: var(--signal-hover); }
.btn--secundario { border-color: var(--line-strong); }
.btn--secundario:hover { background: var(--raise); }
/* Discreto: texto humo y sin borde. Para Finalizar, que no es urgente y no le llega al cliente */
.btn--suave { color: var(--smoke); font-weight: 500; }
.btn--suave:hover { color: var(--ash); background: var(--raise); }
.btn--chico { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; gap: 8px; }
.btn--ancho { width: 100%; }
.btn--ancho + .btn--ancho { margin-top: 8px; }
.btn--peligro { background: var(--signal); color: var(--ink); }
.btn--peligro:hover { background: var(--signal-hover); }
.btn:disabled { opacity: 0.6; cursor: progress; }

/* ---------- Armazón ---------- */

.panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.contenido { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }

/* Celular: la marca arriba y las opciones abajo */
.cima {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px 0;
}
.marca { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.marca__logo {
  font-family: var(--display); font-stretch: 80%; font-weight: 700;
  font-size: 26px; line-height: 1; letter-spacing: -0.01em;
}
.marca__nombre { color: var(--smoke); font-size: 15px; }
.agente { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--smoke); font-size: 14px; }
.agente .icon { color: var(--ash); }
/* El agente sin IA: la chispa en rojo */
.agente--off .icon { color: var(--signal); }

.abajo {
  flex: none; display: flex;
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--panel);
}
/* Cada opción toma el ancho de su nombre y se reparte el resto:
   «Conversaciones» cabe entero hasta en un celular de 320 px */
.tab {
  position: relative; flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 4px 6px;
  display: grid; justify-items: center; align-content: center; gap: 4px;
  border-radius: 12px; color: var(--smoke); font-size: 12px; line-height: 1.2; white-space: nowrap;
}
.tab:hover { color: var(--ash); }
.tab:focus-visible { outline-offset: -2px; }
.tab[aria-current="page"] { color: var(--ash); font-weight: 600; }
.tab[aria-current="page"] .icon { color: var(--flare); }
.tab__texto { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tab .globo { position: absolute; top: 1px; left: calc(50% + 3px); box-shadow: 0 0 0 2px var(--panel); }

/* Globo de pendientes: el único número en rojo */
.globo {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: inline-grid; place-items: center;
  background: var(--signal); color: var(--ink);
  font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}

/* «Mi cuenta» con la inicial de quien entró */
.inicial {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fill); color: var(--ash);
  font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: 13px; line-height: 1;
}
[aria-current="page"] > .inicial { background: var(--flare); color: var(--ink); }

/* Barra de opciones a la izquierda (solo computador, ver abajo) */
.nav { display: none; }
.nav__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nav__item {
  min-height: 48px; padding: 0 12px;
  display: flex; align-items: center; gap: 12px;
  border-radius: 12px; color: var(--smoke); font-size: 15px;
}
.nav__item:hover { color: var(--ash); }
.nav__item[aria-current="page"] { color: var(--ash); background: var(--raise); font-weight: 600; }
.nav__item[aria-current="page"] .icon { color: var(--flare); }
.nav__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__item .globo { margin-left: auto; }
.nav__pie { margin-top: auto; display: grid; gap: 8px; }
.nav__pie .agente { padding: 0 12px 4px; }

/* Equipo y Mi cuenta: una sola columna */
.page { flex: 1; min-height: 0; overflow-y: auto; }
.page__in { width: min(100%, 40rem); margin: 0 auto; padding: 16px 16px 40px; }
.page__head { margin-bottom: 20px; }
.page__in > .btn .icon { margin-right: -2px; }

.titulo { margin: 0; font-family: var(--display); font-stretch: 85%; font-weight: 600; font-size: 26px; line-height: 1.15; }
.subtitulo { margin: 4px 0 0; color: var(--smoke); font-size: 15px; }
.titulo-chico { margin: 0 0 16px; font-family: var(--display); font-stretch: 85%; font-size: 19px; font-weight: 600; }

/* Una sola vista en celular; lista y chat lado a lado desde 960 px */
.app { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.lista, .hilo { min-height: 0; min-width: 0; flex-direction: column; }
.lista { display: flex; background: var(--ink); }
.hilo { display: none; }
.app[data-view="thread"] .lista { display: none; }
.app[data-view="thread"] .hilo { display: flex; }

.empty { flex: 1; display: grid; place-items: center; margin: 0; padding: 24px; color: var(--smoke); text-align: center; }

/* ---------- Lista ---------- */

.lista__cabeza { flex: none; padding: 16px 16px 6px; }

/* Filtros: pestañas con su número, en una fila. Si no caben, bajan a otro renglón en vez de cortarse */
.filtros {
  flex: none; display: flex; flex-wrap: wrap; justify-content: space-between;
  padding: 4px 10px 0; border-bottom: 1px solid var(--line);
}
.filtro {
  position: relative; flex: none; min-height: 44px; padding: 0 6px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; color: var(--smoke); font-size: 14px; white-space: nowrap;
}
.filtro:hover { color: var(--ash); }
.filtro[aria-pressed="true"] { color: var(--ash); font-weight: 600; }
.filtro[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--ash);
}
.filtro__n { color: var(--smoke); font-weight: 400; font-variant-numeric: tabular-nums; }
.filtro__n--tuya { color: var(--flare); }
/* Celulares: un poco más juntos para que sigan en una fila aun con números de dos cifras.
   Por debajo de 390 px (360, 375) la letra baja un punto; en 320, además, se acercan al borde. */
@media (max-width: 419.98px) {
  .filtro { padding: 0 4px; gap: 4px; }
  .filtro[aria-pressed="true"]::after { left: 4px; right: 4px; }
}
@media (max-width: 389.98px) {
  .filtro { font-size: 13px; }
}
@media (max-width: 359.98px) {
  .filtros { padding: 4px 6px 0; }
}

.filas { list-style: none; margin: 0; padding: 8px 6px 24px; flex: 1; min-height: 0; overflow-y: auto; }
.filas > li + li { margin-top: 2px; }
.filas > .pend + .pend { margin-top: 8px; }
/* Lo finalizado queda aparte, al final */
.filas > .filas__fin { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* Fila de Conversaciones: como un chat de WhatsApp, con el estado en palabras */
.fila {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  padding: 13px 14px 14px; border: 0; border-radius: 16px; background: transparent; text-align: left;
}
.fila:hover { background: var(--panel); }
.fila[aria-current="true"] { background: var(--raise); }
.fila__arriba { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fila__nombre { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__hora { flex: none; color: var(--smoke); font-size: 13px; }
.fila__previa { color: var(--smoke); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__meta { min-width: 0; margin-top: 5px; display: flex; align-items: center; gap: 14px; font-size: 13px; }
/* Si no cabe todo, el servicio se recorta hasta unas letras y después cede el nombre de quien tiene el chat */
.fila__servicio { flex: 1 1 0; min-width: 4.5em; color: var(--smoke); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila--fin .fila__nombre { color: var(--smoke); font-weight: 500; }
.fila--fin .fila__meta { margin-top: 2px; }

/* Estado: una marca pequeña y la palabra. De más a menos urgente: lleno, aro, chispa, visto */
.estado { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.estado__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.estado__marca { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.estado--necesita { color: var(--signal); }
.estado--necesita .estado__marca { background: var(--signal); }
.estado--contigo { color: var(--flare); }
.estado--contigo .estado__marca { background: var(--flare); }
.estado--otra { color: var(--ash); }
.estado--otra .estado__marca { border: 1.5px solid currentColor; }
.estado--agente, .estado--fin { color: var(--smoke); font-weight: 500; }

/* Pendientes: la cola. El que más espera, arriba; «Tomar» a un toque */
.pend { border-radius: 16px; }
.pend:not(.pend--abierta):hover { background: var(--panel); }
.pend--abierta { background: var(--raise); }
.pend__abrir {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px;
  padding: 16px 16px 6px; border: 0; border-radius: 16px 16px 0 0; background: transparent; text-align: left;
}
.pend__arriba { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.pend__nombre { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pend__espera { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.pend__espera .icon { color: var(--smoke); }
.pend__motivo { font-size: 15px; }
.pend__previa { color: var(--smoke); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pend__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 16px 14px; }
.pend__servicio { min-width: 0; color: var(--smoke); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Conversación ---------- */

.hilo { position: relative; background: var(--panel); }
.hilo__cabeza {
  flex: none; display: flex; align-items: center; gap: 6px;
  min-height: 64px; padding: 8px 4px; border-bottom: 1px solid var(--line);
}
.atras, .mas {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--ash);
}
.atras:hover, .mas:hover, .mas[aria-expanded="true"] { background: var(--raise); }
.quien { flex: 1; min-width: 0; padding-right: 8px; }
.quien__linea { display: flex; align-items: center; gap: 8px; }
.quien__editar { flex: none; min-height: 32px; padding: 4px; border: 0; border-radius: 4px; background: transparent; color: var(--ash); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.quien__editar:hover { color: var(--flare); }
.contacto__telefono { display: block; margin: 0; color: var(--smoke); font-size: 13px; font-variant-numeric: tabular-nums; }
.quien__nombre {
  margin: 0; font-family: var(--display); font-stretch: 85%; font-weight: 600;
  font-size: 20px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quien__nombre:focus-visible { outline-offset: 0; border-radius: 4px; }
.quien__ventana { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; color: var(--smoke); font-size: 13px; }
/* Acciones del chat en la cabecera (computador); en celular van en «Más opciones» */
.hilo__acciones { display: none; }

/* Resumen fijo: con el chat tomado, lo que busca queda a la vista bajo el nombre.
   «Ver» lo despliega ahí mismo y el chat no se mueve. */
.fijado { flex: none; border-bottom: 1px solid var(--line); }
.fijado__boton {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px;
  padding: 6px 12px 6px 16px; border: 0; background: transparent; text-align: left;
}
.fijado__boton:hover { background: var(--raise); }
.fijado__boton:focus-visible { outline-offset: -2px; }
.fijado__icono { color: var(--smoke); }
.fijado__texto { flex: 1; min-width: 0; display: grid; }
.fijado__titulo { color: var(--smoke); font-size: 13px; line-height: 1.3; }
.fijado__busca { font-size: 15px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fijado__boton[aria-expanded="true"] .fijado__busca { white-space: normal; overflow-wrap: anywhere; }
.fijado__ver { flex: none; min-width: 44px; padding: 0 4px; color: var(--smoke); font-size: 14px; font-weight: 600; text-align: right; }
.fijado__boton:hover .fijado__ver { color: var(--ash); }
/* Desplegado: los datos arrancan donde arranca el texto de la barra */
.fijado__detalle { max-height: min(45vh, 24rem); max-height: min(45dvh, 24rem); overflow-y: auto; padding: 0 16px 16px 50px; }
.fijado__detalle .claqueta__datos { margin: 0; }

/* «Más opciones» (celular): Finalizar siempre; Devolver al agente cuando el chat es tuyo */
.menu {
  position: absolute; z-index: 2; top: 58px; right: 8px;
  width: min(19rem, calc(100% - 16px)); padding: 6px;
  border: 1px solid var(--line-strong); border-radius: 16px; background: var(--raise);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.menu__item {
  width: 100%; min-height: 48px;
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 11px 12px; border: 0; border-radius: 12px; background: transparent; text-align: left;
}
.menu__item:hover { background: var(--fill); }
.menu__item:disabled { opacity: 0.6; cursor: progress; }
.menu__item .icon { margin-top: 2px; color: var(--smoke); }
.menu__texto { font-weight: 600; }
.menu__nota { grid-column: 2; color: var(--smoke); font-size: 13px; line-height: 1.35; }

/* Mensajes */
.mensajes {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 22px;
}
.mensajes > * { flex-shrink: 0; }
.mensajes:focus-visible { outline-offset: -2px; }

/* La claqueta: lo primero que se lee al abrir un chat que te necesita */
.claqueta { position: relative; margin: 30px 0 14px; }
.claqueta__palo {
  position: absolute; left: 0; right: 0; top: -15px; height: 14px; border-radius: 3px;
  background: repeating-linear-gradient(-45deg, var(--ash) 0 11px, var(--ink) 11px 22px);
  transform-origin: 0 100%; transform: rotate(-3deg);
  transition: transform 0.3s ease;
}
/* Cerrada: alguien ya tomó el chat */
.claqueta--cerrada { margin-top: 18px; }
.claqueta--cerrada .claqueta__palo { transform: none; }
.claqueta__tabla { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 4px 4px 16px 16px; background: var(--ink); }
.claqueta__banda { height: 14px; background: repeating-linear-gradient(45deg, var(--ash) 0 11px, var(--ink) 11px 22px); }
.claqueta__cuerpo { padding: 14px 16px 18px; }
.claqueta__titulo { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--smoke); font-size: 13px; font-weight: 600; }
.claqueta__datos { margin: 4px 0 0; display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: 8px 12px; font-size: 15px; }
.claqueta__datos > div { display: contents; }
.claqueta__datos dt { color: var(--smoke); }
.claqueta__datos dd { margin: 0; overflow-wrap: anywhere; }
/* «Qué busca» va como titular; «Por qué pasó», primero y en negrita */
.claqueta__datos > .claqueta__busca { display: block; grid-column: 1 / -1; margin-bottom: 6px; }
.claqueta__busca dd {
  font-family: var(--display); font-stretch: 85%; font-weight: 600;
  font-size: 23px; line-height: 1.15; text-wrap: balance;
}
.claqueta__motivo { font-weight: 700; }
@media (max-width: 359.98px) {
  .claqueta__datos { grid-template-columns: 6rem minmax(0, 1fr); }
}

/* Burbujas: el cliente a la izquierda; Cheese (el agente o el equipo) a la derecha */
.msg { max-width: min(86%, 34rem); padding: 7px 12px 8px; border-radius: 16px; }
.msg p { margin: 0; display: flow-root; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg--cliente { align-self: flex-start; background: var(--raise); border-top-left-radius: 4px; }
.msg--agente { align-self: flex-end; background: var(--ink); border: 1px solid var(--line); border-top-right-radius: 4px; }
.msg--tu { align-self: flex-end; background: var(--flare-wash); border-top-right-radius: 4px; }
.msg--equipo { align-self: flex-end; background: var(--ink); border: 1px solid var(--line); border-top-right-radius: 4px; }
/* Segunda burbuja seguida de quien ya habló: sin pico, sin firma y más pegada */
.msg--seguido { margin-top: -5px; border-top-left-radius: 16px; border-top-right-radius: 16px; }
.msg__quien { display: flex; align-items: center; gap: 5px; margin: 1px 0 2px; color: var(--smoke); font-size: 13px; font-weight: 600; }
.msg--tu .msg__quien { color: var(--flare); }
.msg p.msg__nota { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--smoke); font-size: 13px; }
/* La hora en la esquina, en el mismo renglón del texto si cabe */
.msg__hora {
  float: right; margin: 6px -3px -3px 12px;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--smoke); font-size: 12px; line-height: 1.2; white-space: nowrap;
}
/* Marcas de envío según el estado que avisa Meta (estadoEnvio), solo en lo que manda Cheese.
   Enviado: un visto. Entregado: dos vistos finos. Leído: dos vistos gruesos y claros. */
.visto { color: var(--smoke); }
.visto--leido { color: var(--ash); }
/* «No se pudo enviar» debajo de la burbuja */
.msg-grupo { display: contents; }
.fallo { align-self: flex-end; margin: -4px 2px 0; display: flex; align-items: center; gap: 6px; color: var(--signal); font-size: 13px; font-weight: 600; }

/* Fotos y notas de voz del cliente: se ven y se escuchan dentro del chat.
   Ancho fijo con tope, no un porcentaje: sin texto al lado, un porcentaje encoge la burbuja
   y el reproductor queda tan angosto que no se puede usar. */
.msg__foto {
  display: block; width: 260px; max-width: 100%; margin: 3px 0 4px; padding: 0;
  border: 0; border-radius: 12px; overflow: hidden; background: var(--ink); cursor: zoom-in;
}
.msg__foto img { display: block; width: 100%; height: auto; min-height: 64px; max-height: 320px; object-fit: cover; }
.msg__foto:hover img { opacity: 0.92; }
.msg__audio { display: block; width: 280px; max-width: 100%; height: 44px; margin: 4px 0; }
.msg p.msg__medio { display: flex; align-items: center; gap: 8px; margin: 3px 0 2px; color: var(--smoke); font-size: 14px; white-space: normal; }
.msg__medio .icon { color: var(--smoke); }

/* La foto en grande, con Descargar y Cerrar */
.visor {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border: 0; background: #050303; color: var(--ash);
}
.visor[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.visor::backdrop { background: rgba(5, 3, 3, 0.9); }
.visor__foto { display: block; max-width: 100%; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 12px; }
.visor__barra { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.visor__btn { min-height: 48px; }

/* Lo que pasa en la conversación, al centro y sin caja */
.evento { align-self: center; max-width: 100%; margin: 8px 0; color: var(--smoke); font-size: 13px; text-align: center; overflow-wrap: anywhere; }
.evento + .evento { margin-top: -4px; }

/* Pie del chat: lo que toca hacer. Te necesita: por qué y «Tomar». Contigo: solo la caja. */
.pie { flex: none; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--panel); }
.pie__texto { margin: 0 0 10px; color: var(--smoke); font-size: 14px; text-align: center; }
/* Errores al tomar, devolver, finalizar o enviar: cerca de la acción; lo escrito no se toca */
.pie__error { margin: 0 0 10px; color: var(--signal); font-size: 14px; font-weight: 600; text-align: center; }
.pie--tomar .btn { width: 100%; }
.pie--contigo { padding-top: 10px; }

.composer {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 5px 5px 5px 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--raise);
}
/* El foco rodea toda la caja, no solo el campo */
.composer:has(textarea:focus) { outline: 2px solid var(--flare); outline-offset: 2px; }
.composer textarea {
  flex: 1; min-width: 0; min-height: 44px; max-height: 160px; padding: 11px 0;
  border: 0; background: transparent; resize: none; field-sizing: content; line-height: 1.4;
}
.composer textarea:focus, .composer textarea:focus-visible { outline: none; }
.composer textarea::placeholder { color: var(--smoke); opacity: 1; }
.composer > .icon { display: none; }
.send {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--flare); color: var(--ink);
}
.send:hover { background: var(--ash); }
.send:disabled { cursor: progress; opacity: 0.7; }
/* Ventana de 24 h cerrada: la caja queda quieta y dice por qué, donde se iba a escribir */
.composer--cerrada { gap: 10px; padding-left: 14px; background: transparent; }
.composer--cerrada > .icon { display: block; align-self: center; color: var(--smoke); }
.composer--cerrada textarea:disabled { cursor: not-allowed; }
.composer--cerrada .send:disabled { background: var(--fill); color: var(--smoke); cursor: not-allowed; opacity: 1; }

/* ---------- Equipo ---------- */

.people { list-style: none; margin: 10px 0 0; padding: 0; }
.person {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 2px; border-bottom: 1px solid var(--line);
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--raise);
  display: grid; place-items: center; font-family: var(--display); font-stretch: 85%; font-weight: 700;
}
.person--off .avatar, .person--off .person__data { opacity: 0.55; }
.person__data { min-width: 0; }
.person__data p { margin: 0; }
.person__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__mail { color: var(--smoke); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__data .person__meta { margin-top: 2px; color: var(--smoke); font-size: 13px; }
.person__side { display: flex; align-items: center; gap: 4px; }
.role { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px; white-space: nowrap; }
.role--admin { color: var(--flare); border-color: var(--flare-edge); }
.more {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--smoke);
}
.more:hover, .more[aria-expanded="true"] { background: var(--raise); color: var(--ash); }
.person__opts { grid-column: 1 / -1; display: grid; gap: 6px; padding: 2px 0 4px; }
.opt-btn {
  min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line);
  background: transparent; font-size: 15px; text-align: left;
}
.opt-btn:hover { background: var(--raise); }
.opt-btn--peligro { color: var(--signal); }
.opt-btn:disabled { opacity: 0.6; cursor: progress; }

/* ---------- Mi cuenta ---------- */

.cuenta { margin: 0 0 28px; display: grid; gap: 10px; }
.cuenta div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; }
.cuenta dt { color: var(--smoke); }
.cuenta dd { margin: 0; overflow-wrap: anywhere; }
.form-clave--cuenta { padding-top: 24px; margin-bottom: 28px; border-top: 1px solid var(--line); }

/* ---------- Hoja: abajo en celular, al centro en computador ---------- */

.hoja {
  width: 100%; max-width: 100%; max-height: calc(100dvh - 24px); margin: auto 0 0;
  padding: 10px 22px calc(24px + env(safe-area-inset-bottom, 0px));
  border: 0; border-top: 1px solid var(--line-strong); border-radius: 24px 24px 0 0;
  background: var(--panel); color: var(--ash); overflow-y: auto;
}
.hoja::backdrop { background: rgba(5, 3, 3, 0.72); }
.hoja__grab { width: 40px; height: 4px; margin: 0 auto 16px; border-radius: 2px; background: var(--line-strong); }
.hoja__title { margin: 0 0 18px; font-family: var(--display); font-stretch: 85%; font-size: 22px; font-weight: 600; line-height: 1.2; }
.hoja__text { margin: -6px 0 20px; color: var(--smoke); font-size: 15px; }
.hoja > .btn + .btn { margin-top: 8px; }
.roles { margin: 0 0 18px; padding: 0; border: 0; display: grid; gap: 8px; }
.roles legend { margin-bottom: 8px; padding: 0; color: var(--smoke); font-size: 14px; }
.opt {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong);
  font-size: 14px; cursor: pointer;
}
.opt input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--flare); }
.opt b { display: block; font-size: 15px; }
.opt__textos span { color: var(--smoke); }
.opt:has(input:checked) { border-color: var(--flare-edge); background: var(--flare-wash); }
.opt:has(input:focus-visible) { outline: 2px solid var(--flare); outline-offset: 2px; }
.opt input:focus-visible { outline: none; }
.temp { display: flex; gap: 8px; }
.temp__valor { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.04em; }
.temp__copiar {
  flex: none; min-height: 52px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--flare-edge); background: transparent; color: var(--flare); font-weight: 600;
}

/* ---------- Celular con un chat abierto: el chat ocupa toda la pantalla ---------- */

@media (max-width: 959.98px) {
  .panel[data-hilo] .cima, .panel[data-hilo] .abajo { display: none; }
}

/* ---------- Computador ---------- */

@media (min-width: 960px) {
  .panel { display: grid; grid-template-columns: 224px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .cima, .abajo, .atras, .mas, .menu { display: none; }

  .nav {
    min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 30px;
    padding: 30px 14px 18px; background: var(--panel); border-right: 1px solid var(--line);
  }
  .nav .marca { padding: 0 12px; }

  .app { grid-template-columns: clamp(328px, 30vw, 376px) minmax(0, 1fr); }
  .app[data-view] .lista, .app[data-view] .hilo { display: flex; }

  .lista__cabeza { padding: 28px 24px 8px; }
  .filtros { padding: 4px 14px 0; }
  .filas { padding: 10px 12px 24px; }

  .page__in { padding: 30px 24px 56px; }
  .person__opts { padding-left: 52px; }

  .hilo { border-left: 1px solid var(--line); }
  .hilo__cabeza { min-height: 0; padding: 30px 24px 14px 32px; gap: 16px; flex-wrap: wrap; row-gap: 8px; }
  /* Si el chat queda angosto, las acciones bajan a otro renglón en vez de apretar el nombre */
  .quien { flex: 1 1 13rem; padding-right: 0; }
  .quien__nombre { font-size: 22px; }
  .quien__ventana { white-space: nowrap; }
  .hilo__acciones { display: flex; align-items: center; gap: 4px; }
  .fijado__boton { padding: 6px 28px 6px 32px; }
  .fijado__detalle { padding: 2px 28px 18px 66px; }

  .mensajes { padding: 24px 40px 28px; }
  .claqueta { align-self: center; width: min(100%, 34rem); margin-top: 40px; }
  .claqueta--cerrada { margin-top: 20px; }
  .claqueta__cuerpo { padding: 16px 20px 20px; }
  .claqueta__datos { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .claqueta__busca dd { font-size: 26px; }
  .msg { max-width: min(78%, 32rem); font-size: 15px; }

  .pie { padding: 14px 32px 20px; }
  /* El porqué a la izquierda y la acción a la derecha; si no cabe, la acción baja */
  .pie--tomar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
  .pie--tomar .pie__texto { flex: 1 1 14rem; margin: 0; text-align: left; }
  .pie--tomar .pie__error { flex-basis: 100%; margin: 0; }
  .pie--tomar .btn { width: auto; }
  .pie__texto, .pie__error { text-align: left; }

  .hoja { width: min(28rem, calc(100% - 32px)); margin: auto; padding: 24px 26px 26px; border: 1px solid var(--line-strong); border-radius: 20px; }
  .hoja__grab { display: none; }
}

/* Computadores angostos (960 a 1199 px): la barra de la izquierda se vuelve compacta,
   con el icono arriba y el nombre debajo, para dejarles espacio a la lista y al chat */
@media (min-width: 960px) and (max-width: 1199.98px) {
  .panel { grid-template-columns: 104px minmax(0, 1fr); }
  .app { grid-template-columns: 328px minmax(0, 1fr); }
  .nav { gap: 26px; padding: 30px 6px 14px; }
  .nav .marca { padding: 0; justify-content: center; }
  .nav .marca__logo { font-size: 24px; }
  .nav .marca__nombre { display: none; }
  .nav__item {
    position: relative; min-height: 60px; padding: 6px 2px;
    flex-direction: column; justify-content: center; gap: 4px;
    font-size: 12px; line-height: 1.2; text-align: center;
  }
  .nav__texto { max-width: 100%; }
  .nav__item .globo { position: absolute; top: 3px; left: calc(50% + 4px); margin: 0; box-shadow: 0 0 0 2px var(--panel); }
  .nav__item[aria-current="page"] .globo { box-shadow: 0 0 0 2px var(--raise); }
  .nav__pie .agente { flex-direction: column; gap: 4px; padding: 0 0 6px; font-size: 12px; text-align: center; }
  .hilo__cabeza { padding: 30px 20px 14px 28px; }
  .fijado__boton { padding-left: 28px; padding-right: 20px; }
  .fijado__detalle { padding-left: 62px; padding-right: 20px; }
  .mensajes { padding: 24px 28px 28px; }
  .pie { padding-left: 28px; padding-right: 20px; }
  .filtros { padding: 4px 10px 0; }
  .filtro { padding: 0 4px; gap: 4px; font-size: 13px; }
  .filtro[aria-pressed="true"]::after { left: 4px; right: 4px; }
}

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