/*
 * Institución: INSTITUTO TECNOLOGICO DE COSTA RICA (TEC)
 * DESARROLLO DE APLICACIONES
 * Curso: PROGRAMACION WEB I GR 1 T I 2026
 * Proyecto No. 2:  My Pokemon Battle
 * Tema: Programación de Javascript, HTML,CSS
 * Peticiones a API's.
 * Archivo: CSS (style.css)
 * Contiene el diseño físico y ordenamiento de componentes
 * de la página. Que se ejecuta automáticamente con la página,
 * salvo algunas instrucciones invocada por el javascript.
 * Profesor: Jose Pablo Garbanzo
 * Autor: Edgardo Mora M.
 * Fecha: 12-04-2026
 */

/* ********************************************************************************************************************/
/* CONFIGURACIONES POR DEFECTO PARA LOS COMPONENTES (ETIQUETAS) DEL HTML */
/* ********************************************************************************************************************/

/* ********************************************************************************************************************/
/* RESET */
/* ********************************************************************************************************************/

/* propiedades generales */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Visualización por defecto */
body{
    background-color: white;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
}

/* ********************************************************************************************************************/
/* PAGINA GENERAL */
/* ********************************************************************************************************************/

/* <Div> */
.pagina{
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px;
}

/* <P> Párrafos */ 
p{
    margin-top: 8px;
}

/* <Input> Text */ 
input{
    margin-top: 10px;
}

/* <button> Botones específicos */
#btn_random,
#btn_iniciar_batalla{
    margin-top: 15px;
}

/* <Div> generales */
div{
    margin-top: 5px;
}

/* <Div> Barra de carga */
#barra_carga{
    display: block;
    object-fit: contain;
    margin-top: 10px;
    max-height: 44px;
    max-width: 200px;
}

/* <img> imagen para pokemón oponente */
#enemy_sprite{
    height: 100px;
    width: auto;
}

/* <button> Botón stage 1 */ 
.btn_stage_1{
    padding: 8px 12px;
    border: 1px solid gray;
    border-radius: 6px;
    background-color: #ff8c00;  
    font-weight: 700;
    user-select: none;
    -webkit-user-select: none;
}

/* <button> botones generales */
button {
    /*user-select: none;*/
    outline: none;
}

/* <button> botones generales (focus) */
button:focus {
    outline: none;
}

/* <li> elementos generales en listas */
#lista_player_moves li,
#lista_enemy_moves li{
    margin-bottom: 5px;
    line-height: 1.4;
}

/* <div> */
.hp_status{
    display: Flex;
    justify-content: space-between;
    height: auto;
    font-size: larger;
    font-weight: 600;
    background-color: transparent;
}

/* <div> HP de pokemon */
#hp_pokemon_status{
    display: none;
    align-items: center;
    width: 200px;
    font-size: larger;
    font-weight: 600;
    color:white;
    background-color: black;
}

/* <div> HP de pokemon oponente */
#hp_enemy_status{
    display: none;
    align-items: center;
    width: 200px;
    font-size: larger;
    font-weight: 600;
    color:white;
    background-color: black;
}

/* ********************************************************************************************************************/
/* NAV / HEADER / FOOTER */
/* ********************************************************************************************************************/

/* <Nav> menú principal de página */ 
.menu_principal{
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: calc(1400px - 20px); /* igual que .pagina */
    z-index: 1000;
    height: 60px;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* <h1> título de menú */
.titulo_menu{
    color: white;
    font-family: "Orbitron", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

/* <button> Botón de modo (claro/oscuro) */
.boton_tema{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 12px;
    border: 2px solid white;
    background-color: black;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-family: "Orbitron", sans-serif;
    font-size: 0.85rem; 
    user-select: none;
    -webkit-user-select: none;
}

/* <header> Encabezado de página decorativo personalizado */
.header_adorno{
    position: relative;
    /* Contemplando cambio de menú (fixed) ya que recortó 
     * la cabeza de charizard */ 
    height: 210px;
    padding-top: 60px;
    background: transparent;
}

/* <header> Psedo-elemento con charizard */
.header_adorno::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('./img/Header.png') no-repeat bottom;
    background-size: cover;
    opacity: 1;
}

/* <footer> Pie de página decorativo personalizado */
.footer_adorno{
    position: relative;
    height: 150px;
    background: transparent;
}

/* <header> Psedo-elemento con charmander */
.footer_adorno::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('./img/Footer.png') no-repeat top;
    background-size: cover;
    opacity: 1;
}

/* <Img> Decorativa Charizard */
.charizard{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 140px;
    z-index: 10;
    transition: all 0.35s ease;
}

/* <Img> Decorativa Charmander */
.charmander{
    position: absolute;
    bottom: 0;
    right: 0;
    height: 120px;
    z-index: 10;
}

