/*
 * ============================================================================
 * SUPERHÉROES ORTOGRÁFICOS - ESTILOS CSS
 * ============================================================================
 * 
 * DESCRIPCIÓN:
 * Hoja de estilos para toda la interfaz gráfica de la aplicación.
 * Define colores, tipografía, tamaños y animaciones.
 * 
 * SECCIONES:
 * 1. Estilos globales del cuerpo
 * 2. Gestión de pantallas (mostrar/ocultar)
 * 3. Estilos de botones
 * 4. Estilos de actividades (imágenes, recuadros)
 * 5. Estilos de superhéroes
 * 6. Estilos de diplomas
 * 7. Estilos responsivos
 * 
 * ============================================================================
 */

/* ========================================================================== */
/* SECCIÓN 1: ESTILOS GLOBALES */
/* ========================================================================== */

/**
 * Estilos del body (cuerpo del documento)
 * 
 * - Tipografía: Comic Sans MS (fuente divertida para niños)
 * - Fondo: Azul claro (color alegre y relajante)
 * - Alineación: Centro para toda la página
 * - Márgenes/Padding: Eliminado para ocupar todo el espacio
 */
body {
    font-family: 'Comic Sans MS', cursive, sans-serif;  /* Fuente amigable */
    background-color: #f0f8ff;  /* Azul claro (Alice blue) */
    text-align: center;  /* Centrar todo por defecto */
    margin: 0;  /* Sin margen externo */
    padding: 0;  /* Sin padding externo */
}

/* ========================================================================== */
/* SECCIÓN 2: GESTIÓN DE PANTALLAS */
/* ========================================================================== */

/**
 * Clase .pantalla - Contiene una pantalla/vista de la aplicación
 * 
 * Todas las pantallas están ocultas por defecto (display: none)
 * Se muestran agregando la clase .activa con display: block
 */
.pantalla {
    display: none;  /* Ocultar por defecto */
    padding: 20px;  /* Espaciado interno */
    max-width: 1200px;  /* Ancho máximo en pantallas grandes */
    margin: 0 auto;  /* Centrar en la página */
}

/**
 * Clase .activa - Muestra la pantalla actual
 * Se agrega dinámicamente desde JavaScript
 */
.pantalla.activa {
    display: block;  /* Mostrar pantalla activa */
}

/* ========================================================================== */
/* SECCIÓN 3: ESTILOS DE BOTONES */
/* ========================================================================== */

/**
 * Estilos globales para todos los botones
 * 
 * Diseño:
 * - Color de fondo: Naranja (#ff9800) - llamativo y cálido
 * - Color de texto: Blanco para contraste
 * - Sin borde visible
 * - Bordes redondeados para aspecto moderno
 * - Cursor: pointer (mano al pasar)
 * 
 * Estados:
 * - Normal: Naranja
 * - Hover: Naranja oscuro (feedback visual)
 */
button {
    background-color: #ff9800;  /* Naranja vivo */
    color: white;  /* Texto blanco */
    border: none;  /* Sin borde */
    padding: 15px 25px;  /* Espaciado interno */
    font-size: 18px;  /* Texto grande y legible */
    margin: 10px;  /* Espaciado entre botones */
    cursor: pointer;  /* Cambiar cursor al pasar */
    border-radius: 10px;  /* Esquinas redondeadas */
}

/**
 * Estado hover de botones
 * Se ejecuta cuando el usuario pasa el mouse sobre un botón
 */
button:hover {
    background-color: #e68900;  /* Naranja más oscuro */
}

/* ========================================================================== */
/* SECCIÓN 4: ESTILOS DE ACTIVIDADES */
/* ========================================================================== */

/**
 * Imágenes de opciones en Actividad 1
 * 
 * Muestra las imágenes (burro y dado) como opciones clickeables
 * - Tamaño: 120px x 120px
 * - Cursor: pointer para indicar que son clickeables
 * - Espaciado: 10px alrededor
 */
.opciones img {
    width: 120px;  /* Ancho de imagen */
    margin: 10px;  /* Espaciado alrededor */
    cursor: pointer;  /* Indicar que es clickeable */
}

/**
 * Contenedor de recuadros en Actividad 2
 * 
 * Posiciona los dos recuadros (B y D) lado a lado
 * - Display flex: disposición flexible
 * - Space-around: distribuye el espacio uniformemente
 */
.recuadros {
    display: flex;
    justify-content: space-around;  /* Espacio equitativo entre recuadros */
    margin-top: 20px;
}

