@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css');
@import url('./responsive.css');

*,
*::before,
*::after {
       padding: 0;
       margin: 0;
       box-sizing: border-box;
       outline: none;
       list-style: none;
       text-decoration: none;
}

html {
       font-size: 62.5%;
}

body {
       position: relative;
       background-color: #eee;
}

input,
body {
       font-family: Arial, Helvetica, sans-serif;
}

*::-webkit-scrollbar {
       width: 8px;
}

*::-webkit-scrollbar-track {
       background: rgb(223, 223, 223);
}

*::-webkit-scrollbar-thumb {
       background-color: rgb(160, 160, 160);
       border-radius: 20px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
       margin: 0;
}

:root {
       --header-color: #1b396a;
       --footer-color: #0a141d;
}

.container {
       margin: 0 auto;
       width: 90%; /*Separacion de las orillas de todas las paginas*/
       max-width: 100%; /*Separacion de las orillas de todas las paginas*/
}

/*Header y Footer*/

header,
footer {
       width: 100%;
       max-width: 100%;
}

header {
       background-color: var(--header-color);
}

img {
       max-width: 100%;
       max-height: 100%;
}

.header,
.footer,
.content-nav,
.content-nav>nav,
.header>a {
       display: flex;
       justify-content: space-between; /*Separacion hacia los lados de los componentes */
       align-items: center;
       gap: 1rem;    /*Separacion hacia abajo de los componentes hacia los lados*/
}

.header,
.footer,
.header>a {
       display: flex;
       padding: 2rem 0;     /*Separacion entre las letras del header y el footer*/
       flex-wrap: wrap;     /*Posicion de los componentes*/
       justify-content: space-between;
}

.footer {
       align-items: flex-start;
       padding-top: 4rem;  /*Tamaño del footer hacia arriba*/
       padding-bottom: 4rem;       /*Tamaño del footer hacia abajo*/
}

.header a,
.header h2,
.header i {
       white-space: pre-wrap;
       color: white; /*Color de las letras del encabezado*/
}

.header>a>img {
       width: 15rem; /*Tamaño logo del TecNM*/
}

.header>a>img:last-of-type {
       width: 10rem; /*Tamaño logo del ITSM*/
}

.header > label > h2 {
       display: flex;
       color: white;
       font-size: 3rem; /*Tamaño de las letras*/
       margin-bottom: 2rem;
}

.content-nav>div {
       display: none;
}

.content-nav>nav {
       gap: 0;
}

.content-nav>nav>a {
       display: block;
       font-size: 2rem;
       padding: 1.5rem;
       transition: .2s;
}

.content-nav>nav>a:hover {
       background-color: #132a50;
       border-radius: .5rem;
}

/*Footer*/

footer {
       background-color: var(--footer-color);
}

.footer>div>img {
       max-width: 20rem; /*Tamaño logo del ITSM del footer*/
       height: auto;
}

.footer>div>h3 {
       font-size: 2rem;
       color: #fff;
       text-transform: uppercase;
       margin-bottom: 1rem;
}

.footer>div>p {
       color: #fff;
       font-size: 1.6rem;
       margin-bottom: .6rem;
}

.footer>div>ul {
       display: flex;
       justify-content: left;
       gap: 1rem;
       margin-top: 2.5rem;
}

.footer>div>ul>li>a {
       color: #fff;
       font-size: 2rem;
       padding: 1.5rem;
       background-color: #060c11;
       transition: .2s;
       border-radius: .5rem;
}

.footer>div>ul>li>a:hover {
       background-color: #000;
       color: rgb(200, 200, 200);
}

/* Index */

.index {
       margin-top: 1.5rem;
       margin-bottom: 3rem;
}

.cards-index {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 2rem
}

.cards-index>li>a {
       display: block;
       overflow: hidden;
       border-radius: .5rem;
       color: #000;
       transition: .3s;
       border: 1px solid rgb(160, 160, 160);
}

.cards-index>li>a:hover {
       transform: scale(1.05);
}

.cards-index>li>a>div:first-of-type {
       overflow: hidden;
       width: 100%;
       border-radius: .5rem;
}

.cards-index>li>a>div:first-of-type>img {
       width: 100%;
}

.detalles>div:first-of-type {
       padding: 1rem;
}

.detalles>div>h3 {
       margin-bottom: .5rem;
       font-size: 2rem;
       text-align: center;
}

.detalles>div>p {
       font-size: 1.4rem;
       text-align: justify;
}

.detalles>div:last-of-type {
       margin-top: .5rem;
       padding: 1rem 0;
       background-color: var(--header-color);
       display: flex;
       justify-content: space-around;
       text-align: center;
       color: #fff;
       font-size: 1.6rem;
}

.detalles>div:last-of-type>div>i {
       display: block;
       margin-bottom: .5rem;
}

/* Login */

.login {
       height: 45rem;
       display: grid;
       place-content: center;
}

