/* Estilos generales */

body {
    font-family: Arial, sans-serif;
    background-color: #282828;
    margin: 0;
    padding: 0;
}

.tamaño {
    width: 25px;
}

.tamaño2 {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

a {
    color: white;
}


/* Parte superior */

header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #214338;
    color: white;
    height: 80px;
    padding: 0 10px;
}

.BetTok {
    width: 120px;
}

header nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    padding: 0 200px;
    margin: 0;
}

header nav ul li a {
    color: white;
    text-decoration: none;
    padding: 6px 12px;
    background-color: #314d44;
    border-radius: 18px;
    border: 2px solid #3c564d;
    font-size: 14px;
}

header nav ul li a:hover,
header nav ul li a.activo {
    color: #00E0C6;
    border-color: #00E0C6;
}


/* Etructura principal */

.conjunto {
    display: flex;
    margin: 24px 20px;
    gap: 20px;
    color: white;
}

.lado-izquierdo {
    width: 30%;
    padding-right: 20px;
    border-right: 5px solid #3a3a3a;
    box-sizing: border-box;
    text-align: right;
}

.parte-central {
    width: 40%;
    padding-right: 10px;
    border-right: 5px solid #3a3a3a;
    box-sizing: border-box;
}

.lado-derecho {
    width: 30%;
    box-sizing: border-box;
}

main h2,
.lado-izquierdo h3,
.lado-derecho h3,
.perfil-h3 {
    color: #00E0C6;
}


/* Menú izquierdo */

.lado-izquierdo ul,
.lado-derecho ul {
    list-style: none;
    padding: 0;
}

.lado-izquierdo li {
    margin-bottom: 14px;
    font-size: 18px;
}

.lado-izquierdo a {
    text-decoration: none;
}

.lado-izquierdo a:hover {
    color: #00E0C6;
}

.link-cerrar-sesion {
    color: #ff6b6b;
}

.link-iniciar-sesion {
    color: #00E0C6;
}

.link-perfil {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.foto-mini {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.sin-seguidos {
    color: #888;
    font-size: 13px;
}


/* Bloque derecho */

.lado-derecho li {
    margin-bottom: 16px;
    font-size: 18px;
    display: flex;
    gap: 8px;
}


/* Publicaciones */

.post {
    margin-bottom: 24px;
    border-radius: 8px;
    overflow: hidden;
}

.post h3 {
    background-color: #3a3a3a;
    padding: 8px 10px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
}

.post p {
    background-color: #373737;
    padding: 14px 12px;
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
}

.post-titulo,
.post-titulo-oscuro {
    font-weight: bold;
    padding: 8px 12px;
    margin: 0;
}

.post-titulo {
    background-color: #373737;
}

.post-titulo-oscuro {
    background-color: #2e2e2e;
}

.post-fecha {
    font-size: 16px;
    color: #aaa;
    font-weight: normal;
    margin-left: 10px;
}

.imagenesmeme {
    background-color: #373737;
    padding: 10px;
}

.imagenesmeme img {
    width: 100%;
    max-width: 400px;
    display: block;
    border-radius: 6px;
}


/* Acciones */

.acciones {
    display: flex;
    gap: 16px;
    align-items: center;
    background-color: #2e2e2e;
    padding: 10px 12px;
}

.accion {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #ccc;
}

.btn-like {
    text-decoration: none;
}

.btn-like:hover,
.btn-like.liked {
    color: #ff6b6b;
}

.btn-seguir {
    margin-left: auto;
    font-size: 12px;
    padding: 3px 12px;
    border-radius: 18px;
    border: 2px solid #00E0C6;
    color: #00E0C6;
    text-decoration: none;
}

.btn-seguir:hover {
    background-color: #00E0C6;
    color: #282828;
}

.btn-seguir.siguiendo {
    border-color: #666;
    color: #666;
}


/* Comentarios */

.seccion-comentarios {
    background-color: #272727;
    padding: 12px;
    border-top: 1px solid #3a3a3a;
}

.comentario {
    color: #ccc;
    padding: 6px 0;
    border-bottom: 1px solid #333;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.comentario strong {
    color: #00E0C6;
}

.comentario small {
    color: #666;
    margin-left: auto;
}

.form-comentario {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.form-comentario input[type="text"] {
    flex: 1;
    padding: 6px 12px;
    background-color: #1e1e1e;
    border: 2px solid #3c564d;
    border-radius: 18px;
    color: white;
}

.form-comentario button {
    padding: 6px 14px;
    background-color: #214338;
    border: 2px solid #3c564d;
    border-radius: 18px;
    color: white;
}

.sin-comentarios,
.comentarios-login-aviso {
    color: #888;
    font-size: 13px;
}

.comentarios-login-aviso a {
    color: #00E0C6;
}


/* Perfil */

.perfil-caja {
    background-color: #373737;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}

.perfil-foto {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #00E0C6;
}

.perfil-info h2 {
    color: #00E0C6;
    margin: 0 0 6px;
}

.perfil-stats {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.stat {
    text-align: center;
    font-size: 13px;
    color: #aaa;
}

.stat strong {
    display: block;
    color: white;
    font-size: 18px;
}

.form-foto {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.form-foto input[type="file"] {
    color: white;
}

.btn-foto {
    padding: 6px 16px;
    background-color: #214338;
    border: 2px solid #3c564d;
    border-radius: 18px;
    color: white;
}


/* Mensajes y ayudas */

.mensaje-exito {
    color: #00E0C6;
    background-color: #1a3a30;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.sin-publicaciones {
    color: #aaa;
    margin-top: 20px;
}

.sin-publicaciones a {
    color: #00E0C6;
}

.ayuda-campo {
    color: #888;
    font-size: 12px;
    font-weight: normal;
}

.ayuda-campo {
    margin: 6px 0 0;
}

.js-form-message {
    color: #ff6b6b;
    font-size: 13px;
}

.imagen-actual-label {
    color: #aaa;
    font-size: 13px;
}

.imagen-actual-preview,
.preview-subida {
    width: 150px;
    max-width: 100%;
    border-radius: 8px;
}