/* ============================================================
   APP.CSS — estilos de componentes (usa tokens.css)
   Reglas funcionales preservadas del diseño original:
   selectores y comportamientos de visibilidad NO se renombran.
   ============================================================ */

/* ---------- LAYOUT GENERAL ---------- */
html, body { height: 100%; overflow: hidden; }
body { display: flex; background-color: var(--bg-app); position: relative; margin: 0; }

/* ---------- SIDEBAR ---------- */
.sidebar {
  width: 32%; max-width: 420px; min-width: 280px; height: 100%;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  background-color: var(--bg-panel);
  transition: transform 0.28s ease-in-out;
  flex-shrink: 0; position: relative; z-index: 10;
}
.sidebar-header {
  padding: 0.65rem 1rem;
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0; min-height: 59px;
}
.sidebar-header h5 { font-size: 1rem; margin-bottom: 0; font-weight: 600; }

/* Avatar genérico (sidebar, lista, header de chat) */
.ui-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 0.9rem;
  flex-shrink: 0; user-select: none; text-transform: uppercase;
  background-color: var(--brand-primary);
  letter-spacing: 0.02em;
}
.ui-avatar.ui-avatar-sm { width: 32px; height: 32px; font-size: 0.78rem; }

/* Botones de icono redondos */
.icon-btn {
  width: 38px; height: 38px; border: none; background: none;
  border-radius: 50%; color: var(--text-secondary); font-size: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color 0.15s ease;
  padding: 0; line-height: 1;
}
.icon-btn:hover, .icon-btn:focus-visible { background-color: var(--bg-hover); color: var(--text-primary); }
.icon-btn:active { background-color: var(--bg-active); }

.user-info { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }

/* Zona búsqueda global */
.sidebar .global-search-wrap { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
#global-search-input {
  background-color: var(--bg-input); border: 1px solid transparent;
  border-radius: var(--radius-pill); color: var(--text-primary);
  font-size: 0.88rem; padding: 0.45rem 1rem; box-shadow: none;
}
#global-search-input:focus { border-color: var(--brand-primary); background-color: var(--bg-panel); box-shadow: none; }
#global-search-input::placeholder { color: var(--text-secondary); }
#global-search-button {
  border: none; background: none; color: var(--text-secondary);
  border-radius: 50%; margin-left: 2px;
}
#global-search-button:hover { color: var(--brand-primary); background: var(--bg-hover); }
#global-search-status { font-size: 0.75rem; color: var(--text-secondary); min-height: 1.2em; }

/* Lista de chats */
/* min-height:0 permite que este hijo flex del sidebar se limite a la altura
   disponible y haga scroll, en vez de empujar el layout. */
.chat-list { flex-grow: 1; overflow-y: auto; background: var(--bg-panel); min-height: 0; }
.chat-list .list-group-item {
  /* flex-shrink:0 es CRÍTICO: .list-group (Bootstrap) es un contenedor flex
     en columna; sin esto, con cientos de chats los ítems se comprimen para
     caber en pantalla en lugar de desbordar y activar el scroll. */
  flex-shrink: 0;
  cursor: pointer; border: none; border-radius: 0;
  padding: 0.25rem 0.9rem;
  background-color: var(--bg-panel); color: var(--text-primary);
  display: flex; align-items: center; gap: 0.8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color 0.12s ease;
}
.chat-list .list-group-item .chat-item-name {
  font-weight: 500; font-size: 0.92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 0;
  align-self: stretch; display: flex; align-items: center;
}
.chat-list .list-group-item:last-child .chat-item-name { border-bottom: none; }
.chat-list .list-group-item.active {
  background-color: var(--bg-active); color: var(--text-primary);
  border: none; font-weight: 500;
}
.chat-list .list-group-item.active .chat-item-name { border-bottom-color: transparent; }
.chat-list .list-group-item:hover:not(.active) { background-color: var(--bg-hover); }
.form-text.small { font-size: 0.75rem; color: var(--text-secondary); }

