/* ==========================================================================
   Chatper · layout.css
   Shell (aviso de conexión, panel de salas, hilos, contenedor de vistas), pantalla de acceso,
   Preferencias y diálogos de sala. La zona de trabajo acoplable está en dock.css.
   Solo usa los tokens de base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Arranque, errores y utilidades de layout
   -------------------------------------------------------------------------- */
.app-root { min-height: 100vh; min-height: 100dvh; }

.boot-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--accent);
}
.boot-splash img, .boot-splash .logo-mark { width: 3.5rem; height: 3.5rem; animation: cp-breathe 1.6s var(--ease) infinite alternate; }
.boot-splash .spinner { color: var(--text-subtle); }
@keyframes cp-breathe { from { transform: scale(0.96); opacity: 0.85; } to { transform: scale(1); opacity: 1; } }

.boot-error { display: flex; min-height: 100vh; min-height: 100dvh; padding: 1.5rem; }
.empty-state-icon.is-danger { background: var(--danger-soft); color: var(--danger); }

.noscript {
  max-width: 30rem;
  margin: 4rem auto;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font-weight: 600;
  cursor: pointer;
}
.link-button:hover { text-decoration: underline; }

.brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; color: var(--text); }
.brand-name { font-size: 1.125rem; font-weight: 750; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   Pantalla de acceso
   -------------------------------------------------------------------------- */
.auth-screen {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}
.auth-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.auth-bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}
.auth-bg span:nth-child(1) {
  width: 34rem; height: 34rem; top: -12rem; left: -10rem;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
.auth-bg span:nth-child(2) {
  width: 28rem; height: 28rem; bottom: -12rem; right: -8rem;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Segundo halo en un tono vecino del acento (+45° de matiz): con el verde, turquesa; con el
   índigo, violeta rosado. Mezclar con un rosa fijo ensuciaba los acentos verdes. */
@supports (color: oklch(from red l c h)) {
  .auth-bg span:nth-child(2) { background: oklch(from var(--accent) l c calc(h + 45) / 0.32); }
}
.auth-bg span:nth-child(3) {
  width: 18rem; height: 18rem; top: 40%; left: 60%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
:root[data-theme="dark"] .auth-bg span { opacity: 0.35; }

.auth-theme-toggle { position: absolute; top: 1rem; right: 1rem; z-index: 1; }

.auth-main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  width: 100%;
  padding: 3rem 1rem;
}
.auth-card {
  width: 100%;
  max-width: 25.5rem;
  padding: 2rem 1.75rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: cp-rise 320ms var(--ease);
}
@keyframes cp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; text-align: center; }
.auth-brand .logo-mark { filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--accent) 35%, transparent)); }
.auth-title { font-size: 1.6rem; font-weight: 750; letter-spacing: -0.03em; }
.auth-subtitle { color: var(--text-muted); font-size: 0.9375rem; }
.auth-tabs { display: flex; width: 100%; margin-bottom: 1.25rem; }
.auth-form { display: flex; flex-direction: column; gap: 0; }
.auth-form > .form-alert { margin-bottom: 1rem; }
.auth-form > .btn { margin-top: 0.5rem; }
.auth-switch { margin-top: 1.1rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; }
/* §45: lo que se acepta al crear la cuenta */
.auth-legal { margin: 0.2rem 0 0.9rem; color: var(--text-muted); font-size: 0.8125rem; text-align: center; }
.auth-footnote {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 25.5rem;
  color: var(--text-subtle);
  font-size: 0.8125rem;
  text-align: center;
}

@media (max-width: 480px) {
  .auth-main { justify-content: flex-start; padding-top: 4rem; }
  .auth-card { padding: 1.5rem 1.15rem 1.25rem; border-radius: var(--radius-lg); }
}

/* --------------------------------------------------------------------------
   Shell (la zona de trabajo acoplable está en dock.css)
   -------------------------------------------------------------------------- */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}
/* Con el teclado del móvil abierto, solo lo que se ve (viewport.js): la página no tiene nada que desplazar */
:root.has-keyboard body,
:root.has-keyboard .app-root { min-height: 0; }
:root.has-keyboard .app-shell { height: var(--app-vh, 100dvh); }

.connection-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.4rem 1rem;
  background: var(--warning-soft);
  color: var(--warning-text);
  font-size: 0.8125rem;
  font-weight: 550;
}

/* Panel de salas (antes barra lateral) */
.sidebar {
  --avatar-ring: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg-elevated);
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.6rem 0.6rem 1rem;
}
.sidebar-header-actions { display: flex; align-items: center; gap: 0.1rem; }
.drawer-close { display: none; }
/* Buscador de salas plegado (SPEC §19.11): la lupa de la cabecera lo despliega */
.rooms-panel:not(.is-search-open) .sidebar-search { display: none; }
.rooms-panel.is-search-open .sidebar-search { animation: cp-soft-in var(--dur-in) var(--ease); }
.rooms-search-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-text); }
/* La lupa y el «+» de la cabecera solo en compacto: si no, van en la fila de «Salas» (SPEC §19.12) */
.rooms-panel:not(.is-compact) .sidebar-header-actions .rooms-search-toggle,
.rooms-panel:not(.is-compact) .sidebar-header-actions .rooms-new-btn { display: none; }