/* Botón de mute/ unmute */ 
#btn_musica{
    position: absolute;
    right: 200px; 
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    background: none;
    border: none;
    cursor: pointer;
}

/* ********************************************************************************************************************/
/* TEMA GLOBAL */
/* ********************************************************************************************************************/

/* Color general de página para modo: Claro */
body.tema_claro{
    background-color: white;
    color: black;
}

/* Color general de página en modo: Oscuro */
body.tema_oscuro{
    background-color: #2b2b2b;
    color: #ff8c00;
}

/* Charizard se mueve a la derecha en oscuro */
body.tema_oscuro .charizard{
    left: auto;
    right: 0;
}

/* texto general en oscuro */
body.tema_oscuro p,
body.tema_oscuro h1,
body.tema_oscuro h2,
body.tema_oscuro h3,
body.tema_oscuro span,
body.tema_oscuro summary{
    color: #ff8c00;
}

/* bloques principales en oscuro */
body.tema_oscuro .stage_1,
body.tema_oscuro .stage_2,
body.tema_oscuro .battle_log,
body.tema_oscuro .panel_stage_1,
body.tema_oscuro .battle_arena,
body.tema_oscuro .controles,
body.tema_oscuro .battle_info,
body.tema_oscuro .battle_resultado,
body.tema_oscuro .celda,
body.tema_oscuro .flechas,
body.tema_oscuro .cooldown,
body.tema_oscuro .titulo_colapsable{
    background-color: #2b2b2b;
    color: #ff8c00;
    border-color: #ff8c00;
}

/* Títulos de secciones  */
body.tema_oscuro .battle_arena h3,
body.tema_oscuro .controles h3,
body.tema_oscuro .battle_info h3,
body.tema_oscuro .battle_resultado h3{
    background-color: #ff8c00;
    color: #2b2b2b;
}

/* botones */
body.tema_oscuro button{
    background-color: #2b2b2b;
    color: #ff8c00;
    border-color: #ff8c00;
}

/* botón del menú en oscuro */
body.tema_oscuro .boton_tema{
    background-color: #2b2b2b;
    color: #ff8c00;
    border-color: #ff8c00;
}

/* barra de cooldown */
body.tema_oscuro .barra_cooldown{
    background-color: #2b2b2b;
    border-color: #ff8c00;
}

/* ********************************************************************************************************************/
/* BLOQUES COLAPSABLES */
/* ********************************************************************************************************************/

/* <details> Clase bloques colapables generales */
.bloque_colapsable{
    margin-bottom: 14px;
    border: none;
    background-color: transparent;
}

/* <Summary> clase:titulo colapsable (específico) */
.titulo_colapsable{
    display: block;
    padding: 14px 18px;
    font-family: "Orbitron", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    list-style: none;
    background-color: white;
    color: black;
    border: 2.5px solid gray;
    border-radius: 8px;
    transition: 0.2s ease;
}

/* Pseudo-elemento */
.titulo_colapsable::-webkit-details-marker{
    display: none;
}

/* titulo colapsable: Pseudo-elemento */
.titulo_colapsable::after{
    content: "  [-]";
    font-weight: normal;
}

/* <details> bloque colapsable:  con pseudo-clase + pseudo-elemento */
.bloque_colapsable:not([open]) .titulo_colapsable::after{
    content: "  [+]";
}

/* <details> */
.bloque_colapsable[open] .stage_1,
.bloque_colapsable[open] .stage_2,
.bloque_colapsable[open] .battle_log{
    margin-top: 10px;
}

/* ********************************************************************************************************************/
/* CONTENIDO INTERNO DE CADA BLOQUE */
/* ********************************************************************************************************************/

/* <Section> Selectores agrupados */
.stage_1,
.stage_2,
.battle_log{
    padding: 16px;
    background-color: white;
    border: 2.5px solid gray;
    border-radius: 8px;
}

/* <ul> lista para resultados de búsqueda */
#resultados_busqueda {
    margin-top: 6px;
    border: 1px solid #ccc;
    background-color: #fff;
    max-width: 250px;
}

/* <li> elemento de lista de resultado de búsqueda */
#resultados_busqueda li {
    list-style: none;
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
}

/* <li> psedo-clase: último elemento */
#resultados_busqueda li:last-child {
    border-bottom: none;
}

/* <li> pseudo clase: resalta elemento al pasar cursor */
#resultados_busqueda li:hover {
    background-color: #f2f2f2;
}

/* objeto de resultado de búsqueda cuando esta no existe */
#error_busqueda{
    color: red;
    font-weight: 700;
}

/* ********************************************************************************************************************/
/* STAGE 1 */
/* ********************************************************************************************************************/

