* {
    box-sizing: border-box;
}

/*
   El atributo `hidden` siempre debe ocultar.
   Varias reglas usan `display: flex`, que de otro modo anula
   el ocultado nativo y deja bloques visibles donde no toca.
*/
[hidden] {
    display: none !important;
}


/* ==============================
   VARIABLES GLOBALES
   Todo el color, la sombra y el radio
   salen de aquí para que el rediseño
   sea coherente y fácil de mantener.
   ============================== */

:root {
    /* Fondos, del más profundo al más elevado */
    --fondo-base: #111;
    --fondo-panel: #181818;
    --fondo-elevado: #1f1f1f;
    --fondo-hover: #242424;
    --fondo-activo: #2b2b2b;
    --fondo-burbuja-propia: #3a3a3a;
    --fondo-burbuja-ajena: #252525;

    /* Bordes */
    --borde-suave: #2b2b2b;
    --borde-medio: #333;
    --borde-fuerte: #3d3d3d;

    /* Texto */
    --texto-principal: #fff;
    --texto-secundario: #b3b3b3;
    --texto-tenue: #929292;
    --texto-apagado: #777;

    --fuente-app: system-ui, -apple-system, "Segoe UI", "Segoe UI Variable", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Segoe UI Symbol", "Noto Sans Symbols2", "Apple Symbols", "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;

    /* Acento: único color de la interfaz */
    --acento: #5865f2;
    --acento-claro: #4752c4;
    --acento-suave: rgba(88, 101, 242, 0.16);
    --acento-texto: #ffffff;

    /* Semánticos */
    --peligro: #e0484c;
    --peligro-suave: rgba(224, 72, 76, 0.16);
    --aviso: #ffcf7a;
    --aviso-fondo: #3d2a0f;
    --exito: #3ba55d;

    /* Acento en navegación */
    --pestana-activa: #ffffff;
    --pestana-linea: var(--acento);

    /* Formas */
    --radio-sm: 6px;
    --radio-md: 10px;
    --radio-lg: 14px;
    --radio-full: 999px;

    /* Sombras */
    --sombra-fab: 0 8px 24px rgba(0, 0, 0, 0.45);
    --sombra-flotante: 0 6px 18px rgba(0, 0, 0, 0.38);
    --sombra-tarjeta: 0 1px 2px rgba(0, 0, 0, 0.3);

    /* Movimiento */
    --transicion-rapida: 0.12s ease-out;
    --transicion-media: 0.2s ease;

    /* Medidas del layout de servidores */
    --ancho-columna-canales: 240px;
    --alto-barra-contexto: 52px;

    /* Alturas del armazón de la aplicación. Se usan para calcular el alto de
       la zona del chat del servidor: el composer queda pegado al borde
       inferior de la pantalla, como en el chat privado. */
    --alto-cabecera-app: 73px;
    --alto-rejilla-app: 50px;

    /* Hueco que deja body en su parte inferior (padding-bottom) para que la
       barra de navegación no tape el composer. */
    --holura-navegacion: 80px;

    /* Reparto de la ventana que ocupa la zona del chat del servidor: lo que
       queda tras descontar cabecera, barra de contexto, márgenes de la
       rejilla y barra de navegación. */
    --alto-zona-chat-servidor: calc(
        100vh - var(--alto-cabecera-app) - var(--alto-barra-contexto)
        - var(--alto-rejilla-app) - var(--holura-navegacion)
    );

    /* dvh ignora la barra de direcciones del móvil, así que el composer no
       queda tapado al abrirla. El navegador que no lo soporta usa el vvh
       de arriba. */
    --alto-zona-chat-servidor: calc(
        100dvh - var(--alto-cabecera-app) - var(--alto-barra-contexto)
        - var(--alto-rejilla-app) - var(--holura-navegacion)
    );
}


html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: var(--fuente-app);
    background: #111;
    color: #fff;
}


body {
    min-height: 100vh;
    padding-bottom: 80px;
}


/* ==============================
   BARRA SUPERIOR
   ============================== */

.barra-superior {
    position: relative;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #2b2b2b;
}

/* La campanita va pegada a la esquina sin mover el titulo: el titulo sigue
   centrado porque el boton se saca del flujo. */
.boton-campana {
    position: absolute;
    top: 50%;
    right: 10px;

    transform: translateY(-50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    color: #d0d0d0;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transicion-rapida), color var(--transicion-rapida);
}

.boton-campana:hover {
    color: #fff;
    background: var(--fondo-hover);
}

.boton-campana .punto-notificaciones {
    position: absolute;
    top: 7px;
    right: 7px;
}

/* El botón del QR va al lado de la campanita, y solo en móvil: en escritorio
   está el atajo de teclado. */
.boton-qr-cuenta {
    right: 62px;
}

@media (min-width: 701px) {
    .boton-qr-cuenta {
        display: none;
    }
}

/* ========================================
   VENTANA DEL CÓDIGO QR
   ======================================== */

/* Por encima del panel del chat (3000) y del resto de ventanas, que se puede
   abrir desde un chat sin cerrarlo antes. */
.modal-codigo {
    z-index: 3600;
}

.dialogo-codigo {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    max-width: min(92vw, 520px);
    max-height: 90vh;

    padding: 14px;

    background: var(--fondo-elevado);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.dialogo-codigo img {
    max-width: 100%;
    max-height: calc(90vh - 28px);

    border-radius: 10px;
}

.cerrar-codigo {
    position: absolute;
    top: -14px;
    right: -14px;

    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    font-size: 16px;
    color: #fff;

    background: #333;
    border: 1px solid var(--borde);
    border-radius: 50%;
    cursor: pointer;
}

.cerrar-codigo:hover {
    background: #444;
}


.barra-superior h1 {
    margin: 0;
    font-size: 28px;
}


/* ==============================
   CONTENIDO
   ============================== */

main {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 25px 20px;
}


h2 {
    margin-top: 0;
    font-size: 22px;
}


/* ==============================
   ENTRAR
   ============================== */

#contenedor-horizontal-entrar {
    width: 100%;
    display: flex;
    transition: transform 0.22s ease;

    /*
       Público existe a la derecha, pero no puede
       aparecer asomándose mientras estamos en
       "Mis amigos".
    */
    overflow: hidden;
}


.pagina-entrar {
    width: 100%;
    min-width: 100%;
    flex: 0 0 100%;
}


/* ==============================
   ESTADOS
   ============================== */

.seccion-estados {
    width: 100%;
    margin-bottom: 30px;
}


.seccion-estados h2 {
    margin-bottom: 18px;
    font-size: 22px;
}


/*
   Fila horizontal de estados.
*/

.lista-estados {
    width: 100%;

    display: flex;
    gap: 12px;

    overflow-x: auto;

    padding: 2px 2px 10px;

    scrollbar-width: none;

    /*
       Permite deslizar las tarjetas cómodamente
       en móvil.
    */
    -webkit-overflow-scrolling: touch;
}

.tarjeta-estado,
.estado-texto-amigo {
    position: relative;
    flex: 0 0 135px;
    width: 135px;
    height: 240px;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border: 1px solid #343434;
    border-radius: 12px;
}

.tarjeta-estado {
    padding: 12px;
    background: #191919;
    color: #fff;
    cursor: pointer;
}

.tarjeta-mi-estado {
    display: grid;
    place-items: center;
}

.tarjeta-mi-estado > img {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 42px;
    height: 42px;
    object-fit: cover;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #181818;
}

.tarjeta-mi-estado > span {
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
}

.tarjeta-mi-estado > img:not([hidden]) ~ #texto-mi-estado {
    align-self: end;
    width: 100%;
    padding: 28px 4px 4px;
    background: linear-gradient(transparent, #000c);
}

.cantidad-estados {
    position: absolute !important;
    top: 9px;
    right: 9px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #101010cc;
}


.lista-estados::-webkit-scrollbar {
    display: none;
}


/*
   TARJETA DEL ESTADO
*/

.estado-amigo {
    position: relative;

    flex: 0 0 145px;

    width: 145px;
    height: 220px;

    border-radius: 14px;

    overflow: hidden;

    background: #242424;

    cursor: pointer;
}


/*
   Imagen principal del estado.
*/

.estado-imagen {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #242424;
}


.estado-imagen > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    background: #242424;
}


/*
   Oscurecemos ligeramente la parte inferior
   para que el nombre se pueda leer encima
   de cualquier imagen.
*/

.estado-imagen::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 65px;

    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, 0.8)
    );

    pointer-events: none;
}


/*
   FOTO DE PERFIL PEQUEÑA
   Arriba a la izquierda.
*/

.estado-avatar {
    position: absolute;

    top: 10px;
    left: 10px;

    z-index: 2;

    width: 34px;
    height: 34px;

    padding: 2px;

    border: 2px solid #fff;
    border-radius: 50%;

    background: #181818;

    overflow: hidden;
}


.estado-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    border-radius: 50%;

    object-fit: cover;

    background: #242424;
}


/*
   NOMBRE DEL USUARIO
   Abajo dentro de la tarjeta.
*/

.estado-amigo span {
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 9px;

    z-index: 2;

    width: auto;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #fff;

    font-size: 13px;
    font-weight: bold;

    text-align: left;

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}


/*
   Efecto visual al pasar el ratón.
*/

.estado-amigo:hover {
    transform: translateY(-2px);
}


.estado-amigo {
    transition: transform 0.15s ease;
}


/* ==============================
   RECUADRO DE CHATS
   ============================== */

.seccion-chats {
    width: 100%;
    margin-bottom: 35px;
}


.contenedor-chats {
    width: 100%;

    padding: 18px;

    border: 1px solid #2b2b2b;
    border-radius: 16px;

    background: #181818;
}


.cabecera-chats {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 10px;
}


.cabecera-chats h2 {
    margin: 0;
    font-size: 20px;
}


/* ==============================
   LISTA DE CHATS
   ============================== */

.lista-chats {
    width: 100%;

    display: flex;
    flex-direction: column;
}


.chat-amigo {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px 4px;

    border-bottom: 1px solid #2b2b2b;

    cursor: pointer;
}


.chat-amigo:last-child {
    border-bottom: none;
}


.chat-amigo:hover {
    background: #202020;
}

.tarjeta-historia {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding: 12px;
    text-align: left;
}

.tarjeta-historia > .contenido-multimedia-social {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
}

.tarjeta-historia::after {
    position: absolute;
    inset: 35% 0 0;
    z-index: 1;
    content: "";
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
    pointer-events: none;
}

.avatar-historia {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #181818;
    object-fit: cover;
}

.avatar-historia-vacio {
    display: block;
}

.nombre-historia,
.tarjeta-historia-texto {
    position: relative;
    z-index: 2;
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

.cantidad-historias {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 11px;
}


.chat-avatar {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: #242424;

    overflow: hidden;
}


.chat-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.chat-informacion {
    min-width: 0;

    flex: 1;
}


.chat-informacion strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 16px;
}

.chat-amigo-datos {
    min-width: 0;
    flex: 1;
}

.chat-amigo-datos strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 16px;
}

#chat-nombre {
    color: #ffffff;
}


.chat-informacion p {
    margin: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #aaa;

    font-size: 14px;
}


/* ==============================
   VER MÁS CHATS
   ============================== */

.boton-ver-mas {
    width: 100%;

    margin-top: 12px;

    padding: 11px 15px;

    border: none;
    border-radius: 10px;

    background: #242424;

    color: white;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;
}


.boton-ver-mas:hover {
    background: #333;
}


/* ==============================
   PUBLICACIONES
   ============================== */

.seccion-publicaciones {
    width: 100%;
    margin-bottom: 35px;
}


.seccion-publicaciones h2 {
    margin-bottom: 18px;
    font-size: 22px;
}


.lista-publicaciones {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* ==============================
   PUBLICACIÓN
   ============================== */

.publicacion {
    width: 100%;

    border: 1px solid #2b2b2b;
    border-radius: 16px;

    background: #181818;

    overflow: hidden;
}


.publicacion-cabecera {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 15px;
}


.publicacion-avatar {
    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: #242424;

    overflow: hidden;
}


.publicacion-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.publicacion-cabecera > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.publicacion-cabecera strong {
    font-size: 16px;
}


.publicacion-cabecera span {
    color: #888;
    font-size: 13px;
}


.publicacion-contenido {
    padding: 0 15px 15px;
}


.publicacion-contenido p {
    margin: 0;

    line-height: 1.5;

    font-size: 15px;
}


/* ==============================
   INTERACCIONES
   ============================== */

.publicacion-interacciones {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px 15px 13px;

    border-top: 1px solid #2b2b2b;
}


.publicacion-interacciones button {
    padding: 7px 10px;

    border: none;
    border-radius: 8px;

    background: transparent;

    color: #aaa;

    cursor: pointer;

    font-size: 14px;
}


.publicacion-interacciones button:hover {
    background: #242424;
    color: #fff;
}


/* ==============================
   PÚBLICO
   ============================== */

/*
   Público está preparado para estar a la derecha
   de Mis amigos.

   No debe aparecer nunca asomándose por el lateral.
*/

.pagina-publico {
    width: 100%;
    min-width: 100%;
    flex: 0 0 100%;
}


.seccion-estados-publicos {
    width: 100%;
    margin-bottom: 30px;
}


.seccion-estados-publicos h2 {
    margin-bottom: 18px;
}


/*
   Los estados públicos utilizan exactamente
   el mismo formato visual que los de amigos.
*/

.estado-publico .estado-avatar {
    border-color: #aaa;
}

/* ==============================
   AGREGAR AMIGOS
   ============================== */

#contenido-amigos {
    width: 100%;
}

