/* ========================================
   1. VARIABLES & RESET
   ======================================== */

:root {
    /* Brand Colors */
    --naranja-chatear: #ff8c00;
    --naranja-hover: #e67e00;         /* Was hardcoded: used in btn hover, unread-badge */

    /* Backgrounds & Text */
    --gris-fondo: #f0f2f5;
    --blanco-tarjeta: #ffffff;
    --texto-principal: #333333;
    --texto-ayuda: #888888;

    /* Links & Accents */
    --azul-enlaces: #4a90e2;
    --azul-accion: #3498db;           /* Standardized: used throughout for actions/nav */
    --azul-hover: #2980b9;            /* FIX: was referenced but undefined (.info-nick:hover) */
    --color-primario: #3498db;        /* FIX: was referenced but undefined (.card-header) */

    /* Feedback */
    --rojo-error: #ff4b2b;            /* Standardized: used 8+ times for error states */

    /* Sidebar */
    --sidebar-fondo: #2c3e50;
    --sidebar-texto: #ffffff;
    --sidebar-width: 220px;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Allow auto scroll if content overflows */
    background-color: var(--sidebar-fondo);
}

/* Global utility: hide any element */
.hidden { display: none !important; }


/* ========================================
   2. BASE & TYPOGRAPHY
   ======================================== */

/* Validation states for password fields */
.pass-coincide {
    border: 2px solid #2ecc71 !important; /* Green: passwords match */
}
.pass-no-coincide {
    border: 2px solid var(--rojo-error) !important; /* Red: mismatch */
}

/* Error border applied via JS on invalid fields */
.error-borde {
    border: 2px solid var(--rojo-error) !important;
}

/* Error outline for checkbox/label validation */
.error-checkbox {
    outline: 2px solid var(--rojo-error) !important;
    border-radius: 4px;
}

/* Inline error message below inputs */
.error-message {
    display: block;
    color: var(--rojo-error);
    font-size: 0.8rem;
    margin-top: 4px;
    margin-bottom: 8px;
    font-weight: 500;
}

/* Status dot color classes */
.dot-online       { background-color: #2ecc71; }
.dot-ausente      { background-color: #f1c40f; }
.dot-no-molestar  { background-color: #e74c3c; }
.dot-offline      { background-color: #95a5a6; }

/* Nav-locked state: disables all interaction and dims element */
.nav-locked-extreme {
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.2 !important;
    filter: grayscale(100%) !important;
    user-select: none !important;
}

/* Helper utility classes */
.mt-15     { margin-top: 15px; }
.full-width { width: 100%; }


/* ========================================
   3. LAYOUT (sidebar, panels, grids)
   ======================================== */

/* Full-screen app shell */
#app-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--gris-fondo);
    overflow: hidden;
    z-index: 9999;
    display: flex;
}

/* Status view fills its parent */
#status-view {
    width: 100%;
    height: 100%;
    display: flex;
}

/* Status layout: sidebar + main side by side */
.status-layout {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Prevent scroll during sidebar animations */
    transition: margin-left 0.4s ease-in-out;
    position: relative;
}

/* ── LEFT SIDEBAR ── */
.sidebar-left {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--sidebar-fondo);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Mobile toggle button: hidden on desktop, shown on mobile via media query */
.sidebar-toggle-btn {
    display: none;
}

/* Profile block at the top of the sidebar */
.profile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    flex-shrink: 0; /* Never compress the profile area */
}

/* Square profile picture and webcam preview share the same style */
.profile-pic, #webcam-preview {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background-color: #3e5871;
    display: block;
    margin: 0 auto;
}

/* Nick below the avatar */
#sidebar-nick {
    margin: 0;
    line-height: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

/* Nick + status-dot row */
.nick-status-container {
    position: relative; /* Positioning context for #status-menu */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 5px 10px;
    z-index: 50;
}

/* Small colored dot indicating user status */
.status-indicator {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 1px; /* Micro-align with text baseline */
}

/* Dropdown menu for status selection */
#status-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    background: var(--sidebar-fondo);
    border-radius: 5px;
    z-index: 1000;
    padding: 5px;
    width: 150px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
#status-menu div {
    padding: 8px;
    cursor: pointer;
    color: #fff;
    border-radius: 4px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
#status-menu div::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
#status-menu div[data-estado="online"]::before    { background: #2ecc71; }
#status-menu div[data-estado="ausente"]::before   { background: #f1c40f; }
#status-menu div[data-estado="noMolestar"]::before { background: #e74c3c; }
#status-menu div:hover {
    background: rgba(255,255,255,0.12);
}

/* Row of action icons (pencil, settings, users, etc.) */
.user-profile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

.action-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    color: #95a5a6;
}

/* Ensure both <i> and <div> action buttons size identically */
.action-icons i,
.sidebar-icon-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin: 0;
    padding: 0;
}

/* Icon inside a div-button: auto size, no fixed box */
.sidebar-icon-btn i {
    width: auto;
    height: auto;
    font-size: 1.1rem;
}

/* Hover effect on all action icons */
.action-icons i:hover,
.sidebar-icon-btn:hover i {
    color: #ecf0f1;
    transform: scale(1.15);
}

/* Settings cog: rotate on hover instead of just scale */
#btn-nav-settings:hover i {
    transform: rotate(45deg) scale(1.15);
    color: var(--azul-accion);
}

/* Hardware controls row (webcam + mic) */
.hardware-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 5px;
}

.control-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #bdc3c7;
}

/* ON/OFF toggle button */
.toggle-btn {
    background: #e74c3c;
    border: none;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.7rem;
}

/* ── RADIO MINI PLAYER ── */
.radio-mini-player {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    background: rgba(15, 15, 15, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0 10px;
    height: 32px;
    gap: 10px;
    margin-top: 10px;
}

#radio-play-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer !important;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

/* Visualizer bars */
.visualizer-mini {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 16px;
    height: 12px;
    flex-shrink: 0;
}
.visualizer-mini .bar {
    width: 2px;
    height: 3px;
    background: #00ffcc;
    border-radius: 1px;
}
.visualizer-mini.playing .bar {
    animation: bounce-mini 0.8s ease infinite alternate;
    background: #00ffcc;
}
.visualizer-mini.playing .bar:nth-child(1) { animation-delay: 0.4s; }
.visualizer-mini.playing .bar:nth-child(2) { animation-delay: 0.6s; }
.visualizer-mini.playing .bar:nth-child(3) { animation-delay: 0.35s; }
.visualizer-mini.playing .bar:nth-child(4) { animation-delay: 0.5s; }

/* Scrolling song title */
.marquee-mini {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.marquee-mini span {
    display: inline-block;
    font-size: 10px;
    color: #999;
    font-weight: 500;
    animation: marquee-mini 15s linear infinite;
    padding-left: 10%;
}

/* Horizontal divider between profile area and nav */
.profile-divider {
    width: 100%;
    height: 3px;
    background-color: #34495e;
    margin-top: 10px;
    margin-bottom: 0;
}

/* ── SIDEBAR NAVIGATION ── */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    flex-grow: 1;      /* Fills remaining sidebar height */
    min-height: 0;     /* CRÍTICO: sin esto flexbox no recorta y no hay scroll */
    overflow-y: auto;  /* Scroll only in nav area */
    padding-right: 5px;
    scrollbar-width: thin; /* Firefox */
}
.sidebar-nav::-webkit-scrollbar       { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

/* "Listado de Salas" link item */
.nav-action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: var(--azul-accion);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 5px; /* Merged from duplicate block */
}
.nav-action-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

/* Section titles (Mis Salas, Mis Privados) */
.nav-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin-top: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ecf0f1;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.nav-section-title:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.title-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Channel/private count badge in section title */
.total-count {
    font-size: 1rem;
    font-weight: 700;
    color: var(--azul-accion);
    flex-shrink: 0;
}

/* Collapse chevron: rotates -90° when section is collapsed */
.toggle-icon {
    transition: transform 0.3s ease;
    font-size: 0.8em;
}
.nav-section.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

/* ── NAV LIST (channels & privates) ── */
.nav-list {
    overflow-y: auto;
    flex-grow: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-list.hidden {
    display: none;
}
.nav-list li {
    padding: 10px;
    color: #ecf0f1;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}
.nav-list li:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Channel name span in nav: flex to align status dot + text */
/* NOTE: .channel-name is also used for h4 in channel list view (see VIEWS section) */
.channel-name, .user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
/* Canales en sidebar: ocupa todo el espacio libre → elimina el hueco invisible entre nombre
   y badge que provocaba que el clic no llegara a ningún handler */
#lista-salas li .channel-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Badge de canales: no se comprime con nombres largos */
#lista-salas .unread-badge {
    flex-shrink: 0;
}

/* On row hover: turn unread badge red with ✕ */
.nav-list li:hover .unread-badge {
    background-color: rgba(231, 76, 60, 0.8);
}
.nav-list li:hover .unread-badge::before {
    content: "✕";
}

/* Unread message badge */
.unread-badge {
    margin-left: auto;
    background-color: #e67e22;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    position: relative;
    display: inline-block;
    transition: all 0.2s ease;
    cursor: pointer;
}
.unread-badge[data-count="0"] {
    background-color: rgba(150, 150, 150, 0.5);  /* Gris tenue cuando 0 */
    color: rgba(255,255,255,0.7);
}
.nav-list li:hover .unread-badge[data-count="0"] {
    background-color: rgba(231, 76, 60, 0.8);
    color: white;
}
.unread-badge::before {
    content: attr(data-count); /* Pulls number from data-count attribute */
}
.unread-badge:hover {
    background-color: #e74c3c !important; /* Red on hover signals "close" action */
}

/* Nick in private list: padding handled by parent flex gap */
.user-nick {
    position: relative;
    padding-left: 0;
}

/* Status dot (online/away/etc.) in private user list */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 1px;
    flex-shrink: 0;
    background-color: #95a5a6; /* Default: offline grey */
    transition: background-color 0.3s ease;
}

/* ── RIGHT MAIN CONTAINER ── */
.main-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--gris-fondo);
    transition: margin-left 0.4s ease-in-out;
    overflow: hidden;
    width: 100%;
}

/* Orange top bar */
.top-bar {
    background-color: var(--naranja-chatear);
    height: 45px;
    min-height: 45px; /* Never let content compress it */
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 100;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0; /* Allow title to shrink if needed */
}

.top-bar-actions {
    flex-shrink: 0; /* Bell icon never shrinks */
    margin-left: 10px;
    display: flex;
    align-items: center;
}

/* ── BOTÓN REGÍSTRATE (topbar, solo invitados) ── */
.btn-register-topbar {
    background: rgba(255, 255, 255, 0.12);
    color: #111;
    border: 1px solid rgba(0, 0, 0, 0.18);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    margin-right: 8px;
    white-space: nowrap;
}
.btn-register-topbar:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.btn-register-pulse {
    animation: pulse-register 0.4s ease 3;
}
@keyframes pulse-register {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0   rgba(255, 140, 0, 0.7); }
    50%  { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(255, 140, 0, 0);  }
    100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(255, 140, 0, 0);   }
}

/* ── Botón Premium (topbar) ─────────────────────────────────────────── */
.btn-premium-topbar {
    background: linear-gradient(135deg, #f6c90e 0%, #e8a000 100%);
    color: #3a2800;
    border: 1px solid rgba(230, 160, 0, 0.5);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    margin-right: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(230, 160, 0, 0.35);
}
.btn-premium-topbar i {
    font-size: 0.85rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.btn-premium-topbar:hover {
    background: linear-gradient(135deg, #ffe033 0%, #f5b800 100%);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(230, 160, 0, 0.55);
}
.btn-premium-topbar:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(230, 160, 0, 0.35);
}

/* Bell / notification button */
.nav-notif-btn {
    position: relative;
    cursor: pointer;
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}
.nav-notif-btn:hover {
    transform: scale(1.1);
}

/* Red dot on notification bell */
.badge-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #e74c3c;
    color: white;
    font-size: 0.65rem;
    min-width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--naranja-chatear);
}

.user-info-area {
    min-width: 0; /* Required so long nicks don't push the bell off-screen */
    flex: 1;
}

/* Current view title in top bar */
#display-nick {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    font-weight: bold;
}

/* Bubble toggle button for sidebar (shown on mobile) */
.notif-bubble {
    position: relative;
    background-color: #1abc9c;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 5px 5px 5px 0; /* Chat-bubble shape */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
/* Arrow tip of the bubble */
.notif-bubble::after {
    content: '';
    position: absolute;
    left: -5px;
    bottom: 5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #1abc9c;
    transition: all 0.3s ease;
}
/* Flip arrow when sidebar is open */
:root:has(.sidebar-visible-left) .notif-bubble::after {
    left: 35px;
    border-right: 5px solid transparent;
    border-left: 5px solid #1abc9c;
}

/* Main content area */
.content {
    flex-grow: 1;
    overflow: hidden;
    background-color: var(--blanco-tarjeta);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    width: 100%;
}

/* ── APP SECTIONS (views within .content) ── */
.app-section {
    width: 100%;
    height: 100%;
    padding: 25px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Content starts from top, below orange bar */
    gap: 20px;
    box-sizing: border-box;
    animation: fadeInView 0.3s ease-out; /* forwards eliminado: transf en keyframe rompía position:fixed de los pickers */
}

/* Thin custom scrollbar for app sections */
.app-section::-webkit-scrollbar       { width: 6px; }
.app-section::-webkit-scrollbar-track { background: transparent; }
.app-section::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.app-section::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Specific grid for email + birth date fields */
.grid-email-birth {
    display: grid;
    grid-template-columns: 1fr 350px; /* Email crece, fecha con ancho fijo */
    gap: 30px;
    margin-bottom: 20px;
    align-items: start;
}
.grid-email-birth .input-group:first-child {
    width: 100%;
    max-width: 480px;
}
.grid-email-birth .input-group:last-child {
    justify-self: stretch;
    text-align: left;
}


/* ========================================
   4. COMPONENTS (buttons, inputs, cards)
   ======================================== */

/* ── AUTH INPUTS ── */
.input-icon-group { position: relative; width: 100%; }

/* Login/register input fields */
.login-container input[type="text"],
.login-container input[type="password"],
.login-container input[type="email"],
.login-container input[type="date"] {
    width: 100%;
    padding: 14px 45px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #fafafa;
    color: #333;
    font-size: 1rem;
    outline: none;
    transition: border 0.3s;
    height: 50px;
}
.login-container input:focus {
    border-color: var(--naranja-chatear);
}

/* Wrapper that positions icon + input + eye/info toggle */
.input-wrapper {
    position: relative;
    width: 100%;
}
.input-wrapper input {
    width: 100%;
    padding-left: 38px;  /* Space for left icon */
    padding-right: 38px; /* Space for right toggle icon */
    box-sizing: border-box;
}

/* Left icon inside an input wrapper */
.input-icon-main {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Icon doesn't intercept clicks */
    color: #888;
}

/* Eye toggle and info icon (right side of input) */
.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    z-index: 5;
}

/* Info (ⓘ) icon for nick field */
.info-nick {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    z-index: 5;
}
.info-nick:hover {
    color: var(--azul-hover);
}

/* Disabled input: greyed out, no interaction */
input:disabled {
    background-color: #f0f0f0;
    opacity: 0.6;
    cursor: not-allowed;
    border: 1px solid #ddd;
}

/* ── TOOLTIP (nick help popup) ── */
.nick-tooltip {
    position: absolute;
    background: #333;
    color: white;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    width: 200px;
    bottom: 120%; /* Appears above the input */
    right: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* Arrow pointing down toward input */
.nick-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 15px;
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}
.tooltip-visible {
    opacity: 1;
}

/* ── BUTTONS ── */

/* Primary auth button (CHATEAR, REGISTRARME, etc.) */
.btn-principal {
    width: 100%;
    background: var(--naranja-chatear);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
}
.btn-principal:hover {
    background-color: var(--naranja-hover);
}

/* Small primary button with gradient (Crear Sala) */
.btn-primary-sm {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-primary-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(110, 142, 251, 0.4);
}

/* Enter channel button */
.btn-enter-channel {
    background: transparent;
    border: 2px solid #6e8efb;
    color: #6e8efb;
    padding: 6px 18px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-enter-channel:hover {
    background: #6e8efb;
    color: white;
}

/* Save / Cancel buttons (used in edit-bubble and forms) */
.btn-save {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: #fff;
    border: none;
    padding: 9px 22px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    letter-spacing: 0.02em;
}
.btn-save:hover { opacity: 0.88; transform: translateY(-1px); }

.btn-cancel {
    background: transparent;
    color: #888;
    border: 1.5px solid #ccc;
    padding: 9px 22px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-cancel:hover { background: #f5f5f5; color: #555; border-color: #bbb; }

/* Shake animation class applied by JS on input error */
.shake-animation {
    animation: shake-error 0.4s ease-in-out;
}

/* ── FORM ELEMENTS ── */

/* Checkbox + label row */
.checkbox-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--texto-ayuda);
}

/* Footer link row in auth containers */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-links a {
    color: var(--azul-enlaces);
    text-decoration: none;
    font-size: 0.9rem;
}

/* Input group: label + input block inside settings cards */
.input-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
}

/* Settings field with integrated privacy selector */
.field-with-privacy {
    display: flex;
    gap: 5px; /* Reduced gap to give input more space */
    align-items: center;
    width: 100%;
}
.field-with-privacy input,
.field-with-privacy select,
.field-with-privacy textarea {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}
.field-with-privacy input {
    min-width: 0; /* Prevents flex overflow */
    flex: 1;
}
.field-with-privacy select:not(.privacy-select) {
    border-radius: 8px 0 0 8px;
}

/* Compact emoji privacy selector (🌍/👥/🔒) */
.privacy-select {
    width: 55px !important;
    flex-basis: 55px;
    flex-shrink: 0;
    background-color: #f9f9f9;
    border: 1px solid #eee !important;
    border-left: none !important; /* Visually joins with the input */
    border-radius: 0 8px 8px 0;
    padding: 5px !important;
    cursor: pointer;
    text-align: center;
    font-size: 1.1rem; /* Emoji visibility */
    transition: background 0.2s;
    outline: none;
}

/* Wider privacy selector in social networks footer */
.privacy-select-wide {
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    color: #333;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}
.privacy-select-wide:hover {
    border-color: var(--azul-accion);
    background-color: #fff;
}

/* Social network inputs (Facebook, Instagram, etc.) */
.social-input {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0 10px;
}
.social-input i {
    width: 30px;
    color: #555;
    font-size: 1.1rem;
}
.social-input input {
    border: none;
    background: transparent;
    padding: 10px;
    width: 100%;
    outline: none;
}

/* Social network section footer with global visibility selector */
.social-privacy-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.social-privacy-footer span {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

/* Password change section block */
.password-change-section {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin-top: 20px;
}

.password-flex-row {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap; /* Keep both fields on same line */
    align-items: flex-start;
}
.password-flex-row .input-group {
    flex: 1;
    min-width: 0;
}

/* Password input with eye icon */
.password-wrapper {
    position: relative;
    width: 100%;
}
.password-wrapper input {
    width: 100% !important;
    height: 38px;
    padding-right: 35px !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.password-wrapper .toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    font-size: 0.9rem;
}

/* Settings cards */
.settings-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.card-header {
    background: #fcfcfc;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    color: var(--color-primario); /* Uses --color-primario (now defined in :root) */
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-body { padding: 20px; }

/* Sticky save/cancel row at bottom of profile form */
.form-actions {
    position: sticky;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    border-top: 1px solid #eee;
    margin-top: 30px;
}

/* Settings tabs selector row */
.settings-tabs-selector {
    display: flex;
    gap: 15px;
    margin: 20px 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 15px;
}

.tab-btn {
    background: #333333;
    border: 1px solid #222222;
    color: #ffffff !important;
    padding: 12px 22px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    font-weight: 500;
}
.tab-btn i {
    margin-right: 10px;
    font-size: 1.1rem;
    color: #ffffff !important;
}
.tab-btn:hover {
    background: #000000;
    border-color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.tab-btn.active {
    background: #007bff !important;
    color: #ffffff !important;
    border-color: #0056b3;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    font-weight: 700;
}

.settings-tab-content { animation: tabSlideIn 0.3s ease-out; }
.settings-tab-content.hidden { display: none !important; }

/* Specific email and date inputs */
#edit-email {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}
#edit-birth {
    width: 160px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Helper text below a field */
.field-help {
    display: block;
    margin-top: 5px;
    font-size: 0.85rem;
    color: #666;
}

/* Subsection subtitle style */
.section-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    color: #444;
}
.optional {
    font-weight: 400;
    font-size: 0.75rem;
    color: #999;
}

/* ── EDIT NICK BUBBLE ── */
/* Speech-bubble popup positioned over sidebar */
#edit-nick-menu.edit-bubble {
    position: absolute;
    top: 75px;
    left: 10px;
    width: 230px;
    background-color: var(--sidebar-fondo);
    border: 1px solid #34495e;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    z-index: 9999;
    padding: 15px;
    animation: fadeInDown 0.3s ease;
}
/* Arrow pointing up from bubble */
#edit-nick-menu.edit-bubble::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 15px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--sidebar-fondo);
}

.edit-bubble-content h4 {
    margin: 0 0 12px 0;
    color: #ecf0f1;
    font-size: 15px;
    text-align: center;
    font-weight: 600;
}

/* Input container inside the edit bubble */
.input-edit-container {
    position: relative;
    margin-bottom: 12px;
    display: block;
}
.input-edit-container input {
    width: 100%;
    padding: 10px 35px 10px 12px;
    border-radius: 5px;
    border: 1px solid #34495e;
    background: #1a252f;
    color: #ffffff;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.input-edit-container input:focus {
    border-color: var(--azul-accion);
}
/* Icons inside edit container (info, eye) */
.input-edit-container i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #7f8c8d;
    font-size: 14px;
    transition: color 0.2s, transform 0.1s;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.input-edit-container i:hover {
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
}

.edit-bubble-content small {
    color: #bdc3c7;
    font-size: 11px;
    display: block;
    margin-top: -8px;
    margin-bottom: 15px;
    padding-left: 2px;
}

.edit-actions {
    display: flex;
    gap: 10px;
}
.edit-actions button {
    flex: 1;
    padding: 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: opacity 0.2s;
}
.edit-actions button:hover { opacity: 0.9; }

.edit-bubble-footer {
    margin-top: 8px;
    text-align: center;
}
.edit-bubble-link {
    font-size: 0.78rem;
    color: #6e8efb;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.edit-bubble-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Input vibration on error inside the bubble */
.vibrar-error {
    animation: shake-edit 0.2s ease-in-out 0s 2;
    border: 1px solid #e74c3c !important;
}

/* ═══════════════════════════════════════════════════════════════
   STATUS VIEW — Hero + Feed moderno
   ═══════════════════════════════════════════════════════════════ */

/* Vista status: columna scrollable */
#view-status {
    display: flex;
    flex-direction: column;
    /* height: 100% viene de .app-section; no usar min-height porque hace que el padre
       scrollee y el feed queda "tapado" por el hero cuando se muestran las ventajas */
    height: 100%;
    min-height: 0;       /* permite que flex-children reduzcan su tamaño */
    overflow: hidden;    /* el scroll ocurre dentro de .status-feed, no aquí */
    padding: 0;          /* el hero y el feed tienen su propio padding */
}

/* Hero: cabecera oscura con logo, stats y ventajas */
.status-hero {
    padding: 28px 20px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
    border-bottom: 1px solid rgba(110, 142, 251, 0.18);
    flex-shrink: 0;
    /* Limitar altura del hero para que el feed siempre tenga espacio visible */
    max-height: 68vh;
    overflow-y: auto;
}

.status-hero-logo {
    width: 220px;
    height: auto;
    max-width: 80%;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

.status-hero-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 5px;
    letter-spacing: -0.3px;
}

.status-hero-title span {
    background: linear-gradient(90deg, #6e8efb, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.status-hero-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.45);
    margin: 0 0 14px;
}

/* Pastilla de estadísticas */
.status-net-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 14px;
}

.stat-online-dot {
    color: #4ade80;
    font-size: 0.45rem;
}

.status-net-stats strong {
    color: #fff;
    font-weight: 700;
}

.stat-pill-sep {
    opacity: 0.3;
    font-size: 0.9rem;
}

/* Card de ventajas (solo invitados) */
.status-benefits {
    background: rgba(110, 142, 251, 0.08);
    border: 1px solid rgba(110, 142, 251, 0.2);
    border-radius: 12px;
    padding: 14px 18px;
    text-align: left;
    max-width: 340px;
    width: 100%;
    margin-top: 4px;
}

.benefits-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #a78bfa;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.benefits-list li {
    font-size: 0.76rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 7px;
}

