:root { --pk-red: #e74c3c; --pk-dark: #2c3e50; --gold: #f1c40f; }

        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #edeff1; margin: 0; padding: 10px; }



        /* Buscador */

        .search-wrapper { position: relative; max-width: 600px; margin: 20px auto; z-index: 500; }

        .search-bar { display: flex; background: white; border-radius: 30px; padding: 5px 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

        .search-bar input { border: none; padding: 12px; flex-grow: 1; outline: none; font-size: 16px; border-radius: 30px; }

        .search-bar button { background: none; border: none; cursor: pointer; color: #ccc; }

        .search-results-dropdown { position: absolute; top: 105%; left: 0; right: 0; background: white; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); max-height: 350px; overflow-y: auto; display: none; }

        /* Mejora el scrollbar de la lista para que no sea el de Windows feo */
.search-results-dropdown::-webkit-scrollbar {
    width: 8px;
}
.search-results-dropdown::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* Evita que los nombres largos de los Pokémon se rompan en el buscador */
.res-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.res-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

        .result-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background 0.2s ease, border-left 0.2s ease;
            border-left: 4px solid transparent; }

            .result-item:hover, 
.result-item.selected {
    background-color: #f8f9fa;
    border-left: 4px solid #3498db; /* Un azul Nintendo le queda bien */
    cursor: pointer;
}

.result-item.selected .res-name {
    font-weight: bold;
    color: #222;
}
        .result-item img { width: 45px; height: 45px; margin-right: 15px; object-fit: contain; }

        /* Contenedor e Interfaz */

        .pokedex-container { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

        .sidebar { background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%), var(--pk-red); transition: background-color 0.5s ease; color: white; padding: 40px 20px; text-align: center; position: relative; }

       

        .nav-pokedex { display: flex; justify-content: space-between; padding: 0 10px; margin-bottom: 10px; position: relative; z-index: 10; top: -16px; }

        .nav-btn { background: rgba(255, 255, 255, 0.2); color: white; text-decoration: none; padding: 8px 15px; border-radius: 20px; font-size: 0.8em; font-weight: bold; transition: 0.3s; border: 1px solid rgba(255, 255, 255, 0.3); }

        .nav-btn:hover { background: rgba(255, 255, 255, 0.4); }

        .nav-btn.disabled { visibility: hidden; }



        .pk-number-big { position: absolute; top: 60px; left: 15px; font-size: 3.5em; font-weight: 900; opacity: 0.25; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }

       

        @keyframes fadeInUp {

            from { opacity: 0; transform: translateY(20px); }

            to { opacity: 1; transform: translateY(0); }

        }

        .sidebar img.pk-main-img { width: 100%; max-width: 150px; filter: drop-shadow(0 8px 15px rgba(0,0,0,0.3)); margin-top: 50px; animation: fadeInUp 0.6s ease-out forwards; }

       

        .sidebar h1 { margin: 15px 0 5px; text-transform: uppercase; letter-spacing: 2px; font-size: 2.1em; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

        .sidebar .nac-badge { background: rgba(0,0,0,0.25); padding: 5px 15px; border-radius: 20px; font-size: 0.85em; display: inline-block; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }



        .main-content { padding: 25px; }

        .info-section { margin-bottom: 25px; }

        .info-section h3 { border-bottom: 2px solid #eee; padding-bottom: 5px; color: var(--pk-dark); font-size: 1em; text-transform: uppercase; margin: 0 0 15px 0; }

        .grid-info { display: grid; grid-template-columns: 1fr; gap: 15px; }

        .data-box {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 12px;
            border: 1px solid #f0f0f0;
            display: flex; /* Añadí esto */
            flex-direction: column; /* Y esto */
            gap: 5px;
        }

        .data-box label { display: block; font-size: 0.7em; color: #999; font-weight: 800; margin-bottom: 8px; text-transform: uppercase; }

        .icon-row { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }

        .disabled { filter: grayscale(100%); opacity: 0.15; }



        .habitats-wrapper { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }

        .habitat-card { background: #fff; border: 2px solid #eee; border-radius: 15px; padding: 12px; text-align: center; width: 100%; max-width: 160px; transition: border-color 0.5s ease;  }

        .habitat-card:hover { transform: scale(1.05); }

        .habitat-card img { width: 100%; border-radius: 8px; margin-bottom: 8px; background: #eee; }

        .habitat-name {
            font-weight: bold;
            display: block;
            word-wrap: break-word; /* Para que si el nombre es muy largo, se corte */
        }

        .loc-tag { display: inline-block; background: #eef2f5; color: #4b5563; padding: 6px 12px; border-radius: 8px; margin: 4px; font-size: 0.8em; font-weight: 600; border-left: 4px solid var(--pk-red); transition: border-color 0.5s ease; }



        .otras-formas-wrapper {

            display: flex;

            gap: 15px;

            flex-wrap: wrap;

            margin-top: 10px;

        }



        .forma-card {

            background: #f8f9fa;

            border: 1px solid #eee;

            border-radius: 12px;

            padding: 10px;

            text-align: center;

            text-decoration: none;

            color: var(--pk-dark);

            width: 100px;

            transition: all 0.3s ease;

            display: flex;

            flex-direction: column;

            align-items: center;

        }



        .forma-card:hover {

            transform: translateY(-3px);

            box-shadow: 0 5px 15px rgba(0,0,0,0.1);

            border-color: var(--pk-red);

        }



        .forma-card img {

            width: 60px;

            height: 60px;

            object-fit: contain;

            margin-bottom: 5px;

        }



        .forma-card span {

            font-size: 0.75em;

            font-weight: bold;

            display: block;

            line-height: 1.2;

        }



        .forma-card small {

            font-size: 0.65em;

            color: #888;

        }



        /* Contenedor de la píldora */

.type-badge, .spec-badge {

    display: flex;

    align-items: center;

    background: #fff;

transition: all 0.2s ease;
    border: 1px solid #e0e0e0;
    padding: 6px;

    border-radius: 7px;

    gap: 8px;

    box-shadow: 0 2px 4px rgba(0,0,0,0.03);

}



/* Ajuste de los iconos dentro de la píldora */

.type-badge img, .spec-badge img {

    height: 24px !important; /* Un poco más chicos para que entre el texto al lado */

    width: auto;

}



/* Estilo del texto */

.type-badge span, .spec-badge span {

    font-size: 0.8em;

    font-weight: 700;

    color: #555;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



/* Opcional: un efecto hover sutil */

.type-badge:hover, .spec-badge:hover {

    border-color: #ccc;

    background: #fdfdfd;

}



        @media (min-width: 768px) {

            .pokedex-container { flex-direction: row; min-height: 700px; }

            .sidebar { width: 35%; }

            .main-content { width: 65%; padding: 40px; }

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

        }