/*Estilos generales de la pag*/

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --clr-black: #1c1c1c;
    --clr-gray: #ececec;
    --clr-white: #f7f7f7;
}

* {
    margin: 0;
    padding: 0;
    color: var(--clr-black);
    font-family: 'Rubik', sans-serif;
    cursor: url("../public/pokeball.png") -10 -10, auto;
}

ul {
    list-style-type: none;
}

button {
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

body {
    min-height: 100vh;
    background-color: rgb(230, 59, 74);
    width: 100vw;
    /**/
    /*background-color: var(--clr-gray);/**/
}

header {
    padding-block: 1rem;
    box-shadow: 0 0 2rem -1rem rgba(0, 0, 0, .5);
}

.nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-inline: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    /*background-image: url('../public/parte_superior.png');
    background-size: cover;
    background-repeat: no-repeat;*/
}

.search-container {
    display: flex;
    margin-top: 2rem;
    padding-left: 15px;
    width: 100%;
}

#searchInput {
    width: 100%;
    max-width: 250px;
    min-width: 186px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: 2px solid var(--clr-gray);
    border-radius: 20px;
    outline: none;
    transition: all 0.3s ease-in-out;
    cursor: url("../public/pokeball-pointer.png") -10 -10, auto;
}

#searchInput:focus {
    border-color: var(--type-water);
    box-shadow: 0 0 10px rgba(104, 144, 240, 0.5);
}

.nav img{
    display: flex;
    align-self: center;
    width: 50%;
    min-width: 315px;
}

.btn-header {
    background-color: var(--clr-gray);
    padding: .5rem;
    border-radius: 100vmax;
    cursor: url("../public/pokeball-pointer.png") -10 -10, auto;
    text-transform: uppercase;
    font-weight: 600;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .25);
    transition: .2s;
    color: var(--clr-white);
}

#ver-todos{
    width: 300px;
    min-width: 100px;
    margin-left:6%;
    color: var(--clr-black);
}

.btn-header:hover {
    transform: scale(1.1);
    box-shadow: 0 0 2rem rgba(0, 0, 0, .25);
}

#ver-todos:hover {
    transform: scale(1.03);
    box-shadow: 0 0 1.6rem rgba(0, 0, 0, .25);
}

main {
    padding: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.pokemon-todos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.pokemon-imagen img {
    transition: opacity 1s ease-out;
  }

@media screen and (min-width: 470px) {
    .pokemon-todos {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 700px) {
    .pokemon-todos {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.cargar-mas-container {
    text-align: center;
    display: flex;
    justify-content: center;  
    margin: 2rem 0;
}

.btn-cargar-mas {
    padding: 0.75rem 1.5rem;
    background-color: rgb(255, 208, 0);
    border-radius: 5px;
    border: 3px solid rgb(0, 15, 228);
    color:  rgb(0, 15, 228);
    font-size: 1rem;
    font-weight: bold;
    cursor: url("../public/pokeball-pointer.png") -10 -10, auto;
    transition: background-color 0.3s ease;
    width: 25%;
    min-width: 150px;
}

.btn-cargar-mas:hover {
    background-color: rgb(243, 216, 96);
    border: 3px solid rgb(95, 104, 218);
    color:  rgb(95, 104, 218);
}

/* Menu desplegable */
.dropdown {
    position: relative;
    display: inline-block;
    margin: 1rem;
    max-width: 450px;
    min-width: 200px;
    width: 100%;
  }
  
  .dropdown-trigger {
    display: block;
    background-color: #fff;
    border: 1px solid #c1c2c5;
    border-radius: 12px;
    padding: 1rem;
    cursor: url("../public/pokeball-pointer.png") -10 -10, auto;
    font-weight: 600;
    user-select: none;
  }
  
  .dropdown-trigger .arrow {
    float: right;
    transition: transform 300ms ease;
  }
  
  .dropdown-toggle:checked + .dropdown-trigger .arrow {
    transform: rotate(180deg);
  }
  
  .dropdown-menu {
    position: absolute;
    top: 110%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #c1c2c5;
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 200ms ease 100ms, transform 300ms ease 200ms, visibility 0ms linear 100ms;
  }

  .dropdown-toggle:checked + .dropdown-trigger + .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
  
.nav-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}  

.nav-item {
    margin: 0.25rem 0;
  }

.drops-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* Estilo de las tarjetas de los Pokemons*/

.pokemon {
    border-radius: 1rem;
    background-color: var(--clr-white);
    box-shadow: 0 0 3rem -1rem rgba(0, 0, 0, .25);
    padding-block: 1rem;
    text-transform: uppercase;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.pokemon-id-back {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6rem;
    font-weight: 800;
    z-index: -1;
    color: var(--clr-gray);
}

.pokemon-imagen {
    padding-inline: 1rem;
    display: flex;
    justify-content: center;
}

.pokemon-imagen img {
    width: 100%;
    max-width: 6rem;
}

.pokemon-info {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-inline: 1rem;
    align-items: center;
    text-align: center;
}

.nombre-contenedor {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pokemon-id {
    background-color: var(--clr-gray);
    padding: .25rem .5rem;
    border-radius: 100vmax;
    font-size: .75rem;
    font-weight: 500;
}

.pokemon-nombre {
    font-size: 1.4rem;
}

.pokemon-tipos {
    display: flex;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 500;
    flex-wrap: wrap;
    justify-content: center;
}

.tipo {
    padding: .25rem .5rem;
    border-radius: 100vmax;
}

.pokemon-stats {
    display: flex;
    gap: 1rem;
    font-size: .85rem;
}

.stat {
    background-color: var(--clr-gray);
    padding: .25rem .5rem;
    border-radius: 100vmax;
}

@media screen and (max-width: 900px) {
    .pokemon-id-back {
        font-size: 5rem;
    }
    .nombre-contenedor {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .nombre-contenedor p,
    .nombre-contenedor h2 {
        margin: 0.25rem 0;
        text-align: center;
    }
}

.pokemon-imagen {
    position: relative;
}
  
.particle {
    position: absolute;
    top: 20%;
    right: 30%;
    opacity: 1;
    animation: fadeOut 1s forwards;
}
  
@keyframes fadeOut {
    0% {
      transform: translate(0, 0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate(10px, -10px) scale(0.5);
      opacity: 0;
    }
}

.particle svg {
    width: 24px;
    height: 24px;
    display: block;
}