/*
================================================================================
    Guanajuato Kids: Aventura Educativa
    Archivo: style.css
    Versión: VF_2.0.0
    Autor: Gemini
    Colaborador: iDiegoSalazar
================================================================================
*/

/* --- Fuentes de Google Fonts --- */
/* @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poppins:wght@400;500;700&display=swap'); */

/* --- Estilos base y Cursores Personalizados --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #1e71ed; /* Azul primario para el fondo */
    color: #1e293b; /* slate-800 */
    transition: background-color 0.3s, color 0.3s;
    /* Cursor por defecto para el cuerpo del documento */
    cursor: default;
}

/* Cursor de explorador (lupa) para elementos interactivos */
a, button, select, input[type="range"], .interactive-cursor {
    /* URL de un cursor de lupa funcional y de libre uso */
    /*cursor: url(https://www.cursor.cc/cursor/434/12/cursor.png), pointer;*/
    /*cursor: url(img/cursor.png), pointer;*/
}

/* --- Modo Oscuro --- */
body.dark {
    background-color: #152a0f; /* slate-900 */
    color: #e2e8f0; /* slate-200 */
}

/* Estilos para placeholders en modo oscuro */
.dark ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #94a3b8; /* slate-400 */
}
.dark ::-moz-placeholder { /* Firefox 19+ */
  color: #94a3b8;
  opacity: 1;
}
.dark :-ms-input-placeholder { /* IE 10+ */
  color: #94a3b8;
}
.dark :-moz-placeholder { /* Firefox 18- */
  color: #94a3b8;
  opacity: 1;
}

.font-title {
    font-family: 'Fredoka One', cursive;
}

/* --- Diseño de Botón "Fabuloso" 3D --- */
.btn-3d {
    position: relative;
    transition: all 0.15s ease-out;
    border-bottom-width: 4px;
    font-weight: 700;
    border-radius: 0.75rem; /* rounded-xl */
    text-transform: uppercase;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-3d:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-3d:active {
    transform: translateY(2px);
    border-bottom-width: 2px;
    filter: brightness(0.95);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* --- Animaciones --- */
@keyframes modal-zoom-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.modal-animate {
    animation: modal-zoom-in 0.3s ease-out forwards;
}

@keyframes confetti-fall {
    0% { transform: translateY(-100vh) rotateZ(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotateZ(720deg); opacity: 0; }
}
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}
.confetti {
    position: absolute;
    width: 10px;
    height: 20px;
    background-color: var(--color, #f59e0b);
    opacity: 0.9;
    animation: confetti-fall 4s linear forwards;
}

.contenedor{
    border: solid 2px transparent;
    display: flex;
    justify-items: center;
    align-items: center; 
    margin: 1%;
}

.contenedor img{
    border: solid 2px transparent;
    display: flex;
    max-width: 100%;
    width: 30%;
    margin-left: 35%;
}

/*Fuentes*/
.font-title_Bd {
    font-family: 'HelveticaNeueLTStd-Bd';
}
.font-title_Blk {
    font-family: 'HelveticaNeueLTStd-Blk';
}
.font-title_Lt2 {
    font-family: 'HelveticaNeueLTStd-Lt2';
}
.font-title_Md {
    font-family: 'HelveticaNeueLTStd-Md';
}
.font-title_Th2 {
    font-family: 'HelveticaNeueLTStd-Th2';
}

.btn_regresar{
    max-width: 100%;
    width: 7.5%;
    height: auto;
    cursor: pointer;  
      
    /*cursor: pointer;
    transition: all 0.5s ease-in-out;*/
}

.btn_regresar:hover{ 
    transform: scale(1.1);
    transition: all .3s ease-in-out;
    /*cursor: pointer;
    transition: all 0.5s ease-in-out;*/
}

.P{
    display: flex;
    justify-content: center;
    align-items: center;
}

.centrar_logo{
    margin-left: 10%;
}

.espacio {
    margin: 2.5%;
}

.color_bienvenida{
    font-weight: bold;
    color: #1d71ed;
    /*font-family:'HelveticaNeueLTStd-Bd';*/
}

.color_descripcion{
    font-weight: bold;
    color: #20201e;
}

.btn_tema{
  height: 2.5rem;
}

/*Clases btn_guardar*/
.btn_guardar{
    max-width: 100%;
    width: 25%;
    height: auto;
}
.centrar_guardar img{
    margin-left: 40%;
}

/*Clases btn_comenzar*/
.btn_comenzar{
    max-width: 100%;
    width: 35%;
    height: auto;
    
}
.centrar_comenzar img{
    margin-left: 32.5%;
    cursor: pointer; 
}

.btn_comenzar_formularios{
    max-width: 100%;
    width: 20%;
    height: auto;
    cursor: pointer;
}

.btn_guardar_estructura{
      background-color: #ff6704;    /* Verde */
      color: white;     
      font-weight: bold;            /* Texto blanco */
      padding: 12px 48px;           /* Espaciado interno */
      border: none;                 /* Quitar borde */
      border-radius: 100px;          /* Bordes redondeados */
      font-size: 20px;              /* Tamaño de fuente */                                 /* Cursor tipo mano */
}

#LogoAzul{
    display: none;
}

#LogoBlanco{
    display: block;
}

.btn_logo{
    max-width: 100%;
    width: 20%;
    height: auto;
}

.img_ninos{
    max-width: 100%;
    width: 35%;
    height: auto;
}

.seleccionar_genero{
    margin-left: 25%;
}