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

* ESTILOS BUEN TRATO
* Autor: Hector Amarilla
* Última modificacion: 28/06/2024

**********************************************/
/* #region SECCIONES */

body {
   font-family: 'Encode Sans', Serif;
   background-color: #F8F9FA;
   color: #212529;
}

.header {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   background-color: white;
}

.main {
   min-height: 900px;
   padding-bottom: 1em;
}

.footer {
   margin-bottom: 0;
}

.entorno {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: #212529;
   color: white;
   padding: .5em;
   opacity: 50%;
   z-index: 2000;
}

.seccion {
   background-color: white;
   padding: .75em;
   box-shadow: 0 1px 3px 1px #EEE;
   margin-bottom: 10px;
   border-radius: 5px;
}

.item-listado {
   background-color: white;
   padding: .75em;
}

.hover:hover {
   filter: brightness(0.98);
   /* Reduce el brillo para oscurecer */
}

.form-container {
   max-width: 500px;
   margin-left: auto;
   margin-right: auto;
   border: 1px solid #CCC;
   padding: .75em;
   background-color: white;
}
/*#endregion */

/* #region MENU  */

.logo-principal {
   display: inline-block;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   border: 1px solid #EEE;
   background-image: url("../imagenes/logo_ley_buen_trato.jpg");
   background-size: contain;
}

.nav-link {
   font-weight: 500;
}
/* #endregion */

/* TABLAS */
.table {
   font-size: 90%;
}


/*  Iniciar sesión  */

.form-login {
   max-width: 450px;
}

/* #region: MAPA DE CAPACITACIONES   */

.mapa {
   width: 60vh;
   height: auto;
   margin-left: auto;
   margin-right: auto;
}

.partido-sin-visitas {
   stroke: #444;
   stroke-width: 1px;
   fill: #02a1b7;
}

.mapa path:hover {
   opacity: 80%;
}

.partido-visitado {
   stroke: #444;
   stroke-width: 1px;
   fill: #fd1b79;
}

.seleccionado {
   stroke: red;
   fill: #FFF;
}

.infoPartido {
   position: absolute;
   background: #333;
   color: #fff;
   padding: .75em;
   border-radius: 4px;
   display: none;
   pointer-events: none;
   z-index: 1000;
 }
 /* #endregion */

/* #region: Pagina de impresion de certificado */
.certificado {
   position: relative;
   display: inline-block;
   text-align: center;
}

.certificado img {
   max-width: 90%;
}

.nombre {

   position: absolute;
   left: 50%;
   top: 39%;
   font-weight: bold;
   transform: translate(-50%, -50%);
   font-family: "EB Garamond", Serif;
   font-size: 3vw;
}
/* #endregion */

/* #region:  -- BOTONES -- */

.btn-indigo {
   background-color: #02a1b7;
   border-color: #02a1b7;
}

.btn-fuccia {
   background-color: #fd1b79;
   border-color: #fd1b79;
}
/* #endregion */

/* #region: COLORES DE TEXTO*/

.tex-indigo {
   color: #02a1b7;
}

.tex-fuccia {
   color: #fd1b79;
}

.text-gba {
   color: #009AAE;
}

/* #endregion */  

/* #region: -- COLORES DE FONDD --*/

.bg-form {
   background-color: #CAE7EA;
}

.bg-indigo {
   background-color: #02a1b7;
}

.bg-fuccia {
   background-color: #fd1b79;
}

.bg-violeta {
   background-color: #6A2C91;
}

