/* Chat global (13-10-2026). Lo que Abel aprobo en la maqueta de la noche del 12
   y pidio para TODAS las empresas: misma paleta que el dashboard, filtros de
   redes solo con icono a todo el ancho, fondo del chat y la barra de escribir
   despegada del borde en el telefono. Va despues de chats-theme.css e
   inbox.css a proposito, para ganarles sin tocar esos archivos. */

/* 1) La misma paleta oscura del dashboard (antes el chat era mas claro). */
#chats-layout {
  --chat-bg: var(--bg); --chat-panel: var(--panel); --chat-bubble: var(--bg-soft);
  --chat-border: var(--border); --chat-hover: #1A1C26; --chat-input: var(--bg-soft);
  --chat-outgoing: #173B3E; --chat-outgoing-border: #22504F;
}
:root[data-theme="light"] #chats-layout {
  --chat-bg: var(--bg); --chat-panel: var(--panel); --chat-bubble: var(--bg-soft);
  --chat-border: var(--border); --chat-hover: #F7F5EF; --chat-input: var(--panel);
  --chat-outgoing: #D5EEEA; --chat-outgoing-border: #B4D9D2;
}

/* 2) Redes: "Todas" con texto y las demas solo con su icono, repartidas a todo
      el ancho de la columna. */
#chats-layout .inbox-channels { flex-wrap: nowrap; gap: 6px; }
#chats-layout .inbox-channels .inbox-channel { flex: 1 1 0; min-width: 0; justify-content: center; padding: 9px 4px; height: 38px; }
#chats-layout .inbox-channels .inbox-channel[data-channel="all"] { flex: 1.6 1 0; font-weight: 700; font-size: .8rem; }
#chats-layout .inbox-channels .inbox-channel:not([data-channel="all"]) .inbox-channel-name {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#chats-layout .inbox-channels .inbox-channel:not([data-channel="all"]) .inbox-channel-symbol { width: 20px; }
#chats-layout .inbox-channels .inbox-channel .inbox-channel-symbol svg { width: 19px; height: 19px; }
.inbox-channel[data-channel="web"] .inbox-channel-symbol { color: #f0b35c; }
/* El punto de "sin conectar" se queda pegado al icono */
#chats-layout .inbox-channels .inbox-channel { position: relative; }

/* 3) Fondo del chat */
#chats-layout .messages.has-wall { background-size: cover; background-position: center; background-repeat: no-repeat; }
#chats-layout .msg-system-event { background: var(--chat-panel); border: 1px solid var(--chat-border); border-radius: 999px; }
.chat-bg-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding-inline: 8px; }
.chat-bg-btn svg { width: 17px; height: 17px; }
.chat-bg-pop { position: fixed; z-index: 80; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); padding: 12px; }
.chat-bg-pop.hidden { display: none; }
.chat-bg-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.chat-bg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.chat-bg-opt { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; border: 2px solid var(--border); background: var(--bg) center / cover no-repeat; cursor: pointer; padding: 0; overflow: hidden; color: var(--text); }
.chat-bg-opt span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; font-weight: 700; padding: 4px 0; background: rgba(0, 0, 0, .55); color: #fff; text-align: center; }
.chat-bg-opt.active { border-color: var(--primary); }
.chat-bg-opt.upload { display: grid; place-items: center; border-style: dashed; }
.chat-bg-opt.upload svg { width: 22px; height: 22px; color: var(--muted); margin-bottom: 14px; }
.chat-bg-range { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.chat-bg-range span { display: flex; justify-content: space-between; }
.chat-bg-range b { color: var(--text); }
.chat-bg-range input { width: 100%; accent-color: var(--primary); }
.chat-bg-range input:disabled { opacity: .4; }
.chat-bg-pop .hint { margin: 8px 0 0; }

/* 4) Telefono: la barra de escribir no pega con el borde de abajo (como WhatsApp). */
@media (max-width: 980px) {
  #chats-layout #chat-input-box { padding-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 10px)); }
  #chats-layout .inbox-channels .inbox-channel { height: 40px; }
  /* Cabecera del chat abierto: "Volver" solo con la flecha, para que quepa el nombre */
  #chats-layout .chat-header .chat-back-btn span { display: none; }
  #chats-layout .chat-header .chat-bg-btn { min-width: 32px; padding-inline: 6px; }
}
@media (max-width: 430px) {
  /* Telefonos angostos: Resumen solo con su icono, para que se lea el nombre */
  #chats-layout .chat-header .chat-summary-btn span { display: none; }
}

/* 5) Excursiones: el titulo de arriba ("Resumen de hoy") solo en el Dashboard;
      en las demas secciones ese espacio es para el contenido (Abel, 12-10-2026). */
body.tpl-excursiones:not([data-tab="dashboard"]) header .header-left > div { display: none; }