/* base.css: Estilos Globales, Variables y Layout Principal */

/* --- 0. Definición de Variables y Temas --- */
:root {
    /* Tema Base / Futurista (Por defecto) */
    --color-principal: #00bcd4;     /* Cian Neón (Éxito/Primario) */
    --color-secundario: #64ffda;    /* Verde Aqua (Interacción/Secundario) */
    --color-fondo: #121212;         /* Fondo de la app (Negro muy oscuro) */
    --color-tarjeta: #1e1e1e;       /* Fondo de las tarjetas/contenedores */
    --color-texto: #e0e0e0;         /* Texto principal claro */
    --color-suave: #fffdfd;         /* Texto secundario/Placeholder */
    --color-borde: #3a3a3a;         /* Bordes suaves */
    --color-error: #ff6e6e;         /* Rojo Error */
    
    --sombra-neon: 0 0 5px rgba(0, 188, 212, 0.5); 
    
    --font-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-serif: Georgia, serif;
}

/* --- TEMA PROFESIONAL (Sobrescritura de variables al activar la clase) --- */
.theme-professional {
    --color-principal: #3f51b5;     /* Azul Oscuro (Serio) */
    --color-secundario: #ff9800;    /* Naranja (Acento) */
    --color-fondo: #f5f5f5;         /* Fondo más claro */
    --color-tarjeta: #ffffff;       /* Tarjetas blancas */
    --color-texto: #212121;         /* Texto oscuro */
    --color-suave: #666;
    --color-borde: #ccc;
    --sombra-neon: 0 3px 6px rgba(0, 0, 0, 0.1); 
}


/* --- 1. Reset Básico y Estilos del Cuerpo --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* CLAVE: Aplica las variables de color y fondo */
    font-family: var(--font-principal);
    background-color: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.6;
    min-height: 100vh;
}

a {
    color: var(--color-secundario);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--color-principal);
}

/* --- 2. Botones y Elementos de Formulario (GLOBAL) --- */
button, .btn {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s, box-shadow 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background-color: var(--color-principal);
    color: var(--color-fondo); /* En tema oscuro es negro, en profesional es #212121 */
    box-shadow: var(--sombra-neon);
}

.btn-primary:hover {
    background-color: #008c9e; /* Tono más oscuro de cian para futurista */
    opacity: 0.9;
}
/* Sobrescritura de hover para el tema profesional */
.theme-professional .btn-primary:hover {
    background-color: #314092; /* Tono más oscuro de azul para profesional */
}


.btn-secondary {
    background-color: var(--color-tarjeta);
    color: var(--color-texto);
    border: 1px solid var(--color-secundario);
}

.btn-secondary:hover {
    background-color: var(--color-borde);
    border-color: var(--color-principal);
}

.btn-error {
    background-color: var(--color-error);
    color: white;
}
.btn-error:hover {
    background-color: #cc4f4f;
}

input[type="text"], input[type="email"], input[type="password"], textarea, select {
    padding: 10px;
    border: 1px solid var(--color-borde);
    border-radius: 5px;
    background-color: var(--color-tarjeta);
    color: var(--color-texto);
    transition: border-color 0.3s;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--color-principal);
    outline: none;
}

/* Sobrescritura de inputs para el tema profesional */
.theme-professional input[type="text"],
.theme-professional input[type="email"],
.theme-professional input[type="password"],
.theme-professional textarea,
.theme-professional select {
    background-color: white;
    color: var(--color-texto);
    border-color: var(--color-borde);
}


/* --- 3. Cabecera y Navegación Principal --- */
#main-nav-header {
    background-color: var(--color-tarjeta);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    padding: 10px 40px;
    position: sticky;
    top: 0;
    z-index: 100;
}

#main-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.nav-link {
    padding: 8px 15px;
    color: var(--color-texto);
    font-size: 0.95em;
    border-radius: 5px;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
}

.nav-link:hover {
    background-color: #333;
    color: var(--color-secundario);
}

.nav-link.active {
    background-color: var(--color-fondo);
    color: var(--color-principal);
    font-weight: bold;
}

/* --- TEMA PROFESIONAL EN NAVEGACIÓN --- */
.theme-professional #main-nav-header {
    background-color: var(--color-tarjeta);
    box-shadow: var(--sombra-neon);
}
.theme-professional .nav-link {
    color: var(--color-texto);
}
.theme-professional .nav-link:hover {
    background-color: #eee;
}
.theme-professional .nav-link.active {
    background-color: var(--color-principal);
    color: white;
}

