/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 20 nov. 2025, 10:24:58
    Author     : alejandro.huefer
*/
*{
    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="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);
}