/*
   CABECERA
*/

.cabecera-amigos {
    width: 100%;
    margin-bottom: 24px;
}

.cabecera-amigos h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

/*
   PESTAÑAS
*/

.pestanas-amigos {
    width: 100%;
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid #2b2b2b;
}

.pestana-amigos {
    flex: 1;
    min-height: 42px;
    padding: 11px 10px;

    border: 1px solid transparent;
    border-radius: 10px;

    background: #181818;
    color: #888;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.pestana-amigos:hover {
    background: #202020;
    color: #ddd;
}

.pestana-amigos:active {
    transform: scale(0.98);
}

.pestana-amigos.activa {
    background: #242424;
    border-color: #333;
    color: #fff;
}

/*
   SECCIONES
*/

.seccion-amigos {
    width: 100%;
}

.seccion-amigos[hidden] {
    display: none;
}

/*
   BUSCADOR
*/

.buscador-amigos {
    width: 100%;
    margin-bottom: 14px;
}

#buscador-personas {
    box-sizing: border-box;

    width: 100%;
    min-height: 48px;

    padding: 13px 16px;

    border: 1px solid #333;
    border-radius: 12px;

    background: #181818;
    color: #fff;

    font-family: var(--fuente-app);
    font-size: 15px;

    outline: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

#buscador-personas::placeholder {
    color: #707070;
}

#buscador-personas:hover {
    background: #1b1b1b;
    border-color: #3a3a3a;
}

#buscador-personas:focus {
    background: #1c1c1c;
    border-color: #4a4a4a;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

/*
   MENSAJES DE ESTADO
*/

.estado-amigos {
    margin: 18px 0;

    color: #777;

    font-size: 13px;
    line-height: 1.5;

    text-align: center;
}

/*
   LISTAS
*/

.lista-personas,
.lista-solicitudes {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 10px;
}

/*
   RESULTADO DE PERSONA
   Estas son las clases que realmente genera app.js
*/

.persona-resultado {
    box-sizing: border-box;

    width: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px;

    border: 1px solid #2b2b2b;
    border-radius: 14px;

    background: #181818;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.persona-resultado:hover {
    background: #1d1d1d;
    border-color: #383838;
}

.persona-resultado:active {
    transform: scale(0.995);
}

/*
   INFORMACIÓN DEL RESULTADO
*/

.persona-resultado-info {
    min-width: 0;
    flex: 1;

    display: flex;
    align-items: center;

    gap: 12px;
}

/*
   AVATAR
*/

.persona-resultado-avatar {
    flex: 0 0 auto;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: #242424;

    overflow: hidden;

    box-shadow:
        0 0 0 1px #303030;
}

.persona-resultado-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

/*
   DATOS
*/

.persona-resultado-datos {
    min-width: 0;
    flex: 1;
}

.persona-resultado-datos strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 15px;
    font-weight: 700;
}

/*
   BOTÓN AGREGAR
*/

.boton-enviar-solicitud {
    flex: 0 0 auto;

    min-height: 36px;

    padding: 8px 13px;

    border: 1px solid #333;
    border-radius: 9px;

    background: #242424;
    color: #fff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        opacity 0.15s ease,
        transform 0.15s ease;
}

.boton-enviar-solicitud:hover {
    background: #303030;
    border-color: #424242;
}

.boton-enviar-solicitud:active {
    transform: scale(0.97);
}

.boton-enviar-solicitud:disabled {
    opacity: 0.55;
    cursor: default;
}

.boton-enviar-solicitud:disabled:hover {
    background: #242424;
    border-color: #333;
}

/*
   SOLICITUD DE AMISTAD
   Estas son las clases que realmente genera app.js
*/

.solicitud-amistad {
    box-sizing: border-box;

    width: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px;

    border: 1px solid #2b2b2b;
    border-radius: 14px;

    background: #181818;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.solicitud-amistad:hover {
    background: #1d1d1d;
    border-color: #383838;
}

/*
   INFORMACIÓN DE LA SOLICITUD
*/

.solicitud-amistad-info {
    min-width: 0;
    flex: 1;

    display: flex;
    align-items: center;

    gap: 12px;
}

/*
   AVATAR DE LA SOLICITUD
*/

.solicitud-amistad-avatar {
    flex: 0 0 auto;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: #242424;

    overflow: hidden;

    box-shadow:
        0 0 0 1px #303030;
}

.solicitud-amistad-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

/*
   DATOS DE LA SOLICITUD
*/

.solicitud-amistad-datos {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.solicitud-amistad-datos strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 15px;
    font-weight: 700;
}

/*
   BOTONES DE SOLICITUD
*/

.solicitud-amistad-acciones {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 7px;
}

.solicitud-amistad-acciones button {
    min-height: 34px;

    padding: 7px 11px;

    border: 1px solid #333;
    border-radius: 9px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.solicitud-amistad-acciones button:active {
    transform: scale(0.97);
}

/*
   ACEPTAR
*/

.boton-aceptar-solicitud {
    background: #242424;
    border-color: #363636 !important;
    color: #fff;
}

.boton-aceptar-solicitud:hover {
    background: #303030;
    border-color: #454545 !important;
}

/*
   RECHAZAR
*/

.boton-rechazar-solicitud {
    background: #1b1b1b;
    border-color: #2b2b2b !important;
    color: #999 !important;
}

.boton-rechazar-solicitud:hover {
    background: #252525;
    border-color: #383838 !important;
    color: #fff !important;
}

/* ==============================
   AMIGOS — COMPATIBILIDAD
   ============================== */

#lista-amigos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.amigo {
    padding: 15px;

    border: 1px solid #2b2b2b;
    border-radius: 12px;

    background: #1a1a1a;
}


.amigo strong {
    font-size: 18px;
}


.amigo p {
    margin: 6px 0 0;

    color: #aaa;
}


/* ==============================
   NAVEGACIÓN
   ============================== */

.barra-navegacion {
    position: fixed;

    bottom: 0;
    left: 0;

    width: 100%;

    display: flex;
    justify-content: center;

    gap: 8px;

    padding: 12px;

    background: #151515;

    border-top: 1px solid #2b2b2b;
}


/* La barra lleva iconos: cada botón es un cuadrado con el dibujo centrado.
   El texto vive en aria-label y en el title del botón. */
.barra-navegacion button {
    position: relative;

    width: 48px;
    height: 44px;

    display: grid;
    place-items: center;

    border: none;
    border-radius: 12px;

    background: #242424;
    color: #d6d6d6;

    cursor: pointer;

    transition: background 0.15s ease, color 0.15s ease;
}


.barra-navegacion button:hover {
    background: #333;
    color: #fff;
}


/* Sección abierta: con iconos es la única señal de dónde se está. */
.barra-navegacion button.activa {
    background: #333;
    color: #fff;
}


.barra-navegacion button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}


.barra-navegacion svg {
    width: 24px;
    height: 24px;

    display: block;
}


/* El punto de avisos se pega a la esquina del botón de Cuenta. */
#boton-cuenta .punto-notificaciones {
    position: absolute;

    top: 7px;
    right: 9px;
}


#boton-cuenta {
    font-weight: bold;
}

/* ==============================
   PANTALLA DE ACCESO
   ============================== */

#pantalla-acceso {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 30px;
}


#pantalla-acceso[hidden] {
    display: none;
}


/* ==============================
   PANTALLA INICIAL
   ============================== */

#acceso-inicial {
    width: 100%;
    max-width: 360px;

    display: flex;
    flex-direction: column;

    align-items: center;
}


#acceso-inicial[hidden] {
    display: none;
}


#acceso-inicial h1 {
    margin: 0 0 40px;

    font-size: 42px;
}


#acceso-inicial p {
    margin: 25px 0 10px;

    color: #aaa;
}


#acceso-inicial button {
    width: 220px;

    padding: 14px 20px;

    border: none;
    border-radius: 12px;

    background: #242424;

    color: white;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;
}


#acceso-inicial button:hover {
    background: #333;
}


/* ==============================
   LOGIN Y REGISTRO
   ============================== */

#acceso-login,
#acceso-registro {
    width: 100%;
    max-width: 360px;

    display: flex;
    flex-direction: column;

    align-items: center;
}


#acceso-login[hidden],
#acceso-registro[hidden] {
    display: none;
}


#acceso-login h1,
#acceso-registro h1 {
    margin: 0 0 30px;

    font-size: 32px;
}


/* ==============================
   BOTÓN VOLVER
   ============================== */

.boton-volver {
    align-self: flex-start !important;

    width: auto !important;

    margin-bottom: 20px;

    padding: 5px 10px !important;

    border: none !important;

    background: transparent !important;

    color: white !important;

    font-size: 30px !important;
    font-weight: normal !important;

    cursor: pointer;
}


.boton-volver:hover {
    background: #242424 !important;
}


/* ==============================
   FORMULARIOS
   ============================== */

#formulario-login,
#formulario-registro {
    width: 100%;
    max-width: 320px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}


#formulario-login label,
#formulario-registro label {
    margin-top: 5px;

    color: #aaa;

    font-size: 14px;
}


#formulario-login input,
#formulario-registro input {
    width: 100%;

    padding: 13px;

    border: 1px solid #333;
    border-radius: 10px;

    background: #1a1a1a;

    color: white;

    font-size: 16px;

    outline: none;
}


#formulario-login input:focus,
#formulario-registro input:focus {
    border-color: #555;
}


#formulario-login button[type="submit"],
#formulario-registro button[type="submit"] {
    width: 100%;

    margin-top: 10px;

    padding: 14px 20px;

    border: none;
    border-radius: 12px;

    background: #242424;

    color: white;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;
}


#formulario-login button[type="submit"]:hover,
#formulario-registro button[type="submit"]:hover {
    background: #333;
}


/* ==============================
   ERRORES
   ============================== */

#error-login,
#error-registro {
    min-height: 20px;

    margin: 5px 0 0;

    color: #ff6b6b;

    text-align: center;
}


/* ==============================
   CÓDIGO DE VINCULACIÓN
   ============================== */

#codigo-generado {
    width: 100%;
    max-width: 360px;

    display: flex;
    flex-direction: column;

    align-items: center;
}


#codigo-generado[hidden] {
    display: none;
}


#codigo-generado h2 {
    margin: 0 0 25px;

    font-size: 24px;

    text-align: center;
}


.codigo-contenedor {
    width: 100%;

    display: flex;
    align-items: center;

    padding: 14px 16px;

    border: 1px solid #333;
    border-radius: 12px;

    background: #1a1a1a;
}


#codigo-generado-texto {
    flex: 1;

    margin: 0 !important;

    color: white !important;

    font-size: 18px;
    font-weight: bold;

    letter-spacing: 1px;

    text-align: center;
}


#boton-copiar-codigo {
    width: auto !important;

    margin-left: 10px;

    padding: 5px !important;

    border: none !important;
    border-radius: 8px;

    background: transparent !important;

    color: white !important;

    font-size: 20px !important;

    cursor: pointer;
}


#boton-copiar-codigo:hover {
    background: #242424 !important;
}


#codigo-generado > p {
    margin: 20px 0;

    color: #aaa;

    line-height: 1.5;

    text-align: center;
}


#boton-continuar-registro {
    width: 220px;

    padding: 14px 20px;

    border: none;
    border-radius: 12px;

    background: #242424;

    color: white;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;
}


#boton-continuar-registro:hover {
    background: #333;
}


/* ==============================
   CUENTA
   ============================== */

#contenido-cuenta {
    width: 100%;
}


#contenido-cuenta[hidden],
#contenido-amigos[hidden],
#contenido-servidores[hidden],
#panel-inicio-entrar[hidden],
#contenido-entrar[hidden],
#contenido-publico[hidden] {
    display: none;
}