/* --- 4. Layout de Contenido Principal --- */
#app-main-content {
    display: flex;
    max-width: 1400px;
    margin: 20px auto;
    gap: 30px;
    padding: 0 20px;
}

/* --- 5. Sidebar --- */
.sidebar {
    width: 300px;
    position: sticky;
    top: 80px; 
    align-self: flex-start;
}

.sidebar .profile-card {
    background-color: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.sidebar .profile-avatar {
    background-color: var(--color-principal);
    color: var(--color-fondo);
    /* Dimensiones se mantienen */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 2em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

/* --- TEMA PROFESIONAL EN SIDEBAR --- */
.theme-professional .sidebar .profile-card {
    background-color: var(--color-tarjeta);
}
.theme-professional .sidebar .profile-avatar {
    background-color: var(--color-principal);
    color: white;
}

/* --- 6. Contenedor de Posts (Reutilizado) --- */
.posts-list-container {
    flex-grow: 1;
    max-width: 700px;
}

/* Estilo para el contenedor de configuración (settings.html) */
.theme-professional #settings-main-container {
    background-color: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
}
/* base.css (ADICIÓN AL FINAL) */

/* --- MEDIA QUERY: PANTALLAS PEQUEÑAS (Máx. 768px) --- */
@media (max-width: 768px) {
    
    /* 1. Layout Principal: Apilar Sidebar y Contenido */
    /* Cambia la dirección de la flexbox a columna (apilado) */
    .main-container {
        flex-direction: column; 
        gap: 20px;
        padding: 0 10px; /* Reducir el padding general en móviles */
    }

    /* 2. Barra Lateral (Sidebar): Ocupar todo el ancho y quitar el sticky */
    .sidebar {
        width: 100%;
        position: static; /* Ya no está fijo */
        top: 0;
        margin-bottom: 0;
    }
    
    /* 3. Navegación (Header): Permite que los enlaces se envuelvan */
    #main-navigation {
        flex-wrap: wrap; 
        justify-content: flex-start;
    }
    .nav-link {
        flex-grow: 1; /* Los enlaces ocupan espacio de forma equitativa */
        text-align: center;
        padding: 10px 5px;
    }
}

/* ... Estilos de Groups.css para Desktop ... */
/* ... (todo el código original de groups.css) ... */
/* ... */

/* ========================================================================= */
/* --- MEDIA QUERY: ESTILOS RESPONSIVE PARA MÓVILES Y TABLETS (Máx. 768px) --- */
/* ========================================================================= */
@media (max-width: 768px) {
    
    /* Contenedores Principales (Chat/Grupos) */
    #groups-container {
        height: auto; 
        min-height: calc(100vh - 70px); 
        margin: 10px auto; 
        border-radius: 0;
        border: none;
        max-width: 100%;
    }
    
    /* Lista de Conversaciones/Grupos (Panel Lateral) */
    #group-list-panel {
        width: 100%; 
        border-right: none;
        padding: 10px;
    }

    /* Panel Activo (Contenido del Grupo) - Lo ocultamos para priorizar la lista en móvil */
    #active-group-panel {
        display: none; 
    }
}


/* 7. Buscador en el Header */
.search-container {
    position: relative;
    margin-left: 20px;
    flex-grow: 1;
    max-width: 300px;
}

.search-input {
    width: 100%;
    padding: 8px 35px 8px 15px;
    border-radius: 20px;
    border: 1px solid var(--color-borde);
    background-color: var(--color-fondo);
    color: var(--color-texto);
}

.search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-suave);
}

/* 8. Historias (Stories) */
.stories-wrapper {
    background-color: var(--color-tarjeta);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--color-borde);
    display: flex;
    gap: 15px;
    overflow-x: auto; /* Scroll horizontal */
    white-space: nowrap;
}

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    min-width: 70px;
}

.story-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Color Instagram/Story */
    padding: 3px; /* Borde del gradiente */
    margin-bottom: 5px;
}

.story-circle img, .story-circle div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--color-tarjeta); /* Borde interno */
    border: 2px solid var(--color-tarjeta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2em;
    object-fit: cover;
}

.story-username {
    font-size: 0.8em;
    color: var(--color-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
}

/* ESTILOS ESPECIALES PARA TIPOS DE POST EN EL FEED */

/* Tarjeta estándar (ya la tienes, pero aseguramos la base) */
.post-card {
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.2s;
}

/* --- MODO FRASE / VERSO (Estilo Artístico) --- */
.post-card.type-versos .post-content {
    text-align: center;
    padding: 20px 10px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(255,255,255,0));
    border-radius: 8px;
    margin: 10px 0;
    border-left: none; /* Quitar bordes si los hubiera */
}

