/* -------------------------------------------------- 
 * GLOBAL 
 --------------------------------------------------  */
 @charset "UTF-8";
 :root {
     /* Basics */
     --clear: #F2F2F2;
     --clear-grey: #FCFCFC;
     --white: #ffffff;
     --black: #12181B;
     --dark: #161E22;
     --text: #333333;
     --primary: #1199c2;
 }
 html, body {background-color: var(--clear);}
 a {
     cursor: pointer;
     color: var(--primary);
 }
 a:hover{
    transition: all .5s ease-in-out;
 }
 svg{width: inherit;height: inherit;}
 /* -------------------------------------------------- 
  * GOOGLE 
  --------------------------------------------------  */
 .grecaptcha-badge {
     display: none;
 }
 
 /* -------------------------------------------------- 
  * CKE 
  --------------------------------------------------  */
  .cke_notification_space, .cke_notifications_area {
     display: none !important;
 }
 
 /* -------------------------------------------------- 
  * FORM 
  --------------------------------------------------  */
 input:invalid {
     color: red;
 }
 
 /* -------------------------------------------------- 
  * COMMON 
  --------------------------------------------------  */
  .bg-clear, .bg_clear{
    background-color: var(--clear)!important;
}


#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;
  }
  #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;
    }
  }
  #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;
     z-index: 10000;
 }
 .c-branded__login{border-left: 8px solid var(--secondary); }
 @media only screen and (max-width: 40em) {
     .c-branded {
         border: none;
         border-top: 4px solid var(--secondary);
         width: 100vw;
         height: auto;
         position: absolute;
         top: 0;
     }
     .c-branded__login{border-top: 8px solid var(--secondary);}
 }

 
 
 /* Estilos para el menú de pestañas */
 .tabs-container, .tabs-container_aux {
     border-bottom: 1px solid #ccc;
     display: flex;
     margin: 0;
 }
 .tabs-container h3,
 .tabs-container h4, 
 .tabs-container_aux h3,
 .tabs-container_aux h4 {
     flex: 1 1 auto;
     padding: 0 0.5rem;
     margin: 0;
 }
 .tabs-container ul, .tabs-container_aux ul {
     flex: 0 1 auto;
 }
 ul.tabs, ul.tabs_aux {
     margin: 0;
     padding: 0;
     list-style: none;
 }
 ul.tabs li, ul.tabs_aux li {
     background: none;
     color: #222;
     display: inline-block;
     padding: 10px 15px;
     cursor: pointer;
 }
 ul.tabs li.current, ul.tabs_aux li.current {
     background: #ededed;
     color: #222;
     font-weight: bolder;
     border-bottom: 2px solid var(--secondary);
 }
 .tab-content, .tab-content_aux {
     display: none;
     overflow: hidden;
     margin: 0;
     background-color: white;
     padding: 0;
     -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 , .tab-content_aux.current {
     display: block;
 }
 
 /* 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:all .4s ease-in-out;
     width: 17rem;
     user-select: none;
     z-index: 999;
 }
 nav#menu ul li {
    position: relative;
}
 nav#menu ul {}
 nav#menu ul li {
    text-indent: 1rem;
    line-height: 1.5rem;
    display: list-item;
    min-height: 1rem;
    transition: all 1s ease-in-out;
 }
 @media (min-width: 728px)
 {
    nav#menu ul ul {
        display: none;
        overflow: hidden;
        transition: height 1s ease-in-out;
        height: auto;
        transform: scaleY(1);
        transform-origin: top;
    }
    nav#menu ul li:hover ul {
        display: block;
        margin-bottom: 1rem;
    }

    nav#menu ul li.children{
        position: relative;
    }
    nav#menu ul li.children::after{
        content: "";
        width:0.5rem;
        height:0.5rem;
        border-right: 0.2em solid white;
        border-top: 0.2em solid white;
        transform: rotate(-135deg);
        transition: all .5s ease-in-out;
        position:absolute;
        top:1.35rem; 
        right: 0.5rem;
        margin-left: -12px;
    }
    nav#menu ul li.children:hover::after{
        content: "";
        transform: rotate(135deg);
    }

}

nav#menu ul li ul{
    padding-left: 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);}



 .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 99999;
}
.modal-content {
    background: white;
    width: 80%;
    max-width: 800px;
    height: 80%;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal-header {
    padding: 10px;
    background-color: white;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.modal-header span {
    cursor: pointer;
    font-size: 20px;
    font-size: 1rem;
}
.modal-body {
    flex: 1;
    overflow: hidden;
}
iframe {
    width: 100%;
    height: 100%;
    border: none;
}


/* 
CALENDAR
*/
.calendar-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.calendar {
    width: auto;
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.calendar-header {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    line-height: 1.2rem;
    font-weight: bold;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.calendar-container .day-header{
    font-size: small;
}


.calendar-container .day {
    /* width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    background: #e3e3e3;
    position: relative;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s; */
    aspect-ratio: 1/1; /* siempre cuadrados */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: #e3e3e3;
    font-size: 14px;
    position: relative;
    transition: 0.2s;
}

.calendar-container .day-label {
    position: absolute;
    top: 2px;
    left: 5px;
    font-size: 0.8em;
    color: gray;
}
.calendar-container .day a {
    text-decoration: none;
    color: black;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.calendar-container .day:hover {
    background: #ddd;
}

.calendar-container .task-count {
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-size: 0.85rem;
    color: #fff;
    background: red;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
}
.calendar-container .today {
    font-weight: bold;
    background-color: var(--secondary);
    color: white!important;
}
.calendar-container .today:hover{
    background-color: #1f1f1f;
}
.calendar-container .today a { color: white !important; }
#calendar button, select {
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    cursor: pointer;
}
#calendar button:hover, #calendar select:hover {
    background-color: var(--secondary);
    color: white!important;
}

@media (min-width: 728px){
    .calendar-container {
        gap: 2rem;
    }
    .calendar-container .day {
        width: 6rem;
        height: 6rem;
        font-size: large;
    }
    .calendar-container .task-count{
        padding: 0.5rem 0.7rem;
    }
}


/* MISC */
.clean-p p{margin-bottom: 0 !important;}



/*Tailwind Colores*/
/* ===== ORANGE ===== */
.bg-orange-50 { background-color: #fff7ed; }
.bg-orange-100 { background-color: #ffedd5; }
.bg-orange-200 { background-color: #fed7aa; }
.bg-orange-300 { background-color: #fdba74; }
.bg-orange-400 { background-color: #fb923c; }
.bg-orange-500 { background-color: #f97316; }
.bg-orange-600 { background-color: #ea580c; }
.bg-orange-700 { background-color: #c2410c; }
.bg-orange-800 { background-color: #9a3412; }
.bg-orange-900 { background-color: #7c2d12; }

/* ===== EMERALD ===== */
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-emerald-200 { background-color: #a7f3d0; }
.bg-emerald-300 { background-color: #6ee7b7; }
.bg-emerald-400 { background-color: #34d399; }
.bg-emerald-500 { background-color: #10b981; }
.bg-emerald-600 { background-color: #059669; }
.bg-emerald-700 { background-color: #047857; }
.bg-emerald-800 { background-color: #065f46; }
.bg-emerald-900 { background-color: #064e3b; }

/* ===== TEAL ===== */
.bg-teal-50 { background-color: #f0fdfa; }
.bg-teal-100 { background-color: #ccfbf1; }
.bg-teal-200 { background-color: #99f6e4; }
.bg-teal-300 { background-color: #5eead4; }
.bg-teal-400 { background-color: #2dd4bf; }
.bg-teal-500 { background-color: #14b8a6; }
.bg-teal-600 { background-color: #0d9488; }
.bg-teal-700 { background-color: #0f766e; }
.bg-teal-800 { background-color: #115e59; }
.bg-teal-900 { background-color: #134e4a; }



/* Calendar */
#daysColumn tbody tr:hover,
#namesColumn td:hover {
background-color: rgb(229, 231, 235);
}

/* KANBAN */
.kanban-board {
	overflow-x: auto;
    width: 100dvw;
    margin-bottom: 1rem;   
}
.kanban-board p{
	margin-bottom: 0!important;
}
.kanban-column {
    transition: transform 0.2s ease, opacity 0.2s ease;
    padding-bottom: 2rem;
    min-width: 320px;
    max-width: 420px;
}
.kanban-cards {
	min-height: 50px;
    max-width: 420px;
    min-width: 280px;
}
.kanban-card {
	background: #fff;
	margin-bottom: 0.75rem;
	border-radius: 0.5rem;
	cursor: grab;
}
.kanban-card.placeholder {
    border: 2px dashed var(--primary);
    margin: 0.25rem 0;
    height: 3rem;
    background-color: rgba(59, 130, 246, 0.1);
    transition: all 0.2s;
}

@media (min-width: 728px){
    .kanban-board {
        padding-block: 2rem;
    }
}


/*
    COMMENTS    
*/
.comments{
    padding: 1rem;
}

   .comment {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 0.5rem;                      
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    background-color: white;
  }
  
  .comment__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid #f2f2f2;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    background-color: var(--clear-grey);
  }
  
  .comment__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
    width: 100%;
    font-size: 0.865rem;
  }
  .comment__author {
    font-style: normal;
  }
  
  .comment__author-link {
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .comment__author-link:hover {
    color: var(--secondary);
  }
  
  .comment__time {
    font-size: 0.865rem;
    color: var(--text);
  }
  
  .comment__body {
    line-height: 1.625;
  }
  
  .comment__footer {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--text);
  }
  
  .comment__reply {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: var(--secondary);
    transition: color 0.2s ease;
  }
  
  .comment__reply:hover {
    color: var(--primary);
  }
  
  .comment__id {
    display: none;
  }
  
  .comment p {
    margin: 0;
    padding: 0;
  }
  
  .comment--child {
    margin-left: 1.5rem;
    border-left: 2px solid var(--secondary);
    padding-left: 1rem;
  }
  

  
/* Scroll to Top */
/* Estilos del botón */
#scrollTopBtn {
    opacity: 0; /* Inicialmente invisible */
    pointer-events: none; /* Evita clic cuando invisible */
    position: fixed;
    bottom: 1.15rem;
    right: 1.15rem;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.6); /* Negro con transparencia */
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.4s ease; /* Transición suave */
  }

  #scrollTopBtn:hover {
    background-color: rgba(0, 0, 0, 0.9);
  }

  /* Clase para mostrar */
  #scrollTopBtn.show {
    opacity: 1;
    pointer-events: auto;
  }



  /*
   * SUGGESTIONS
   */
   #suggestions {
    border: 1px solid #ccc;
    background: #fff;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    z-index: 100;
    width: 100%;
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
  }
  #suggestions li {
    padding: 6px 10px;
    cursor: pointer;
  }
  #suggestions li:hover {
    background: #f5f5f5;
  }


  /*
    Autocomplete // Sugerencias
  */
.place-group { position: relative;  }
.place-group .sugerencias {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    width: 100%;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}
.place-group .sugerencias div {
    padding: 8px;
    cursor: pointer;
}
.place-group .sugerencias div:hover {
    background: #f0f0f0;
}