/* ──────────────────────────────────────────────────────────────────────────
   El chat de la web, rediseñado (18/10/2026, SOLO EN LOCAL, rama
   dashboard-nuevo).

   Lo que se pidió: la pestaña «CHAT» se esconde con el panel abierto; el
   panel, más estrecho (380 px); buscador de conversaciones; avatares
   redondos con foto o iniciales y el punto verde de «en línea»; globos
   rojos con los no leídos; burbujas con más aire, esquinas redondeadas
   (rounded-2xl) y un 78 % de ancho como mucho; y la barra de escribir más
   alta, con clip, emojis y un botón «Enviar» que se ve.

   OJO: la web es cuadrada por regla («el sistema de formas»: un
   `border-radius: 0 !important` universal). Aquí Xavi pide redondeo
   expresamente, así que se aplica con `!important` y SOLO dentro del
   panel del chat. Quitar la línea de esta hoja en index.html devuelve el
   chat de antes (lo de chat.js sigue funcionando con la hoja vieja).
   ────────────────────────────────────────────────────────────────────────── */

.chat-panel {
  --cn-recibido: #F1F5F9; --cn-recibido-tinta: #0F172A;
  --cn-enviado: #18181B; --cn-enviado-tinta: #FFFFFF;
  --cn-campo: #F8FAFC; --cn-borde: #E5E7EB; --cn-verde: #22C55E;
}
:root[data-tema="oscuro"] .chat-panel {
  --cn-recibido: #26262C; --cn-recibido-tinta: #F4F5F7;
  --cn-enviado: #F4F5F7; --cn-enviado-tinta: #0E0E10;
  --cn-campo: #1A1A1F; --cn-borde: #2A2A31;
}

/* ── 1. La pestaña se va con el panel abierto; el panel, más estrecho ── */
.chat-fab[aria-expanded="true"] { display: none !important; }
.chat-panel {
  width: 380px; max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--cn-borde);
  box-shadow: -18px 0 48px rgba(15, 23, 42, .10);
}
@media (max-width: 520px) { .chat-panel { width: 100vw; } }

/* La cabecera: título y acciones, y debajo el buscador. */
.chat-panel .chat-cab { padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--cn-borde); }
.chat-panel .chat-cab-lista { flex-direction: column; align-items: stretch; gap: 12px; }
.chat-cab-fila { display: flex; align-items: center; gap: 8px; }
.chat-panel .chat-cab-tit { font-size: 18px; letter-spacing: -0.01em; }
.chat-panel .chat-ico { border-radius: 10px !important; }
.chat-buscador {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  color: var(--text-soft); background: var(--cn-campo); border: 1px solid var(--cn-borde);
  border-radius: 12px !important; cursor: text; transition: border-color .15s, background .15s;
}
.chat-buscador:focus-within { background: var(--surface); border-color: var(--text-soft); }
.chat-buscador input { flex: 1; min-width: 0; height: 100%; padding: 0; font: inherit; font-size: 13.5px; color: var(--text); background: transparent; border: 0; outline: none; }
.chat-buscador input::placeholder { color: var(--text-soft); }
.chat-buscador input::-webkit-search-cancel-button { display: none; }

/* ── 2. La lista ─────────────────────────────────────────────────────── */
.chat-panel .chat-lista { padding: 8px; gap: 2px; background: var(--surface); }
.chat-panel .chat-fila { align-items: center; gap: 12px; padding: 10px; border-radius: 12px !important; }
.chat-panel .chat-fila:hover { background: var(--cn-campo); }
.chat-panel .chat-fila-arriba { margin-bottom: 2px; }
.chat-panel .chat-fila-nombre { font-size: 14px; }
.chat-panel .chat-fila-ult { font-size: 13px; }
.chat-panel .chat-fila-nl .chat-fila-ult { color: var(--text); font-weight: 600; }
.chat-panel .chat-fila-abajo { align-items: center; }

/* Avatares redondos, con foto o iniciales en el tono de cada persona, y el
   punto verde abajo a la derecha si está en línea. */