.sidebar-search { position: relative; padding: 0 0.75rem 0.6rem; }
.sidebar-search-icon {
  position: absolute;
  left: 1.45rem;
  top: 0.68rem;
  color: var(--text-subtle);
  pointer-events: none;
}
.sidebar-search-input.input { min-height: 0; height: 2.35rem; padding: 0.4rem 3.6rem 0.4rem 2.2rem; font-size: 0.875rem; }
.sidebar-search-kbd {
  position: absolute;
  right: 1.35rem;
  top: 0.62rem;
  pointer-events: none;
  opacity: 0.85;
}
.sidebar-search-input:focus ~ .sidebar-search-kbd,
.sidebar-search-input:not(:placeholder-shown) ~ .sidebar-search-kbd { display: none; }

.room-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.15rem 0.5rem 0.75rem;
}
.room-list-empty { padding: 1rem 0.75rem; color: var(--text-subtle); font-size: 0.875rem; text-align: center; }

.room-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: calc(0.55rem * var(--density)) 0.6rem;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.room-item:hover { background: var(--surface-2); text-decoration: none; }
.room-item:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.room-item.active { background: var(--accent-soft); }
.room-item.active::before,
.room-item.is-shown::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
/* Sala que se ve en un panel fijado (no es la activa): marca más discreta */
.room-item.is-shown::before { background: var(--border-strong); top: 32%; bottom: 32%; }
.room-item.is-drag-source { opacity: 0.5; }

.room-emoji {
  --room-color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--room-color) 17%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--room-color) 26%, transparent);
  color: var(--room-color);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
:root[data-density="compact"] .room-list .room-emoji { width: 2.15rem; height: 2.15rem; font-size: 1.05rem; border-radius: 0.65rem; }
.room-emoji-lg { width: 2.6rem; height: 2.6rem; font-size: 1.35rem; }
.room-emoji-sm { width: 1.6rem; height: 1.6rem; font-size: 0.875rem; border-radius: 0.5rem; }
.room-emoji-xs { width: 1.15rem; height: 1.15rem; font-size: 0.7rem; border-radius: 0.3rem; }
/* Sala con imagen propia (SPEC §9.10): la imagen ocupa todo el glifo con las mismas esquinas; el
   emoji queda debajo como reserva mientras carga. Un borde suave por encima separa las imágenes
   claras del fondo. */