/* ---------- VENTANA DE CHAT ---------- */
.chat-window {
  flex-grow: 1; display: flex; flex-direction: column; height: 100%;
  background-color: var(--bg-chat);
  transition: transform 0.28s ease-in-out, opacity 0.28s ease-in-out, visibility 0.28s;
  position: relative; z-index: 5; overflow: hidden;
}

/* Fondos de chat seleccionables (ui.js aplica data-chat-bg en <body>) */
body[data-chat-bg="doodle"] .chat-content::before,
body:not([data-chat-bg]) .chat-content::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  opacity: var(--doodle-opacity); z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23857a6e' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='22' cy='22' r='9'/%3E%3Crect x='78' y='14' width='26' height='17' rx='4'/%3E%3Cpath d='M20 78 q12 -16 24 0'/%3E%3Ccircle cx='104' cy='92' r='7'/%3E%3Cpath d='M52 116 h30'/%3E%3Cpath d='M112 46 l9 9 m0 -9 l-9 9'/%3E%3Cpath d='M40 48 a8 8 0 1 1 8 8 l0 6'/%3E%3Ccircle cx='48' cy='68' r='0.8'/%3E%3Cpath d='M70 60 l14 8 -14 8 z'/%3E%3Cpath d='M14 108 q6 -8 12 0 q6 8 12 0'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-bs-theme="dark"] body[data-chat-bg="doodle"] .chat-content::before,
html[data-bs-theme="dark"] body:not([data-chat-bg]) .chat-content::before {
  filter: invert(1); opacity: 0.05;
}
body[data-chat-bg="starwars"] .chat-content::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("/static/img/bg-starwars.jpg");
  background-repeat: repeat; opacity: 0.9;
}
html[data-bs-theme="dark"] body[data-chat-bg="starwars"] .chat-content::before { opacity: 0.14; filter: invert(1); }
body[data-chat-bg="solid"] .chat-content::before { content: none; }

.chat-header {
  padding: 0.55rem 1rem; min-height: 59px;
  border-bottom: 1px solid var(--border);
  background-color: var(--bg-panel); flex-shrink: 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.5rem; z-index: 2;
}
#chat-header-title {
  cursor: default; flex-grow: 1; margin: 0 0.25rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600; color: var(--text-primary);
}
#chat-header-title.clickable { cursor: pointer; }
#chat-header-title.clickable:hover { color: var(--brand-primary); }
.chat-header h5 { font-size: 1rem; margin-bottom: 0; }

/* Búsqueda local del chat */
#search-container { min-width: auto; flex-shrink: 0; gap: 2px; }
#search-input {
  max-width: 170px; display: inline-block; vertical-align: middle;
  background: var(--bg-input); border: 1px solid transparent;
  border-radius: var(--radius-pill); color: var(--text-primary);
  font-size: 0.85rem; box-shadow: none;
}
#search-input:focus { border-color: var(--brand-primary); background: var(--bg-panel); box-shadow: none; }
#search-container .btn {
  border: none; background: none; color: var(--text-secondary);
  border-radius: 50%; width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
#search-container .btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
#search-container .btn:disabled { opacity: 0.35; }
#search-results-count {
  font-variant-numeric: tabular-nums; min-width: 45px; text-align: right;
  font-size: 0.78rem; display: inline-block; vertical-align: middle;
  margin: 0 0.25rem; color: var(--text-secondary);
}

/* Contenido del chat */
.chat-content { flex-grow: 1; padding: 1rem 5%; overflow-y: auto; position: relative; background-color: var(--bg-chat); }
.chat-content > * { position: relative; z-index: 1; }
#loading-spinner {
  position: sticky; top: 10px; z-index: 10;
  background: var(--bg-panel); color: var(--text-secondary);
  padding: 6px 14px; border-radius: var(--radius-pill);
  width: fit-content; margin: 5px auto; box-shadow: var(--shadow-2);
  font-size: 0.82rem;
}