.lista-servidores {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.servidor-item {
    width: 100%;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #303030;
    border-radius: 10px;
    background: #181818;
    color: #fff;
    text-align: left;
}

button.servidor-item {
    cursor: pointer;
}

.servidor-item-datos {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.servidor-item-datos span,
.servidor-item-meta,
.cabecera-servidor p {
    color: #929292;
    font-size: 13px;
}

.servidor-item-datos span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.servidor-item-meta {
    white-space: nowrap;
}

.entrada-servidores,
.formulario-servidor input,
.formulario-servidor textarea,
.formulario-servidor select,
.formulario-mensaje-servidor input,
.formulario-mensaje-servidor textarea {
    width: 100%;
    min-height: 44px;
    margin: 6px 0 14px;
    padding: 11px 13px;
    border: 1px solid #333;
    border-radius: 9px;
    background: #181818;
    color: #fff;
    font: inherit;
}

.formulario-servidor {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 16px 0;
}

.formulario-servidor button,
.servidor-item button,
.cabecera-servidor button,
.formulario-mensaje-servidor button {
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid #383838;
    border-radius: 8px;
    background: #242424;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.panel-servidor {
    width: 100%;
}

.cabecera-servidor {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #2b2b2b;
}

.cabecera-servidor > div {
    min-width: 0;
    flex: 1;
}

.cabecera-servidor h3,
.cabecera-servidor p {
    margin: 0;
}

.cabecera-servidor p {
    margin-top: 5px;
}

/* Los mensajes ocupan todo el espacio sobrante y llevan su propio scroll:
   el composer deja de depender del scroll de la página y se queda abajo. */
.mensajes-servidor {
    flex: 1;

    min-height: 0;

    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
}

.mensaje-servidor {
    max-width: 88%;
    align-self: flex-start;
    padding: 10px 12px;
    border-radius: 9px;
    background: #202020;
}

.mensaje-servidor.propio {
    align-self: flex-end;
    background: #292929;
}

.mensaje-servidor-cabecera {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 12px;
}

.mensaje-servidor time,
.mensaje-servidor small {
    color: #999;
    font-size: 11px;
}

.mensaje-servidor p {
    margin: 7px 0;
    overflow-wrap: anywhere;
}

.boton-responder-servidor {
    padding: 0;
    border: 0;
    background: transparent;
    color: #aaa;
    font-size: 10px;
    cursor: pointer;
}

/* El composer ya no se pega con "sticky" porque la zona del chat tiene alto
   propio: basta con ser el último hijo del flex y no encoger. */
.formulario-mensaje-servidor {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;

    /* Respeta el borde inferior del móvil y deja hueco a la navegación. */
    padding-top: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: #111;
}

.formulario-mensaje-servidor input,
.formulario-mensaje-servidor textarea {
    flex: 1;
    min-width: 0;
    margin: 0;
}

@media (max-width: 480px) {
    .servidor-item {
        flex-wrap: wrap;
    }

    .servidor-item-meta {
        margin-left: auto;
    }

    .cabecera-servidor {
        flex-wrap: wrap;
    }
}

/* ========================================
   SERVIDORES: BARRA DE CONTEXTO, TARJETAS,
   COLUMNA DE CANALES Y BOTÓN FLOTANTE
   ======================================== */

.barra-contexto-servidor {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--alto-barra-contexto);
    padding: 8px 4px;
    background: var(--fondo-base);
    border-bottom: 1px solid var(--borde-suave);
}

/* Sin servidor abierto la barra no hace falta y empujaba las pestañas hacia
   abajo: se esconde para que queden a la misma altura que en Entrar. */
#barra-contexto-servidor[hidden] {
    display: none;
}

/* Las pestañas de Servidores respiran menos que las de Entrar. */
#contenido-servidores > .pestanas-amigos {
    margin-bottom: 12px;
    padding-bottom: 8px;
}

.boton-flecha-contexto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: none;
    border-radius: var(--radio-sm);
    background: transparent;
    color: var(--texto-secundario);
    cursor: pointer;
    transition: background var(--transicion-rapida), color var(--transicion-rapida);
}

.boton-flecha-contexto:hover {
    background: var(--fondo-hover);
    color: var(--texto-principal);
}

.barra-contexto-datos {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* El nombre del grupo abre su propia pantalla de acciones, igual que el
   nombre de una persona abre la suya. */
.boton-datos-contexto-servidor {
    min-width: 0;

    display: flex;
    align-items: center;
    flex: 1;

    padding: 0;

    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;

    cursor: pointer;
}

.boton-datos-contexto-servidor:hover .barra-contexto-textos strong {
    color: var(--texto-principal);
}

/* La foto también es pulsable: quien gestiona el servidor la cambia desde ahí. */
.boton-foto-contexto-servidor {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 0;

    border: none;
    border-radius: 50%;
    background: transparent;

    cursor: pointer;
}

.boton-foto-contexto-servidor:hover .avatar-contexto-servidor {
    filter: brightness(0.8);
}

.boton-foto-contexto-servidor:disabled {
    cursor: default;
}

.barra-contexto-textos {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

/* Foto del servidor en la barra de contexto. Sin foto se ve la inicial.
   El selector es específico para no heredar el estilo de los subtítulos. */

.barra-contexto-datos .avatar-contexto-servidor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    overflow: hidden;
    border-radius: var(--radio-lg);
    background: var(--fondo-activo);
    color: var(--texto-principal);
    font-size: 16px;
    font-weight: 700;
}

.barra-contexto-datos .avatar-contexto-servidor[hidden] {
    display: none;
}

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

.barra-contexto-datos strong {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-contexto-datos span {
    font-size: 12px;
    color: var(--texto-tenue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-contexto-acciones {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Botones de acción de la barra (Miembros, Ajustes, Salir, Eliminar). */
.barra-contexto-acciones button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--borde-medio);
    border-radius: var(--radio-sm);
    background: var(--fondo-panel);
    color: var(--texto-secundario);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition:
        background var(--transicion-rapida),
        color var(--transicion-rapida),
        border-color var(--transicion-rapida);
}

.barra-contexto-acciones button:hover {
    background: var(--fondo-hover);
    color: var(--texto-principal);
    border-color: var(--borde-fuerte);
}

#boton-eliminar-servidor {
    color: var(--peligro);
    border-color: var(--peligro-suave);
}

#boton-eliminar-servidor:hover {
    background: var(--peligro-suave);
    border-color: var(--peligro);
    color: #fff;
}

@media (max-width: 700px) {
    .barra-contexto-servidor {
        gap: 6px;
        padding: 8px 0;
    }

    .barra-contexto-acciones button {
        padding: 0 9px;
        font-size: 11px;
    }
}

/* ---------- Tarjetas ---------- */

.lista-servidores {
    display: grid;
    gap: 10px;
}

.servidor-tarjeta {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-md);
    background: var(--fondo-panel);
    transition: background var(--transicion-media), border-color var(--transicion-media);
}

/* Las tarjetas de "mis servidores" son un botón entero:
   se entra al servidor pulsando cualquier punto de la tarjeta. */
button.servidor-tarjeta {
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

button.servidor-tarjeta:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.servidor-tarjeta:hover {
    background: var(--fondo-elevado);
    border-color: var(--borde-medio);
}

.servidor-tarjeta-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: var(--radio-lg);
    overflow: hidden;
    background: var(--fondo-activo);
}

.servidor-tarjeta-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.servidor-tarjeta-inicial {
    font-size: 19px;
    font-weight: 700;
    color: var(--texto-secundario);
}

.servidor-tarjeta-datos {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.servidor-tarjeta-datos strong {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.servidor-tarjeta-preview {
    font-size: 13px;
    color: var(--texto-tenue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.servidor-tarjeta-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--texto-apagado);
}

.servidor-tarjeta-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radio-full);
    background: var(--acento);
    color: var(--acento-texto);
    font-size: 11px;
    font-weight: 700;
}

.servidor-tarjeta-acciones {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.servidor-tarjeta-acciones button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--borde-medio);
    border-radius: var(--radio-sm);
    background: var(--fondo-hover);
    color: var(--texto-principal);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transicion-rapida), border-color var(--transicion-rapida);
}

.servidor-tarjeta-acciones button:hover {
    background: var(--fondo-activo);
    border-color: var(--acento);
}

/* ---------- Botón flotante ---------- */

.boton-flotante-crear {
    position: fixed;
    right: 22px;
    bottom: 96px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: var(--radio-full);
    background: var(--acento);
    color: var(--acento-texto);
    box-shadow: var(--sombra-fab);
    cursor: pointer;
    transition: transform var(--transicion-media), background var(--transicion-media);
}

.boton-flotante-crear:hover {
    background: var(--acento-claro);
    transform: translateY(-2px);
}

.boton-flotante-crear:active {
    transform: translateY(0);
}

/* ---------- Columna de canales + chat ---------- */

.panel-servidor {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.columna-canales {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding: 10px;
    background: var(--fondo-panel);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-md);
}

.columna-canales[hidden] {
    display: none;
}

.lista-canales {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.canal-item {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radio-sm);
    background: transparent;
    color: var(--texto-tenue);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--transicion-rapida), color var(--transicion-rapida);
}

.canal-item:hover {
    background: var(--fondo-hover);
    color: var(--texto-principal);
}

.canal-item.activo {
    background: var(--fondo-activo);
    color: var(--texto-principal);
}

.canal-item-hash {
    color: var(--texto-apagado);
    font-weight: 700;
}

.canal-item.activo .canal-item-hash {
    color: var(--acento);
}

.canal-item-nombre {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acciones-columna-canales {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.zona-chat-servidor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;

    /* El alto se mide contra la ventana para que la zona del chat use
       justo lo que queda entre la cabecera de la aplicación y la barra de
       navegación. Así el composer puede quedar siempre pegado abajo. */
    height: var(--alto-zona-chat-servidor);
}

.zona-chat-servidor[hidden] {
    display: none;
}

/* ---------- Escritorio: dos columnas ---------- */

@media (min-width: 1000px) {
    .panel-servidor {
        gap: 14px;
    }

    .columna-canales {
        width: var(--ancho-columna-canales);
        flex: 0 0 var(--ancho-columna-canales);
        border-radius: var(--radio-lg);
    }

    .lista-servidores {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    /* La sección de servidores aprovecha el ancho útil de la pantalla:
       la lista se reparte en varias columnas (y una sola tarjeta se
       estira a todo el ancho) en vez de quedarse en la franja de 700px. */
    body.vista-servidores #app,
    body.vista-servidores #contenido-principal {
        max-width: 100%;
    }
}

/* ---------- Composer: micrófono, adjuntos y grabación ----------

   Los dos composers (chat privado y servidor) comparten estas clases.
   El chip del adjunto y la fila de grabación ocupan una línea propia,
   por eso el formulario envuelve con flex-wrap y el botón de acción
   se mantiene en la primera línea. */

.formulario-mensaje,
.formulario-mensaje-servidor {
    flex-wrap: wrap;
}

.composer-adjuntos {
    position: relative;

    display: flex;

    align-items: center;

    flex: 0 0 auto;
}

.boton-mas-composer {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;

    border: none;
    border-radius: var(--radio-full);

    background: transparent;
    color: var(--texto-tenue);

    cursor: pointer;

    transition: background var(--transicion-rapida), color var(--transicion-rapida);
}

.boton-mas-composer:hover,
.boton-mas-composer[aria-expanded="true"] {
    background: var(--fondo-hover);
    color: var(--texto-principal);
}

/* El menú de fotos, vídeos y audios se abre hacia arriba para no salirse
   de la pantalla en el composer de abajo. */

.menu-adjuntar {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 40;

    display: flex;
    flex-direction: column;

    min-width: 148px;

    padding: 6px;

    border: 1px solid var(--borde-medio);
    border-radius: var(--radio-md);

    background: var(--fondo-elevado);

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.menu-adjuntar[hidden] {
    display: none;
}

.menu-adjuntar button {
    min-height: 0;

    padding: 9px 12px;

    border: none;
    border-radius: var(--radio-sm);

    background: transparent;
    color: var(--texto-principal);

    font-size: 11px;
    font-weight: 700;
    text-align: left;

    cursor: pointer;
}

.menu-adjuntar button:hover {
    background: var(--fondo-hover);
}

/* Botón que hace de micrófono, de enviar y de parar la grabación. */

.boton-accion-composer {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    margin-left: auto;
    padding: 0;

    border: none;
    border-radius: var(--radio-full);

    background: var(--fondo-hover);
    color: var(--texto-principal);

    cursor: pointer;

    transition: background var(--transicion-rapida), color var(--transicion-rapida);
}

.boton-accion-composer:hover:not(:disabled) {
    background: var(--fondo-activo);
}

.boton-accion-composer:disabled {
    opacity: 0.55;
    cursor: progress;
}

/* Con texto o adjunto listo el botón ya envía. */

.boton-accion-composer.activo {
    background: var(--acento);
    color: var(--acento-texto);
}

/* Grabando: el botón para la grabación y parpadea en rojo. */

.boton-accion-composer.grabando {
    background: var(--peligro);
    color: #ffffff;
    animation: latido-grabacion 1.1s ease-in-out infinite;
}

@keyframes latido-grabacion {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .boton-accion-composer.grabando {
        animation: none;
    }
}

/* Nombre del archivo adjunto y avisos de error, sobre la caja. */

.chip-adjunto {
    order: 10;

    display: flex;

    align-items: center;

    width: 100%;

    margin: 0;

    padding: 7px 12px;

    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-sm);

    background: var(--fondo-hover);

    color: var(--texto-secundario);

    font-size: 12px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-adjunto[hidden] {
    display: none;
}

.chip-adjunto-error {
    border-color: var(--peligro);
    background: var(--peligro-suave);
    color: var(--peligro);
}

/* Fila de grabación: punto rojo, tiempo y botón de borrar. */

.fila-grabacion {
    order: 20;

    display: flex;

    align-items: center;
    gap: 10px;

    width: 100%;

    padding: 6px 12px;

    border: 1px solid var(--peligro-suave);
    border-radius: var(--radio-full);

    background: var(--fondo-hover);
}

.fila-grabacion[hidden] {
    display: none;
}

.grabacion-punto {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: var(--radio-full);

    background: var(--peligro);

    animation: latido-grabacion 1.1s ease-in-out infinite;
}

.grabacion-tiempo {
    color: var(--texto-principal);

    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.boton-descartar-grabacion {
    min-height: 0;

    margin-left: auto;
    padding: 5px 12px;

    border: 1px solid var(--borde-medio);
    border-radius: var(--radio-full);

    background: transparent;
    color: var(--texto-secundario);

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}

.boton-descartar-grabacion:hover {
    border-color: var(--peligro);
    color: var(--peligro);
}

/* Pestaña de "oculto" junto al botón de enviar, solo en servidores. */

.pastilla-oculto {
    display: inline-flex;

    align-items: center;
    gap: 5px;

    flex: 0 0 auto;

    padding: 0 11px;

    border: 1px solid var(--borde-medio);
    border-radius: var(--radio-full);

    background: transparent;
    color: var(--texto-tenue);

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}

.pastilla-oculto[hidden] {
    display: none;
}

.pastilla-oculto:hover {
    background: var(--fondo-hover);
    color: var(--texto-principal);
}

.pastilla-oculto.activo {
    border-color: var(--acento);
    background: var(--acento-suave);
    color: var(--acento-claro);
}

/* ---------- Burbujas con lenguaje de chat privado ---------- */

.mensajes-servidor {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mensaje-chat.mensaje-chat-recibido,
.mensaje-chat.mensaje-chat-enviado {
    max-width: min(75%, 520px);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--fondo-burbuja-ajena);
    color: var(--texto-principal);
}

.mensaje-chat.mensaje-chat-enviado {
    align-self: flex-end;
    background: var(--fondo-burbuja-propia);
}

.mensaje-chat.es-oculto {
    border: 1px dashed var(--borde-fuerte);
}

.mensaje-servidor-cabecera {
    padding: 0 2px;
    font-size: 13px;
    line-height: 1.2;
}

.mensaje-chat-contenido {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.adjunto-mensaje img,
.adjunto-mensaje video {
    max-width: 100%;
    max-height: 320px;
    border-radius: var(--radio-sm);
    display: block;
}

.adjunto-mensaje audio {
    width: 100%;
    min-width: 220px;
}

.meta-mensaje-servidor {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: flex-end;
    font-size: 10px;
    color: var(--texto-apagado);
}

.acciones-mensaje-servidor {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--borde-suave);
}

.acciones-mensaje-servidor button {
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--borde-medio);
    border-radius: var(--radio-sm);
    background: var(--fondo-hover);
    color: var(--texto-principal);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.acciones-mensaje-servidor button.peligro {
    border-color: var(--peligro);
    color: var(--peligro);
}

.formulario-mensaje-servidor {
    display: flex;
    align-items: center;
    gap: 8px;
}

.formulario-mensaje-servidor input,
.formulario-mensaje-servidor textarea {
    flex: 1;
    min-width: 0;
}

/* ========================================
   ACCIONES DEL SERVIDOR
   El resumen y los botones del modal que se
   abre al pulsar el nombre del grupo.
   ======================================== */

.resumen-servidor {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--borde-medio);
    border-radius: var(--radio-md);
    background: var(--fondo-elevado);
}

.resumen-foto-servidor {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    border-radius: var(--radio-md);
    overflow: hidden;

    background: var(--fondo-hover);
    color: var(--texto-apagado);
    font-size: 22px;
    font-weight: 700;
}

.resumen-foto-servidor img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.resumen-datos {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.resumen-datos strong {
    font-size: 17px;
    overflow-wrap: anywhere;
}

.acciones-servidor-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.acciones-servidor-lista button {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--borde-medio);
    border-radius: var(--radio-sm);
    background: var(--fondo-hover);
    color: var(--texto-principal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-align: left;
    cursor: pointer;
    transition: background var(--transicion-rapida), border-color var(--transicion-rapida);
}

.acciones-servidor-lista button:hover {
    background: var(--fondo-activo);
    border-color: var(--borde-fuerte);
}

.acciones-servidor-lista button.peligro {
    border-color: var(--peligro);
    color: var(--peligro);
}

.acciones-servidor-lista button.peligro:hover {
    background: var(--peligro-suave);
}

#bloque-descripcion-servidor textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--borde-medio);
    border-radius: var(--radio-sm);
    background: var(--fondo-base);
    color: var(--texto-principal);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    resize: vertical;
}

#bloque-descripcion-servidor textarea:focus {
    outline: none;
    border-color: var(--acento);
}

#boton-guardar-descripcion-servidor {
    min-height: 40px;
    margin-top: 8px;
    padding: 9px 14px;
    border: 1px solid var(--borde-medio);
    border-radius: var(--radio-sm);
    background: var(--fondo-hover);
    color: var(--texto-principal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
}

#boton-guardar-descripcion-servidor:hover {
    background: var(--fondo-activo);
}

