/* Variables para colores (Consistentes en ambas páginas) */
:root {
    --primary-text-color: #f0f0f0;
    /* Texto principal (claro) */
    --secondary-text-color: #ccc;
    /* Texto secundario (gris claro) */
    --background-color: #3a3a3a;
    /* Fondo principal */
    --component-bg: #2a2a2a;
    /* Fondo de componentes/tarjetas */
    --header-bg: #1e1e24;
    /* Fondo del encabezado oscuro */
    --login-button-bg: #c3a000;
    /* Dorado/Amarillo para el botón de iniciar sesión */
    --accent-color: #3f51b5;
    /* Azul de acento (para tabs activas/detalles) */
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    /* Sombra */

    /* Colores de las etiquetas de Noticias */
    --mobile-tag-color: #4CAF50;
    --videogame-tag-color: #2196F3;
    --tcg-tag-color: #9C27B0;

    /* Colores de los Tipos Pokémon */
    --type-normal: #A8A77A;
    --type-fire: #EE8130;
    --type-water: #6390F0;
    --type-electric: #F7D02C;
    --type-grass: #7AC74C;
    --type-ice: #96D9D6;
    --type-fighting: #C22E28;
    --type-poison: #A33EA1;
    --type-ground: #E2BF65;
    --type-flying: #A98FF3;
    --type-psychic: #F95587;
    --type-bug: #A6B91A;
    --type-rock: #B6A136;
    --type-ghost: #735797;
    --type-dragon: #6F35FC;
    --type-steel: #B7B7CE;
    --type-fairy: #D685AD;
    --type-dark: #705746;
    --type-unknown: #68A090;
    --type-shadow: #705898;
}

/* Estilos globales y de reseteo */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background-color);
    color: var(--primary-text-color);
    line-height: 1.6;
}

/* === 1. Encabezado (Header) y Navegación Principal === */
.header {
    background-color: var(--header-bg);
    padding: 15px 0;
    box-shadow: var(--shadow);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title-link {
    color: #FFDE00;
    /* Amarillo Pokémon clásico */
    text-shadow: 1px 1px 2px #3B4CCA;
    /* Sombra azul */
    text-decoration: none;
    font-size: 1.8em;
    font-weight: bold;
    transition: opacity 0.2s;
}

.site-title-link:hover {
    opacity: 0.9;
}

/* Barra de búsqueda */
.search-bar {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    padding: 5px 10px;
    margin: 0 20px;
    flex-grow: 1;
    max-width: 400px;
}

.search-bar input {
    background: none;
    border: none;
    outline: none;
    color: var(--primary-text-color);
    padding: 5px 0;
    width: 100%;
    font-size: 0.95rem;
}

.search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.search-bar i {
    color: rgba(255, 255, 255, 0.8);
    margin-left: 10px;
}

.login-button {
    background-color: var(--login-button-bg);
    border: none;
    color: var(--header-bg);
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    transition: background-color 0.3s, transform 0.2s;
}

.login-button:hover {
    background-color: #FFDE00;
    transform: translateY(-2px);
}

/* === 2. Barra de navegación Secundaria (Tabs) === */
.secondary-nav-bar {
    width: 100%;
    background-color: var(--header-bg);
}

.nav-tabs-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    margin-right: 1px;
    text-decoration: none;
    color: #fff;
    background-color: transparent;
    border: none;
    transition: background-color 0.2s, color 0.2s;
}

.nav-item i {
    margin-right: 8px;
    font-size: 1.1em;
}

.nav-item.active {
    background-color: var(--background-color);
    color: #fff;
}

.nav-item:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.1);
    color: #fff;
}

/* === 3. Contenido Principal (General) === */
.content-container {
    max-width: none;
    /* Ancho completo para el borde exterior */
    margin: 30px auto;
    padding: 0;
}

.main-content-area {
    max-width: 1200px;
    /* Ancho limitado para el contenido interno */
    margin: 0 auto;
    padding: 0 20px;
}

/* Encabezado de Sección */
.news-header,
.pokedex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-top: 5px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.news-header h2,
.pokedex-header h2 {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--primary-text-color);
}

/* === 4. Grid de Noticias (index.html: Diseño en Fila/Columna) === */
.news-grid {
    display: flex;
    flex-direction: column;
    /* Apila las noticias verticalmente */
    gap: 20px;
    width: 100%;
}

.news-card-link {
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    /* Quita el subrayado */
    color: inherit;
    display: block;
    transition: transform 0.3s, box-shadow 0.3s;
}

.news-card-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.news-card {
    background-color: var(--component-bg);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    /* La clave para Imagen a la Izquierda / Texto a la Derecha */
    align-items: flex-start;
    min-height: 180px;
}

.card-image-placeholder {
    width: 578px;
    height: 327px;
    flex-shrink: 0;
    background-color: #333;
    display: flex;
    color: #555;
}

.card-content {
    flex-grow: 1;
    padding: 15px 25px;
}

