/* =========================================================
   ARCHIVO: /shared/css/global.css
   Estilos generales para toda la aplicación.
========================================================= */

/* =========================================================
   SISTEMA DE TEMAS Y VARIABLES DE COLOR
========================================================= */
:root {
    /* MODO OSCURO (POR DEFECTO) */
    --color-bg: #000000;         /* 1: Fondo */
    --color-surface: #111111;    /* 2: Fondo posts */
    --color-ui: #222222;         /* 3: Headers, acciones */
    --color-accent: #8A2BE2;     /* 4: Botones, acentos */
    --color-text: #FFFFFF;       /* 5: Texto principal */
    
    /* Colores derivados */
    --color-text-secondary: #ffffffb3;
    --color-border: #333333;
    
    /* Transición suave para todos los cambios de color */
    transition: background-color 0.5s ease, color 0.5s ease;
}

body, .top-bar, .bottom-bar, .post-card, button, input, textarea {
    /* Aplicamos la transición a todos los elementos principales */
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

img {
    opacity: 0;
    transition: opacity 0.15s ease-in;
}
img.img-loaded {
    opacity: 1;
}

/* 🚀 Placeholder de fondo SOLO para fotos sólidas conocidas (avatares, imágenes de post) */
img.avatar,
img.post-image,
img.profile-pic {
    background-color: var(--color-bg-secondary, #1a1a1a);
}

/* 🚀 ESTILOS PARA ADAPTAR EL COLOR NEGRO DEL LOTTIE */

/* Regla base: En modo oscuro, los Lottie con color #000 se hacen blancos */
html[data-mode="dark"] dotlottie-player >>> svg path[fill="#000000"] {
    fill: #ffffff !important;
}

/* Regla inversa: En modo claro, los Lottie con color #000 se quedan negros */
html[data-mode="light"] dotlottie-player >>> svg path[fill="#000000"] {
    fill: #000000 !important;
}


/* --- Estilos Base --- */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: Arial, sans-serif;
    margin: 0;
    padding-top: 50px;    /* = altura de .top-bar */
    padding-bottom: 55px; /* ✅ = altura de .bottom-bar */
    height: 100vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
}


main {
    overflow-y: auto;
    flex-grow: 1; /* <-- CAMBIADO: Hará que ocupe todo el espacio restante */
    /* La altura ya no necesita ser calculada manualmente */
}
/* --- Enlaces --- */
a {
    color: inherit;
    text-decoration: none;
}

/* =========================================================
   Barra Superior (Top Bar)
========================================================= */
:root {
    /* Altura dinámica del área segura (barra de estado del sistema) */
    --status-bar-height: env(safe-area-inset-top, 20px);
}

/* Barra superior */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: var(--color-ui);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    z-index: 100;
    border-bottom: 1px solid var(--color-border);
}

.top-left,
.top-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.top-bar path {
    width: 22px;
    height: 22px;
    opacity: 0.95;
    cursor: pointer;
    fill: var(--color-text);
}

.stroke-btn  path{
    stroke: var(--color-text);
}

/* =========================================================
   Barra Inferior (Bottom Bar)
========================================================= */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55px;
    background: var(--color-ui);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    border-top: 1px solid var(--color-border);
}

.bottom-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.bottom-bar svg {
    width: 24px;
    height: 24px;
    opacity: 0.9;
    transition: transform 0.2s;
    fill:  var(--color-text);
    
}

.bottom-bar a:active svg {
    opacity: 1;
    transform: scale(1.1);
}





.nav-btn{
    background-color: var(--color-ui); /* Usa el color de acent */
    }







/* Asegura que el avatar sea un círculo perfecto */
.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.frame-wrapper {
    /*position: relative !important;*/
    display: inline-block !important;
    line-height: 0 !important;
    /* Ajustamos el tamaño del wrapper al de la imagen automáticamente */
}

.frame-overlay {
    position: absolute !important;
    top: -8.7px; /* Ajusta este valor para centrar arriba/abajo */
    left: 0px; /* Ajusta este valor para centrar izq/der */
    width: calc(100% + 10px) !important; /* El marco es un poco más grande que el avatar */
    height: calc(100% + 20px) !important;
    pointer-events: none !important;
    z-index: 10 !important;
    object-fit: contain !important;
}


.menu-profile .frame-wrapper {
    position: relative !important;
    display: inline-block !important;
    line-height: 0 !important;
    /* Ajustamos el tamaño del wrapper al de la imagen automáticamente */
}