#boton-guardar-descripcion-servidor:disabled {
    opacity: 0.55;
    cursor: default;
}

#bloque-descripcion-servidor[hidden] {
    display: none;
}

/* ========================================
   SERVIDORES: CANALES, OCULTOS Y PANELES
   ======================================== */

.barra-canales-servidor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #2b2b2b;
}

.lista-canales {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.canal-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid #2f2f2f;
    border-radius: 16px;
    background: #1c1c1c;
    color: #bbb;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.canal-chip.activo {
    background: #2e2e2e;
    border-color: #4e4e4e;
    color: #fff;
}

.canal-chip .editar-canal {
    color: #888;
    font-size: 12px;
    padding: 0 2px;
}

.canal-chip .editar-canal:hover {
    color: #fff;
}

.acciones-barra-canales {
    display: flex;
    gap: 8px;
}

.acciones-barra-canales button {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 11px;
}

.insignia-oculto {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    background: #3d2a0f;
    color: #ffcf7a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.insignia-mini {
    padding: 1px 5px;
    font-size: 9px;
}

.mensaje-servidor.es-oculto {
    border: 1px dashed #6b4d1c;
}

.mensaje-servidor.oculto-ajeno {
    background: #191919;
}

.meta-mensaje-servidor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-align: right;
}

.acciones-mensaje {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 5px;
}

.boton-accion-mensaje {
    padding: 0;
    border: 0;
    background: transparent;
    color: #aaa;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.boton-accion-mensaje:hover {
    color: #fff;
}

.boton-accion-peligro {
    color: #e07a7a;
}

.cita-mensaje-servidor {
    display: block;
    margin: 5px 0 0;
    padding: 4px 8px;
    border-left: 3px solid #464646;
    border-radius: 0 6px 6px 0;
    background: #161616;
    font-size: 11px;
    color: #aaa;
}

.cita-mensaje-servidor strong {
    display: block;
    color: #ddd;
    font-size: 11px;
}

.cita-mensaje-servidor span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boton-oculto-servidor {
    padding: 0 11px;
    font-size: 11px;
}

.boton-oculto-servidor.activo {
    background: #5a3d10;
    border-color: #a97b25;
    color: #ffd78f;
}

.lista-filas-servidor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 52vh;
    overflow-y: auto;
    margin: 10px 0;
}

.fila-servidor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 10px;
    border: 1px solid #2b2b2b;
    border-radius: 8px;
    background: #1b1b1b;
}

.fila-servidor.yo {
    border-color: #3d5a3d;
}

.fila-servidor-datos {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.fila-servidor-datos span,
.fila-servidor-datos small {
    color: #999;
    font-size: 11px;
}

.fila-servidor-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fila-servidor-acciones button {
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid #383838;
    border-radius: 7px;
    background: #242424;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.fila-servidor-acciones button.peligro {
    background: #451d1d;
    border-color: #662929;
}

.etiqueta-rol {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    background: #2a2a2a;
    color: #ccc;
}

.etiqueta-creador {
    background: #4a3a12;
    color: #ffd78f;
}

.etiqueta-moderador {
    background: #1f3a4a;
    color: #9fd0ff;
}

.etiqueta-aviso {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    background: #451d1d;
    color: #ffa9a9;
}

.bloque-ajuste {
    padding: 14px 0;
    border-bottom: 1px solid #2b2b2b;
}

.bloque-ajuste h3 {
    margin: 0 0 8px;
    font-size: 15px;
}

.bloque-ajuste > label {
    display: block;
    margin: 8px 0 4px;
    font-size: 12px;
    color: #bbb;
}

.texto-ajuste {
    margin: 0 0 8px;
    color: #999;
    font-size: 12px;
}

/* Previa de la foto del servidor en los ajustes del servidor. */

.fila-imagen-servidor {
    display: flex;
    align-items: center;
    gap: 12px;
}

.previa-imagen-servidor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    overflow: hidden;
    border-radius: var(--radio-lg);
    background: var(--fondo-activo);
    color: var(--texto-principal);
    font-size: 24px;
    font-weight: 700;
}

.previa-imagen-servidor img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.previa-imagen-servidor.sin-imagen {
    background: var(--fondo-hover);
    color: var(--texto-apagado);
}

.fila-ajuste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.fila-ajuste button,
.bloque-ajuste > button,
.bloque-invitacion button,
.dialogo-ajustes-servidor select {
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid #383838;
    border-radius: 8px;
    background: #242424;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.opcion-ajuste {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    font-size: 13px;
    color: #ccc;
}

.codigo-invitacion {
    margin: 0;
    padding: 9px 11px;
    border: 1px dashed #3a3a3a;
    border-radius: 8px;
    background: #111;
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 13px;
    color: #ffd78f;
    overflow-wrap: anywhere;
}

.bloque-invitacion {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #2b2b2b;
}

.bloque-invitacion h3 {
    font-size: 14px;
}

#vista-invitacion {
    margin-top: 10px;
}

.boton-peligro {
    background: #451d1d;
    border-color: #662929;
}

@media (max-width: 480px) {
    .barra-canales-servidor {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lista-canales {
        flex-wrap: nowrap;
    }

    .canal-chip {
        white-space: nowrap;
    }

    .fila-servidor-acciones {
        width: 100%;
    }
}


/* ==============================
   CABECERA DE CUENTA
   ============================== */

.cabecera-cuenta {
    display: flex;
    flex-direction: column;

    align-items: center;

    margin-bottom: 30px;
}


.cabecera-cuenta h2 {
    margin: 15px 0 0;

    font-size: 24px;

    text-align: center;
}


/* ==============================
   FOTO DE PERFIL
   ============================== */

.boton-foto-perfil {
    width: 120px;
    height: 120px;

    padding: 0;

    border: 2px solid #333;
    border-radius: 50%;

    background: #1a1a1a;

    overflow: hidden;

    cursor: pointer;
}


.boton-foto-perfil:hover {
    border-color: #555;
}


.boton-foto-perfil img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* ==============================
   INFORMACIÓN DE CUENTA
   ============================== */

.informacion-cuenta {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-bottom: 30px;
}


.informacion-cuenta label {
    color: #aaa;

    font-size: 14px;
}


#descripcion-cuenta {
    width: 100%;
    min-height: 120px;

    resize: vertical;

    padding: 13px;

    border: 1px solid #333;
    border-radius: 10px;

    background: #1a1a1a;

    color: white;

    font-family: var(--fuente-app);
    font-size: 16px;

    outline: none;
}


#descripcion-cuenta:focus {
    border-color: #555;
}


/* Selector del color del nombre: un cuadro redondo que hace de botón y, al
   lado, tu nombre de verdad con ese color, para ver cómo queda sin salir. */
.color-nombre-cuenta {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 8px 0 14px;
}


#color-nombre-cuenta {
    width: 52px;
    height: 52px;

    flex: 0 0 auto;

    padding: 0;

    border: 2px solid #333;
    border-radius: 50%;

    background: #1a1a1a;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition: transform 0.15s ease, border-color 0.15s ease;
}


#color-nombre-cuenta:hover {
    border-color: #666;

    transform: scale(1.06);
}


#color-nombre-cuenta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}


/* Chrome pinta el color dentro de un cuadro propio: se redondea también. */
#color-nombre-cuenta::-webkit-color-swatch-wrapper {
    padding: 0;
}


#color-nombre-cuenta::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}


#color-nombre-cuenta::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}


.nombre-color-cuenta {
    min-width: 0;

    font-size: 17px;
    font-weight: 700;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Aviso del guardado automático: aparece un momento y se va solo. */
#guardado-cuenta {
    min-height: 18px;

    margin: 0 0 6px;

    color: #7ddba0;

    font-size: 13px;
}


#guardado-cuenta.error {
    color: #ff8a8a;
}


#estado-cuenta {
    margin: 5px 0 0;

    color: #aaa;

    font-size: 14px;
}


/* ==============================
   CÓDIGO EN CUENTA
   ============================== */

/* ========================================
   UBICACIÓN EN DIRECTO
   La tarjeta del mapa dentro del mensaje y la ventanita para elegir
   cuánto tiempo compartirla.
   ======================================== */

.tarjeta-ubicacion {
    display: flex;
    flex-direction: column;

    margin: 6px 0;

    overflow: hidden;

    background: var(--fondo-panel);
    border: 1px solid var(--borde-suave);
    border-radius: 12px;
}

.tarjeta-ubicacion.en-vivo {
    border-color: #2f7d4f;
}

.ubicacion-mapa {
    position: relative;

    height: 148px;

    background-color: #d9d5cd;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--borde-suave);
}

/* La chincheta va centrada: la tesela de arriba a la izquierda se coloca por
   su desfase, así que el punto exacto cae justo en el medio de la caja. */
.ubicacion-chincheta {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 16px;
    height: 16px;

    margin: -8px 0 0 -8px;

    background: #d92b2b;
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);

    transform: rotate(-45deg);
    pointer-events: none;
}

.ubicacion-acciones {
    display: flex;
    gap: 6px;

    padding: 0 10px 8px;
}

.ubicacion-abrir-mapa,
.ubicacion-parar {
    flex: 1;

    padding: 8px 6px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;

    text-align: center;
    text-decoration: none;

    border-radius: 9px;
    cursor: pointer;
}