.card-content h3 {
    font-size: 1.25rem;
    margin: 5px 0 10px 0;
    font-weight: 700;
    color: var(--primary-text-color);
}

.card-content p {
    font-size: 0.95rem;
    color: var(--secondary-text-color);
}

/* Estilos de Etiquetas de Noticias */
.tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--header-bg);
}

.mobile-tag {
    background-color: var(--mobile-tag-color);
}

.videogame-tag {
    background-color: var(--videogame-tag-color);
}

.tcg-tag {
    background-color: var(--tcg-tag-color);
}

/* === 5. Estilos de la Noticia Completa (noticia-completa.html) === */

.news-detail-section {
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.article-content-box {
    background-color: #333333;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
}

/* Botón de Volver (Reutiliza poke-button) */
.back-button {
    margin-bottom: 25px;
    display: inline-flex;
}

/* Contenedores de contenido inyectado por JS */
#news-image-area img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 8px;
}

#news-title {
    font-size: 2.2em;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
    color: #FFDE00;
}

.news-meta {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 0.9em;
    color: #bbb;
}

#news-text-content p {
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: justify;
}

#news-text-content h3 {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
    margin-top: 30px;
}

#news-text-content ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 0;
}


/* === 6. Grid de Pokémon (pokedex.html) === */
.pokemon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pokemon-card {
    background-color: var(--component-bg);
    border: 1px solid #444;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
    text-decoration: none;
    padding: 15px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.pokemon-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.pokedex-number {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 1rem;
    font-weight: 700;
    color: #666;
}

.pokemon-image img {
    width: 100%;
    max-width: 120px;
    height: auto;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
}

.pokemon-card h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 5px 0 10px 0;
    color: var(--primary-text-color);
}

/* Estilo de la Etiqueta de Tipo */
.type-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--header-bg);
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Colores de Tipo */
.electric-tag {
    background-color: var(--electric-color);
}

.fire-tag {
    background-color: var(--fire-color);
}

.water-tag {
    background-color: var(--water-color);
}

.grass-tag {
    background-color: var(--grass-color);
}

.psychic-tag {
    background-color: var(--psychic-color);
}

.dragon-tag {
    background-color: var(--dragon-color);
}

.normal-tag {
    background-color: var(--normal-color);
}

.fighting-tag {
    background-color: var(--fighting-color);
}

.flying-tag {
    background-color: var(--flying-color);
}

.poison-tag {
    background-color: var(--poison-color);
}

.ground-tag {
    background-color: var(--ground-color);
}

.rock-tag {
    background-color: var(--rock-color);
}

.bug-tag {
    background-color: var(--bug-color);
}

.ghost-tag {
    background-color: var(--ghost-color);
}

.steel-tag {
    background-color: var(--steel-color);
}

.ice-tag {
    background-color: var(--ice-color);
}

.fairy-tag {
    background-color: var(--fairy-color);
}

.dark-tag {
    background-color: var(--dark-color);
}


/* === 7. Controles y Filtros (Usados en pokedex.html) === */

.filter-group,
.filter {
    /* .filter ha sido absorbido por .filter-toggle / .poke-button */
    display: flex;
    gap: 15px;
}

/* Contenedor del botón y el menú (Filtro Desplegable) */
.filter-dropdown-container {
    position: relative;
    display: inline-block;
}

/* Botones de función general (Usado en Filtro, Paginación y Botón Volver) */
.poke-button,
.filter-toggle {
    text-decoration: none;
    background-color: #6390f0;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 150px;
}

.poke-button:hover,
.filter-toggle:hover {
    background-color: #537ddb;
}

.poke-button:active {
    transform: translateY(1px);
}

.pagination-controls {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 40px 0;
}

.pagination-controls .poke-button:disabled {
    background-color: #555 !important;
    color: #999;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

/* Menú de Filtro Desplegable */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--component-bg);
    border: 1px solid #444;
    border-radius: 5px;
    box-shadow: var(--shadow);
    z-index: 10;
    min-width: 220px;
    margin-top: 5px;
    padding: 5px 0;
}

.dropdown-menu.hidden {
    display: none;
}

.dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
    color: var(--primary-text-color);
    position: relative;
}

.dropdown-item:hover {
    background-color: #383838;
}

.dropdown-item i {
    font-size: 0.9em;
    color: var(--secondary-text-color);
}

.submenu {
    position: absolute;
    top: 0;
    right: 100%;
    background-color: var(--component-bg);
    border: 1px solid #444;
    border-radius: 5px;
    box-shadow: var(--shadow);
    z-index: 20;
    min-width: 180px;
    padding: 5px 0;
    display: none;
}

.dropdown-item.has-submenu:hover>.submenu {
    display: block;
}

.submenu-item {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: var(--secondary-text-color);
    transition: background-color 0.2s;
    font-size: 0.95rem;
}

.submenu-item:hover {
    background-color: var(--accent-color);
    color: var(--primary-text-color);
}