/* ---------- MENSAJES ---------- */
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.message-card {
  padding: 0.42rem 0.65rem 1.1rem;
  margin-bottom: 2px; margin-top: 10px;
  border-radius: var(--radius-sm);
  width: fit-content; min-width: 110px;
  max-width: 68%; word-wrap: break-word;
  box-shadow: var(--shadow-1); position: relative;
  font-size: 0.9rem;
  animation: msg-in 0.18s ease;
  color: var(--text-primary);
}
/* Colas (tails) estilo WhatsApp — solo en el primer mensaje del grupo */
.message-card.owner { margin-left: auto; background-color: var(--bubble-out); border-top-right-radius: 0; }
.message-card.other { margin-right: auto; background-color: var(--bubble-in); border-top-left-radius: 0; }
.message-card.owner::before, .message-card.other::before {
  content: ""; position: absolute; top: 0; width: 0; height: 0;
  border-style: solid;
}
.message-card.owner::before {
  right: -8px;
  border-width: 0 0 10px 8px;
  border-color: transparent transparent transparent var(--bubble-out);
}
.message-card.other::before {
  left: -8px;
  border-width: 0 8px 10px 0;
  border-color: transparent var(--bubble-in) transparent transparent;
}
/* Mensajes consecutivos del mismo remitente (ui.js añade .msg-continued) */
.message-card.msg-continued { margin-top: 2px; }
.message-card.msg-continued::before { display: none; }
.message-card.msg-continued.owner { border-top-right-radius: var(--radius-sm); }
.message-card.msg-continued.other { border-top-left-radius: var(--radius-sm); }
.message-card.msg-continued .sender-name { display: none; }

.message-card .sender-name { font-size: 0.8rem; font-weight: 700; margin-bottom: 0.1rem; color: var(--brand-primary); }
.message-card .timestamp { font-size: 0.68rem; color: var(--text-secondary); position: absolute; bottom: 4px; right: 9px; }
.message-card .message-body { font-size: 0.9rem; line-height: 1.35; margin: 0.15rem 0 0; overflow-wrap: break-word; word-break: break-word; }
.message-card .message-body a { color: var(--text-link); }

.message-card.system {
  margin: 0.9rem auto; background-color: var(--bubble-system);
  color: var(--bubble-system-text); font-size: 0.78rem; text-align: center;
  max-width: 70%; padding: 0.35rem 0.9rem 0.4rem;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-1);
  animation: none;
}
.message-card.system::before { display: none; }
.message-card.system .timestamp { position: static; display: block; text-align: center; margin-top: 3px; font-size: 0.68rem; color: var(--bubble-system-text); opacity: 0.8; }

/* Chips de fecha (ui.js los inserta) */
.date-chip {
  position: relative; z-index: 1;
  width: fit-content; margin: 14px auto 6px;
  background: var(--bg-panel); color: var(--text-secondary);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 5px 12px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1); text-transform: uppercase;
}

/* Estado vacío */
.no-chat-selected {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; text-align: center; color: var(--text-secondary); padding: 2rem;
}
.no-chat-selected img, .no-chat-selected svg { width: 140px; height: 140px; opacity: 0.45; margin-bottom: 1.2rem; fill: var(--text-secondary); display: block; }
.no-chat-selected h4 { font-weight: 300; font-size: 1.6rem; color: var(--text-primary); opacity: 0.8; }
.no-chat-selected hr { width: 60%; margin: 1rem auto 0.5rem; border-color: var(--border-strong); }
#back-to-sidebar-btn { display: none; margin-right: 6px; color: var(--text-secondary); }