.ubicacion-abrir-mapa {
    color: var(--texto);
    background: var(--fondo-hover);
}

.ubicacion-parar {
    color: #fff;
    background: #8a2f2f;
    border: none;
}

.ubicacion-parar:disabled {
    opacity: 0.6;
    cursor: default;
}

.ubicacion-credito {
    display: block;

    padding: 0 10px 7px;

    font-size: 9px;
    color: var(--texto-secundario);
    text-decoration: none;
}

.ubicacion-pie {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px 10px;
}

.ubicacion-estado {
    flex: 0 0 auto;
    padding: 2px 8px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: #8fe0ab;
    background: rgba(47, 125, 79, 0.22);
    border-radius: 999px;
}

.tarjeta-ubicacion.detenida .ubicacion-estado {
    color: var(--texto-secundario);
    background: var(--fondo-hover);
}

.ubicacion-detalle {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--texto-secundario);
}

.dialogo-ubicacion {
    max-width: 420px;
}

.cuerpo-modal-ubicacion {
    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 16px 18px 18px;
}

.texto-modal-ubicacion {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--texto-secundario);
}

.chips-duracion {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chips-duracion button {
    padding: 7px 12px;

    font-size: 12px;

    color: var(--texto-secundario);
    background: var(--fondo-panel);
    border: 1px solid var(--borde-suave);
    border-radius: 999px;
    cursor: pointer;
}

.chips-duracion button.activa {
    color: #fff;
    background: var(--fondo-activo);
    border-color: var(--texto-secundario);
}

.etiqueta-duracion {
    display: flex;
    justify-content: space-between;

    font-size: 13px;
    color: var(--texto-secundario);
}

.etiqueta-duracion strong {
    color: var(--texto);
}

#deslizador-ubicacion {
    width: 100%;
}

.estado-modal-ubicacion {
    min-height: 18px;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--texto-secundario);
}

.acciones-modal-ubicacion {
    display: flex;
    gap: 8px;
}

.acciones-modal-ubicacion button {
    flex: 1;
}

.boton-parar-ubicacion {
    padding: 12px 16px;

    font-size: 13px;
    font-weight: 700;

    color: #fff;
    background: #8a2f2f;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.boton-parar-ubicacion[hidden] {
    display: none;
}

/* ========================================
   SELECTOR DE EMOJIS, GIF Y STICKERS
   Panel flotante que se abre justo encima del campo de escritura.
   ======================================== */

.boton-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--texto-secundario);
    cursor: pointer;
    transition: background var(--transicion-rapida), color var(--transicion-rapida);
}

.boton-emoji:hover {
    background: var(--fondo-hover);
    color: var(--texto);
}

.selector-medio {
    position: fixed;

    /* Por encima del panel del chat (3000) y del editor de foto (3400): el
       botón está en el composer, dentro del chat, y por debajo se quedaba
       escondido detrás. */
    z-index: 3500;

    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 10px;
    overflow: hidden;

    background: var(--fondo-elevado);
    border: 1px solid var(--borde-suave);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}

.selector-medio[hidden] {
    display: none;
}

.selector-medio-pestanas {
    display: flex;
    gap: 6px;
}

.selector-medio-pestanas button {
    flex: 1;

    padding: 7px 6px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;

    color: var(--texto-secundario);
    background: var(--fondo-panel);
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
}

.selector-medio-pestanas button.activa {
    color: #fff;
    background: var(--fondo-activo);
    border-color: var(--borde);
}

#selector-medio-cerrar {
    flex: 0 0 34px;
    color: var(--texto-secundario);
    font-size: 14px;
}

.selector-medio-buscar {
    width: 100%;
    padding: 9px 11px;

    font-size: 14px;

    color: var(--texto);
    background: var(--fondo-base);
    border: 1px solid var(--borde-suave);
    border-radius: 10px;
}

.selector-medio-buscar:focus {
    outline: none;
    border-color: var(--texto-secundario);
}

.selector-medio-categorias {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.selector-medio-categorias::-webkit-scrollbar {
    display: none;
}

.selector-medio-categorias button {
    flex: 0 0 auto;
    padding: 5px 10px;

    font-size: 11px;

    color: var(--texto-secundario);
    background: var(--fondo-panel);
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.selector-medio-rejilla {
    display: flex;
    flex-direction: column;
    gap: 4px;

    overflow-y: auto;
    overscroll-behavior: contain;
}

.selector-medio-titulo {
    position: sticky;
    top: 0;
    z-index: 1;

    margin: 6px 0 2px;
    padding: 3px 4px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--texto-secundario);
    background: var(--fondo-elevado);
}

.selector-medio-fila {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 2px;
}

.selector-medio-rejilla:not(:has(.selector-medio-titulo)) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
}

.selector-emoji {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    font-size: 22px;
    line-height: 1;

    background: transparent;
    border: none;
    border-radius: 9px;
    cursor: pointer;
}

.selector-emoji:hover {
    background: var(--fondo-hover);
}

.selector-medio-medios {
    /* La rejilla pasa a columnas de 38px cuando busca GIF o stickers (no hay
       titulos de grupo): sin abarcar todas las columnas, el contenedor quedaba
       en una sola columna, apilado y diminuto a la izquierda. */
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 4px;
}

.selector-medio-pieza {
    padding: 0;
    overflow: hidden;

    aspect-ratio: 1;

    background: var(--fondo-panel);
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.selector-medio-pieza img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selector-medio-vacio {
    /* La rejilla pasa a grid cuando no hay títulos, así que este texto tenía que
       ocupar todas las columnas: si no, salía partido en una columna estrecha,
       una palabra por línea. */
    grid-column: 1 / -1;

    margin: 10px 4px;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    color: var(--texto-secundario);
}

.codigo-cuenta {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;

    margin-top: 12px;
    margin-bottom: 18px;
}

.codigo-cuenta h3 {
    margin: 0 0 15px;

    font-size: 18px;
}


.codigo-cuenta-contenedor {
    width: 100%;

    display: flex;
    align-items: center;

    padding: 14px 16px;

    border: 1px solid #333;
    border-radius: 12px;

    background: #1a1a1a;
}


#codigo-cuenta-texto {
    flex: 1;

    color: white;

    font-size: 17px;
    font-weight: bold;

    letter-spacing: 1px;

    text-align: center;
}


#boton-copiar-codigo-cuenta {
    width: auto;

    margin-left: 10px;

    padding: 5px;

    border: none;
    border-radius: 8px;

    background: transparent;

    color: white;

    font-size: 20px;

    cursor: pointer;
}


#boton-copiar-codigo-cuenta:hover {
    background: #242424;
}


#boton-regenerar-codigo {
    margin-top: 12px;

    padding: 10px 16px;

    border: none;
    border-radius: 10px;

    background: #242424;

    color: white;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;
}


#boton-regenerar-codigo:hover {
    background: #333;
}


/* ==============================
   CERRAR SESIÓN
   ============================== */

#boton-cerrar-sesion {
    width: 100%;

    padding: 14px 20px;

    border: none;
    border-radius: 12px;

    background: #242424;

    color: white;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;
}


#boton-cerrar-sesion:hover {
    background: #333;
}


/* ==============================
   MODALES
   ============================== */

.modal {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.75);
}


.modal[hidden] {
    display: none;
}


/* ==============================
   MODAL OPCIONES FOTO
   ============================== */