/* === 8. Estilos de la página de Detalles de Pokémon (pokemon-detalle.html) === */

.pokemon-detail-section {
    padding: 20px;
    background-color: var(--component-bg);
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-top: 20px;
}

/* Botón Shiny */
.shiny-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background-color: #f0e68c;
    color: #222;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-weight: bold;
    cursor: pointer;
}

/* GRID PRINCIPAL (IMAGEN, INFO Y STATS) */
.main-detail-grid {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.detail-overview {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35%;
    min-width: 300px;
    background-color: #222;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    /* para el botón shiny */
}

.detail-info-stats-container {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

.detail-info-box,
.detail-stats {
    background-color: #222;
    padding: 20px;
    border-radius: 8px;
}

.detail-stats {
    grid-column: 1 / -1;
    /* Ocupa toda la fila inferior */
}

.detail-image-container img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.detail-info-box h3,
.detail-stats h3 {
    color: var(--accent-color);
    margin-top: 15px;
    border-bottom: 1px dashed #444;
    padding-bottom: 5px;
}

.ability-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.ability-list li {
    color: var(--secondary-text-color);
    margin-bottom: 5px;
}

/* ESTADÍSTICAS (STAT BAR) */
.stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--secondary-text-color);
}

.stat-name {
    width: 100px;
    font-weight: bold;
}

.stat-value {
    width: 40px;
    text-align: right;
    color: var(--primary-text-color);
}

.stat-bar {
    height: 10px;
    background-color: var(--accent-color);
    border-radius: 5px;
    transition: width 0.5s ease-out;
    max-width: 100%;
}


/* SECCIÓN DE MOVIMIENTOS (TABS) */
.moves-tabs {
    display: flex;
    gap: 5px;
    border-bottom: 2px solid #555;
    margin-bottom: 20px;
}

.tab-button {
    background: #444;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    color: var(--secondary-text-color);
    font-weight: bold;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.tab-button.active {
    background: var(--accent-color);
    color: white;
    border-bottom: 2px solid var(--accent-color);
}

.tab-pane.hidden {
    display: none;
}

.moves-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.moves-table th,
.moves-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #444;
    color: var(--secondary-text-color);
}

.moves-table th {
    background-color: #333;
    color: var(--primary-text-color);
}

/* EVOLUCIONES Y FORMAS */
.evolution-chain-box {
    overflow-x: auto;
}

.evolution-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px;
    min-width: max-content;
}

.evolution-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: white;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.evolution-stage h4 {
    margin: 5px 0 0 0;
    color: var(--primary-text-color, #f0f0f0);
}

.evolution-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    text-align: center;
}

.evolution-line i {
    font-size: 1.5rem;
    color: #a0aec0;
}

.evolution-condition {
    font-size: 0.8rem;
    color: #a0aec0;
}

.current-pokemon {
    border: 3px solid var(--accent-color);
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.5);
}

.evolution-stage img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 5px;
}

/* Para Eevee (Evoluciones Ramificadas) */
.multi-evolution-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 15px;
    align-items: center;
    height: 100%;
}

.multi-evolution-wrapper>.evolution-line {
    grid-column: 1;
}

.multi-evolution-wrapper>.evolution-stage {
    grid-column: 2;
}

/* FORMAS */
.forms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
    padding: 10px;
}

.form-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    text-decoration: none;
    color: var(--primary-text-color, #f0f0f0);
    transition: transform 0.2s;
}

/* Nuevo estilo: Limita el tamaño de la imagen dentro de la tarjeta de forma */
.form-card img {
    max-width: 80px;
    /* Tamaño máximo deseado para la imagen (ajusta según necesites) */
    height: auto;
    object-fit: contain;
    /* Reducir el margen superior e inferior si la imagen está muy separada */
    margin: 5px 0;
}

.form-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-color);
}

.rarity-tag {
    display: inline-block;
    padding: 2px 6px;
    margin-bottom: 5px;
    font-size: 0.75em;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    color: white;
}

.legendary-tag {
    background-color: #ffaa00;
}

.mythical-tag {
    background-color: #6a1b9a;
}


/* === 9. Pie de página (Footer) === */

.main-footer {
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 30px 20px;
    box-sizing: border-box;
    margin-top: 40px;
    font-size: 0.9em;
}

.footer-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-info {
    flex: 1;
    min-width: 250px;
}