.room-emoji.has-image { position: relative; overflow: hidden; }
.room-emoji.has-image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.room-emoji.has-img > .room-emoji-fallback { visibility: hidden; }
.room-emoji.has-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
  pointer-events: none;
}
/* Glifo dentro de una línea de texto (p. ej. «Comentarios · Gráficos de [img] Viajes») */
.room-emoji.room-emoji-inline { display: inline-grid; vertical-align: -0.2em; margin-right: 0.25em; box-shadow: none; }
/* Nombre de sala con su glifo (encabezados de menú, títulos de diálogo) */
.room-label { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; max-width: 100%; vertical-align: middle; }
.room-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.room-item-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.room-item-top, .room-item-bottom { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.room-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 560;
}
.room-item-time { flex-shrink: 0; color: var(--text-subtle); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.room-item-preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.room-item-author { color: var(--text); opacity: 0.8; }
.room-item-preview.is-system, .room-item-preview.is-empty, .room-item-preview.is-deleted { color: var(--text-subtle); font-style: italic; }
.room-item-preview.is-typing { color: var(--accent-text); font-style: italic; }
.room-item-muted { flex-shrink: 0; color: var(--text-subtle); }
/* Sobre el fondo del acento de la sala activa, --text-subtle no llega a 4,5:1 (≈ 4,3 en oscuro). */
.room-item.active .room-item-time,
.room-item.active .room-item-muted,
.room-item.active .room-item-preview.is-system,
.room-item.active .room-item-preview.is-empty,
.room-item.active .room-item-preview.is-deleted { color: var(--text-muted); }
.room-item.unread .room-item-name { font-weight: 700; }
/* SPEC §38: candado de sala privada, tras el nombre */
.room-item-lock { flex: none; color: var(--text-subtle); }
/* Con el candado, el nombre no se estira (el candado va pegado a él) y la hora sigue a la derecha */
.room-item-top:has(.room-item-lock) .room-item-name { flex: 0 1 auto; }
.room-item-top:has(.room-item-lock) .room-item-time { margin-left: auto; }
.room-item.unread .room-item-preview { color: var(--text); }
.room-item.unread .room-item-time { color: var(--accent-text); font-weight: 600; }
.room-item.unread.muted .room-item-time { color: var(--text-subtle); font-weight: 400; }

/* No leídos de los hilos: número secundario, distinto del de la sala */
.room-thread-unread {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  height: 1.25rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.room-thread-unread svg { width: 0.75rem; height: 0.75rem; }
.room-thread-unread.is-muted { background: var(--surface-3); color: var(--text-muted); }

/* Miniatura del item de un hilo (en la lista, pestañas y cabeceras) */
.thread-thumb {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border-radius: 0.7rem;
  background: var(--surface-3);
  color: var(--text-muted);
}
.thread-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Con la miniatura cargada, el icono de reserva no debe verse a través de un PNG transparente. */
.thread-thumb.has-img > svg { visibility: hidden; }
.thread-thumb-sm { width: 1.5rem; height: 1.5rem; border-radius: 0.4rem; }
.thread-thumb-sm svg { width: 0.85rem; height: 0.85rem; }
.thread-thumb-xs { width: 1.15rem; height: 1.15rem; border-radius: 0.3rem; }
.thread-thumb-xs svg { width: 0.7rem; height: 0.7rem; }
.thread-thumb-lg { width: 2.6rem; height: 2.6rem; }

.room-list-new {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin-top: 0.25rem;
  padding: calc(0.5rem * var(--density)) 0.6rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 550;
  text-align: left;
}
.room-list-new:hover { background: var(--surface-2); color: var(--text); }
.room-list-new-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px dashed var(--border-strong);
  border-radius: 0.8rem;
}
:root[data-density="compact"] .room-list-new-icon { width: 2.15rem; height: 2.15rem; }
.room-list-new:hover .room-list-new-icon { border-color: var(--accent); color: var(--accent-text); }

/* «Mis tareas» (SPEC §24.4): fila fija encima de los grupos; marcada como una sala cuando su pestaña se ve. El
   contador, en tono suave; en el acento si alguna es para hoy. En compacto, solo el icono (dock.css). */
.room-mytasks {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  width: 100%;
  margin-bottom: 0.3rem;
  padding: calc(0.35rem * var(--density)) 0.6rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  transition: background-color var(--dur) var(--ease);
}
.room-mytasks:hover { background: var(--surface-2); }
.room-mytasks:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.room-mytasks.active { background: var(--accent-soft); }
.room-mytasks.active::before,
.room-mytasks.is-shown::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.room-mytasks.is-shown::before { background: var(--border-strong); top: 32%; bottom: 32%; }
.room-mytasks-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.1rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-text);
}
:root[data-density="compact"] .room-mytasks-icon { width: 2.15rem; height: 1.85rem; border-radius: 0.65rem; }
.room-mytasks-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-mytasks-badge { background: var(--accent-soft); color: var(--accent-text); }
.room-mytasks.active .room-mytasks-badge:not(.is-due) { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.room-mytasks-badge.is-due { background: var(--accent); color: var(--accent-contrast); }

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.55rem 0.55rem 0.55rem 0.45rem;
  border-top: 1px solid var(--border);
}
.me-button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  text-align: left;
}
.me-button:hover { background: var(--surface-2); }
.me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.me-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 650; }
/* Sin punto propio: el de «en línea» ya va en el avatar (SPEC §16.6). */
.me-status { color: var(--text-subtle); font-size: 0.75rem; }
.me-status.offline { color: var(--warning-text); }

/* Pila de avatares de miembros (cabeceras de sala) */
.member-stack {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.4rem;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  transition: background-color var(--dur) var(--ease);
}
.member-stack:hover { background: var(--surface-2); }
.member-stack:hover .avatar { box-shadow: 0 0 0 2px var(--surface-2); }
.member-stack .avatar { box-shadow: 0 0 0 2px var(--bg-elevated); }
.member-stack > * + * { margin-left: -0.45rem; }
/* Número de miembros, a la derecha de las caras de quien está conectado (§61) */
.member-stack-count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.75rem;
  padding: 0 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}
.member-stack > .member-stack-count { margin-left: 0.35rem; }
.member-stack > .member-stack-count:first-child { margin-left: 0; }
/* El contador va debajo del último avatar: el relleno izquierdo extra compensa el solape. */
.member-stack-more {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 2.1rem;
  height: 1.75rem;
  padding: 0 0.4rem 0 0.75rem;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  box-shadow: 0 0 0 2px var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 650;
}

/* Contenedor de cada vista (lo recibe la factoría como `container`) */
.view-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.pane-loading { display: grid; place-items: center; flex: 1; }
.view-placeholder { display: flex; flex: 1; overflow: auto; }

@media (max-width: 899.98px) {
  .sidebar-search-kbd { display: none; }
}

/* --------------------------------------------------------------------------
   Popovers propios (emojis de reserva) y selector de color de reserva
   -------------------------------------------------------------------------- */
.emoji-fallback {
  display: grid;
  grid-template-columns: repeat(6, 2.4rem);
  gap: 2px;
  padding: 0.45rem;
}
.emoji-fallback-item {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-size: 1.35rem;
  line-height: 1;
}
.emoji-fallback-item:hover, .emoji-fallback-item:focus-visible { background: var(--surface-2); outline: none; }

