/* ==========================================
   MENSAJERÍA FSA
   DISEÑO BLANCO / NEGRO
========================================== */

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

:root {
    --negro: #111111;
    --negro-suave: #202020;
    --blanco: #ffffff;
    --fondo: #f5f5f5;
    --gris: #737373;
    --gris-claro: #e5e5e5;
    --gris-muy-claro: #f8f8f8;

    --sombra:
        0 20px 50px rgba(0, 0, 0, 0.10);
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    min-height: 100vh;
    background: var(--fondo);
    color: var(--negro);
}


/* ==========================================
   APP
========================================== */

.chat-app {
    position: relative;

    width: min(1000px, calc(100% - 40px));
    height: min(720px, calc(100vh - 40px));

    margin: 20px auto;

    background: var(--blanco);

    border: 1px solid #eaeaea;
    border-radius: 26px;

    overflow: hidden;

    box-shadow: var(--sombra);

    display: flex;
    flex-direction: column;
}


/* ==========================================
   ENCABEZADO
========================================== */

.chat-header {
    height: 92px;

    padding: 0 28px;

    border-bottom: 1px solid var(--gris-claro);

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

    background: var(--blanco);
}

.encabezado-info {
    display: flex;
    align-items: center;
    gap: 14px;
}


/* ==========================================
   LOGO
========================================== */

.logo-chat {
    width: 48px;
    height: 48px;

    border-radius: 15px;

    background: var(--negro);
    color: var(--blanco);

    font-size: 23px;

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

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.14);
}


/* ==========================================
   TÍTULO
========================================== */

.chat-header h1 {
    font-size: 21px;
    font-weight: 700;

    letter-spacing: -0.4px;

    margin-bottom: 3px;
}

.chat-header p {
    color: var(--gris);
    font-size: 13px;
}


/* ==========================================
   PERFIL
========================================== */

.boton-perfil {
    width: 44px;
    height: 44px;

    border: 1px solid var(--gris-claro);
    border-radius: 50%;

    background: var(--gris-muy-claro);
    color: var(--negro);

    font-size: 18px;

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

    cursor: pointer;

    transition: 0.2s ease;
}

.boton-perfil:hover {
    background: var(--negro);
    color: var(--blanco);
    border-color: var(--negro);

    transform: translateY(-1px);
}


/* ==========================================
   CONTENEDOR DE CONVERSACIONES
========================================== */

.conversaciones {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;

    background: var(--blanco);
}


/* ==========================================
   TÍTULO MENSAJES
========================================== */

.titulo-conversaciones {
    padding: 27px 30px 18px;
}

.titulo-conversaciones h2 {
    font-size: 24px;
    font-weight: 700;

    letter-spacing: -0.5px;

    margin-bottom: 5px;
}

.titulo-conversaciones p {
    color: var(--gris);
    font-size: 13px;
}


/* ==========================================
   BUSCADOR
========================================== */

.buscador {
    position: relative;

    margin: 0 30px 18px;
}

.buscador input {
    width: 100%;
    height: 52px;

    padding: 0 18px 0 48px;

    border: 1px solid var(--gris-claro);
    border-radius: 15px;

    outline: none;

    background: var(--gris-muy-claro);
    color: var(--negro);

    font-family: inherit;
    font-size: 14px;

    transition: 0.2s ease;
}

.buscador input::placeholder {
    color: #999999;
}

.buscador input:focus {
    background: var(--blanco);

    border-color: var(--negro);

    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.05);
}


/* ==========================================
   ICONO DE BÚSQUEDA
========================================== */

.icono-busqueda {
    position: absolute;

    left: 18px;
    top: 50%;

    transform: translateY(-52%);

    color: #777777;

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

    pointer-events: none;
}


/* ==========================================
   LISTA
========================================== */

.lista-conversaciones {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 0 30px 100px;
}

.lista-conversaciones::-webkit-scrollbar {
    width: 6px;
}

.lista-conversaciones::-webkit-scrollbar-thumb {
    background: #d5d5d5;
    border-radius: 10px;
}


/* ==========================================
   ESTADO VACÍO
========================================== */

.estado-vacio {
    width: min(400px, 100%);

    margin: 55px auto 0;

    padding: 20px;

    text-align: center;
}