.footer-logo {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.description {
    line-height: 1.6;
    opacity: 0.8;
}

.footer-meta {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.disclaimer {
    font-size: 0.8em;
    opacity: 0.6;
    margin-top: 15px;
}


/* === 10. Media Queries (Responsive) === */

@media (max-width: 1000px) {
    .pokemon-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .main-detail-grid {
        flex-direction: column;
    }

    .detail-overview {
        width: 100%;
        min-width: auto;
    }

    .detail-info-stats-container {
        grid-template-columns: 1fr;
    }

    .footer-content-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .footer-meta {
        width: 100%;
    }

    .filter-dropdown-container {
        width: 100%;
        text-align: right;
    }

    .filter-toggle {
        width: 100%;
    }
}

@media (max-width: 600px) {

    /* Noticias */
    .news-card {
        flex-direction: column;
        min-height: auto;
    }

    .card-image-placeholder {
        width: 100%;
        height: auto;
        min-height: 150px;
    }

    .news-detail-section {
        padding: 10px;
    }

    /* Pokédex */
    .pokemon-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-header,
    .pokedex-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-group {
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .pokemon-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 11. Estilos de Comentarios --- */

#comments-section {
    /* El max-width está bien para centrar, pero puede ser el culpable del espacio vacío */
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    /* Asegúrate de que no haya propiedades flex o grid aquí que rompan el apilamiento */
    display: block;
    /* Aseguramos el comportamiento normal de bloque */
}

.comments-title {
    font-size: 1.8rem;
    color: var(--primary-text-color);
    margin-bottom: 25px;
    border-bottom: 2px solid var(--accent-color);
    /* Línea de acento */
    padding-bottom: 5px;
}

/* Formulario de Comentario Deshabilitado */
.comment-form-disabled {
    position: relative;
    /* ¡CLAVE! Permite que el overlay se posicione correctamente */
    background-color: var(--component-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    margin-bottom: 30px;
    opacity: 0.6;
    /* Quitamos el 'pointer-events: none;' en el contenedor principal para que el overlay funcione */
}

.comment-form-disabled textarea {
    /* La caja de texto debe seguir la estructura normal de la página */
    width: 100%;
    min-height: 100px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #333;
    color: var(--secondary-text-color);
    resize: vertical;
    pointer-events: none;
    /* Esto sí lo mantiene inactivo para que no se pueda escribir */
}

/* Mensaje de Capa Deshabilitada */
.disabled-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Rellena completamente el formulario */
    background-color: rgba(0, 0, 0, 0.7);
    color: #FFDE00;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    z-index: 10;
    cursor: not-allowed;
    /* Centramos el texto dentro del overlay */
    text-align: center;
}

.comment-form-disabled .poke-button {
    /* Asegura que el botón se muestre como un elemento de bloque normal */
    display: block;
}

/* Estilos para los comentarios individuales */
.comment-list {
    display: flex;
    flex-direction: column;
    /* Apila verticalmente */
    gap: 15px;
    width: 100%;
    /* Ocupa todo el ancho disponible */
}

/* El comentario individual mantiene sus estilos de tarjeta */
.comment-card {
    background-color: #333333;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid var(--accent-color);
}

.comment-meta {
    font-size: 0.85rem;
    margin-bottom: 5px;
    color: #aaa;
}

.comment-author {
    font-weight: bold;
    color: var(--primary-text-color);
}

.comment-text {
    font-size: 0.95rem;
    color: var(--secondary-text-color);
}

/* --- Nuevo Estilo: Mensaje de Acceso Denegado --- */

.comment-access-denied {
    background-color: var(--component-bg);
    border: 2px solid var(--accent-color);
    /* Borde de acento */
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.comment-access-denied i {
    font-size: 2.5rem;
    color: #FFDE00;
    /* Usamos el amarillo de Pokémon para llamar la atención */
    margin-bottom: 15px;
}

.comment-access-denied p {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-text-color);
    margin-bottom: 20px;
}

.login-prompt-button {
    /* Reutiliza el estilo del poke-button, asegurando el tamaño */
    min-width: 200px;
}

/* Aseguramos que la lista de comentarios siga la corrección anterior */
.comment-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* CSS Específico de la página de Login/Registro */
.auth-container {
    max-width: 450px;
    margin: 50px auto;
    background-color: var(--component-bg);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 20px;
}

.auth-tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 25px;
    border-bottom: 2px solid #333;
}

.auth-tab-button {
    background: none;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    color: var(--secondary-text-color);
    font-size: 1.1rem;
    font-weight: 700;
    transition: color 0.3s, border-bottom 0.3s;
    flex-grow: 1;
}

.auth-tab-button.active {
    color: var(--primary-text-color);
    border-bottom: 3px solid var(--accent-color);
}

.auth-form input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #333;
    color: var(--primary-text-color);
    font-size: 1rem;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.form-group-full {
    margin-bottom: 15px;
}

.auth-submit-button {
    /* Usamos el estilo del botón de login para el acento principal */
    background-color: var(--login-button-bg);
    color: var(--header-bg);
    width: 100%;
    padding: 12px 0;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.auth-submit-button:hover {
    background-color: #FFDE00;
    transform: translateY(-1px);
}

.toggle-message {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9rem;
    color: var(--secondary-text-color);
}

.toggle-message a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: bold;
}

/* Ocultar / Mostrar formularios */
.form-pane.hidden {
    display: none;
}

a {
    text-decoration: none;
}

/* Ejemplo de CSS para la nueva sección de descripción */
.description-section {
    margin: 20px 0;
    padding: 15px 20px;
    background-color: #333;
    /* Fondo oscuro */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.description-section h2 {
    color: #ffd700;
    /* Color que contraste (ej. amarillo oro) */
    margin-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

.pokemon-description-text {
    font-size: 1.1em;
    line-height: 1.6;
    color: #fff;
    text-align: justify;
}

/* === ESTILOS DEL MENÚ DE USUARIO === */
.user-menu-container {
    position: relative;
    display: inline-block;
}

.user-button {
    background-color: transparent;
    border: 2px solid #ccc;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    transition: all 0.3s;
}

.user-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

/* El desplegable */
.user-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    /* Se pega justo debajo del botón */
    background-color: #2a2a2a;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    z-index: 100;
    border-radius: 8px;
    overflow: hidden;
    /* Quitamos el margen que causaba el hueco */
    margin-top: 10px;
    border: 1px solid #444;
}

/* PUENTE INVISIBLE: Esto rellena el hueco entre el botón y el menú */
.user-dropdown-content::before {
    content: "";
    position: absolute;
    top: -15px;
    /* Cubre el espacio de separación */
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

/* ✅ AÑADIR ESTO */
/* Clase que añadiremos con JS para mostrar el menú */
.user-dropdown-content.show {
    display: block;
}

/* Opcional: Cambiar el cursor del botón para que se note que es clicable */
.user-button {
    user-select: none;
    /* Evita que se seleccione el texto al hacer clic rápido */
}

.user-dropdown-content a,
.user-dropdown-content button {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.user-dropdown-content a:hover,
.user-dropdown-content button:hover {
    background-color: #444;
    color: #FFDE00;
}

/* Botón especial de Admin en el Header */
.admin-action-button {
    background-color: #d32f2f;
    /* Rojo */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    margin-right: 15px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.3s;
}

.admin-action-button:hover {
    background-color: #b71c1c;
}

/* Buscador Noticias Dropdown */
.search-container {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 0 0 5px 5px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    /* Oculto por defecto */
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid #333;
    transition: background 0.2s;
}

.search-result-item:hover {
    background-color: #444;
}

.search-result-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
}

/* Estilos para validación de formularios */
.input-error {
    border: 1px solid #d32f2f !important;
    /* Borde rojo forzado */
    background-color: rgba(211, 47, 47, 0.1) !important;
    /* Fondo rojizo suave */
}

.error-text {
    color: #d32f2f;
    font-size: 0.85em;
    margin-top: 5px;
    display: block;
    font-weight: bold;
}

/* Contenedor para el icono del ojo */
.password-wrapper {
    position: relative;
    width: 100%;
}

.password-toggle-icon {
    position: absolute;
    right: 10px;
    cursor: pointer;
    color: #888;
}

.password-toggle-icon:hover {
    color: #FFDE00;
}

/* Layout del Perfil con Sidebar */
.profile-wrapper {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    align-items: flex-start;
}

/* Sidebar */
.profile-sidebar {
    flex: 1;
    min-width: 250px;
    background-color: #222;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li a {
    display: block;
    padding: 15px 20px;
    color: #ccc;
    text-decoration: none;
    border-bottom: 1px solid #333;
    transition: background 0.2s, color 0.2s;
}

.sidebar-menu li a:hover {
    background-color: #333;
    color: white;
}

.sidebar-menu li a.active {
    background-color: #FFDE00;
    color: #222;
    font-weight: bold;
}

/* Contenido Principal */
.profile-content {
    flex: 3;
    background-color: #222;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #333;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .profile-wrapper {
        flex-direction: column;
    }

    .profile-sidebar,
    .profile-content {
        width: 100%;
    }
}

/* =========================================
   NUEVO LAYOUT DE DETALLES POKÉMON
   ========================================= */

/* Contenedor principal que pone la imagen a la izquierda y el resto a la derecha */
.details-layout-container {
    display: flex;
    gap: 25px;
    /* Espacio entre la imagen y las tarjetas de info */
    align-items: flex-start;
    /* Alinea arriba */
}

/* Columna Izquierda (Imagen) */
.details-left-col {
    flex: 1;
    /* Toma 1 parte del espacio */
    min-width: 300px;
    /* Que no se haga muy pequeña */
}

/* Columna Derecha (Info + Stats) */
.details-right-col {
    flex: 1.5;
    /* Toma 1.5 partes del espacio (más ancha que la imagen) */
    display: flex;
    flex-direction: column;
    /* Apila las tarjetas verticalmente */
    gap: 20px;
    /* Espacio entre la tarjeta de Info y la de Stats */
}

/* Aseguramos que las tarjetas ocupen el ancho disponible en su columna */
.pokemon-detail-card {
    width: 100%;
    /* Tus estilos actuales de background, border-radius, etc. se aplican aquí */
}


/* =========================================
   NUEVAS BARRAS DE ESTADÍSTICAS (Verdes)
   ========================================= */

.stats-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

.stat-row {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

/* Nombre de la estadística (HP, Attack...) */
.stat-name {
    flex: 0 0 100px;
    /* Ancho fijo para alinear */
    color: #aaa;
    font-weight: bold;
}

/* Valor numérico (39, 52...) */
.stat-value {
    flex: 0 0 40px;
    text-align: right;
    margin-right: 15px;
    font-weight: bold;
    color: white;
}

/* EL FONDO NEGRO DE LA BARRA */
.stat-bar-bg {
    flex: 1;
    /* Ocupa el resto del espacio horizontal */
    height: 10px;
    /* Altura de la barra */
    background-color: #111;
    /* Color negro de fondo */
    border-radius: 10px;
    /* Bordes redondeados */
    overflow: hidden;
    /* Para que el relleno no se salga de las esquinas redondeadas */
    border: 1px solid #333;
    /* Un borde sutil */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    /* Sombra interna para profundidad */
}

/* EL RELLENO VERDE DE LA BARRA */
.stat-bar-fill {
    height: 100%;
    background: linear-gradient(to right, #4CAF50, #8BC34A);
    /* Degradado verde */
    border-radius: 10px;
    transition: width 0.5s ease-out;
    /* Animación suave al cargar */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.7);
    /* Un pequeño brillo verde */
}

/* Responsive: En móviles, que se ponga todo en una sola columna */
@media (max-width: 768px) {
    .details-layout-container {
        flex-direction: column;
    }

    .details-left-col,
    .details-right-col {
        width: 100%;
    }
}

/* === PANEL DE FILTROS AVANZADO === */

.filter-panel {
    position: absolute;
    top: 50px; /* Justo debajo del botón */
    right: 0;
    width: 320px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    z-index: 1000;
    padding: 0;
    overflow: hidden;
}

.filter-panel.hidden {
    display: none;
}

/* Cabecera del panel */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #444;
    background-color: #222;
}

.filter-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #FFDE00;
}

.close-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 1.2rem;
}

.close-btn:hover { color: white; }

/* Secciones Desplegables (Acordeón) */
.filter-section {
    border-bottom: 1px solid #333;
}

.filter-section-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    color: #f0f0f0;
    transition: background 0.2s;
}