.modal-contenido {
    position: relative;

    width: 100%;
    max-width: 360px;

    padding: 30px 25px 25px;

    border: 1px solid #333;
    border-radius: 16px;

    background: #151515;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}


.modal-contenido h2 {
    margin: 0 0 25px;

    font-size: 22px;

    text-align: center;
}

.modal-contenido-social {
    /* Por encima del visor de reels (1100): si no, los comentarios del reel se
       abren detrás del vídeo y parece que el botón no hace nada. */
    z-index: 1400;
}

.dialogo-social {
    width: min(540px, calc(100vw - 28px));
    max-height: min(84vh, 760px);
    overflow-y: auto;
    padding: 18px;
    border: 1px solid #383838;
    border-radius: 9px;
    background: #171717;
    color: #fff;
}

.cabecera-dialogo-social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.cabecera-dialogo-social h2 {
    margin: 0;
    font-size: 20px;
}

.cabecera-dialogo-social .boton-cerrar-modal {
    position: static;
    flex: 0 0 38px;
}

.formulario-dialogo-social,
.acciones-mi-estado {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.formulario-dialogo-social[hidden],
.acciones-mi-estado[hidden],
.visor-estados[hidden],
.selector-archivo-social[hidden],
.controles-grabar-audio[hidden] {
    display: none;
}

.selector-tipo-contenido {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.selector-tipo-contenido legend,
.selector-audiencia-social {
    width: 100%;
    margin-bottom: 5px;
    color: #aaa;
    font-size: 13px;
}

.selector-tipo-contenido label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid #343434;
    border-radius: 7px;
    background: #202020;
    color: #eee;
    font-size: 12px;
}

.formulario-dialogo-social textarea,
.formulario-dialogo-social select {
    width: 100%;
    min-height: 44px;
    padding: 12px;
    border: 1px solid #363636;
    border-radius: 8px;
    background: #101010;
    color: #fff;
    font: inherit;
}

.formulario-dialogo-social textarea {
    min-height: 150px;
    resize: vertical;
}

.selector-archivo-social {
    min-height: 76px;
    display: grid;
    place-items: center;
    border: 1px dashed #555;
    border-radius: 8px;
    color: #ddd;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}


.selector-archivo-social:hover {
    border-color: #8a8a8a;
    background: #1f1f1f;
    color: #fff;
}

.controles-grabar-audio {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.controles-grabar-audio audio {
    width: 100%;
}

.acciones-mi-estado button,
.controles-grabar-audio button,
.boton-confirmar-social,
.boton-crear-contenido {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #373737;
    border-radius: 8px;
    background: #252525;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.boton-confirmar-social {
    background: #353535;
}

.error-social {
    margin: 0;
    color: #e08d84;
    font-size: 13px;
}

.visor-estados {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.visor-estado-item {
    min-height: 220px;
    display: grid;
    place-items: center;
    padding: 18px;
    border: 1px solid #333;
    border-radius: 9px;
    background: #222;
    text-align: center;
}

/* Vista previa de fotos antes de publicar: miniaturas en vez de solo el
   nombre del archivo. Pulsar una miniatura abre el editor. */
.vista-previa-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vista-previa-social[hidden] {
    display: none;
}

.miniatura-social {
    width: 96px;
    padding: 0;
    border: 1px solid #444;
    border-radius: 8px;
    background: #181818;
    color: #ddd;
    font-size: 10px;
    cursor: pointer;
    overflow: hidden;
}

.miniatura-social img {
    width: 100%;
    height: 72px;
    display: block;
    object-fit: cover;
}

.miniatura-social span {
    display: block;
    padding: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aviso-compresion-social {
    width: 100%;
    margin: 0;
    color: #f0c36d;
    font-size: 12px;
}

/* Editor de foto: recortar, pintar encima y añadir texto. */
.dialogo-editor-foto {
    width: min(560px, 94vw);
}

.lienzo-editor-foto {
    max-height: 60vh;
    display: grid;
    place-items: center;
    overflow: auto;
    border: 1px solid #333;
    border-radius: 8px;
    background: #000;
}

.lienzo-editor-foto canvas {
    max-width: 100%;
    touch-action: none;
    cursor: crosshair;
}

.herramientas-editor-foto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.herramientas-editor-foto button {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #444;
    border-radius: 8px;
    background: #202020;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.herramientas-editor-foto button[aria-pressed="true"] {
    border-color: #888;
    background: #383838;
}

.ayuda-editor-foto {
    margin: 0;
    color: #aaa;
    font-size: 12px;
}

.acciones-editor-foto {
    display: flex;
    gap: 8px;
}

.acciones-editor-foto button {
    flex: 1;
    min-height: 44px;
    border: 1px solid #373737;
    border-radius: 8px;
    background: #252525;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}


.modal-contenido > button:not(.boton-cerrar-modal) {
    width: 100%;

    margin-top: 10px;

    padding: 14px 20px;

    border: none;
    border-radius: 12px;

    background: #242424;

    color: white;

    font-size: 15px;
    font-weight: bold;

    cursor: pointer;
}


.modal-contenido > button:not(.boton-cerrar-modal):hover {
    background: #333;
}


/* ==============================
   BOTÓN CERRAR MODAL
   ============================== */

.boton-cerrar-modal {
    position: absolute;

    top: 8px;
    right: 10px;

    width: 36px;
    height: 36px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: transparent;

    color: #fff;

    font-size: 28px;
    font-weight: normal;

    line-height: 36px;

    cursor: pointer;
}


.boton-cerrar-modal:hover {
    background: #242424;
}


/* ==============================
   MODAL FOTO GRANDE
   ============================== */

.modal-foto-contenido {
    position: relative;

    width: min(90vw, 700px);
    height: min(90vh, 700px);

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;
}


#foto-perfil-grande {
    max-width: 100%;
    max-height: 100%;

    display: block;

    border-radius: 12px;

    object-fit: contain;
}


/* ==============================
   MÓVIL
   ============================== */

@media (max-width: 600px) {

    .barra-navegacion {
        gap: 4px;

        padding: 10px 6px;
    }


    .barra-navegacion button {
        flex: 1;

        width: auto;
        height: 44px;
        padding: 0;
    }


    #contenido-principal {
        padding: 20px 15px;
    }


    .boton-foto-perfil {
        width: 110px;
        height: 110px;
    }


    .modal-contenido {
        max-width: 340px;
    }


    /*
       Estados un poco más estrechos
       para que entren varios en móvil.
    */

    .lista-estados {
        gap: 10px;
    }


    .estado-amigo {
        flex-basis: 125px;

        width: 125px;
        height: 195px;

        border-radius: 13px;
    }


    .estado-avatar {
        top: 9px;
        left: 9px;

        width: 32px;
        height: 32px;
    }


    .estado-amigo span {
        left: 9px;
        right: 9px;
        bottom: 8px;

        font-size: 12px;
    }


    .contenedor-chats {
        padding: 15px;
    }


    .publicacion {
        border-radius: 14px;
    }


    /*
       AGREGAR AMIGOS EN MÓVIL
    */

    .cabecera-amigos h2 {
        font-size: 22px;
    }


    .pestana-amigos {
        padding: 11px 6px;

        font-size: 11px;
    }


    .persona-amigo {
        gap: 10px;

        padding: 10px;
    }


    .persona-avatar {
        width: 48px;
        height: 48px;
    }


    .persona-informacion strong {
        font-size: 15px;
    }


    .persona-informacion p {
        font-size: 12px;
    }


    .boton-agregar-amigo {
        padding: 8px 10px;

        font-size: 11px;
    }


    .solicitud-amigo {
        gap: 10px;

        padding: 10px;
    }


    .solicitud-avatar {
        width: 48px;
        height: 48px;
    }


    .solicitud-informacion strong {
        font-size: 15px;
    }


    .solicitud-informacion p {
        font-size: 12px;
    }


    .solicitud-acciones {
        gap: 5px;
    }


    .solicitud-acciones button {
        padding: 7px 8px;

        font-size: 10px;
    }

}

/* ========================================
   AVATAR DE LOS CHATS
   ======================================== */

.chat-amigo-avatar {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

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

/* ========================================
   PANEL DE CHAT
   ======================================== */

.panel-chat {
    position: fixed;
    inset: 0;
    z-index: 3000;

    display: flex;
    flex-direction: column;

    background: #111111;
}

.panel-chat[hidden] {
    display: none !important;
}

/* Cabecera */

.cabecera-chat {
    width: 100%;
    min-height: 64px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 10px 16px;

    background: #181818;
    border-bottom: 1px solid #2b2b2b;
}

.boton-volver-chat {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: transparent;
    color: #ffffff;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;
}

.boton-volver-chat:hover {
    background: #252525;
}

.boton-ver-perfil-chat {
    min-width: 0;

    flex: 1;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0;

    border: 0;
    background: transparent;

    color: inherit;
    font: inherit;
    text-align: left;

    cursor: pointer;
}

.chat-avatar-panel {
    width: 42px;
    height: 42px;

    display: block;

    flex-shrink: 0;

    border-radius: 50%;
    overflow: hidden;

    background: #242424;
}

.chat-avatar-panel img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.chat-datos-panel {
    min-width: 0;
}

.chat-datos-panel strong {
    display: block;

    font-size: 17px;
}

/* Lista de mensajes */

.lista-mensajes {
    flex: 1;

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 18px;

    overflow-y: auto;
}

/* Mensajes */

.mensaje-chat {
    max-width: min(75%, 520px);

    padding: 10px 14px;

    border-radius: 16px;

    color: #ffffff;

    font-size: 15px;
    line-height: 1.4;

    overflow-wrap: anywhere;

    position: relative;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.12s ease-out;
    will-change: transform;
}

.mensaje-chat-recibido {
    align-self: flex-start;

    background: #252525;

    border-bottom-left-radius: 5px;
}

.mensaje-chat-enviado {
    align-self: flex-end;

    background: #3a3a3a;

    border-bottom-right-radius: 5px;
}

/* Mensaje vacío */

.mensajes-vacios {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #777777;

    text-align: center;
}

/* Formulario */

.formulario-mensaje {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 12px 16px;

    background: #181818;
    border-top: 1px solid #2b2b2b;
}

#entrada-mensaje {
    flex: 1;

    min-width: 0;

    /* Crece con el texto hasta tres lineas; a partir de ahi hace scroll
       vertical dentro del propio campo (nunca hacia los lados). */
    height: auto;
    min-height: 44px;
    max-height: 92px;

    padding: 11px 14px;

    border: 1px solid #333333;
    border-radius: 22px;

    outline: none;
    resize: none;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 20px;

    background: #242424;
    color: #ffffff;

    font-family: inherit;
    font-size: 15px;
}

#entrada-mensaje::placeholder {
    color: #777777;
}

#entrada-mensaje:focus {
    border-color: #555555;
}

/* El campo del servidor crece igual que el del chat privado: hasta tres
   lineas y despues solo scroll hacia abajo dentro del propio cuadro. */
#entrada-mensaje-servidor {
    height: auto;
    min-height: 44px;
    max-height: 92px;

    resize: none;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 20px;
}

.boton-enviar-mensaje {
    flex-shrink: 0;

    height: 44px;

    padding: 0 16px;

    border: none;
    border-radius: 22px;

    background: #ffffff;
    color: #111111;

    font-weight: 700;
    font-size: 13px;

    cursor: pointer;
}

.boton-enviar-mensaje:hover {
    background: #dddddd;
}

.pestanas-entrada {
    margin-bottom: 14px;
}

.formulario-contenido {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: stretch;
    margin: 0 0 12px;
}

.formulario-contenido textarea {
    min-width: 0;
    min-height: 44px;
    max-height: 130px;
    resize: vertical;
    padding: 11px 13px;
    border: 1px solid #333;
    border-radius: 9px;
    background: #181818;
    color: #fff;
    font: inherit;
}

.formulario-contenido select,
.formulario-contenido button {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #333;
    border-radius: 9px;
    background: #202020;
    color: #fff;
    font-size: 12px;
}

.formulario-contenido button {
    font-weight: 700;
    cursor: pointer;
}

.estado-texto-amigo {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    background: #202020;
}

.estado-texto-amigo p {
    max-height: 70%;
    margin: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.estado-texto-amigo time,
.cabecera-publicacion-actual time {
    color: #888;
    font-size: 11px;
}

.estado-texto-amigo button,
.cabecera-publicacion-actual > button {
    align-self: flex-start;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: #aaa;
    font-size: 10px;
    cursor: pointer;
}

.lista-publicaciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.publicacion-actual {
    padding: 14px;
    border: 1px solid #303030;
    border-radius: 8px;
    background: #181818;
}

.cabecera-publicacion-actual {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cabecera-publicacion-actual img,
.avatar-publicacion-vacio {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    object-fit: cover;
    background: #303030;
}

.cabecera-publicacion-actual > div {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.texto-publicacion-actual {
    margin: 14px 0;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.acciones-publicacion-actual {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid #2b2b2b;
    padding-top: 10px;
}

.acciones-publicacion-actual button,
.formulario-comentario-actual button {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #333;
    border-radius: 7px;
    background: #202020;
    color: #ddd;
    font-size: 11px;
    cursor: pointer;
}

.acciones-publicacion-actual .boton-corazon-publicacion {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.acciones-publicacion-actual .icono-corazon-publicacion {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;

    transition: fill 0.18s ease, stroke 0.18s ease, transform 0.18s ease;
}

.acciones-publicacion-actual .boton-corazon-publicacion:hover .icono-corazon-publicacion {
    transform: scale(1.1);
}

.acciones-publicacion-actual .boton-corazon-publicacion-activo {
    color: #ff5b5b;
}

.acciones-publicacion-actual .boton-corazon-publicacion-activo .icono-corazon-publicacion {
    fill: #ff5b5b;
    stroke: #ff5b5b;

    transform: scale(1.1);
}

.lista-comentarios-actuales {
    padding: 8px 0;
}

.lista-comentarios-actuales p {
    margin: 8px 0;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.formulario-comentario-actual {
    display: flex;
    gap: 8px;
}

.formulario-comentario-actual input {
    min-width: 0;
    flex: 1;
    padding: 9px;
    border: 1px solid #333;
    border-radius: 7px;
    background: #111;
    color: #fff;
}

@media (max-width: 520px) {
    .formulario-contenido {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .formulario-contenido textarea {
        grid-column: 1 / -1;
    }

    .formulario-contenido select {
        min-width: 0;
    }
}

#nombre-cuenta-editar {
    width: 100%;
    min-height: 46px;
    padding: 12px;
    border: 1px solid #333;
    border-radius: 10px;
    background: #1a1a1a;
    color: #fff;
    font: inherit;
    outline: none;
}

#nombre-cuenta-editar:focus {
    border-color: #555;
}

.mensaje-chat-cita {
    display: block;
    margin-bottom: 7px;
    padding-left: 8px;
    border-left: 2px solid #777;
    color: #aaa;
    overflow-wrap: anywhere;
}

.acciones-mensaje-chat {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.acciones-mensaje-chat button {
    padding: 4px 6px;
    border: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    color: #bbb;
    font-size: 9px;
    cursor: pointer;
}

.acciones-mensaje-chat button:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.mensaje-chat-deslizable {
    transition: none;
    will-change: auto;
}

.mensaje-chat-contenido {
    pointer-events: none;
}

.mensaje-chat p {
    margin: 0;
}

.mensaje-chat-editado {
    color: #aaa;
    font-size: 11px;
}

.mensaje-chat-modo-editar {
    outline: 2px solid #7aa2ff;
    outline-offset: 2px;
}

.mensaje-chat-seleccionado {
    outline: 2px solid #ff5b5b;
    outline-offset: 2px;
    background: #4a2a2a !important;
}

.barra-seleccion-chat {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #1d1d1d;
    border-top: 1px solid #2b2b2b;
    color: #fff;
    font-size: 13px;
}

.barra-seleccion-chat[hidden] {
    display: none !important;
}

.barra-seleccion-chat button {
    padding: 8px 12px;
    border: 1px solid #3a3a3a;
    border-radius: 18px;
    background: #2a2a2a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* Botones de icono (papelera y reenviar): cuadraditos, con el SVG centrado.
   CANCELAR se empuja a la derecha del contador para que los iconos queden
   pegados a la derecha de la barra. */
.boton-icono-seleccion {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 34px;
    padding: 0 !important;
}

#boton-cancelar-seleccion-chat,
#boton-cancelar-seleccion-servidor {
    margin-left: auto;
}

.boton-icono-seleccion:hover {
    background: #383838;
}

.boton-icono-seleccion[hidden] {
    display: none !important;
}

.boton-cancelar-cita-chat {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    color: #bbb;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.boton-cancelar-cita-chat:hover {
    color: #fff;
}

.cita-chat {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 16px;
    background: #1d1d1d;
    border-top: 1px solid #2b2b2b;
}

.cita-chat[hidden] {
    display: none !important;
}

.cita-chat .estado-amigos {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#estado-respuesta-chat,
#estado-edicion-chat {
    margin: 0;
    padding: 0;
}

.indicador-gesto-chat {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: #202020;
    border-top: 1px solid #2b2b2b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.indicador-gesto-chat[hidden] {
    display: none !important;
}

#icono-gesto-chat {
    font-size: 18px;
}


/* =============================
   NOTIFICACIONES
   La ventanita se abre desde la campanita de la cabecera (ver
   .boton-campana). El botón que había dentro de Cuenta ya no existe.
   ============================== */


/* Punto rojo compartido: avisos sin leer en la campanita y mensajes sin
   leer en la lista de amigos. */
.punto-notificaciones,
.chat-amigo-punto {
    display: inline-block;

    flex: 0 0 auto;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #ff4b4b;
    box-shadow: 0 0 5px rgba(255, 75, 75, 0.75);
}


.punto-notificaciones[hidden],
.chat-amigo-punto[hidden] {
    display: none !important;
}


.chat-amigo-punto {
    width: 12px;
    height: 12px;
}


.dialogo-notificaciones {
    overflow-y: auto;
}


/* Cabecera de los avisos: título a la izquierda, marcar todo a la derecha. */
.cabecera-lista-notificaciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}


.cabecera-lista-notificaciones h3 {
    margin: 0;
    font-size: 17px;
}


.cabecera-lista-notificaciones button {
    padding: 6px 10px;

    border: 1px solid #333;
    border-radius: 8px;

    background: #242424;
    color: #ddd;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


.cabecera-lista-notificaciones button[hidden] {
    display: none !important;
}


#lista-notificaciones-app {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin: 12px 0 4px;
    max-height: 260px;

    overflow-y: auto;
}


.aviso-notificacion {
    display: flex;
    flex-direction: column;
    gap: 4px;

    width: 100%;
    padding: 10px 12px;

    text-align: left;

    border: 1px solid #2b2b2b;
    border-radius: 10px;

    background: #1c1c1c;
    color: #ddd;

    cursor: pointer;
}


.aviso-notificacion:hover {
    background: #242424;
}


.aviso-notificacion.sin-leer {
    border-left: 3px solid #ff4b4b;
}


.aviso-notificacion strong {
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Cuántos avisos lleva juntados la persona: solo aparece si hay más de uno. */
.contador-aviso {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #ff4b4b;
    border-radius: 999px;
    padding: 1px 7px;
}


.aviso-notificacion span {
    color: #bbb;
    font-size: 13px;
}


.aviso-notificacion small {
    color: #888;
    font-size: 11px;
}


.configuracion-notificaciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 24px 0;
    padding-top: 18px;
    border-top: 1px solid #2b2b2b;
}

.configuracion-notificaciones h3 {
    margin: 0 0 4px;
    font-size: 17px;
}

.configuracion-notificaciones label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    color: #ddd;
    font-size: 14px;
}

.configuracion-notificaciones input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #b44a42;
}

.configuracion-notificaciones button {
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid #333;
    border-radius: 8px;
    background: #242424;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

#estado-notificaciones {
    margin: 0;
    color: #999;
    font-size: 12px;
}

.estado-texto-amigo .contenido-multimedia-social {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.estado-texto-amigo .contenido-multimedia-social::after {
    pointer-events: none;
}

.boton-crear-contenido {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}

.boton-crear-contenido span {
    font-size: 18px;
}

.contenido-multimedia-social {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    margin: 8px 0;
    border-radius: 8px;
    background: #101010;
}

.publicacion-actual > .contenido-multimedia-social {
    width: 100%;
    object-fit: contain;
}

/* Las fotos conservan su proporción: ocupan todo el ancho cuando son horizontales
   y, si son verticales, se limitan por la altura máxima y quedan centradas. */
.publicacion-actual > img.contenido-multimedia-social {
    width: auto;
    max-width: 100%;

    margin: 8px auto;
}

/* ========================================
   CARRUSEL DE FOTOS DE LAS PUBLICACIONES
   Solo se usa cuando la publicación lleva más de un medio.
   ======================================== */

.carrusel-publicacion {
    margin: 8px 0;
}

.carrusel-pista {
    display: flex;
    align-items: stretch;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.carrusel-pista::-webkit-scrollbar {
    display: none;
}

.carrusel-pista.carrusel-arrastrando {
    scroll-snap-type: none;

    cursor: grabbing;
}

.carrusel-diapositiva {
    flex: 0 0 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    scroll-snap-align: center;
}

.carrusel-diapositiva .contenido-multimedia-social {
    width: 100%;
    margin: 0;
}

/* Cada foto mantiene su proporción dentro de su diapositiva: las horizontales llenan
   el ancho y las verticales se ajustan a la altura máxima, así la pista toma la altura
   de la más alta y las demás quedan centradas. */
.carrusel-diapositiva img.contenido-multimedia-social {
    width: auto;
    max-width: 100%;
}

.carrusel-diapositiva img {
    pointer-events: none;
    -webkit-user-drag: none;
}

.carrusel-puntos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 10px 0 2px;
}

.carrusel-punto {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #555555;

    cursor: pointer;

    transition: background 0.15s ease, transform 0.15s ease;
}

.carrusel-punto:hover {
    background: #777777;
}

.carrusel-punto-activo {
    background: #ffffff;

    transform: scale(1.2);
}

.visor-estado-item {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px;
    border: 1px solid #333;
    border-radius: 9px;
    background: #222;
    text-align: center;
}

.dialogo-social .boton-confirmar-social,
.dialogo-social .acciones-mi-estado button {
    width: 100%;
}

.visor-historias-pantalla {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #050505;
    color: #fff;
}

.visor-historias-pantalla[hidden] {
    display: none;
}

.progreso-historias {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    z-index: 5;
    display: flex;
    gap: 4px;
}

.progreso-historia {
    height: 3px;
    flex: 1;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.4);
}

.progreso-historia.completado {
    background: #fff;
}

.progreso-historia i {
    width: 100%;
    height: 100%;
    display: block;
    transform: scaleX(0);
    transform-origin: left center;
    background: #fff;
}

.progreso-historia i.avanzar {
    animation: avanzar-historia linear forwards;
}

@keyframes avanzar-historia {
    to { transform: scaleX(1); }
}

.cabecera-historia-pantalla {
    position: absolute;
    top: max(23px, calc(env(safe-area-inset-top) + 13px));
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    /* Hueco para los dos botones de la derecha: comentarios y cerrar. */
    padding-right: 96px;
    text-shadow: 0 1px 5px #000;
}

.cabecera-historia-pantalla img {
    width: 34px;
    height: 34px;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
}

.cabecera-historia-pantalla button {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

/* El boton de comentarios va justo a la izquierda del de cerrar. */
.cabecera-historia-pantalla #boton-comentarios-estado {
    right: 48px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.cantidad-comentarios-estado {
    font-size: 11px;
    font-weight: 700;
}

.cantidad-comentarios-estado[hidden] {
    display: none;
}

.contenido-historia-pantalla {
    width: min(100vw, 56.25vh);
    height: min(100vh, 177.78vw);
    max-width: 100%;
    max-height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #161616;
}

.contenido-historia-pantalla > img,
.contenido-historia-pantalla > video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.contenido-historia-pantalla > audio {
    width: calc(100% - 32px);
}

.texto-historia-pantalla {
    width: 100%;
    max-height: 100%;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 34px;
    overflow: auto;
    overflow-wrap: anywhere;
    background: #222;
    font-size: 24px;
    text-align: center;
    white-space: pre-wrap;
}

.zona-historia {
    position: absolute;
    top: 16%;
    bottom: 0;
    z-index: 4;
    width: 24%;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.zona-historia-anterior {
    left: 0;
}

.zona-historia-siguiente {
    right: 0;
}

/* ==============================
   BARRA DE COMENTARIO DEL VISOR DE ESTADOS
   Corazón y campo para comentar directamente desde el
   estado, sin abrir nada. Está por encima de las zonas
   de toque (z-index 4) para que el campo se pueda usar.
   ============================== */

.barra-comentario-estado {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));

    background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.35) 70%, transparent);
}

.barra-comentario-estado[hidden] {
    display: none;
}

.boton-like-estado,
.boton-ver-comentarios-estado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;

    min-width: 34px;
    height: 34px;
    padding: 0 4px;

    border: 0;
    background: transparent;
    color: #fff;

    cursor: pointer;
}

/* El corazón se rellena en rojo cuando está puesto. */
.boton-like-estado.activo {
    color: #ff4d67;
}

.boton-like-estado.activo svg path {
    fill: currentColor;
}

.contador-acciones-estado {
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0 1px 3px #000;
}

.contador-acciones-estado[hidden] {
    display: none;
}

.barra-comentario-estado input {
    flex: 1;
    min-width: 0;

    padding: 9px 14px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.45);
    color: #fff;

    font-size: 14px;
    outline: none;
}