.post-card.type-versos .post-text-content {
    font-family: 'Caveat', cursive, serif; /* Fuente manuscrita */
    font-size: 1.6em;
    color: var(--color-principal); /* Texto en tu color neón */
    line-height: 1.4;
    white-space: pre-line; /* Respetar saltos de línea de poemas */
}

/* --- MODO PROSA (Estilo Libro) --- */
.post-card.type-prosa .post-text-content {
    font-family: 'Merriweather', serif; /* Fuente de lectura seria */
    font-size: 1.05em;
    line-height: 1.7;
    color: #e0e0e0; /* Blanco suave */
    text-align: left;
}

/* Pequeño ajuste para que se carguen las fuentes en el Feed también */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;1,300&family=Caveat:wght@500&display=swap');
/* Estilo base de la tarjeta */
.post-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Lógica para VERSOS (Centrado y Manuscrita) */
.post-card.type-versos .post-text-content {
    text-align: center;
    font-style: italic;
    font-family: 'Georgia', serif; /* O una fuente manuscrita si la importas */
    white-space: pre-wrap; /* Respeta los saltos de línea del poema */
    color: #4a4a4a;
    line-height: 1.8;
}

/* Lógica para PROSA (Alineado izquierda) */
.post-card.type-prosa .post-text-content {
    text-align: left;
    font-family: sans-serif;
    line-height: 1.6;
    color: #ffffff;
}

/* Ajuste para que la imagen del perfil sea redonda */
.avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6c5ce7; /* Color de fondo por defecto */
    color: white;
    font-weight: bold;
}

/* =======================================================
   DISEÑO RESPONSIVO (Mobile First Adaptado)
   Pega esto al final de tu archivo CSS
   ======================================================= */

/* 1. AJUSTE GENERAL DEL CONTENEDOR PRINCIPAL */
/* Aseguramos que el contenido no se desborde */
#app-main-content {
    display: flex;       /* O grid, dependiendo de tu base */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    gap: 20px;           /* Espacio entre sidebar y feed */
    justify-content: center;
}

/* El Feed principal toma el espacio disponible */
#view-feed {
    flex: 1;
    max-width: 700px;    /* Que no sea eterno en pantallas gigantes */
    width: 100%;
}

/* La barra lateral (Sidebar) */
.sidebar {
    width: 280px;        /* Ancho fijo en PC */
    flex-shrink: 0;      /* Que no se encoja */
}

/* =======================================================
   MEDIA QUERY: PANTALLAS PEQUEÑAS (Móviles y Tablets)
   Esto se activa si la pantalla mide menos de 768px
   ======================================================= */
@media (max-width: 768px) {

    /* A. OCULTAR LA BARRA LATERAL */
    /* En celular no hay espacio para el perfil al lado.
       El usuario puede ir a su perfil tocando el icono del menú. */
    .sidebar {
        display: none; 
    }

    /* B. AJUSTAR EL CONTENEDOR */
    #app-main-content {
        padding: 10px;       /* Menos relleno en los bordes */
        display: block;      /* Quitamos el flex para que ocupe todo */
    }

    /* C. TRANSFORMACIÓN DE LA BARRA DE NAVEGACIÓN (Estilo App) */
    #main-nav-header {
        position: fixed;     /* Fijarlo a la pantalla */
        bottom: 0;           /* Abajo del todo */
        top: auto;           /* Anulamos cualquier 'top' anterior */
        left: 0;
        width: 100%;
        background: white;   /* O tu color de fondo (ej. #1a1a1a) */
        border-top: 1px solid #ddd; /* Una línea sutil arriba */
        z-index: 1000;       /* Que esté siempre encima de todo */
        padding: 10px 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* Sombrita elegante */
    }

    #main-navigation {
        display: flex;
        justify-content: space-around; /* Iconos distribuidos equitativamente */
        align-items: center;
        width: 100%;
    }

    /* D. AJUSTAR LOS ENLACES DEL MENÚ */
    .nav-link {
        font-size: 1.5rem;   /* Iconos más grandes para tocar con el dedo */
        padding: 5px;
        color: #555;         /* Color por defecto */
    }
    
    /* E. AJUSTE PARA QUE EL CONTENIDO NO QUEDE TAPADO POR EL MENÚ */
    /* Como el menú ahora flota abajo, necesitamos espacio al final de la página */
    body {
        padding-bottom: 70px; 
        padding-top: 0;      /* Si tenías padding arriba por el menú, quítalo */
    }

    /* F. BOTÓN "CREAR" DESTACADO (Opcional) */
    /* Hacemos que el botón de la pluma resalte más en el medio */
    #nav-create {
        background-color: var(--color-principal, #007bff); /* Usa tu color principal */
        color: white;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -25px; /* Efecto flotante hacia arriba */
        box-shadow: 0 4px 10px rgba(0,123,255,0.3);
        border: 2px solid white; /* Borde blanco para separar del fondo */
    }
    
    #nav-create i {
        font-size: 1.2rem;
    }

    /* G. TARJETAS DE POSTS */
    .post-card {
        border-radius: 0;    /* En móvil se ve moderno sin bordes redondeados excesivos */
        margin-bottom: 10px;
    }
}