/* ---------- MULTIMEDIA EN MENSAJES ---------- */
.message-media img, .message-media video {
  max-width: 100%; height: auto; max-height: 320px; display: block;
  border-radius: var(--radius-sm); margin-top: 0.3rem;
  background-color: var(--bg-active); object-fit: cover;
}
.message-media img { cursor: pointer; transition: filter 0.15s ease; }
.message-media img:hover { filter: brightness(0.92); }
.message-media video { cursor: default; background-color: #000; }
.message-media audio { width: 100%; min-width: 240px; margin-top: 0.3rem; }

/* Reproductor de audio personalizado (ui.js) */
.wa-audio { display: flex; align-items: center; gap: 10px; min-width: 250px; max-width: 360px; padding: 6px 2px 2px; }
.wa-audio audio { display: none !important; }
.wa-audio-play {
  width: 40px; height: 40px; border-radius: 50%; border: none; flex-shrink: 0;
  background: var(--brand-primary); color: #fff; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform 0.1s ease, background-color 0.15s ease;
}
.wa-audio-play:hover { background: var(--brand-primary-strong); }
.wa-audio-play:active { transform: scale(0.94); }
.wa-audio-track { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa-audio-wave { display: flex; align-items: center; gap: 2px; height: 24px; cursor: pointer; }
.wa-audio-wave i { flex: 1; min-width: 2px; max-width: 4px; background: var(--text-secondary); opacity: 0.4; border-radius: 2px; display: block; }
.wa-audio-wave i.played { background: var(--brand-primary); opacity: 1; }
.wa-audio-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.7rem; color: var(--text-secondary); }
.wa-audio-speed {
  border: 1px solid var(--border-strong); background: var(--bg-panel);
  color: var(--text-secondary); font-size: 0.68rem; font-weight: 700;
  border-radius: var(--radius-pill); padding: 1px 8px; cursor: pointer; flex-shrink: 0;
}
.wa-audio-speed:hover { color: var(--brand-primary); border-color: var(--brand-primary); }

/* Documentos / archivos adjuntos */
.message-media .file-link {
  text-decoration: none; display: inline-flex; align-items: center;
  background-color: color-mix(in srgb, var(--text-primary) 5%, transparent);
  padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); margin-top: 0.3rem;
  transition: background-color 0.15s ease;
  max-width: 100%;
}
.message-media .file-link:hover { background-color: color-mix(in srgb, var(--text-primary) 9%, transparent); }
.message-media .file-link i { margin-right: 8px; font-size: 1.4rem; }
.message-media .file-link span {
  font-size: 0.85rem; color: var(--text-primary); max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media-caption { font-size: 0.85rem; margin-top: 0.25rem; color: var(--text-primary); opacity: 0.9; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

mark.search-highlight { background-color: var(--highlight); color: var(--text-primary); padding: 0.1em 0; border-radius: 3px; box-shadow: 0 0 0 1px var(--highlight); }

.whatsapp-monospace {
  font-family: var(--font-mono);
  background-color: var(--bg-input);
  padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.85em;
}

/* ---------- PREVISUALIZACIÓN DE ENLACES ---------- */
.message-card .link-preview-card {
  display: block; margin-top: 8px;
  background-color: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  overflow: hidden; text-decoration: none; color: inherit;
  font-size: 0.85rem; max-width: 350px;
  transition: background-color 0.15s ease;
  box-shadow: var(--shadow-1);
}
.message-card a.link-preview-card:hover { background-color: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.message-card .preview-image-container {
  width: 100%; max-height: 160px; overflow: hidden;
  background-color: var(--bg-active); display: block;
  border-bottom: 1px solid var(--border);
}
/* Reglas funcionales: ocultar contenedor sin imagen */
.message-card .preview-image-container:has(> img[style*="display: none"]) { display: none; }
.message-card .preview-image-container:empty { display: none; }
.message-card .preview-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.message-card .preview-content { padding: 8px 12px; overflow: hidden; }
.message-card .preview-site-name { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-card .preview-title { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.message-card .preview-description { font-size: 0.78rem; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.message-card .link-preview-loading { display: block; font-size: 0.7rem; color: var(--text-secondary); padding: 8px 12px; font-style: italic; }

/* Embeds */
.message-card lite-youtube {
  display: block; max-width: 400px; margin: 8px 0 5px;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); background-color: #000;
}
.message-card lite-tiktok {
  display: block; max-width: 350px; aspect-ratio: 9 / 16;
  margin: 8px auto 5px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--border);
  background-color: var(--bg-panel-2);
}

/* ---------- RESULTADOS DE BÚSQUEDA GLOBAL ---------- */
.global-search-results-container {
  padding: 1rem; height: 100%; overflow-y: auto;
  background-color: transparent; position: relative; z-index: 1;
}
.global-search-result-item {
  background-color: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0.8rem 1rem; margin-bottom: 0.7rem;
  cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: var(--shadow-1);
}
.global-search-result-item:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.global-search-result-item .chat-title { font-weight: 600; color: var(--brand-primary); font-size: 0.9rem; }
.global-search-result-item .timestamp { font-size: 0.72rem; color: var(--text-secondary); }
.global-search-result-item .sender { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.global-search-result-item .snippet { font-size: 0.85rem; color: var(--text-secondary); margin-top: 2px; }
.global-search-result-item .snippet mark.search-highlight { background-color: var(--highlight); }

/* ---------- GALERÍA MULTIMEDIA ---------- */
#media-gallery-view {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--bg-app); z-index: 1000;
  display: none; flex-direction: column; overflow: hidden;
}
#media-gallery-view.active { display: flex; }
.gallery-header {
  padding: 0.55rem 1rem; min-height: 59px; border-bottom: 1px solid var(--border);
  background-color: var(--bg-panel); flex-shrink: 0;
  display: flex; align-items: center;
}
.gallery-header h5 { font-size: 1rem; font-weight: 600; margin: 0 0 0 10px; flex-grow: 1; color: var(--text-primary); }
.gallery-filter-container { margin-left: auto; }
#gallery-type-filter {
  max-width: 160px; background-color: var(--bg-input); color: var(--text-primary);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: 0.85rem; box-shadow: none;
}
#gallery-type-filter:focus { border-color: var(--brand-primary); }
#back-to-chat-btn { color: var(--text-secondary); }

.gallery-content { flex-grow: 1; overflow-y: auto; padding: 1rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; }
.gallery-item {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  background-color: var(--bg-panel-2); aspect-ratio: 1 / 1;
  box-shadow: var(--shadow-1); display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gallery-item:hover { transform: scale(1.02); box-shadow: var(--shadow-2); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.gallery-item video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; background-color: #000; }
.gallery-item .placeholder-content {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; text-align: center; padding: 0.5rem; box-sizing: border-box;
  cursor: pointer; color: var(--text-secondary);
}
.gallery-item .placeholder-content:hover { background-color: var(--bg-hover); }
.gallery-item .placeholder-content i.fs-1 { font-size: 2.5rem !important; margin-bottom: 0.5rem; color: var(--text-secondary); }
.gallery-item .placeholder-content small { font-size: 0.75rem; line-height: 1.2; max-height: 2.4em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gallery-item[data-type="video"] .play-icon-overlay, .gallery-item[data-type="audio"] .play-icon-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 2.6rem; color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.15s ease;
  pointer-events: none;
}
.gallery-item[data-type="video"]:hover .play-icon-overlay, .gallery-item[data-type="audio"]:hover .play-icon-overlay { opacity: 1; }
.gallery-item .media-type-icon {
  position: absolute; bottom: 6px; right: 6px; color: #fff;
  background-color: rgba(0,0,0,0.55); border-radius: 4px;
  padding: 2px 5px; font-size: 0.78rem; z-index: 2; backdrop-filter: blur(2px);
}
.gallery-item a.file-link-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; text-decoration: none; color: inherit; text-align: center; padding: 0.5rem;
}
.gallery-item a.file-link-item:hover { background-color: var(--bg-hover); }
.gallery-item a.file-link-item i.fs-1 { font-size: 2.5rem !important; margin-bottom: 0.5rem; }
.gallery-item a.file-link-item small { font-size: 0.75rem; line-height: 1.2; max-height: 2.4em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gallery-item a.file-link-item .external-link-icon { position: absolute; top: 6px; right: 6px; background: none; color: var(--text-secondary); font-size: 0.8rem; }
#gallery-loading-spinner { display: none; text-align: center; padding: 1rem; color: var(--text-secondary); font-size: 0.9rem; grid-column: 1 / -1; }
.grid-column-full { grid-column: 1 / -1; }

/* ---------- MODALES (estilo lightbox) ---------- */
.modal-backdrop.show { opacity: 0.75; }
.modal-content {
  background-color: var(--bg-panel); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}
.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); }

#imageModal .modal-dialog { max-width: 92%; }
#imageModal .modal-content { background-color: transparent; border: none; box-shadow: none; }
#imageModal img { max-width: 100%; max-height: 88vh; margin: auto; display: block; object-fit: contain; border-radius: var(--radius-sm); }
#imageModal .modal-header { border-bottom: none; padding: 0.5rem; position: absolute; top: 0; right: 0; z-index: 1060; border: 0; }
#imageModal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); font-size: 1.3rem; text-shadow: 0 0 5px black; }

#videoModal .modal-dialog { max-width: 92%; }
#videoModal .modal-content { background-color: #0c1317; border: none; color: #e9edef; }
#videoModal video { max-width: 100%; max-height: 80vh; margin: auto; display: block; background-color: #000; border-radius: var(--radius-sm); }
#videoModal .modal-header { border-bottom: 1px solid #222d34; }
#videoModal .modal-title { font-size: 0.95rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
#videoModal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

#audioModal .modal-dialog { max-width: 480px; }
#audioModal audio { width: 100%; margin-top: 1rem; }
#audioModal .modal-title { font-size: 0.95rem; }
#audioModal .audio-filename { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.5rem; word-break: break-all; }

/* ---------- MENÚS CONTEXTUALES ---------- */
@keyframes menu-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }
#galleryContextMenu, #messageContextMenu, #chatContextMenu, .dropdown-menu {
  background-color: var(--bg-panel); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-menu); min-width: 190px; font-size: 0.9rem;
  padding: 0.35rem 0; animation: menu-in 0.12s ease;
}
.dropdown-item { color: var(--text-primary); padding: 0.5rem 1rem; display: flex; align-items: center; cursor: pointer; }
.dropdown-item i { width: 1.5em; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--bg-hover); color: var(--text-primary); }
.dropdown-item.text-danger:hover { background-color: color-mix(in srgb, var(--danger) 10%, transparent); }
.dropdown-divider { border-color: var(--border); }