.barra-comentario-estado input::placeholder {
    color: #9a9a9a;
}

.barra-comentario-estado input:focus {
    border-color: rgba(255, 255, 255, 0.7);
}

.boton-enviar-comentario-estado {
    padding: 8px 4px;

    border: 0;
    background: transparent;
    color: #fff;

    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.boton-enviar-comentario-estado:disabled {
    opacity: 0.45;
    cursor: default;
}



/* ==============================
   BOTÓN DE PERFIL EN PUBLICACIONES
   ============================== */

.cabecera-publicacion-actual > .boton-perfil-publicacion {
    min-width: 0;
    flex: 1;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.boton-perfil-publicacion > img,
.boton-perfil-publicacion > .avatar-publicacion-vacio {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    object-fit: cover;
    background: #303030;
}

.boton-perfil-publicacion > .datos-publicacion-actual {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.boton-perfil-publicacion > .datos-publicacion-actual strong {
    overflow-wrap: anywhere;
}


/* ==============================
   MODAL PERFIL
   ============================== */

#modal-perfil {
    z-index: 3100;
}

#modal-acciones-perfil,
#modal-amigos-perfil {
    z-index: 3200;
}

#modal-foto-grande {
    z-index: 3300;
}

/* Los comentarios del estado se abren desde el visor de estados (2000):
   tienen que ir por encima para que se lean y se pueda escribir. */
#modal-comentarios-estado {
    z-index: 2100;
}

/* Las fotos del chat se abren desde el propio chat y encima de todo lo
   demas, incluido el codigo QR (3600) por si se dejan ambos abiertos. */
#modal-fotos-chat {
    z-index: 3700;
}

/* El reenvio de mensajes sale desde el chat (3000), por encima del codigo
   QR y por debajo del visor de fotos (3700): no pueden estar los dos. */
#modal-reenviar-mensaje {
    z-index: 3650;
}

.dialogo-fotos-chat {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Negro puro de base: al salir deslizando se atenúa a transparente. */
    background: rgba(0, 0, 0, 1);
}

.dialogo-fotos-chat .boton-cerrar-modal {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: auto;
    left: max(12px, env(safe-area-inset-left));
    z-index: 3;
    background: rgba(0, 0, 0, 0.5);
}

/* La X del visor va arriba a la izquierda, como en los estados. */
.boton-cerrar-fotos-chat {
    left: max(12px, env(safe-area-inset-left));
    right: auto;
}

.fotos-chat-pista {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* El dedo mueve la foto (arrastre y pellizco), no hace scroll de pagina. */
    touch-action: none;
    cursor: grab;
}

#foto-chat-grande {
    max-width: 100%;
    max-height: 100%;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    will-change: transform;
}

.flecha-fotos-chat {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;

    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.flecha-fotos-chat-izq {
    left: max(10px, env(safe-area-inset-left));
}

.flecha-fotos-chat-der {
    right: max(10px, env(safe-area-inset-right));
}

.foto-chat-indice {
    position: absolute;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;

    padding: 4px 12px;
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 13px;
}

/* El editor de foto se abre desde el compositor del chat, y el panel del chat
   ocupa toda la pantalla con z-index 3000. Con el peldaño de los modales
   normales (1400) el editor se quedaba detrás del chat: no se veía hasta
   cerrarlo y la foto no llegaba a adjuntarse. Aquí va el peldaño más alto. */
#modal-editor-foto {
    z-index: 3400;
}

/* La ubicación se abre desde el mismo composer, así que le pasa lo mismo que
   al editor: por debajo de 3000 se quedaba escondida detrás del chat y solo
   se veía al cerrarlo. */
#modal-ubicacion {
    z-index: 3400;
}

.dialogo-perfil {
    width: min(560px, calc(100vw - 28px));
}

.dialogo-amigos-perfil {
    width: min(420px, calc(100vw - 28px));
}