.benefits-list li i {
    color: #4ade80;
    font-size: 0.68rem;
    flex-shrink: 0;
}

.btn-status-reg {
    width: 100%;
    background: linear-gradient(135deg, #6e8efb, #a78bfa);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: opacity 0.2s, transform 0.1s;
}

.btn-status-reg:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Feed de notificaciones */
.status-feed {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    min-height: 120px; /* siempre visible aunque el hero sea grande */
    padding: 12px 16px 16px;
}

/* Notificación individual (estilo burbuja de chat) */
.status-notif {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    animation: fadeIn 0.3s ease;
    transition: background 0.15s;
}

.status-notif:hover {
    background: rgba(0,0,0,0.025);
}

.status-notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.status-notif-body {
    flex: 1;
    min-width: 0;
}

.status-notif-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1px;
}

.status-notif-desc {
    font-size: 0.78rem;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.status-notif-time {
    font-size: 0.67rem;
    color: #bbb;
    margin-top: 3px;
}

/* Colores por tipo */
.status-notif-info    .status-notif-icon { background: #eff6ff; color: #3b82f6; }
.status-notif-success .status-notif-icon { background: #f0fdf4; color: #22c55e; }
.status-notif-warning .status-notif-icon { background: #fff7ed; color: #f97316; }
.status-notif-mention .status-notif-icon { background: #fdf4ff; color: #a855f7; }
.status-notif-system  .status-notif-icon { background: #f8fafc; color: #94a3b8; }
.status-notif-error   .status-notif-icon { background: #fff1f2; color: #f43f5e; }

/* Navigation error bubble (tooltip shown near nav items for unregistered users) */

/* Separador de mensajes nuevos */
.unread-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 16px;
    opacity: 0.8;
}
.unread-separator::before,
.unread-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e94560;
}
.unread-separator span {
    font-size: 0.7rem;
    font-weight: 600;
    color: #e94560;
    white-space: nowrap;
    padding: 2px 8px;
    background: #fff0f2;
    border-radius: 10px;
    border: 1px solid rgba(233,69,96,0.3);
}
.error-bubble-nav {
    position: fixed;
    background: #e74c3c;
    color: white;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    z-index: 10000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    pointer-events: none;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.error-bubble-nav::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #e74c3c;
}


/* ========================================
   5. VIEWS (each view/screen)
   ======================================== */

/* ── AUTH LAYER ── */
#auth-layer {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Card container for login / register / recovery */
.login-container {
    background: var(--blanco-tarjeta);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 380px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.logo { max-width: 250px; margin: 0 auto; height: auto; }

/* ── REGISTER IN-APP VIEW (#view-register) ── */
.register-in-app-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 20px;
    min-height: 100%;
    gap: 16px;
}

.register-in-app-notice {
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.4);
    border-radius: 8px;
    padding: 10px 16px;
    color: #c0392b;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 380px;
    width: 100%;
}

.register-in-app-success {
    text-align: center;
    padding: 10px 0 0;
    color: #27ae60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.register-in-app-success i {
    font-size: 2.8rem;
}
.register-in-app-success h4 {
    margin: 0;
    font-size: 1.1rem;
}
.register-in-app-success p {
    margin: 0;
    font-size: 0.875rem;
    color: #555;
}

/* ── CHANNEL LIST VIEW (#view-listchan) ── */
#view-listchan {
    padding: 16px;
    max-width: 100%;
    color: #333;
}

.listchan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.listchan-header h3 {
    font-size: 1.4rem;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.btn-crear-sala {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-crear-sala:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(110, 142, 251, 0.4);
}

/* Filtros */
.listchan-filters {
    margin-bottom: 20px;
}
.search-box {
    position: relative;
    margin-bottom: 12px;
}
.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}
.search-box input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.95rem;
    background: #fff;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.3s;
}
.search-box input:focus {
    border-color: #6e8efb;
    outline: none;
}
.filter-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.filter-row select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.85rem;
    background: #fff;
    color: #333;
    cursor: pointer;
    min-width: 150px;
}
.filter-row select:focus {
    border-color: #6e8efb;
    outline: none;
}
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
}
.filter-checkbox input[type="checkbox"] {
    accent-color: #6e8efb;
}

/* Grid de canales */
.channels-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.channels-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}
.channels-empty i {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.4;
}
.channels-empty p {
    font-size: 1rem;
}

/* Card de canal */
.channel-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 14px 18px;
    transition: border-color 0.3s, box-shadow 0.3s;
    gap: 15px;
}
.channel-card:hover {
    border-color: #6e8efb;
    box-shadow: 0 2px 12px rgba(110, 142, 251, 0.15);
}
.channel-card-photo {
    position: relative;
    flex-shrink: 0;
}
.channel-card-photo img {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid #e8e8e8;
}
.channel-card-users {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #2ecc71;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.channel-card-info {
    flex: 1;
    overflow: hidden;
}
.channel-card-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}
.channel-card-name .icon-type {
    font-size: 0.8rem;
}
.icon-type.publico { color: #3498db; }
.icon-type.privado { color: #f1c40f; }
.icon-type.vip { color: #e94560; }
.channel-card-topic {
    font-size: 0.85rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.channel-card-cat {
    font-size: 0.7rem;
    color: #6e8efb;
    margin-top: 2px;
}
.channel-card-actions {
    flex-shrink: 0;
}
.btn-enter-channel {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-enter-channel:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(110, 142, 251, 0.35);
}

/* ── SETTINGS VIEW (#view-settings) ── */
.profile-settings-wrapper {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0 80px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Hero: avatar left, nick + tabs right */
.profile-hero {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 30px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

/* Editable avatar container */
.profile-avatar-edit {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid #34495e;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    background-color: #1a252f;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.profile-avatar-edit img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: filter 0.3s ease;
}
/* Only darken image on hover when NOT read-only */
.profile-avatar-edit:not(.read-only):hover img    { filter: brightness(0.7); }
.profile-avatar-edit:not(.read-only):hover        { transform: scale(1.02); }
.profile-avatar-edit:not(.read-only):hover .avatar-overlay { opacity: 1; }

/* "Cambiar" overlay on avatar */
.avatar-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}
.avatar-overlay i    { font-size: 1.5rem; margin-bottom: 5px; }
.avatar-overlay span { font-size: 0.8rem; font-weight: 600; }

/* Read-only avatar: hide overlay entirely and disable pointer */
#settings-avatar-container.read-only .avatar-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
#settings-avatar-container.read-only {
    cursor: default !important;
    transform: none !important;
}
#settings-avatar-container.read-only label {
    pointer-events: none !important;
}

.profile-intro         { flex: 1; }
.profile-intro h2      { font-size: 1.8rem; font-weight: 700; margin: 0 0 5px 0; color: #333; }
.profile-intro p       { font-size: 1rem; color: #777; margin: 0; }


/* ========================================
   6. MODALS & OVERLAYS
   ======================================== */

/* ── CREATE CHANNEL MODAL ── */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    backdrop-filter: blur(3px);
}
.modal-overlay.hidden { display: none; }

.modal-create {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 550px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: fadeInDown 0.3s ease;
}
.modal-create-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #eee;
}
.modal-create-header h4 {
    margin: 0;
    font-size: 1.2rem;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-create-header h4 i { color: #6e8efb; }
.modal-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #999;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s;
}
.modal-close:hover { color: #e94560; }

.modal-create-body {
    padding: 24px;
}

/* Foto del canal */
.create-photo-section {
    text-align: center;
    margin-bottom: 20px;
}
.create-photo-preview {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 auto 8px;
    position: relative;
    border: 3px solid #e8e8e8;
    cursor: pointer;
}
.create-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.create-photo-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
}
.create-photo-preview:hover .create-photo-overlay { opacity: 1; }
.create-photo-overlay i { font-size: 1.3rem; margin-bottom: 4px; }
.create-photo-overlay span { font-size: 0.75rem; font-weight: 600; }
.create-photo-hint { font-size: 0.75rem; color: #999; margin: 0; }

/* Campos del formulario */
.create-field {
    margin-bottom: 16px;
    position: relative;
}
.create-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}
.create-field input[type="text"],
.create-field input[type="password"],
.create-field input[type="number"],
.create-field textarea,
.create-field select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.9rem;
    background: #fafafa;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.3s;
}
.create-field input:focus,
.create-field textarea:focus,
.create-field select:focus {
    border-color: #6e8efb;
    outline: none;
    background: #fff;
}
.char-count {
    position: absolute;
    right: 10px;
    bottom: -18px;
    font-size: 0.7rem;
    color: #bbb;
}

/* Tipo de sala - radio cards */
.create-type-options {
    display: flex;
    gap: 10px;
}
.type-option {
    flex: 1;
    cursor: pointer;
}
.type-option input[type="radio"] { display: none; }
.type-card {
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    transition: border-color 0.3s, background 0.3s;
}
.type-card i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 6px;
    color: #999;
}
.type-card span {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #555;
}
.type-card small {
    display: block;
    font-size: 0.7rem;
    color: #999;
    margin-top: 4px;
}
.type-option input:checked + .type-card {
    border-color: #6e8efb;
    background: rgba(110, 142, 251, 0.05);
}
.type-option input:checked + .type-card i { color: #6e8efb; }
.type-option input:checked + .type-card span { color: #2c3e50; }

/* Opciones avanzadas */
.create-advanced-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6e8efb;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 0;
    user-select: none;
}
.create-advanced-toggle:hover { color: #a777e3; }
.create-advanced {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.create-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 10px;
    cursor: pointer;
}
.create-checkbox input[type="checkbox"] { accent-color: #6e8efb; }
.create-inline-fields {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}
.create-field-sm {
    flex: 1;
}
.create-field-sm label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    display: block;
    margin-bottom: 4px;
}
.create-field-sm input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.85rem;
    box-sizing: border-box;
}
.create-field-sm input:focus {
    border-color: #6e8efb;
    outline: none;
}
.create-multimedia-toggles {
    margin-top: 12px;
}
.create-multimedia-toggles p {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    margin: 0 0 8px 0;
}

/* Botones del modal */
.create-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}
/* .btn-cancel definido arriba (moderno) */
.btn-crear {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-crear:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(110, 142, 251, 0.4);
}

/* Nick help tooltip (shown/hidden via .tooltip-visible) defined in COMPONENTS */


/* ── CHANNEL CHAT VIEW (#view-channels) ── */
#view-channels {
    height: 100%;
    padding: 0;
}

/* ── PRIVATE CHAT VIEW (#view-privates) — igual que canales: sin padding, altura 100% ── */
#view-privates {
    height: 100%;
    padding: 0;
    overflow: hidden;
}
.channel-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Info bar */
.channel-info-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    background: #eef0f4;
    border-bottom: 1px solid #d4d7de;
    flex-shrink: 0;
    min-height: 34px;
}
.topic-label-tag {
    font-size: 0.7rem;
    font-weight: 800;
    color: #6e8efb;
    letter-spacing: 0.6px;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
}
.channel-topic-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #bbb #f0f0f0;
    padding-bottom: 4px;
}
.channel-topic-scroll::-webkit-scrollbar {
    height: 5px;
}
.channel-topic-scroll::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}
.channel-topic-scroll::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 3px;
}
.channel-topic-scroll::-webkit-scrollbar-thumb:hover {
    background: #999;
}
.channel-topic-bar {
    font-size: 0.83rem;
    color: #777;
    white-space: nowrap;
    display: inline-block;
}
/* ── BOTONES DE CANAL EN TOPBAR ── */
.channel-topbar-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 8px;
}
.ch-topbar-count {
    font-size: 0.78rem;
    color: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    background: rgba(0,0,0,0.1);
    border-radius: 6px;
    white-space: nowrap;
}
.ch-topbar-btn {
    background: rgba(0,0,0,0.1);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(0,0,0,0.65);
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}
.ch-topbar-btn:hover {
    background: rgba(0,0,0,0.2);
    color: #111;
}
.ch-topbar-exit:hover {
    background: rgba(233,69,96,0.2);
    color: #e94560;
}