/* ---------- FORMULARIOS / BOTONES GENÉRICOS ---------- */
.btn-primary {
  background-color: var(--brand-primary); border-color: var(--brand-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--brand-primary-strong) !important; border-color: var(--brand-primary-strong) !important;
}
.form-control, .form-select { background-color: var(--bg-input); border-color: transparent; color: var(--text-primary); }
.form-control:focus, .form-select:focus {
  background-color: var(--bg-panel); border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--brand-primary) 20%, transparent);
  color: var(--text-primary);
}
.form-label { color: var(--text-primary); font-weight: 500; }
.form-text { color: var(--text-secondary); }

/* ---------- RESPONSIVE (reglas funcionales preservadas) ---------- */
@media (max-width: 767px) {
  .sidebar { width: 100%; max-width: none; min-width: 0; position: absolute; left: 0; top: 0; z-index: 1050; border-right: none; transform: translateX(0); }
  .chat-window { width: 100%; position: absolute; left: 0; top: 0; transform: translateX(100%); opacity: 0; visibility: hidden; z-index: 1040; overflow: hidden; }
  body.mobile-chat-active .sidebar { transform: translateX(-100%); }
  body.mobile-chat-active .chat-window { transform: translateX(0); opacity: 1; visibility: visible; }
  body.mobile-chat-active .chat-header #back-to-sidebar-btn { display: inline-flex; }
  .chat-content { padding: 0.8rem; }
  .message-card { max-width: 88%; }
  .message-media img, .message-media video { max-height: 250px; }
  .chat-header { padding: 0.5rem 0.6rem; }
  .chat-header h5 { font-size: 0.92rem; }
  #search-container { padding-left: 4px; flex-grow: 0; flex-shrink: 1; }
  #search-input { max-width: 95px; font-size: 0.8rem; padding: 0.2rem 0.6rem; height: calc(1.5em + 0.4rem + 2px); }
  #search-results-count { min-width: 35px; font-size: 0.7rem; margin-right: 0.1rem; }
  .chat-header .btn-sm { padding: 0.15rem 0.3rem; font-size: 0.75rem; }
  #back-to-sidebar-btn { padding: 0.2rem 0.4rem; font-size: 1rem; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 0.5rem; }
  .gallery-content { padding: 0.5rem; }
  .gallery-header { padding: 0.5rem 0.6rem; }
  .gallery-header h5 { font-size: 0.92rem; }
  .gallery-item .placeholder-content i.fs-1, .gallery-item a.file-link-item i.fs-1 { font-size: 2rem !important; }
  .gallery-item[data-type="video"] .play-icon-overlay, .gallery-item[data-type="audio"] .play-icon-overlay { font-size: 2rem; }
  .gallery-filter-container { margin-left: 5px; }
  #gallery-type-filter { max-width: 110px; font-size: 0.8rem; padding-top: 0.2rem; padding-bottom: 0.2rem; }
  #videoModal .modal-dialog { max-width: 95%; }
  #audioModal .modal-dialog { max-width: 90%; }
  .wa-audio { min-width: 180px; }
  .ui-avatar { width: 36px; height: 36px; }
  /* Safe areas iOS */
  .sidebar-header, .chat-header, .gallery-header { padding-top: max(0.55rem, env(safe-area-inset-top)); }
}