.menu-profile .frame-overlay {
    position: absolute !important;
    top: 10px; /* Ajusta este valor para centrar arriba/abajo */
    left: 0px; /* Ajusta este valor para centrar izq/der */
    width: calc(100% + 10px) !important; /* El marco es un poco más grande que el avatar */
    height: calc(100% + 10px) !important;
    pointer-events: none !important;
    z-index: 10 !important;
    object-fit: contain !important;
}


.menu-profile .frame-wrapper {
    width: 95px !important; /* El ancho exacto que quieres */
    height: 95px !important;
}

.menu-profile .frame-overlay {
    /* Ajusta estos valores para centrar el marco en el menú sin afectar el perfil */
    top: 17.5px !important;
    left: 1px !important;
    width: calc(100% + 10px) !important;
    height: calc(100% + 10px) !important;
}



/* Estilo específico para el marco en la lista de chats */
.chat-list-item .frame-wrapper {
    /* width: 45px !important; */ /* Ajusta al tamaño de tu avatar de chat */
    /* height: 45px !important; */
}

.chat-list-item .frame-overlay {
    /* Ajustes para que encaje en el círculo pequeño de la lista */
    top: -5px !important;
    left: -8px !important;
    width: calc(100% + 6px) !important;
    height: calc(100% + 14px) !important;
    pointer-events: none !important;
    z-index: 10 !important;
    object-fit: contain !important;
}




.chat-header-info .frame-wrapper {
    display: flex !important;
}


.chat-header-info .frame-overlay {
    top: -3px !important;
    left: -5px !important;
    width: calc(100% + 6px) !important;
    height: calc(100% + 6px) !important;
    z-index: 0 !important;
}


/* Ajuste fino para el marco en la lista de búsqueda */
.search-result-item .frame-wrapper {
    display: flex !important;
}

.search-result-item .frame-overlay {
    top: -7px !important;
    left: -8px !important;
    width: calc(100% + 10px) !important;
    height: calc(100% + 16px) !important;
    z-index: 0 !important;
}


/* Burbuja base: valores por defecto */
.message-bubble.received {
    background-color: var(--bubble-bg, var(--color-ui));
    color: var(--bubble-text, var(--color-text));
    border-radius: var(--bubble-radius, 15px);
    border: var(--bubble-border, none);
}

.message-bubble.sent {
    background-color: var(--bubble-sent-bg, var(--color-accent));
    color: var(--bubble-sent-text, #ffffff);
    border-radius: var(--bubble-radius-sent, 15px);
}










/* Notificación de Misión */
.mission-toast {
    position: fixed; /* Esto es lo que la mantiene anclada a la pantalla, no a la página */
    top: 20px;       /* Distancia desde el borde superior de la pantalla */
    left: 50%;
    transform: translateX(-50%) translateY(-150%); /* Posición inicial fuera de pantalla */
    width: 90%;
    max-width: 350px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    padding: 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 99999; /* Z-index altísimo para que pase por encima de cualquier otro elemento */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mission-toast.show {
    transform: translateX(-50%) translateY(0); /* Entra en vista */
}

.mission-toast-icon { font-size: 24px; }
.mission-toast-text h4 { margin: 0; font-size: 14px; font-weight: 900; }
.mission-toast-text p { margin: 0; font-size: 11px; opacity: 0.9; }



/* =========================================================
   📱 NATIVE FEEL — Bloqueo de selección global
========================================================= */

html:not(.debug-native-feel) body {
    -webkit-tap-highlight-color: transparent;
}

/* Bloqueo de selección: aplicar a TODO menos editables e interactivos */
html:not(.debug-native-feel) body *:not(input):not(textarea):not([contenteditable="true"]):not([contenteditable=""]):not(.allow-select):not(button):not([role="button"]):not(a) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* =========================================================
   ✅ Excepciones explícitas (por claridad)
========================================================= */
input,
textarea,
[contenteditable="true"],
[contenteditable=""],
.allow-select,
button,
[role="button"],
a,
label,
.no-native-block {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* Imágenes: no arrastrables por default */
html:not(.debug-native-feel) img:not(.no-native-block) {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Estilo de selección */
::selection {
    background: var(--color-accent, #8A2BE2);
    color: #ffffff;
}
::-moz-selection {
    background: var(--color-accent, #8A2BE2);
    color: #ffffff;
}