.icono-estado {
    width: 76px;
    height: 76px;

    margin: 0 auto 20px;

    border-radius: 23px;

    background: var(--gris-muy-claro);

    border: 1px solid var(--gris-claro);

    font-size: 32px;

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

.estado-vacio h3 {
    font-size: 17px;
    font-weight: 700;

    margin-bottom: 7px;
}

.estado-vacio p {
    color: var(--gris);

    font-size: 13px;

    line-height: 1.6;
}


/* ==========================================
   RESULTADO DE USUARIO
========================================== */

.resultado-usuario {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    width: 100%;

    padding: 15px 17px;

    margin-bottom: 10px;

    border: 1px solid #eeeeee;
    border-radius: 15px;

    background: var(--blanco);

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.04);
}

.resultado-usuario strong {
    display: block;

    color: var(--negro);

    font-size: 15px;

    margin-bottom: 4px;
}

.resultado-usuario p {
    color: var(--gris);

    font-size: 13px;
}

.resultado-usuario button {
    flex-shrink: 0;

    width: auto;
    height: 40px;

    padding: 0 17px;

    border: none;
    border-radius: 10px;

    background: var(--negro);
    color: var(--blanco);

    font-family: inherit;

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

    cursor: pointer;

    transition: 0.2s ease;
}

.resultado-usuario button:hover {
    background: var(--negro-suave);

    transform: translateY(-1px);
}


/* ==========================================
   MENSAJE DE ESTADO ANTIGUO
========================================== */

.sin-conversaciones {
    padding: 30px;

    text-align: center;

    color: var(--gris);

    font-size: 14px;
}


/* ==========================================
   BOTÓN NUEVA CONVERSACIÓN
========================================== */

.boton-nueva-conversacion {
    position: absolute;

    right: 28px;
    bottom: 28px;

    width: 60px;
    height: 60px;

    border: none;
    border-radius: 19px;

    background: var(--negro);
    color: var(--blanco);

    font-family: inherit;

    font-size: 31px;
    font-weight: 300;

    line-height: 1;

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

    cursor: pointer;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.boton-nueva-conversacion:hover {
    transform: translateY(-3px);

    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.26);
}

.boton-nueva-conversacion:active {
    transform: translateY(0);
}


/* ==========================================
   TABLETS
========================================== */

@media (max-width: 750px) {

    .chat-app {
        width: calc(100% - 24px);
        height: calc(100vh - 24px);

        margin: 12px auto;

        border-radius: 21px;
    }

    .chat-header {
        padding: 0 20px;
    }

    .titulo-conversaciones {
        padding: 23px 20px 16px;
    }

    .buscador {
        margin: 0 20px 16px;
    }

    .lista-conversaciones {
        padding: 0 20px 95px;
    }

    .boton-nueva-conversacion {
        right: 20px;
        bottom: 20px;
    }
}


/* ==========================================
   TELÉFONOS
========================================== */

@media (max-width: 480px) {

    .chat-app {
        width: 100%;
        height: 100vh;

        margin: 0;

        border-radius: 0;
        border: none;
    }

    .chat-header {
        height: 82px;

        padding: 0 17px;
    }

    .logo-chat {
        width: 43px;
        height: 43px;

        border-radius: 13px;

        font-size: 20px;
    }

    .chat-header h1 {
        font-size: 18px;
    }

    .chat-header p {
        font-size: 12px;
    }

    .boton-perfil {
        width: 41px;
        height: 41px;

        font-size: 17px;
    }

    .titulo-conversaciones {
        padding: 22px 17px 15px;
    }

    .titulo-conversaciones h2 {
        font-size: 21px;
    }

    .titulo-conversaciones p {
        font-size: 12px;
    }

    .buscador {
        margin: 0 17px 15px;
    }

    .buscador input {
        height: 49px;
    }

    .lista-conversaciones {
        padding: 0 17px 90px;
    }

    .estado-vacio {
        margin-top: 40px;

        padding: 15px;
    }

    .icono-estado {
        width: 68px;
        height: 68px;

        font-size: 28px;
    }

    .boton-nueva-conversacion {
        right: 17px;
        bottom: 17px;

        width: 56px;
        height: 56px;

        border-radius: 17px;
    }
}


/* ==========================================
   MI PERFIL
========================================== */

.pagina-mi-perfil {
    min-height: 100vh;

    background: var(--fondo);

    display: flex;

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

    padding: 20px;
}