.filter-section-header:hover {
    background-color: #333;
}

.filter-options {
    padding: 15px 20px;
    background-color: #252525;
    border-top: 1px solid #333;
}

.filter-options.hidden {
    display: none;
}

/* Grilla de Checkboxes (para Tipos) */
.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #ccc;
}

.filter-option:hover { color: white; }

.filter-option input[type="radio"] {
    accent-color: #FFDE00; /* Color del puntito seleccionado */
    cursor: pointer;
}

.full-width {
    margin-bottom: 10px;
}

/* Pie del panel */
.filter-footer {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #222;
}

.reset-link {
    color: #aaa;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

.reset-link:hover { color: #d32f2f; }

.apply-btn {
    background-color: #FFDE00;
    color: #000;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.1s;
}

.apply-btn:hover {
    background-color: #ffeb3b;
    transform: scale(1.05);
}

/* Panel Showdown */
.showdown-panel {
    position: absolute;
    width: 300px;
    max-height: 400px;
    background-color: #222;
    border: 1px solid #FFDE00; /* Borde dorado */
    border-radius: 8px;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.8);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.showdown-panel.hidden {
    display: none;
}

.panel-header {
    background: #333;
    padding: 8px 15px;
    border-bottom: 1px solid #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFDE00;
    font-weight: bold;
    font-size: 0.9em;
}

.panel-body {
    flex-grow: 1;
    overflow-y: auto; /* Scroll si hay muchas opciones */
    max-height: 250px;
}

.panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.panel-list li {
    padding: 8px 15px;
    cursor: pointer;
    border-bottom: 1px solid #333;
    color: #ddd;
    font-size: 0.9em;
    transition: background 0.1s;
}

.panel-list li:hover {
    background-color: #3f51b5; /* Azul al pasar ratón */
    color: white;
}

.panel-description {
    padding: 10px 15px;
    background: #1a1a1a;
    border-top: 1px solid #444;
    min-height: 60px;
    font-size: 0.85em;
    color: #ccc;
    line-height: 1.4;
}

/* Estilos para el Editor de EVs */
.ev-container {
    background: #1a1a1a;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    border: 1px solid #444;
}

.ev-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    font-size: 0.85em;
}

.ev-label {
    width: 40px;
    color: #aaa;
    font-weight: bold;
    text-align: right;
}

.ev-slider {
    flex-grow: 1;
    height: 6px;
    -webkit-appearance: none;
    background: #444;
    border-radius: 3px;
    outline: none;
}

.ev-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FFDE00;
    cursor: pointer;
}