.color-field { min-height: 2.25rem; }
.color-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.color-dot {
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: transform 120ms var(--ease), box-shadow var(--dur) var(--ease);
}
.color-dot:hover { transform: scale(1.08); }
.color-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--swatch); }
.color-native {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.color-native::-webkit-color-swatch-wrapper { padding: 0; }
.color-native::-webkit-color-swatch { border: 0; border-radius: 50%; }
.color-native::-moz-color-swatch { border: 0; border-radius: 50%; }

/* --------------------------------------------------------------------------
   Diálogo de sala
   -------------------------------------------------------------------------- */
.room-form-top { display: flex; align-items: flex-start; gap: 1rem; }
.room-form-top > .field:last-child { flex: 1; }
.room-form-emoji { flex-shrink: 0; }
.room-emoji-picker {
  --room-color: var(--accent);
  position: relative;
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border: 0;
  border-radius: 1.15rem;
  background: color-mix(in srgb, var(--room-color) 17%, var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--room-color) 32%, transparent);
  font-size: 2.1rem;
  line-height: 1;
  transition: box-shadow var(--dur) var(--ease);
}
/* Sin transform en :hover: promocionaba y repintaba la capa del modal (backdrop-filter) y daba tirones
   al cambiar de categoría en el selector de emojis abierto encima (SPEC §9.9, NOTAS «Ronda 3 · … emojis»). */
.room-emoji-picker:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--room-color) 55%, transparent); }
.room-emoji-picker:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--room-color), var(--focus-ring); }
.room-emoji-picker-edit {
  position: absolute;
  right: -0.3rem;
  bottom: -0.3rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text-muted);
}
.room-form-top .field:last-child .input { margin-top: 0; }
/* Imagen: de la galería o propia (SPEC §26 y §9.10); el emoji, solo en las salas de antes */
.room-icon-box { overflow: visible; color: var(--text-muted); }
.room-icon-box > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}
.room-icon-box.has-image { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.room-icon-box.has-image:focus-visible { box-shadow: inset 0 0 0 1px var(--border), var(--focus-ring); }
.room-icon-box > svg { width: 1.6rem; height: 1.6rem; }
.room-icon-box .room-emoji-picker-edit { z-index: 1; }
/* Esperando la sugerencia antes de abrir la galería (workspace/settings.js) */
.room-icon-box[aria-busy="true"] { cursor: progress; }
/* Botones junto a un icono (los usa «Ajustes del espacio») */
.room-icon-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.room-icon-actions > [hidden] { display: none; }
.room-modal.is-file-dragover { box-shadow: var(--shadow-lg), 0 0 0 2px var(--accent); }
.field-label-count { font-weight: 400; color: var(--text-subtle); }

.member-picker { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.member-picker-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; padding: 0.4rem; border-bottom: 1px solid var(--border); }
.member-picker-toolbar:has(> :not([hidden])) { display: flex; }
.member-picker-toolbar:not(:has(> :not([hidden]))) { display: none; }
.member-picker-search.input { flex: 1 1 10rem; min-height: 0; height: 2.1rem; font-size: 0.875rem; }
.member-picker-all { margin-left: auto; }
.member-picker-list { max-height: 15rem; }
/* Con buscador, altura fija: así el diálogo no cambia de tamaño mientras se filtra. */
.member-picker-list.is-searchable { height: min(15rem, 40dvh); }
.member-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: calc(0.5rem * var(--density) + 0.1rem) 0.8rem;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.member-option + .member-option { border-top: 1px solid var(--border); }
.member-option:hover { background: var(--surface-2); }
.member-option.is-locked { cursor: not-allowed; }
.member-option-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.member-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; font-weight: 560; }
.member-option-user { color: var(--text-subtle); font-size: 0.78rem; }
.member-picker-empty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0.9rem;
  color: var(--text-subtle);
  font-size: 0.875rem;
}

