*{
    box-sizing: border-box;
    margin: 0;
}

header{
    font-family: Play,sans-serif;
    font-weight: bold;
    width: 100%;
    height: 70px;
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgb(18,18,18);
    color: white;
    border-bottom: 0.5px solid black;
}

header h2{
    font-size: 18px;
    color: rgb(153,153,153);
}
body{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(18,18,18);
}
main{
    font-family: Play,sans-serif;
    font-weight: bold;
    color: white;
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #DD4A1C;
    background: linear-gradient(186deg,rgba(221, 74, 28, 1) 0%, rgba(0, 0, 0, 1) 100%);
    border-radius: 20px;
}

#mainRegistro{
    height: 87vh;
    background: black;
}

/* FORMULARIO DE REGISTRO */

#divRegistro{
    width: 30%;
    height: 74%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(18, 18, 18);
    border-radius: 4px;
}

#divRegistro h1{
    color: rgb(241, 241, 241);
    font-size: 25px;
    margin-top: 30px;
    margin-bottom: 10px;
}


#erroresFormulario{
    color: red;
    font-size: 0.8rem;
}
#formularioRegistro input{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}


#entradasRegistro input{
    background: #f0e675;
    color: black;
}

#formularioRegistro input:hover{
    background-color: rgb(80,80,80);
}

#botonesRegistro{
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: center;
    align-items: center;
    height: 150px;
}

#o{
    width: 344px;
    text-align: center;
    border-top: 1px solid white;
    /*margin-left: 6%;*/
}

#entrarCancelar{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
}
#formularioRegistro input[name="enviar"]{
    background-color: rgb(255, 108, 32);
    padding-left: 8px;
    width:45%;
    margin-right: 10px;
}

#formularioRegistro input[name="cancelar"]{
    width: 45%;
}




#entradasRegistro{
    padding: 20px;
}

#entradasRegistro input{
    margin-bottom: 20px;
    margin-top: 20px;
    width: 100%;
    border-radius: 4px;
    height: 45px;
}


input[name="cerrarSesion"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(255, 108, 32);
    border: none;
    border-radius: 4px;
}

/* FORMULARIO LOGIN */

#divLogin{
    width: 30%;
    height: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(18, 18, 18);
    border-radius: 4px;
}

#divLogin h1{
    color: rgb(241, 241, 241);
    font-size: 25px;
    margin-top: 30px;
    margin-bottom: 30px;
    
}


#erroresFormulario{
    color: red;
    font-size: 0.8rem;
}
#formularioLogin input{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

#entradasLogin input{
    background: #f0e675;
    color: black;
}

#formularioLogin input:hover{
    background-color: rgb(80,80,80);
}

#botonesLogin{
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: center;
    align-items: center;
    height: 150px;
}

#o{
    width: 344px;
    text-align: center;
    border-top: 1px solid white;
    /*margin-left: 6%;*/
}

#entrarCancelar{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
#formularioLogin input[name="entrar"]{
    background-color: rgb(255, 108, 32);
    padding-left: 8px;
    width:45%;
    margin-right: 10px;
    
}

#formularioLogin input[name="cancelar"]{
    width: 45%;
}

#sincuenta{
    font-weight: normal;
    margin-top: 13px;
    /*margin-left:35%;*/
    font-size: 0.8rem;
}

#formularioLogin input[name="crearCuenta"]{
    margin-top: 20px;
    background-color: rgb(18, 18, 18);

}

#entradasLogin{
    padding: 20px;
}

#entradasLogin input{
    margin-bottom: 20px;
    margin-top: 20px;
    width: 100%;
    border-radius: 4px;
    height: 45px;
}


input[name="cerrarSesion"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(255, 108, 32);
    border: none;
    border-radius: 4px;
}

/* BUSQUEDA DE DEPARTAMENTO FORMULARIO */
input[name="descBuscado"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(255, 108, 32);
    border: none;
    border-radius: 4px;
}

input[name="DescDepBuscado"]{
    width: 500px;
    height: 32px;
    font-family: Play,sans-serif;
    font-weight: bold;
    text-decoration: inherit;
    border: 1px solid grey;
    border-radius: 4px;
    background: white;
    color: black;
}


input[name="detalle"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="detalle"]:hover{
    background-color: rgb(80,80,80);
}

input[name="mantenimientoDep"]:hover{
    background-color: rgb(80,80,80);
}

input[name="mantenimientoDep"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="error"]:hover{
    background-color: rgb(80,80,80);
}

input[name="error"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="rest"]:hover{
    background-color: rgb(80,80,80);
}

input[name="rest"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="volver"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
    margin: 7px;
}

input[name="volver"]:hover{
    background-color: rgb(80,80,80);
}

input[name="cancelar"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="cancelar"]:hover{
    background-color: rgb(80,80,80);
}

#h4InicioPublico{
    font-size: 44px;
    text-shadow:rgba(255, 255, 255, 0.25) 0px 1px 6px;
    margin-bottom: 30px;
}

#pInicioPublico{
    font-size: 22px;
    text-shadow:rgba(255, 255, 255, 0.25) 0px 1px 6px;
}



input[name="iniciarSesion"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="iniciarSesion"]:hover{
    background-color: rgb(80,80,80);
}

footer{
    width: 93%;
    height: 13vh;
    background: rgb(18,18,18);
    display: flex;
    justify-content: space-between;
    padding: 40px;
    align-items: center;
    gap: 20px;
    border-top: 1px solid rgb(46,46,46);
}