.mi-perfil-app {
    width: min(680px, 100%);

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    background: var(--blanco);

    border: 1px solid #eaeaea;
    border-radius: 26px;

    box-shadow: var(--sombra);
}

.mi-perfil-app::-webkit-scrollbar {
    width: 6px;
}

.mi-perfil-app::-webkit-scrollbar-thumb {
    background: #d5d5d5;
    border-radius: 10px;
}


/* ==========================================
   ENCABEZADO DEL PERFIL
========================================== */

.mi-perfil-header {
    height: 76px;

    padding: 0 24px;

    display: flex;

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

    border-bottom: 1px solid var(--gris-claro);
}

.mi-perfil-header h1 {
    font-size: 20px;

    font-weight: 700;

    letter-spacing: -0.4px;
}

.btn-volver-perfil {
    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid var(--gris-claro);

    border-radius: 50%;

    background: var(--gris-muy-claro);
    color: var(--negro);

    font-size: 24px;
    font-weight: 400;

    display: flex;

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

    cursor: pointer;

    transition: 0.2s ease;
}

.btn-volver-perfil:hover {
    background: var(--negro);

    color: var(--blanco);

    border-color: var(--negro);
}

.espacio-header-perfil {
    width: 42px;
}


/* ==========================================
   PRESENTACIÓN DEL PERFIL
========================================== */

.perfil-presentacion {
    padding: 35px 30px 30px;

    text-align: center;

    border-bottom: 1px solid var(--gris-claro);
}

.foto-perfil-contenedor {
    display: flex;

    flex-direction: column;

    align-items: center;
}

.foto-perfil-grande {
    width: 112px;
    height: 112px;

    border-radius: 50%;

    background: var(--gris-muy-claro);

    border: 1px solid var(--gris-claro);

    display: flex;

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

    font-size: 48px;

    overflow: hidden;
}

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

    object-fit: cover;
}

.cambiar-foto {
    margin-top: 13px;

    color: var(--negro);

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

    cursor: pointer;
}

.cambiar-foto:hover {
    text-decoration: underline;
}

.perfil-presentacion h2 {
    margin-top: 18px;

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

    letter-spacing: -0.4px;
}

.perfil-presentacion > p {
    margin-top: 5px;

    color: var(--gris);

    font-size: 14px;
}


/* ==========================================
   SECCIONES DEL PERFIL
========================================== */

.perfil-seccion {
    padding: 25px 30px 0;
}