/* Diálogo de miembros */
.members-dialog { display: flex; flex-direction: column; gap: 1.25rem; }
.members-heading {
  margin-bottom: 0.35rem;
  color: var(--text-subtle);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.members-group { margin: 0.6rem 0 0.15rem; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; }
.member-row.is-offline .avatar { opacity: 0.55; }
.member-row.is-offline .member-name { color: var(--text-muted); }
.member-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: calc(0.6rem * var(--density)) 0;
  border-bottom: 1px solid var(--border);
}
.member-row:last-child { border-bottom: 0; }
.member-row-main { flex: 1; min-width: 0; }
.member-name { display: flex; align-items: center; gap: 0.4rem; min-width: 0; font-weight: 600; font-size: 0.9375rem; }
.member-meta { color: var(--text-subtle); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-meta.is-online { color: var(--success-text); }
.member-add-actions { display: flex; justify-content: flex-end; margin-top: 0.6rem; }

@media (max-width: 520px) {
  .hide-sm { display: none; }
}

/* --------------------------------------------------------------------------
   Preferencias
   -------------------------------------------------------------------------- */
.settings-modal { height: min(46rem, calc(100dvh - 3rem)); }
.settings-modal .modal-header { border-bottom: 1px solid var(--border); padding-bottom: 0.9rem; }
.settings-modal .modal-body { display: flex; padding: 0; overflow: hidden; }
.settings-layout { display: flex; flex: 1; min-height: 0; min-width: 0; }
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  width: 13.5rem;
  padding: 0.75rem;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 550;
  text-align: left;
  white-space: nowrap;
}
.settings-nav-item:hover { background: var(--surface-2); color: var(--text); }
.settings-nav-item.active { background: var(--accent-soft); color: var(--accent-text); }
.settings-nav-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.settings-panel { flex: 1; min-width: 0; padding: 1.4rem 1.75rem 2.5rem; }
.settings-panel:focus { outline: none; }
.settings-panel-title { margin-bottom: 1.25rem; font-size: 1.25rem; font-weight: 700; }
.settings-section { margin-bottom: 2rem; }
.settings-section:last-child { margin-bottom: 0; }
.settings-section-title { margin-bottom: 0.2rem; font-size: 0.975rem; font-weight: 650; }
.settings-section-desc { margin-bottom: 0.9rem; color: var(--text-muted); font-size: 0.85rem; }
.settings-section-title + :not(.settings-section-desc, .settings-help),
.settings-section-head + :not(.settings-section-desc) { margin-top: 0.75rem; }
/* Título con su «?» (SPEC §25.3) */
.settings-section-head { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.2rem; }
.settings-section-head > .settings-section-title { margin-bottom: 0; }
.settings-note { margin-top: 0.6rem; color: var(--text-muted); font-size: 0.8125rem; }
.settings-note-action { margin-left: 0.4rem; font-size: inherit; }
.settings-form { max-width: 32rem; }
.settings-actions { display: flex; justify-content: flex-start; gap: 0.5rem; margin-top: 0.25rem; }

.settings-rows { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0 1rem; background: var(--surface); }
.settings-row { display: flex; align-items: center; gap: 1rem; padding: 0.95rem 0; }
.settings-row + .settings-row { border-top: 1px solid var(--border); }
.settings-row-text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
/* El «?» va detrás de la última palabra del título, aunque este ocupe varias líneas */
.settings-row-head { min-width: 0; }
.settings-row-head > .settings-help { margin-left: 0.3rem; vertical-align: -0.35em; }
.settings-row-title { font-weight: 600; font-size: 0.9375rem; }
.settings-row-desc { color: var(--text-muted); font-size: 0.8125rem; line-height: 1.45; }
label.settings-row-title, label.settings-row-desc { cursor: pointer; }
/* Un control a la derecha que baja a su propia línea si no cabe (selector segmentado, botón) */
.settings-row-wrap { flex-wrap: wrap; row-gap: 0.6rem; }
.settings-row-wrap > .settings-row-text { flex-basis: 14rem; }
/* «Probar» junto a un interruptor: en pantallas estrechas, solo el icono (su nombre va en aria-label) */
@media (max-width: 520px) {
  .settings-row-test { width: var(--btn-h); padding: 0; flex-shrink: 0; }
  .settings-row-test .btn-label { display: none; }
}

/* «?» junto a un título: abre la explicación larga en un popover (SPEC §25.3) */
.settings-help {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.25rem 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-subtle);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.settings-help::after { content: ""; position: absolute; inset: -0.35rem; } /* más fácil de tocar */
.settings-help:hover,
.settings-help[aria-expanded="true"] { background: var(--surface-2); color: var(--accent-text); }
.settings-help:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.popover.settings-help-pop { max-width: min(21rem, calc(100vw - 1.5rem)); padding: 0.75rem 0.9rem; }
.settings-help-text { color: var(--text); font-size: 0.85rem; line-height: 1.55; }

/* «Más opciones» al final de cada sección: lo menos usado, plegado (SPEC §25.3) */
.settings-more { padding-top: 0.6rem; border-top: 1px solid var(--border); }
.settings-more-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: calc(100% + 1.2rem);
  min-width: 0;
  margin: 0 -0.6rem;
  padding: 0.55rem 0.6rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  text-align: left;
}
.settings-more-toggle:hover { background: var(--surface-2); }
.settings-more-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.settings-more-chevron { flex: none; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.settings-more-toggle[aria-expanded="true"] .settings-more-chevron { transform: rotate(90deg); }
.settings-more-label { flex: none; font-size: 0.9375rem; font-weight: 650; }
.settings-more-hint { min-width: 0; overflow: hidden; color: var(--text-subtle); font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.settings-more-toggle[aria-expanded="true"] .settings-more-hint { display: none; }
.settings-more-body { padding-top: 1.1rem; }

/* «Ajustes del espacio»: diálogo propio (workspace/settings-dialog.js, SPEC §25.3) */
.settings-ws-modal .modal-header { border-bottom: 1px solid var(--border); padding-bottom: 0.9rem; }
.settings-ws-modal .modal-body { padding-top: 1.2rem; }
.settings-ws-body:focus { outline: none; }

/* Notificaciones: estado de los avisos en este dispositivo (settings-dialog.js) */
.notify-status {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.75rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  font-size: 0.875rem;
  line-height: 1.5;
}
.notify-status:focus { outline: none; }
.notify-status:focus-visible { box-shadow: var(--focus-ring); }
.notify-status.is-warn { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); background: var(--warning-soft); }
.notify-status.is-ok { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); background: var(--success-soft); }
.notify-status-icon { display: flex; flex: none; margin-top: 0.1rem; color: var(--accent-text); }
.notify-status.is-warn .notify-status-icon { color: var(--warning-text); }
.notify-status.is-ok .notify-status-icon { color: var(--success-text); }
.notify-status-body { display: flex; flex: 1; flex-direction: column; gap: 0.35rem; min-width: 0; }
.notify-status-title { font-weight: 600; }
.notify-status-steps { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; padding-left: 1.25rem; list-style: decimal; }
.notify-status-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }

