/* Importar Samsung Sans */
@font-face {
    font-family: 'Samsung Sans';
    src: url('https://fonts.cdnfonts.com/s/17674/SamsungSans-Regular.woff') format('woff'),
         url('https://fonts.cdnfonts.com/s/17674/SamsungSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* Centrar y alinear los botones del sub-header en una sola fila */
.sub-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
    background-color: rgba(1, 5, 36, 0.5);
}

.sub-header a {
    display: flex;
    align-items: center;
}

.sub-header a:not(:last-child) {
    border-right: 1px solid #888;
    margin-right: 0.7em;
    padding-right: 0.7em;
}

.sub-header button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.6em;
    padding: 0.3em 0.7em;
    border-radius: 0;
    margin: 0;
    gap: 0;
    box-shadow: none;
    transition: color 0.2s;
}

.sub-header button:hover {
    color: #8cf;
}

.sub-header button, .sub-header a {
    text-decoration: none !important;
}

/* Modo todo negro */
.all-black-mode {
    --color-header-bg: #000;
    --color-header-text: #fff;
    --color-body-bg: #000;
    --color-body-text: #fff;
    /* Más variables si es necesario */
}

/* Modo todo rosa */
.all-pink-mode {
    --color-header-bg: #ff69b4;
    --color-header-text: #fff;
    --color-body-bg: #ff69b4;
    --color-body-text: #fff;
    /* Más variables si es necesario */
}
/* Variables de color para modo por defecto */
:root {
    --color-header-bg: rgba(1, 5, 36, 0.5);
    --color-header-text: #fff;
    --color-body-bg: #060E45;
    --color-body-text: #fff;
    /* Agrega aquí más variables según tu diseño actual */
}

/* Variables para modo alternativo (todo blanco) */
.all-white-mode {
    --color-header-bg: #fff;
    --color-header-text: #000;
    --color-body-bg: #fff;
    --color-body-text: #000;
    /* Más variables si es necesario */
}

body {
    background: var(--color-body-bg);
    color: var(--color-body-text);
}

header {
    display: flex;
    font-size: 2em;
    color: white;
    flex-direction: column;
    background: none;
    margin: 0;
    padding: 0;
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #060E45;
    color: white;
}


html {
    background-color: #060E45;
    background-size: cover;
    height: 100%;
    color: white;
}

.sup-header {
    display: flex;
    justify-content: space-between; /* El logo y el login */
    padding: 0.5em; /* Separación entre sup-header y los bordes */
    align-items: center; /* Centra verticalmente los elementos */
    padding-right: 3em;  /* Separación entre el botón de login y el borde */
    padding-left: 3em;   /* Separación entre el logo y el borde */
    background-color: #060E45;
    margin: 0;
}

.sup-left {
    display: flex;
    align-items: center;
    gap: 1em; /* Espacio entre logo y buscador */
}

.logo img {
    width: 200px; /* Ajusta el tamaño según lo que necesites */
    height: auto;
}

.navegacion {
    display: flex;
    gap: 0;
}

.navegacion a {
    margin: 0;
}

.navegacion button {
    font-family: 'Samsung Sans', Arial, sans-serif;
    font-size: 0.7em;
    border-radius: 10px;
    color: white;
    background: transparent;
    border: none;
    padding: 0.2em 0.6em;
    margin: 0;
}

.navegacion button:hover{
    background-color: rgba(9, 23, 110);
    transition: background-color 0.3s ease;
}

.low-header {
    background-color: #0a1523;
    display: flex;
    justify-content: center;   /* Centra los elementos hijos */
    gap: 0.5em; /* Espacio entre los elementos hijos */
    padding: 0.2em;
}

.login {
    display: flex;
    align-items: center;
    gap: 1em;
}

.login img {
    width: 50px;
}

/* Botón color-mode */
.color-mode-btn img {
    width: 50px !important;
    height: 50px !important;
}

.login-boton {
    display: inline-flex;
    align-items: center;
    background-color: #5865F2;
    color: #fff;
    font-size: 1.0em;
    padding: 0.3em;
    border-radius: 20px;
}

.discord-login-btn {
    display: inline-flex;
    align-items: center;
    background-color: #5865F2;
    color: #fff;
    padding: 0.7em 1.2em;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 500;
    transition: background 0.2s;
    margin-top: 1.5em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.discord-login-btn:hover {
    background-color: #4752c4;
}

/* Layout de mascotas: vertical por registro */
#mascotas-list {
    display: flex !important;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    width: 100%;
    padding: 1rem 0;
}


.mascota-card {
    width: calc(100% - 2rem);
    max-width: 900px;
    background: rgba(255,255,255,0.05);
    padding: 1rem 1.2rem;
    margin: 0.6rem 0;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

/* Cabecera tipo post de Facebook: avatar + nombre arriba, fecha debajo */
.post-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.post-avatar {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    object-fit: cover;
    background: #222;
}

.post-user {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.post-name {
    font-weight: 800;
}

.post-date {
    color: #bfc8d6;
    font-size: 0.85rem;
}

.mascota-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 12px;
}

.mascota-meta {
    text-align: left;
    color: var(--color-body-text);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 auto;
}

.mascota-username {
    font-weight: 700;
}

.mascota-link {
    color: #7fb3ff;
    word-break: break-all;
    font-size: 0.95rem;
}

.mascota-date {
    color: #bfc8d6;
    font-size: 0.9rem;
}

.mascota-card:hover{
    transform: translateY(-4px);
    transition: transform 120ms ease-out;
}

/* Lightbox / modal preview */
.mascota-image{ cursor: zoom-in; }

/* Inline expanded image inside card */
.mascota-image.expanded{
    width: 420px !important;
    height: auto !important;
    flex: 0 0 auto !important;
}

/* Strip horizontal de media cuando hay varias imágenes por post */
.media-strip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
}

.media-strip-item {
    flex: 0 0 auto;
}

/* Dentro del strip, las imágenes son más angostas para que se vean varias a la vez */
.media-strip .mascota-image {
    width: 260px;
    max-height: 220px;
    border-radius: 12px;
}

/* Attachment count badge (when a message has multiple attachments) */
.image-wrapper { position: relative; display: inline-block; }
.attachment-badge {
    position: absolute;
    right: 8px;
    top: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
}

/* Lightbox styles */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
}
.lightbox-content { max-width: 92%; max-height: 92%; display:flex; align-items:center; justify-content:center; }
.lightbox-content img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.lightbox-prev, .lightbox-next, .lightbox-close { position: absolute; background: rgba(0,0,0,0.45); color: #fff; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 1.2rem; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-close { top: 8px; right: 8px; }

/* Thumbnail strip shown over the main image when more attachments exist */
.attachment-thumbs { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; align-items: center; }
.attachment-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; border: 2px solid rgba(0,0,0,0.45); box-shadow: 0 6px 18px rgba(0,0,0,0.45); cursor: pointer; }