/* Body: messages + userlist */
.channel-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Messages area */
.channel-messages-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f7f8fa;
}
.channel-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0 16px 16px; /* sin padding-right: scrollbar va al borde absoluto */
    scrollbar-gutter: stable;  /* reserva espacio para el scrollbar sin mover el contenido */
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
}
.channel-messages::-webkit-scrollbar { width: 4px; }
.channel-messages::-webkit-scrollbar-track { background: transparent; }
.channel-messages::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 2px; }
.channel-messages::-webkit-scrollbar-thumb:hover { background: #bbb; }

/* Welcome message */
.channel-welcome {
    text-align: center;
    padding: 40px 20px 20px;
    color: #999;
}
.channel-welcome i {
    font-size: 3rem;
    color: #6e8efb;
    opacity: 0.3;
    margin-bottom: 10px;
}

/* ── System messages (join/leave/nick change) ── */
.canal-msg-system {
    text-align: center;
    padding: 3px 16px;
    color: #aaa;
    font-size: 0.76rem;
    font-style: italic;
    user-select: none;
}
.canal-msg-system-text {
    background: rgba(0,0,0,0.04);
    border-radius: 20px;
    padding: 2px 12px;
}
.canal-msg-system-time {
    margin-left: 8px;
    font-size: 0.68rem;
    color: #bbb;
    font-style: normal;
    letter-spacing: 0.3px;
}

.channel-welcome i {
    font-size: 3rem;
    color: #6e8efb;
    opacity: 0.3;
    margin-bottom: 10px;
}
.channel-welcome h3 {
    color: #2c3e50;
    margin: 10px 0 5px;
}
.channel-welcome p {
    font-size: 0.9rem;
}

/* Individual message */
.chat-msg {
    display: flex;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}
.chat-msg:hover {
    background: rgba(0, 0, 0, 0.03);
}
.chat-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 2px;
}
.chat-msg-body {
    flex: 1;
    min-width: 0;
}
.chat-msg-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.chat-msg-nick {
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}
.chat-msg-nick:hover { text-decoration: underline; }
/* Nick colors by rank */
.nick-fundador { color: #e94560; }
.nick-operador { color: #f39c12; }
.nick-vip { color: #9b59b6; }
.nick-registrado { color: #3498db; }
.nick-invitado { color: #95a5a6; }

.chat-msg-badge {
    font-size: 0.6rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
}
.badge-fundador { background: #e94560; color: #fff; }
.badge-operador { background: #f39c12; color: #fff; }
.badge-vip { background: #9b59b6; color: #fff; }

.chat-msg-time {
    font-size: 0.7rem;
    color: #bbb;
}
.chat-msg-text {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.45;
    word-wrap: break-word;
}
.chat-msg-text .mention {
    color: #6e8efb;
    font-weight: 600;
    cursor: pointer;
    background: rgba(110, 142, 251, 0.1);
    padding: 0 3px;
    border-radius: 3px;
}

/* System message */
.chat-msg-system {
    text-align: center;
    color: #999;
    font-size: 0.8rem;
    font-style: italic;
    padding: 6px 0;
}

/* Date separator */
.chat-date-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #bbb;
    font-size: 0.75rem;
    padding: 10px 0;
}
.chat-date-sep::before,
.chat-date-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

/* Image in message */
.chat-msg-image {
    max-width: 300px;
    max-height: 250px;
    border-radius: 10px;
    margin-top: 6px;
    cursor: pointer;
    transition: transform 0.2s;
}
.chat-msg-image:hover { transform: scale(1.02); }

/* Typing indicator */
.typing-indicator {
    padding: 6px 16px;
    font-size: 0.8rem;
    color: #888;
    background: #f7f8fa;
    flex-shrink: 0;
}
.typing-nick { font-weight: 600; color: #6e8efb; }
.typing-dots span {
    animation: typingBounce 1.4s infinite;
    display: inline-block;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

/* Input bar */
.channel-input-bar {
    background: #fff;
    border-top: 1px solid #e8e8e8;
    padding: 8px 12px;
    flex-shrink: 0;
}
.input-format-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 6px;
    flex-wrap: wrap;
    position: relative;  /* para que .photo-picker-menu se posicione relativo al toolbar */
}
.fmt-btn {
    background: none;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #777;
    font-size: 0.85rem;
    transition: background 0.2s, color 0.2s;
}
.fmt-btn:hover {
    background: #f0f2f5;
    color: #6e8efb;
}
.fmt-btn.active {
    background: #6e8efb;
    color: #fff;
}
.fmt-separator {
    width: 1px;
    height: 20px;
    background: #e0e0e0;
    margin: 0 4px;
}
.color-picker-wrap {
    position: relative;
}
.color-indicator {
    display: block;
    width: 10px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    margin-top: 1px;
}
.color-picker-dropdown {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(6, 26px); /* 6 columnas para 36 colores */
    gap: 5px;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.color-picker-dropdown.hidden { display: none; }
.color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s, border-color 0.15s;
}
.color-swatch:hover {
    transform: scale(1.2);
    border-color: #333;
}

.input-write-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.input-write-row #channel-input {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
    min-height: 38px;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.4;
    font-family: inherit;
    color: #333;
    background: #f7f8fa;
    transition: border-color 0.3s;
    word-wrap: break-word;
    white-space: pre-wrap;
    cursor: text;
}
.input-write-row #channel-input:focus {
    border-color: #6e8efb;
    outline: none;
    background: #fff;
}
.input-write-row #channel-input:empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
}
.btn-send {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}
.btn-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(110, 142, 251, 0.4);
}

/* ── CHANNEL USER LIST (sidebar derecha) ── */
.channel-userlist {
    width: 220px;
    background: #fff;
    border-left: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}
.userlist-header { display: none; }
.userlist-body {
    flex: 1;
    min-height: 0;        /* Permite scroll interno al reducir ventana */
    overflow-y: auto;
    padding: 8px 0;
}
.userlist-group {
    margin-bottom: 2px;
}
.userlist-group-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #ccc;
    text-transform: uppercase;
    padding: 5px 12px;
    letter-spacing: 0.5px;
    background: #2d3340;
    border-radius: 4px;
    margin: 0 6px 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    transition: background 0.15s;
}
.userlist-group-title:hover { background: #353c4e; }
.grp-arrow {
    margin-left: auto;
    font-size: 0.8rem;
    transition: transform 0.2s;
}
.grp-collapsed .grp-arrow { transform: rotate(-90deg); }
.grp-collapsed .userlist-items { display: none; }
.group-count {
    font-weight: 400;
    color: #aaa;
}
.userlist-items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.userlist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.userlist-item:hover {
    background: #f5f7fa;
}
.usl-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}
.userlist-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.usl-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #2ecc71;
}
.usl-status-dot[data-estado="online"]        { background: #2ecc71; }
.usl-status-dot[data-estado="ausente"]       { background: #f39c12; }
.usl-status-dot[data-estado="noMolestar"]    { background: #e74c3c; }
.usl-status-dot[data-estado="no-molestar"]   { background: #e74c3c; }
.usl-status-dot[data-estado="ocupado"]       { background: #e67e22; }
.usl-status-dot[data-estado="offline"]       { background: #95a5a6; }
.usl-status-dot[data-estado="desconectado"]  { background: #95a5a6; }
.userlist-nick {
    font-size: 0.85rem;
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.userlist-webcam {
    font-size: 0.72rem;
    flex-shrink: 0;
    opacity: 0.35;
    transition: opacity 0.2s, color 0.2s;
}
.userlist-webcam.webcam-on {
    color: #6e8efb;
    opacity: 1;
}
.userlist-webcam.webcam-off {
    color: #aaa;
    opacity: 0.35;
}
.userlist-webcam.webcam-yo {
    cursor: pointer;
    opacity: 0.6;
}
.userlist-webcam.webcam-yo:hover { opacity: 1; }

/* ── CONTEXT MENU ── */
.context-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 9000;
    min-width: 180px;
    padding: 6px 0;
    animation: fadeInDown 0.15s ease;
}
.context-menu.hidden { display: none; }
.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: #555;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.context-menu-item:hover {
    background: #f0f2f5;
    color: #2c3e50;
}
.context-menu-item i {
    width: 16px;
    text-align: center;
    color: #6e8efb;
    font-size: 0.8rem;
}
.context-menu-separator {
    height: 1px;
    background: #eee;
    margin: 4px 12px;
}
.context-menu-danger {
    color: #e94560;
}
.context-menu-danger:hover {
    background: #fff0f0;
    color: #e94560;
}
.context-menu-danger i {
    color: #e94560;
}

/* ========================================
   7. ANIMATIONS & TRANSITIONS
   ======================================== */

/* Shake left-right: used on info-nick icon for input errors */
@keyframes shake-error {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    25%       { transform: translateY(-50%) translateX(-4px); color: var(--rojo-error); }
    75%       { transform: translateY(-50%) translateX(4px);  color: var(--rojo-error); }
}

/* Slide-in from top: used for edit-bubble and generic dropdowns */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Shake left-right for input validation errors in edit-bubble */
@keyframes shake-edit {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(3px); }
    50%  { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

/* Visualizer bar bounce */
@keyframes bounce-mini {
    0%   { height: 5px; }
    100% { height: 13px; }
}

/* Scrolling marquee for radio title */
@keyframes marquee-mini {
    0%   { transform: translateX(0); }
    85%  { transform: translateX(-100%); }
    100% { transform: translateX(-100%); } /* Pause before restart */
}

/* Fade-in for main app views */
@keyframes fadeInView {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Slide-in from right for settings tabs */
@keyframes tabSlideIn {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Fade-in for log entries */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ========================================
   8. RESPONSIVE / MEDIA QUERIES
   ======================================== */

/* 3-column grid → 2 columns below 1000px */
@media (max-width: 1000px) {
    .grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop (≥769px): sidebar has internal scroll, not full-height auto */
@media (min-width: 769px) {
    .sidebar-left {
        overflow-y: hidden; /* Prevent outer sidebar scroll; inner .sidebar-nav scrolls */
    }
}

/* Tablet/Mobile (≤768px): drawer-style sidebar, full-width content */
@media (max-width: 768px) {
    .login-container { max-width: 88%; padding: 2rem; }
    .logo            { max-width: 200px; }

    body {
        overflow-x: hidden !important;
        height: 100%;
    }

    .status-layout {
        overflow: hidden;
        width: 100vw;
        /* 100dvh: se ajusta dinámicamente cuando el teclado virtual se abre/cierra.
           Safari iOS 15.4+, Chrome Android 108+. Fallback: 100svh → 100vh */
        height: 100dvh;
        height: 100svh; /* fallback intermedio */
        position: relative;
        display: flex;
    }

    .main-container {
        width: 100vw;
        height: 100dvh;
        height: 100svh; /* fallback */
        display: flex;
        flex-direction: column;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    /* Top bar mobile overrides */
    .top-bar {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px !important;
        width: 100%;
        height: 45px;
        min-height: 45px;
        flex-shrink: 0;
        box-sizing: border-box;
        z-index: 10;
    }
    .top-bar-left {
        display: flex;
        align-items: center;
        gap: 10px;
        overflow: hidden;
        flex: 1;
    }

    /* Show sidebar toggle button on mobile */
    .sidebar-toggle-btn {
        display: flex !important;
        width: 35px;
        min-width: 35px;
        height: 35px;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .user-info-area {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1;
    }

    #display-nick {
        font-size: 1rem;
        font-weight: bold;
        color: white;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .top-bar-actions {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        margin-left: 10px;
    }

    /* Sidebar slides in from left as a drawer */
    .sidebar-left {
        position: absolute;
        left: -75%;
        width: 75% !important;
        height: -webkit-fill-available;
        height: 100svh;
        min-height: 100dvh;
        z-index: 2000;
        /* FIX: removed duplicate transition; keeping the more specific one */
        transition: left 0.4s ease-in-out;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        overscroll-behavior: none; /* Evita rubber-band de iOS que muestra fondo blanco */
    }
    /* Slide in when active */
    .sidebar-left.sidebar-visible-left {
        left: 0;
        transform: translateX(0);
    }
    /* Push main content when sidebar opens */
    .sidebar-visible-left ~ .main-container {
        transform: translateX(75%);
    }

    /* Full-width scrollable content on mobile */
    .content, .content-full {
        flex: 1;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        display: block; /* Natural block scroll */
        width: 100%;
        box-sizing: border-box;
    }

    .app-section {
        display: block; /* Allow forms to grow downward */
        width: 100%;
        height: auto;
        min-height: 100%;
    }

    /* EXCEPCIÓN: la vista de canal debe mantener layout flex fijo aunque estemos en mobile.
       El topbar queda fijo, el área de mensajes hace scroll, el input bar queda fijo abajo. */
    .content:has(#view-channels:not(.hidden)) {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    #view-channels:not(.hidden) {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    /* EXCEPCIÓN igual para privados */
    .content:has(#view-privates:not(.hidden)) {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    #view-privates:not(.hidden) {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    /* Input bar privados: igual que canal en mobile */
    .private-input-area {
        flex-shrink: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        z-index: 10 !important;
    }
    .private-messages {
        padding-bottom: 8px !important;
    }

    .profile-hero {
        flex-direction: column;
        text-align: center;
    }

    .sidebar-nav {
        /* Fix scroll mobile: sidebar-left es el único scroller; sidebar-nav usa altura natural */
        overflow-y: visible !important;
        flex: none !important;   /* No expandir; dejar que sidebar-left scrollee todo */
        min-height: auto !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom)); /* Último canal no queda cortado */
    }
    /* Channel chat responsive */
    .channel-layout {
        /* IMPORTANTE: usar 100% no 100dvh.
           channel-layout está dentro de main-container que tiene top-bar (45px).
           Con 100dvh el canal es más alto que su padre → overflow:hidden recorta el input.
           Con 100% hereda el tamaño correcto del padre flex (100vh - 45px topbar). */
        height: 100%;
    }
    .channel-userlist { display: none; }
    .channel-userlist.visible { display: flex; width: 85%; max-width: 280px; position: absolute; right: 0; top: 0; height: 100%; z-index: 100; box-shadow: -4px 0 20px rgba(0,0,0,0.15); }
    .channel-userlist.userlist-collapsed { display: none; }
    .channel-info-bar { padding: 5px 10px; }
    .input-format-tools { gap: 0; }
    .fmt-btn { width: 28px; height: 28px; font-size: 0.8rem; }

    /* ── Input bar: flex layout natural (NO position:fixed) ─────────────────
       El input es parte del flex column de channel-messages-area.
       La altura se ajusta via VisualViewport JS cuando el teclado se abre.
       En Android, interactive-widget=resizes-content lo resuelve sin JS. */
    .channel-input-bar {
        flex-shrink: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        z-index: 10 !important;
    }
    .channel-messages {
        padding-bottom: 8px !important;
    }
    .create-type-options { flex-direction: column; }
    .filter-row { flex-direction: column; }
    .filter-row select { width: 100%; min-width: unset; }
}

/* Small mobile (≤600px): single column, stacked layouts */
@media (max-width: 600px) {
    .grid-3, .grid-2 {
        grid-template-columns: 1fr;
    }
    .grid-email-birth {
        grid-template-columns: 1fr;
    }
    .grid-email-birth .input-group:last-child {
        justify-self: stretch;
    }
    .social-privacy-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .privacy-select-wide {
        width: 100%;
    }
    .password-flex-row {
        flex-direction: column;
    }
    .field-with-privacy {
        flex-direction: column;
        align-items: stretch;
    }
    .field-with-privacy input,
    .field-with-privacy select,
    .field-with-privacy textarea {
        width: 100%;
    }
    .privacy-select {
        width: 100% !important;
        flex-basis: auto;
        border-left: 1px solid #eee !important;
        border-radius: 8px !important;
        border-top: none !important;
    }
    .profile-hero {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .profile-avatar-edit {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
    }
    .profile-intro h2 {
        font-size: 1.5rem;
    }
}

/* ─── ZONA DE PELIGRO (eliminar cuenta) ─────────────────────────── */
.danger-zone-section {
    margin-top: 28px;
    border: 1.5px solid #e74c3c55;
    border-radius: 12px;
    overflow: hidden;
    background: #fff8f8;
}

.danger-zone-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fdecea;
    color: #c0392b;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid #e74c3c33;
}

.danger-zone-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    flex-wrap: wrap;
}

.danger-zone-info { flex: 1; min-width: 200px; }

.danger-zone-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: #2d2d2d;
    margin: 0 0 4px 0;
}

.danger-zone-desc {
    font-size: 0.8rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.btn-danger-delete {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: transparent;
    color: #c0392b;
    border: 1.5px solid #e74c3c;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
}

.btn-danger-delete:hover {
    background: #e74c3c;
    color: #fff;
}

/* ─── MODAL ELIMINAR CUENTA ──────────────────────────────────────── */
.modal-danger-box {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: fadeInDown 0.3s ease;
    max-width: 440px;
    padding: 36px 32px 28px;
    text-align: center;
    border-top: 4px solid #e74c3c;
}

.modal-danger-icon {
    font-size: 2.4rem;
    color: #e74c3c;
    margin-bottom: 12px;
}

.modal-danger-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 10px;
}

.modal-danger-desc {
    font-size: 0.85rem;
    color: #555;
    margin: 0 0 8px;
    line-height: 1.5;
}

.modal-danger-input {
    width: 100%;
    max-width: 320px;
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-top: 6px;
    box-sizing: border-box;
    text-align: center;
    transition: border-color 0.2s;
}

.modal-danger-input:focus {
    outline: none;
    border-color: #e74c3c;
}

.modal-danger-error {
    margin-top: 10px;
    padding: 8px 14px;
    background: #fdecea;
    border-radius: 7px;
    color: #c0392b;
    font-size: 0.82rem;
    font-weight: 600;
}

.modal-danger-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* Override inline-edit .btn-cancel (red) dentro del modal de eliminar */
.modal-danger-actions .btn-cancel {
    background: none !important;
    background-color: transparent !important;
    border: 1px solid #ccc !important;
    color: #555 !important;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.modal-danger-actions .btn-cancel:hover {
    background: #f0f0f0 !important;
    color: #333 !important;
}

.btn-danger-confirm {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s;
}

.btn-danger-confirm:hover { background: #c0392b; }
.btn-danger-confirm:disabled { opacity: 0.55; cursor: not-allowed; }

/* ============================================================
   CONFIGURACIÓN DE CANAL (view-channel-config)
   ============================================================ */
#view-channel-config .settings-content {
    box-sizing: border-box !important;
    padding: 0 !important;       /* app-section (padre) ya tiene padding:25px en todos los lados */
    width: 100% !important;
}

/* ══════════════════════════════════════════════════
   TARJETAS DE CANAL — view-listchan
══════════════════════════════════════════════════ */
.userlist-backdrop {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
}
.userlist-backdrop:not(.hidden) {
    display: block;
}

.channel-userlist.userlist-collapsed {
    display: none;
}

.chan-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 14px 18px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.chan-card:hover {
    border-color: #6e8efb;
    box-shadow: 0 2px 14px rgba(110,142,251,0.15);
}
.chan-card-foto img {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    object-fit: contain;
    background: #f5f5f5;
    flex-shrink: 0;
    border: 2px solid #eee;
}
.chan-card-info {
    flex: 1;
    min-width: 0;
}
.chan-card-nombre {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chan-card-desc {
    font-size: 0.82rem;
    color: #666;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chan-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
}
.chan-card-online {
    color: #2ecc71;
    font-weight: 600;
}
.chan-card-online i {
    font-size: 0.6rem;
    vertical-align: middle;
}
.chan-card-cat {
    color: #999;
    text-transform: capitalize;
}
.chan-card-accion {
    flex-shrink: 0;
}
.btn-entrar-canal {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    white-space: nowrap;
}
.btn-entrar-canal:hover  { opacity: 0.9; transform: translateY(-1px); }
.btn-entrar-canal:active { transform: translateY(0); }

.listchan-empty {
    text-align: center;
    padding: 50px 20px;
    color: #999;
    font-size: 0.95rem;
}

/* ══════════════════════════════════════════════════
   USERLIST — badges de rango
══════════════════════════════════════════════════ */
.userlist-badge {
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
}
/* Colores en lista de nicks: SOLO administradores de Red en rojo oscuro, todos los demás en negro */
.rang-fundador       .userlist-nick { color: #111; font-weight: 500; }
.rang-administrador  .userlist-nick { color: #c0392b; font-weight: 700; } /* Admin global de red — rojo oscuro */
/* Administradores/Operadores de red siempre en rojo, independientemente del rango en el canal */
.userlist-item[data-role="administrador"] .userlist-nick,
.userlist-item[data-role="operador"] .userlist-nick { color: #c0392b !important; font-weight: 700 !important; }
.rang-operador       .userlist-nick { color: #111; font-weight: 500; }
.rang-vip            .userlist-nick { color: #111; font-weight: 500; }
.rang-usuario        .userlist-nick { color: #111; font-weight: 500; }
.rang-invitado       .userlist-nick { color: #111; font-weight: 400; }

/* ═══════════════════════════════════════════════════════════════
   CROP MODAL
═══════════════════════════════════════════════════════════════ */
.modal-crop-box {
    background: #fff;
    border-radius: 16px;
    padding: 28px 32px;
    max-width: 620px;
    width: 95%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.modal-crop-box h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.crop-hint {
    margin: 0;
    font-size: 0.86rem;
    color: #666;
    text-align: center;
    line-height: 1.4;
}

.crop-area-wrap {
    max-width: 100%;
    overflow: auto;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.crop-area {
    position: relative;
    display: inline-block;
    line-height: 0;
    cursor: default;
    user-select: none;
    background: #111;
}

.crop-area img#crop-source-img {
    display: block;
    max-width: min(520px, 90vw);
    max-height: 380px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.crop-selector {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.58);
    cursor: move;
    box-sizing: border-box;
    touch-action: none;
}

/* Líneas de guía (regla de los tercios) */
.crop-selector::before,
.crop-selector::after {
    content: '';
    position: absolute;
    background: rgba(255,255,255,0.25);
    pointer-events: none;
}
.crop-selector::before {
    left: 33.33%;
    right: 33.33%;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
}
.crop-selector::after {
    top: 33.33%;
    bottom: 33.33%;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
}

/* Esquinas del selector */
.crop-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 1px;
}
.crop-corner.tl { top: -2px; left: -2px; }
.crop-corner.tr { top: -2px; right: -2px; }
.crop-corner.bl { bottom: -2px; left: -2px; }
.crop-corner.br { bottom: -2px; right: -2px; }

.crop-size-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 440px;
    color: #444;
    font-size: 0.88rem;
}

.crop-size-row input[type=range] {
    flex: 1;
    accent-color: #6e8efb;
    height: 4px;
    cursor: pointer;
}

.crop-size-row label {
    white-space: nowrap;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

#crop-size-pct {
    width: 36px;
    text-align: right;
    font-weight: 600;
    color: #6e8efb;
}

.crop-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Loading channels */
.channels-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 0;
    color: #888;
    font-size: 1rem;
}

.channels-loading .fa-spinner {
    font-size: 2rem;
    color: #6e8efb;
}

.channels-loading p {
    margin: 0;
}

@media (max-width: 600px) {
    .chan-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
    }
    .chan-card-foto img {
        width: 48px;
        height: 48px;
    }
    .chan-card-nombre {
        font-size: 0.95rem;
    }
    .chan-card-desc {
        -webkit-line-clamp: 4;
        font-size: 0.8rem;
    }
    .chan-card-accion {
        align-self: flex-end;
    }
    .color-picker-dropdown {
        grid-template-columns: repeat(4, 24px);
    }
}
/* ═══════════════════════════════════════════════════════════════
   EMOJI PICKER PANEL
═══════════════════════════════════════════════════════════════ */
.emoji-picker-panel {
    /* Siempre fixed: escapa de cualquier overflow:hidden del contenedor padre.
       JS (positionarPicker) calcula left/right/bottom exactos al abrir. */
    position: fixed;
    bottom: 96px;   /* fallback; sobreescrito por JS */
    left: 0;        /* fallback; sobreescrito por JS */
    width: 320px;   /* ancho compacto tipo WhatsApp */
    max-width: 320px;
    max-height: min(420px, calc(100vh - 100px));
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.emoji-picker-panel.hidden {
    display: none;
}
.emoji-picker-header {
    padding: 8px 8px 4px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0; /* nunca comprimir: buscador siempre visible */
}
.emoji-search {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 12px;
    outline: none;
    background: #f7f7f7;
    transition: border-color .2s;
}
.emoji-search:focus {
    border-color: #6e8efb;
    background: #fff;
}
.emoji-category-tabs {
    display: flex;
    gap: 1px;
    padding: 4px 6px 3px;
    border-bottom: 1px solid #f0f0f0;
    overflow-x: auto;
    overflow-y: hidden; /* corta emojis que sobresalen verticalmente */
    scrollbar-width: none;
    flex-shrink: 0; /* nunca comprimir: categorías siempre visibles */
    min-height: 32px;
}
.emoji-category-tabs::-webkit-scrollbar { display: none; }
.emoji-cat-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 17px;
    cursor: pointer;
    transition: background .15s;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    line-height: 1;
    overflow: hidden; /* evita que el emoji se corte visualmente */
}
.emoji-cat-btn:hover {
    background: #f0f0f0;
}
.emoji-cat-btn.active {
    background: #eef0ff;
    box-shadow: 0 0 0 2px #6e8efb;
}
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* 1fr dentro de 320px = ~34px por celda */
    gap: 1px;
    padding: 4px 6px 6px;
    flex: 1;           /* rellena el espacio restante del panel */
    min-height: 0;     /* clave: permite que flex shrink funcione */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}
.emoji-grid::-webkit-scrollbar { width: 6px; }
.emoji-grid::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.emoji-grid::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 3px; }
.emoji-item {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .12s, transform .1s;
    line-height: 1;
    user-select: none;
}
.emoji-item:hover {
    background: #f0f0f0;
    transform: scale(1.15);
}
.emoji-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px 0;
    color: #aaa;
    font-size: 13px;
}
@media (max-width: 480px) {
    .emoji-picker-panel {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        left: 8px !important;
        right: 8px !important;
        border-radius: 12px 12px 0 0;
    }
    .emoji-grid { grid-template-columns: repeat(8, 1fr); }
}


/* ============================================================
   CANAL — MENSAJES
   ============================================================ */
.channel-msg {
    display: flex;
    gap: 10px;
    padding: 4px 8px 4px 4px;
    border-radius: 6px;
    transition: background 0.1s;
    align-items: flex-start;
}
.channel-msg:hover { background: rgba(0,0,0,0.03); }

.channel-msg-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-height: 36px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 2px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}
.msg-avatar-initials {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 2px;
    flex-shrink: 0;
}

.channel-msg-body {
    flex: 1;
    min-width: 0;
}
.channel-msg-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.channel-msg-nick {
    font-weight: 600;
    font-size: 0.88rem;
    cursor: default;
}
/* ── Fundador check icon ✗/✓ ── */
.fundador-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.fundador-input-wrap input { flex: 1; }
.fundador-check-icon {
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s;
}
.fundador-check-idle  { color: #b0b0b0; }
.fundador-check-ok    { color: #27ae60; }
.fundador-check-error { color: #e74c3c; }

/* ── Password deshabilitado ── */
#config-password:disabled,
#btn-toggle-pass:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f0f0f0;
}
#config-password-row.pass-disabled label { color: #999; }

/* ── config-actions: mismo estilo que Mi Perfil ── */
.config-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

/* ── field-counter heredado (ya existe en global, aseguramos visibilidad) ── */
.config-field .field-counter {
    font-size: 0.78rem;
    color: #888;
    font-weight: 400;
    margin-left: 6px;
}

.msg-nick-fundador       { color: #e67e00; font-weight: 700; }   /* Naranja oscuro — Fundador */
.msg-nick-operador       { color: #2980b9; font-weight: 600; }   /* Azul oscuro — Operador de canal */
.msg-nick-vip            { color: #8e44ad; font-weight: 600; }   /* Violeta — VIP */
.msg-nick-usuario        { color: #27ae60; }                     /* Verde — Registrado */
.msg-nick-invitado       { color: #888;    }                     /* Gris — Sin registrar */
.msg-nick-administrador  { color: #c0392b; font-weight: 700; }   /* Rojo oscuro — Admin/Oper de red (fallback) */

.channel-msg-time {
    font-size: 0.72rem;
    color: #bbb;
    flex-shrink: 0;
}
.channel-msg-content {
    font-size: 0.88rem;
    color: #333;
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.channel-msg-gif {
    max-width: min(320px, 100%);
    max-height: 260px;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    margin-top: 2px;
    object-fit: contain;
    background: #f0f0f0;
}
.channel-msg-gif:hover { opacity: 0.9; }

/* ── Media: fotos, audio, archivos en mensajes ──────────────── */
.channel-msg-media { margin-top: 6px; }

.channel-msg-foto {
    max-width: min(380px, 100%);
    max-height: 320px;
    border-radius: 10px;
    display: block;
    cursor: zoom-in;
    transition: opacity .2s;
    object-fit: cover;
}
.channel-msg-foto:hover { opacity: 0.9; }

.channel-audio-wrap {
    display: flex;
    align-items: center;
}
.ch-audio-player {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2b2b2b;
    border-radius: 22px;
    padding: 5px 10px;
    max-width: 340px;
    width: 100%;
    overflow: hidden;
}
.ch-audio-play {
    background: none;
    border: none;
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
.ch-audio-play:hover { color: var(--accent, #ff6600); }
.ch-audio-bar {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ch-audio-seek {
    flex: 1;
    min-width: 0;
    height: 3px;
    accent-color: var(--accent, #ff6600);
    cursor: pointer;
    margin: 0;
}
.ch-audio-time {
    font-size: 0.7rem;
    color: #bbb;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ch-audio-vol-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.ch-audio-vol-icon {
    color: #aaa;
    font-size: 0.78rem;
    cursor: default;
}
.ch-audio-vol {
    width: 52px;
    height: 3px;
    accent-color: var(--accent, #ff6600);
    cursor: pointer;
}
.channel-msg-audio { display: none !important; }

.channel-msg-archivo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 8px;
    color: #333;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background .15s;
    word-break: break-all;
}
.channel-msg-archivo:hover { background: rgba(0,0,0,0.09); }
.archivo-size { color: #666; font-size: 0.78rem; }

/* ============================================================
   GIF PENDING BAR — previsualización de GIF antes de enviar
   ============================================================ */
.gif-pending-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: rgba(110, 142, 251, 0.08);
    border: 1px solid rgba(110, 142, 251, 0.28);
    border-radius: 8px;
    margin-bottom: 5px;
}
.gif-pending-bar.hidden { display: none; }
.gif-pending-thumb {
    height: 42px;
    width: auto;
    max-width: 90px;
    border-radius: 5px;
    object-fit: cover;
    flex-shrink: 0;
}
.gif-pending-label {
    flex: 1;
    font-size: 0.78rem;
    color: #6e8efb;
    font-weight: 500;
}
.gif-pending-remove {
    background: none;
    border: none;
    color: #bbb;
    cursor: pointer;
    font-size: 14px;
    padding: 3px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s;
    flex-shrink: 0;
}
.gif-pending-remove:hover { color: #e74c3c; }

/* ============================================================
   GIF PICKER
   ============================================================ */
.gif-picker-panel {
    /* Siempre fixed: escapa de overflow:hidden. JS calcula left/right/bottom. */
    position: fixed;
    bottom: 96px;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    height: 320px;
    overflow: hidden;
}
.gif-picker-panel.hidden { display: none; }

.gif-picker-header {
    padding: 10px 12px 8px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.gif-search {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
    background: #f7f8fa;
    transition: border-color 0.2s;
}
.gif-search:focus { border-color: #6e8efb; background: #fff; }

.gif-grid {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px 8px 8px; /* padding-right extra para scrollbar */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5;
}
.gif-grid::-webkit-scrollbar { width: 6px; }
.gif-grid::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; }
.gif-grid::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 3px; }
.gif-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    background: #f0f0f0;
    transition: transform 0.15s, opacity 0.15s;
    display: block;
}
.gif-thumb:hover { transform: scale(1.04); opacity: 0.9; }
.gif-loading, .gif-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #aaa;
    padding: 30px;
    font-size: 0.85rem;
}
.gif-powered {
    padding: 4px 10px;
    text-align: right;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}

/* Botón GIF en toolbar */
.fmt-gif-btn {
    font-size: 0.72rem !important;
    font-weight: 800;
    letter-spacing: -0.5px;
    width: 34px !important;
    border-radius: 6px;
    background: transparent;
    color: inherit !important;
}
.fmt-gif-btn:hover {
    background: rgba(110, 142, 251, 0.18) !important;
    color: #6e8efb !important;
}
.fmt-gif-btn.active {
    background: linear-gradient(135deg, #6e8efb, #a777e3) !important;
    color: #fff !important;
}

/* GIF miniatura en barra de escritura */
.gif-input-preview {
    height: 34px;
    width: auto;
    max-width: 58px;
    border-radius: 4px;
    vertical-align: middle;
    margin: 0 3px;
    object-fit: cover;
    outline: 2px solid #6e8efb;
    cursor: default;
}

@media (max-width: 768px) {
    .gif-grid { grid-template-columns: repeat(2, 1fr); }
    .gif-picker-panel { height: 260px; }
    .channel-msg-gif { max-width: 100%; }
}

/* ── Pantallas medianas/pequeñas: paneles fijos para evitar que salgan del viewport ── */
/* Nota: El breakpoint es 900px porque incluso en ventanas anchas el picker puede ser clippeado */
/* por el overflow:hidden del contenedor padre del toolbar de chat */
@media (max-width: 900px) {
    /* Pickers siempre son fixed; JS calcula bottom/left/right dinámicamente.
       Aquí solo ajustamos el tamaño para pantallas pequeñas. */
    .gif-picker-panel {
        height: 50vh !important;
        border-radius: 12px !important;
    }
    .emoji-picker-panel {
        max-height: min(60vh, calc(100vh - 80px)) !important;
        border-radius: 12px !important;
    }
    .emoji-category-tabs {
        padding: 4px 6px 3px !important;
        gap: 1px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    .emoji-cat-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 17px !important;
        flex-shrink: 0 !important;
    }
    .emoji-grid {
        /* NO max-height: deja que flex:1 gestione el espacio — scroll interno funciona */
        padding: 4px 6px 6px !important;
    }
    .gif-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding-right: 8px !important;
    }
    /* Si gif-pending-bar está visible, subir los paneles un poco más */
    .gif-pending-bar:not(.hidden) ~ * .emoji-picker-panel,
    .gif-pending-bar:not(.hidden) ~ * .gif-picker-panel {
        bottom: 120px !important;
    }
}
@media (max-width: 600px) {
    .emoji-picker-panel {
        max-height: min(55vh, calc(100vh - 80px)) !important;
    }
    .gif-picker-panel {
        height: 45vh !important;
    }
}

/* ============================================================
   CHAT SETTINGS — Ajustes del Chat
   ============================================================ */

/* CSS Variables (defaults) */
:root {
    --chat-font-size: 14px;
    --chat-emoji-size: 2em;
}

/* Apply font size to channel messages */
.channel-msg .channel-msg-content,
.channel-msg-content {
    font-size: var(--chat-font-size);
}

/* Apply emoji/GIF size — solo aplica a emojis, NO a GIFs de canal */
.channel-msg-content img.emoji {
    max-height: var(--chat-emoji-size);
}

/* Compact mode */
body.chat-compact .channel-msg {
    padding: 2px 12px !important;
    margin-bottom: 1px !important;
}
body.chat-compact .channel-msg-avatar {
    width: 24px !important;
    height: 24px !important;
}

/* Ignore colors — fuerza todo el texto a negro independientemente de los estilos inline */
body.chat-ignore-colors .channel-msg-content {
    color: #333 !important;
}
body.chat-ignore-colors .channel-msg-content *,
body.chat-ignore-colors .channel-msg-content span[style],
body.chat-ignore-colors .channel-msg-content b,
body.chat-ignore-colors .channel-msg-content i,
body.chat-ignore-colors .channel-msg-content strong,
body.chat-ignore-colors .channel-msg-content em {
    color: #333 !important;
}

/* Hide link previews */
body.chat-no-preview .link-preview-card {
    display: none !important;
}

/* Hide system messages (entradas/salidas) */
body.chat-hide-system .canal-msg-system {
    display: none !important;
}

/* Timestamps: al-pasar — oculto por defecto, aparece al hacer hover sobre el mensaje */
body[data-timestamps="al-pasar"] .channel-msg-time {
    opacity: 0;
    transition: opacity 0.15s ease;
}
body[data-timestamps="al-pasar"] .channel-msg:hover .channel-msg-time {
    opacity: 1;
}
body[data-timestamps="nunca"] .channel-msg-time {
    display: none !important;
}
body[data-timestamps="siempre"] .channel-msg-time {
    opacity: 1;
}

/* ── Settings Tab Content ─────────────────────────────────────── */
.chat-settings-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 4px 0 16px;
}

.chat-settings-section {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.chat-settings-section-title {
    background: #f8f9fa;
    padding: 13px 18px;
    border-bottom: 1px solid #e8e8e8;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-primario, #007bff);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 1;
}

.chat-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 10px 18px;
    border-bottom: 1px solid #f3f3f3;
}
.chat-setting-row:last-child { border-bottom: none; }

.chat-setting-row--block {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.chat-setting-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.chat-setting-label > i {
    display: none;
}

.chat-setting-label > span:first-of-type {
    font-size: 13.5px;
    font-weight: 600;
    color: #2d2d2d;
}

.chat-setting-hint {
    font-size: 11.5px;
    color: #888;
    line-height: 1.3;
}

.chat-setting-control {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Slider */
.chat-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 5px;
    border-radius: 3px;
    background: #c0c0c0;
    outline: none;
    cursor: pointer;
}
.chat-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent, #ff6600);
    cursor: pointer;
    box-shadow: 0 0 4px rgba(255,102,0,0.5);
}
.chat-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent, #ff6600);
    cursor: pointer;
    border: none;
}

.slider-min, .slider-max {
    font-size: 11px;
    color: var(--text-muted, #888);
}

.slider-value {
    min-width: 34px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #ff6600);
    background: rgba(255,102,0,0.1);
    border-radius: 5px;
    padding: 1px 5px;
}

/* Emoji size button group */
.btn-group-setting {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
}

.btn-size-opt {
    background: transparent;
    border: none;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--text-muted, #888);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-right: 1px solid rgba(255,255,255,0.08);
}
.btn-size-opt:last-child { border-right: none; }
.btn-size-opt:hover { background: rgba(255,255,255,0.06); color: #ccc; }
.btn-size-opt.active {
    background: var(--accent, #ff6600);
    color: #fff;
    font-weight: 600;
}

/* Select */
.chat-select {
    background: #f7f8fa;
    border: 1.5px solid #c8cdd4;
    border-radius: 8px;
    color: #2d2d2d;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 32px 7px 10px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    min-width: 160px;
}
.chat-select:focus {
    border-color: var(--color-primario, #007bff);
    box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
}
.chat-select:hover {
    border-color: #aaa;
}

/* Toggle switch */
.chat-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}
.chat-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.chat-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #b0b0b0;
    border-radius: 24px;
    transition: background 0.2s;
}
.chat-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.chat-toggle input:checked + .chat-toggle-slider {
    background: var(--accent, #ff6600);
}
.chat-toggle input:checked + .chat-toggle-slider::before {
    transform: translateX(18px);
}

/* Settings footer — sticky flotante igual que .form-actions en Mi Perfil */
.chat-settings-footer {
    position: sticky;
    bottom: 0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 14px 20px;
    display: flex;
    align-items: stretch;
    gap: 14px;
    border-top: 1px solid #e8e8e8;
    margin-top: 4px;
    z-index: 10;
}
.chat-settings-footer .chat-settings-status {
    align-self: center;
}

/* Los botones del footer de Ajustes Chat usan .btn-save y .btn-cancel (definidos arriba)
   igual que la sección Mi Perfil — no se necesitan estilos extra */

.chat-settings-status {
    font-size: 13px;
    transition: color 0.3s;
}
.chat-settings-status.success { color: #4caf50; }
.chat-settings-status.error   { color: #f44336; }

/* ── Favoritos ────────────────────────────────────────────────── */
.favoritos-lista-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
    width: 100%;
}

.favoritos-empty {
    font-size: 12px;
    color: var(--text-muted, #888);
    font-style: italic;
}

.fav-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,102,0,0.12);
    border: 1px solid rgba(255,102,0,0.3);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    color: var(--accent, #ff6600);
}
.fav-chip i { font-size: 10px; }
.fav-chip-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 0 0 2px;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.fav-chip-remove:hover { opacity: 1; }

/* ── Star icon on channel cards ───────────────────────────────── */
.canal-card-star {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: rgba(0,0,0,0.35);
    transition: color 0.2s, transform 0.15s;
    padding: 4px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 1;
    visibility: visible;
}
.canal-card-star:hover {
    color: #ffd700;
    transform: scale(1.15);
}
.canal-card-star.fav-active {
    color: #ffd700;
}
.canal-card-star.fav-active i {
    text-shadow: 0 0 8px rgba(255,215,0,0.6);
}

/* ── Character counter — inline en toolbar ────────────────────── */
.channel-char-counter-inline,
#channel-char-counter {
    font-size: 11px;
    color: var(--text-muted, #888);
    user-select: none;
    transition: color 0.2s;
    white-space: nowrap;
    margin-left: auto;      /* empuja el contador al extremo derecho del toolbar */
    padding-right: 4px;
    align-self: center;
    line-height: 1;
}
#channel-char-counter.chars-warning,
.channel-char-counter-inline.chars-warning { color: #e67e22; }
#channel-char-counter.chars-danger,
.channel-char-counter-inline.chars-danger  { color: #e74c3c; font-weight: 700; }

/* Asegurar visibilidad del contador: min-width y siempre visible */
#channel-char-counter {
    min-width: 56px;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
}

/* ── Barra de grabación de voz ─────────────────────────────────── */
.audio-recording-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: 8px;
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-primary, #eee);
    flex-wrap: wrap;
}
.recording-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e74c3c;
    flex-shrink: 0;
    animation: recording-pulse 1s ease-in-out infinite;
}
@keyframes recording-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}
.recording-label { font-weight: 500; color: #ff7b7b; flex: 1; min-width: 120px; }
#recording-timer { font-family: monospace; color: #ff7b7b; font-weight: 700; }
.recording-max   { font-size: 11px; color: var(--text-muted, #888); }
.recording-btn {
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background .15s;
}
.recording-send   { background: #ff6600; color: #fff; }
.recording-send:hover { background: #e65c00; }
.recording-cancel { background: rgba(255,255,255,0.12); color: #ccc; }
.recording-cancel:hover { background: rgba(255,255,255,0.22); }

/* ── Dropdown selector foto (cámara vs archivo) ─────────────────── */
.photo-picker-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    background: var(--bg-card, #222);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 4px;
    z-index: 200;
    min-width: 190px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.photo-picker-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-primary, #eee);
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
    text-align: left;
}
.photo-picker-menu button:hover { background: rgba(255,255,255,0.1); }
.photo-picker-menu button i     { width: 16px; text-align: center; color: #ff6600; }

/* ── Channel input error message ──────────────────────────────── */
#channel-input-error {
    position: absolute;
    bottom: 100%;
    left: 12px;
    background: rgba(244,67,54,0.9);
    color: #fff;
    font-size: 12.5px;
    border-radius: 6px;
    padding: 4px 10px;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.3s;
    max-width: 320px;
}
#channel-input-error.hidden {
    display: none;
}

/* ── Responsive for chat settings ─────────────────────────────── */
@media (max-width: 600px) {
    .chat-setting-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .chat-setting-control {
        width: 100%;
    }
    .chat-slider {
        width: 100%;
    }
}

/* #channel-char-counter — estilos principales definidos arriba en .char-counter-row */

/* ── Link Preview Card ────────────────────────────────────────────────────── */
.link-preview-card {
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
    background: #f9f9fa;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s;
    cursor: pointer;
}
.link-preview-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    border-color: #ccc;
}
.link-preview-image {
    width: 90px;
    min-height: 80px;
    object-fit: cover;
    flex-shrink: 0;
    border-right: 1px solid #e0e0e0;
    background: #eee;
}
.link-preview-content {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    min-width: 0;
}
.link-preview-title {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.link-preview-desc {
    font-size: 11.5px;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.link-preview-domain {
    font-size: 11px;
    color: #999;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── YouTube preview card ────────────────────────────────────────────────── */
.yt-preview-card {
    flex-direction: column;
    max-width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fafafa;
    overflow: hidden;
}
.yt-top-row {
    display: flex;
    gap: 0;
}
.yt-thumb-wrap {
    position: relative;
    width: 180px;
    min-width: 180px;
    min-height: 100px;
    background: #000;
    overflow: hidden;
    flex-shrink: 0;
}
.yt-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.yt-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.82);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}
.yt-info-body {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.yt-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: #ff0000;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.yt-title {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.yt-author {
    font-size: 12px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 5px;
}
.yt-stats-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 6px 14px 8px;
    border-top: 1px solid #eee;
    background: #f4f4f6;
}
.yt-stat {
    font-size: 11.5px;
    color: #777;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.yt-stat i {
    font-size: 10px;
    color: #999;
}

/* Ocultar previews cuando está desactivado */
body.chat-no-preview .link-preview-card { display: none !important; }

/* ── Toast de permiso requerido ──────────────────────────────────────────── */
.toast-permiso {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(30,30,30,0.92);
    color: #fff;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 13.5px;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    white-space: nowrap;
    max-width: 90vw;
    text-align: center;
}
.toast-permiso.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Foto pendiente de enviar ─────────────────────────────────────────── */
.foto-pending-bar,
.archivo-pending-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--bg-sidebar, #2c2f3e);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    margin-bottom: 4px;
}
.foto-pending-bar.hidden,
.archivo-pending-bar.hidden { display: none !important; }

/* Archivo: icono + nombre */
.archivo-pending-icon {
    font-size: 22px;
    color: #6e8efb;
    flex-shrink: 0;
}
.archivo-pending-name {
    font-size: 12.5px;
    color: var(--text-sidebar, #cdd);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.archivo-pending-size {
    font-size: 11px;
    color: var(--text-muted, #888);
    flex-shrink: 0;
}
.archivo-pending-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.archivo-pending-remove:hover {
    background: rgba(231,76,60,.2);
    color: #e74c3c;
}

.foto-pending-thumb {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,.15);
    flex-shrink: 0;
}

.foto-pending-label {
    font-size: 12px;
    color: var(--text-muted);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.foto-pending-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.foto-pending-remove:hover {
    background: rgba(231,76,60,.2);
    color: #e74c3c;
}

/* ── Modal de captura de cámara ──────────────────────────────────────── */
.camera-capture-modal {
    position: fixed;
    inset: 0;
    z-index: 9900;
    background: rgba(0,0,0,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.camera-capture-modal.hidden { display: none !important; }

.camera-capture-inner {
    background: var(--bg-sidebar, #2c2f3e);
    border-radius: 14px;
    overflow: hidden;
    max-width: 560px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    display: flex;
    flex-direction: column;
}

.camera-capture-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(0,0,0,.25);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.camera-capture-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
    line-height: 1;
    transition: color .15s;
}
.camera-capture-close:hover { color: #e74c3c; }

.camera-capture-video-wrap {
    position: relative;
    background: #000;
    flex: 1;
    min-height: 240px;
    max-height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-preview {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    transform: scaleX(-1); /* espejo para cámara frontal */
    display: block;
}

.camera-capture-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 16px;
    background: rgba(0,0,0,.2);
}

.btn-capture {
    background: var(--accent, #7289da);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .1s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-capture:hover { background: var(--accent-hover, #5f73bc); transform: scale(1.04); }
.btn-capture:active { transform: scale(.97); }

.btn-camera-switch {
    background: rgba(255,255,255,.1);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background .15s;
}
.btn-camera-switch:hover { background: rgba(255,255,255,.2); }

/* ── Cabeceras de categoría en el selector de salas ─────────────────── */
select option.listchan-cat-header {
    font-weight: 700;
    color: #fff;
    background: rgba(114,137,218,.18);
    border-top: 1px solid rgba(255,255,255,.1);
}


/* ── Message delete button (moderators + own messages) ────────────── */
.msg-delete-btn {
    display: none;
    cursor: pointer;
    opacity: 0;
    margin-left: auto;
    font-size: 13px;
    color: #e74c3c;
    padding: 6px 8px;
    transition: opacity 0.2s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
/* Mods: siempre visible */
.channel-mod-mode .msg-delete-btn { display: inline-flex; opacity: 0.5; }
/* Propio mensaje: siempre visible (sin hover) */
.channel-own-msg .msg-delete-btn { display: inline-flex; opacity: 0.5; }
/* Hover directo sobre el botón */
.msg-delete-btn:hover,
.msg-delete-btn:active { opacity: 1 !important; }

/* ── PM message delete button ──────────────────────────────────────── */
.pm-msg-delete-btn {
display: inline-flex;
align-items: center;
cursor: pointer;
opacity: 0.5;
margin-left: auto;
font-size: 13px;
color: #e74c3c;
padding: 6px 8px;
transition: opacity 0.2s;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
border-radius: 4px;
}
.pm-msg-delete-btn:hover,
.pm-msg-delete-btn:active { opacity: 1 !important; }

/* ── Toast container (notificaciones no bloqueantes) ─────────────── */
#toast-container {
position: fixed;
top: 16px;
right: 16px;
z-index: 100000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
max-width: 380px;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 380px;
}
.toast {
    background: #2d2d2d;
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .3s, transform .3s;
    pointer-events: auto;
}
.toast-visible { opacity: 1; transform: translateX(0); }
.toast-warning { border-left: 4px solid #f59e0b; }
.toast-error   { border-left: 4px solid #e74c3c; }
.toast-success { border-left: 4px solid #2ecc71; }
.toast-info    { border-left: 4px solid #7289da; }

/* ── Confirm/Prompt overlay (reemplaza confirm/prompt bloqueantes) ─ */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
    opacity: 0;
    transition: opacity .2s;
}
.confirm-overlay.confirm-visible { opacity: 1; }
.confirm-box {
    background: #2b2d31;
    color: #e0e0e0;
    border-radius: 12px;
    padding: 24px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.confirm-box p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
}
.confirm-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #555;
    border-radius: 8px;
    background: #1e1f22;
    color: #fff;
    font-size: 14px;
    margin-bottom: 16px;
    box-sizing: border-box;
}
.confirm-btns {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.confirm-btns button {
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.confirm-si {
    background: #5865f2;
    color: #fff;
}
.confirm-si:hover { background: #4752c4; }
.confirm-no {
    background: #4e5058;
    color: #e0e0e0;
}
.confirm-no:hover { background: #6d6f78; }

@media (max-width: 480px) {
    #toast-container {
        top: 8px;
        right: 8px;
        left: 8px;
        max-width: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   SECCIÓN COMUNIDAD — Buscar / Favoritos / Bloqueados
   ══════════════════════════════════════════════════════════════ */

.comunidad-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 0 8px;
    margin-bottom: 12px;
}
.comunidad-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.comunidad-icon-wrap i {
    font-size: 32px;
    color: #fff;
}
.comunidad-search-box {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.comunidad-search-box input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    background: #f7f8fa;
    color: #333;
    transition: border-color 0.2s;
}
.comunidad-search-box input:focus {
    outline: none;
    border-color: #6e8efb;
    background: #fff;
}
.comunidad-search-box .btn-save {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.comunidad-user-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 500px;
    overflow-y: auto;
}
.comunidad-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f7f8fa;
    transition: background 0.15s;
}
.comunidad-user-item:hover {
    background: #eef1f7;
}
.comunidad-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #e0e0e0;
}
.comunidad-user-info {
    flex: 1;
    min-width: 0;
}
.comunidad-user-nick {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.comunidad-user-nick:hover {
    color: #6e8efb;
}
.comunidad-user-meta {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 8px;
}
.comunidad-user-meta .dot-online {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.comunidad-user-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.comunidad-user-actions button {
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.btn-comunidad-perfil {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.3);
}
.btn-comunidad-perfil:hover {
    background: rgba(52, 152, 219, 0.35);
}
.btn-comunidad-fav {
    background: #fef3c7;
    color: #b45309;
}
.btn-comunidad-fav:hover { background: #fde68a; }
.btn-comunidad-fav.active {
    background: #f59e0b;
    color: #fff;
}
.btn-comunidad-block {
    background: #fee2e2;
    color: #dc2626;
}
.btn-comunidad-block:hover { background: #fecaca; }
.btn-comunidad-block.active {
    background: #dc2626;
    color: #fff;
}
.btn-comunidad-remove {
    background: #fee2e2;
    color: #dc2626;
}
.btn-comunidad-remove:hover { background: #fecaca; }

/* ── Favoritos: formato compacto (dot+nick / role) ── */
.fav-user-item {
    align-items: center;
}

.fav-nick-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 1px;
}

.fav-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.fav-role-row {
    font-size: 11px;
    color: #888;
    text-transform: capitalize;
    padding-left: 13px;
}
.btn-comunidad-chat {
    background: #dbeafe;
    color: #1d4ed8;
}
.btn-comunidad-chat:hover { background: #bfdbfe; }
.comunidad-empty {
    text-align: center;
    color: #999;
    padding: 24px;
    font-size: 14px;
}
.comunidad-empty i { margin-right: 6px; }

/* ── Profile panel (userlist) ── */
#userlist-profile-panel {
    padding: 14px;
    overflow-y: auto;
    max-height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.profile-panel-close {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    color: #aaa;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    margin-bottom: 12px;
    transition: all 0.2s;
}
.profile-panel-close:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.profile-panel-header {
    text-align: center;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 14px;
}
.profile-panel-avatar {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.12);
    margin-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.profile-panel-nick {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.profile-panel-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: #aaa;
}
.profile-panel-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.profile-panel-status-text { text-transform: capitalize; }
.profile-panel-role {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.profile-panel-body {
    font-size: 13px;
    color: #ccc;
}
.profile-panel-field {
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.profile-panel-label {
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 6px;
    display: block;
    margin-bottom: 2px;
}
.profile-panel-resumen {
    font-style: italic;
    color: #999;
    padding: 10px 0;
    line-height: 1.5;
}
.profile-panel-redes {
    padding: 10px 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.profile-panel-redes a {
    color: #aaa;
    font-size: 18px;
    transition: color 0.2s;
}
.profile-panel-redes a:hover { color: #fff; }
.profile-panel-empty {
    text-align: center;
    color: #666;
    padding: 20px 0;
    font-style: italic;
}

/* ── Comunidad mobile fixes ── */
@media (max-width: 768px) {
    #view-comunidad {
        padding: 0 !important;
    }
    #view-comunidad .profile-settings-container {
        padding: 0;
        max-width: 100%;
        width: 100%;
    }
    #view-comunidad .profile-settings-wrapper {
        max-width: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    #view-comunidad .settings-tabs-selector {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        width: 100%;
        padding: 0 4px;
        box-sizing: border-box;
    }
    #view-comunidad .settings-tabs-selector .tab-btn {
        font-size: 12px;
        padding: 8px 6px;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        text-align: center;
    }
    #view-comunidad .settings-card {
        margin: 0;
        border-radius: 0;
        width: 100%;
        box-sizing: border-box;
    }
    #view-comunidad .card-body {
        padding: 10px 6px;
        width: 100%;
        box-sizing: border-box;
    }
    .comunidad-hero {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 12px 6px 4px;
    }
    .comunidad-icon-wrap { width: 50px; height: 50px; }
    .comunidad-icon-wrap i { font-size: 22px; }
    .comunidad-user-list {
        max-height: none;
        width: 100%;
        padding: 0;
    }
    .comunidad-user-item {
        padding: 10px 8px;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
    }
    .comunidad-user-actions {
        flex-direction: row;
        gap: 6px;
        flex-shrink: 0;
    }
    .comunidad-user-actions button {
        padding: 6px 10px;
        font-size: 12px;
    }
    .comunidad-search-box {
        width: 100%;
        box-sizing: border-box;
        padding: 0;
    }
    .comunidad-search-box input {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .comunidad-user-nick { font-size: 14px; }
    .comunidad-user-meta { font-size: 11px; }
    h2 { font-size: 18px; }
}
/* =============================================
   FULL-SCREEN PROFILE VIEW (view-perfil-usuario)
   ============================================= */

/* Campos del perfil de OTRO usuario: ancho completo, spacing corregido */

/* El inline style de settings-content tiene width:100%+box-sizing:border-box;padding:0
   — app-section ya provee padding:25px, así que aquí no hace falta más padding externo */
#view-perfil-usuario .settings-content {
    box-sizing: border-box !important;
    padding: 0 !important;       /* app-section (padre) ya tiene padding:25px en todos los lados */
    width: 100% !important;
}

/* Tarjetas: margen inferior entre cards */
#view-perfil-usuario .settings-card {
    margin-bottom: 20px;
}

/* Card-body: padding uniforme */
#view-perfil-usuario .card-body {
    padding: 20px !important;
}

/* Grids de 3 columnas: separación explícita con !important */
#view-perfil-usuario .grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;                  /* gap gestionado por margin en input-group */
    column-gap: 0 !important;
    row-gap: 0 !important;
}

/* Grids de 2 columnas: separación explícita */
#view-perfil-usuario .grid-2:not(.grid-email-birth) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
}

/* Separación extra entre grupos de grids dentro de la misma card */
#view-perfil-usuario .mt-15 {
    margin-top: 20px !important;
}

/* Cada campo: caja con padding interno y separación por margen
   Esto garantiza espaciado visible sin depender del gap del grid */
#view-perfil-usuario .input-group {
    min-width: 0;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px !important;
    margin: 6px !important;
    box-sizing: border-box;
}

#view-perfil-usuario .input-group label {
    margin-bottom: 4px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #888 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: block !important;
}

/* Cajas de valor: texto limpio sin doble borde */
#view-perfil-usuario .perfil-val {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    min-height: unset;
    font-size: 0.88rem;
    color: #222;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 600px) {
    #view-perfil-usuario .grid-3,
    #view-perfil-usuario .grid-2:not(.grid-email-birth) {
        grid-template-columns: 1fr !important;
    }
}

.perfil-completo-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 32px;
    overflow-y: auto;
    height: 100%;
}

/* Top bar with back button */
.perfil-topbar {
    margin-bottom: 16px;
}

/* perfil-back-btn: styled like btn-save (same look as Guardar cambios) */
.perfil-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Hero section */
.perfil-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.08) 0%, rgba(26, 26, 46, 0.95) 100%);
    border: 1px solid rgba(255, 102, 0, 0.15);
    border-radius: 16px;
    margin-bottom: 24px;
}

.perfil-hero-avatar {
    position: relative;
    flex-shrink: 0;
}

.perfil-hero-avatar img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 102, 0, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.perfil-status-dot {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #1a1a2e;
    background: #666;
}

.perfil-status-dot.online {
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
}

.perfil-status-dot.offline {
    background: #666;
}

.perfil-hero-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.perfil-hero-nick {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    word-break: break-word;
}

.perfil-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.perfil-status-text {
    font-size: 14px;
    color: #aaa;
}

.perfil-status-text.online {
    color: #2ecc71;
}

.perfil-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.perfil-role-badge.role-admin {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.perfil-role-badge.role-moderador {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.perfil-role-badge.role-vip {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.3);
}

.perfil-role-badge.role-usuario {
    background: rgba(255, 255, 255, 0.05);
    color: #aaa;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Cards grid */
.perfil-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.perfil-card {
    /* Inherits .settings-card styles */
}

.perfil-card .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.perfil-card .card-header i {
    color: #ff6600;
    font-size: 16px;
}

.perfil-card .card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

/* Fields grid inside cards */
.perfil-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 20px;
}

.perfil-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* evita que el contenido desborde la celda de la grid */
}

.perfil-field label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.perfil-field span {
    font-size: 14px;
    color: #ddd;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.perfil-field span.perfil-sin-dato {
    color: #555;
    font-style: italic;
}

.perfil-field span.perfil-privado {
    color: #ff6600;
    font-size: 13px;
    opacity: 0.8;
}

/* Resumen section */
.perfil-resumen-wrapper {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.perfil-resumen-wrapper label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #888;
    margin-bottom: 6px;
}

.perfil-resumen-text {
    font-size: 14px;
    color: #ccc;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Tags (hobbies, mascotas, idiomas) */
.perfil-tags-section {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.perfil-tag-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #888;
    margin-bottom: 6px;
}

.perfil-tag-group label i {
    color: #ff6600;
    font-size: 12px;
}

.perfil-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.perfil-tag { }

/* Social networks */
.perfil-redes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.perfil-red-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 10px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.perfil-red-link:hover {
    background: rgba(255, 102, 0, 0.12);
    border-color: rgba(255, 102, 0, 0.5);
    color: #cc5200;
}

.perfil-red-link i {
    font-size: 18px;
}

.perfil-redes-empty {
    color: #555;
    font-style: italic;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .perfil-completo-container {
        padding: 12px;
    }

    .perfil-hero {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 16px;
    }

    .perfil-hero-avatar img {
        width: 110px;
        height: 110px;
    }

    .perfil-hero-meta {
        justify-content: center;
    }

    .perfil-hero-nick {
        font-size: 22px;
    }

    .perfil-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .perfil-fields-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ============================================================ */
/* PRIVATE MESSAGING — CSS STYLES                               */
/* Add this to the main stylesheet or include as separate file  */
/* ============================================================ */

/* Layout */
.private-layout {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.private-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

/* Empty state */
.private-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    text-align: center;
    padding: 2rem;
    user-select: none;
}

.private-empty-state i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
    color: #8b5cf6;
}

.private-empty-state h3 {
    font-size: 1.4rem;
    color: #e0e0e0;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.private-empty-state p {
    font-size: 0.9rem;
    color: #6b7280;
    max-width: 300px;
    line-height: 1.5;
    margin: 0;
}

/* Active chat */
.private-chat-active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Top bar */
.private-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: #1a1a2e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    min-height: 52px;
}

.private-topbar-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.private-topbar-label {
    font-size: 0.8rem;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

.private-topbar-dot {
    flex-shrink: 0;
}

.private-topbar-nick {
    font-weight: 700;
    font-size: 0.97rem;
    color: #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.private-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.private-topbar-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.45rem 0.55rem;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.private-topbar-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f0f0f0;
}

.private-topbar-btn.active {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

/* Messages area — fondo blanco igual que canales */
.private-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    scroll-behavior: smooth;
    background: #f7f8fa;
}

.private-messages::-webkit-scrollbar {
    width: 4px;
}

.private-messages::-webkit-scrollbar-track {
    background: transparent;
}

.private-messages::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 2px;
}

/* Unread separator */
.priv-msg-unread-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    color: #e94560;
    font-size: 0.75rem;
    font-weight: 600;
}
.priv-msg-unread-sep::before,
.priv-msg-unread-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(233, 69, 96, 0.35);
}
.priv-msg-unread-sep span {
    background: rgba(233, 69, 96, 0.1);
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Message bubbles — mismo estilo que mensajes de canal */
.priv-msg {
    display: flex;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    max-width: 100%;
    animation: privMsgIn 0.2s ease-out;
    transition: background 0.15s;
}

.priv-msg:hover {
    background: rgba(0, 0, 0, 0.03);
}

@keyframes privMsgIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.priv-msg.priv-msg-sent {
    align-self: unset;
    flex-direction: row;
}

.priv-msg.priv-msg-received {
    align-self: unset;
}

.priv-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 2px;
}

.priv-msg-bubble {
    flex: 1;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
}

.priv-msg-sent .priv-msg-bubble,
.priv-msg-received .priv-msg-bubble {
    background: none;
    color: inherit;
    border-radius: 0;
}

/* Header row: nick + timestamp + ticks inline */
.priv-msg-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.priv-msg-nick {
    font-size: 0.9rem;
    font-weight: 700;
    display: inline;
    flex-shrink: 0;
}

.priv-msg-sent .priv-msg-nick {
    color: #e67e22;
}

.priv-msg-received .priv-msg-nick {
    color: #3498db;
}

.priv-msg-content {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.45;
    word-wrap: break-word;
}

.priv-msg-content img.emoji {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}

.priv-msg-content a {
    color: #6e8efb;
    text-decoration: underline;
}

.priv-msg-sent .priv-msg-content a {
    color: #6e8efb;
}

.priv-msg-time {
    font-size: 0.7rem;
    color: #bbb;
    flex-shrink: 0;
}

.priv-msg-read {
    font-size: 0.7rem;
    color: #aaa;
    flex-shrink: 0;
}

.priv-msg-read.read {
    color: #3498db;
    opacity: 1;
}

/* Sidebar right: fields (edad, sexo, estadoCivil, pais) */
.priv-side-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.priv-side-field:last-child { border-bottom: none; }
.priv-side-label {
    color: #888;
    font-weight: 500;
    margin-right: 8px;
}
.priv-side-val {
    color: #333;
    text-align: right;
}

/* Consecutive messages from same user — compact mode */
.priv-msg.priv-msg-consecutive .priv-msg-avatar {
    visibility: hidden;
}

.priv-msg.priv-msg-consecutive .priv-msg-nick {
    display: none;
}

/* System messages */
.priv-msg-system {
    align-self: center;
    max-width: 80%;
    text-align: center;
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    color: #6b7280;
    font-size: 0.78rem;
    font-style: italic;
}

/* Media in bubbles */
.priv-msg-media img {
    max-width: 280px;
    max-height: 300px;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    margin-top: 4px;
}

.priv-msg-media audio {
    max-width: 250px;
    margin-top: 4px;
}

.priv-msg-media video {
    max-width: 280px;
    max-height: 300px;
    border-radius: 8px;
    margin-top: 4px;
}

.priv-msg-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    margin-top: 4px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.priv-msg-file:hover {
    background: rgba(0, 0, 0, 0.25);
}

.priv-msg-file i {
    font-size: 1.5rem;
    opacity: 0.7;
}

.priv-msg-file-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.priv-msg-file-name {
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.priv-msg-file-size {
    font-size: 0.7rem;
    opacity: 0.6;
}

/* Unread separator */
.priv-msg-unread-sep {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
    user-select: none;
}

.priv-msg-unread-sep::before,
.priv-msg-unread-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ef4444;
    opacity: 0.4;
}

.priv-msg-unread-sep span {
    font-size: 0.72rem;
    color: #ef4444;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Date separator */
.priv-msg-date-sep {
    text-align: center;
    padding: 0.6rem 0;
    user-select: none;
}

.priv-msg-date-sep span {
    font-size: 0.72rem;
    color: #6b7280;
    background: #1e1e30;
    padding: 0.2rem 0.8rem;
    border-radius: 10px;
}

/* Typing indicator */
.private-typing {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 1rem 0.5rem;
    font-size: 0.78rem;
    color: #6b7280;
    flex-shrink: 0;
}

.typing-dots {
    display: flex;
    gap: 3px;
}

.typing-dots span {
    width: 5px;
    height: 5px;
    background: #6b7280;
    border-radius: 50%;
    animation: typingDot 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Input area */
.private-input-area {
    background: #fff;
    border-top: 1px solid #e8e8e8;
    padding: 8px 12px;
    flex-shrink: 0;
}

.private-format-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 6px;
    flex-wrap: wrap;
    position: relative;
}

.private-input-area .input-write-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.private-input-area .input-editable {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
    min-height: 38px;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.4;
    font-family: inherit;
    color: #333;
    background: #f7f8fa;
    transition: border-color 0.3s;
    word-wrap: break-word;
    white-space: pre-wrap;
    cursor: text;
    outline: none;
}

.private-input-area .input-editable:focus {
    border-color: #6e8efb;
    outline: none;
    background: #fff;
}

.private-input-area .input-editable:empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
}

.private-input-area .btn-send {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.1s;
}

.private-input-area .btn-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(110, 142, 251, 0.4);
}

/* Right sidebar */
.private-sidebar-right {
    width: 220px;
    background: #fff;
    border-left: 1px solid #e8e8e8;
    overflow-y: auto;
    flex-shrink: 0;
    transition: width 0.25s ease, opacity 0.25s ease;
    display: flex;
    flex-direction: column;
}

.private-sidebar-right.collapsed {
    width: 0;
    overflow: hidden;
    opacity: 0;
    border-left: none;
}

.private-sidebar-content {
    padding: 1.2rem 0.9rem;
}

.private-sidebar-header {
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eff1f5;
    position: relative;
}

.private-sidebar-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.3rem;
    font-size: 0.85rem;
    border-radius: 4px;
    transition: color 0.15s;
}

.private-sidebar-close-btn:hover {
    color: #e94560;
    background: rgba(233, 69, 96, 0.08);
}

.private-sidebar-avatar {
    width: 140px;
    height: 140px;
    min-width: 140px;
    min-height: 140px;
    border-radius: 12px;
    object-fit: cover;
    margin: 0 auto 0.7rem;
    display: block;
    border: 3px solid rgba(139, 92, 246, 0.3);
    aspect-ratio: 1 / 1;
}

.private-sidebar-nick-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}
/* ── Private sidebar status text ── */
.private-sidebar-status-text {
    font-size: 0.78rem;
    color: #aaa;
    text-align: center;
    margin-top: -0.3rem;
    margin-bottom: 0.3rem;
}

.private-sidebar-nick {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a2e;
}

.private-sidebar-status-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}

.dot-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dot-status.online { background: #22c55e; }
.dot-status.ausente { background: #f59e0b; }
.dot-status.ocupado { background: #ef4444; }
.dot-status.desconectado { background: #6b7280; }

.private-sidebar-role {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6e8efb;
    font-weight: 600;
}

.private-sidebar-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.priv-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: #f7f8fa;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    color: #374151;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.priv-action-btn:hover {
    background: #eef1f7;
    color: #111;
}

.priv-action-btn i {
    font-size: 0.95rem;
    color: #6e8efb;
    pointer-events: none;
}

.priv-action-danger {
    color: #e94560;
}

.priv-action-danger i {
    color: #e94560;
}

.priv-action-danger:hover {
    background: rgba(233, 69, 96, 0.08);
    color: #e94560;
}

.private-sidebar-info {
    padding-top: 0.8rem;
}

.private-sidebar-section h4 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
}

.private-sidebar-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    font-size: 0.82rem;
    border-bottom: 1px solid #f0f0f0;
}

.private-sidebar-field-label {
    color: #9ca3af;
}

.private-sidebar-field-value {
    color: #374151;
    font-weight: 500;
}

/* ── Badge de privados en título de sección ── */
#badge-privados {
    background: #e74c3c;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    display: inline-block;
    line-height: 1.4;
}
#badge-privados.hidden {
    display: none;
}

/* ── Sidebar left: private conversation list ── */
#lista-privados .priv-conv-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
    position: relative;
}

#lista-privados .priv-conv-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

#lista-privados .priv-conv-item.active {
    background: rgba(139, 92, 246, 0.12);
}

#lista-privados .priv-conv-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

#lista-privados .priv-conv-info {
    flex: 1;
    min-width: 0;
}

#lista-privados .priv-conv-nick {
    font-size: 0.82rem;
    font-weight: 600;
    color: #e0e0e0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#lista-privados .priv-conv-preview {
    font-size: 0.72rem;
    color: #6b7280;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#lista-privados .priv-conv-badge {
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    flex-shrink: 0;
}

#lista-privados .priv-conv-badge.hidden {
    display: none;
}

#lista-privados .priv-conv-time {
    font-size: 0.65rem;
    color: #4b5563;
    flex-shrink: 0;
    text-align: right;
}

#lista-privados .priv-conv-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* Close button on private conv item (same as channel list close btn) */
#lista-privados .priv-conv-close {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 0.65rem;
    padding: 1px 3px;
    border-radius: 4px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}

#lista-privados .priv-conv-item:hover .priv-conv-close {
    opacity: 1;
}

#lista-privados .priv-conv-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .private-sidebar-right {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 20;
        width: 280px;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    }

    .private-sidebar-right.collapsed {
        width: 0;
    }

    .priv-msg {
        max-width: 88%;
    }

    .priv-msg-media img {
        max-width: 220px;
    }
}

@media (max-width: 480px) {
    .private-topbar-actions .private-topbar-btn:not(#btn-private-close):not(#btn-private-toggle-sidebar) {
        display: none;
    }

    .private-sidebar-right {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════
   PRIVADOS — Estilos sidebar izquierda y topbar
   ═══════════════════════════════════════════════════ */

/* Dot de estado extra para privados sidebar */
.dot-status.offline { background: #6b7280; }
.dot-status.noMolestar { background: #ef4444; }
.dot-status.no-molestar { background: #ef4444; }

/* Item de privado en sidebar izquierda (igual que canal) */
#lista-privados li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.28rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
#lista-privados li:hover {
    background: rgba(110, 142, 251, 0.08);
}
#lista-privados li.active {
    background: rgba(110, 142, 251, 0.15);
}
.private-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #cbd5e1;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
/* Badge de privados: área de click ampliada para evitar que el usuario
   falle el clic y dispare abrirPrivado en lugar de cerrarPrivadoDesdeListado */
#lista-privados .unread-badge {
    flex-shrink: 0;
    padding: 5px 10px;
    min-width: 28px;
    text-align: center;
}

/* Sidebar derecha — nick con dot delante */
.private-sidebar-nick-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}
.private-sidebar-nick-wrap .private-sidebar-nick {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0;
}

/* Sidebar derecha — iconos de acción compactos (solo icono) */

.priv-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #f7f8fa;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    color: #374151;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.priv-action-btn:hover {
    background: #eef1f7;
    color: #6e8efb;
}
.priv-action-btn.priv-action-danger:hover {
    background: #fef2f2;
    color: #e94560;
}

/* ═══════════════════════════════════════════════════
   PERFIL DE USUARIO — Vista de solo lectura
   ═══════════════════════════════════════════════════ */

/* Cabecera: foto cuadrada + nick + status + rango */
.perfil-usuario-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem 0;
}
.perfil-foto-cuadrada {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    border: 3px solid rgba(110, 142, 251, 0.3);
    flex-shrink: 0;
    background: #3e5871;
}
.perfil-usuario-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.perfil-usuario-nick {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}
.perfil-usuario-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #6b7280;
}

/* Campo de valor (solo lectura) — igual visual que un input pero deshabilitado */
.perfil-val {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    min-height: 2.4rem;
    word-break: break-word;
}
.perfil-val:empty::before {
    content: 'Sin especificar';
    color: #9ca3af;
    font-style: italic;
}
.perfil-val .perfil-sin-dato {
    color: #9ca3af;
    font-style: italic;
}
.perfil-val .perfil-privado {
    color: #6b7280;
}

/* Tags dentro de perfil-val */
.perfil-val.perfil-tags { }

/* Badge de estado en notificaciones de favoritos */
.status-notif-friend .status-notif-icon {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

/* Status text en perfil de usuario */
.perfil-status-text.online { color: #22c55e; }


/* Global picker panels (moved to body via JS for cross-view access) */
body > #emoji-picker-panel,
body > #gif-picker-panel {
    position: fixed !important;
    z-index: 10000 !important;
}

/* ── Likes display ── */
.likes-display {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    color: #e94560;
    margin-left: 10px;
}
.likes-display i {
    font-size: 0.85rem;
}
.likes-display .likes-count {
    font-weight: 700;
}
.priv-action-btn.like-btn {
    color: #e94560;
}
.priv-action-btn.like-btn.liked {
    color: #e94560;
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.3);
}
/* Estado activo para favorito */
.priv-action-btn.active {
    background: rgba(110, 142, 251, 0.15);
    border-color: rgba(110, 142, 251, 0.3);
    color: #6e8efb;
}
.priv-action-btn.active i {
    color: #6e8efb;
}
/* Estado activo bloqueado (danger) */
.priv-action-btn.priv-action-danger.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.3);
    color: #e94560;
}
.priv-action-btn.priv-action-danger.active i {
    color: #e94560;
}
.perfil-likes-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.95rem;
    color: #e94560;
}
.perfil-likes-wrap i { font-size: 0.9rem; }
.perfil-likes-wrap .likes-count { font-weight: 700; }
.private-sidebar-likes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.85rem;
    color: #e94560;
    margin-bottom: 0.5rem;
}
.private-sidebar-likes i { font-size: 0.8rem; }
.private-sidebar-likes .likes-count { font-weight: 700; }

/* ── Webcam floating viewer window ─────────────────────────────────────── */
.webcam-float-window {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 320px;
    min-width: 200px;
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    z-index: 9000;
    overflow: hidden;
    user-select: none;
}
.webcam-float-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255,255,255,0.07);
    cursor: move;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    gap: 8px;
}
.webcam-float-nick {
    font-size: 0.82rem;
    font-weight: 600;
    color: #e0e0e0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.webcam-float-nick i { margin-right: 5px; color: #2ecc71; }
.webcam-float-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
.webcam-float-close:hover { color: #fff; }
.webcam-float-video {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    background: #000;
}
.webcam-float-status {
    padding: 5px 10px;
    font-size: 0.72rem;
    color: #888;
    text-align: center;
    background: rgba(0,0,0,0.3);
}
/* Active icon in userlist */
.userlist-webcam.webcam-on:not(.webcam-yo) {
    cursor: pointer;
}
.userlist-webcam.webcam-on:not(.webcam-yo):hover i {
    color: #2ecc71;
}
/* Icono ojo del broadcaster */
.userlist-webcam.webcam-yo {
    cursor: pointer;
}
.userlist-webcam.webcam-yo i {
    transition: color 0.2s;
}
.userlist-webcam.webcam-yo.webcam-on i {
    color: #f39c12;
    animation: eyePulse 2s infinite;
}
@keyframes eyePulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* ── Panel de viewers webcam (broadcaster) ─────────────────────────────── */
#webcam-viewers-panel {
    display: none;
    position: fixed;
    z-index: 1000100;
    width: 240px;
    background: #1e1e35;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
    overflow: hidden;
    font-size: 0.82rem;
    color: #e0e0e0;
}
#webcam-viewers-panel.wvp-visible { display: block; }

.wvp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.83rem;
    font-weight: 600;
}
.wvp-btn-close {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
}
.wvp-btn-close:hover { color: #fff; }

.wvp-body { padding: 6px 0; max-height: 280px; overflow-y: auto; }

.wvp-label {
    padding: 4px 12px 2px;
    font-size: 0.72rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
.wvp-label-queue { color: #f39c12; margin-top: 4px; }

.wvp-empty {
    padding: 10px 12px;
    color: #666;
    font-size: 0.8rem;
    text-align: center;
    margin: 0;
}
.wvp-row {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    gap: 6px;
    transition: background 0.15s;
}
.wvp-row:hover { background: rgba(255,255,255,0.05); }
.wvp-nick { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wvp-btn-kick, .wvp-btn-rechazar {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 3px;
    line-height: 1;
    border-radius: 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.wvp-btn-kick:hover, .wvp-btn-rechazar:hover { opacity: 1; }

/* ── Ventana de espera webcam (viewer en cola) ──────────────────────────── */
.webcam-espera-window {}

.webcam-espera-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 18px;
    gap: 10px;
}
.webcam-espera-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.12);
    border-top-color: #f39c12;
    border-radius: 50%;
    animation: wcmSpin 0.9s linear infinite;
    flex-shrink: 0;
}
@keyframes wcmSpin { to { transform: rotate(360deg); } }

.webcam-espera-msg {
    font-size: 0.85rem;
    color: #e0e0e0;
    text-align: center;
    margin: 0;
}
.webcam-espera-sub {
    font-size: 0.75rem;
    color: #777;
    text-align: center;
    margin: 0;
    line-height: 1.4;
}


/* ============================================================
   BOTÓN SOPORTE / AYUDA en TOPBAR
   ============================================================ */
.btn-soporte-topbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(99,102,241,0.3);
    margin-right: 12px;
}
.btn-soporte-topbar:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.btn-soporte-topbar i { font-size: 13px; }

/* ============================================================
   ICONO TIPO DE CANAL en la CARD del LISTADO
   ============================================================ */
.chan-card-tipo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-bottom: 4px;
    font-size: 13px;
}
.chan-card-tipo-icon i.fa-globe      { color: #22c55e; }   /* público  - verde  */
.chan-card-tipo-icon i.fa-lock       { color: #f59e0b; }   /* privado  - naranja */
.chan-card-tipo-icon i.fa-crown      { color: #a855f7; }   /* vip      - morado  */


/* ========================================
   ZONA VIP — Vista Premium
   ======================================== */

/* Hero */
.vip-hero {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem 1.4rem 1.2rem;
    background: linear-gradient(135deg, rgba(246,201,14,0.12) 0%, rgba(232,160,0,0.06) 100%);
    border-bottom: 1px solid rgba(246,201,14,0.2);
    border-radius: 10px 10px 0 0;
    margin-bottom: 1.4rem;
}

.vip-hero-icon-wrap {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f6c90e 0%, #e8a000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #3a2800;
    box-shadow: 0 4px 18px rgba(230,160,0,0.5);
}

.vip-hero-title {
    margin: 0 0 0.2rem;
    font-size: 1.5rem;
    color: var(--sidebar-texto, #fff);
}

.vip-gold-text {
    background: linear-gradient(90deg, #f6c90e, #ff9f00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* Wrapper tabla con scroll horizontal en móvil */
.vip-compare-wrap {
    overflow-x: auto;
    margin-bottom: 1.6rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
}

/* Tabla comparativa */
.vip-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    min-width: 520px;
}

.vip-compare-table thead tr {
    background: rgba(255,255,255,0.04);
}

.vip-compare-table th {
    padding: 0.9rem 0.8rem;
    font-weight: 700;
    text-align: center;
    border-bottom: 2px solid rgba(255,255,255,0.08);
    white-space: nowrap;
}

.vip-col-feature { width: 42%; text-align: left !important; }
.vip-col-guest   { width: 16%; color: #bbb; }
.vip-col-user    { width: 18%; color: #9ecbff; }
.vip-col-vip     {
    width: 24%;
    background: linear-gradient(180deg, rgba(246,201,14,0.14) 0%, rgba(246,201,14,0.06) 100%);
    border-left: 2px solid rgba(246,201,14,0.35);
    border-right: 2px solid rgba(246,201,14,0.35);
}

.vip-th-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.vip-th-inner i { font-size: 1.1rem; }

.vip-th-gold {
    color: #f6c90e;
}

.vip-best-badge {
    display: inline-block;
    background: linear-gradient(90deg, #f6c90e, #e8a000);
    color: #3a2800;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    margin-top: 2px;
    white-space: nowrap;
}

/* Filas de datos */
.vip-compare-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.10);
    transition: background 0.15s;
}

.vip-compare-table tbody tr:not(.vip-section-row):hover {
    background: rgba(255,255,255,0.03);
}

.vip-compare-table td {
    padding: 0.7rem 0.8rem;
    color: #ddd;
    text-align: center;
    vertical-align: middle;
}

.vip-compare-table td:first-child {
    text-align: left;
    color: #eee;
    font-size: 0.85rem;
}

/* Celda VIP con acento dorado */
.vip-cell-gold {
    background: linear-gradient(180deg, rgba(246,201,14,0.1) 0%, rgba(246,201,14,0.04) 100%);
    border-left: 2px solid rgba(246,201,14,0.35);
    border-right: 2px solid rgba(246,201,14,0.35);
}

/* Filas de sección (categorías) */
.vip-section-row td {
    background: rgba(255,255,255,0.07);
    color: #ccc;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.8rem;
    text-align: left !important;
}

.vip-section-row td i {
    margin-right: 6px;
    color: var(--azul-accion, #3498db);
}

/* Valores en celdas */
.vip-good {
    color: #2ecc71;
    font-weight: 700;
    font-size: 1rem;
}

.vip-bad {
    color: #999;
    font-size: 1rem;
}

.vip-val {
    color: #ccc;
    font-size: 0.82rem;
}

.vip-exclusive {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(90deg, rgba(246,201,14,0.18), rgba(232,160,0,0.1));
    color: #f6c90e;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid rgba(246,201,14,0.3);
    white-space: nowrap;
}

.vip-exclusive i { font-size: 0.65rem; }

/* Borde inferior VIP */
.vip-col-vip,
.vip-cell-gold {
    border-bottom-color: rgba(246,201,14,0.15) !important;
}

/* Última fila — esquinas inferiores de columna VIP */
.vip-compare-table tbody tr:last-child .vip-cell-gold {
    border-bottom: 2px solid rgba(246,201,14,0.35);
}

/* ── CTA ────────────────────────────────── */
.vip-cta-wrap {
    display: flex;
    justify-content: center;
    padding: 0.4rem 0 1rem;
}

.vip-cta-card {
    text-align: center;
    background: linear-gradient(135deg, rgba(246,201,14,0.1) 0%, rgba(232,160,0,0.05) 100%);
    border: 1px solid rgba(246,201,14,0.3);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    max-width: 420px;
    width: 100%;
}

.vip-cta-crown {
    font-size: 2.2rem;
    color: #f6c90e;
    filter: drop-shadow(0 2px 8px rgba(246,201,14,0.5));
    margin-bottom: 0.6rem;
}

.vip-cta-card h3 {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
    color: var(--sidebar-texto, #fff);
}

.vip-cta-card p {
    margin: 0 0 1.2rem;
    color: #aaa;
    font-size: 0.88rem;
    line-height: 1.5;
}

.btn-vip-upgrade {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f6c90e 0%, #e8a000 100%);
    color: #3a2800;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 4px 18px rgba(230,160,0,0.45);
    letter-spacing: 0.02em;
}

/* ── Badge "Gratis" en cabecera de columna ──────────────────── */
.vip-free-badge {
    display: inline-block;
    margin-top: 4px;
    background: rgba(255,255,255,0.15);
    color: #a8ffb0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid rgba(168,255,176,0.4);
}

/* ── Bloque de precios ──────────────────────────────────────── */
.vip-pricing-wrap {
    margin-top: 2.5rem;
    text-align: center;
}
.vip-pricing-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main, #eee);
    margin-bottom: 0.3rem;
}
.vip-pricing-sub {
    font-size: 0.88rem;
    color: var(--text-muted, #999);
    margin-bottom: 1.8rem;
}
.vip-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.1rem;
    margin-bottom: 1.4rem;
}
.vip-plan-card {
    position: relative;
    background: var(--bg-card, #1e1e2e);
    border: 1px solid var(--border, #333);
    border-radius: 14px;
    padding: 1.5rem 1.1rem 1.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.18s, border-color 0.18s;
}
.vip-plan-card:hover {
    transform: translateY(-4px);
    border-color: #c9933a;
}
.vip-plan-card.vip-plan-popular {
    border-color: #e8a83a;
    box-shadow: 0 0 22px rgba(232,168,58,0.22);
}
.vip-popular-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #c9933a, #f0c060);
    color: #1a1a1a;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 14px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.03em;
}
.vip-plan-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main, #eee);
    letter-spacing: 0.02em;
}
.vip-plan-price {
    display: flex;
    align-items: baseline;
    gap: 3px;
}
.vip-plan-amount {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #c9933a, #f0c060);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.vip-plan-period {
    font-size: 0.8rem;
    color: var(--text-muted, #999);
}
.vip-plan-iva {
    font-size: 0.78rem;
    color: var(--text-muted, #999);
    text-align: center;
}
.vip-plan-iva strong {
    color: var(--text-main, #ccc);
}
.vip-plan-save {
    display: inline-block;
    background: rgba(80,200,120,0.15);
    color: #5ac880;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid rgba(90,200,128,0.3);
}
.vip-pricing-note {
    font-size: 0.82rem;
    color: var(--text-muted, #888);
    margin-top: 0.5rem;
}
.vip-pricing-note i {
    color: #c9933a;
}

.btn-vip-upgrade:hover {
    background: linear-gradient(135deg, #ffe033 0%, #f5b800 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(230,160,0,0.6);
}

.btn-vip-upgrade:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(230,160,0,0.35);
}

/* ══════════════════════════════════════════════
   ZONA VIP — fondo oscuro propio
   (el .content padre es blanco, la zona VIP
   necesita su propio fondo oscuro para que los
   textos claros sean legibles)
   ══════════════════════════════════════════════ */
#view-premium {
    background-color: #12111e;
}
/* Hero: sobrescribir colores de perfil-intro que usan valores para fondo claro */
#view-premium .profile-intro h2 {
    color: #f0f0f0;
}
#view-premium .profile-intro p {
    color: #bbb;
}
/* Asegurar que el icono de la corona en el hero se vea */
#view-premium .vip-hero-icon-wrap i {
    color: #f6c90e;
}

}
.chan-card-tipo-icon i.fa-shield-alt { color: #ef4444; }   /* staff    - rojo   */

/* Contenedor de badges sobre la imagen del canal */
.chan-card-badges {
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

.chan-card-badges .chan-card-tipo-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    font-size: 11px;
    margin-bottom: 0;
}

.chan-card-badges .canal-card-star {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fbbf24;
    transition: all 0.2s ease;
}

.chan-card-badges .canal-card-star:hover {
    transform: scale(1.1);
    background: #fff;
}

.chan-card-badges .canal-card-star.fav-active {
    color: #f59e0b;
    background: #fef3c7;
}

/* Nuevos estilos para estructura mejorada */
.chan-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.chan-card-left-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Optimización móvil */
@media (max-width: 600px) {
    .chan-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }
    
    .chan-card-header {
        gap: 10px;
        margin-bottom: 6px;
    }
    
    .chan-card-foto {
        flex-shrink: 0;
    }
    
    .chan-card-foto img {
        width: 45px;
        height: 45px;
    }
    
    .chan-card-nombre {
        font-size: 0.95rem;
        font-weight: 700;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .chan-card-info {
        flex: none;
        min-width: 0;
        margin-bottom: 8px;
    }
    
    .chan-card-desc {
        font-size: 0.8rem;
        margin-bottom: 6px;
        -webkit-line-clamp: 3;
    }
    
    .chan-card-meta {
        font-size: 0.75rem;
        gap: 8px;
    }
    
    .chan-card-accion {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 0 0 0;
        border-top: 1px solid #f0f0f0;
        margin-top: 8px;
    }
    
    .chan-card-left-icons {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .chan-card-tipo-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
        margin-bottom: 0;
    }
    
    .canal-card-star {
        width: 24px;
        height: 24px;
        font-size: 12px;
        padding: 0;
        border: none;
        background: none;
        color: #fbbf24;
        transition: transform 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .canal-card-star:hover {
        transform: scale(1.1);
    }
    
    .canal-card-star.fav-active {
        color: #f59e0b;
    }
    
    .btn-entrar-canal {
        flex: 1;
        padding: 8px 16px;
        font-size: 0.9rem;
        justify-content: center;
    }
}

.chan-card-accion {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   MODAL CONTRASEÑA CANAL PRIVADO
   ============================================================ */
#modal-canal-password {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}
#modal-canal-password.hidden { display: none; }

.modal-pass-box {
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: fadeInUp 0.2s ease;
}

.modal-pass-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.modal-pass-header i {
    font-size: 20px;
    color: #f59e0b;
}
.modal-pass-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}
.modal-pass-desc {
    color: #64748b;
    font-size: 13px;
    margin: 0 0 16px 0;
}

.modal-pass-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.modal-pass-input {
    flex: 1;
    padding: 10px 40px 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    background: #f8fafc;
    color: #1e293b;
    width: 100%;
    box-sizing: border-box;
}
.modal-pass-input:focus { border-color: #6366f1; background: #fff; }

.toggle-pass-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    font-size: 15px;
    line-height: 1;
    transition: color 0.2s;
}
.toggle-pass-btn:hover { color: #6366f1; }

.modal-pass-error {
    display: block;
    color: #ef4444;
    font-size: 12px;
    margin-bottom: 12px;
    min-height: 16px;
}
.modal-pass-error.hidden { display: none; }

.modal-pass-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.btn-modal-pass-cancel {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.btn-modal-pass-cancel:hover { background: #f1f5f9; border-color: #cbd5e1; }

.btn-modal-pass-ok {
    flex: 2;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.2s, transform 0.15s;
}
.btn-modal-pass-ok:hover { opacity: 0.9; transform: translateY(-1px); }

/* ============================================================
   CONFIGURACIÓN DE CANAL
   ============================================================ */
.channel-config-container {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.channel-config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
}

.channel-config-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.channel-config-tabs {
    display: flex;
    gap: 8px;
}

.config-tab-btn {
    padding: 10px 16px;
    background: #f8f9fa;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    color: #64748b;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.config-tab-btn.active {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

.config-tab-btn:hover:not(.active) {
    background: #e5e7eb;
    color: #1e293b;
}

.btn-close-config {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-close-config:hover {
    background: #dc2626;
}

.config-tab-content {
    display: none;
}

.config-tab-content:not(.hidden) {
    display: block;
}

.config-section {
    margin-bottom: 32px;
}

.config-section h3 {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.config-field {
    display: flex;
    flex-direction: column;
}

.config-field label {
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    display: block;
}

.config-field input,
.config-field textarea,
.config-field select {
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
}

.config-field input:focus,
.config-field textarea:focus,
.config-field select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

.config-field textarea {
    resize: vertical;
    min-height: 80px;
}

.config-photo-upload {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Foto canal: contenedor clickable con overlay estilo Mi Perfil */
.config-foto-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid #34495e;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    background: #1a252f;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.config-foto-wrap:hover { transform: scale(1.02); }
.config-foto-wrap:hover .config-foto-overlay { opacity: 1; }
#config-foto-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease;
}
.config-foto-wrap:hover #config-foto-preview { filter: brightness(0.65); }
.config-foto-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8rem;
    font-weight: 600;
}
.config-foto-overlay i { font-size: 1.4rem; }

.btn-upload {
    padding: 8px 16px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s ease;
}

.btn-upload:hover {
    background: #4f46e5;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 400;
    color: #374151;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

.checkmark {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.checkbox-label input:checked ~ .checkmark {
    background: #6366f1;
    border-color: #6366f1;
}

.checkbox-label input:checked ~ .checkmark:after {
    content: "";
    position: absolute;
    display: block;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.config-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid #e5e7eb;
}

.config-staff-list {
    min-height: 200px;
}

.staff-empty-state {
    text-align: center;
    padding: 40px;
    color: #9ca3af;
}

.staff-empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    color: #d1d5db;
}

.staff-empty-state p {
    margin: 8px 0 0 0;
    font-size: 0.95rem;
}

.staff-hint {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 8px;
}

.staff-list-container,
.bans-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bans-empty-state {
    text-align: center;
    padding: 40px;
    color: #9ca3af;
}

.bans-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    color: #10b981;
}

.bans-empty-state p {
    margin: 8px 0 0 0;
    font-size: 0.95rem;
}

/* Fix para create-password-field con el nuevo layout */
#create-password-field .modal-pass-input-wrap {
    margin-bottom: 0;
}
#create-password-field .modal-pass-input {
    border-radius: 8px;
    background: #f8fafc;
}


/* ============================================================
   CANAL CONFIG — Estilos nuevos (Round 4)
   ============================================================ */

/* Layout foto + campos en General */
.config-photo-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.config-photo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 120px;
}
.config-canal-foto {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
}
.btn-photo-change {
    padding: 6px 12px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.2s;
    white-space: nowrap;
}
.btn-photo-change:hover { background: #4f46e5; }
.config-info-fields { flex: 1; display: flex; flex-direction: column; gap: 12px; }

/* Contador de caracteres */
.field-counter {
    font-size: 0.78rem;
    color: #9ca3af;
    float: right;
    font-weight: 400;
}

/* Grid 3 columnas para límites */
.config-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 700px) {
    .config-grid-3 { grid-template-columns: 1fr; }
    .config-photo-row { flex-direction: column; align-items: center; }
}

/* Fundador en Tab General */
.config-fundador-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
.config-fundador-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f59e0b;
}
.config-fundador-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.config-fundador-nick {
    font-weight: 700;
    font-size: 1rem;
    color: #1e293b;
}
.config-badge-fundador {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
}
.config-fundador-change {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
    flex-wrap: wrap;
}
.config-fundador-change input {
    padding: 8px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.9rem;
    min-width: 200px;
}
.field-hint-warning {
    margin: 10px 0 0 0;
    font-size: 0.82rem;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 8px 12px;
}

/* Input con botón inline */
.config-input-with-btn {
    display: flex;
    gap: 4px;
}
.config-input-with-btn input {
    flex: 1;
}
.btn-icon-inline {
    padding: 8px 12px;
    background: #f1f5f9;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: background 0.2s;
}
.btn-icon-inline:hover { background: #e2e8f0; }

/* Toggles con descripción */
.config-toggles-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.config-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    transition: background 0.15s;
}
.config-toggle-row:last-child { border-bottom: none; }
.config-toggle-row:hover { background: #f8fafc; }
.config-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.toggle-label {
    font-weight: 500;
    color: #374151;
    font-size: 0.95rem;
}
.config-toggle-row small {
    color: #9ca3af;
    font-size: 0.8rem;
}

/* Multimedia cards */
.config-multimedia-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
@media (max-width: 700px) {
    .config-multimedia-grid { grid-template-columns: repeat(3, 1fr); }
}
.config-media-item {
    cursor: pointer;
}
.config-media-item input[type="checkbox"] {
    display: none;
}
.config-media-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    transition: all 0.2s;
    color: #9ca3af;
    font-size: 0.85rem;
    font-weight: 500;
}
.config-media-card i { font-size: 1.4rem; }
.config-media-item input:checked + .config-media-card {
    border-color: #6366f1;
    background: #eef2ff;
    color: #6366f1;
}
.config-media-item:hover .config-media-card { border-color: #a5b4fc; }

/* Zona de peligro */
.config-danger-zone {
    border: 2px solid #fecaca;
    border-radius: 10px;
    background: #fff5f5;
    padding: 20px;
    margin-top: 8px;
}
.config-danger-zone h3 { color: #dc2626; margin: 0 0 16px 0; }
.danger-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.danger-action-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.danger-action-info strong { color: #1e293b; }
.danger-action-info small { color: #6b7280; font-size: 0.82rem; }
.btn-danger {
    padding: 10px 18px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-danger:hover { background: #dc2626; }

/* Staff member cards */
.staff-member-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    transition: background 0.15s;
}
.staff-member-card:hover { background: #f1f5f9; }
.staff-founder-card {
    border-color: #fcd34d;
    background: #fffbeb;
}
.staff-founder-card:hover { background: #fef3c7; }
.staff-member-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    flex-shrink: 0;
}
.staff-founder-card .staff-member-avatar { border-color: #fcd34d; }
.staff-member-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.staff-member-nick {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
}
.staff-member-date {
    color: #9ca3af;
    font-size: 0.78rem;
    margin-left: auto;
}
.staff-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
}
.staff-role-fundador { background: #fef3c7; color: #92400e; }
.staff-role-operador { background: #dbeafe; color: #1e40af; }
.staff-role-vip      { background: #f3e8ff; color: #6b21a8; }
.staff-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    background: #6366f1;
    color: white;
    border-radius: 11px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0 6px;
    margin-left: 8px;
}
.staff-count-vip     { background: #7c3aed; }
.staff-count-ban     { background: #ef4444; }
.staff-count-silenced { background: #f59e0b; }

/* Botón quitar staff */
.btn-staff-remove {
    padding: 6px 8px;
    background: transparent;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
    margin-left: auto;
    flex-shrink: 0;
}
.btn-staff-remove:hover { background: #fef2f2; border-color: #ef4444; }

/* Formulario añadir staff */
.staff-add-form {
    margin-top: 16px;
    padding: 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
}
.staff-add-header {
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.staff-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.staff-add-row input {
    flex: 1;
    padding: 9px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.9rem;
}
.staff-add-row input:focus { outline: none; border-color: #6366f1; }
.field-hint {
    margin: 8px 0 0 0;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* Botones pequeños */
.btn-primary-sm {
    padding: 9px 14px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-primary-sm:hover { background: #4f46e5; }
.btn-vip-sm { background: #7c3aed; }
.btn-vip-sm:hover { background: #6d28d9; }
.btn-warning-sm {
    padding: 8px 14px;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-warning-sm:hover { background: #d97706; }
.btn-warning-action {
    padding: 10px 16px;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-warning-action:hover { background: #d97706; }

/* Formulario de ban */
.ban-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 160px auto;
    gap: 12px;
    align-items: end;
}
@media (max-width: 800px) {
    .ban-form-grid { grid-template-columns: 1fr 1fr; }
    .ban-submit-col { grid-column: span 2; }
}
@media (max-width: 480px) {
    /* Ban/Silencio: apilar todos los campos verticalmente */
    .ban-form-grid {
        grid-template-columns: 1fr;
    }
    .ban-submit-col {
        grid-column: span 1;
    }
    /* Agregar Operador: botón debajo del input */
    .staff-add-row {
        flex-direction: column;
        align-items: stretch;
    }
    .staff-add-row input {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .staff-add-row .btn-primary-sm {
        width: 100%;
        justify-content: center;
    }
}
.ban-submit-col { display: flex; flex-direction: column; }

/* Items de la lista de bans */
.ban-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 8px;
    flex-wrap: wrap;
}
.ban-item-silenced {
    background: #fffbeb;
    border-color: #fde68a;
}
.ban-item-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.ban-nick {
    font-weight: 700;
    color: #dc2626;
    font-size: 0.95rem;
}
.ban-item-silenced .ban-nick { color: #92400e; }
.ban-reason {
    font-size: 0.85rem;
    color: #6b7280;
}
.ban-expiry {
    font-size: 0.8rem;
    color: #9ca3af;
}
.btn-unban {
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.btn-unban:hover { background: #fef2f2; }
.btn-unsilence {
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #f59e0b;
    color: #92400e;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.btn-unsilence:hover { background: #fffbeb; }

/* Fix: config-tab-content usa clase 'active' para mostrar, no ausencia de 'hidden' */
.config-tab-content { display: none; }
.config-tab-content.active { display: block; }
.config-tab-content:not(.hidden) { display: block; } /* backward compat */

/* Staff loading state */
.staff-loading {
    text-align: center;
    padding: 24px;
    color: #9ca3af;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ─── Vista: Mis Canales ─────────────────────────────────────── */
.mis-canales-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}
.mis-canales-icon-wrap {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    flex-shrink: 0;
}
.mis-canales-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mis-canal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    transition: background 0.15s;
}
.mis-canal-item:hover { background: #f3f4f6; }
.mis-canal-avatar {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
}
.mis-canal-info {
    flex: 1;
    min-width: 0;
}
.mis-canal-nombre {
    font-weight: 600;
    font-size: 0.95rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mis-canal-meta {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 2px;
}
.mis-canal-badge {
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 600;
    margin-left: 6px;
}
.mis-canal-badge.publico  { background: #d1fae5; color: #065f46; }
.mis-canal-badge.privado  { background: #fee2e2; color: #991b1b; }
.mis-canal-badge.vip      { background: #fef3c7; color: #92400e; }
.mis-canal-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.btn-mis-canal-config {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.btn-mis-canal-config:hover { background: #e5e7eb; color: #374151; border-color: #9ca3af; }
.btn-mis-canal-dejar {
    background: none;
    border: 1px solid #fca5a5;
    border-radius: 7px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: #ef4444;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.btn-mis-canal-dejar:hover { background: #fee2e2; border-color: #ef4444; }

/* ── Grid de canales favoritos en Mis Canales ── */
.mis-canales-fav-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0 8px;
    width: 100%;
}
.mis-canales-fav-grid .chan-card {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
/* Cabecera de la card: foto + nombre en fila */
.chan-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
/* Topic bajo el nombre del canal */
.chan-card-topic {
    font-size: 0.78rem;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* Pestaña de Mis Canales — tabs en el hero */
#view-mis-canales .mis-canales-hero .profile-intro {
    flex: 1;
}
#view-mis-canales .mis-canales-hero .settings-tabs-selector {
    margin-top: 10px;
}
/* Ocultar correctamente los paneles de tab */
#view-mis-canales .settings-tab-content.hidden {
    display: none;
}
/* Mis Canales: que el wrapper ocupe todo el ancho disponible */
#view-mis-canales .profile-settings-container {
    width: 100%;
    max-width: 100%;
}
#view-mis-canales .profile-settings-wrapper {
    width: 100%;
    max-width: 100%;
}

/* ────────────────────────────────────────
   MENÚ RÁPIDO DE CANAL (botón derecho sidebar)
   ──────────────────────────────────────── */
#canal-quick-menu {
    position: fixed;
    background: #1e2230;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 10500;
    min-width: 240px;
    padding: 8px 0;
    animation: fadeInDown 0.15s ease;
}
#canal-quick-menu.hidden { display: none; }
#canal-quick-menu .cqm-header {
    padding: 6px 14px 10px;
    font-size: .75rem;
    font-weight: 700;
    color: #6e8efb;
    text-transform: uppercase;
    letter-spacing: .07em;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 4px;
}
#canal-quick-menu .cqm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    font-size: 0.83rem;
    color: #c0c7d4;
    cursor: pointer;
    transition: background 0.13s;
}
#canal-quick-menu .cqm-item:hover { background: rgba(255,255,255,0.06); }
#canal-quick-menu .cqm-item-left { display:flex; align-items:center; gap:9px; }
#canal-quick-menu .cqm-item i { width:16px; text-align:center; color:#6e8efb; font-size:.8rem; }
#canal-quick-menu .cqm-sep {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 4px 10px;
}
/* Toggle switch dentro del menú */
#canal-quick-menu .cqm-toggle {
    position: relative;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
}
#canal-quick-menu .cqm-toggle input { opacity:0; width:0; height:0; }
#canal-quick-menu .cqm-toggle .slider {
    position: absolute;
    inset: 0;
    background: #444;
    border-radius: 18px;
    transition: background 0.2s;
    cursor: pointer;
}
#canal-quick-menu .cqm-toggle .slider:before {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
#canal-quick-menu .cqm-toggle input:checked + .slider { background: #6e8efb; }
#canal-quick-menu .cqm-toggle input:checked + .slider:before { transform: translateX(14px); }
/* Slow mode input inline */
#canal-quick-menu .cqm-slow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
}
#canal-quick-menu .cqm-slow-row label { color: #aaa; font-size:.8rem; flex:1; }
#canal-quick-menu .cqm-slow-row input[type=number] {
    width: 60px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #eee;
    font-size: .82rem;
    padding: 3px 6px;
    text-align: center;
}
#canal-quick-menu .cqm-slow-row select {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #eee;
    font-size: .78rem;
    padding: 3px 6px;
}
#canal-quick-menu .cqm-btn-apply {
    display: block;
    margin: 8px 10px 4px;
    background: #6e8efb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 0;
    width: calc(100% - 20px);
    font-size: .83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
#canal-quick-menu .cqm-btn-apply:hover { background: #5a7aee; }

/* Pastilla decorativa (handle) visible solo en móvil bottom-sheet */
#canal-quick-menu .cqm-handle {
    display: none;
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin: 10px auto 4px;
}

/* Fila inferior con botones Cancelar + Aplicar */
#canal-quick-menu .cqm-btn-row {
    display: flex;
    gap: 10px;
    padding: 10px 14px 4px;
}
#canal-quick-menu .cqm-btn-row .cqm-btn-apply,
#canal-quick-menu .cqm-btn-row .cqm-btn-cancel {
    flex: 1;
    margin: 0;
    padding: 10px 0;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .18s;
}
#canal-quick-menu .cqm-btn-row .cqm-btn-apply  { background: #6e8efb; color: #fff; }
#canal-quick-menu .cqm-btn-row .cqm-btn-apply:hover  { background: #5a7aee; }
#canal-quick-menu .cqm-btn-row .cqm-btn-cancel { background: rgba(255,255,255,0.08); color: #ccc; }
#canal-quick-menu .cqm-btn-row .cqm-btn-cancel:hover { background: rgba(255,255,255,0.14); }

/* Botón cerrar — solo visible en móvil */
#canal-quick-menu .cqm-back-btn {
    display: none;
    background: none;
    border: none;
    color: #8898b8;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    margin-left: auto;
    line-height: 1;
}
#canal-quick-menu .cqm-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Overlay oscuro detrás del bottom sheet (solo móvil) */
.cqm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10100;
}
.cqm-overlay:not(.hidden) { display: block; }

/* ── Móvil: bottom sheet que sube desde abajo ── */
@media (max-width: 768px) {
    #canal-quick-menu:not(.hidden) {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 82svh !important;
        min-width: unset !important;
        border-radius: 18px 18px 0 0 !important;
        border: none !important;
        border-top: 1px solid rgba(255,255,255,0.12) !important;
        z-index: 10200 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
        box-shadow: 0 -8px 32px rgba(0,0,0,0.6) !important;
        animation: cqmSlideUp 0.22s cubic-bezier(0.32,0.72,0,1) !important;
    }
    #canal-quick-menu .cqm-back-btn {
        display: inline-flex !important;
        align-items: center;
    }
    #canal-quick-menu .cqm-handle {
        display: block;
    }
}

@keyframes cqmSlideUp {
    from { transform: translateY(100%); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1;   }
}

/* ────────────────────────────────────────
   PERFIL — Botones de promoción de Admin
   ──────────────────────────────────────── */
#perfil-admin-promote-wrap .promote-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
#perfil-admin-promote-wrap .btn-promote {
    flex: 1;
    min-width: 140px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}
#perfil-admin-promote-wrap .btn-promote:hover { opacity: .85; transform: translateY(-1px); }
#perfil-admin-promote-wrap .btn-promote:disabled { opacity: .38; cursor: not-allowed; transform: none; }
#perfil-admin-promote-wrap .btn-promote-oper { background: linear-gradient(135deg,#3498db,#2980b9); color:#fff; }
#perfil-admin-promote-wrap .btn-promote-vip  { background: linear-gradient(135deg,#f39c12,#e67e22); color:#fff; }

/* ============================================================
   BOTÓN PANEL ADMIN en TOPBAR
   ============================================================ */
.btn-admin-panel-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 0.85rem;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(231,76,60,0.4);
    margin-right: 8px;
    flex-shrink: 0;
}
.btn-admin-panel-topbar:hover { opacity: 1; transform: translateY(-1px) scale(1.07); }
.btn-admin-panel-topbar i { font-size: 13px; }

/* ============================================================
   MODAL PANEL ADMIN DE RED
   ============================================================ */
@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.modal-admin-panel {
    background: var(--bg-panel, #1e2030);
    border-radius: 16px;
    width: min(680px, 96vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.55);
    overflow: hidden;
    animation: modalIn 0.18s ease;
}
.modal-admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.modal-admin-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main, #e8eaf0);
}
.modal-admin-panel-title i {
    color: #e74c3c;
    font-size: 1.1rem;
}
.modal-admin-panel-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.admpanel-tab {
    flex: 1;
    padding: 9px 10px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted, #8890a4);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
}
.admpanel-tab:hover { color: var(--text-main, #e8eaf0); }
.admpanel-tab-active {
    color: #e74c3c !important;
    border-bottom-color: #e74c3c;
    background: rgba(231,76,60,0.08);
}
.admpanel-tab.hidden { display: none; }
.modal-admin-panel-body {
    flex: 1;
    overflow: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
}
.admpanel-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admpanel-content.hidden { display: none; }
.admpanel-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admpanel-loading {
    text-align: center;
    color: var(--text-muted, #8890a4);
    padding: 32px 0;
    font-size: 0.9rem;
}
.admpanel-empty {
    text-align: center;
    color: var(--text-muted, #8890a4);
    padding: 32px 0;
    font-size: 0.88rem;
}
.admpanel-empty i { display: block; font-size: 2rem; margin-bottom: 10px; opacity: 0.35; }
.admpanel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 10px 14px;
    transition: background 0.15s;
}
.admpanel-row:hover { background: rgba(255,255,255,0.07); }
.admpanel-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.1);
}
.admpanel-info {
    flex: 1;
    min-width: 0;
}
.admpanel-nick {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-main, #e8eaf0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admpanel-meta {
    font-size: 0.75rem;
    color: var(--text-muted, #8890a4);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admpanel-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}
.admpanel-badge-vip { background: rgba(243,156,18,0.18); color: #f39c12; }
.admpanel-badge-oper { background: rgba(52,152,219,0.18); color: #3498db; }
.admpanel-badge-ban { background: rgba(231,76,60,0.18); color: #e74c3c; }
.admpanel-btn-del {
    background: rgba(231,76,60,0.12);
    color: #e74c3c;
    border: 1px solid rgba(231,76,60,0.25);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.85rem;
    transition: background 0.15s, transform 0.1s;
}
.admpanel-btn-del:hover { background: rgba(231,76,60,0.28); transform: scale(1.08); }
.admpanel-btn-del:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* ── Responsive: config de canal en móvil ─────────────────── */
@media (max-width: 600px) {
    .channel-config-header {
        flex-wrap: wrap;
        gap: 8px;
        position: relative;
        padding-right: 48px; /* espacio para el botón cerrar */
    }
    .btn-close-config {
        position: absolute;
        top: 0;
        right: 0;
    }
    .channel-config-tabs {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }
    .config-tab-btn {
        flex: 1 1 auto;
        text-align: center;
        padding: 8px 10px;
        font-size: 0.85rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   LLAMADA / VIDEOLLAMADA PRIVADA — OVERLAY
   ══════════════════════════════════════════════════════════════════════════ */

.call-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.call-overlay.hidden { display: none !important; }

/* Fondo semitransparente con blur */
.call-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 20, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Tarjeta central */
.call-overlay-content {
    position: relative;
    z-index: 1;
    width: min(480px, 94vw);
    padding: 28px 24px 24px;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(30,35,55,0.95), rgba(18,22,38,0.98));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Badge de tipo de llamada */
.call-type-badge {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 6px;
}
.call-type-badge i { margin-right: 5px; }

/* Avatar */
.call-avatar-wrap {
    position: relative;
    margin-bottom: 4px;
}
.call-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.15);
    display: block;
    transition: opacity 0.3s;
}

/* Animación de pulso: "llamando…" o "llamada entrante" */
.call-overlay.calling .call-avatar,
.call-overlay.incoming .call-avatar {
    animation: callPulse 2s ease-in-out infinite;
}
@keyframes callPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0.45); }
    50%       { box-shadow: 0 0 0 22px rgba(46,204,113,0); }
}

/* Nick y estado */
.call-nick {
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 4px;
}
.call-status {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
}
.call-timer {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    margin-top: 2px;
}
.call-timer.hidden { display: none; }

/* ── Video remoto (grande) ─────────────────────────────────────────── */
.call-remote-video {
    width: 100%;
    max-height: 46vh;
    border-radius: 12px;
    background: #000;
    object-fit: cover;
    margin-top: 8px;
}
.call-remote-video.hidden { display: none; }

/* ── Video local PIP (esquina inferior derecha) ────────────────────── */
.call-local-video {
    position: absolute;
    bottom: 88px;
    right: 14px;
    width: 110px;
    height: 82px;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.25);
    object-fit: cover;
    background: #000;
    z-index: 2;
    cursor: pointer;
}
.call-local-video.hidden { display: none; }

/* ── Controles ─────────────────────────────────────────────────────── */
.call-controls {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.call-control-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: #fff;
    background: rgba(255,255,255,0.12);
    transition: background 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.call-control-btn:hover  { background: rgba(255,255,255,0.22); transform: scale(1.08); }
.call-control-btn:active { transform: scale(0.96); }
.call-control-btn.hidden { display: none !important; }
.call-control-btn.call-btn-red   { background: #e74c3c; }
.call-control-btn.call-btn-red:hover   { background: #c0392b; }
.call-control-btn.call-btn-green { background: #2ecc71; }
.call-control-btn.call-btn-green:hover { background: #27ae60; }
.call-control-btn.muted { background: #e74c3c; }

/* Animación del botón "aceptar" cuando hay llamada entrante */
.call-overlay.incoming #call-btn-accept {
    animation: callRing 0.55s ease-in-out infinite alternate;
}
@keyframes callRing {
    from { transform: rotate(-12deg) scale(1); }
    to   { transform: rotate(12deg) scale(1.12); }
}

/* ── MÓVIL: overlay a pantalla completa ────────────────────────────── */
@media (max-width: 600px) {
    .call-overlay-bg {
        backdrop-filter: blur(6px);
    }
    .call-overlay-content {
        width: 100%;
        min-height: 100dvh;
        border-radius: 0;
        padding: 48px 20px 32px;
        justify-content: center;
        border: none;
    }
    .call-remote-video {
        max-height: 40vh;
    }
    .call-local-video {
        width: 90px;
        height: 68px;
        bottom: 100px;
        right: 10px;
    }
    .call-control-btn {
        width: 64px;
        height: 64px;
        font-size: 1.35rem;
    }
}

/* ─── Bot Soporte — Área de tarjetas ─────────────────────────────────────── */
/* ── Área de chips del bot Soporte ── */
.bot-soporte-area {
    padding: 12px 14px 12px;
    background: #ffffff;
    border-top: 2px solid #e8edf5;
    flex-shrink: 0;
    box-shadow: 0 -3px 12px rgba(0,0,0,0.06);
}
.bot-soporte-area.hidden {
    display: none;
}
.bot-soporte-chips-label {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.bot-soporte-chips-label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}
.bot-soporte-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-height: 130px;
    overflow-y: auto;
}
.bot-soporte-chips::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.bot-soporte-chips::-webkit-scrollbar-track {
    background: transparent;
}
.bot-soporte-chips::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.bot-chip {
    background: #f0f4ff;
    color: #3b5bdb;
    border: 1.5px solid #c5d0fa;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s,
                transform 0.12s, box-shadow 0.15s;
    white-space: nowrap;
    line-height: 1.4;
    user-select: none;
}
.bot-chip:hover {
    background: #3b5bdb;
    color: #ffffff;
    border-color: #3b5bdb;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(59,91,219,0.28);
}
.bot-chip:active {
    transform: translateY(0);
    box-shadow: none;
}
/* Chips especiales: Volver / Inicio */
.bot-chip.chip-back {
    background: #f8f9fa;
    color: #64748b;
    border-color: #dde3ec;
}
.bot-chip.chip-back:hover {
    background: #64748b;
    color: #fff;
    border-color: #64748b;
    box-shadow: 0 4px 10px rgba(100,116,139,0.25);
}
.bot-chip.chip-sos {
    background: #fff5f5;
    color: #e11d48;
    border-color: #fda4af;
}
.bot-chip.chip-sos:hover {
    background: #e11d48;
    color: #fff;
    border-color: #e11d48;
    box-shadow: 0 4px 10px rgba(225,29,72,0.28);
}
.bot-chip-loading {
    color: #3b5bdb;
    font-size: 0.95rem;
    padding: 4px 8px;
    display: inline-block;
    opacity: 0.7;
}
/* Mensajes del bot — heredan estilo normal de privados, sin override */
.bot-soporte-msg .priv-msg-bubble {
    background: none;
    border: none;
}
.bot-soporte-msg .priv-msg-nick {
    color: #3498db;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTONES TOPBAR — ocultar span en móvil salvo en status
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Por defecto, solo icono en canales/privados/etc */
    .btn-register-topbar span,
    .btn-premium-topbar span {
        display: none;
    }
    /* Solo en status se muestra el texto */
    body.view-is-status .btn-register-topbar span,
    body.view-is-status .btn-premium-topbar span {
        display: inline;
    }
    /* Ajuste de padding al quedarse solo el icono */
    .btn-register-topbar,
    .btn-premium-topbar {
        padding: 7px 10px;
    }
    body.view-is-status .btn-register-topbar,
    body.view-is-status .btn-premium-topbar {
        padding: 7px 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ERROR BUBBLE NAV — variante móvil (debajo iconos, ancho completo sidebar)
   ═══════════════════════════════════════════════════════════════════ */
.error-bubble-nav-mobile {
    position: fixed !important;
    left: 0 !important;
    /* width se pone desde JS (ancho real del sidebar) */
    border-radius: 0 0 6px 6px !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
    font-size: 11px !important;
    padding: 7px 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important;
    z-index: 10500 !important;
}
.error-bubble-nav-mobile::after {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HINT MÓVIL STATUS — cómo abrir el menú lateral
   ═══════════════════════════════════════════════════════════════════ */
.status-mobile-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #1a6e3c 0%, #27ae60 100%);
    color: #fff;
    padding: 11px 14px;
    border-radius: 10px;
    margin: 10px 12px 0;
    font-size: 0.82rem;
    line-height: 1.4;
    box-shadow: 0 3px 12px rgba(39,174,96,0.35);
    animation: hintSlideDown 0.4s ease;
}
@keyframes hintSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.status-mobile-hint > i:first-child {
    font-size: 1.2rem;
    flex-shrink: 0;
    opacity: 0.9;
}
.status-mobile-hint span {
    flex: 1;
}
.status-mobile-hint strong {
    color: #b9f6ca;
}
.status-mobile-hint-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: background 0.2s;
}
.status-mobile-hint-close:hover {
    background: rgba(255,255,255,0.35);
}
/* Solo visible en pantallas pequeñas */
@media (min-width: 769px) {
    .status-mobile-hint { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   VISTA JUEGOS
   ═══════════════════════════════════════════════════════════════════ */
#view-juegos {
    padding: 0;
    overflow-y: auto;
}
.juegos-header {
    padding: 24px 20px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
.juegos-header h2 {
    margin: 0 0 4px;
    font-size: 1.35rem;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 8px;
}
.juegos-header h2 i { color: #3d5af1; }
.juegos-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: #777;
}
.juegos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 20px;
}
@media (max-width: 500px) {
    .juegos-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
}
@media (max-width: 340px) {
    .juegos-grid { grid-template-columns: 1fr; }
}
.juego-card {
    background: #fff;
    border: 1.5px solid #e8eaf0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.juego-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(61,90,241,0.13);
    border-color: #3d5af1;
}
.juego-card-icon {
    font-size: 2.6rem;
    text-align: center;
    padding: 18px 10px 8px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f5e9 100%);
    line-height: 1;
}
.juego-card-body {
    padding: 12px 14px 6px;
    flex: 1;
}
.juego-card-body h3 {
    margin: 0 0 4px;
    font-size: 0.98rem;
    color: #1a1a2e;
}
.juego-card-body p {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: #666;
    line-height: 1.4;
}
.juego-card-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.juego-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}
.juego-badge-dif-facil  { background: #e8f5e9; color: #2e7d32; }
.juego-badge-dif-medio  { background: #fff8e1; color: #f57f17; }
.juego-badge-dif-dificil { background: #fce4ec; color: #c62828; }
.juego-badge-tipo       { background: #e8eaf0; color: #3d5af1; }
.btn-jugar {
    width: 100%;
    padding: 10px;
    background: #3d5af1;
    color: #fff;
    border: none;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.18s;
    border-top: 1px solid rgba(61,90,241,0.15);
    margin-top: 8px;
}
.btn-jugar:hover { background: #2a3fc4; }

/* Cards VIP-only */
.juego-card-vip {
    position: relative;
    border-color: #f0c040;
}
.juego-card-vip:hover {
    border-color: #f0c040;
    box-shadow: 0 8px 24px rgba(240,192,64,0.22);
}
.juego-card-vip .juego-card-icon {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
}
.juego-vip-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #f0c040, #e6a800);
    color: #5a3e00;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.juego-card-vip .btn-jugar {
    background: linear-gradient(135deg, #f0c040, #e6a800);
    color: #5a3e00;
    border-top-color: rgba(240,192,64,0.3);
}
.juego-card-vip .btn-jugar:hover {
    background: linear-gradient(135deg, #e6a800, #c88e00);
}

/* Área donde se carga el juego activo */
.juego-area {
    margin: 0 20px 20px;
    border: 2px solid #3d5af1;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(61,90,241,0.15);
}
.juego-area-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #3d5af1;
    color: #fff;
}
.juego-area-topbar span {
    font-weight: 700;
    font-size: 0.9rem;
}
.btn-juego-cerrar {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.18s;
}
.btn-juego-cerrar:hover { background: rgba(255,255,255,0.35); }
.juego-area-content {
    background: #1a1a2e;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.juego-proximamente {
    color: #aaa;
    text-align: center;
    padding: 40px 20px;
}
.juego-proximamente i { font-size: 3rem; display: block; margin-bottom: 12px; color: #3d5af1; }
.juego-proximamente p { font-size: 1rem; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   GAME PLAYER — vista donde corre el juego (iframe a pantalla completa)
   PC: ocupa el panel central (topbar + sidebar siguen visibles)
   Móvil: ocupa toda la pantalla menos la topbar
═══════════════════════════════════════════════════════════════════════ */
#view-game-player {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    /* Ocupa todo el panel central (topbar y sidebars siguen visibles) */
    position: absolute;
    inset: 0;
    z-index: 10;
    animation: none !important; /* desactivar fadeInView para evitar transform en position:absolute */
}

.game-player-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: #16213e;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    height: 46px;
    min-height: 46px;
}

.btn-game-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.07);
    border: none;
    color: #ccc;
    border-radius: 7px;
    padding: 5px 13px;
    cursor: pointer;
    font-size: 0.83rem;
    font-family: inherit;
    transition: background 0.2s, color 0.15s;
    white-space: nowrap;
}
.btn-game-back:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
}
.btn-game-back i { font-size: 0.75rem; }

#game-player-titulo {
    font-size: 0.97rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-player-bar-spacer { flex: 1; }

.game-player-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #1a1a2e;
}

#game-player-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: #1a1a2e;
}

/* Fallback "en construcción" a pantalla completa dentro del player */
.juego-proximamente-fullscreen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #1a1a2e;
    color: #aaa;
    text-align: center;
    padding: 32px;
}
.juego-proximamente-fullscreen .jp-emoji {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 4px;
    filter: grayscale(0.4);
}
.juego-proximamente-fullscreen h2 {
    font-size: 1.4rem;
    color: #e2e8f0;
    font-weight: 700;
}
.juego-proximamente-fullscreen p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
}
.btn-jp-volver {
    margin-top: 8px;
    background: rgba(61,90,241,0.2);
    color: #a5b4fc;
    border: 1px solid rgba(61,90,241,0.4);
    border-radius: 8px;
    padding: 9px 20px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background 0.2s;
}
.btn-jp-volver:hover { background: rgba(61,90,241,0.35); color: #c7d2fe; }

/* Móvil: el game player ocupa toda la pantalla menos la topbar */
@media (max-width: 768px) {
    #view-game-player {
        /* En móvil la topbar tiene altura variable, usamos la variable CSS si existe */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 500; /* por encima del panel central pero debajo de modales */
    }
}


/* ========================================================================
   PANEL DE JUEGOS 1vs1 (retos dentro de un chat privado)
   ======================================================================== */
.duelo-modal {
    background: #fff;
    border-radius: 16px;
    width: 92%;
    max-width: 640px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: fadeInDown 0.3s ease;
}
.duelo-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #eee;
}
.duelo-modal-header h4 {
    margin: 0;
    font-size: 1.15rem;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.duelo-modal-header h4 i { color: #3d5af1; }
.duelo-modal-header #duelo-rival-nick { color: #3d5af1; font-weight: 700; }
.duelo-modal-subtitle {
    margin: 14px 24px 0;
    color: #777;
    font-size: 0.88rem;
}
.duelo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 20px 24px 24px;
}
.duelo-card {
    background: #f7f8fc;
    border: 1px solid #eaecf5;
    border-radius: 14px;
    padding: 18px 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
}
.duelo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(61,90,241,0.15);
    border-color: #c7d0f7;
}
.duelo-card:active { transform: translateY(0); }
.duelo-card-icon {
    font-size: 2.1rem;
    line-height: 1;
}
.duelo-card h3 {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #2c3e50;
}
.duelo-badge {
    background: #e8eaf0;
    color: #3d5af1;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
}

@media (max-width: 640px) {
    .duelo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
}
@media (max-width: 380px) {
    .duelo-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .duelo-card { padding: 14px 8px 10px; }
    .duelo-card-icon { font-size: 1.8rem; }
}

/* ========================================================================
   JUEGOS 1vs1 — invitación y tablero de partida
   ======================================================================== */
.duelo-invitacion-box {
    background: #fff;
    border-radius: 18px;
    width: 90%;
    max-width: 380px;
    padding: 28px 24px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: fadeInDown 0.3s ease;
}
.duelo-invitacion-emoji { font-size: 3rem; margin-bottom: 6px; }
.duelo-invitacion-box h3 { margin: 6px 0 4px; font-size: 1.1rem; color: #2c3e50; }
.duelo-invitacion-box p { margin: 0 0 18px; color: #888; font-size: 0.88rem; }
.duelo-invitacion-actions { display: flex; gap: 12px; justify-content: center; }
.btn-duelo-aceptar, .btn-duelo-rechazar {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 11px 14px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.2s;
}
.btn-duelo-aceptar { background: #2ecc71; color: #fff; }
.btn-duelo-rechazar { background: #f1f2f6; color: #555; }
.btn-duelo-aceptar:hover, .btn-duelo-rechazar:hover { opacity: 0.85; }

.duelo-tablero-box {
    background: #fff;
    border-radius: 16px;
    width: 92%;
    max-width: 460px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: fadeInDown 0.3s ease;
}
.duelo-tablero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}
.duelo-tablero-header h4 { margin: 0; font-size: 1.05rem; color: #2c3e50; display:flex; align-items:center; gap:8px; }
.duelo-tablero-estado {
    text-align: center;
    padding: 12px;
    font-weight: 700;
    font-size: 0.92rem;
    color: #3d5af1;
    background: #f4f6ff;
}
.duelo-tablero-contenido { padding: 24px; display: flex; justify-content: center; }
.duelo-sin-motor { color: #999; text-align: center; padding: 30px 10px; }
.duelo-tablero-footer { padding: 12px 20px 20px; display: flex; justify-content: center; }
.btn-duelo-abandonar {
    background: #fff0f1;
    color: #e94560;
    border: 1px solid #f6c9ce;
    border-radius: 10px;
    padding: 9px 20px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background 0.2s;
}
.btn-duelo-abandonar:hover { background: #ffe1e4; }

/* Tres en raya */
.tresenraya-grid {
    display: grid;
    grid-template-columns: repeat(3, 80px);
    grid-template-rows: repeat(3, 80px);
    gap: 8px;
}
.tresenraya-celda {
    background: #f7f8fc;
    border: 2px solid #e4e7f5;
    border-radius: 12px;
    font-size: 2rem;
    font-weight: 800;
    color: #3d5af1;
    cursor: pointer;
    transition: background 0.15s;
}
.tresenraya-celda.ocupada { cursor: default; color: #2c3e50; }
.tresenraya-celda:not(.ocupada):not(:disabled):hover { background: #eef1ff; }
.tresenraya-celda:disabled { cursor: not-allowed; }

@media (max-width: 480px) {
    .tresenraya-grid { grid-template-columns: repeat(3, 68px); grid-template-rows: repeat(3, 68px); }
    .tresenraya-celda { font-size: 1.7rem; }
}

/* Ajedrez */
.ajedrez-grid {
    display: grid;
    grid-template-columns: repeat(8, 42px);
    grid-template-rows: repeat(8, 42px);
    border: 3px solid #2c3e50;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.ajedrez-celda {
    border: none;
    font-size: 1.7rem;
    line-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    padding: 0;
    transition: filter 0.15s;
}
.ajedrez-celda.celda-clara { background: #f0d9b5; }
.ajedrez-celda.celda-oscura { background: #b58863; }
.ajedrez-celda.celda-mi-pieza { cursor: pointer; }
.ajedrez-celda.celda-mi-pieza:hover { filter: brightness(1.08); }
.ajedrez-celda.celda-seleccionada { box-shadow: inset 0 0 0 3px #3d5af1; cursor: pointer; }
.ajedrez-celda.celda-destino { position: relative; cursor: pointer; }
.ajedrez-celda.celda-destino::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(61, 90, 241, 0.55);
}
.ajedrez-celda.celda-destino-captura { cursor: pointer; box-shadow: inset 0 0 0 3px rgba(233, 69, 96, 0.75); }

@media (max-width: 480px) {
    .ajedrez-grid { grid-template-columns: repeat(8, 34px); grid-template-rows: repeat(8, 34px); }
    .ajedrez-celda { font-size: 1.35rem; line-height: 34px; }
    .ajedrez-celda.celda-destino::after { width: 10px; height: 10px; }
}

/* Selector de coronación */
.promocion-ajedrez-box {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    width: 90%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: fadeInDown 0.3s ease;
}
.promocion-ajedrez-box h4 { margin: 0 0 16px; color: #2c3e50; font-size: 1rem; }
.promocion-ajedrez-opciones { display: flex; justify-content: center; gap: 10px; }
.promocion-opcion {
    width: 56px; height: 56px;
    font-size: 2rem;
    background: #f7f8fc;
    border: 2px solid #e4e7f5;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.promocion-opcion:hover { background: #eef1ff; }

/* ========================================================================
   STATS MODAL — Sistema
   Añadido automáticamente. No editar por encima de esta línea.
   ======================================================================== */

/* ── Overlay ─────────────────────────────────────────────────────────────── */
#stats-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 12px;
    backdrop-filter: blur(3px);
    animation: stats-fadeIn .18s ease;
}
#stats-modal-overlay.hidden { display: none; }

@keyframes stats-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Caja del modal ──────────────────────────────────────────────────────── */
.stats-modal {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    width: 100%;
    max-width: 680px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: stats-slideUp .2s ease;
}

@keyframes stats-slideUp {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #e8eaf0;
    flex-shrink: 0;
}
.stats-titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
}
.stats-titulo i { color: #6e8efb; }
#stats-btn-cerrar {
    background: none;
    border: none;
    cursor: pointer;
    color: #8a94a6;
    font-size: 1.1rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s, color .15s;
    line-height: 1;
}
#stats-btn-cerrar:hover { background: #f0f2f8; color: #e74c3c; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.stats-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 16px 0;
    border-bottom: 1px solid #e8eaf0;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.stats-tabs::-webkit-scrollbar { display: none; }
.stats-tab-btn {
    background: none;
    border: none;
    padding: 7px 14px 9px;
    font-size: .82rem;
    font-weight: 600;
    color: #8a94a6;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}
.stats-tab-btn:hover { color: #6e8efb; }
.stats-tab-btn.activo {
    color: #6e8efb;
    border-bottom-color: #6e8efb;
}

/* ── Contenido ───────────────────────────────────────────────────────────── */
.stats-contenido {
    overflow-y: auto;
    padding: 18px 20px;
    flex: 1;
    min-height: 0;
}
.stats-pane.hidden { display: none; }

/* ── Spinner / estados ───────────────────────────────────────────────────── */
.stats-cargando {
    text-align: center;
    color: #8a94a6;
    padding: 32px 0;
    font-size: .9rem;
}
.stats-cargando i { margin-right: 6px; color: #6e8efb; }
.stats-error {
    text-align: center;
    color: #e74c3c;
    padding: 24px 0;
    font-size: .88rem;
}

/* ── Tabla ranking ───────────────────────────────────────────────────────── */
.stats-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}
.stats-tabla thead th {
    text-align: left;
    padding: 6px 10px;
    color: #8a94a6;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid #e8eaf0;
}
.stats-tabla tbody tr {
    border-bottom: 1px solid #f0f2f8;
    transition: background .12s;
}
.stats-tabla tbody tr:hover { background: #f7f8fc; }
.stats-tabla tbody td {
    padding: 8px 10px;
    color: #2c3e50;
    vertical-align: middle;
}
.stats-pos {
    font-weight: 700;
    color: #6e8efb;
    width: 30px;
}
.stats-pos-1 { color: #f39c12; }
.stats-pos-2 { color: #95a5a6; }
.stats-pos-3 { color: #cd6f3a; }
.stats-nick-cell { font-weight: 600; }
.stats-num {
    font-variant-numeric: tabular-nums;
    color: #5a6477;
}

/* ── Cards de récord ─────────────────────────────────────────────────────── */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.stats-card {
    background: #f7f8fc;
    border-radius: 10px;
    padding: 14px 16px;
    border: 1px solid #e8eaf0;
}
.stats-card-label {
    font-size: .75rem;
    color: #8a94a6;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.stats-card-valor {
    font-size: 1.4rem;
    font-weight: 700;
    color: #6e8efb;
    line-height: 1.2;
}
.stats-card-sub {
    font-size: .78rem;
    color: #8a94a6;
    margin-top: 2px;
}

/* ── Barras de actividad ─────────────────────────────────────────────────── */
.stats-barra-wrap {
    margin-bottom: 10px;
}
.stats-barra-label {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: #5a6477;
    margin-bottom: 3px;
}
.stats-barra-track {
    background: #e8eaf0;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}
.stats-barra-fill {
    height: 100%;
    background: linear-gradient(90deg, #6e8efb, #a777e3);
    border-radius: 4px;
    transition: width .5s ease;
}

/* ── Resumen canal ───────────────────────────────────────────────────────── */
.stats-resumen-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.stats-kpi {
    background: #f7f8fc;
    border: 1px solid #e8eaf0;
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
}
.stats-kpi-valor {
    font-size: 1.6rem;
    font-weight: 700;
    color: #6e8efb;
}
.stats-kpi-label {
    font-size: .75rem;
    color: #8a94a6;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .stats-modal { border-radius: 10px; }
    .stats-resumen-grid { grid-template-columns: 1fr 1fr; }
    .stats-cards { grid-template-columns: 1fr; }
}