*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* El atributo hidden lo aplica el navegador con "display: none", pero eso lo pisa CUALQUIER
   regla nuestra que fije display (y tenemos varias: .demo-button, .profile-avatar...). El
   resultado era que hidden no escondía nada:
     - el botón de "Administración" se le veía a todo el mundo, admin o no;
     - al quitarse el avatar, el <img> vacío seguía ahí y se veía como una raya encima de la
       inicial.
   Con !important el atributo vuelve a ganar siempre, que es lo que se espera de él. */
[hidden] {
    display: none !important;
}

:root {
    --primary-color: #e67e22;
    --primary-dark: #d35400;
    --bg-color: #f8f9fa;
    --card-bg: #ffffff;
    --text-color: #2c3e50;
    --text-secondary: #7f8c8d;
    --border-color: #e0e0e0;
    --error-color: #e74c3c;
    --success-color: #2ecc71;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --card-bg: #2d2d2d;
        --text-color: #ecf0f1;
        --text-secondary: #bdc3c7;
        --border-color: #3d3d3d;
    }
}

/* Banderas de país (Mejora 1). Windows NO trae los glifos de las banderas en su fuente de
   emojis (decisión de Microsoft, no es un fallo nuestro), así que 🇪🇸 se ve como "ES": una
   bandera son dos "indicadores regionales" y hace falta un glifo para la pareja.

   Esta fuente contiene SOLO esos indicadores regionales, nada más. Por eso va la primera en
   el font-family: se usa para las banderas y todo lo demás cae en la fuente del sistema, así
   que el resto de emojis se siguen viendo con el aspecto nativo de cada dispositivo.

   Al ser una fuente, el texto sigue siendo texto: funciona igual dentro del <textarea>, no
   hay que reprocesar nada al repintar y el emoji se lee con textContent como siempre.

   Arte: Twemoji (Twitter), CC-BY 4.0. Empaquetada como fuente por el proyecto
   country-flag-emoji-polyfill. Autoalojada en /fonts y precacheada por el Service Worker
   (está en PRECACHE_URLS), así que también se ven sin conexión. */
@font-face {
    font-family: 'Twemoji Country Flags';
    src: url('/fonts/TwemojiCountryFlags.woff2') format('woff2');
    /* El texto normal no debe esperar a que baje: hasta entonces las banderas se ven como
       hasta ahora, y al cargar la fuente se repintan solas. */
    font-display: swap;
    unicode-range: U+1F1E6-1F1FF;
}

body {
    font-family: 'Twemoji Country Flags', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.app-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 0.5rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 60px;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-icon {
    font-size: 1.75rem;
    color: white;
}

.app-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: white;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* Login Container */
.login-container {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.login-container h2 {
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
    text-align: center;
}

.login-subtitle {
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1rem;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.visible {
    display: block;
}

/* Form Styles */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.9rem;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon i {
    position: absolute;
    left: 1rem;
    color: var(--text-secondary);
    font-size: 1rem;
}

.input-with-icon input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-with-icon input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
}

.toggle-password {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.remember-me input[type="checkbox"] {
    width: 1.1em;
    height: 1.1em;
    cursor: pointer;
}

/* Explicación de la casilla "Recuérdame". Discreta: informa a quien está decidiendo, sin
   convertirse en un aviso que estorbe a quien entra en su propio móvil todos los días. */
.remember-ayuda {
    margin: -0.5rem 0 1rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.forgot-password {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s;
}

.forgot-password:hover {
    text-decoration: underline;
}

.login-button {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    padding: 0.9rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 0.5rem;
}

.login-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
}

.login-button:active {
    transform: translateY(0);
}

.signup-link {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.signup-link a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: text-decoration 0.2s;
}

.signup-link a:hover {
    text-decoration: underline;
}

/* Install Button */
.install-button {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: none; /* Will be shown via JavaScript */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1000;
}

.install-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Demo User Landing Page Styles */
body.demo-landing .main-content {
    background-image: url('../img/fondo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: calc(100vh - 60px); /* Full height minus header */
    padding: 2rem 0;
}

.demo-container {
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1rem;
    text-align: center;
}

.demo-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.demo-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.3s;
    text-decoration: none;
    min-width: 160px;
}

.demo-button:hover {
    background-color: var(--primary-dark);
    color: white;
    text-decoration: none;
}

.logout-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
}

.logout-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.chat-list {
    margin: 2rem auto;
    width: 95%;
    max-width: 1200px;
    padding: 0 0.5rem;
}

.chat-list h3 {
    text-align: left;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.chats-container {
    max-width: 100%;
}

.chat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.4);
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    margin: 0 auto 0.2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
    width: 100%;
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    min-height: 80px;
    backdrop-filter: blur(5px);
    overflow: hidden;
}

.chat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(230, 126, 34, 0.5);
}