.login>form {
       width: 400px;
       background: #24303c;
       padding: 30px;
       border-radius: 4px;
       font-family: "calibri";
       color: white;
       box-shadow: 7px 13px 37px #000;
}

.login>form>* {
       display: block;
       width: 100%;
}

.login>form>h2 {
       font-size: 2.5rem;
       margin-bottom: 2rem;
}

.login>form>input {
       margin-bottom: 1.5rem;
       padding: 1rem;
       font-size: 2rem;
       border: 2px solid var(--header-color);
       border-radius: .5rem;
       background-color: transparent;
       color: #fff;
}

.login>form>button {
       padding: 1rem;
       border: none;
       color: #fff;
       font-size: 2rem;
       background: #1f53c5;
       border-radius: .5rem;
       margin-top: 2rem;
       margin-bottom: 1rem;
}

.login>form>a {
       display: inline-block;
       text-align: center;
       margin: 1rem;
       font-size: 2rem;
       color: #fff;
}

.login>form>a:hover {
       text-decoration: underline;
}

/* Reservacion */
.reservacion, .data{
       max-width: 100%;;
}

.info {
       max-width: 100%;
       display: grid;
       gap: 2rem;
       margin-top: 2rem;
       margin-bottom: 3rem;
}

.data>div,
.data>form {
       background-color: #fff;
       padding: 2rem;
       border-radius: .5rem;
}

.view-img {
       margin-bottom: 2rem;
       overflow: hidden;
       position: relative;
}

.view-img>div:first-of-type {
       display: flex;
       flex-wrap: nowrap;
       width: 100%;
}

.nav-view-img {
       position: absolute;
       z-index: 3;
       left: 0;
       right: 0;
       bottom: 0;
       height: 3rem;
       display: flex;
       place-content: center;
}

.nav-view-img>label {
       width: 8rem;
       height: 2rem;
       background-color: rgba(0, 40, 100, .3);
       border: 4px solid rgba(0, 40, 100, .7);
       display: inline-block;
       cursor: pointer;
       transition: .3s;
}

.nav-view-img>label:first-of-type {
       margin-right: 1rem;
}

.view-img>input {
       display: none;
}

#mkl1:checked~div>label:first-of-type {
       background-color: var(--header-color);
}

#mkl2:checked~div>label:last-of-type {
       background-color: var(--header-color);
}

#mkl1:checked~div>img:first-of-type {
       margin-left: 0;
}

#mkl2:checked~div>img:first-of-type {
       margin-left: -100%;
}

.view-img>div>img {
       width: 100%;
       max-width: 100%;
       max-height: 40rem;
       transition: .3s;
       min-width: 100%;
}

.data>div>div>h2 {
       font-size: 3rem;
       margin-bottom: 1rem;
}

.data>div>div>p {
       font-size: 1.6rem;
       text-align: justify;
}

.form-res>h3 {
       font-size: 2rem;
       margin-bottom: 1rem;
}

.form-res>div:not(div.herramientas-adicionales) {
       margin-bottom: 1rem;
}

.form-res>div:not(div.herramientas-adicionales)>label {
       margin-bottom: .5rem;
}

.form-res>div:not(div.herramientas-adicionales)>label,
.form-res>div:not(div.herramientas-adicionales)>input {
       font-size: 1.6rem;
       display: block;
       width: 100%;
}

.form-res>div:not(div.herramientas-adicionales)>input {
       padding: .5rem;
       border: 1px solid #cacaca;
       border-radius: .5rem;
}

.herramientas-adicionales {
       margin-top: 2rem;
}

.herramientas-adicionales>h4 {
       font-size: 1.6rem;
}

.herramientas-adicionales>div {
       display: flex;
       justify-content: space-between;
       gap: 1rem;
       margin-top: 1rem;
       margin-bottom: 1rem;
}

.herramientas-adicionales > div > label,
.herramientas-adicionales > div > input{
       font-size: 1.6rem;
}

.herramientas-adicionales > div > input{
       border: 1px solid #cacaca;
       padding: .5rem;
       border-radius: .5rem;
}

/*Coffe Break*/
.coffe_break_text {
       /* Estilos específicos para el input dentro del formulario */
       width: 200px;
       padding: 5px;
       border: 3px solid #ccc;
       border-radius: 3px;
       }

textarea.coffe_break_text {
       width: 100%;
       height: 200px;
       padding: 10px;
       font-size: 16px;
       border: 1px solid #ccc;
       border-radius: 5px;
       white-space: pre-wrap; /* Hace que el texto haga un salto automático a la siguiente línea */
       word-wrap: break-word; /* Permite que las palabras se rompan si son demasiado largas */
}

.form-res > button{
       display: block;
       margin: auto;
       margin-top: 2rem;
       padding: 1rem 2rem;
       font-size: 1.6rem;
       border: none;
       background-color: var(--header-color);
       color: #fff;
       border-radius: .5rem;
       cursor: pointer;
       transition: .2s;
       font-weight:bold !important;
}