/* ---------- PAPELERA ---------- */
.trash-entry {
  background: var(--bg-panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0.75rem 0.9rem; margin-bottom: 0.7rem;
}
.trash-entry-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.trash-entry-date { font-size: 0.78rem; color: var(--text-secondary); }
.trash-entry-lines {
  font-size: 0.85rem; line-height: 1.4; color: var(--text-primary);
  background: var(--bubble-in); border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem; box-shadow: var(--shadow-1);
  word-break: break-word; max-height: 140px; overflow-y: auto;
}
.trash-entry-media { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.4rem; }
.trash-empty { text-align: center; color: var(--text-secondary); padding: 2rem 1rem; font-size: 0.9rem; }
.trash-empty i { font-size: 2.2rem; opacity: 0.4; margin-bottom: 0.6rem; }

/* ---------- PÁGINAS DE AUTENTICACIÓN ---------- */
body.auth-page {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; overflow: hidden; background-color: var(--bg-app); position: relative;
}
body.auth-page::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  opacity: var(--doodle-opacity); z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23857a6e' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='22' cy='22' r='9'/%3E%3Crect x='78' y='14' width='26' height='17' rx='4'/%3E%3Cpath d='M20 78 q12 -16 24 0'/%3E%3Ccircle cx='104' cy='92' r='7'/%3E%3Cpath d='M52 116 h30'/%3E%3Cpath d='M112 46 l9 9 m0 -9 l-9 9'/%3E%3Cpath d='M40 48 a8 8 0 1 1 8 8 l0 6'/%3E%3Ccircle cx='48' cy='68' r='0.8'/%3E%3Cpath d='M70 60 l14 8 -14 8 z'/%3E%3Cpath d='M14 108 q6 -8 12 0 q6 8 12 0'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-bs-theme="dark"] body.auth-page::before { filter: invert(1); opacity: 0.05; }
.auth-card {
  background: var(--bg-panel); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2); border: 1px solid var(--border);
  padding: 2.2rem; width: 100%; max-width: 400px;
  position: relative; z-index: 1; margin: 1rem;
}
.auth-card .auth-logo {
  width: 64px; height: 64px; border-radius: 50%; background: var(--brand-primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin: 0 auto 1rem;
}
.auth-card h3 { text-align: center; font-weight: 600; font-size: 1.25rem; margin-bottom: 0.25rem; }
.auth-card .auth-sub { text-align: center; color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 1.5rem; }
.auth-card .form-control { border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; }
.auth-card .btn-primary { width: 100%; border-radius: var(--radius-pill); padding: 0.55rem; font-weight: 600; }
.auth-card .auth-links { text-align: center; margin-top: 1.2rem; font-size: 0.85rem; }
.auth-card .auth-links a { color: var(--brand-primary); text-decoration: none; }
.auth-card .auth-links a:hover { text-decoration: underline; }