.perfil-seccion h3 {
    margin-bottom: 11px;

    color: var(--gris);

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

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


/* ==========================================
   ELEMENTOS DEL PERFIL
========================================== */

.perfil-item,
.perfil-boton {
    width: 100%;

    min-height: 68px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 13px 15px;

    background: var(--blanco);

    border: 1px solid #eeeeee;

    border-radius: 15px;

    margin-bottom: 9px;
}

.perfil-boton {
    text-align: left;

    font-family: inherit;

    cursor: pointer;

    transition: 0.2s ease;
}

.perfil-boton:hover {
    background: var(--gris-muy-claro);

    border-color: #dcdcdc;
}

.perfil-item-icono {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    border-radius: 12px;

    background: var(--gris-muy-claro);

    display: flex;

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

    font-size: 17px;

    color: var(--negro);
}

.perfil-item-info {
    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.perfil-item-info strong {
    color: var(--negro);

    font-size: 14px;
    font-weight: 600;
}

.perfil-item-info span {
    color: var(--gris);

    font-size: 13px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==========================================
   BOTÓN EDITAR
========================================== */

.btn-editar-perfil {
    width: auto;

    padding: 9px 14px;

    border: 1px solid var(--gris-claro);

    border-radius: 9px;

    background: var(--gris-muy-claro);

    color: var(--negro);

    font-family: inherit;

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

    cursor: pointer;

    transition: 0.2s ease;
}

.btn-editar-perfil:hover {
    background: var(--negro);

    color: var(--blanco);

    border-color: var(--negro);
}


/* ==========================================
   FLECHA
========================================== */

.perfil-flecha {
    color: #999999;

    font-size: 25px;

    font-weight: 300;

    line-height: 1;
}


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

.cerrar-sesion-seccion {
    padding: 25px 30px 30px;
}

.btn-cerrar-sesion {
    width: 100%;
    height: 50px;

    border: 1px solid #dddddd;

    border-radius: 13px;

    background: var(--blanco);

    color: #222222;

    font-family: inherit;

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

    cursor: pointer;

    transition: 0.2s ease;
}

.btn-cerrar-sesion:hover {
    background: var(--negro);

    color: var(--blanco);

    border-color: var(--negro);
}


/* ==========================================
   PERFIL - TELÉFONO
========================================== */

@media (max-width: 480px) {

    .pagina-mi-perfil {
        padding: 0;
    }

    .mi-perfil-app {
        width: 100%;

        max-height: 100vh;

        border-radius: 0;

        border: none;
    }

    .mi-perfil-header {
        height: 70px;

        padding: 0 17px;
    }

    .perfil-presentacion {
        padding: 30px 20px 25px;
    }

    .perfil-seccion {
        padding: 22px 17px 0;
    }

    .cerrar-sesion-seccion {
        padding: 22px 17px 25px;
    }

    .foto-perfil-grande {
        width: 100px;
        height: 100px;
    }
}


/* ==========================================
   PERFIL DEL CHAT
========================================== */

.pagina-perfil-conversacion {
    display: flex;

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

    min-height: 100vh;
}

.perfil-conversacion-app {
    width: min(620px, calc(100% - 30px));

    min-height: 650px;

    max-height: calc(100vh - 30px);

    overflow-y: auto;

    background: var(--blanco);

    border: 1px solid #eaeaea;

    border-radius: 24px;

    box-shadow: var(--sombra);
}

.perfil-conversacion-header {
    height: 72px;

    padding: 0 22px;

    display: flex;

    align-items: center;

    gap: 15px;

    border-bottom: 1px solid var(--gris-claro);

    position: sticky;

    top: 0;

    background: var(--blanco);

    z-index: 5;
}

.perfil-conversacion-header h1 {
    font-size: 18px;

    font-weight: 700;
}

.btn-volver-perfil-chat {
    width: 42px;
    height: 42px;

    border: 1px solid var(--gris-claro);

    border-radius: 50%;

    background: var(--gris-muy-claro);

    color: var(--negro);

    font-size: 23px;

    cursor: pointer;

    display: flex;

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

.btn-volver-perfil-chat:hover {
    background: var(--negro);

    color: var(--blanco);
}


/* ==========================================
   PRESENTACIÓN DEL CONTACTO
========================================== */

.contacto-presentacion {
    text-align: center;

    padding: 35px 20px 30px;

    border-bottom: 1px solid var(--gris-claro);
}

.foto-contacto-grande {
    width: 110px;
    height: 110px;

    margin: 0 auto 18px;

    border-radius: 50%;

    background: var(--gris-muy-claro);

    border: 1px solid var(--gris-claro);

    display: flex;

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

    font-size: 45px;

    overflow: hidden;
}

.foto-contacto-grande img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.contacto-presentacion h2 {
    font-size: 22px;

    margin-bottom: 5px;
}

.contacto-presentacion p {
    color: var(--gris);

    font-size: 14px;
}


/* ==========================================
   OPCIONES DEL CHAT
========================================== */

.opciones-chat {
    padding: 10px 20px;

    border-bottom: 1px solid var(--gris-claro);
}

.opcion-chat {
    width: 100%;

    min-height: 70px;

    border: none;

    border-bottom: 1px solid #eeeeee;

    background: transparent;

    display: flex;

    align-items: center;

    gap: 15px;

    text-align: left;

    cursor: pointer;

    color: var(--negro);

    font-family: inherit;
}

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

.opcion-chat:hover {
    background: var(--gris-muy-claro);
}

.opcion-chat-icono {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    border-radius: 13px;

    background: var(--gris-muy-claro);

    display: flex;

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

    font-size: 19px;
}

.opcion-chat-texto {
    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.opcion-chat-texto strong {
    font-size: 14px;
}

.opcion-chat-texto span {
    color: var(--gris);

    font-size: 12px;
}


/* ==========================================
   INTERRUPTORES
========================================== */

.interruptor {
    width: 34px;
    height: 20px;

    border-radius: 20px;

    background: #d4d4d4;

    color: transparent;

    position: relative;

    flex-shrink: 0;
}

.interruptor::after {
    content: "";

    position: absolute;

    width: 16px;
    height: 16px;

    top: 2px;
    left: 2px;

    border-radius: 50%;

    background: white;

    transition: 0.2s ease;
}

.interruptor.activo {
    background: var(--negro);
}

.interruptor.activo::after {
    left: 16px;
}


/* ==========================================
   FLECHA CHAT
========================================== */

.flecha-chat {
    font-size: 25px;

    color: #999999;

    flex-shrink: 0;
}


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

.contenido-chat {
    padding: 22px 20px;

    border-bottom: 1px solid var(--gris-claro);
}

.contenido-chat h3 {
    font-size: 14px;

    margin-bottom: 8px;

    color: var(--gris);
}

.contenido-item {
    width: 100%;

    min-height: 70px;

    border: none;

    border-bottom: 1px solid #eeeeee;

    background: transparent;

    display: flex;

    align-items: center;

    gap: 15px;

    text-align: left;

    font-family: inherit;

    color: var(--negro);

    cursor: pointer;
}

.contenido-item:last-child {
    border-bottom: none;
}

.contenido-item:hover {
    background: var(--gris-muy-claro);
}

.contenido-icono {
    width: 43px;
    height: 43px;

    border-radius: 13px;

    background: var(--gris-muy-claro);

    display: flex;

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

    font-size: 19px;

    flex-shrink: 0;
}

.contenido-item > div:nth-child(2) {
    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.contenido-item strong {
    font-size: 14px;
}

.contenido-item span {
    color: var(--gris);

    font-size: 12px;
}


/* ==========================================
   OPCIÓN PELIGRO
========================================== */

.opcion-peligro strong {
    color: #dc2626;
}


/* ==========================================
   FOTO PEQUEÑA EN CONVERSACIÓN
========================================== */

.info-contacto {
    border: none;

    background: transparent;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 5px 10px;

    border-radius: 14px;

    cursor: pointer;

    text-align: left;

    color: var(--negro);

    font-family: inherit;
}

.info-contacto:hover {
    background: var(--gris-muy-claro);
}

.foto-contacto-pequena {
    width: 45px;
    height: 45px;

    border-radius: 50%;

    background: var(--gris-muy-claro);

    border: 1px solid var(--gris-claro);

    display: flex;

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

    overflow: hidden;

    font-size: 20px;

    flex-shrink: 0;
}

.foto-contacto-pequena img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.info-contacto-texto h2 {
    margin: 0;

    font-size: 17px;
}

.info-contacto-texto p {
    margin: 3px 0 0;

    font-size: 12px;

    color: var(--gris);
}


/* ==========================================
   ESTADO VACÍO DEL CHAT
========================================== */

.estado-chat-vacio {
    width: min(340px, 90%);

    margin: 80px auto;

    text-align: center;
}

.icono-chat-vacio {
    width: 70px;
    height: 70px;

    margin: 0 auto 18px;

    border-radius: 22px;

    background: var(--gris-muy-claro);

    border: 1px solid var(--gris-claro);

    display: flex;

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

    font-size: 30px;
}

.estado-chat-vacio h3 {
    font-size: 17px;

    margin-bottom: 7px;
}

.estado-chat-vacio p {
    color: var(--gris);

    font-size: 13px;

    line-height: 1.5;
}


/* ==========================================
   TEMA OSCURO DEL CHAT
========================================== */

.tema-oscuro-chat {
    background: #111111;
}

.tema-oscuro-chat .perfil-conversacion-app {
    background: #1c1c1c;

    border-color: #333333;
}

.tema-oscuro-chat .perfil-conversacion-header {
    background: #1c1c1c;

    border-color: #333333;
}

.tema-oscuro-chat .perfil-conversacion-header h1,
.tema-oscuro-chat .contacto-presentacion h2,
.tema-oscuro-chat .opcion-chat,
.tema-oscuro-chat .contenido-item {
    color: white;
}

.tema-oscuro-chat .contacto-presentacion,
.tema-oscuro-chat .opciones-chat,
.tema-oscuro-chat .contenido-chat {
    border-color: #333333;
}

.tema-oscuro-chat .opcion-chat:hover,
.tema-oscuro-chat .contenido-item:hover {
    background: #292929;
}


/* ==========================================
   MÓVIL PERFIL DEL CHAT
========================================== */

@media (max-width: 600px) {

    .pagina-perfil-conversacion {
        align-items: stretch;
    }

    .perfil-conversacion-app {
        width: 100%;

        min-height: 100vh;

        max-height: none;

        border-radius: 0;

        border: none;
    }

    .perfil-conversacion-header {
        height: 68px;

        padding: 0 16px;
    }

    .contacto-presentacion {
        padding-top: 30px;
    }

    .foto-contacto-grande {
        width: 100px;
        height: 100px;
    }
}


/* ==========================================
   INICIO DE SESIÓN
========================================== */

.login-app {
    width: min(430px, calc(100% - 40px));

    min-height: auto;

    margin: 50px auto;

    padding: 38px 34px 32px;

    background: var(--blanco);

    border: 1px solid #eaeaea;

    border-radius: 26px;

    box-shadow: var(--sombra);

    text-align: center;
}


/* ==========================================
   LOGO DEL LOGIN
========================================== */

.login-app .logo {
    width: 72px;
    height: 72px;

    margin: 0 auto 20px;

    border-radius: 22px;

    background: var(--negro);

    color: var(--blanco);

    font-size: 34px;

    display: flex;

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

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.16);
}


/* ==========================================
   TÍTULO LOGIN
========================================== */

.login-app h1 {
    margin: 0;

    font-size: 27px;

    font-weight: 750;

    letter-spacing: -0.7px;
}

.login-app .subtitulo {
    margin-top: 7px;

    margin-bottom: 30px;

    color: var(--gris);

    font-size: 14px;
}


/* ==========================================
   FORMULARIO LOGIN
========================================== */

#formLogin {
    text-align: left;
}

.campo {
    margin-bottom: 18px;
}

.campo label {
    display: block;

    margin-bottom: 7px;

    color: var(--negro);

    font-size: 13px;

    font-weight: 600;
}

.campo input {
    width: 100%;

    height: 52px;

    padding: 0 15px;

    border: 1px solid var(--gris-claro);

    border-radius: 13px;

    outline: none;

    background: var(--gris-muy-claro);

    color: var(--negro);

    font-family: inherit;

    font-size: 14px;

    transition: 0.2s ease;
}

.campo input::placeholder {
    color: #999999;
}

.campo input:focus {
    background: var(--blanco);

    border-color: var(--negro);

    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.05);
}


/* ==========================================
   CONTRASEÑA
========================================== */

.campo-contrasena {
    position: relative;
}

.campo-contrasena input {
    padding-right: 52px;
}

.btn-ojo {
    position: absolute;

    right: 6px;
    top: 50%;

    transform: translateY(-50%);

    width: 40px;
    height: 40px;

    border: none;

    border-radius: 10px;

    background: transparent;

    color: #777777;

    font-size: 18px;

    cursor: pointer;

    display: flex;

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

.btn-ojo:hover {
    background: var(--gris-claro);
}


/* ==========================================
   RECUPERAR CONTRASEÑA
========================================== */

.btn-recuperar {
    display: block;

    margin: 2px 0 22px auto;

    padding: 0;

    border: none;

    background: transparent;

    color: var(--negro);

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;
}

.btn-recuperar:hover {
    text-decoration: underline;
}


/* ==========================================
   BOTÓN PRINCIPAL
========================================== */

.btn-principal {
    width: 100%;

    height: 52px;

    border: none;

    border-radius: 13px;

    background: var(--negro);

    color: var(--blanco);

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-principal:hover {
    background: var(--negro-suave);

    transform: translateY(-1px);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.15);
}

.btn-principal:active {
    transform: translateY(0);
}


/* ==========================================
   MENSAJE LOGIN
========================================== */

.mensaje-login {
    min-height: 20px;

    margin-top: 15px;

    color: #555555;

    font-size: 13px;

    line-height: 1.4;

    text-align: center;
}


/* ==========================================
   REGISTRO DESDE LOGIN
========================================== */

.registro {
    margin-top: 25px;

    padding-top: 22px;

    border-top: 1px solid var(--gris-claro);

    text-align: center;
}

.registro p {
    margin-bottom: 9px;

    color: var(--gris);

    font-size: 13px;
}

.btn-registro {
    padding: 0;

    border: none;

    background: transparent;

    color: var(--negro);

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;
}

.btn-registro:hover {
    text-decoration: underline;
}


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

@media (max-width: 480px) {

    .login-app {
        width: calc(100% - 24px);

        margin: 12px auto;

        padding: 32px 22px 28px;

        border-radius: 22px;
    }

    .login-app .logo {
        width: 66px;
        height: 66px;

        font-size: 30px;
    }

    .login-app h1 {
        font-size: 24px;
    }
}


/* ==========================================
   FOTO DE PERFIL EN EL LOBBY
========================================== */

.boton-perfil-con-foto {
    overflow: hidden;

    padding: 0;

    position: relative;
}

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

    object-fit: cover;

    display: block;
}


/* ==========================================
   FOTO DE PERFIL EN EL LOBBY
========================================== */

#fotoPerfilLobby {
    width: 100%;
    height: 100%;

    display: flex;

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

    overflow: hidden;

    border-radius: 50%;
}

#fotoPerfilLobby img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* ==========================================
   REGISTRO
========================================== */

.app {
    width: min(430px, calc(100% - 40px));

    margin: 50px auto;

    padding: 38px 34px 32px;

    background: var(--blanco);

    border: 1px solid #eaeaea;

    border-radius: 26px;

    box-shadow: var(--sombra);

    text-align: center;
}


/* ==========================================
   LOGO REGISTRO
========================================== */

.app .logo {
    width: 72px;
    height: 72px;

    margin: 0 auto 20px;

    border-radius: 22px;

    background: var(--negro);

    color: var(--blanco);

    font-size: 34px;

    display: flex;

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

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.16);
}


/* ==========================================
   TÍTULO REGISTRO
========================================== */

.app h1 {
    margin: 0;

    font-size: 27px;

    font-weight: 750;

    letter-spacing: -0.7px;
}

.app > p {
    margin-top: 7px;

    margin-bottom: 28px;

    color: var(--gris);

    font-size: 14px;

    line-height: 1.5;
}


/* ==========================================
   FORMULARIO REGISTRO
========================================== */

#formRegistro {
    text-align: left;
}