.contenido-perfil {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cabecera-perfil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.avatar-perfil {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.avatar-perfil > img,
.avatar-perfil-vacio {
    width: 96px;
    height: 96px;
    display: block;
    border: 2px solid #3a3a3a;
    border-radius: 50%;
    object-fit: cover;
    background: #303030;
}

.nombre-perfil {
    font-size: 20px;
    overflow-wrap: anywhere;
}

.descripcion-perfil {
    margin: 0;
    color: #bbb;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.descripcion-perfil-vacia {
    color: #666;
    font-style: italic;
}

/* -----------------------------
   ETIQUETA DEL PERFIL
   Texto corto que sale entre el
   nombre y la descripción ("Creador"
   y lo que el desarrollador escriba).
   ----------------------------- */

.etiqueta-perfil {
    align-self: flex-start;
    max-width: 100%;
    margin: 0;
    padding: 2px 9px;
    border: 1px solid #4a4a4a;
    border-radius: 999px;
    background: #232323;
    color: #e8d9a0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    overflow-wrap: anywhere;
}

/* Sin etiqueta: solo se ve para quien puede escribirla. */
.etiqueta-perfil.vacia {
    border-style: dashed;
    background: transparent;
    color: #7d7d7d;
}

/* -----------------------------
   EDICIÓN EN EL SITIO
   Solo la cuenta de desarrollador ve
   estos campos pulsables: al tocarlos
   se escribe encima, sin ventanas.
   ----------------------------- */

.campo-perfil.editable {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: text;
    overflow-wrap: anywhere;
}

.campo-perfil.editable:hover {
    text-decoration: underline dotted #6b6b6b;
    text-underline-offset: 3px;
}

/* El texto que hay dentro se conserva tal cual (hereda el estilo). */
.campo-nombre-perfil.editable .nombre-perfil,
.campo-descripcion-perfil.editable .descripcion-perfil {
    display: block;
    margin: 0;
    white-space: pre-wrap;
}

.campo-etiqueta-perfil.editable {
    align-self: flex-start;
    width: auto;
}

.editor-campo-perfil {
    width: 100%;
    margin: 2px 0;
    padding: 5px 8px;
    border: 1px solid #6b6b6b;
    border-radius: 6px;
    background: #1a1a1a;
    color: #fff;
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.editor-campo-perfil:focus {
    outline: 1px solid #8f8f8f;
}

.estado-edicion-perfil {
    margin: 2px 0 0;
    color: #ffb4b4;
    font-size: 12px;
}

/* -----------------------------
   FONDO DEL PERFIL
   La imagen que eligió esa persona
   sale detrás de la cabecera, tanto
   en su perfil como en el de los
   demás.
   ----------------------------- */

/* -----------------------------
   FONDO DEL PERFIL
   La imagen va detras de todo: el
   avatar y el nombre la pisan. Ocupa
   solo la franja de arriba y se
   difumina al llegar al nombre.
   ----------------------------- */

.cabecera-perfil {
    position: relative;
    --alto-portada: 104px;
    --subida-avatar: 44px;
}

/* Todo lo de la cabecera por encima de la portada, sin excepciones. */
.cabecera-perfil > *:not(.portada-perfil) {
    position: relative;
    z-index: 1;
}

.portada-perfil {
    display: none;
}

.cabecera-perfil.con-fondo {
    padding-top: var(--alto-portada);
}

.cabecera-perfil.con-fondo .portada-perfil {
    display: block;
    position: absolute;
    z-index: 0;
    inset: 0 0 auto 0;
    height: var(--alto-portada);
    background-image:
        linear-gradient(
            180deg,
            rgba(17, 17, 17, 0.35) 0%,
            rgba(17, 17, 17, 0.5) 45%,
            rgba(17, 17, 17, 0.88) 76%,
            #111 100%
        ),
        var(--fondo-perfil);
    /* El difuminado final: la imagen se deshace en el fondo de la pagina. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    background-size: cover;
    background-position: center;
    border-radius: 10px 10px 0 0;
}

/* El avatar sube y pisa el borde de abajo de la portada. */
.cabecera-perfil.con-fondo .fila-cabecera {
    margin-top: calc(var(--subida-avatar) * -1);
}

/* -----------------------------
   AVATAR Y NOMBRE JUNTOS
   En tu perfil centrados; en el de
   otra persona a la izquierda.
   ----------------------------- */

.fila-cabecera {
    display: flex;
    width: 100%;
    gap: 12px;
}

.cabecera-perfil.propio .fila-cabecera {
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cabecera-perfil.ajeno {
    align-items: stretch;
    text-align: left;
}

.cabecera-perfil.ajeno .fila-cabecera {
    flex-direction: row;
    align-items: center;
}

.datos-cabecera {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cabecera-perfil.propio .datos-cabecera {
    align-items: center;
}

.cabecera-perfil.ajeno .datos-cabecera {
    align-items: flex-start;
}

.cabecera-perfil.ajeno .campo-perfil.editable {
    width: auto;
    align-self: flex-start;
}

.cabecera-perfil.ajeno .campo-etiqueta-perfil.editable {
    width: auto;
}

/* -----------------------------
   APODOS
   El nombre privado que le pongo a
   cada persona, editable en el
   propio perfil.
   ----------------------------- */

.bloque-apodo-perfil {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid #2b2b2b;
}

.titulo-apodo-perfil {
    color: #9a9a9a;
    font-size: 12px;
}

.campo-apodo-perfil {
    align-self: flex-start;
    max-width: 100%;
    padding: 3px 10px;
    border: 1px dashed #5a5a5a;
    border-radius: 999px;
    background: transparent;
    color: #d8c9ff;
    font-size: 13px;
    font-weight: 600;
    cursor: text;
    overflow-wrap: anywhere;
}

.campo-apodo-perfil:hover {
    border-color: #8f8f8f;
}

.campo-apodo-perfil .apodo-perfil.vacio {
    color: #7d7d7d;
    font-weight: 500;
}

.ayuda-apodo-perfil {
    color: #767676;
    font-size: 11px;
}

.editor-apodo-perfil {
    width: 100%;
    margin: 2px 0;
    padding: 5px 8px;
    border: 1px solid #6b6b6b;
    border-radius: 999px;
    background: #1a1a1a;
    color: #fff;
    font: inherit;
    font-size: 13px;
}

.fila-apodo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #2b2b2b;
}

.avatar-apodo {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #2a2a2a;
    color: #d8c9ff;
    font-weight: 700;
}

.datos-apodo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.datos-apodo strong {
    color: #fff;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.datos-apodo small {
    color: #8a8a8a;
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* -----------------------------
   FONDO EN CUENTA
   Vista previa de la portada.
   ----------------------------- */

.fondo-cuenta {
    margin: 10px 0 0;
}

.fondo-cuenta img {
    width: 100%;
    max-height: 108px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #2b2b2b;
}

.ayuda-fondo-cuenta {
    margin: 6px 0 0;
    color: #8a8a8a;
    font-size: 12px;
    line-height: 1.4;
}

.boton-cambiar-fondo {
    display: block;
    margin: 10px auto 0;
    padding: 10px 20px;
    border: 1px solid #444;
    border-radius: 6px;
    background: #2b2b2b;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
}

.estadisticas-perfil {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.estadistica-perfil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border: 1px solid #333;
    border-radius: 9px;
    background: #202020;
    color: #eee;
    font: inherit;
}

button.estadistica-perfil {
    cursor: pointer;
}

button.estadistica-perfil:hover {
    background: #2b2b2b;
    border-color: #454545;
}

.estadistica-perfil strong {
    font-size: 18px;
}

.estadistica-perfil span {
    color: #999;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
}

.titulo-publicaciones-perfil {
    margin: 0;
    font-size: 16px;
}

.lista-publicaciones-perfil {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lista-amigos-perfil {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.amigo-perfil {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #2b2b2b;
    border-radius: 10px;
    background: #181818;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.amigo-perfil:hover {
    background: #202020;
    border-color: #383838;
}

.amigo-perfil-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #303030;
}

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

.amigo-perfil-nombre {
    min-width: 0;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==============================
   PERFIL DEL AUTOR EN ESTADOS
   ============================== */

.cabecera-historia-pantalla #boton-perfil-historia {
    position: static;
    width: auto;
    height: auto;
    max-width: calc(100% - 48px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#boton-perfil-historia strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   PWA: INSTALAR LA APP Y AVISO DE ACTUALIZACION
   ======================================== */

.boton-instalar-app {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    max-width: 320px;
    min-height: 44px;

    margin-top: 8px;
    padding: 11px 16px;

    border: 1px solid var(--borde-medio);
    border-radius: var(--radio-md);

    background: transparent;
    color: var(--texto-secundario);

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition: background var(--transicion-rapida), color var(--transicion-rapida);
}

.boton-instalar-app:hover:not(:disabled) {
    background: var(--fondo-hover);
    color: var(--texto-principal);
}

.boton-instalar-app:disabled {
    opacity: 0.6;
    cursor: progress;
}

.boton-instalar-app[hidden] {
    display: none;
}

/* Modo manual (Androides viejos sin aviso de instalacion): se explica cómo
   instalar desde el menú del navegador. */

.ayuda-instalar {
    max-width: 320px;
    margin: 12px auto 0;

    color: var(--texto-secundario);

    font-size: 13px;
    line-height: 1.5;

    text-align: center;
}

.ayuda-instalar[hidden] {
    display: none;
}

/* Aviso de version nueva. Flota arriba para no tapar el contenido, y en
   movil ocupa el ancho entero para que se pulse bien. */

.aviso-actualizacion {
    position: fixed;
    top: 12px;
    left: 50%;
    z-index: 200;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 12px 10px 16px;

    border: 1px solid var(--acento);
    border-radius: var(--radio-full);

    background: var(--fondo-elevado);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);

    color: var(--texto-principal);

    font-size: 12px;
    font-weight: 700;

    transform: translateX(-50%);
}

.aviso-actualizacion[hidden] {
    display: none;
}

.aviso-actualizacion button {
    min-height: 0;
    padding: 6px 14px;

    border: none;
    border-radius: var(--radio-full);

    background: var(--acento);
    color: var(--acento-texto);

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.aviso-actualizacion button:disabled {
    opacity: 0.6;
    cursor: progress;
}

@media (max-width: 480px) {
    .aviso-actualizacion {
        top: 8px;
        left: 8px;
        right: 8px;

        justify-content: space-between;

        border-radius: var(--radio-md);

        transform: none;
    }
}


/* ========================================
   ANILLO DEL AVATAR CON EL COLOR DEL NOMBRE
   La variable la pone app.js. Si el color del nombre es muy oscuro, app.js ya
   la cambia por un blanco suave para que el anillo se vea sobre el fondo.
   ======================================== */

.con-anillo-nombre {
    box-shadow: 0 0 0 2px var(--anillo-avatar, transparent);
}



/* ==============================
   REELS, HISTORIAS Y MENU CREAR
   ============================== */

.pista-reels {
    width: 100%;
    display: flex;
    gap: 10px;
    padding-bottom: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.miniatura-reel {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    height: 148px;
    padding: 0;
    border: 1px solid #2b2b2b;
    border-radius: 12px;
    background: #181818;
    overflow: hidden;
    scroll-snap-align: start;
    cursor: pointer;
}

.miniatura-reel img,
.miniatura-reel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.miniatura-reel-titulo {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 14px 6px 6px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
}

.visor-reels {
    /* 100vw/100vh y no inset: asi el visor mide siempre la pantalla aunque un
       ancestro con transform se convierta en su bloque contenedor. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1100;
    background: #000;
}

.visor-reels[hidden] {
    display: none;
}

.pista-reels-visor {
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
}

.pantalla-reel {
    position: relative;
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    display: grid;
    place-items: center;
}

.video-reel {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
}

.titulo-reel {
    position: absolute;
    top: 16px;
    left: 56px;
    right: 16px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.acciones-reel {
    z-index: 2;
    position: absolute;
    right: 10px;
    /* Por encima de la barra de avance, que ocupa la franja de abajo. */
    bottom: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.acciones-reel-contador {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.acciones-reel-contador strong {
    color: #fff;
    font-size: 12px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.boton-like,
.boton-comentarios,
.boton-sonido-reel,
.boton-autor-reel {
    display: grid;
    place-items: center;
    padding: 8px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
}

/* El altavoz se pone blanco cuando el video suena. */
.boton-sonido-reel.activo {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.boton-like.activo {
    color: #ff4b6b;
}

.boton-like.activo .corazon-reel {
    fill: currentColor;
}

.avatar-autor-reel {
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-autor-reel-vacio {
    background: #333;
}

.boton-cerrar-visor {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.dialogo-comentarios {
    width: min(420px, calc(100vw - 28px));
}

.lista-comentarios-reel {
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 8px 0;
}

.comentario-reel {
    margin: 0;
    color: #ddd;
    font-size: 14px;
}

/* -----------------------------
   CAJA DE COMENTAR
   Sencilla: solo una linea y el boton de texto al lado, sin recuadros
   ni colores llamantes.
   ----------------------------- */

.formulario-comentario-reel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 0 2px;
    border-top: 1px solid #262626;
}

.formulario-comentario-reel input {
    flex: 1;
    min-width: 0;
    padding: 8px 2px;
    border: 0;
    border-bottom: 1px solid #2f2f2f;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 14px;
}

.formulario-comentario-reel input::placeholder {
    color: #6f6f6f;
}

.formulario-comentario-reel input:focus {
    outline: none;
    border-bottom-color: #5a5a5a;
}

.formulario-comentario-reel button {
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: #8a8a8a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.formulario-comentario-reel button:hover:not(:disabled) {
    color: #fff;
}

.formulario-comentario-reel button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* -----------------------------
   BARRA DE AVANCE DEL REEL
   Abajo del todo: el tiempo y una
   pista que se puede arrastrar para
   ir adelante o atras en el video.
   ----------------------------- */

.barra-reel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
}

.barra-reel-tiempo {
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

.barra-reel-pista {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    touch-action: none;
}

.barra-reel-pista::after {
    /* Zona de pulsacion grande sin engordar la linea. */
    content: "";
    position: absolute;
    inset: -12px 0;
}

.barra-reel-pista:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.barra-reel-relleno {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #fff;
}

/* Icono grande en el centro mientras el video esta en pausa. */
.aviso-reproduccion {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
}

.aviso-reproduccion[hidden] {
    display: none;
}
.burbujas-historias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
    padding: 8px 0;
}

.burbuja-historia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    color: #ddd;
    cursor: pointer;
}

.burbuja-historia img,
.burbuja-historia-vacia {
    width: 72px;
    height: 72px;
    border: 2px solid #555;
    border-radius: 50%;
    background: #242424;
    object-fit: cover;
}

.nombre-historia-carpeta {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    text-align: center;
}

.boton-crear-nav {
    background: #b44a42 !important;
}

.opciones-crear {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.opcion-crear {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 2px 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid #333;
    border-radius: 12px;
    background: #202020;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.opcion-crear:hover {
    background: #2a2a2a;
}

.opcion-crear svg {
    grid-row: 1 / span 2;
    color: #ddd;
}

.opcion-crear strong {
    font-size: 15px;
}

.opcion-crear span {
    color: #999;
    font-size: 12px;
}

.fila-botones-cuenta {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.fila-botones-cuenta button {
    flex: 1;
    min-height: 44px;
    border: 1px solid #333;
    border-radius: 12px;
    background: #242424;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.fila-botones-cuenta button:hover {
    background: #333;
}

.dialogo-mi-contenido h3 {
    margin: 14px 0 8px;
    font-size: 16px;
}

.dialogo-mi-contenido .lista-publicaciones {
    max-height: 40vh;
    overflow-y: auto;
}

.cuerpo-historia {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.selector-tipo-item {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border: 1px solid #2b2b2b;
    border-radius: 10px;
    padding: 10px;
}

.selector-tipo-item label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.lista-items-historia {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 26vh;
    overflow-y: auto;
}

.item-historia {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid #2b2b2b;
    border-radius: 10px;
}

.item-historia img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
}

.item-historia p {
    margin: 0;
    color: #ddd;
    font-size: 14px;
}

.item-historia button {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: #333;
    color: #fff;
    cursor: pointer;
}

.acciones-historia {
    display: flex;
    gap: 10px;
}
/* El visor y su columna de acciones se fijan a la ventana: asi no dependen
   del ancho del bloque contenedor en el que caen. */
.visor-reels {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.acciones-reel {
    position: fixed;
    right: 12px;
    bottom: 24px;
    z-index: 3;
}