*{
    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;
}



#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;
}

#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="registrarse"]{
    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;
}



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="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="detalle"]:hover{
    background-color: rgb(80,80,80);
}

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;
}

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: 20px;
}

.carrusel-contenedor {
    position: relative;
    width: 800px;
    /* Ajusta el ancho que quieras que tenga el visor */
    height: 500px;
    /* 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: 400%;
    /* 4 fotos = 400% de ancho */
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.photos img {
    width: 25%;
    /* Cada foto ocupa 1/4 del contenedor (100% / 4) */
    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%;
}

/* 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(-25%);
}

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

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


.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 */
}