.bg-tornasol {
   background: linear-gradient(#02A1B7, #fd1b79);
}

.bg-verde {
   background-color: #D1E7DD;
}
/* #endregion */

/* #region: LINKS */
.ver-mas {
   text-decoration: none;
   color: #009AAE;
   font-style: italic;
}

.link-lg {
   font-size: 130%;
   text-decoration: none;
}

.link {
   text-decoration: none;
   color: inherit;
}

.link-archivos-recursos {
   display: block;
   padding: .50em;
   border-bottom: 1px solid lightgray;
   text-decoration: none;
   color: inherit;
}

.link-archivos-recursos:hover {
   background-color: white;
   color: inherit;
}

/*#endregion*/

/* #region: ESTILOS CALENDARIO */

.fc-daygrid-event .fc-event-title {
   white-space: normal;
   /* Permite que el texto se ajuste en varias líneas */
   word-wrap: break-word;
   /* Corta palabras largas para evitar desbordamiento */
   font-size: 12px;
   /* Ajusta el tamaño de la fuente si es necesario */
   line-height: 1.2;
   /* Ajusta la altura de la línea para optimizar el espacio */
}

.fc-daygrid-event {
   overflow: visible;
   /* Evita que el contenido se recorte */
   height: auto;
   /* Permite que la altura del evento se ajuste automáticamente */
   padding: 2px;
   color: white;
   border-radius: 5px;
   text-align: center;
}

.fc-daygrid-day-frame {
   min-height: 100px;
   /* Aumenta la altura mínima de la celda del día si es necesario */
}

/* #endregion */

/* ESTADISTICAS */

.recuadro-resumen {
   background-color: rgba(255, 255, 255, 0.2);
   border-radius: 5px;
   padding: 1em;
   text-align: center;
}


/* #region: ESTILOS FORMULARIOS */

.centrado {
   margin-left: auto;
   margin-right: auto;
   text-transform: (-50%, -50%);
   max-width: 500px;
}

.input-titulo {
   font-size: 2em;
   margin-bottom: .75em;
   width: 100%;
   border: none;
   border-bottom: 1px solid #CED4DA;
   background-color: inherit;

}

.input-titulo:focus {
   outline: none;
   border-bottom: 1px solid #495057;
}

.input-titulo ::placeholder {
   font-weight: bold;
}

.input-gris {
   background-color: #F8F9FA;
   border: none;
   padding: .25em;
   border-radius: 4px;
   margin: 2px;
   color: #6C757D;
   min-width: 200px;
   max-width: 100%;
}

select .input-gris {
   display: block;
   background-color: #F8F9FA;
   border: none;
   padding: .25em;
   border-radius: 4px;
   margin: 2px;
   color: #6C757D;
   min-width: 200px;
   max-width: 100% ;
   overflow: hidden;
}

.input-gris:focus {
   outline: 1px solid lightgray;
}

.textarea {
   resize: none;
}

.small {
   font-size: 80%;
}

.submit {
   text-align: right;
}

.contenedor-inscripcion {
   margin-left: auto;
   margin-right: auto;
   margin-top: 1em;
   text-transform: (-50%, -50%);
   max-width: 800px;
   padding: .75em;
   background-color: white;
   box-shadow: 0 1px 3px 1px #EEE;
   border-radius: 5px;
}
/* #endregion */

/*CLASSES GENERALES*/

.hidden {
   display: none;
}

/*Clases FLEX*/
@media (min-width: 768px) {
   .flex-md-w-30 {
      width: 30%;
   }
   .flex-md-w-50 {
      width: 50%;
   }
   .flex-md-w-70 {
      width: 70%;
   }
}

/* -- MENUES EN CUADROS PARA PAGINAS DE INICIO --*/
.menu-cuadros{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .75em;
}

.d-md-flex > div {
  flex: 1 1 0;
  min-width: 0;
} 

/* -- MENUES EN CUADROS PARA PAGINAS DE INICIO --*/
.menu-cuadros{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .75em;
}

.link-cuadro {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: .75em;
  height: 120px;
  font-size: 1.2em;
  transition: transform 0.2s, background 0.3s;
  color: white;
  border-radius: 5px;
  background-color: #009AAE;
}

.link-cuadro:hover {
  transform: scale(1.05);
  color: white;;
}

/* -- LINK RUTAS --*/
.ruta {
   margin-bottom: .75em;
}

.link-ruta {
   text-decoration: none;
   color: inherit;
}

/* CASITAS DEL TALLER */
.casita {
   max-width: 400px;
   height: auto;
}

/* INSCRIPCIONES */
.pasos-inscripcion {
   display: flex;
   justify-content: space-between;
   margin-bottom: .75em;
   gap: .50em;
}

.paso {
   flex: 1;
   text-align: center;
   align-content: center;
   padding: .25em;
   border-radius: 5px;
   background-color: #6c7577;
   color: white;
   text-decoration: none;
}
.paso:hover {
   color: white;
   opacity: 80%;
}

.mensaje_flash {
   position: fixed;
   bottom: .75em;
   left: .75em;
   width: 70%;
   min-width: 300px;
   max-width: 600px; ;
   z-index: 1000;
   padding: 1em;
}