.chat-avatar-caja { position: relative; flex: 0 0 auto; display: inline-flex; }
.chat-panel .chat-avatar { border-radius: 999px !important; font-family: var(--font); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.chat-panel .chat-avatar-grupo { color: var(--text-2); background: var(--cn-campo); border: 1px solid var(--cn-borde); }
.chat-en-linea {
  position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px;
  background: var(--cn-verde); border: 2.5px solid var(--surface); border-radius: 999px !important;
}
.chat-cab-sub-vivo { color: #16a34a !important; font-weight: 600 !important; }

/* Los no leídos: globo rojo. */
.chat-panel .chat-globo-fila { min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; color: #fff; background: var(--blue); border-radius: 999px !important; }
.chat-panel .chat-fila-nl .chat-fila-hora { color: var(--blue); font-weight: 600; }
.chat-globo { border-radius: 999px !important; }

/* ── 3. La conversación ──────────────────────────────────────────────── */
.chat-panel .chat-msgs { padding: 16px 14px; gap: 4px; background: var(--surface); }
.chat-panel .chat-m { max-width: 78%; }
.chat-panel .chat-burbuja {
  padding: 10px 14px; font-size: 14px; line-height: 1.45;
  color: var(--cn-recibido-tinta); background: var(--cn-recibido);
  border-radius: 16px !important; border-bottom-left-radius: 6px !important;
}
.chat-panel .chat-m-mia .chat-burbuja {
  color: var(--cn-enviado-tinta); background: var(--cn-enviado);
  border-radius: 16px !important; border-bottom-right-radius: 6px !important;
}
.chat-panel .chat-m-autor { margin: 0 6px 3px; font-weight: 600; }
.chat-panel .chat-m-pie { margin: 3px 6px 0; font-size: 10.5px; }
.chat-panel .chat-dia { margin: 14px 0 8px; padding: 3px 10px; background: var(--cn-campo); border-radius: 999px !important; }
.chat-panel .chat-tarjeta { border-radius: 14px !important; }
.chat-panel .chat-foto img { border-radius: 14px !important; }
.chat-panel .chat-pastilla, .chat-panel .chat-chip, .chat-panel .chat-chip img, .chat-panel .chat-chip button, .chat-panel .chat-punto { border-radius: 999px !important; }

/* La barra de escribir: una caja alta con el clip, los emojis, el texto y
   el botón de enviar dentro. */
.chat-panel .chat-redactor { padding: 12px 14px 14px; background: var(--surface); border-top: 1px solid var(--cn-borde); }
.chat-panel .chat-redactor-fila {
  align-items: flex-end; gap: 2px; padding: 5px;
  background: var(--cn-campo); border: 1px solid var(--cn-borde); border-radius: 16px !important;
  transition: border-color .15s, background .15s;
}
.chat-panel .chat-redactor-fila:focus-within { background: var(--surface); border-color: var(--text-soft); }
.chat-panel .chat-redactor-fila .chat-ico { width: 38px; height: 40px; color: var(--text-2); }
.chat-panel .chat-redactor-fila .chat-ico:hover { color: var(--text); background: var(--surface-2); }
.chat-panel .chat-texto {
  min-height: 40px; max-height: 140px; padding: 10px 6px; line-height: 1.4;
  background: transparent; border-radius: 0 !important;
}
.chat-panel .chat-enviar {
  width: auto; height: 40px; padding: 0 14px; gap: 6px; display: inline-flex; align-items: center;
  font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: var(--blue);
  border-radius: 12px !important; box-shadow: 0 6px 16px rgba(239, 35, 60, .25);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.chat-panel .chat-enviar:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(239, 35, 60, .32); }
.chat-panel .chat-enviar:disabled { background: var(--border-med); box-shadow: none; }
.chat-panel .chat-mas-menu { border-radius: 12px !important; padding: 6px; }
.chat-panel .chat-mas-menu button { border-radius: 8px !important; }

/* El menú de emojis. */
.chat-emoji-menu {
  position: absolute; bottom: calc(100% + 10px); left: -40px; z-index: 3;
  display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 8px;
  background: var(--surface); border: 1px solid var(--cn-borde); border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
}
.chat-emoji-menu button { width: 34px; height: 34px; padding: 0; font-size: 19px; line-height: 1; background: transparent; border: 0; border-radius: 8px !important; cursor: pointer; }
.chat-emoji-menu button:hover { background: var(--cn-campo); transform: scale(1.12); }
@media (max-width: 380px) { .chat-emoji-menu { grid-template-columns: repeat(7, 34px); } }
/* El foco lo marca la caja entera, no el campo (el foco general de la web lo pintaba en rojo). */
.chat-panel .chat-texto, .chat-panel .chat-texto:focus, .chat-panel .chat-texto:focus-visible { border: 0 !important; outline: none !important; box-shadow: none !important; }
/* El menú de emojis se ancla a la barra entera (no al botón), para que no se salga del panel. */
.chat-panel .chat-redactor { position: relative; }
.chat-panel .chat-mas-wrap:has(.chat-emoji) { position: static; }
.chat-panel .chat-emoji-menu { left: 14px; bottom: calc(100% - 4px); }

/* Arrastrar un presupuesto o un rodaje de la web al chat (18/10/2026). */
.chat-arrastrable { cursor: grab; }
.chat-arrastrable:active { cursor: grabbing; }
body.chat-arrastrando .chat-panel { box-shadow: -18px 0 48px rgba(15, 23, 42, .10), inset 0 0 0 2px var(--blue); }
.chat-panel.chat-recibe { box-shadow: -18px 0 48px rgba(15, 23, 42, .14), inset 0 0 0 3px var(--blue); }
.chat-panel .chat-fila.chat-fila-diana { background: rgba(239, 35, 60, .08); box-shadow: inset 0 0 0 1.5px var(--blue); }
/* La tarjeta del material: miniatura a la izquierda. */
.chat-material { display: flex; align-items: center; gap: 10px; }
.chat-material img, .chat-material-sin { width: 46px; height: 46px; flex: 0 0 auto; object-fit: cover; background: var(--cn-campo); border: 1px solid var(--cn-borde); border-radius: 10px !important; }
.chat-material-sin { display: grid; place-items: center; color: var(--text-soft); }
.chat-material > div { min-width: 0; }
.chat-material .chat-tarjeta-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }