/* ════════════════════════════════════════════════════════════════════
   sheets.css — SISTEMA ÚNICO DE DESPLEGABLES
   Todos los menús desplegables (hojas inferiores, menús de acciones y
   popups de confirmación) comparten ahora el estilo del menú del MD:
     · hoja  #1d2026, esquinas 22px, "pill" 44×5
     · tarjetas #22252b, esquinas 16px, filas de 16px de alto de relleno
     · texto semibold 1.02rem, iconos del mismo color que el texto
     · separadores finos que empiezan DESPUÉS del icono
     · acciones destructivas en rosa (#f5476b)
   Se carga el último (después de los CSS y <style> de cada página) y por
   eso los selectores llevan el prefijo "html " para ganar a los antiguos.
   Para un desplegable nuevo usa las clases .fx-sheet / .fx-card / .fx-row.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --fx-sheet-bg: #1d2026;
  --fx-card-bg: #22252b;
  --fx-line: rgba(255, 255, 255, .06);
  --fx-text: #f2f3f5;
  --fx-muted: #7c818b;
  --fx-danger: #f5476b;
  --fx-pill: #4a4d54;
  --fx-r-sheet: 22px;
  --fx-r-card: 16px;
  --fx-row-size: 1.02rem;
}

/* ── Componentes reutilizables (los usan dmMenu.js, dmChat.js y el menú de mensaje) ── */
html .fx-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: none; align-items: flex-end; justify-content: center; }
html .fx-overlay.open { display: flex; }
html .fx-sheet {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--fx-sheet-bg); border-radius: var(--fx-r-sheet) var(--fx-r-sheet) 0 0;
  padding: 6px 14px calc(18px + env(safe-area-inset-bottom));
}
html .fx-pill { width: 44px; height: 5px; border-radius: 3px; background: var(--fx-pill); margin: 6px auto 14px; flex-shrink: 0; }
html .fx-label { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fx-muted); padding: 4px 6px 10px; }
html .fx-card { background: var(--fx-card-bg); border-radius: var(--fx-r-card); overflow: hidden; margin-bottom: 12px; }
html .fx-row {
  position: relative; width: 100%; display: flex; align-items: center; gap: 16px;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 16px; color: var(--fx-text); font-family: inherit; font-size: var(--fx-row-size); font-weight: 600;
}
html .fx-row + .fx-row::before { content: ""; position: absolute; top: 0; left: 52px; right: 16px; height: 1px; background: var(--fx-line); }
html .fx-row:active { background: rgba(255, 255, 255, .05); }
html .fx-ic { width: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--fx-text); }
html .fx-row.dis, html .fx-row.dis .fx-ic { color: var(--fx-muted); cursor: default; }
html .fx-row.danger, html .fx-row.danger .fx-ic { color: var(--fx-danger); }

/* ── Hoja de acciones del menú de mensaje (reacciones rápidas arriba) ── */
html .fx-quick { display: flex; align-items: center; gap: 8px; padding: 4px 2px 14px; overflow-x: auto; scrollbar-width: none; }
html .fx-quick::-webkit-scrollbar { display: none; }
html .fx-qbtn {
  background: var(--fx-card-bg); border: none; border-radius: 14px; width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .12s;
}
html .fx-qbtn:active { transform: scale(.92); }

/* ── Popup centrado de confirmación ── */
html .fx-modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); display: flex; align-items: center; justify-content: center; padding: 20px; }
html .fx-modal { width: 100%; max-width: 420px; background: #1b1d22; border: 1px solid #2d3037; border-radius: var(--fx-r-sheet); padding: 26px 24px 24px; color: var(--fx-text); }
html .fx-modal h3 { margin: 0; font-size: 1.45rem; font-weight: 800; }
html .fx-modal p { margin: 0; font-size: 1.05rem; line-height: 1.5; color: #b5bac1; }
html .fx-btn { width: 100%; height: 48px; border-radius: 13px; font-family: inherit; font-weight: 700; font-size: 1.02rem; cursor: pointer; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; }
html .fx-btn.danger { background: #cc3438; color: #fff; }
html .fx-btn.ghost { background: #2a2e36; border-color: #3a3e48; color: var(--fx-text); }

/* ════════════════════════════════════════════════════════════════════
   Desplegables YA existentes → mismo aspecto
   ════════════════════════════════════════════════════════════════════ */

/* ── Hojas (contenedor) ── */
html .sm-sheet, html .cc-sheet, html .lb-sheet, html .attach-sheet, html .voice-sheet,
html #pmSheet, html #rmSheet, html #afSheet {
  background: var(--fx-sheet-bg);
  border-radius: var(--fx-r-sheet) var(--fx-r-sheet) 0 0;
}
html .ce-sheet { background: var(--fx-sheet-bg); }

/* ── Pill de arrastre ── */
html .sm-handle, html .cc-handle, html .lb-sheet-handle {
  width: 44px; height: 5px; border-radius: 3px; background: var(--fx-pill); margin: 12px auto 14px;
}
html #pmSheet .pv-drag-pill, html #rmSheet .pv-drag-pill, html #afSheet .pv-drag-pill, html .attach-sheet .pv-drag-pill {
  width: 44px; height: 5px; border-radius: 3px; background: var(--fx-pill);
}
html .voice-sheet-pill { width: 44px; height: 5px; border-radius: 3px; background: var(--fx-pill); }

/* ── Grupos = tarjetas ── */
html .sm-group, html .cc-group, html .ms-card, html .ce-section-group {
  background: var(--fx-card-bg); border-radius: var(--fx-r-card); overflow: hidden; margin-left: 14px; margin-right: 14px; margin-bottom: 12px;
}
html #pmSheet .ms-card, html .ms-card { margin-left: 0; margin-right: 0; }

/* ── Filas ── */
html .sm-item, html .cc-item, html .ce-section-item, html .picker-sheet-item, html .ms-row, html .lb-sheet-item, html .attach-sheet-item {
  position: relative; gap: 16px; padding: 16px; font-family: inherit;
  font-size: var(--fx-row-size); font-weight: 600; color: var(--fx-text);
}
html .sm-item svg, html .cc-item svg, html .ce-section-item svg { opacity: 1; width: 22px; height: 22px; }
html .ms-row-icon, html .lb-sheet-icon, html .attach-sheet-icon { color: var(--fx-text); width: 24px; }
html .sm-item:active, html .cc-item:active, html .ce-section-item:active, html .ms-row:active, html .lb-sheet-item:active, html .picker-sheet-item:active {
  background: rgba(255, 255, 255, .05);
}
/* separadores finos que empiezan después del icono */
html .sm-item + .sm-item, html .cc-item + .cc-item, html .ce-section-item + .ce-section-item { border-top: none; }
html .ms-row { border-bottom: none; }
html .sm-item + .sm-item::before, html .cc-item + .cc-item::before, html .ce-section-item + .ce-section-item::before,
html .ms-card .ms-row + .ms-row::before {
  content: ""; position: absolute; top: 0; left: 52px; right: 16px; height: 1px; background: var(--fx-line);
}
/* destructivas */
html .sm-item.danger, html .cc-item.danger, html .ce-section-item.danger, html .ms-row-danger, html .ms-row-danger .ms-row-icon,
html .sm-item.danger svg, html .cc-item.danger svg { color: var(--fx-danger); }

/* ── Hoja "Subir archivo": cada opción como tarjeta ── */
html .attach-sheet-body { padding: 8px 14px calc(22px + env(safe-area-inset-bottom)); gap: 10px; }
html .attach-sheet-item { background: var(--fx-card-bg); border: none; border-radius: var(--fx-r-card); }
html .attach-sheet-item:hover { background: var(--fx-card-bg); }
html .attach-sheet-item:active { background: #2a2e36; }

/* ── Opciones de medios (visor de imagen / vídeo) ── */
html .lb-sheet { padding: 0 14px calc(18px + env(safe-area-inset-bottom)); }
html .lb-sheet-title { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fx-muted); text-align: left; padding: 4px 6px 12px; }
html .lb-sheet-divider { display: none; }
html .lb-sheet-item { background: var(--fx-card-bg); border-radius: var(--fx-r-card); margin-bottom: 10px; width: 100%; }
html .lb-sheet-icon { background: none; width: 24px; height: 24px; border-radius: 0; }

/* ── Voz ── */
html .voice-sheet { padding-left: 14px; padding-right: 14px; }
html .voice-sheet-action-card { background: var(--fx-card-bg); border-radius: var(--fx-r-card); }
html .voice-sheet-action-card:hover { background: var(--fx-card-bg); }

/* ── Popups centrados antiguos → popup de confirmación unificado ── */
html .sm-popup-box { background: #1b1d22; border: 1px solid #2d3037; border-radius: var(--fx-r-sheet); }

/* ── Tema claro: lo que se crea fuera de #app se invierte igual que el resto ── */
body.fluxer-theme-light .fx-overlay, body.fluxer-theme-light .fx-modal-bg,
body.fluxer-theme-light #msgMenuOverlay, body.fluxer-theme-light #msgMenuSheet {
  filter: invert(1) hue-rotate(180deg);
}
body.fluxer-theme-light .fx-overlay img, body.fluxer-theme-light .fx-modal-bg img,
body.fluxer-theme-light #msgMenuSheet img { filter: invert(1) hue-rotate(180deg); }

/* ── Administrar roles (rmSheet): pill separada del título, tarjeta a todo el ancho y altura mínima ── */
html #rmSheet { min-height: 52vh; display: flex; flex-direction: column; }
html #rmSheet .rm-title {
  padding: 34px 16px 16px; font-size: 1.15rem; font-weight: 800; color: var(--fx-text);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
html #rmSheet .rm-body { padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); flex: 1; }
html #rmSheet .rm-card { background: var(--fx-card-bg); border-radius: var(--fx-r-card); margin: 0; }
html #rmSheet .rm-role-row { position: relative; padding: 16px; gap: 16px; border-bottom: none; }
html #rmSheet .rm-role-row + .rm-role-row::before { content: ""; position: absolute; top: 0; left: 48px; right: 16px; height: 1px; background: var(--fx-line); }
html #rmSheet .rm-role-name { font-size: var(--fx-row-size); font-weight: 600; color: var(--fx-text); }
html #rmSheet .rm-role-dot { width: 18px; height: 18px; }

/* ── "Ver perfil de la comunidad / Copiar…" (pmSheet) y "Agregar amigo" (afSheet): el pill no tapa el contenido ── */
html #pmSheet > div[style] { padding-top: 34px !important; }