/* Subapartado (Ajustes del espacio › Enlaces activos) y Notificaciones › Más opciones › Instalar Chatper (SPEC §13.5) */
.settings-subsection-title { margin-bottom: 0.2rem; font-size: 0.9rem; font-weight: 650; }
.settings-row-aside { display: flex; flex: none; align-items: center; gap: 0.5rem; }
.settings-row-aside .chip svg { width: 0.9rem; height: 0.9rem; }
@media (max-width: 520px) {
  .device-install-row { flex-wrap: wrap; }
  .device-install-row .settings-row-aside { flex-basis: 100%; }
}

/* Tarjetas de tema */
.theme-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.45rem 0.45rem 0.6rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: left;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform 120ms var(--ease);
}
.theme-card:hover { border-color: var(--border-strong); }
.theme-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.theme-card-label { display: flex; align-items: center; gap: 0.45rem; padding: 0 0.3rem; font-size: 0.875rem; font-weight: 600; }
.theme-card[aria-checked="true"] .theme-card-label { color: var(--accent-text); }

.theme-preview { position: relative; height: 5.4rem; border-radius: 0.6rem; overflow: hidden; }
.tp-half { position: absolute; inset: 0; clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); }
.tp-scene { position: absolute; inset: 0; display: flex; }
/* Miniaturas fijas de cada tema (= tokens de base.css), sea cual sea el tema activo. La burbuja
   propia es el tinte suave del acento, un poco más marcado que en el chat para que se vea en
   pequeño. */
