/* -------------------------------------------------- 
 * GLOBAL 
 --------------------------------------------------  */
 @charset "UTF-8";
 :root {
     /* Basics */
     --clear: #F2F2F2;
     --clear-grey: #FCFCFC;
     --white: #ffffff;
     --black: #12181B;
     --dark: #161E22;
     --text: #333333;
 }
 html, body {background-color: var(--clear);}
 a {
     cursor: pointer;
 }
 
 /* -------------------------------------------------- 
  * GOOGLE 
  --------------------------------------------------  */
 .grecaptcha-badge {
     display: none;
 }
 
 /* -------------------------------------------------- 
  * FORM 
  --------------------------------------------------  */
 input:invalid {
     color: red;
 }
 
 /* -------------------------------------------------- 
  * COMMON 
  --------------------------------------------------  */
 #loading_content {
     display: flex;
     justify-content: center;
     align-items: center;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #fff;
     z-index: 9999;
 }
 
 /* Estilo de la animación SVG */
 #loading_content .spinner {
     animation: rotate 1s linear infinite;
     width: 50px;
     height: 50px;
 }
 #loading_content .path {
     stroke: var(--secondary);
     stroke-linecap: round;
     animation: dash 1.5s ease-in-out infinite;
 }
 @keyframes rotate {
     100% {
         transform: rotate(360deg);
     }
 }
 @keyframes dash {
     0% {
         stroke-dasharray: 1, 150;
         stroke-dashoffset: 0;
     }
     50% {
         stroke-dasharray: 90, 150;
         stroke-dashoffset: -35;
     }
     100% {
         stroke-dasharray: 90, 150;
         stroke-dashoffset: -124;
     }
 }
 
 
 /* Ocultar el precargador después de cargar */
 #loading_content.loaded {
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.5s ease-in-out;
     position: relative;
     height: 0;
     width: 0;
 }
 
 /* Estilos para el elemento .c-branded */
 .c-branded {
     border: none;
     border-left: 4px solid var(--secondary);
     position: fixed;
     height: 100vh;
 }
 @media only screen and (max-width: 40em) {
     .c-branded {
         border: none;
         border-top: 4px solid var(--secondary);
         width: 100vw;
         height: auto;
     }
 }
 
 
 /* Estilos para el menú de pestañas */
 .tabs-container {
     border-bottom: 1px solid var(--primary);
     display: flex;
     margin: 0 1rem;
 }
 .tabs-container h3,
 .tabs-container h4 {
     flex: 1 1 auto;
     padding: 0 0.5rem;
     margin: 0;
 }
 .tabs-container ul {
     flex: 0 1 auto;
 }
 ul.tabs {
     margin: 0;
     padding: 0;
     list-style: none;
 }
 ul.tabs li {
     background: none;
     color: #222;
     display: inline-block;
     padding: 10px 15px;
     cursor: pointer;
 }
 ul.tabs li.current {
     background: #ededed;
     color: #222;
     border-bottom: 4px solid var(--secondary);
 }
 .tab-content {
     display: none;
     overflow: hidden;
     margin: 0;
     background-color: white;
     padding: 0.5rem 1rem;
     border-bottom: 1px solid var(--primary);
     -webkit-transition: background-color 2s ease-out;
     -moz-transition: background-color 2s ease-out;
     -o-transition: background-color 2s ease-out;
     transition: background-color 2s ease-out;
     width: 100%;
 }
 .tab-content.current {
     display: block;
     background-color: var(--clear);
 }
 
 /* Estilos para el menú de la barra lateral */
 nav#menu {
     background: var(--secondary);
     bottom: 0;
     box-shadow: 0 0 5px #666;
     height: 100%;
     left: -17.5rem;
     padding-top: 38px;
     position: fixed;
     top: 0;
     transition: .4s ease-in-out;
     width: 17rem;
     user-select: none;
     z-index: 999;
 }
 nav#menu ul {}
 nav#menu ul li {
     text-indent: 1rem;
     line-height: 1.5rem;
     display: list-item;
     min-height: 1rem;
 }
 nav#menu a {
     color: #eee;
     display: block;
     transition: .5s;
     text-decoration: none;
     -webkit-user-drag: none;
     padding: 1rem 0;
 }
 nav#menu a:hover {
     background-color: rgba(255, 255, 255, .2);
 }
 nav#menu a.clean:hover {
     background-color: transparent;
 }
 #nav-collapse {
     padding: 8px 12px;
     position: absolute;
     right: 0;
     top: 0;
 }
 #nav-expand {
     color: #333;
     display: inline-block;
     padding: 8px 12px 8px 16px;
     text-decoration: none;
     transition: .5s linear;
     user-select: none;
     -webkit-user-drag: none;
     border-radius: 3px;
     ;
 }
 #nav-expand .icon-menu {
     filter: invert(1) sepia(100%) saturate(10000%) hue-rotate(45deg);
 }
 #nav-expand:focus {
     opacity: 0;
 }
 #nav-expand:focus~main {
     margin-left: 17rem;
     transition-delay: .25s;
 }
 #nav-expand:focus~nav {
     left: 0;
     transition-delay: .25s;
 }
 nav#menu .icon,
 #nav-expand .icon {
     display: inline-block;
     background-position: center;
     background-repeat: no-repeat;
     height: 1rem;
     width: 1rem;
     vertical-align: text-top;
 }
 nav#menu .icon-menu,
 #nav-expand .icon-menu {
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAB5JREFUKJFj/P///38GEgATKYoHKWAc9TQRgGRPAwD0IAv+FT8LPwAAAABJRU5ErkJggg==');
 }
 nav#menu .icon-cross,
 #nav-expand .icon-cross {
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAPdJREFUGJV1jz9LhWAYxc+9rVZDQ+DcEI0NLU19gxr6Ci3tuvjnA+gggSBt4qzzO90b5FBubkHgEM1CBL5K93Ia8jWv4G88/A7PeQAArusekXwRQpiGYSzQ4/v+Gcn3OI6vMRJf+cdWFXrxs8+bOI5vkCTJLckf/rMtiuJhJJIk67oWAIA0Te8mhR2klGvbtg/UvNlC27ZPSlwquaqqZwA1dmGe56uu676HxPO8U5IfMyuGp+fEt+nTQghzqWnaMYBDdUVKuXYc5yLLsnsAmz5e6Lp+AgCIouiK5FfTNCvLsvanT5dl+Wia5t6wOwiC87GoCMPwUom/I2EVwEqOzwUAAAAASUVORK5CYII=');
 }
 
 
 /* Personalización de estilos para la paginación */
 .pagination {
     display: flex;
     list-style: none;
     padding: 0;
     margin: 0;
     flex-direction: row;
     flex-wrap: wrap;
 }
 .pagination li {
     margin-right: 0.5rem;
     display: flex;
     gap: 1rem;
 }
 .pagination a,
 .pagination span {
     padding: 0.5rem 1rem;
     border-bottom: 1px solid #ccc;
     color: #333;
     text-decoration: none;
     border-radius: 5px;
     background-color: var(--clear-grey);
 }
 .pagination .active span {
     background-color: var(--secondary);
     color: #fff;
     border-color: var(--secondary);
 }
 .pagination a:hover {
     background-color: var(--secondary);
     color: #fff;
     border-color: var(--secondary);
 }
 
 
 /* -------------------------------------------------- 
  * MISC 
  --------------------------------------------------  */
 
 
 /* Estilos alternois */
 ul.zebra {background-color: var(--white);}
 ul.zebra li:nth-child(even) {
     background-color: var(--clear-grey);
 }
 ul.zebra li.zebra_header {} 
 ul.zebra li.zebra_footer {background-color: var(--clear);}