/* <div> contenedor para stage 1 */
.contenedor_stage_1{
    display: flex;
    justify-content: space-evenly;
    align-items:stretch;
    gap: 20px;
}

/* <div> subcontenedor (skeleton) básico para acoplar datos
 *  de pokemón favorito, pokemón enemigo y trainer card,para
 * este proyecto se utilizan 3 en stage 1, en columnas 
 * verticales simétricas que ocupan un 33 % del ancho total */
.panel_stage_1{
    flex: 0 0 calc(33.333% - 14px);
    min-height: 300px;
    padding: 18px;
    background-color: white;
    border: 2.5px solid gray;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* <h3> selector descendiente : títulos (h3) en stage 1 */
.panel_stage_1 h3{
    width: 100%;
    margin-bottom: 14px;
    padding-bottom: 8px;
    text-align: center;
    font-family: "Orbitron", sans-serif;
    font-size: 1.05rem;
    border-bottom: 2px solid rgba(0,0,0,0.15);
}

/* <div> subpanel vertical 1, para dividir texto en 2 columnas
 * para los paneles de (pokemón favorito y pokemón oponente) */
.panel_columna_1{
    display: block;
    margin-right: 20px;
    margin-left: 20px;
}

/* <div> subpanel vertical 2, para dividir texto en 2 columnas
 * para los paneles de (pokemón favorito y pokemón oponente) */
.panel_columna_2{
    display: block;
    margin-right: 20px; 
    margin-left: 20px;
}

/* <div> sub-contenedor, contiene sub-paneles (columna_1, columna_2) */
.contenedor_info_texto{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

/* Campo de texto para nombre de pokemón enemigo */
#txt_nombre_enemigo{
    font-size: 14px;
    padding: 6px 10px;
    border: 1px solid #666;
    border-radius: 6px;
    outline: none;
    transition: all 0.2s ease;
    max-width: 220px;
    width: 100%;
    background-color: #f8f8f8;
    color: #222;
}

/* ********************************************************************************************************************/
/* STAGE 2 */
/* ********************************************************************************************************************/

/* <div> contenedores para (controles, battle_arena) */
.battle_arena,
.controles{
    margin-bottom: 15px;
    padding: 10px;
    background-color: white;
    border: 2.5px solid gray;
    border-radius: 15px;
}

/* <H3> titulo h3 para contenedores (controles, battle_arena) */
.battle_arena h3,
.controles h3,
.battle_info h3,
.battle_resultado h3{
    display: inline-block;
    margin-bottom: 14px;
    font-family: "Orbitron", sans-serif;
    font-size: 1rem;
    padding: 4px 10px;
    color: white;
    background-color: black;
    border-radius: 25px;
}

/* ********************************************************************************************************************/
/* ARENA */
/* ********************************************************************************************************************/

/* <div> contenedor para cuadrícula 3x3 para batalla */
.arena_grid{
    display: none;
    /*display: grid;*/
    grid-template-columns: repeat(3, 150px);
    justify-content: space-evenly;
    gap: 18px;
    
    /* Se implenta cambio en propiedad transparencia, desde
     *  JS para que sea dinámico */
    /*background-color: transparent;*/
}

/* <div> contenedor de arena de batalla */
.battle_arena{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Se implenta cambio en propiedad: backgroun-image,
     *  desde JS para que sea dinámico */
    /*background-image: url('./img/Arena_1.png');*/
}

/* <div> celda individual de cuadícula de 3 x 3 */ 
.celda{
    width: 120px;
    aspect-ratio: 1 / 1;
    padding: 10px;
    border: 2px solid gray;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Se implenta cambio en propiedad de: transparencia,
     *  desde JS para que dinámico */
    /*background-color: transparent;*/
}

/* Permite posicionar efectos visuales dentro de la celda */
.celda{
    position: relative;
}

/* Gif temporal de impacto sobre el enemigo */
.efecto_impacto{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    object-fit: contain;
    pointer-events: none;
    z-index: 999;
}

#mensaje_final_batalla{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 9999;
    pointer-events: none;
}

#mensaje_final_batalla img{
    max-width: 320px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.efecto_derrota{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    object-fit: contain;
    pointer-events: none;
    z-index: 60;
}

/* ********************************************************************************************************************/
/* CONTROLES */
/* ********************************************************************************************************************/

/* <div> Contenedor de controles (botones, flechas) para
 * movimiento del pokemón favorito */
.contenedor_controles{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
}