#formRegistro label {
    display: block;

    margin-bottom: 7px;

    color: var(--negro);

    font-size: 13px;

    font-weight: 600;
}

#formRegistro input {
    width: 100%;

    height: 52px;

    margin-bottom: 17px;

    padding: 0 15px;

    border: 1px solid var(--gris-claro);

    border-radius: 13px;

    outline: none;

    background: var(--gris-muy-claro);

    color: var(--negro);

    font-family: inherit;

    font-size: 14px;

    transition: 0.2s ease;
}

#formRegistro input::placeholder {
    color: #999999;
}

#formRegistro input:focus {
    background: var(--blanco);

    border-color: var(--negro);

    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.05);
}


/* ==========================================
   BOTÓN REGISTRAR
========================================== */

#formRegistro button[type="submit"] {
    width: 100%;

    height: 52px;

    margin-top: 4px;

    border: none;

    border-radius: 13px;

    background: var(--negro);

    color: var(--blanco);

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

#formRegistro button[type="submit"]:hover {
    background: var(--negro-suave);

    transform: translateY(-1px);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.15);
}

#formRegistro button[type="submit"]:active {
    transform: translateY(0);
}


/* ==========================================
   MENSAJE REGISTRO
========================================== */

#mensajeRegistro {
    min-height: 20px;

    margin-top: 15px;

    margin-bottom: 0;

    color: #555555;

    font-size: 13px;

    line-height: 1.4;

    text-align: center;
}


/* ==========================================
   BOTÓN INICIAR SESIÓN
========================================== */

.app .registro {
    margin-top: 25px;

    padding-top: 22px;

    border-top: 1px solid var(--gris-claro);

    text-align: center;
}

.app .registro p {
    margin-bottom: 9px;

    color: var(--gris);

    font-size: 13px;
}

#btnIniciarSesion {
    padding: 0;

    border: none;

    background: transparent;

    color: var(--negro);

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;
}

#btnIniciarSesion:hover {
    text-decoration: underline;
}


/* ==========================================
   REGISTRO EN TELÉFONO
========================================== */

@media (max-width: 480px) {

    .app {
        width: calc(100% - 24px);

        margin: 12px auto;

        padding: 32px 22px 28px;

        border-radius: 22px;
    }

    .app .logo {
        width: 66px;
        height: 66px;

        font-size: 30px;
    }

    .app h1 {
        font-size: 24px;
    }
}