/**
 * Estilos de cada recuadro para Drag & Drop
 * 
 * Los recuadros son áreas donde se sueltan las palabras arrastradas
 * - Tamaño: 150x150 px
 * - Borde: Línea punteada (#333)
 * - Fondo: Blanco cremoso
 * - Padding: 10px para espacio interno
 */
.recuadro {
    width: 150px;  /* Ancho del recuadro */
    height: 150px;  /* Alto del recuadro */
    border: 2px dashed #333;  /* Borde punteado */
    padding: 10px;  /* Espaciado interno */
    background-color: #fff8dc;  /* Blanco cremoso (cornsilk) */
}

/* ========================================================================== */
/* SECCIÓN 5: ESTILOS DE SUPERHÉROES */
/* ========================================================================== */

/**
 * Contenedor de la imagen del superhéroe
 * 
 * Posiciona la imagen en el centro de la pantalla
 * - Margen: 20px alrededor
 * - Alineación: Centro
 */
#contenedor-superheroe {
    margin: 20px auto;
    text-align: center;
}

/**
 * Imagen del superhéroe
 * 
 * Muestra la imagen del héroe según el nivel alcanzado
 * - Tamaño: 200px de ancho, alto automático
 * - Bordes: Redondeados para aspecto moderno
 * - Sombra: Efecto de profundidad
 */
#imagen-superheroe {
    width: 200px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ========================================================================== */
/* SECCIÓN 6: ESTILOS DE DIPLOMAS */
/* ========================================================================== */

/**
 * Vista previa del diploma en HTML
 * 
 * Estilo decorativo con:
 * - Fondo: Gradiente dorado (color de diploma)
 * - Borde: Rojo grueso y redondeado
 * - Decoraciones: Estrellas en las esquinas superiores
 * - Sombra: Efecto 3D
 */
#vista-previa-diploma {
    /* Gradiente de fondo dorado */
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    
    /* Borde decorativo */
    border: 8px solid #ff6b6b;
    border-radius: 15px;
    
    /* Espaciado interno */
    padding: 40px 30px;
    
    /* Posicionamiento y tamaño */
    margin: 20px auto;
    max-width: 600px;
    
    /* Efecto de profundidad */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    
    /* Posición relativa para las decoraciones */
    position: relative;
    
    /* Tipografía */
    font-family: 'Comic Sans MS', cursive, sans-serif;
}

/**
 * Decoraciones (estrellas) en el diploma
 * 
 * Pseudo-elementos ::before (arriba-izquierda) y ::after (arriba-derecha)
 */
#vista-previa-diploma::before,
#vista-previa-diploma::after {
    content: '⭐';  /* Emoji de estrella */
    position: absolute;
    font-size: 30px;
}

#vista-previa-diploma::before {
    top: 10px;
    left: 20px;
}

#vista-previa-diploma::after {
    top: 10px;
    right: 20px;
}

/**
 * Clase: diploma-titulo
 * Título "¡FELICIDADES!" del diploma
 */
.diploma-titulo {
    font-size: 36px;
    color: #ff1744;  /* Rojo llamativo */
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);  /* Sombra blanca */
    margin: 20px 0;
    font-weight: bold;  /* Texto grueso */
    letter-spacing: 2px;  /* Espacio entre letras */
}

/**
 * Clase: diploma-nombre
 * Nombre del jugador en el diploma
 */
.diploma-nombre {
    font-size: 32px;
    color: #0d47a1;  /* Azul oscuro */
    margin: 20px 0;
    text-decoration: underline;  /* Subrayado */
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6);
}

/**
 * Clase: diploma-linea
 * Líneas decorativas horizontales
 */
.diploma-linea {
    border-top: 3px dashed #ff1744;  /* Línea punteada roja */
    margin: 25px 0;
}

/**
 * Clase: diploma-texto
 * Texto explicativo del diploma
 */
.diploma-texto {
    font-size: 18px;
    color: #333;  /* Gris oscuro */
    margin: 15px 0;
    font-weight: bold;
}

/**
 * Clase: diploma-imagen
 * Imagen del superhéroe en el diploma
 */
.diploma-imagen {
    max-width: 150px;
    margin: 20px auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));  /* Sombra */
}

/**
 * Clase: diploma-datos
 * Datos como puntos y nivel
 */
.diploma-datos {
    font-size: 16px;
    color: #333;
    margin: 10px 0;
}

/**
 * Clase: diploma-fecha
 * Fecha y hora del diploma
 */
.diploma-fecha {
    font-size: 14px;
    color: #666;  /* Gris medio */
    margin-top: 20px;
    font-style: italic;  /* Cursiva */
}

/* ========================================================================== */
/* SECCIÓN 7: ESTILOS DEL CONTENEDOR DE RESULTADOS */
/* ========================================================================== */