.form-res > button:hover{
       background-color: var(--footer-color);
}

/* mis reservaciones */

.reservaciones{
       display: grid;
       grid-template-columns: 1fr 3fr;
       gap: 2rem;
       margin: 1rem 0;
}

.reservaciones > h2{
       grid-column: 1 / 3;
       font-size: 2.2rem;
}

.card-reservaciones{
       padding: 1.5rem;
       border-radius: .5rem;
       background-color: #fff;
       margin-bottom: 1rem;
}

.filtro-res > h3{
       font-size: 1.8rem;
       margin-bottom: .8rem;
}

.filtro-res > div{
       display: flex;
       justify-content: left;
       align-items: center;
       gap: 1rem;
       flex-wrap: wrap;
}

.filtro-res > div > div{
       flex-grow: 1;
}

.filtro-res > div > div > input{
       display: none;
}

.filtro-res > div > div > label{
       display: block;
       font-size: 1.6rem;
       text-align: center;
       padding: 1rem;
       border-radius: .5rem;
       border: 1px solid var(--header-color);
       color: var(--header-color);
       cursor: pointer;
       transition: .2s;
}

.filtro-res > div > div > label:hover{
       background-color: #eee;
}

.filtro-res > div > div > input:checked ~ label{
       color: #fff;
       background-color: var(--header-color);
}

.filtro-res > button{
       display: block;
       width: 100%;
       font-size: 1.6rem;
       padding: 1rem;
       margin-top: 1rem;
       border-radius: .5rem;
       border: none;
       background-color: rgb(1, 1, 139);
       color: #fff;
       cursor: pointer;
}
/* Administrador */
.t-res {
	margin-bottom: 3%;
	margin-top: 3%;
	font-size: 2.5rem;
}

.status {
       width: auto;
       padding: 16px 20px;
       border: none;
       border-radius: 4px;
       background-color: #f1f1f1;
}
#btguard{
	display: inline-block;
	text-decoration: none;
	border: none;
	cursor: pointer;
	width: auto;
	height: auto;
	
	}
	

.content-table { 
	border-collapse: collapse;
       margin: auto;
       margin-top: 4%;
       align-content: center;
       font-size: 1.5rem;
       font-family: sans-serif;
       min-width: 450px;
       box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); 
}

.content-table th{
	background-color: #007fbe;
	color: #ffffff;
}
.content-table th, .content-table td { 
padding: 12px 15px; 
}

td button a{
       color: #fff;
}

.btncontenedor button {
       background-color: #1b396a;
       border: 0;
       border-radius: 5px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
       color: #fff;
       font-size: 14px;
       padding: 10px 25px;
       cursor: pointer;
}
#btn-detalles{
       background-color: #1b396a;
       color: black; 
       text-align: center;
       color: white;
}
#btn-detalles:hover{

       background-color: #008CBA;
       color: white;
}

/*Estilo para los detalles del staff*/
.contformdetalles {
       display: flex;
       justify-content: space-evenly;
       align-items: flex-start;
       margin-top: 50px;
}

.formDetalles {
       background-color: #f9f9f9;
       border: 1px solid #ccc;
       border-radius: 5px;
       padding: 20px;
       width: 500px;
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
       margin: 2rem; /*Espacio de arriba*/
       display: flex;
       flex-direction: column;
       align-items: center;
}

.Contenedor_detalles {
       display: flex;
       justify-content: space-between;
       margin: 2rem;
       align-items: flex-start;
}

.Contenedor_detalles .formDetalles label {
       text-align: center;
       margin-top: 10px;
       font-size: 16px;
       font-weight: 20px;
}

.formDetalles input[type="text"],
.formDetalles input[type="number"] {
       display: flex;
       padding: 5px;
       margin-top: 5px;
       border-radius: 5px;
       border: 1px solid #ccc;
       width: 70%;
       text-align: center;
       margin: 0 auto; /* Agrega esta línea para centrar horizontalmente */
}

.formDetalles input[type="submit"] {
       margin-top: 20px;
       padding: 10px;
       background-color: #4caf50;
       color: white;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       font-size: 16px;
}

.formDetallesCoffee {
       background-color: #f9f9f9;
       border: 1px solid #ccc;
       border-radius: 5px;
       padding: 20px;
       width: 500px;
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
       margin: 2rem; /*Espacio de arriba*/
       display: flex;
       flex-direction: column;
       align-items: center;
}

.textarea-coffeebreak {
       width: 400px; /* Cambia el selector para que afecte solo a los input dentro de .formDetalles */
       height: 100px;
       padding: 10px; /* Ajusta el padding según tus necesidades */
       margin-top: 10px; /* Ajusta el margen superior según tus necesidades */
       border-radius: 5px;
       border: 1px solid #ccc;
       font-size: 16px; /* Aumenta el tamaño de fuente según tus necesidades */
       
}