.tp-light { background: #f6f7f9; --tp-side: #ffffff; --tp-line: #e4e7ec; --tp-bubble: #ffffff; --tp-shadow: rgba(16, 24, 40, 0.1); --tp-own: color-mix(in srgb, var(--accent) 24%, #ffffff); }
.tp-dark { background: #24272e; --tp-side: #292c34; --tp-line: #3a3f49; --tp-bubble: #353a43; --tp-shadow: rgba(0, 0, 0, 0.3); --tp-own: color-mix(in srgb, var(--accent) 38%, #2d3139); }
.tp-side {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 30%;
  padding: 0.45rem 0.35rem;
  background: var(--tp-side);
  border-right: 1px solid var(--tp-line);
}
.tp-side i { display: block; height: 0.42rem; border-radius: 3px; background: var(--tp-line); }
.tp-side i:first-child { background: color-mix(in srgb, var(--accent) 45%, var(--tp-line)); }
.tp-main { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3rem; flex: 1; padding: 0.45rem; }
.tp-bubble { width: 62%; height: 0.75rem; border-radius: 0.4rem; background: var(--tp-bubble); box-shadow: 0 1px 2px var(--tp-shadow); }
.tp-bubble.own { align-self: flex-end; width: 52%; background: var(--tp-own); }
.tp-bubble.short { width: 38%; }

/* Acentos */
.accent-options { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.accent-option {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 0;
  border-radius: 50%;
  background: var(--swatch);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: transform 120ms var(--ease), box-shadow var(--dur) var(--ease);
}
.accent-option svg { opacity: 0; transform: scale(0.6); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.accent-option:hover { transform: scale(1.08); }
.accent-option[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--swatch); }
.accent-option[aria-checked="true"] svg { opacity: 1; transform: none; }
.accent-option:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--swatch), 0 0 0 7px var(--accent-soft); }

/* Fuente: lista desplegable con ejemplos (SPEC §16.3) */
.font-select {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: min(100%, 24rem);
  padding: 0.55rem 0.75rem 0.55rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.font-select:hover { border-color: var(--border-strong); }
.font-select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.font-select[aria-expanded="true"] { border-color: var(--accent); }
.font-select__text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 0.05rem; }
.font-select__name { overflow: hidden; font-size: 1.05rem; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.font-select__meta { color: var(--text-subtle); font-family: var(--font-sans); font-size: 0.75rem; }
.font-select__chevron { flex: none; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.font-select[aria-expanded="true"] .font-select__chevron { transform: rotate(180deg); }
.popover.font-select__popover { padding: 0.3rem; }
.font-select__list {
  max-height: min(22rem, 55vh);
  overflow: auto;
  overscroll-behavior: contain;
  outline: none;
  scrollbar-width: thin;
}
.font-select__option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 2.2rem 0.55rem 0.7rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
}
.font-select__option.is-active { background: var(--surface-2); }
.font-select__list:focus-visible .font-select__option.is-active { box-shadow: inset 0 0 0 2px var(--accent); }
.font-select__option[aria-selected="true"] { background: var(--accent-soft); }
.font-select__option-head { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.font-select__option-name { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.font-select__option-meta { margin-left: auto; color: var(--text-subtle); font-family: var(--font-sans); font-size: 0.72rem; white-space: nowrap; }
.font-select__option-sample { overflow: hidden; color: var(--text-muted); font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.font-select__option[aria-selected="true"] .font-select__option-meta { color: var(--text-muted); } /* sobre --accent-soft */
.font-select__check { position: absolute; top: 50%; right: 0.65rem; color: var(--accent-text); opacity: 0; transform: translateY(-50%); }
.font-select__option[aria-selected="true"] .font-select__check { opacity: 1; }

/* Contraste (SPEC §28): un deslizador con el centro marcado (el de siempre) */
.contrast-row { display: grid; gap: 0.35rem; max-width: 30rem; }
.contrast-control { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.contrast-end { flex: none; color: var(--text-subtle); font-size: 0.8rem; white-space: nowrap; }
.contrast-track { position: relative; flex: 1; min-width: 6rem; }
.contrast-track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 0.85rem;
  margin: -0.425rem 0 0 -1px;
  border-radius: 1px;
  background: var(--border-strong);
  pointer-events: none;
}
.contrast-range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--surface-3) var(--from, 50%), var(--accent) var(--from, 50%),
    var(--accent) var(--to, 50%), var(--surface-3) var(--to, 50%));
}
.contrast-range::-moz-range-track {
  background: linear-gradient(to right, var(--surface-3) var(--from, 50%), var(--accent) var(--from, 50%),
    var(--accent) var(--to, 50%), var(--surface-3) var(--to, 50%));
}
.contrast-range::-moz-range-progress { background: transparent; }
.contrast-status { display: flex; align-items: center; gap: 0.75rem; min-height: 1.25rem; }
.contrast-value { color: var(--text-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.contrast-reset[hidden] { display: none; }

/* Tamaño + vista previa */
.size-control { display: flex; align-items: center; gap: 0.85rem; max-width: 32rem; }
.size-a { color: var(--text-muted); font-weight: 650; line-height: 1; }
.size-a.small { font-size: 12px; }
.size-a.large { font-size: 22px; }
.size-value { min-width: 3.4rem; color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }

.prefs-preview {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  max-width: 32rem;
  margin-top: 1rem;
  padding: 1em;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.45;
}
.preview-day {
  align-self: center;
  padding: 0.15em 0.7em;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.75em;
  font-weight: 600;
}
.preview-msg { display: flex; align-items: flex-end; gap: 0.5em; }
.preview-msg.own { justify-content: flex-end; }
.preview-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #f97316;
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
}
.preview-bubble {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  padding: 0.5em 0.8em 0.4em;
  border-radius: 1.1em;
}
.preview-bubble.other {
  background: var(--bubble-other);
  color: var(--bubble-other-text);
  border-bottom-left-radius: 0.35em;
  box-shadow: var(--shadow-sm);
}
.preview-bubble.own {
  background: var(--bubble-own);
  color: var(--bubble-own-text);
  border-bottom-right-radius: 0.35em;
}
.preview-author { color: #ea580c; font-size: 0.8em; font-weight: 700; }
:root[data-theme="dark"] .preview-author { color: #fb923c; }
.preview-time { align-self: flex-end; margin-top: 0.1em; font-size: 0.7em; color: var(--text-muted); }
.preview-bubble.own .preview-time { color: var(--bubble-own-meta); }

/* Perfil */
.profile-avatar-row { display: flex; align-items: center; gap: 1.25rem; }
.profile-avatar { --avatar-ring: var(--surface); flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.profile-avatar:hover .avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.profile-avatar:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.profile-avatar-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.profile-avatar-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Perfil › «Así te ven los demás» (SPEC §9.14): un trocito de chat con las clases reales de chat.css
   (.chat, .msg, .msg-bubble, .msg-author, .msg-quote…), con la fuente y el tamaño actuales. */
.profile-preview {
  margin-top: 0.85rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.profile-preview-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
.profile-preview-title > svg { flex: none; }
.chat.profile-preview-chat {
  flex: none;
  height: auto;
  padding: 0.1rem 0.85rem 0.85rem;
  pointer-events: none;
}
.profile-preview-chat .msg-content { max-width: min(26rem, 88%); }
.profile-preview-note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.profile-preview-note .avatar { --avatar-ring: var(--surface); flex: none; }

/* Chat › «Mostrar «Mensaje eliminado» durante» (SPEC §9.17): el selector baja si no cabe */
.settings-row-select { flex-wrap: wrap; }
.settings-select { flex: 0 1 auto; width: auto; min-width: 12.5rem; max-width: 100%; }
@media (max-width: 520px) {
  .settings-select { flex: 1 1 100%; }
}

/* Administración */
.admin-loading { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 0; color: var(--text-muted); }
.admin-table { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 8.5rem 2.25rem;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.75rem 0.65rem 0.9rem;
}
.admin-row + .admin-row { border-top: 1px solid var(--border); }
.admin-row.is-disabled .admin-user { opacity: 0.55; }
.admin-cell { min-width: 0; }
.admin-user { display: flex; align-items: center; gap: 0.7rem; }
.admin-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.admin-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.9rem; }
.admin-user-handle { color: var(--text-subtle); font-size: 0.78rem; }
.admin-date { font-size: 0.8rem; white-space: nowrap; }

/* Administración › Sistema */
.admin-system-list { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.admin-system-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: calc(0.65rem * var(--density) + 0.1rem) 0.85rem;
}
.admin-system-row + .admin-system-row { border-top: 1px solid var(--border); }
.admin-system-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-muted);
}
.admin-system-text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.35; }
.admin-system-label { color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }
.admin-system-value { font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.admin-system-hint { margin-top: 0.1rem; color: var(--text-subtle); font-size: 0.78rem; }
.admin-system-row > .chip { flex-shrink: 0; }
.admin-system-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }

@media (max-width: 760px) {
  .settings-modal .modal-body { flex-direction: column; }
  .settings-layout { flex-direction: column; }
  .settings-nav {
    flex-direction: row;
    width: auto;
    padding: 0.5rem;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav.has-more-end { mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
  .settings-nav.has-more-start { mask-image: linear-gradient(to right, transparent, #000 2.5rem); }
  .settings-nav.has-more-start.has-more-end { mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
  .settings-nav-item { width: auto; gap: 0.45rem; padding: 0.5rem 0.65rem; }
  .settings-panel { padding: 1.1rem 1.1rem 2rem; }
  .settings-panel-title { display: none; }
  .theme-cards { gap: 0.5rem; }
  .theme-preview { height: 4.4rem; }
  .font-select { width: 100%; }
  .admin-row { grid-template-columns: minmax(0, 1fr) auto 2.25rem; row-gap: 0.4rem; }
  .admin-row .admin-cell:nth-child(2) { grid-column: 2; grid-row: 1; }
  .admin-row .admin-cell:nth-child(3) { grid-column: 1; grid-row: 2; padding-left: 3.1rem; }
  .admin-row .admin-date { grid-column: 2 / 4; grid-row: 2; text-align: right; }
  .admin-row .admin-actions { grid-column: 3; grid-row: 1; }
  .field-row { flex-direction: column; gap: 0; }
}

@media (max-width: 520px) {
  /* Los 8 acentos en una sola fila: encogen por igual si no caben */
  .accent-options { flex-wrap: nowrap; gap: 0.5rem; }
  .accent-option { flex: 0 1 2.35rem; width: auto; height: auto; min-width: 0; aspect-ratio: 1; }
}

@media (max-width: 420px) {
  .theme-card-label { font-size: 0.8rem; gap: 0.3rem; }
  .profile-avatar-row { align-items: flex-start; }
  .room-form-top { gap: 0.75rem; }
}

/* «Pestañas de la sala» en «Editar sala» (SPEC §21.7): un interruptor por función; el chat, fijo */
.room-features-list {
  display: grid;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}
.room-feature {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
}
.room-feature + .room-feature { border-top: 1px solid var(--border); }
.room-feature-icon { display: grid; place-items: center; flex: none; color: var(--text-muted); }
.room-feature-text { display: flex; flex-direction: column; gap: 0.05rem; flex: 1; min-width: 0; cursor: pointer; }
.room-feature-name { font-weight: 600; }
.room-feature-hint { color: var(--text-muted); font-size: 0.8125rem; }
.room-feature .switch { flex: none; }
.room-feature.is-fixed .room-feature-text { cursor: default; }
/* El chat siempre está: el interruptor encendido, sin aspecto de «no se puede» */
.room-feature.is-fixed .switch:disabled { opacity: 0.55; }

/* SPEC §46: lo que tiene la sala abierta, en árbol debajo de su fila */
.room-contents {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0.1rem 0 0.35rem 2.35rem;
  padding-left: 0.5rem;
  border-left: 1.5px solid var(--border);
}
.room-leaf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: calc(0.28rem * var(--density) + 0.05rem) 0.45rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.room-leaf:hover { background: var(--surface-2); color: var(--text); }
.room-leaf:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.room-leaf-icon { flex: none; color: var(--text-subtle); }
.room-leaf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-leaf-note { flex: none; color: var(--text-subtle); font-size: 0.75rem; }
.room-leaf-live {
  flex: none;
  padding: 0 0.4rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, #f97316 16%, transparent);
  color: color-mix(in srgb, #c2410c, var(--text) 18%);   /* ≥ 4,8:1, también sobre la hoja con el puntero encima */
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2rem;
}
/* En oscuro, un naranja claro (como .preview-author): ≥ 4,9:1 sobre --bg-elevated y --surface-2 con todos los acentos */
:root[data-theme="dark"] .room-leaf-live { color: color-mix(in srgb, #fb923c, var(--text) 40%); }

/* §56: alguien con el micro encendido en la llamada de la sala («En llamada», call.css); las pizarras ya no tienen voz */
.room-live-mic { flex: none; }
.room-live-pill .room-live-mic { margin-left: 0.15rem; }