/* AJUSTES DEL HEADER PARA INCLUIR LOGO */
#main-nav-header {
    display: flex;
    justify-content: space-between; /* Logo izquierda, Menú derecha */
    align-items: center;
    padding: 0 20px; /* Un poco de aire a los lados */
    
    /* Mantener tus estilos existentes de color/fondo aquí... */
    background-color: var(--color-tarjeta);
    height: 60px; /* Asegura una altura fija */
}

/* Estilo de la imagen del Logo */
.site-logo {
    height: 40px; /* Ajusta esto según el tamaño de tu header */
    width: auto;  /* Mantiene la proporción */
    display: block;
}

/* --- MÓVIL (Responsivo) --- */
@media (max-width: 1000px) {
    /* En celular, el header se va abajo.
       Generalmente NO queremos el logo ocupando espacio en la barra de abajo.
       Lo ocultamos o lo dejamos solo arriba. */
       
    .logo-container {
        display: none; /* Ocultar logo en la barra inferior del móvil */
    }
    
    #main-nav-header {
        justify-content: center; /* Centrar los iconos en móvil */
        padding: 10px 0;
    }
}
/* =======================================================
   ESTILOS DE TARJETA (POSTS) - ADAPTABLES
   ======================================================= */

/* 1. ESTILO POR DEFECTO (FUTURISTA / DARK) 
   Este es el diseño oscuro tipo Discord que te gusta */
.post-card {
    background-color: #202225; /* Fondo oscuro */
    border: 1px solid #2f3136;
    color: #dcddde;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* Títulos y texto en modo oscuro */
.post-card h3 {
    color: #ffffff; /* Blanco brillante */
    margin-bottom: 5px;
}

.post-text-content {
    color: #dcddde; /* Gris claro */
}

/* Hover en modo oscuro */
.post-card:hover {
    background-color: #292b2f;
    border-color: #40444b;
}

/* ------------------------------------------------------- */

/* 2. ESTILO PARA TEMA PROFESIONAL (CLARO / LIGHT)
   Esto sobrescribe lo anterior SOLO cuando activas el tema claro */

.theme-professional .post-card {
    background-color: #ffffff; /* Fondo Blanco */
    border: 1px solid #e0e0e0;
    color: #333333; /* Texto oscuro */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Títulos y texto en modo claro */
.theme-professional .post-card h3 {
    color: #000000; /* Negro puro */
}

.theme-professional .post-text-content {
    color: #4a4a4a; /* Gris oscuro lectura */
}

/* Hover en modo claro */
.theme-professional .post-card:hover {
    background-color: #f9f9f9; /* Blanco humo */
    border-color: #ccc;
}
/* ===========================================================
   CORRECCIÓN FINAL DE COLORES (Modo Profesional / Claro)
   =========================================================== */

/* 1. Fondo BLANCO y Borde Gris */
.theme-professional .post-card {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* 2. Título en NEGRO */
.theme-professional .post-card h3 {
    color: #1a1a1a !important; /* Negro solido */
}

/* 3. Texto del contenido en GRIS OSCURO (Para leer bien) */
.theme-professional .post-text-content {
    color: #333333 !important; 
}

/* 4. Fecha y Autor en Gris Medio */
.theme-professional .post-date, 
.theme-professional .post-author {
    color: #555555 !important;
}

/* 5. Efecto Hover (Un poquito más oscuro el fondo) */
.theme-professional .post-card:hover {
    background-color: #f9f9f9 !important;
    border-color: #ccc !important;
}