.ev-input {
    width: 45px;
    background: #333;
    border: 1px solid #555;
    color: white;
    text-align: center;
    border-radius: 3px;
    padding: 2px;
    font-size: 1em;
}

.total-evs {
    text-align: right;
    font-size: 0.8em;
    color: #888;
    margin-top: 5px;
    border-top: 1px solid #333;
    padding-top: 5px;
}
.total-evs.error { color: #d32f2f; font-weight: bold; }

/* TOOLTIP FLOTANTE */
        #move-tooltip {
            position: absolute;
            background: rgba(20, 20, 20, 0.95);
            border: 1px solid #FFDE00;
            border-radius: 8px;
            padding: 15px;
            width: 250px;
            pointer-events: none; /* Para que el ratón no se choque con él */
            z-index: 10000;
            display: none; /* Oculto por defecto */
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
            backdrop-filter: blur(5px);
        }

        .tooltip-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #444;
            padding-bottom: 5px;
            margin-bottom: 8px;
        }

        .tooltip-title { color: #FFDE00; font-weight: bold; font-size: 1.1em; }
        .tooltip-cat { font-size: 0.8em; padding: 2px 6px; border-radius: 4px; color: white; text-transform: uppercase; font-weight: bold;}
        
        /* Colores de Categoría */
        .cat-physical { background: #d32f2f; }
        .cat-special { background: #1976d2; }
        .cat-status { background: #757575; }

        .tooltip-stats { display: flex; gap: 10px; font-size: 0.9em; color: #ccc; margin-bottom: 8px; }
        .tooltip-desc { font-size: 0.85em; color: #ddd; line-height: 1.4; font-style: italic; }

        /* Efecto Hover en el Badge del Movimiento */
        .move-badge {
            cursor: help;
            transition: background-color 0.3s, transform 0.2s, border-color 0.3s;
            position: relative;
        }
        
        /* Animación de carga */
        .loading-dots:after {
            content: '.';
            animation: dots 1.5s steps(5, end) infinite;
        }
        @keyframes dots { 0%, 20% { content: '.'; } 40% { content: '..'; } 60% { content: '...'; } 80%, 100% { content: ''; } }

        /* ... (Tus estilos del modal anteriores) ... */

/* Estilos para el input de confirmación */
.modal-input {
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    border: 2px solid #555;
    background: #333;
    color: white;
    border-radius: 5px;
    text-align: center;
    font-size: 1.1em;
    letter-spacing: 1px;
}

.modal-input:focus {
    border-color: #FFDE00; /* Amarillo Pokémon */
    outline: none;
}

/* Estado deshabilitado del botón */
.btn-confirmar-borrar:disabled {
    background-color: #555;
    color: #999;
    cursor: not-allowed;
    opacity: 0.7;
}

/* === ESTILOS DEL MODAL DE BORRADO (VERSIÓN MEJORADA) === */

/* Fondo oscuro desenfocado */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Más oscuro para mayor contraste */
    z-index: 2000;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(8px); /* Efecto de desenfoque más potente */
    opacity: 0; visibility: hidden;
    transition: all 0.3s ease-in-out;
}
.modal-overlay.show { opacity: 1; visibility: visible; }

/* La caja del modal */
.modal-box {
    background: #222; /* Un gris casi negro, muy elegante */
    padding: 40px; /* Mucho espacio interior */
    border-radius: 20px; /* Bordes muy redondeados */
    text-align: center;
    max-width: 480px; width: 90%;
    box-shadow: 0 25px 50px rgba(0,0,0,0.7); /* Sombra profunda */
    border: 1px solid #333; /* Borde sutil */
    color: #eee;
    /* Animación de entrada tipo "pop" con rebote */
    transform: scale(0.9); opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-overlay.show .modal-box { transform: scale(1); opacity: 1; }

/* Icono superior */
.modal-box i.fa-exclamation-triangle {
    font-size: 4.5rem; color: #d32f2f; margin-bottom: 25px;
    filter: drop-shadow(0 0 15px rgba(211, 47, 47, 0.6)); /* Brillo rojo */
}

/* Título y textos */
.modal-box h3 {
    color: #FFDE00; font-size: 2rem; margin-bottom: 15px;
    text-transform: uppercase; letter-spacing: 2px; font-weight: 800;
}
.modal-box p {
    color: #bbb; margin-bottom: 35px; line-height: 1.6; font-size: 1.1rem;
}
.modal-box p strong { color: #FFDE00; padding: 2px 5px; border-radius: 4px; background: rgba(255, 222, 0, 0.1); }

/* INPUT DE CONFIRMACIÓN (La joya de la corona) */
.modal-input {
    width: 100%; padding: 15px; margin-bottom: 35px;
    border: 2px solid #444; /* Borde sutil inicial */
    background: #333; color: #fff;
    border-radius: 12px; text-align: center;
    font-size: 1.4em; letter-spacing: 3px; font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3); /* Sombra interior para profundidad */
}
.modal-input::placeholder { color: #666; font-weight: normal; letter-spacing: 1px; font-size: 0.9em;}

/* Efecto al hacer clic en el input (Foco) */
.modal-input:focus {
    border-color: #FFDE00; background: #2a2a2a; outline: none;
    box-shadow: 0 0 20px rgba(255, 222, 0, 0.3); /* Resplandor amarillo */
}
/* Clase para cuando la palabra es correcta (se añade con JS) */
.modal-input.valido {
    border-color: #4CAF50 !important;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.4) !important; /* Resplandor verde */
}

/* BOTONES */
.modal-buttons { display: flex; justify-content: center; gap: 20px; }
.modal-buttons button {
    padding: 12px 28px; border-radius: 10px; font-weight: 700;
    font-size: 1rem; letter-spacing: 0.5px; text-transform: uppercase;
    transition: all 0.2s; cursor: pointer;
}

/* Botón Cancelar */
.btn-cancelar {
    border: 2px solid #555; background: transparent; color: #ccc;
}
.btn-cancelar:hover { background: #444; color: white; border-color: #777; }

/* Botón Eliminar */
.btn-confirmar-borrar {
    border: none; background: #d32f2f; color: white;
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.4);
}
.btn-confirmar-borrar:hover:not(:disabled) {
    background: #ff1f1f; box-shadow: 0 8px 25px rgba(255, 31, 31, 0.6);
    transform: translateY(-3px); /* Se levanta un poco */
}
/* Botón Eliminar Deshabilitado */
.btn-confirmar-borrar:disabled {
    background-color: #444; color: #888; cursor: not-allowed;
    box-shadow: none; opacity: 0.8;
}

/* === ESTILOS GESTIÓN DE USUARIOS (MODERNO) === */

/* Contenedor de búsqueda */
.search-container form {
    background: #333;
    padding: 10px;
    border-radius: 10px;
    display: inline-flex;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 1px solid #444;
}

.search-container input {
    background: #222;
    border: 1px solid #555;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s;
}

.search-container input:focus {
    border-color: #FFDE00;
}

/* TABLA MODERNA */
.admin-table-container {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border: 1px solid #444;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #2a2a2a;
    color: #eee;
    font-size: 0.95rem;
}

.admin-table thead {
    background: #1a1a1a;
    border-bottom: 2px solid #FFDE00; /* Línea amarilla pokémon */
}

.admin-table th {
    padding: 15px;
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #FFDE00;
}

.admin-table th a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.admin-table td {
    padding: 15px;
    border-bottom: 1px solid #444;
    vertical-align: middle;
}

.admin-table tbody tr:hover {
    background-color: #333; /* Efecto hover */
    transition: background 0.2s;
}

/* Foto de perfil pequeña en la tabla */
.table-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #555;
    vertical-align: middle;
    margin-right: 10px;
}

/* ETIQUETAS DE ROL (Badges) */
.role-badge {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
}

.role-user {
    background-color: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
    border: 1px solid #4CAF50;
}

.role-admin {
    background-color: rgba(255, 222, 0, 0.2);
    color: #FFDE00;
    border: 1px solid #FFDE00;
    box-shadow: 0 0 10px rgba(255, 222, 0, 0.2);
}

/* Botones de acción pequeños */
.btn-sm {
    padding: 5px 10px;
    font-size: 0.8em;
    margin-right: 5px;
}

/* Ajuste específico para RESTABLECER (restablecer.html) */
.password-toggle-icon-restablecer {
    right: 10px;
    top: 90%;
    transform: translateY(-80%);
    cursor: pointer;
    color: #888;/* Un poco más separado del borde */
}

/* ... En styles.css ... */

/* Estilos para el cuerpo del texto de la noticia */
#news-text-content {
    /* Estas líneas arreglan el desbordamiento */
    overflow-wrap: break-word;  /* Estándar moderno */
    word-wrap: break-word;      /* Compatibilidad antigua */
    word-break: break-word;     /* Rompe solo si es necesario */
    
    /* Tu estilo existente (si lo tenías) */
    color: #f1f1f1;
}

#news-text-content p {
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: justify;
    
    /* También puedes añadirlo aquí por seguridad */
    overflow-wrap: break-word;
}


/* =========================================
   OPTIMIZACIÓN MÓVIL (HEADER Y GENERAL)
   ========================================= */

@media (max-width: 768px) {
    /* 1. Header apilado */
    .header-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding-bottom: 10px;
    }

    /* 2. Buscador a ancho completo */
    .search-bar {
        width: 100%;
        margin: 10px 0;
        max-width: none;
    }

    /* 3. Controles de usuario centrados */
    .header-container > div:last-child {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* 4. Menú de navegación (scroll horizontal si no cabe) */
    .nav-tabs-wrapper {
        justify-content: flex-start;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
        /* Ocultar barra de scroll fea */
        scrollbar-width: none; 
    }
    .nav-tabs-wrapper::-webkit-scrollbar {
        display: none;
    }
    .nav-item {
        padding: 10px 15px;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    /* 5. Ajustes generales de contenedor */
    .content-container {
        margin: 15px auto;
    }
    .main-content-area {
        padding: 0 15px;
    }
}