/* <button> dentro de contenedor_controles */
.contenedor_controles button{
    min-width: 180px;
    height: 80px;
    background-color: white;
    color: black;
    border: 2.5px solid gray;
    border-radius: 8px;
    cursor: pointer;
    font-family: "Orbitron", sans-serif;
    font-size: 0.9rem;
    transition: 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* <button> efecto Hover para botones, en contenedor_controles */
.contenedor_controles button:hover{
    border-color: black;
    background-color: #f4f4f4;
}

/* <Div>  subcontenedor de flechas */
.flechas{
    min-width: 180px;
    height: 80px;
    border: 2.5px solid gray;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 6px 8px;
    box-sizing: border-box;
}

/* <div> Texto pequeño superior, con indicación de utilizar flechas de
 * teclado para mover pokemón */
#indicacion_flechas{
    width: 100%;
    text-align: center;
    font-family: "Orbitron", sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.05;
    margin: 0 0 4px 0;
}

/* <div> Contenedor interno de flechas */
#cont_flechas{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    width: 100%;
    flex: 1;
}

/* <span> Flechas visuales */
#cont_flechas span{
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* <div> objeto para cool down, al hacer ataques a pokemón oponente */
.cooldown{
    min-width: 190px;
    max-width: 350px;
    width: 350px;
    height: 80px;
    padding: 10px 12px;
    border: 2.5px solid gray;
    border-radius: 8px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    box-sizing: border-box;
}

/* <P> Párrafo dentro de objeto: cool down> */
.cooldown p{
    text-align: center;
    font-family: "Orbitron", sans-serif;
    font-size: 0.9rem;
    margin: 0;
}

/* <div> barra de animación dentro de objeto: cool_down */ 
.barra_cooldown{
    width: 100%;
    height: 12px;
    border: 2px solid rgba(0,0,0,0.25);
    border-radius: 6px;
    background-color: greenyellow;
    box-sizing: border-box;
}

/* ********************************************************************************************************************/
/* BATTLE LOG */
/* ********************************************************************************************************************/

/* <div> contenedor para log de batallas */
.contenedor_battle_log{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* <div> subcontenedor para battle_info */
/* subontenedor donde se sitúa evento de log, y resultados de
 *  batallas */
.battle_info{
    flex: 0 0 calc(65% - 10px);
    min-height: 170px;
    padding: 16px;
    background-color: white;
    border: 2.5px solid gray;
    border-radius: 8px;
}

/* <div> contenedor para mensajes de eventos de log al
 * realizarse la batalla (ataques de pokemón favorito,
 * contrincante, nivel de hp rebajado, etc) */
#log_eventos {
    max-height: 200px;
    height: 100px;
    overflow-y: auto;
    background-color: lightseagreen;
    color: black;
    font-weight: 600;
    padding: 10px;
    border-color: black;
    border: 2.5px solid black;
    border-radius: 8px;
    
}

 /* <div> contenedor para resultados de batalla */
.battle_resultado{
    flex: 0 0 calc(35% - 10px);
    min-height: 170px;
    padding: 16px;
    background-color: white;
    border: 2.5px solid gray;
    border-radius: 8px;
}

/* <div> contenedor para mensajes finales de batalla, sirve 
 * para indicar, si la batalla se ganó o se perdió */
#log_resultados{
     max-height: 200px;
    height: 100px;
    overflow-y: auto;
    background-color: lightseagreen;
    color: black;
    font-weight: 600;
    font-size: x-large;
    padding: 10px;
    border-color: black;
    border: 2.5px solid black;
    border-radius: 8px;
}

/* ********************************************************************************************************************/
/* RESPONSIVE */
/* ********************************************************************************************************************/

@media (max-width: 767px){

    .menu_principal{
        height: auto;
        min-height: 60px;
        padding: 10px 70px 10px 10px;
    }

    /* Ajuste del espacio superior en móvil */
    .pagina{
        margin-top: 90px;
    }

    .titulo_menu{
        font-size: 1rem;
    }

    .boton_tema{
        right: 10px;
        font-size: 0.75rem;
        padding: 6px 10px;
    }

    .titulo_colapsable{
        font-size: 1rem;
        padding: 12px;
    }

    .contenedor_stage_1{
        flex-direction: column;
    }

    .panel_stage_1{
        flex: 1 1 100%;
        min-height: 220px;
    }

    /* Se mantiene cuadrícula de batalla en formato 3 x 3,
     * pero con celdas más pequeñas para móviles */
    .arena_grid{
        grid-template-columns: repeat(3, 90px);
        justify-content: center;
        gap: 10px;
    }

    /* Se reduce tamaño de celda para que la arena siga siendo
     * visible y funcional en pantallas pequeñas */
    .celda{
        width: 80px;
        padding: 6px;
    }

    .contenedor_controles{
        flex-direction: column;
        align-items: stretch;
    }

    .contenedor_battle_log{
        flex-direction: column;
    }

    .battle_info,
    .battle_resultado{
        flex: 1 1 100%;
    }
    
}