/**
 * Contenedor superior - Superhéroe + Información
 * 
 * Layout flexbox para mostrar imagen y datos lado a lado
 */
#contenedor-superior {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;  /* Sin espacio entre elementos */
    margin: 30px auto;
    flex-wrap: nowrap;  /* No envolver en múltiples líneas */
    max-width: 1000px;
    width: 100%;
}

/**
 * Contenedor de superhéroe dentro del contenedor superior
 */
#contenedor-superheroe {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;  /* No crecer, no encoger */
}

/**
 * Imagen del superhéroe con tamaño específico
 */
#imagen-superheroe {
    width: 200px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);  /* Sombra más pronunciada */
}

/**
 * Contenedor de información (puntos y nivel)
 */
#contenedor-informacion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    text-align: center;
    min-width: 200px;
}

#contenedor-informacion h2 {
    margin: 0 0 15px 0;
    font-size: 28px;
    color: #ff1744;  /* Rojo del diploma */
}

#contenedor-informacion p {
    margin: 8px 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

/**
 * Contenedor de nombre y botones
 */
#contenedor-nombre-botones {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 30px auto 0;
    max-width: 400px;
}

/**
 * Campo de entrada de nombre (input)
 * 
 * Estilo para que el usuario ingrese su nombre
 * - Borde: Naranja (color del tema)
 * - Tamaño: Ancho completo del contenedor
 * - Fuente: Comic Sans para consistencia
 */
#nombre-jugador {
    padding: 12px 15px;
    font-size: 18px;
    border: 3px solid #ff9800;  /* Borde naranja */
    border-radius: 10px;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    width: 100%;  /* Ancho máximo */
    box-sizing: border-box;  /* Incluir borde en el ancho total */
}

/**
 * Placeholder del input
 * Texto gris claro que desaparece al escribir
 */
#nombre-jugador::placeholder {
    color: #bbb;  /* Gris claro */
}

/**
 * Estado focus del input
 * Se ejecuta cuando el usuario hace clic en el campo
 * Cambia el borde a rojo y añade sombra
 */
#nombre-jugador:focus {
    outline: none;  /* Remover outline por defecto */
    border-color: #ff6b6b;  /* Borde rojo */
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);  /* Sombra roja */
}

/**
 * Botones dentro del contenedor de nombre
 * Se muestran lado a lado
 */
#contenedor-nombre-botones button {
    width: 48%;  /* Ocupan el 48% del ancho (para dejar espacio) */
    padding: 10px 12px;
    font-size: 14px;
    display: inline-block;
}

/**
 * Contenedor de los botones
 * Los posiciona lado a lado
 */
#contenedor-nombre-botones > div {
    display: flex;
    gap: 5px;  /* Espacio entre botones */
    width: 100%;
    justify-content: center;
}

/* ========================================================================== */
/* SECCIÓN 8: NOTAS Y REFERENCIAS DE ESTILOS */
/* ========================================================================== */

/*
 * PALETA DE COLORES UTILIZADA:
 * 
 * - #f0f8ff    Azul claro (fondo general) - Alice blue
 * - #ff9800    Naranja (botones y acentos) - Color principal
 * - #e68900    Naranja oscuro (hover) - Feedback visual
 * - #ff6b6b    Rojo (bordes de diploma)
 * - #ff1744    Rojo brillante (títulos diploma)
 * - #0d47a1    Azul oscuro (nombre en diploma)
 * - #fff8dc    Blanco cremoso (recuadros Drag & Drop) - Cornsilk
 * - #333       Gris oscuro (texto principal)
 * - #666       Gris medio (texto secundario)
 * - #bbb       Gris claro (placeholders)
 * - #ffd700    Oro (fondo diploma) - Gold
 * - #ffed4e    Oro claro (gradiente diploma)
 * 
 * TIPOGRAFÍA:
 * - Font: Comic Sans MS, cursive, sans-serif
 * - Razón: Diseño divertido y amigable para niños
 * 
 * ESTRUCTURA DE PANTALLAS:
 * - .pantalla: Contenedor base para cada vista
 * - .pantalla.activa: Solo una pantalla activa a la vez
 * - Cambio: Se maneja desde JavaScript con mostrarPantalla()
 * 
 * RESPONSIVE DESIGN:
 * - max-width: 1200px en contenedores principales
 * - Flex layouts para adaptabilidad
 * - Fuentes relativamente grandes para legibilidad
 * 
 * EFECTOS VISUALES:
 * - box-shadow: Para profundidad y separación
 * - border-radius: Bordes redondeados para modernidad
 * - Gradientes: En diploma para aspecto premium
 * - Transiciones: Implicadas en hover de botones
 */