/* Columna izquierda de la tarjeta: nombre del chat y último mensaje (Mejora 14).
   min-width: 0 es imprescindible: por defecto un elemento flex no se encoge por debajo del
   ancho de su contenido (min-width: auto), así que en pantallas estrechas el título empujaba
   a los avatares (flex-shrink: 0) fuera de la tarjeta. Con esto cede y se recorta. */
.chat-info {
    flex-grow: 1;
    min-width: 0;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.chat-item .chat-title {
    color: var(--text-color);
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-preview {
    color: var(--text-secondary, #666);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-preview-sistema {
    font-style: italic;
}

/* Columna derecha: hora encima de los avatares */
.chat-item-derecha {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    flex-shrink: 0;
}

.chat-hora {
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    white-space: nowrap;
}

/* Contador de mensajes sin leer (Mejora 15) */
.chat-unread-badge {
    background-color: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Un chat con mensajes sin leer se distingue de un vistazo */
.chat-item-sin-leer .chat-title {
    font-weight: 800;
}

.chat-item-sin-leer .chat-preview {
    color: var(--text-color);
    font-weight: 600;
}

.aviso-permiso {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Participante sin avatar: se enseña su inicial en vez de un hueco roto. Letra negra sobre
   blanco, igual que el avatar del perfil (antes era blanca sobre naranja). */
.participant-avatar-inicial {
    background: #ffffff;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 1.1rem;
    /* Centrado de verdad: el line-height del body descentraba la letra hacia abajo. */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.chat-participants {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
    padding-left: 1rem;
    align-items: center;
}

.participant-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--bg-color);
    flex-shrink: 0;
    background: var(--bg-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.error-message {
    color: var(--error-color);
    text-align: center;
    padding: 1rem;
    margin: 1rem 0;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 8px;
    border-left: 4px solid var(--error-color);
}

.more-participants {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .demo-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .demo-button {
        width: 100%;
        padding: 0.9rem;
    }
    
    .chat-list {
        width: 100%;
        padding: 0 0.25rem;
    }
    
    .chat-item {
        padding: 0.75rem 1rem;
        margin-bottom: 0.8rem;
        min-height: 70px;
    }

    .chat-item .chat-title {
        font-size: 1.4rem;
        margin-right: 0.75rem;
        padding-right: 0;
    }

    .participant-avatar, .more-participants {
        width: 44px;
        height: 44px;
    }

    .chat-participants {
        gap: 0.35rem;
        padding-left: 0;
    }
}

.install-button:active {
    transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 480px) {
    .login-container {
        padding: 1.75rem 1.25rem;
        margin: 0 1rem;
    }
    
    .app-header {
        padding: 0.75rem 1.25rem;
    }
    
    .app-title {
        font-size: 1.3rem;
    }
    
    .logo-icon {
        font-size: 1.5rem;
    }
    
    .install-button {
        bottom: 1rem;
        right: 1rem;
        font-size: 0.85rem;
        padding: 0.6rem 1.2rem;
    }

    .chat-item {
        padding: 0.6rem 0.75rem;
    }

    .chat-item .chat-title {
        font-size: 1.15rem;
        margin-right: 0.5rem;
    }

    .participant-avatar, .more-participants {
        width: 36px;
        height: 36px;
        border-width: 2px;
    }

    .chat-participants {
        gap: 0.25rem;
    }
}

/* ---------------------------------------------------------------------------
   Modales. Están aquí y no en chat.css porque los usan las dos pantallas
   (personalizar el fondo en chat.html, nuevo chat en chats.html) y chats.html no
   carga chat.css — tenerlos duplicados en ambos ficheros sería pedir problemas.
   --------------------------------------------------------------------------- */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    overflow-y: auto;
}

.modal.show {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

/* El fondo era "white" fijo mientras los textos de dentro usan var(--text-color), que en
   modo oscuro es casi blanco: media configuración del chat se veía blanco sobre blanco.
   El modal es una superficie más, así que usa las mismas variables que el resto y se adapta
   al tema. El "color" explícito hace que todo lo de dentro herede el correcto. */
.modal-content {
    background-color: var(--card-bg);
    color: var(--text-color);
    width: 90%;
    max-width: 600px;
    margin: 40px auto;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-color);
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 5px 10px;
    line-height: 1;
}

.modal-body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Botón de acción principal de un modal. No se reutiliza .apply-button a propósito: esa ya
   existe en chat.css con otro color, y tener el mismo selector con valores distintos en dos
   ficheros es justo el lío que se limpió en la Mejora 1 de _plans/plan-revision-codigo.md. */
.primary-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.primary-button:hover:not(:disabled) {
    background-color: var(--primary-dark);
}

.primary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Configuración del chat --- */
.config-section h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--text-color);
}

.config-explicacion {
    color: var(--text-secondary, #666);
    font-size: 0.9rem;
    margin: 0 0 1rem;
    line-height: 1.4;
}

.danger-button {
    background-color: #c0392b;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.danger-button:hover:not(:disabled) {
    background-color: #a93226;
}

.danger-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.secondary-button {
    background: none;
    color: var(--text-color);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.confirm-box {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(192, 57, 43, 0.08);
    border-radius: 8px;
}

.confirm-box p {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
}

.confirm-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.checkbox-linea {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.config-separador {
    border: none;
    border-top: 1px solid var(--border-color, #eee);
    margin: 1.5rem 0;
}

/* --- Nuevo chat: buscador de usuarios con autocompletado --- */
.new-chat-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.new-chat-label-espaciado {
    margin-top: 1.25rem;
}

.new-chat-opcional {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

/* Los campos e inputs también seguían el tema del sistema por su cuenta: en modo oscuro el
   navegador les pone fondo claro y texto oscuro, o al revés, sin coordinarse con el modal.
   Se fijan a las mismas variables para que siempre se lea lo que se escribe. */
.new-chat-search {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 1rem;
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.new-chat-search::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

.new-chat-search:focus {
    border-color: var(--primary-color);
}

.user-suggestions {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: 8px;
    display: none;
    /* Sin fondo propio, la lista se veía transparente sobre el modal y los nombres se
       mezclaban con lo que hubiera debajo. */
    background-color: var(--card-bg);
    color: var(--text-color);
}

.user-suggestions.show {
    display: block;
}

.user-suggestions li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
}

.user-suggestions li:hover,
.user-suggestions li.active {
    background-color: rgba(230, 126, 34, 0.12);
}

.user-suggestions img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.user-suggestions .sin-resultados {
    color: var(--text-secondary, #666);
    cursor: default;
}

.selected-users {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.selected-user {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: rgba(230, 126, 34, 0.15);
    border-radius: 999px;
    padding: 0.3rem 0.5rem 0.3rem 0.8rem;
    font-size: 0.9rem;
}

.selected-user button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--text-secondary, #666);
    padding: 0 0.2rem;
}

.new-chat-error {
    color: #c0392b;
    font-size: 0.9rem;
    min-height: 1.2em;
    margin: 0 0 0.5rem;
}

/* --- Mi perfil: avatar arriba a la derecha y su menú (Mejora 17) --- */
.profile-menu-container {
    position: relative;
    display: inline-block;
}

/* Sin avatar se enseña la inicial: letra negra sobre blanco, no naranja. Con avatar, la
   imagen tapa el círculo entero y este fondo no se llega a ver. */
.profile-button {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: #ffffff;
    color: #1a1a1a;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* line-height 1 en el botón además de en la inicial: si no, la caja de línea heredada
       del body (1.6) descentra la letra hacia abajo dentro del círculo. */
    line-height: 1;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-initial {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    color: #1a1a1a;
    /* La letra se centra sola con el flex del botón; esto evita que un descuelgue de la
       fuente (la "y", la "g") la desplace respecto al círculo. */
    display: block;
}

/* El menú del perfil cuelga del avatar. .dropdown-menu vive en chat.css, que esta página no
   carga, así que aquí va lo necesario para que funcione por su cuenta. */
.profile-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    background-color: white;
    min-width: 230px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    overflow: hidden;
    z-index: 1002;
    text-align: left;
}

.profile-dropdown.show {
    display: block;
}

.profile-dropdown-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color, #eee);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.profile-dropdown-header strong {
    color: var(--text-color);
}

.profile-dropdown-header span {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    word-break: break-all;
}

/* Aviso de sesión temporal dentro del menú del perfil (solo si se entró sin "Recuérdame") */
.profile-sesion-corta {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0;
    padding: 0.6rem 1rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary);
    background: rgba(230, 126, 34, 0.10);
    border-bottom: 1px solid var(--border-color);
}

.profile-sesion-corta i {
    margin-top: 0.15rem;
    color: var(--primary-color);
}

.profile-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
}

.profile-dropdown .dropdown-item:hover {
    background-color: rgba(230, 126, 34, 0.1);
}

/* Editor de avatar dentro del modal de perfil */
.avatar-editor {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.avatar-preview-vacio {
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 600;
}

.avatar-editor-acciones {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.profile-ok {
    color: #27ae60;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
}

/* --- Pantalla de administración --- */
.admin-container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

.admin-section {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.admin-section h2 {
    margin: 0 0 0.75rem;
    font-size: 1.3rem;
    color: var(--text-color);
}

.admin-nota {
    color: var(--text-secondary, #666);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.invite-row,
.invite-link-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.invite-row .new-chat-search,
.invite-link-row .new-chat-search {
    flex: 1;
    min-width: 220px;
}

.invite-link-box {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(46, 204, 113, 0.12);
    border-radius: 8px;
}

.invite-link-box p {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

.invite-link-titulo {
    font-weight: 600;
}

/* Invitar como administrador: la casilla y sus avisos. Se pintan en rojo a propósito — no es
   una opción más, el enlace pasa a conceder permisos de administración a quien lo use. */
.invite-admin {
    margin: 0.75rem 0 0.25rem;
}

.invite-admin-aviso {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-color);
    background: rgba(192, 57, 43, 0.12);
    border-left: 3px solid #c0392b;
    border-radius: 4px;
}

.invite-admin-aviso i {
    margin-top: 0.15rem;
    color: #c0392b;
}

.invite-admin-aviso-fuerte {
    margin-bottom: 0.75rem;
}

/* Marca de "invitación de administrador" en la lista de invitaciones */
.etiqueta-admin {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #c0392b;
    background: rgba(192, 57, 43, 0.12);
    white-space: nowrap;
}

/* Código QR del enlace de invitación */
.invite-qr {
    margin-top: 0.75rem;
}

.invite-qr-caja {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Fondo blanco y margen alrededor: un QR necesita "zona de silencio" para que la cámara lo
   encuentre, y sobre el fondo oscuro del tema no se leería. */
.invite-qr-caja > div {
    background: #ffffff;
    padding: 12px;
    border-radius: 8px;
    line-height: 0;
}

.invite-qr-nota {
    margin: 0 !important;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    max-width: 320px;
}

.invite-link-ok {
    color: #27ae60;
}

.invite-link-fallo {
    color: #c0392b;
}

.admin-table {
    overflow-x: auto;
}

.admin-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--border-color, #e9ecef);
    white-space: nowrap;
}

.admin-table th {
    color: var(--text-secondary, #666);
    font-weight: 600;
}

.admin-vacio {
    color: var(--text-secondary, #666);
    margin: 0;
}

.link-button {
    background: none;
    border: none;
    color: #c0392b;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    text-decoration: underline;
}

/* Icono de estado de conexión con el servidor (verde = conectado, blanco tachado = sin
   conexión, mostrando lo último guardado en local — Mejoras 6/7/18 en plan-mejoras*.md).
   Compartido por chat.html y chats.html. SVG propio (no depende de la fuente de Font
   Awesome, que en algún navegador no llegaba a cargar el icono). El aspa de "sin conexión"
   se dibuja dentro del propio SVG (una línea que se muestra/oculta), no como capa aparte
   encima — así escala junto con el icono en vez de quedar desproporcionada si cambia el
   tamaño. flex-shrink: 0 para que nunca se encoja si el header anda justo de espacio.
   Blanco y no rojo al desconectar: el header es naranja y el rojo se pierde encima. */
.connection-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    color: #2ecc71;
    margin: 0 0.25rem;
    transition: color 0.2s;
}

.connection-indicator svg {
    width: 100%;
    height: 100%;
    display: block;
}

.connection-indicator .conn-slash {
    display: none;
}

.connection-indicator.disconnected {
    color: #fff;
}

.connection-indicator.disconnected .conn-slash {
    display: inline;
}