.nombre a{
    font-family: Play, sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: white;
    text-decoration: none;
    
}

.nombre a:hover{
    text-shadow:rgba(255, 255, 255, 0.25) 0px 1px 6px;
}

.webImitada a{
    font-family: Play, sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: white;
    text-decoration: none;
    margin-right: 500px;
}

.webImitada a:hover{
    text-shadow:rgba(255, 255, 255, 0.25) 0px 1px 6px;
}

footer img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

footer img:hover{
   box-shadow:rgba(255, 255, 255, 0.25) 0px 1px 6px;
}

#login, #registro{
    margin-right: 50%;
}

/* ////////////////////////////////////////////////////// */

/* Solo para detalle.php */
main.detalle {
    height: auto;        /* Permite crecer según el contenido */
    padding: 20px;
    display: block;      /* Evita el centrado flex que rompe las tablas */
}

main.detalle article.articleSG {
    margin-bottom: 30px;
    width: 90%;
    overflow-x: auto;    /* Scroll si la tabla es ancha */
    background-color: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 10px;
}

main.detalle table.tableSG {
    width: 100%;
    border-collapse: collapse;
    color: white;
    font-family: Play, sans-serif;
    font-size: 14px;
}

main.detalle table.tableSG th,
main.detalle table.tableSG td {
    border: 1px solid white;
    padding: 6px 10px;
    text-align: left;
}

main.detalle table.tableSG th {
    background-color: rgba(255,255,255,0.2);
}

/* /////////////////////////////////////////////// */
/* ESTILOS DEL CAROUSEL INICIO PÚBLICO */

/* ================= CAROUSEL ================= */

.seccionCarrusel {
    display: flex;
    justify-content: center;
    padding: 4vh 2vw;
}

.carrusel-contenedor {
    position: relative;
    width: 90vw;
    max-width: 1100px;
    /* Ajusta el ancho que quieras que tenga el visor */
    height: 65vh;
    max-height: 700px;
    min-height: 400px;
    /* Ajusta el alto */
    overflow: hidden;
    /* Oculta las fotos que no están activas */
    border: 3px solid var(--colorAzul2);
    border-radius: 10px;
}

.photos {
    display: flex;
    width: 500%;
    /* 5 fotos = 500% de ancho */
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.photos img {
    width: 20%;
    /* Cada foto ocupa 1/4 del contenedor (100% / 5) */
    height: 100%;
    object-fit: contain;
    /* Para que los diagramas no se deformen */
    background-color: white;
}

/* Estilo de los botones (Radios) */
.carrusel-contenedor input {
    position: absolute;
    bottom: 15px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 10;
    appearance: none;
    /* Oculta el radio original */
    background-color: rgb(217, 73, 27);
    border: 2px solid black;
    border-radius: 50%;
    transition: 0.3s;
}

/* Posicionamiento horizontal de los botones */
#rd1 {
    left: 40%;
}

#rd2 {
    left: 46%;
}

#rd3 {
    left: 52%;
}

#rd4 {
    left: 58%;
}

#rd5{
    left: 64%;
}

/* Color cuando están seleccionados */
.carrusel-contenedor input:checked {
    background-color: var(--colorAzul2);
    transform: scale(1.2);
}


/* Cuando el radio X está marcado, mueve el div .photos */
#rd1:checked~.photos {
    transform: translateX(0%);
}

#rd2:checked~.photos {
    transform: translateX(-20%);
}

#rd3:checked~.photos {
    transform: translateX(-40%);
}

#rd4:checked~.photos {
    transform: translateX(-60%);
}

#rd5:checked~.photos {
    transform: translateX(-80%);
}


.photos img {
    width: 25%;
    height: 100%;
    object-fit: contain;
    background-color: white;

    /* Efecto hover */
    transition: transform 0.3s ease; /* animación suave */
}

.photos img:hover {
    transform: scale(1.2); /* aumenta 10% */
    z-index: 5; /* se asegura de que quede encima de las otras imágenes */
}

/* ESTILOS DE LA VENTANA REST */

/* ================= DIV APIS ================= */

#apis{
    width: 90vw;
    height: 70vh;
    margin-top: 5vh;
    margin-bottom: 2vh;
    border: 2px solid black;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

.Rest{
    border: 2px solid black;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgb(56,56,56);

    & h2{
        margin-bottom: 30px;
    }
}

.tituloRest{
    margin-bottom: 30px;
}

.formulariosApi{
    background: lightgoldenrodyellow;
    width: 150px;
}

#descripcionNasa{
    font-size: small;
}

/* Titulo de la foto de la Nasa */
#tituloFotoNasa{
    margin-top: 8px;
}
#urlNasa{
    color: white;
}
/* INFORMACIÓN APIS */

.infoApi{
    margin-top: 30px;
}

.infoRestPokemon{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    width: 100%;
}

.infoResPokemon model-viewer {
    width: 100%;               /* Ancho del modelo 3D */
    height: 250px;              /* Alto del modelo 3D */
    margin-bottom: 50px;
}

/* ESTILOS MENSAJE DE ERROR */

.error-valor{
    background-color: red;  /* Fondo rojo */
    color: white;           /* Texto blanco */
    padding: 2px 6px;       /* Pequeño espacio alrededor del texto */
    border-radius: 3px;  /* Bordes ligeramente redondeados */
}

/* ESTILOS TABLA MTO DEPARTAMENTOS */

#tablaBuscarDep{
    border: 2px solid black;
    margin-top: 1%;
    background: #f0972b;
    color: black;
    & td{
        border: 2px solid black;
    }
}