.estado0{
    border-left:solid 3px #FFFF00 !important;
  }
  .estado0-b{
    background-color :#FFFF00 !important;
    color:black;
  }
  .estado0-bd{
     border:solid 1px #FFFF00 !important;
  }
  .estado1{
    border-left:solid 5px #fc8308 !important;
   
  }
  .estado1-b{
    background-color :#fc8308 !important;
    color:white;
  }
  .estado1-bd{
    border:solid 1px #fc8308 !important;
  }
  .estado2{
    border-left:solid 3px #2034e4 !important;
  }
  .estado2-b{
    background-color :#2034e4 !important;
    color:white;
  }
  .estado2-bd{
    border:solid 1px #2034e4 !important;
  }
  .estado3{
    border-left:solid 3px #00FFFF !important;
  }
  .estado3-b{
    background-color :#00FFFF !important;
    color:black;
  }
  .estado3-bd{
    border:solid 1px #00FFFF !important;
  }
  .estado4{
    border-left:solid 3px  #207008 !important;
  }
  .estado4-b{
    background-color :#207008 !important;
    color:#f8fafa;
  }
  .estado4-bd{
    border:solid 1px #207008 !important;
  }
  .estado5{
    border-left:solid 3px  #0a0004 !important;
  }
  .estado5-b{
    background-color :#0a0004 !important;
    color:rgb(255, 255, 255);
  }
  .estado5-bd{
    border:solid 1px #0a0004 !important;
  }
  
  .formularios span{
    padding-left: 0.5rem !important;
  }
  .formularios .table{
    table-layout: fixed;
    width: 100%;
  }
  .formularios .form-label{
    font-size: 12px;
  }
  
  .stepwizard-step p {
    margin-top: 10px;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

.container-filter {
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 30px;
  padding: 0;
  text-align: center;
}

.container-filter li {
  list-style: none;
  display: inline-block;
}

.container-filter a {
  display: block;
  font-size: 14px;
  margin: 10px 20px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 400;
  line-height: 30px;
  -webkit-transition: all 0.6s;
  border-bottom: 1px solid transparent;
  color: #807c7c !important;
}

.container-filter a:hover {
  color: #222222 !important;
}

.container-filter a.active {
  color: #222222 !important;
  border-bottom: 1px solid #222222;
}

.item-box {
  position: relative;
  overflow: hidden;
  display: block;
}

.item-box a {
  display: inline-block;
}

.item-box .item-mask {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
  position: absolute;
  transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  text-align: center;
}

.item-box .item-mask .item-caption {
  position: absolute;
  width: 100%;
  bottom: 10px;
  opacity: 0;
}

.item-box:hover .item-mask {
  opacity: 1;
  visibility: visible;
  cursor: pointer !important;
}

.item-box:hover .item-caption {
  opacity: 1;
}

.item-box:hover .item-container {
  width: 100%;
}

.services-box {
  padding: 45px 25px 45px 25px;
}

@media only screen and (max-width:768px) {
    .logo{
        width: 100px;
    }
}
@media only screen and (min-width:768px) {
  .logo{
      width: 145px;
  }
}
div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
}
div.scrollmenu .contenedorvideos {
  display: inline-block;
  text-align: left;
  text-decoration: none;
}
.scrollmenu::-webkit-scrollbar{
  display: none;
}
.ng-invalid-pattern{
  border-color: #dc3545;
}
.ng-invalid-minlength{
  border-color: #dc3545;
}
.list-group-item.list-group-item-action:hover.bancolista{
 background-color: #222222 !important;
}
#principiomain.dark .gridster .form-control:disabled {
  color: #ffffff !important;
  opacity: 1 !important;
}
#principiomain .gridster .form-control:disabled {
  color: #000000 !important;
  opacity: 1 !important;
}
.texto-cont1{
  text-align: center;
  color: #deb987;
  font-size: 18px;
 font-weight: 900;
}
.whooping-cta-personal {
  position: relative;
background: radial-gradient(circle 1092px at 63.6% 51.7%, #293843 0%, #283552 81.5%, rgb(40 67 100) 51.5%, rgb(41 44 70) 88.6%);
}
.whooping-cta-personal-3 {
  position: relative;
  background-image: radial-gradient(circle 1092px at 63.6% 51.7%, #293843 0%, #283552 81.5%, rgb(40 67 100) 51.5%, rgb(41 44 70) 88.6%);
}
.whooping-cta-empresa{
  position: relative;
  background: linear-gradient(110deg, #0c1c43 15%, #162c5e 18%, #222834 28%, #243763 80%);
}
.whooping-cta-industria{
  position: relative;
  background: radial-gradient(circle 1092px at 63.6% 51.7%, rgb(5 79 71) 0%, #283552 81.5%, rgb(30 63 79) 51.5%, rgb(37 54 81) 88.6%);
}
.whooping-cta-comunidad{
  position: relative;
  background-image: radial-gradient(circle 582px at 63.6% 51.7%, rgb(30 62 79) 0%, #283552 81.5%, rgb(40 67 100) 51.5%, rgb(30 63 79) 88.6%);
}
.whooping-cta-comunidad-2 {
  position: relative;
  background-image: radial-gradient(circle 1092px at 63.6% 51.7%, #ed200099 0%, #283552 81.5%, rgb(40 67 100) 51.5%, rgb(41 44 70) 88.6%);
}
.whooping-cta-personal-4 {
  position: relative;
  background-image: radial-gradient(circle 1092px at 63.6% 51.7%, #bb9791 0%, #283552 81.5%, rgb(40 67 100) 51.5%, rgb(41 44 70) 88.6%);
}
.whooping-cta-empresa-4 {
  position: relative;
  background-image: radial-gradient(circle 1092px at 63.6% 51.7%, #3c334b 0%, #283552 81.5%, rgb(40 67 100) 51.5%, rgb(41 44 70) 88.6%);
}
.whooping-cta-inf{
  position: relative;
  background: radial-gradient(circle 1092px at 63.6% 51.7%, rgb(5 79 71) 0%, #283552 81.5%, rgb(28 63 78) 51.5%, rgb(37 54 81) 88.6%);
 
}
.whooping-cta-banner{
  position: relative;
  background-image: radial-gradient(circle 1092px at 63.6% 51.7%, rgb(25 63 75) 0%, #283552 81.5%, rgb(40 67 100) 51.5%, rgb(41 44 70) 88.6%);
}
.whooping-cta-comunidad-3{
  position: relative;
  background-image: radial-gradient(circle 1092px at 63.6% 51.7%, rgb(65 77 98) 0%, #283552 81.5%, rgb(238 33 35) 51.5%, rgb(40 53 82) 88.6%);
}
.whooping-cta-personal-2{
  position: relative;
  background-image: radial-gradient(circle 1092px at 63.6% 51.7%, #31617c 0%, #283552 81.5%, rgb(40 67 100) 51.5%, rgb(41 44 70) 88.6%);
}
.whooping-cta-banner-5{
  position: relative;
  background-image: radial-gradient(circle 1100px at 63.6% 51.7%, #101f46 0%, #101f46 81.5%, rgb(16 31 70) 51.5%, rgb(16 31 70) 18.6%); 
}
.detalle-m-gros-cont{
  color: white;
  font-size: 16px;
}
.noti-titulo{
  color: #6b75ce;
  font-size: 18px;
  font-weight: bold;
} 
.text-IA-motor{
  background: linear-gradient(180deg, #25b003 0%, #2990ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background-clip: text;
}
.text-IA-motor-2{
background: linear-gradient(180deg, #505f4e 0%, #edf0f3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(0, 0, 0, 0);
background-clip: text;
}
.text-IA-motor-3{
  background: linear-gradient(180deg, #29abff 0%, #edf0f3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background-clip: text;
}
.gradient-text-1{
  background: linear-gradient(to top, #f7f8f3 3.21%, rgb(222 184 135) 68.35%, #d8cdcb 98.68%, #9fa6bc 98.69%), #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background-clip: text;
}
.gradient-text-2{
  background-clip: text;
  background: linear-gradient(197.02deg, #cbe2e2 11.41%, rgb(30 58 75) 107.7%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background-clip: text;
}
.gradient-text-3{
  background: -o-linear-gradient(252.98deg, #28e4ff 11.41%, rgba(97, 198, 255, 0) 107.7%);
  background: linear-gradient(197.02deg, #28e4ff 11.41%, rgba(97, 198, 255, 0) 107.7%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background-clip: text;
}
.gradient-text-4 {
  background: -o-linear-gradient(252.98deg, #28e4ff 11.41%, rgba(97, 198, 255, 0) 107.7%);
  background: linear-gradient(3deg, #ffea28 11.41%, #25b003 107.7%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background-clip: text;
}
.gradient-text-5 {
  background: -o-linear-gradient(252.98deg, #28e4ff 11.41%, rgba(97, 198, 255, 0) 107.7%);
  background: linear-gradient(3deg, #e4e3db 11.41%, #8eaa87 107.7%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background-clip: text;
}
.gradient-text-7 {
  background-clip: text;
  background: linear-gradient(197.02deg, #43b2d8 11.41%, rgb(172 196 199) 107.7%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background-clip: text;
}
.badge-login {
  text-transform: uppercase;
  padding: 2px 8px;
  background-color: var(--phoenix-badge-bg);
  color: var(--phoenix-badge-color);
  border: 1px solid var(--phoenix-badge-border-color);
}
.whooping-cta-personal-5 {
  position: relative;
  background: radial-gradient(circle 1100px at 63.6% 51.7%, #112860 0%, #112860 81.5%, rgb(17 40 96) 51.5%, rgb(17 40 96) 18.6%);
}
.whooping-cta-banner-6{
  position: relative;
  background: radial-gradient(circle 1092px at 63.6% 51.7%, rgb(41 66 90) 0%, #2a485f 81.5%, rgb(38 51 80) 51.5%, rgb(42 71 93) 88.6%);
}
.whooping-cta-canal {
  position: relative;
  background: radial-gradient(circle 392px at 63.6% 51.7%, rgb(5 79 71) 0%, #283552 81.5%, rgb(29 62 79) 51.5%, rgb(37 54 81) 88.6%);
}
.star-adminitracion-comunidad{
  color: tomato !important;
}
.star-visita{
  color: green !important; 
}
.star-administrador-normal{
  color: skyblue !important;
}
.star-user{
  color: goldenrod !important;
}
.texto-cont-verde {
  color: #63b143;
  font-size: 18px;
  font-weight: 900;
}
.text-categorias-1 {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to top, #0c08dc, #7e969d 22%, #60c6ff 59%, #3874ff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 600;
  font-size: 23px;
}
.gradient-text-cat {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to top, #363a3f, #fff 80%);
  -webkit-background-clip: text;
  background-clip: text;
}
#principiomain.dark .chatBotIA a.active{
  background-color: #393939;
  color: white;
  border-radius: 5px;
}
#principiomain .chatBotIA a.active{
  background-color: #fff;
  color: rgb(126, 126, 126);
  border-radius: 5px;
}
.chatBotIA a.hover{
  background-color: #e0e0e0;
  color:#007bff;
  border-radius: 5px;
}
.chatBotIA a.active p, .chatBotIA a:hover p{
  font-weight: bold;
}

#principiomain.dark .chatBotIAPortada div.active{
  background-color: rgba(47, 53, 99, 0.27);
  color: white;
  border-radius: 5px;
}
#principiomain .chatBotIAPortada div.active{
  background-color:rgba(47, 53, 99, 0.27);
  color: white;
  border-radius: 5px;
}
.chatia{
  background-color:rgba(47, 53, 99, 0.27);
  border:0px
}
.campo-info h6 {
  font-weight: 600;
  font-size: 0.875rem;
}
.campo-info p {
  font-size: 0.875rem;
}
/* Por defecto (tema claro) */
.img-gpt {
  content: url('../assets/img/spot-illustrations/gptb.png');
}
.img-chatbots {
  content: url('../assets/img/spot-illustrations/38.webp');
}

/* Cuando el body tiene la clase dark */
#principiomain.dark .img-gpt {
  content: url('../assets/img/spot-illustrations/gptw.png');
}
#principiomain.dark .img-chatbots {
  content: url('../assets/img/spot-illustrations/dark_38.webp');
}
#myTabContent {
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

#myTabContent::-webkit-scrollbar {
  width: 6px;
}

#myTabContent::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 4px;
}
* Asegúrate de que el contenedor de la lista de pestañas use flex */
#myTab {
  display: flex;          /* Alinea los elementos horizontalmente */
  justify-content: flex-start; /* Alinea los elementos al inicio */
  align-items: center;    /* Centra los elementos verticalmente */
  flex-wrap: nowrap;      /* Evita que los elementos se envuelvan a la siguiente línea */
}

/* Opcional: Si quieres un pequeño espacio entre los elementos */
#myTab .nav-item {
  margin-right: 10px;     /* Ajusta el margen entre los elementos de la lista */
}
#myTabBanco .nav-link {
  display: block; /* Asegura que el texto se envuelva y no quede en una línea */
  word-wrap: break-word; /* Permite que las palabras largas se rompan y se ajusten */
  white-space: normal; /* Asegura que el texto se ajuste dentro del contenedor */
  max-width: 200px; /* Establece un límite de ancho para el contenedor */
}
.colored-toast.swal2-icon-success {
  background-color: #3a8d0a !important;
}

.colored-toast.swal2-icon-error {
  background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
  background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
  background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
  background-color: #87adbd !important;
}

.colored-toast .swal2-title {
  color: white;
}

.colored-toast .swal2-close {
  color: white;
}

.colored-toast .swal2-html-container {
  color: white;
}
.doc-structured { outline:1px dashed #9aa; padding:.5em; border-radius:.35em; }
.doc-structured .toc { border:1px solid #eee; padding:.5em .7em; border-radius:.4em; background:#fafafa; margin:.5em 0 1em; }
.hl {
  background: #018b77;  /* amarillo suave */
  padding: 0 .15em;
  border-radius: .2em;
  color: white;
}

.doc-html { font-size:16px; line-height:1.7; color:#222; }
.doc-html .toc { border:1px solid #eee; padding:.6em .8em; border-radius:.5em; background:#fafafa; margin:.6em 0 1em; }
.doc-html .toc ul { margin:.4em 0 0 1.1em; }
.doc-html h2 { margin:1.2em 0 .5em; font-size:1.4rem; }
.doc-html h3 { margin:1em 0 .4em; font-size:1.15rem; }
.doc-html dl.features { display:grid; grid-template-columns:max-content 1fr; gap:.35em .8em; margin:.7em 0; }
.doc-html dt { font-weight:600; }
.doc-html dd { margin:0; }
.doc-html .hl { background:#fff3a3; padding:0 .15em; border-radius:.25em; }
.kv-list { margin:.7em 0; padding-left:1.2em; }
.kv-list li { margin:.25em 0; }
.kv-list li > ul { margin:.35em 0 .35em 1.2em; } /* listas anidadas si aparecen */
.kv-list strong { font-weight:600; }
.doc-structured .kv-list { margin:.6em 0; padding-left:1.2em; }
.doc-structured .kv-list li { margin:.25em 0; }
.doc-structured h3 { margin:.7em 0 .35em; font-size:1.1rem; }


/* base */
/*#myKanban {
  overflow-x: auto; 
  white-space: nowrap; 
  height: 600px;
  display: flex;
  align-items: flex-start;
}
#myKanban .kanban-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 15px;
  width: max-content;
}
#myKanban .kanban-board {
  position: relative;
  width: 320px !important;
  min-width: 260px !important;
  transition: width 0.2s ease;
  overflow: visible; 
  box-sizing: border-box;
  height: 100%;
  flex: 0 0 auto !important;
}

#myKanban .kanban-board.is-collapsed {
  width: 60px !important;
  min-width: 60px !important;
  height: 100% !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#myKanban .kanban-board.is-collapsed .kanban-drag {
  visibility: hidden;
  pointer-events: none;
}

#myKanban .kanban-board.is-collapsed .kanban-title {
  padding: 0 !important;
  overflow: visible !important;
}

#myKanban .kanban-board.is-collapsed .kanban-title-board {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-orientation: mixed;
  inset: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#myKanban .kb-collapse {
  margin-left: auto;
  width: 26px;
  height: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#myKanban .kb-collapse::before {
  content: "⟨";
  line-height: 24px;
  text-align: center;
  user-select: none;
}

#myKanban .kanban-board.is-collapsed .kb-collapse.kb-float::before {
  content: "⟩";
}

#myKanban .kb-count {
  position: absolute;
  right: 8px;
  top: 48px;
  z-index: 2;
  background: var(--fkb-pill-bg, beige);
  color: #222;
  border-radius: 999px;
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

#myKanban .kanban-container .kanban-item {
  padding: 0 !important;
  margin-bottom: 0 !important;
}

#myKanban .kanban-badge {
  background-color: beige;
  font-weight: 600;
  margin-left: 0.5rem;
  color: black;
  line-height: 1;
  display: inline;
  border-radius: var(--phoenix-border-radius-pill, 9999px);
  padding: 4px 9px;
}

#myKanban .kanban-board.is-collapsed .kanban-badge {
  bottom: 0;
  left: 50%;
  position: relative; 
  transform: translateX(-50%) rotate(90deg);
  font-size: 1.1em;
  padding: 2px 8px;
  border-radius: 50%;
}
.kanban-board header{
    font-size: 16px !important;
    padding: 0px !important;
}

.fkb-padre {
  flex: 0 0 112px;  
  width: 112px;
  min-width: 0;
}

.fkb-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  gap: 0.5rem;
  white-space: normal !important; 
}

.fkb-icon {
  width: 100%;
  height: 72px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.fkb-label {
  font-size: 0.9rem;
  color: var(--bs-secondary-color, #adb5bd);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
*/

/* Estilo solo cuando colapsado */
.kanban-board{
  overflow-y: scroll;
  max-height: 544px;
  flex: 0 0 auto !important;
  float: none !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.8) transparent;
}

.kanban-board:not([data-id="_default"]) > header {
  background: var(--phoenix-input-group-addon-bg);
  border: 1px solid var(--phoenix-border-color);
}

.kanban-board.is-collapsed{
  overflow-y: hidden;
  height: 100vh !important;
}
.kanban-board.is-collapsed .kb-h {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 100%;
  gap: 10px;
}

.kanban-board.is-collapsed .buttons-container {
  order: 0;
  width: 100%;
  justify-content: center;
}

.kanban-board.is-collapsed .title-container {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kanban-board.is-collapsed header{
  height: 100vh !important;
}
.kanban-board.is-collapsed .kb-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kanban-board .kanban-drag{
  min-height: 100px;
}
.kanban-drag{
  padding: 0px !important;
}
.kanban-item{
  padding: 0px !important;
  margin-bottom: 0px !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  font-size:13px
}
#myKanban {
  overflow-x: scroll;       /* Scroll horizontal */
  overflow-y: hidden;     /* Evita que aparezca scroll vertical en el contenedor */
  white-space: nowrap;    /* Previene salto de línea entre tableros */
  height: 100%;           /* O ajusta según tu layout */
  scrollbar-width: auto; /* Para Firefox */
}
#myKanban .kanban-board.is-collapsed{
  width:60px !important;
  min-width:60px !important; 
}
#myKanban .kanban-board{
  width: 350px !important;
  min-width: 260px !important;
  transition:width .2s ease !important;
}
#myKanban .kanban-container {
  display: flex;
  flex-wrap: nowrap; 
  gap: 15px;    
  align-items: flex-start;
  width: max-content;

}
#myKanban::-webkit-scrollbar {
  height: 8px;           /* Altura visible */
}

#myKanban::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.6);
  border-radius: 4px;
}

#myKanban::-webkit-scrollbar-track {
   background: transparent; 
}
#myKanban::-webkit-scrollbar-track:hover {
  background: transparent;  /* también transparente en hover */
}

#myKanba::-webkit-scrollbar-thumb:hover {
  background: rgba(148,163,184,0.9);
}
#myKanban.scroll-right::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 20px;
  background: linear-gradient(to left, rgba(0,0,0,1.1), transparent);
  pointer-events: none;
}

/* filtros */
.kb-title {
  color: var(--phoenix-gray-900);
}
.fkb-padre{
  flex: 0 0 112px;  
  min-width: 0;
}

.fkb-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  gap: .5rem;
  white-space: normal !important; 

}

.fkb-icon{
  width: 100%;
  height: 72px;      
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;   
  background: var(--phoenix-input-group-addon-bg);
  border: var(--phoenix-border-color) 1px solid ;
}
.fkb-icon.fkb-active{
  --phoenix-bg-opacity: 1;
  background-color: rgba(var(--phoenix-primary-rgb), var(--phoenix-bg-opacity)) !important;
}
.qa-active{
  --phoenix-bg-opacity: 1;
  background-color: rgba(var(--phoenix-primary-rgb), var(--phoenix-bg-opacity)) !important;
}
.qa-filtros{
  background: var(--phoenix-input-group-addon-bg);
  border: var(--phoenix-border-color) 1px solid ;
  color: var(--phoenix-gray-900);
}
.fkb-label{
  font-size: clamp(0.6rem, 1.5vw, 0.8rem);
  color: var(--phoenix-gray-900);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;     
}
[data-id="_default"].kanban-board{
  background:transparent;
}
[data-id="_default"] .kanban-item{
  background:transparent;
}
.kb-prose { line-height: 1.6; }
.kb-prose p { margin: .5rem 0; }
.kb-prose ul, .kb-prose ol { margin: .5rem 0 .5rem 1.25rem; }
.kb-prose mark {
  background: var(--phoenix-warning-bg, #fff3cd);
}
.mark-context {
  display: inline-block;
  margin-right: 4px;
  border-radius: 6px;
  color: #000;
  font-weight: 600;
  font-size: 16px;
}

.kb-prose ol { 
  list-style: decimal; 
  margin: .5rem 0 .5rem 1.25rem; 
  padding-left: 1.25rem; 
}
.kb-prose li { display: list-item; margin: .25rem 0; font-size: 16px;}
.kb.prose li strong { font-size: 18px;}
.kb-prose p { margin: .5rem 0; line-height: 1.6; font-size: 16px; }
.citas-ordenadas { margin: .5rem 0 .5rem 1.25rem; line-height: 1.6; }
.citas-ordenadas > li { margin: .25rem 0 .75rem; }
.cita { line-height: 1.6; margin: .25rem 0 .75rem; }   /* <-- sin numeración externa */
.qa-fases { margin: .25rem 0 .25rem 1.25rem; }
.qa-fases > li { margin: .25rem 0; }
.qa-sublist { margin: .15rem 0 .3rem 1.25rem; }
.qa-sublist > li { margin: .15rem 0; }
.orig-cite { opacity: .7; margin-right: .35rem; }
.kb-text-area{
  font-size: 1.1em; /* Un 10% más grande que la fuente base */
  line-height: 1.4; /* Opcional: mejora la legibilidad */
}
#textareagpt{
  font-size: 1.1em; /* Un 10% más grande que la fuente base */
  line-height: 1.4; /* Opcional: mejora la legibilidad */
}
.kanban-item.is-hidden { display: none !important; }
.kanban-board.board-hidden { display: none !important; }
/*no drag :default*/
/*[data-id="_default"] {
  pointer-events: none;
  cursor: pointer;
}
.kanban-board.no-drag-board .kanban-drag {
  pointer-events: none;
  cursor: not-allowed;
}*/
/* Ajustes generales de botones SweetAlert2 cuando usamos buttonsStyling:false */
.swal2-actions .swal2-styled { margin: 0 !important; min-width: 0; }

/* Desktop/tablet: mantiene fila con crear izq y login+cancel der */
.swal-mobile .swal2-actions { display: flex; }

/* MÓVIL: apila y ocupa ancho completo, en el orden: Crear cuenta, Log In, Cancel */
@media (max-width: 480px) {
  .swal-mobile.swal2-popup { width: calc(100vw - 2rem) !important; }
  .swal-mobile .swal2-actions {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .swal-mobile .swal2-actions .swal2-styled { width: 100%; }
  .swal-mobile .swal2-actions .swal2-deny { order: 0; }     /* Crear cuenta */
  .swal-mobile .swal2-actions .swal2-confirm { order: 1; }  /* Log In */
  .swal-mobile .swal2-actions .swal2-cancel { order: 2; margin:0px !important}   /* Cancel */
}
/* menu izquierdo*/
/* ===== ICONO BASE (LIGHT) ===== */
#navbarVerticalNav .nav-link-icon,
#navbarVerticalNav .nav-link-icon i {
  color: #2c2c2c; /* oscuro visible en fondo blanco */
}

/* ===== TEXTO BASE ===== */
#navbarVerticalNav .nav-link-text {
  color: #2c2c2c;
}

/* ===== HOVER ===== */
#navbarVerticalNav .nav-link:hover {
  background: rgba(0, 0, 139, 0.15);
}

#navbarVerticalNav .nav-link:hover .nav-link-text {
  color: black;
}

/* ===== ACTIVO ===== */
#navbarVerticalNav .menuactive {
  background: darkblue;
}

#navbarVerticalNav .menuactive .nav-link-text,
#navbarVerticalNav .menuactive .nav-link-icon,
#navbarVerticalNav .menuactive .nav-link-icon i {
  color: white;
}

/* ===== DARK MODE ===== */
#principiomain.dark #navbarVerticalNav .nav-link-icon,
#principiomain.dark #navbarVerticalNav .nav-link-icon i {
  color: white;
}

#principiomain.dark #navbarVerticalNav .nav-link-text {
  color: #e0e0e0;
}

/* hover en dark */
#principiomain.dark #navbarVerticalNav .nav-link:hover {
  background: rgba(0, 0, 139, 0.4);
}

#principiomain.dark #navbarVerticalNav .nav-link:hover .nav-link-text {
  color: white;
}

/* activo en dark */
#principiomain.dark #navbarVerticalNav .menuactive {
  background: #00008b;
}
#principiomain.dark .btn-close {
  filter: invert(1);
}
.board_user{
  background: #31374a !important;
}
/* header libro admin*/
.board_admin{
  background: #ff6348 !important;
  border: 1px solid #ff6348 !important;
}
.board_admin .kanban-title-text{
  color: black !important;
}
.board_normal{
  background:#dfdfdf  !important;
  border: 1px solid #dfdfdf !important;
}
.board_normal .kanban-title-text{
  color: black !important;
}
.board_compartido{
  background: #daa520 !important;
  border: 1px solid #daa520 !important;
}
.board_compartido .kanban-title-text{
  color: black !important;
}
.board_footer_compartir{
  background: #daa520 !important;
  color:black !important;
  border: 1px solid #daa520 !important;
}
.board_footer_compartir .form-check-label{
  color: black !important;
}
.board_compartido .btn-opts{
  color: black !important;
}
/* footer libro admin*/
.board_footer_admin{
  background: #ff6348 !important;
  color:black !important;
  border: 1px solid #ff6348 !important;
}
.board_footer_admin .form-check-label{
  color: black;
}
.board_admin .btn-opts{
  color: black !important;
}
.kb-composer{
  background: #dfdfdf !important;
  color: black !important;
  border: 1px solid #dfdfdf !important
}
.kb-composer .form-check-label{
  color: black !important;
}
.board_normal .btn-opts{
  color: black !important;
}
#principiomain.dark .bg-chatmotor{
  background: rgb(46, 46, 46);
}
#principiomain .bg-chatmotor{
  background:#dfdfdf;
}
#principomain .texto_general {
    color: #262626 !important;
}
#principiomain.dark .texto_general{
  color: white !important;
}
#principiomain.dark .paneliamotor {
  padding: 0.5rem;
  margin: 0rem -0.75rem 0;
  border: 1px solid #363636;
  border-radius: 5px;
}

#principiomain .paneliamotor{

  padding: 0.5rem;
  margin: 0rem -0.75rem 0;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
}
.menuder::first-letter { text-transform: uppercase; }
.menutop{
  font-size: 16px !important;
}
/* frmula matematica*/


.block {
    background: #1976d2;
    color: white;
    padding: 6px;
    margin-bottom: 5px;
    cursor: grab;
}

.block.variable {
    background: #2e7d32;
}

.formula {
    min-height: 50px;
    border: 1px dashed #aaa;
    padding: 10px;
}

.token {
    font-size: 22px;
    margin-right: 4px;
}

.token.var {
    cursor: pointer;
    font-weight: bold;
    color: #1565c0;
}

.var-selector {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    z-index: 1000;
}

.var-option {
    padding: 5px 10px;
    cursor: pointer;
}

.var-option:hover {
    background: #eee;
}
.pdf-toolbar {
  background: #222;
  color: white;
  padding: 6px;
  display: flex;
  gap: 8px;
}
.pdf-toolbar button {
  background: #444;
  color: white;
  border: none;
  padding: 6px 10px;
}
.pdf-wrapper {
  width: 100%;
  position:relative;
  justify-content: center;   /* centra si sobra espacio */
  overflow-x: auto;
}

#pdfCanvas {
  display: block;
  position: relative;
  z-index: 1;
}
#overlayCanvas{
  position: absolute;     /* 🔑 CLAVE */
  left: 0;
  top: 0;
  z-index: 10;            /* 🔑 CLAVE */
  pointer-events: none;
}
.progress {
  height: 22px;
}

.progress-bar {
  font-size: 12px;
  font-weight: 600;
}
.formularios {
 /* overflow: hidden;*/
  min-height: 80px;
}

.formularios .inputfile-wrapper {
  height: auto;
  overflow: visible;
}
.formularios .item-select{
  height: auto;
  overflow: visible !important;
}

.formularios .inputfile-item {
  position: relative;
  width: 100%;
  height: auto;
}

.formularios .avatar-3xl,
.formularios .avatar-3xl img {
  width: 100%;
  height: auto;
  display: block;
}

.multimedia-img-container {
  width: 100%;
  overflow: hidden;
}

.multimedia-img {
  width: 100%;
  height: auto;   /* ← importante */
  object-fit: contain;
  display: block;
}

gridster-item {
  box-sizing: border-box;
}






 :root {
      --bg-base:      #0c0e14;
      --bg-surface:   #13161f;
      --bg-elevated:  #1a1e2b;
      --bg-hover:     #222638;
      --border:       rgba(255,255,255,0.07);
      --border-light: rgba(255,255,255,0.12);
      --accent:       #4f7cff;
      --accent-glow:  rgba(79,124,255,0.25);
      --accent-soft:  rgba(79,124,255,0.12);
      --text-primary: #e8eaf2;
      --text-muted:   #6b7280;
      --text-dim:     #9ca3af;
      --tag-mine:     #1e293b;
      --tag-shared:   #1a2e1f;
      --tag-general:  #2d1e1e;
      --tag-total:    #1e2030;
      --radius-sm:    6px;
      --radius-md:    10px;
      --radius-lg:    14px;
    }
    /*
    ** barrar de pagina ia 
    */
    /* ── TEMA CLARO (cuando body NO tiene .dark) ── */
    #principiomain:not(.dark) {
      --bg-base: #f0f2f7;
      --bg-surface: #e9e8e8;
      --bg-elevated: #f7f8fc;
      --bg-hover: #eceef5;
      --border: rgba(0, 0, 0, 0.08);
      --border-light: rgba(0, 0, 0, 0.14);
      --accent: #3a6aff;
      --accent-glow: rgba(58, 106, 255, 0.18);
      --accent-soft: rgba(58, 106, 255, 0.10);
      --text-primary: #111827;
      --text-muted: #6b7280;
      --text-dim: #4b5563;
      --tag-mine: #dce8ff;
      --tag-shared: #d4f0e0;
      --tag-general: #fde8e8;
      --tag-total: #e8e8f8;
       --radius-sm:    6px;
      --radius-md:    10px;
      --radius-lg:    14px;
    }

    /* ── TEMA OSCURO (cuando body tiene .dark) ── */
    #principiomain.dark {
      --bg-base: #0c0e14;
      --bg-surface: #13161f;
      --bg-elevated: #1a1e2b;
      --bg-hover: #222638;
      --border: rgba(255, 255, 255, 0.07);
      --border-light: rgba(255, 255, 255, 0.12);
      --accent: #4f7cff;
      --accent-glow: rgba(79, 124, 255, 0.25);
      --accent-soft: rgba(79, 124, 255, 0.12);
      --text-primary: #e8eaf2;
      --text-muted: #6b7280;
      --text-dim: #9ca3af;
      --tag-mine: #1e293b;
      --tag-shared: #1a2e1f;
      --tag-general: #2d1e1e;
      --tag-total: #1e2030;
       --radius-sm:    6px;
      --radius-md:    10px;
      --radius-lg:    14px;
    }
    *, *::before, *::after { box-sizing: border-box; }

    /*body {
      background: var(--bg-base);
      font-family: 'DM Sans', sans-serif;
      color: var(--text-primary);
      min-height: 100vh;
      padding: 40px 24px;
    }*/

    /* ── PAGE LABEL ── */
    .page-label {
      font-family: 'Syne', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 20px;
    }

    /* ── TOOLBAR CARD ── */
    .toolbar-card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.20);
    }

    /* ── ROW 1 ── */
    .row-primary {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* Toggle */
    .analysis-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: border-color .2s, background .2s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .analysis-toggle:hover { border-color: var(--border-light); background: var(--bg-hover); }
    .analysis-toggle.active { border-color: var(--accent); background: var(--accent-soft); }

    .toggle-track {
      display: none; /* replaced by Bootstrap form-switch */
    }
    .analysis-toggle .form-check-input {
      background-color: var(--bg-hover);
      border-color: var(--border-light);
      cursor: pointer;
      width: 2.2em;
    }
    .analysis-toggle .form-check-input:checked {
      background-color: var(--accent);
      border-color: var(--accent);
    }
    .analysis-toggle .form-check-input:focus {
      box-shadow: 0 0 0 3px var(--accent-glow);
      border-color: var(--accent);
    }
    .active .toggle-track { background: var(--accent); }
    .toggle-thumb { display: none; }
    .toggle-label {
      font-family: 'Syne', sans-serif;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-dim);
    }
    .active .toggle-label { color: var(--text-primary); }

    /* Documents dropdown */
    .doc-select {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-md);
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      transition: border-color .2s, background .2s;
      white-space: nowrap;
      flex-shrink: 0;
      position: relative;
    }
    .doc-select:hover { border-color: var(--accent); background: var(--bg-hover); }
    .doc-select i.bi-chevron-down { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
    .doc-text {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .doc-item.parent {
      font-weight: bold;
      cursor: pointer;
    }

    .doc-children {
      padding-left: 15px;
      overflow:visible;
      border-left: 1px solid #eee;
    }

    .doc-item.child {
      cursor: pointer;
    }
    /* Search input */
    .search-wrap {
      flex: 1;
      position: relative;
    }
    .search-input {
      width: 100%;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 8px 36px 8px 38px;
      color: var(--text-primary);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      outline: none;
      transition: border-color .2s, box-shadow .2s, border-radius .15s;
    }
    .search-input::placeholder { color: var(--text-muted); }
    .search-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }
    .search-input.open {
      border-radius: var(--radius-md) var(--radius-md) 0 0;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }
    .search-icon {
      position: absolute;
      left: 12px; top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      font-size: 14px;
      pointer-events: none;
      transition: color .2s;
      z-index: 2;
    }
    .search-input.open ~ .search-icon { color: var(--accent); }
    .search-clear {
      position: absolute;
      right: 10px; top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      font-size: 13px;
      cursor: pointer;
      z-index: 2;
      padding: 2px;
      transition: color .15s;
    }
    .search-clear:hover { color: var(--text-primary); }

    /* Search dropdown */
    .search-dropdown {
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: var(--bg-elevated);
      border: 1px solid var(--accent);
      border-top: none;
      border-radius: 0 0 var(--radius-md) var(--radius-md);
      box-shadow: 0 16px 40px rgba(0,0,0,.55);
      z-index: 998;
      overflow: hidden;
      animation: dropIn .12s ease;
    }
    .search-section-label {
      padding: 7px 14px 4px;
      font-family: 'Syne', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .search-result-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 9px 14px;
      cursor: pointer;
      transition: background .15s;
    }
    .search-result-item:hover { background: var(--bg-hover); }
    .search-result-item.active { background: var(--accent-soft); }
    .sri-icon {
      width: 30px; height: 30px;
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .sri-doc  { background: rgba(79,124,255,.15); color: var(--accent); }
    .sri-qa   { background: rgba(94,201,137,.15); color: #5ec989; }
    .sri-hist { background: rgba(251,191,36,.15);  color: #fbbf24; }
    .sri-body { flex: 1; min-width: 0; }
    .sri-title {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sri-title mark {
      background: var(--accent-soft);
      color: var(--accent);
      border-radius: 2px;
      padding: 0 2px;
    }
    .sri-sub {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sri-badge {
      font-size: 10px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 10px;
      flex-shrink: 0;
      margin-top: 3px;
    }
    .badge-doc  { background: rgba(79,124,255,.15); color: var(--accent); }
    .badge-qa   { background: rgba(94,201,137,.15); color: #5ec989; }
    .badge-hist { background: rgba(251,191,36,.15);  color: #fbbf24; }

    .search-footer {
      padding: 8px 14px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .search-footer-hint {
      font-size: 11px;
      color: var(--text-muted);
    }
    .search-footer-hint kbd {
      background: var(--bg-hover);
      border: 1px solid var(--border-light);
      border-radius: 4px;
      padding: 1px 5px;
      font-size: 10px;
      color: var(--text-dim);
      font-family: monospace;
    }
    .search-empty {
      padding: 20px 14px;
      text-align: center;
      color: var(--text-muted);
      font-size: 13px;
    }
    .search-empty i { font-size: 24px; display: block; margin-bottom: 6px; opacity: .4; }

    /* Mode pills */
    .mode-pills {
      display: flex;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 3px;
      gap: 2px;
      flex-shrink: 0;
    }
    .mode-pill {
      padding: 5px 12px;
      border-radius: 7px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: background .2s, color .2s;
      color: var(--text-muted);
      border: none;
      background: transparent;
    }
    .mode-pill.active {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 2px 8px var(--accent-glow);
    }
    .mode-pill:not(.active):hover { background: var(--bg-hover); color: var(--text-dim); }

    /* CTA */
    .btn-consultar {
      padding: 8px 20px;
      background: var(--accent);
      border: none;
      border-radius: var(--radius-md);
      color: #fff;
      font-family: 'Syne', sans-serif;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s, box-shadow .2s, transform .1s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .btn-consultar:hover {
      background: #3d6bff;
      box-shadow: 0 4px 16px var(--accent-glow);
    }
    .btn-consultar:active { transform: scale(.97); }

    /* ── DIVIDER ── */
    .toolbar-divider {
      height: 1px;
      background: var(--border);
      margin: 2px 0;
    }

    /* ── ROW 2 ── */
    .row-secondary {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-tag {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 12px;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-dim);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: border-color .2s, color .2s, background .2s;
    }
    .btn-tag:hover { border-color: var(--border-light); color: var(--text-primary); background: var(--bg-hover); }
    .btn-tag i { font-size: 13px; }

    .btn-grid {
      padding: 7px 10px;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-dim);
      font-size: 14px;
      cursor: pointer;
      transition: border-color .2s, color .2s;
    }
    .btn-grid:hover { border-color: var(--border-light); color: var(--text-primary); }

    /* ── DOCUMENTS DROPDOWN ── */
    .doc-dropdown-wrap {
      position: relative;
      flex-shrink: 0;
    }
    .doc-menu {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 260px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      box-shadow: 0 16px 48px rgba(0,0,0,.6);
      z-index: 999;
      overflow: hidden;
      animation: dropIn .15s ease;
    }
    .doc-menu.open { display: block; }
    @keyframes dropIn {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .doc-menu-header {
      padding: 10px 14px 8px;
      font-family: 'Syne', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
    }
    .doc-menu-search {
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
    }
    .doc-menu-search input {
      width: 100%;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 5px 10px;
      color: var(--text-primary);
      font-size: 12px;
      font-family: 'DM Sans', sans-serif;
      outline: none;
    }
    .doc-menu-search input::placeholder { color: var(--text-muted); }
    .doc-menu-search input:focus { border-color: var(--accent); }
    .doc-menu-list {
      max-height: 220px;
      overflow-y: auto;
      padding: 4px 0;
    }
    .doc-menu-list::-webkit-scrollbar { width: 4px; }
    .doc-menu-list::-webkit-scrollbar-track { background: transparent; }
    .doc-menu-list::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }
    .doc-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      cursor: pointer;
      transition: background .15s;
      border-radius: 0;
    }
    .doc-item:hover { background: var(--bg-hover); }
    .doc-item.selected { background: var(--accent-soft); }
    .doc-item-icon {
      width: 28px; height: 28px;
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }
    .icon-pdf  { background: rgba(239,68,68,.15);  color: #f87171; }
    .icon-doc  { background: rgba(59,130,246,.15); color: #60a5fa; }
    .icon-txt  { background: rgba(156,163,175,.15);color: #9ca3af; }
    .doc-item-info { flex: 1; min-width: 0; }
    .doc-item-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .doc-item-meta {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 1px;
    }
    .doc-item-check {
      color: var(--accent);
      font-size: 14px;
      flex-shrink: 0;
      opacity: 0;
      transition: opacity .15s;
    }
    .doc-item.selected .doc-item-check { opacity: 1; }
    .doc-menu-footer {
      padding: 8px 14px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .doc-selected-count {
      font-size: 11px;
      color: var(--text-muted);
    }
    .doc-selected-count span { color: var(--accent); font-weight: 600; }
    .btn-apply-docs {
      padding: 4px 12px;
      background: var(--accent);
      border: none;
      border-radius: var(--radius-sm);
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      font-family: 'Syne', sans-serif;
      cursor: pointer;
      transition: background .2s;
    }
    .btn-apply-docs:hover { background: #3d6bff; }

    .spacer { flex: 1; }

    .filter-wrap {
      position: relative;
      width: 200px;
    }
    .filter-input {
      width: 100%;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 6px 32px 6px 12px;
      color: var(--text-primary);
      font-family: 'DM Sans', sans-serif;
      font-size: 12px;
      outline: none;
      transition: border-color .2s;
    }
    .filter-input::placeholder { color: var(--text-muted); }
    .filter-input:focus { border-color: var(--accent); }
    .filter-btn {
      position: absolute; right: 0; top: 0; bottom: 0;
      padding: 0 10px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      border-left: 1px solid var(--border);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      transition: color .2s, background .2s;
    }
    .filter-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

    /* ── BOOKS ROW ── */
    .books-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      margin-top: 2px;
    }
    .books-label {
      font-family: 'Syne', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-right: 4px;
    }

    .book-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      border: 1px solid transparent;
      cursor: pointer;
      transition: filter .2s, transform .1s;
    }
    .book-chip:hover { filter: brightness(1.25); transform: translateY(-1px); }
    .book-chip .chip-count {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 11px;
    }

    .chip-mine    { background: #ebebeb; border-color: #2a3f6f; color: #0a0a0a; }
    .chip-shared  { background: #daa520; border-color: #1e5038; color: #000000; }
    .chip-general { background: #fe6348; border-color: #5a2e2e; color: #040404; }
    .chip-total   { background: #1e1e30; border-color: #35355a; color: #9b9bdf; }

    /* ── TABS ── */
    .tabs-row {
      display: flex;
      gap: 4px;
      padding: 0 2px;
      margin-top: 4px;
      border-bottom: 1px solid var(--border);
    }
    .tab-item {
      padding: 10px 16px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-muted);
      cursor: pointer;
      position: relative;
      transition: color .2s;
      white-space: nowrap;
    }
    .tab-item:hover { color: var(--text-dim); }
    .tab-item.active { color: var(--text-primary); }
    .tab-item.active::after {
      content: '';
      position: absolute;
      bottom: -1px; left: 0; right: 0;
      height: 2px;
      background: var(--accent);
      border-radius: 2px 2px 0 0;
      box-shadow: 0 0 8px var(--accent-glow);
    }
/*
* * modal informacionde actividad
*/

/* ── Modal Actividad — Refined Dark-Accent Style ─────────────────────────── */
#eventDetailsActividadModal .modal-content {
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.1);
}

#eventDetailsActividadModal .act-hero{
  position: relative;
  overflow: hidden;
  padding: 32px 32px 24px;
  color: white;
}

#eventDetailsActividadModal .act-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.25);
  z-index:1;
  pointer-events:none;
}

#eventDetailsActividadModal .act-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 100%);
  z-index:1;
  pointer-events:none;
}

/* contenido sobre el overlay */
#eventDetailsActividadModal .act-hero > *{
  position:relative;
  z-index:2;
}
.hero-estado0{
    background: linear-gradient(135deg,#facc15,#eab308);
  }

  .hero-estado1{
    background: linear-gradient(135deg,#fb923c,#ea580c);
  }

  .hero-estado2{
    background: linear-gradient(135deg,#3b82f6,#1d4ed8);
  }

  .hero-estado3{
    background: linear-gradient(135deg,#22d3ee,#06b6d4);
  }

  .hero-estado4{
    background: linear-gradient(135deg,#22c55e,#15803d);
  }

  .hero-estado5{
    background: linear-gradient(135deg,#374151,#111827);
  }

#eventDetailsActividadModal .act-number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffffffe8;
  margin-bottom: 6px;
}
#eventDetailsActividadModal .act-title {
  font-size: 22px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.25;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}
#eventDetailsActividadModal .act-title-participantes {
  font-size: 22px;
  font-weight: 700;
  color: #4c4c4d;
  line-height: 1.25;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}

#eventDetailsActividadModal .act-hashtag {
    font-weight: 600;
    font-size: 13px;
    color: rgb(243 248 251 / 98%);
    margin: 0;
}
#eventDetailsActividadModal .act-badges {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
#eventDetailsActividadModal .act-badge-estado {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}
#eventDetailsActividadModal .act-badge-importante {
  background: rgba(239, 68, 68, 0.943);
  border: 1px solid rgba(239,68,68,0.5);
  color: #f8f7f7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
}

/* Estado badges colores */
#eventDetailsActividadModal .estado0-b { background:rgba(100,116,139,0.3); border:1px solid rgba(100,116,139,0.5); color:#cbd5e1; }
#eventDetailsActividadModal .estado1-b { background:rgba(245,158,11,0.2); border:1px solid rgba(245,158,11,0.4); color:#fcd34d; }
#eventDetailsActividadModal .estado2-b { background:rgba(14,165,233,0.2); border:1px solid rgba(14,165,233,0.4); color:#7dd3fc; }
#eventDetailsActividadModal .estado3-b { background:rgba(99,102,241,0.2); border:1px solid rgba(99,102,241,0.4); color:#a5b4fc; }
#eventDetailsActividadModal .estado4-b { background:rgba(34,197,94,0.2); border:1px solid rgba(34,197,94,0.4); color:#86efac; }
#eventDetailsActividadModal .estado5-b { background:rgba(239,68,68,0.2); border:1px solid rgba(239,68,68,0.4); color:#fca5a5; }

/* Body */
#eventDetailsActividadModal .act-body {
  padding: 28px 32px 0;
  background: #fff;
}

/* Filas de metadata */
#eventDetailsActividadModal .act-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}
#eventDetailsActividadModal .act-meta-row:last-child { border-bottom: none; }
#eventDetailsActividadModal .act-meta-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  color: #64748b;
}
#eventDetailsActividadModal .act-meta-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #94a3b8;
  line-height: 1;
  margin-bottom: 3px;
}
#eventDetailsActividadModal .act-meta-value {
  font-size: 13.5px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.3;
}
/*#eventDetailsActividadModal .act-meta-value span { color: #3b82f6; }*/

/* Progress */
#eventDetailsActividadModal .act-progress-wrap {
  padding: 18px 0 12px;
}
#eventDetailsActividadModal .act-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
#eventDetailsActividadModal .act-progress-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #94a3b8;
}
#eventDetailsActividadModal .act-progress-pct {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.5px;
}
#eventDetailsActividadModal .act-progress-track {
  height: 6px;
  background: #f1f5f9;
  border-radius: 100px;
  overflow: hidden;
}
#eventDetailsActividadModal .act-progress-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Fechas */
#eventDetailsActividadModal .act-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid #f1f5f9;
}
#eventDetailsActividadModal .act-date-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
}
#eventDetailsActividadModal .act-date-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #94a3b8;
  margin-bottom: 4px;
}
#eventDetailsActividadModal .act-date-card-value {
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
}

/* Lugar */
#eventDetailsActividadModal .act-location {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid #f1f5f9;
}
#eventDetailsActividadModal .act-location-img {
  width: 42px; height: 42px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #e2e8f0;
  flex-shrink: 0;
}
#eventDetailsActividadModal .act-location-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
#eventDetailsActividadModal .act-location-sub {
  font-size: 12px;
  color: #64748b;
}

/* Avatares */
#eventDetailsActividadModal .act-avatars {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid #f1f5f9;
}
#eventDetailsActividadModal .act-avatar-stack {
  display: flex;
}
#eventDetailsActividadModal .act-avatar-stack .av {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
#eventDetailsActividadModal .act-avatar-stack .av:first-child { margin-left: 0; }
#eventDetailsActividadModal .act-avatar-count {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 2px solid #fff;
  margin-left: -8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}
#eventDetailsActividadModal .act-avatar-names {
  margin-left: 14px;
  font-size: 12.5px;
  color: #64748b;
}

/* Footer */
#eventDetailsActividadModal .act-footer {
  padding: 16px 32px 24px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f1f5f9;
}
#eventDetailsActividadModal .btn-see-more {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #3b82f6;
  text-decoration: none;
  display: flex; align-items: center; gap: 6px;
  transition: gap 0.2s;
}
#eventDetailsActividadModal .btn-see-more:hover { gap: 10px; }
#eventDetailsActividadModal .btn-close-act {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#eventDetailsActividadModal .btn-close-act:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Animación entrada */
#eventDetailsActividadModal.show .modal-dialog { animation: slideUp 0.35s cubic-bezier(0.34,1.2,0.64,1); }
@keyframes slideUp {
  from { opacity:0; transform: translateY(30px) scale(0.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
#eventDetailsActividadModal .act-meta-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px 18px;
  margin-bottom:10px;
}
#eventDetailsActividadModal .act-meta-grid-usuarios{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px 18px;
  margin-bottom:10px;
}
#eventDetailsActividadModal .act-meta-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #f1f5f9;
}

/* filas que ocupan toda la linea */
#eventDetailsActividadModal .act-meta-row.full{
  grid-column:1 / -1;
}

/* mejorar listas de usuarios */
#eventDetailsActividadModal .act-meta-value p{
  margin:0;
  font-size:13px;
}

/* chips para usuarios */
#eventDetailsActividadModal .user-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:20px;
  background:#f1f5f9;
  font-size:12px;
  margin:2px;
}
#eventDetailsActividadModal .chip-avatar{
  width:18px;
  height:18px;
  border-radius:50%;
  object-fit:cover;
}
#eventDetailsActividadModal .modal-xl{
  max-width:900px;
}
#eventDetailsActividadModal .act-meta-sub {
  font-size: 0.75rem;
  color: #9ca3af;       /* gris suave */
  margin-top: 2px;
  line-height: 1.2;
}
#eventDetailsActividadModal .btn-download-pdf{
  margin-left:8px;
  color:#ef4444;
  font-size:13px;
  text-decoration:none;
}

#eventDetailsActividadModal .btn-download-pdf:hover{
  color:#dc2626;
}

/*
** nueva actividad modal
*/
.modalnuevaactividad {
    --c-bg:       #f0f2f8;
    --c-surface:  #ffffff;
    --c-card:     #f5f7ff;
    --c-border:   #dde2f0;
    --c-accent:   #3d6ff5;
    --c-success:  #16a34a;
    --c-danger:   #dc2626;
    --c-text:     #111827;
    --c-muted:    #6b7280;
    --c-label:    #4b5563;
    --radius:     12px;
    --radius-sm:  8px;
    --shadow:     0 8px 40px rgba(0,0,0,.12);
  }

  /* ===== TOKENS DARK ===== */
  #principiomain.dark .modalnuevaactividad {
    --c-bg:       #0f1117;
    --c-surface:  #181c26;
    --c-card:     #1e2333;
    --c-border:   #2a3049;
    --c-accent:   #4f7cff;
    --c-success:  #22c55e;
    --c-danger:   #ef4444;
    --c-text:     #e8eaf0;
    --c-muted:    #7b839a;
    --c-label:    #9ba3bc;
    --shadow:     0 8px 40px rgba(0,0,0,.55);
  }

  /* ===== MODAL SHELL ===== */
  .modalnuevaactividad .modal-dialog { max-width: 860px; }

  .modalnuevaactividad .modal-content {
    background: var(--c-surface);
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  /* ===== WIZARD CONTAINER ===== */
  .modalnuevaactividad #wizard-contaniner { display: flex; flex-direction: column; height: 100%; }

  /* ===== HEADER / STEPPER ===== */
  .modalnuevaactividad #wizard-step-container {
    background: var(--c-bg) !important;
    border-bottom: 1px solid var(--c-border) !important;
    padding: 20px 28px !important;
    border-radius: 0 !important;
  }

  .modalnuevaactividad .nav-wizard {
    display: flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
  }

  /* connecting line */
  .modalnuevaactividad .nav-wizard::before {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(10% + 20px);
    width: calc(80% - 40px);
    height: 2px;
    background: var(--c-border);
    z-index: 0;
  }

  .modalnuevaactividad .nav-wizard .nav-item { flex: 1; text-align: center; }

  .modalnuevaactividad .nav-wizard .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: none;
    text-decoration: none;
    cursor: default;
    position: relative;
    z-index: 1;
  }

  .modalnuevaactividad .nav-item-circle-parent {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-card);
    border: 2px solid var(--c-border);
    transition: border-color .3s, background .3s;
  }

  .modalnuevaactividad .nav-item-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--c-muted);
    transition: background .3s, color .3s;
  }

  .modalnuevaactividad .nav-link.active .nav-item-circle-parent {
    border-color: var(--c-accent);
    background: rgba(79,124,255,.12);
  }

  .modalnuevaactividad .nav-link.active .nav-item-circle {
    background: var(--c-accent);
    color: #fff;
  }
  .modalnuevaactividad .nav-link.active .nav-item-circle span { 
    color: #fff !important;        /* ← fuerza blanco en el ícono FA */
  }
  .modalnuevaactividad .nav-item .nav-link.active {
    color: #fff !important; 
  }
  .modalnuevaactividad .nav-link .d-none { display: block !important; }
  .modalnuevaactividad .nav-link span.mt-1 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-muted);
    transition: color .3s;
  }
  .modalnuevaactividad .nav-link.active span.mt-1 { color: var(--c-accent); }

  /* ===== BODY ===== */
  .modalnuevaactividad .card-body.pt-4 {
    background: var(--c-surface) !important;
    padding: 28px !important;
    flex: 1;
    overflow-y: auto;
    max-height: 62vh;
  }

  /* alerts */
  .modalnuevaactividad .card-body .text-danger {
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
  }

  /* ===== FORM ELEMENTS ===== */
  .modalnuevaactividad .form-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-label) !important;
    margin-bottom: 6px;
  }

  .modalnuevaactividad .form-control,
  .modalnuevaactividad .form-select,
  .modalnuevaactividad .message-input {
    background: var(--c-card) !important;
    border: 1px solid var(--c-border) !important;
    color: var(--c-text) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 14px;
    padding: 10px 14px !important;
    transition: border-color .2s, box-shadow .2s;
  }

  .modalnuevaactividad .form-control:focus,
  .modalnuevaactividad .form-select:focus,
  .modalnuevaactividad .message-input:focus {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 3px rgba(79,124,255,.18) !important;
    outline: none;
  }

  .modalnuevaactividad .form-control.is-valid   { border-color: var(--c-success) !important; }
  .modalnuevaactividad .form-control.is-invalid  { border-color: var(--c-danger) !important; }

  .modalnuevaactividad textarea.message-input { min-height: 90px; resize: vertical; }

  .modalnuevaactividad .form-text.fw-bold {
    font-size: 11px;
    color: var(--c-muted) !important;
    font-weight: 500 !important;
  }

  /* ===== STEP 1 — GRID ===== */
  .modalnuevaactividad .step1-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .modalnuevaactividad .step1-grid .span-2 { grid-column: span 2; }

  .modalnuevaactividad .field-wrap { display: flex; flex-direction: column; }
  .modalnuevaactividad .field-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
  }
  .modalnuevaactividad .field-hint { font-size: 11px; color: var(--c-muted); }
  .modalnuevaactividad .invalid-feedback,
  .modalnuevaactividad .error_form_registro {
    font-size: 11px !important;
    color: var(--c-danger) !important;
    margin: 0 !important;
  }

  /* ===== STEP 2 — ASIGNACIONES ===== */
  .modalnuevaactividad .assign-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .modalnuevaactividad .assign-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .modalnuevaactividad .assign-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-muted);
  }

  .modalnuevaactividad .assign-card .btn-phoenix-secondary {
    background: var(--c-border);
    border: 1px solid transparent;
    color: var(--c-text);
    border-radius: var(--radius-sm);
    font-size: 13px;
    padding: 8px 12px;
    text-align: left;
    width: 100%;
    transition: background .2s, border-color .2s;
  }
  .modalnuevaactividad .assign-card .btn-phoenix-secondary:hover {
    background: #2e3652;
    border-color: var(--c-accent);
  }

  .modalnuevaactividad .dropdown-menu.notification-dropdown-menu {
    background: var(--c-card) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-sm) !important;
    min-width: 280px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
  }

  .modalnuevaactividad .dropdown-menu .card {
    background: transparent;
    border: none;
  }

  .modalnuevaactividad .dropdown-menu .card-header {
    background: var(--c-bg) !important;
    border-bottom: 1px solid var(--c-border) !important;
    padding: 10px 14px !important;
  }

  .modalnuevaactividad .dropdown-menu .card-header h5 {
    color: var(--c-text) !important;
    font-size: 13px;
    font-weight: 600;
  }

  .modalnuevaactividad .dropdown-menu .card-header .btn-link {
    color: var(--c-accent) !important;
    font-size: 12px;
  }

  .modalnuevaactividad .dropdown-menu .dropdown-item {
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,.04);
  }

  .modalnuevaactividad .dropdown-menu .dropdown-item label {
    color: var(--c-text);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .modalnuevaactividad .dropdown-menu .dropdown-item:hover { background: rgba(79,124,255,.08); }

  .modalnuevaactividad .form-check-input {
    background-color: var(--c-border) !important;
    border-color: var(--c-muted) !important;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  .modalnuevaactividad .form-check-input:checked {
    background-color: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
  }

  /* visitantes */
  .modalnuevaactividad .lista-visitante {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .modalnuevaactividad .lista-visitante li {
    background: rgba(79,124,255,.12);
    border: 1px solid rgba(79,124,255,.25);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    color: var(--c-accent);
  }

  /* ===== STEP 3 — LUGAR ===== */
  .modalnuevaactividad .lugar-preview {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 12px;
  }

  .modalnuevaactividad .lugar-preview img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
  }

  .modalnuevaactividad .lugar-info h4 {
    color: var(--c-text);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .modalnuevaactividad .listlugares { padding-left: 16px; color: var(--c-muted); font-size: 13px; }
  .modalnuevaactividad .listlugares ul { margin-top: 4px; }

  /* ===== STEP 4 — RESUMEN ===== */
  .modalnuevaactividad .resumen-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 24px;
  }

  .modalnuevaactividad .resumen-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 6px;
  }

  .modalnuevaactividad .resumen-obs {
    font-size: 13px;
    color: var(--c-muted);
    margin-bottom: 20px;
    line-height: 1.6;
  }

  .modalnuevaactividad .resumen-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
  }

  .modalnuevaactividad .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(79,124,255,.1);
    border: 1px solid rgba(79,124,255,.2);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--c-accent);
  }

  .modalnuevaactividad .chip.green {
    background: rgba(34,197,94,.1);
    border-color: rgba(34,197,94,.2);
    color: var(--c-success);
  }

  .modalnuevaactividad .resumen-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }

  .modalnuevaactividad .date-box {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
  }

  .modalnuevaactividad .date-box-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 4px;
  }

  .modalnuevaactividad .date-box-value { font-size: 13px; color: var(--c-text); font-weight: 500; }

  .modalnuevaactividad .lugar-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 20px;
  }

  .modalnuevaactividad .lugar-chip img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--c-border);
  }

  .modalnuevaactividad .lugar-chip-text { font-size: 13px; color: var(--c-text); }
  .modalnuevaactividad .lugar-chip-sub  { font-size: 11px; color: var(--c-muted); }

  .modalnuevaactividad .progress-wrap { margin-bottom: 20px; }
  .modalnuevaactividad .progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-muted);
    margin-bottom: 6px;
  }
  .modalnuevaactividad .progress {
    height: 6px;
    background: rgba(34,197,94,.12) !important;
    border-radius: 4px;
  }
  .modalnuevaactividad .progress-bar { border-radius: 4px; }

  .modalnuevaactividad .checks-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--c-border);
    padding-top: 16px;
  }

  .modalnuevaactividad .checks-area .form-check-label {
    font-size: 13px !important;
    color: var(--c-text) !important;
    font-weight: 500;
    cursor: pointer;
  }

  .modalnuevaactividad .checks-area .form-check { display: flex; align-items: center; gap: 10px; }

  .modalnuevaactividad .form-switch .form-check-input {
    width: 36px !important;
    height: 20px !important;
    border-radius: 20px !important;
  }

  /* ===== FOOTER ===== */
  .modalnuevaactividad .card-footer {
    background: var(--c-bg) !important;
    border-top: 1px solid var(--c-border) !important;
    padding: 14px 24px !important;
    border-radius: 0 !important;
  }

  .modalnuevaactividad .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .modalnuevaactividad .btn-soft-secondary {
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-muted);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    font-size: 13px;
    transition: background .2s, color .2s;
  }
  .modalnuevaactividad .btn-soft-secondary:hover { background: var(--c-card); color: var(--c-text); }

  .modalnuevaactividad .btn-secondary {
    background: var(--c-card) !important;
    border: 1px solid var(--c-border) !important;
    color: var(--c-text) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 18px;
    font-size: 13px;
    transition: background .2s;
  }
  .modalnuevaactividad .btn-secondary:hover { background: #2a3049 !important; }

  .modalnuevaactividad .btn-primary {
    background: var(--c-accent) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    transition: opacity .2s;
  }
  .modalnuevaactividad .btn-primary:hover { opacity: .88; }

  .modalnuevaactividad .btn-success {
    background: var(--c-success) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    transition: opacity .2s;
  }
  .modalnuevaactividad .btn-success:hover { opacity: .88; }

  .modalnuevaactividad .btn-group { display: flex; gap: 8px; }

  /* scrollbar */
  .modalnuevaactividad .card-body.pt-4::-webkit-scrollbar { width: 5px; }
  .modalnuevaactividad .card-body.pt-4::-webkit-scrollbar-track { background: transparent; }
  .modalnuevaactividad .card-body.pt-4::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }

  /* mb helpers */
  .modalnuevaactividad .mb-1 { margin-bottom: 12px !important; }
  .modalnuevaactividad .mb-2 { margin-bottom: 16px !important; }
/* lugar */
.modalnuevaactividad .lugar-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.modalnuevaactividad .lugar-bc-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(79,124,255,.1);
  border: 1px solid rgba(79,124,255,.2);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-accent);
  white-space: nowrap;
}

.modalnuevaactividad .lugar-bc-sep {
  color: var(--c-muted);
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
}
.modalnuevaactividad .chip-role {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .7;
}

.modalnuevaactividad .chip-sep {
  opacity: .4;
  font-size: 12px;
}
.fc-event {
  border-radius: 6px !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: none !important;
 /* box-shadow: 0 1px 3px rgba(0,0,0,.2);*/
}

.fc-event-title { 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Día actual destacado */
.fc-day-today { 
  background: rgba(79,124,255,.06) !important; 
}
/* Forzar colores en eventos FullCalendar */
.fc-event {
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.fc-daygrid-event {
  background-color: inherit !important;
  border-color: inherit !important;
}

.fc-event-main {
  color: inherit !important;
}
.fc-event.estado-nuevo .fc-event-title { 
  color: #080808 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important; 
}
.fc-event.estado-0 .fc-event-title { 
  color:black !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important; 
}
#principiomain.dark .fc-event.estado-0 .fc-event-title { 
  color: #ffffff !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important; 
}

.fc-event.estado-1 .fc-event-title { 
  color: #f69f3b !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important; 
}

.fc-event.estado-2 .fc-event-title { 
  color: #2579e7 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important; 
}

.fc-event.estado-3 .fc-event-title { 
  color:black !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important; 
}
#principiomain.dark .fc-event.estado-3 .fc-event-title { 
  color: #ffffff !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important; 
}

.fc-event.estado-4 .fc-event-title { 
  color: #22c55e !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important; 
}

.fc-event.estado-5 .fc-event-title { 
  color: #ef4444 !important; 
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
/* Ocultar dot default 
.fc-daygrid-event-dot { display: none !important; }*/
.fc-daygrid-event-dot{
    border-width:6px !important;
}

.fc .fc-event.estado-nuevo .fc-daygrid-event-dot { border-color:#c4c4c4 !important; }
.fc .fc-event.estado-0 .fc-daygrid-event-dot { border-color:#fffb0e !important; }
.fc .fc-event.estado-1 .fc-daygrid-event-dot { border-color:#f69f3b !important; }
.fc .fc-event.estado-2 .fc-daygrid-event-dot { border-color:#2579e7 !important; }
.fc .fc-event.estado-3 .fc-daygrid-event-dot { border-color:#06b6d4 !important; }
.fc .fc-event.estado-4 .fc-daygrid-event-dot { border-color:#22c55e !important; }
.fc .fc-event.estado-5 .fc-daygrid-event-dot { border-color:#ef4444 !important; }
.fc .estado-nuevo .fc-event-main::after { border-color:#c4c4c4  !important; }
/* Estilo común para todos los estados */
.fc [class*="estado-"] .fc-event-main::after{
  width: 4px;
  height: 5px;
  border-radius: 3px;
  padding: 0;
  margin-left: 1px;
}

/* Colores */
.fc .estado-0 .fc-event-main::after { 
  border-color:#fffb0e !important;
  background:#fffb0e !important;
}

.fc .estado-1 .fc-event-main::after { 
  border-color:#f69f3b !important;
  background:#f69f3b !important;
}

.fc .estado-2 .fc-event-main::after { 
  border-color:#2579e7 !important;
  background:#2579e7 !important;
}

.fc .estado-3 .fc-event-main::after { 
  border-color:#06b6d4 !important;
  background:#06b6d4 !important;
}

.fc .estado-4 .fc-event-main::after { 
  border-color:#22c55e !important;
  background:#22c55e !important;
}

.fc .estado-5 .fc-event-main::after { 
  border-color:#ef4444 !important;
  background:#ef4444 !important;
}
.estado-leyenda{
  display:flex;
  gap:20px;
  list-style:none;
  padding:0;
  margin:10px 0;
  align-items:center;
  flex-wrap:wrap;
}
#principiomain.dark .fc-event.estado-nuevo .fc-event-title { 
  color: #ffffff !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important; 
}
#principiomain.dark .fc .fc-event.estado-nuevo .fc-daygrid-event-dot { border-color:#fbf9f5 !important; }
#principiomain.dark .fc .estado-nuevo .fc-event-main::after { border-color:#fbf9f5 !important; }
#principiomain.dark .estado-leyenda li {
  color: #ffffff !important;
  display:flex;
  align-items:center;
  font-size:14px;
}

.estado-leyenda li{
  display:flex;
  align-items:center;
  font-size:14px;
  color:#080808;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  margin-right:6px;
}

/* colores */
#principiomain.dark .dot.estado-nuevo{background: white;}
.dot.estado-nuevo{background: #c4c4c4}
.dot.estado-0{ background:#fffb0e; }
.dot.estado-1{ background:#f69f3b; }
.dot.estado-2{ background:#2579e7; }
.dot.estado-3{ background:#06b6d4; }
.dot.estado-4{ background:#22c55e; }
.dot.estado-5{ background:#ef4444; }

/*fc .fc-h-event, .fc .fc-daygrid-event {
    background-color: #817e7e !important;
}*/
#principiomain.dark .fc .fc-h-event, #principiomain.dark .fc .fc-daygrid-event{
    background-color: #121620 !important;
}

/* ═══════════════════════════════════════════════
   TOKENS — modo claro (default)
═══════════════════════════════════════════════ */
.act-list-wrap {
  --bg:          #f4f6fb;
  --surface:     #ffffff;
  --surface2:    #f0f2f8;
  --border:      #e2e6f0;
  --border-lit:  #c8cfe0;
  --accent:      #3b72f0;
  --accent-glow: #3b72f033;
  --accent2:     #00b89c;
  --danger:      #e53e3e;
  --warn:        #dd8800;
  --text:        #1a1f36;
  --muted:       #6b7394;
  --faint:       #d0d5e8;

  --e0: #6b7280; --e0b: #6b728014;
  --e1: #2563eb; --e1b: #2563eb14;
  --e2: #7c3aed; --e2b: #7c3aed14;
  --e3: #c2410c; --e3b: #c2410c14;
  --e4: #059669; --e4b: #05966914;
  --e5: #dc2626; --e5b: #dc262614;
  --ej0: #ffffff; --ej0b: #ffffff18;
  --e5n:#f4f6fb;

  --r:    10px;
  --r-sm: 6px;
  --ff-head: 'Syne', sans-serif;
  --ff-body: 'DM Sans', sans-serif;

  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

/* ═══════════════════════════════════════════════
   TOKENS — modo oscuro
═══════════════════════════════════════════════ */
#principiomain.dark .act-list-wrap {
  --bg:          #0d0f14;
  --surface:     #13161e;
  --surface2:    #1a1d27;
  --border:      #ffffff0f;
  --border-lit:  #ffffff1c;
  --accent:      #4f8eff;
  --accent-glow: #4f8eff33;
  --accent2:     #00e0c0;
  --danger:      #ff5e5e;
  --warn:        #ffb347;
  --text:        #e8eaf0;
  --muted:       #ebecf1;
  --faint:       #3a3f52;

  --e0: #f3f4f6;  --e0b: #ffffff12;
  --e1: #60a5fa; --e1b: #60a5fa18;
  --e2: #a78bfa; --e2b: #a78bfa18;
  --e3: #fb923c; --e3b: #fb923c18;
  --e4: #34d399; --e4b: #34d39918;
  --e5: #f87171; --e5b: #f8717118;
  --es0: #6b7280;--es0b: #6b728018;
  --ej0: #ffffff; --ej0b: #ffffff18;
  --e5n:#f4f6fb;
}

/* ═══════════════════════════════════════════════
   PAGE TITLE
═══════════════════════════════════════════════ */
.act-list-wrap .al-page-title {
  font-family: var(--ff-head);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.act-list-wrap .al-page-title span:last-child {
  font-size: .85rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

/* ═══════════════════════════════════════════════
   CONTROLS ROW (filtros + toolbar)
═══════════════════════════════════════════════ */
.act-list-wrap .d-flex.flex-wrap.align-items-center.justify-content-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

/* ── Filter bar ── */
.act-list-wrap .al-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .3rem;
}
.act-list-wrap .al-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .65rem;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s, color .18s;
  white-space: nowrap;
}
.act-list-wrap .al-filter-btn:hover {
  background: var(--surface2);
  color: var(--text);
}
.act-list-wrap .al-filter-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 12px var(--accent-glow);
}
.act-list-wrap .al-filter-btn .cnt {
  background: #00000012;
  border-radius: 20px;
  padding: .05rem .4rem;
  font-size: .64rem;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.act-list-wrap .al-filter-btn.active .cnt {
  background: #ffffff28;
}

/* ── Toolbar ── */
.act-list-wrap .al-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.act-list-wrap .al-search-box {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .36rem .75rem;
  transition: border-color .2s;
}
.act-list-wrap .al-search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.act-list-wrap .al-search-box i {
  color: var(--muted);
  font-size: .75rem;
}
.act-list-wrap .al-search-box input {
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--ff-body);
  font-size: .8rem;
  outline: none;
  width: 160px;
}
.act-list-wrap .al-search-box input::placeholder {
  color: var(--muted);
}

.act-list-wrap .al-pager-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .36rem .875rem;
  border: 1px solid var(--border-lit);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: .75rem;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  white-space: nowrap;
}
.act-list-wrap .al-pager-btn:not([disabled]):hover {
  background: var(--surface2);
  border-color: var(--accent);
}
.act-list-wrap .al-pager-btn[disabled] {
  opacity: .45;
  cursor: default;
}
.act-list-wrap .al-pager-btn b {
  color: var(--accent);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════
   TABLE HEADER
═══════════════════════════════════════════════ */
.act-list-wrap .al-table-header {
  display: grid;
  grid-template-columns: 1.4fr 1fr 130px 100px 100px 120px 130px 40px;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  border-bottom: 2px solid var(--border);
  font-family: var(--ff-head);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.act-list-wrap .al-table-header > div:last-child {
  text-align: right;
}
.act-list-wrap .al-table-header > div {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: default;
}

.act-list-wrap .al-table-header > div.cursor-pointer {
    cursor: pointer;
    user-select: none;
    transition: color .15s;
}

.act-list-wrap .al-table-header > div.cursor-pointer:hover {
    color: var(--text);
}

/* Icono inactivo */
.act-list-wrap .al-table-header .fa-sort {
    opacity: 0.3;
    font-size: .65rem;
}

/* Icono activo */
.act-list-wrap .al-table-header .fa-sort-up,
.act-list-wrap .al-table-header .fa-sort-down {
    color: var(--accent, #3b6ef8);
    font-size: .65rem;
}
/* ═══════════════════════════════════════════════
   ROW WRAP
═══════════════════════════════════════════════ */
.act-list-wrap .al-row-wrap {
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: .4rem;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  animation: al-rowIn .28s ease both;
}
.act-list-wrap .al-row-wrap:hover {
  border-color: var(--border-lit);
  box-shadow: 0 2px 12px #0000000a;
}
.act-list-wrap .al-row-wrap.expanded {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow), 0 8px 32px #0000001a;
}

@keyframes al-rowIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
.act-list-wrap .al-row-wrap:nth-child(1) { animation-delay: .04s }
.act-list-wrap .al-row-wrap:nth-child(2) { animation-delay: .08s }
.act-list-wrap .al-row-wrap:nth-child(3) { animation-delay: .12s }
.act-list-wrap .al-row-wrap:nth-child(4) { animation-delay: .16s }
.act-list-wrap .al-row-wrap:nth-child(5) { animation-delay: .20s }
.act-list-wrap .al-row-wrap:nth-child(6) { animation-delay: .24s }
.act-list-wrap .al-row-wrap:nth-child(7) { animation-delay: .28s }

/* ── Main row ── */
.act-list-wrap .al-row-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 130px 100px 100px 120px 130px 40px;
  gap: .5rem;
  align-items: center;
  padding: .8rem 1rem;
}

/* ── Observación / descripción inline ── */
.act-list-wrap .al-obs {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}
.act-list-wrap .al-obs p {
  font-size: .76rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* ── Name col ── */
.act-list-wrap .al-col-name {
  min-width: 0;
}
.act-list-wrap .al-act-name{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.act-list-wrap .al-act-name:hover {
  color: var(--accent);
}
.act-list-wrap .al-act-num{
  font-size:.7rem;
  color:var(--muted);
  font-weight:400;
}
.act-list-wrap .al-act-tag {
  display: inline-block;
  margin-top: .2rem;
  font-size: .67rem;
  color: var(--accent2);
  background: color-mix(in srgb, var(--accent2) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent2) 22%, transparent);
  border-radius: 4px;
  padding: .04rem .4rem;
  font-weight: 500;
}
.act-list-wrap .al-act-lugar {
  font-size: .71rem;
  color: var(--muted);
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-list-wrap .al-act-lugar b {
  color: var(--text);
  font-weight: 500;
}

/* ── Avatars ── */
.act-list-wrap .al-avatars {
  display: flex;
  align-items: center;
}
.act-list-wrap .al-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  margin-left: -6px;
  object-fit: cover;
  background: var(--faint);
}
.act-list-wrap .al-avatars .al-avatar:first-child {
  margin-left: 0;
}
.act-list-wrap .al-avatar-more {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--faint);
  color: var(--muted);
  font-size: .6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -6px;
}

/* ── Dates ── */
.act-list-wrap .al-date {
  font-size: .75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.act-list-wrap .al-date.vencida {
  color: var(--danger);
}
.act-list-wrap .al-date.vencida i {
  font-size: .6rem;
}

/* ── Progress ── */
.act-list-wrap .al-progress-val {
  font-size: .7rem;
  color: var(--muted);
  margin-bottom: .25rem;
  font-variant-numeric: tabular-nums;
}
.act-list-wrap .al-progress-bar-wrap {
  height: 5px;
  background: var(--faint);
  border-radius: 10px;
  overflow: hidden;
}
.act-list-wrap .al-progress-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width .4s ease;
}
.act-list-wrap .al-progress-bar-fill.low  { background: var(--danger); }
.act-list-wrap .al-progress-bar-fill.mid  { background: var(--warn); }
.act-list-wrap .al-progress-bar-fill.high { background: var(--accent2); }

/* ── Badges ── */


.act-list-wrap .al-badges {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  align-items: center;
  align-self: center;
}
.act-list-wrap .al-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: 20px;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.act-list-wrap .al-badge.importante {
  background: #fbbf2416;
  color: #d97706;
  border-color: #fbbf2430;
}
#principiomain.dark .act-list-wrap .al-badge.importante {
  color: #fbbf24;
}
.act-list-wrap .al-badge.importante::before {
  content: '★';
  margin-right: .25rem;
  font-size: .58rem;
}
.act-list-wrap .al-badge.estado0-b { background: var(--es0b); color: var(--es0); border-color: var(--es0); }
.act-list-wrap .al-badge.estado1-b { background: var(--ej0b); color: var(--ej0); border-color: var(--ej0); }
.act-list-wrap .al-badge.estado2-b { background: var(--ej0b); color: var(--ej0); border-color: var(--ej0); }
.act-list-wrap .al-badge.estado3-b { background: var(--es0b); color: var(--es0); border-color: var(--es0); }
.act-list-wrap .al-badge.estado4-b { background: var(--ej0b); color: var(--ej0); border-color: var(--ej0); }
.act-list-wrap .al-badge.estado5-b { background: var(--e5b); color: var(--e5n); border-color: var(--e5); }

/* ── Expand button ── */
.act-list-wrap .al-expand-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, color .18s, border-color .18s, transform .25s;
  margin-left: auto;
  font-size: .75rem;
}
.act-list-wrap .al-expand-btn:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border-lit);
}
.act-list-wrap .al-expand-btn.open {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: var(--accent);
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════
   DETAIL PANEL
═══════════════════════════════════════════════ */
.act-list-wrap .al-row-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .25s;
  border-top: 0px solid var(--border);
  padding: 0 1rem;
}
.act-list-wrap .al-row-wrap.expanded .al-row-detail {
  max-height: 700px;
  padding: 1rem;
  border-top: 1px solid var(--border);
}

/* Detail grid */
.act-list-wrap .al-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: .65rem;
  margin-bottom: 1rem;
}
.act-list-wrap .al-detail-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .6rem .75rem;
}
.act-list-wrap .dl {
  font-size: .61rem;
  font-family: var(--ff-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  margin-bottom: .22rem;
}
.act-list-wrap .dv {
  font-size: .78rem;
  color: var(--text);
  font-weight: 400;
}

/* Observación box */
.act-list-wrap .al-obs-box {
  font-size: .78rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .6rem .875rem;
  margin-bottom: .75rem;
}
.act-list-wrap .al-detail-section-title {
  font-family: var(--ff-head);
  font-size: .61rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  margin: .75rem 0 .4rem;
}

/* User chips */
.act-list-wrap .al-user-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1rem;
}
.act-list-wrap .al-user-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .6rem;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 500;
  background: var(--surface2);
  border: 1px solid var(--border-lit);
  color: var(--text);
}
.act-list-wrap .al-user-chip img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--faint);
}
.act-list-wrap .al-user-chip.validador   {
  border-color: color-mix(in srgb, var(--e1) 35%, transparent); 
  color: var(--e1); 
}
.act-list-wrap .al-user-chip.finalizador { 
  border-color: color-mix(in srgb, var(--e4) 35%, transparent); 
  color: var(--e4); 
}
.act-list-wrap .al-user-chip.observador  {
  border-color: color-mix(in srgb, var(--e0) 35%, transparent); 
  color: var(--e0); 
}
.act-list-wrap .al-user-chip.editor  {
  border-color: color-mix(in srgb, var(--e3) 35%, transparent); 
  color: var(--e3); 
}
.act-list-wrap .al-user-chip.visita  { 
  border-color: color-mix(in srgb, var(--e0) 35%, transparent); 
  color: var(--e0); 
}
/* Go button */
.act-list-wrap .al-btn-go {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem 1rem;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-size: .74rem;
  font-weight: 600;
  font-family: var(--ff-head);
  text-decoration: none;
  letter-spacing: .03em;
  transition: filter .18s, box-shadow .18s, transform .15s;
  box-shadow: 0 2px 14px var(--accent-glow);
}
.act-list-wrap .al-btn-go:hover {
  filter: brightness(1.12);
  box-shadow: 0 4px 22px var(--accent-glow);
  transform: translateX(2px);
}

/* ═══════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════ */
.act-list-wrap .al-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--muted);
}
.act-list-wrap .al-empty i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
  opacity: .25;
}
.act-list-wrap .al-empty p {
  font-size: .85rem;
  opacity: .5;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .act-list-wrap .al-table-header,
  .act-list-wrap .al-row-main {
    grid-template-columns: 1fr 120px 40px;
  }
  .act-list-wrap .al-table-header .hide-mobile,
  .act-list-wrap .al-row-main    .hide-mobile,
  .act-list-wrap .al-row-main    .al-obs {
    display: none !important;
  }
}
/* ═══════════════════════════════════════════════
   TIMELINE — integrada en detalle de actividad
═══════════════════════════════════════════════ */

.tl-wrapper{
  --tl-bg: transparent;
  --tl-surface: var(--surface);
  --tl-border: var(--border);
  --tl-accent: var(--accent2);
  --tl-accent2: var(--accent);

  --tl-text: var(--text);
  --tl-muted: var(--muted);
  --tl-glow: rgba(0,229,160,.15);

  font-family: var(--ff-body);
  color: var(--tl-text);

  padding:0;
  margin-top:10px;
  width:100%;
}

.tl-wrapper *,
.tl-wrapper *::before,
.tl-wrapper *::after{
  box-sizing:border-box;
}

/* ─────────────────────────────
   Timeline container
───────────────────────────── */

.tl-wrapper .tl-timeline{
  position:relative;
  width:100%;
}

/* línea base */

.tl-wrapper .tl-timeline::before{
  content:'';
  position:absolute;
  left:22px;
  top:20px;
  bottom:20px;
  width:1px;
  background:linear-gradient(
    to bottom,
    transparent,
    var(--tl-border) 10%,
    var(--tl-border) 90%,
    transparent
  );
}

/* línea progreso */

.tl-wrapper .tl-progress{
  position:absolute;
  left:22px;
  top:20px;
  bottom:20px;
  width:1px;

  background:linear-gradient(
    to bottom,
    var(--tl-accent),
    var(--tl-accent2)
  );

  box-shadow:0 0 6px var(--tl-glow);

  transform-origin:top;
  animation:tlGrowLine 1.3s ease forwards;
}

@keyframes tlGrowLine{
  from{height:0}
  to{height:100%}
}

/* ─────────────────────────────
   Evento
───────────────────────────── */

.tl-wrapper .tl-event{
  display:flex;
  align-items:flex-start;
  gap:16px;

  padding-bottom:24px;

  opacity:0;
  transform:translateX(-10px);

  animation:tlSlideIn .45s ease forwards;
}

.tl-wrapper .tl-event:last-child{
  padding-bottom:0;
}

.tl-wrapper .tl-event:nth-child(1){animation-delay:.1s}
.tl-wrapper .tl-event:nth-child(2){animation-delay:.2s}
.tl-wrapper .tl-event:nth-child(3){animation-delay:.3s}
.tl-wrapper .tl-event:nth-child(4){animation-delay:.4s}
.tl-wrapper .tl-event:nth-child(5){animation-delay:.5s}

@keyframes tlSlideIn{
  to{
    opacity:1;
    transform:translateX(0);
  }
}

/* ─────────────────────────────
   Dot
───────────────────────────── */

.tl-wrapper .tl-dot-wrap{
  width:44px;
  flex-shrink:0;
  display:flex;
  justify-content:center;
  position:relative;
}

.tl-wrapper .tl-dot{
  width:10px;
  height:10px;
  border-radius:50%;

  background:var(--tl-surface);
  border:2px solid var(--tl-border);

  margin-top:16px;

  transition:all .3s;
}

/* activo */

.tl-wrapper .tl-event.active .tl-dot{
  background:var(--tl-accent);
  border-color:var(--tl-accent);

  box-shadow:
    0 0 0 4px var(--tl-glow),
    0 0 10px var(--tl-accent);

  animation:tlPulse 2s ease infinite;
}

/* completado */

.tl-wrapper .tl-event.completed .tl-dot{
  background:var(--tl-accent);
  border-color:var(--tl-accent);
}

@keyframes tlPulse{
  0%,100%{
    box-shadow:
      0 0 0 4px var(--tl-glow),
      0 0 10px var(--tl-accent);
  }
  50%{
    box-shadow:
      0 0 0 7px rgba(0,229,160,.08),
      0 0 16px var(--tl-accent);
  }
}

/* ─────────────────────────────
   Card
───────────────────────────── */

.tl-wrapper .tl-card{
  flex:1;

  background:var(--tl-surface);
  border:1px solid var(--tl-border);
  border-radius:8px;

  padding:14px 16px;

  transition:
    border-color .2s,
    transform .2s,
    background .2s;
}

.tl-wrapper .tl-card:hover{
  border-color:var(--tl-accent);
  transform:translateX(3px);
}

.tl-wrapper .tl-event.active .tl-card{
  border-color:var(--tl-accent);

 /* background:linear-gradient(
    135deg,
    rgba(0,229,160,.05),
    var(--tl-surface)
  );*/
}

/* ─────────────────────────────
   Badge
───────────────────────────── */

.tl-wrapper .tl-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;

  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;

  color:var(--tl-muted);

  margin-bottom:6px;
}

.tl-wrapper .tl-num{
  font-size:9px;
  padding:2px 6px;

  border-radius:4px;
  font-family:monospace;
}

/* ─────────────────────────────
   Título
───────────────────────────── */

.tl-wrapper .tl-card-title{
  font-family:var(--ff-head);

  font-weight:600;
  font-size:.9rem;

  color:var(--tl-text);

  text-transform:capitalize;

  margin-bottom:6px;
}

.tl-wrapper .tl-event.active .tl-card-title{
  color:var(--tl-accent);
}

/* ─────────────────────────────
   Meta
───────────────────────────── */

.tl-wrapper .tl-meta{
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  font-size:.65rem;
  color:var(--tl-muted);
}

.tl-wrapper .tl-meta span{
  display:flex;
  align-items:center;
  gap:4px;
}

.tl-wrapper .tl-icon{
  opacity:.6;
}

/* ─────────────────────────────
   Tag actual
───────────────────────────── */

.tl-wrapper .tl-tag-active{
  position:absolute;
  top:10px;
  right:12px;

  font-size:9px;

  letter-spacing:1px;
  text-transform:uppercase;

  

  background:rgba(0,229,160,.1);
  border:1px solid rgba(0,229,160,.25);

  padding:2px 6px;
  border-radius:20px;

  animation:tlFadeBlink 2s ease infinite;
}

@keyframes tlFadeBlink{
  0%,100%{opacity:1}
  50%{opacity:.5}
}

/* ─────────────────────────────
   Step counter
───────────────────────────── */

.tl-wrapper .tl-step-line{
  text-align:center;

  font-size:.7rem;
  color:var(--tl-muted);

  margin-top:20px;
}

.tl-wrapper .tl-step-line strong{
  color:var(--tl-accent);
}

/* ─────────────────────────────
   Responsive
───────────────────────────── */

@media (max-width:768px){

  .tl-wrapper .tl-card{
    padding:12px 14px;
  }

  .tl-wrapper .tl-card-title{
    font-size:.82rem;
  }

  .tl-wrapper .tl-meta{
    font-size:.6rem;
  }

}
/* layout interno */
/* layout del detalle */

.al-detail-layout{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:24px;
  align-items:start;
}


/* columna izquierda */

.al-detail-left{
  min-width:0;
}


/* columna derecha */

.al-detail-right{
  position:sticky;
  top:20px;
}


/* timeline más compacta */

.al-detail-right .tl-wrapper{
  margin-top:6px;
}


/* responsive */

@media (max-width:1000px){

  .al-detail-layout{
    grid-template-columns:1fr;
  }

  .al-detail-right{
    position:relative;
  }

}
.al-timeline-scroll{

  max-height: 420px;

  overflow-y: auto;

  padding-right:6px;

}


/* scrollbar moderno */

.al-timeline-scroll::-webkit-scrollbar{
  width:6px;
}

.al-timeline-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.al-timeline-scroll::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:6px;
}

.al-timeline-scroll::-webkit-scrollbar-thumb:hover{
  background:var(--accent);
}
.tl-wrapper .tl-card-sub{
  display:flex;
  align-items:center;
  gap:6px;

  font-size:.72rem;
  color:var(--tl-muted);

  margin-bottom:8px;
}
.lista-actividades-scroll {
    height: 80vh;
    overflow-y: auto;
    
    /* Ocultar scrollbar en todos los navegadores */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE / Edge antiguo */
}

.lista-actividades-scroll::-webkit-scrollbar {
    display: none;                /* Chrome / Safari */
}

/* filtros */
.al-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0 20px;
}

.al-stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid #eef0f4;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  flex: 1;
  min-width: 0;          /* permite que el texto se encoja */
}

.al-stat-item:hover {
  border-color: #c8cdd8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.al-stat-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;         /* el ícono nunca se encoge */
}

.al-stat-icon.s-all { background: #eef2ff; color: #4f6ef7; }
.al-stat-icon.s0    {background: #fff21a1c;color: #f5dc0b; }
.al-stat-icon.s1    { background: #f5e8d3; color: #e18d16; }
.al-stat-icon.s2    { background: #e3f2fd; color: #3b82f6; }
.al-stat-icon.s3    { background: #f3e8ff; color: #a855f7; }
.al-stat-icon.s4    { background: #e6faf3; color: #10b981; }
.al-stat-icon.s5    { background: #fff0f0; color: #ef4444; }

.al-stat-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* ← alineado a la izquierda, no centrado */
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
}

.al-stat-num {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a1d23;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.al-stat-label {
  font-size: 0.68rem;
  color: #212122;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;     /* ← no rompe en dos líneas */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Active */
.al-stat-item.active { box-shadow: 0 3px 12px rgba(0,0,0,0.08); }
.al-stat-item:nth-child(1).active { border-color: #4f6ef7; color: #4f6ef7; }
.al-stat-item:nth-child(2).active {border-color: #eaf50b;color: #fbd60b; }
.al-stat-item:nth-child(3).active { border-color: #e18d16; color: #e98e16; }
.al-stat-item:nth-child(4).active { border-color: #3b82f6; color: #3b82f6; }
.al-stat-item:nth-child(5).active { border-color: #a855f7; color: #a855f7; }
.al-stat-item:nth-child(6).active { border-color: #10b981; color: #10b981; }
.al-stat-item:nth-child(7).active { border-color: #ef4444; color: #ef4444; }

.al-stat-item.active .al-stat-num { color: inherit; }

@media (max-width: 768px) {
  .al-stat-item { min-width: calc(33% - 6px); flex: none; }
}
/* ═══════════════════════════════════════════════
   Dark mode — #principiomain.dark
═══════════════════════════════════════════════ */

#principiomain.dark .al-stat-item {
  background: #1a1d27;
  border-color: #2a2f3d;
  color: #e8ecf4;
}

#principiomain.dark .al-stat-item:hover {
  border-color: #3a4055;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

#principiomain.dark .al-stat-num {
  color: #e8ecf4;
}

#principiomain.dark .al-stat-label {
  color: #ffffff;
}

/* Iconos — suaviza el fondo para dark */
#principiomain.dark .al-stat-icon.s-all { background: #1e2540; color: #7b9cfc; }
#principiomain.dark .al-stat-icon.s0    { background: #2a2010; color: #f5dc0b; }
#principiomain.dark .al-stat-icon.s1    { background: #2a1f0e; color: #f0a030; }
#principiomain.dark .al-stat-icon.s2    { background: #0e1f35; color: #5b9cf6; }
#principiomain.dark .al-stat-icon.s3    { background: #1e1030; color: #c07af8; }
#principiomain.dark .al-stat-icon.s4    { background: #0e2820; color: #2dd4a0; }
#principiomain.dark .al-stat-icon.s5    { background: #2a0f0f; color: #f87171; }

/* Active states */
#principiomain.dark .al-stat-item.active {
  box-shadow: 0 3px 12px rgba(0,0,0,0.35);
}

#principiomain.dark .al-stat-item:nth-child(1).active { border-color: #5b8af9; color: #7b9cfc; }
#principiomain.dark .al-stat-item:nth-child(2).active { border-color: #d4e010; color: #e8f00b; }
#principiomain.dark .al-stat-item:nth-child(3).active { border-color: #f0a030; color: #f0a030; }
#principiomain.dark .al-stat-item:nth-child(4).active { border-color: #5b9cf6; color: #5b9cf6; }
#principiomain.dark .al-stat-item:nth-child(5).active { border-color: #c07af8; color: #c07af8; }
#principiomain.dark .al-stat-item:nth-child(6).active { border-color: #2dd4a0; color: #2dd4a0; }
#principiomain.dark .al-stat-item:nth-child(7).active { border-color: #f87171; color: #f87171; }

#principiomain.dark .al-stat-item.active .al-stat-num { color: inherit; }

 /* ═══════════════════════════════════════════════
     Todo el CSS limitado a .gantt-app
  ═══════════════════════════════════════════════ */
 
  .gantt-app {
    --g-bg:           #f4f6fb;
    --g-surface:      #ffffff;
    --g-border:       #e4e8f0;
    --g-text:         #1e2235;
    --g-muted:        #8892a4;
    --g-accent:       #3b6ef8;
    --g-accent-light: #dce8ff;
    --g-row-h:        52px;
    --g-label-w:      180px;
    --g-header-h:     48px;
    --g-col-w:        90px;
 
    font-family: 'Figtree', sans-serif;
   /* background: var(--g-bg);*/
    color: var(--g-text);
    /*padding: 28px 20px;*/
    border-radius: 16px;
  }
 
  .gantt-app *, .gantt-app *::before, .gantt-app *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
 
  /* ── Header bar ── */
  .gantt-app .g-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
  }
 
  .gantt-app .g-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--g-text);
  }
 
  .gantt-app .g-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
 
  /* Toggle */
  .gantt-app .g-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    color: var(--g-muted);
    cursor: pointer;
    user-select: none;
  }
 
  .gantt-app .g-toggle {
    width: 36px; height: 20px;
    background: var(--g-border);
    border-radius: 20px;
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
  }
 
  .gantt-app .g-toggle.on { background: var(--g-accent); }
 
  .gantt-app .g-toggle::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
  }
 
  .gantt-app .g-toggle.on::after { transform: translateX(16px); }
 
  /* View switcher */
  .gantt-app .g-view-switcher {
    display: flex;
    background: var(--g-border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
  }
 
  .gantt-app .g-view-btn {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--g-muted);
    transition: background .15s, color .15s;
    font-family: 'Figtree', sans-serif;
  }
 
  .gantt-app .g-view-btn.active {
    background: var(--g-surface);
    color: var(--g-text);
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
  }
 
  /* ── Main wrap ── */
  .gantt-app .g-wrap {
    background: var(--g-surface);
    border: 1px solid var(--g-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
  }
 
  /* Vertical scroll container */
  .gantt-app .g-scroll-y {
    max-height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--g-border) transparent;
  }
 
  .gantt-app .g-scroll-y::-webkit-scrollbar { width: 5px; }
  .gantt-app .g-scroll-y::-webkit-scrollbar-thumb { background: var(--g-border); border-radius: 3px; }
 
  /* Horizontal scroll container */
  .gantt-app .g-inner {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: var(--g-border) transparent;
  }
 
  .gantt-app .g-inner::-webkit-scrollbar { height: 5px; }
  .gantt-app .g-inner::-webkit-scrollbar-thumb { background: var(--g-border); border-radius: 3px; }
 
  /* Label column — high z-index so it covers bars that overflow to the left */
  .gantt-app .g-labels {
    flex-shrink: 0;
    width: var(--g-label-w);
    border-right: 1px solid var(--g-border);
    z-index: 10;
    background: var(--g-surface);
    position: sticky;
    left: 0;
  }
 
  .gantt-app .g-label-header {
    height: var(--g-header-h);
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--g-muted);
    border-bottom: 1px solid var(--g-border);
  }
 
  .gantt-app .g-label-row {
    height: var(--g-row-h);
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: .8rem;
    font-weight: 600;
    border-bottom: 1px solid var(--g-border);
    gap: 8px;
    cursor: default;
    transition: background .15s;
  }
 
  .gantt-app .g-label-row:hover { background: var(--g-bg); }
  .gantt-app .g-label-row:last-child { border-bottom: none; }
 
  .gantt-app .g-label-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
 
  .gantt-app .g-label-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--g-text);
    font-size: 10px;
  }
 
  /* Grid */
  .gantt-app .g-grid {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: visible;
  }
 
  .gantt-app .g-grid-header {
    height: var(--g-header-h);
    display: flex;
    border-bottom: 1px solid var(--g-border);
    background: var(--g-surface);
    position: sticky;
    top: 0;
    z-index: 4;
  }
 
  .gantt-app .g-col-header {
    flex: none;
    width: var(--g-col-w);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--g-muted);
    border-right: 1px solid var(--g-border);
    font-family: 'JetBrains Mono', monospace;
  }
 
  .gantt-app .g-col-header:last-child { border-right: none; }
 
  .gantt-app .g-col-header.today {
    color: var(--g-accent);
    background: var(--g-accent-light);
  }
 
  /* Rows */
  .gantt-app .g-row {
    height: var(--g-row-h);
    display: flex;
    border-bottom: 1px solid var(--g-border);
    position: relative;
  }
 
  .gantt-app .g-row:last-child { border-bottom: none; }
 
  .gantt-app .g-cell {
    flex: none;
    width: var(--g-col-w);
    border-right: 1px solid var(--g-border);
  }
 
  .gantt-app .g-cell:last-child { border-right: none; }
 
  /* Today line */
  .gantt-app .g-today-line {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--g-accent);
    opacity: .35;
    pointer-events: none;
    z-index: 5;
  }
 
  /* Bars */
  .gantt-app .g-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: filter .15s, transform .15s;
    z-index: 3;
    animation: gBarIn .4s cubic-bezier(.22,1,.36,1) both;
  }
 
  .gantt-app .g-bar:hover {
    filter: brightness(1.1);
    transform: translateY(-50%) scaleY(1.1);
    z-index: 10;
  }
 
  @keyframes gBarIn {
    from { opacity: 0; transform: translateY(-50%) scaleX(.6); }
    to   { opacity: 1; transform: translateY(-50%) scaleX(1); }
  }
 
  .gantt-app .g-bar-progress {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    border-radius: 6px;
    opacity: .3;
    pointer-events: none;
    background: rgba(0,0,0,.3);
    transition: width .5s ease;
  }
 
  .gantt-app .g-bar-label {
    position: relative;
    z-index: 1;
    color: #fff;
  }
 
  /* Tooltip — usa position:fixed, no importa el contenedor */
  .gantt-app .g-tooltip {
    position: fixed;
    background: #1e2235;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .75rem;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity .15s;
    max-width: 220px;
    line-height: 1.6;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
  }
 
  .gantt-app .g-tooltip.visible { opacity: 1; }
 
  .gantt-app .g-tooltip strong {
    display: block;
    font-size: .8rem;
    margin-bottom: 3px;
    color: #a5b4fc;
  }
 
  /* Legend */
  .gantt-app .g-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 16px;
    border-top: 1px solid var(--g-border);
  }
 
  .gantt-app .g-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    color: var(--g-muted);
  }
 
  .gantt-app .g-legend-dot {
    width: 10px; height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
  }
/* ═══════════════════════════════════════════════
   Dark mode — activado con #principiomain.dark
═══════════════════════════════════════════════ */

#principiomain.dark .gantt-app {
  --g-bg:           #0f1117;
  --g-surface:      #161820;;
  --g-border:       #2a2f3d;
  --g-text:         #e8ecf4;
  --g-muted:        #f9f9f9;
  --g-accent:       #5b8af9;
  --g-accent-light: #1a2540;
}

#principiomain.dark .gantt-app .g-wrap {
  box-shadow: 0 2px 16px rgba(0,0,0,.4);
}
#pincipiomain.dark .g-label-header{
  color:#f9f9f9 !important;
  background: #12161e !important;
}
#principiomain.dark .gantt-app .g-legend{
  background-color: #12161e !important;
}
#principiomain.dark .gantt-app .g-label-row:hover {
  background: #22263a;
}
#principiomain.dark .g-grid-header{
  background-color: #12161e !important;
}
#principiomain.dark .gantt-app .g-label-row{
  background-color: #12161e !important;
}
#principiomain.dark .gantt-app .g-tooltip {
  background: #2a2f3d;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}

#principiomain.dark .gantt-app .g-tooltip strong {
  color: #7b9cfc;
}

#principiomain.dark .gantt-app .g-view-btn.active {
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

#principiomain.dark .gantt-app .g-toggle {
  background: #2a2f3d;
}

#principiomain.dark .gantt-app .g-toggle.on {
  background: var(--g-accent);
}

#principiomain.dark .gantt-app .g-bar {
  filter: brightness(0.9);
}

#principiomain.dark .gantt-app .g-bar:hover {
  filter: brightness(1.15);
}
/* echart lista actividades*/
/* ── Shared panel base ── */
.act-donut-panel,
.act-line-panel {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e8f0);
    border-radius: 18px;
    padding: 24px 26px;
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
}

/* ── Donut panel ── */
.act-donut-top {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border, #e4e8f0);
}

.act-donut-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text, #1e2235);
    letter-spacing: -.3px;
}

.act-donut-sub {
    font-size: .75rem;
    color: var(--muted, #8892a4);
    margin-top: 2px;
}

/* Lista y donut lado a lado */
.act-donut-body {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.act-donut-info {
    flex: 1;
    min-width: 0;
}

/* Header de lista */
.act-donut-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border, #e4e8f0);
    margin-bottom: 6px;
}

.act-type-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text, #1e2235);
}

.act-donut-total {
    font-size: .72rem;
    color: var(--muted, #8892a4);
    white-space: nowrap;
}

.act-donut-total b {
    color: var(--text, #1e2235);
    font-weight: 700;
}

/* Filas */
.estado-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 6px;
    border-radius: 8px;
    margin-bottom: 1px;
    cursor: pointer;
    transition: background .15s;
}

.estado-row:hover { background: var(--bg, #f4f6fb); }

.estado-left {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .8rem;
    color: var(--text, #1e2235);
}

.estado-icon {
    width: 26px; height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    flex-shrink: 0;
}

.estado-row b {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text, #1e2235);
    min-width: 20px;
    text-align: right;
}

/* Donut */
#chartActividades {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

/* Botón */
.act-donut-btn {
    margin-top: 14px;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1.5px solid var(--border, #d0d5e0);
    background: transparent;
    font-size: .78rem;
    font-weight: 600;
    color: var(--accent, #3b6ef8);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}

.act-donut-btn:hover {
    background: var(--accent-light, #dce8ff);
    border-color: var(--accent, #3b6ef8);
}

/* ── Line panel ── */
.act-line-top {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border, #e4e8f0);
}

.act-line-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text, #1e2235);
    letter-spacing: -.3px;
}

.act-line-sub {
    font-size: .75rem;
    color: var(--muted, #8892a4);
    margin-top: 2px;
}

#chartLinea {
    width: 100%;
    flex: 1;
    min-height: 260px;
}

/* Responsive — apila en móvil */
@media (max-width: 768px) {
    .act-donut-body { flex-direction: column; }
    #chartActividades { width: 160px; height: 160px; margin: 0 auto; }
}

.infoTree {
      --surface:       #ffffff;
      --surface-2:     #f0f2fb;
      --border:        #dde1ef;
      --text:          #1a1f36;
      --muted:         #6b7280;
      --label:         #9ca3af;
      --primary:       #5b5bd6;
      --primary-glow:  rgba(91,91,214,.18);
      --tag-bg:        #eef0fb;
      --tag-border:    #d4d7f0;
      --tag-active-bg: #ebe9ff;
      --tag-active-fg: #5b5bd6;
      --error:         #e53e3e;
      --error-bg:      rgba(229,62,62,.08);
      --shadow:        0 2px 12px rgba(0,0,0,.07);
 
     
      color: var(--text);
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      gap: .55rem;
      transition: background .25s, color .25s;
    }
 
    #principiomain.dark .infoTree {
      --surface:       #151929;
      --surface-2:     #1c2238;
      --border:        #252d45;
      --text:          #dde1f0;
      --muted:         #6b7a9e;
      --label:         #4a5578;
      --primary:       #7c7cf5;
      --primary-glow:  rgba(124,124,245,.22);
      --tag-bg:        #1c2238;
      --tag-border:    #2a3255;
      --tag-active-bg: rgba(124,124,245,.15);
      --tag-active-fg: #a0a0ff;
      --error:         #ff6b72;
      --error-bg:      rgba(255,107,114,.1);
      --shadow:        0 4px 24px rgba(0,0,0,.5);
 
  
    }
 
    /* card */
    .infoTree .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: .85rem 1rem;
      box-shadow: var(--shadow);
      transition: background .25s, border-color .25s;
    }
 
    .infoTree .card .card {
      background: var(--surface-2);
      box-shadow: none;
      margin-top: .6rem;
    }
 
    .infoTree .label {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--label);
      margin-bottom: .2rem;
    }
 
    .infoTree .value {
      font-size: 15px;
      color: var(--text);
    }
 
    .infoTree .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      width: 100%;
      border: none;
      border-radius: 8px;
      background: var(--primary);
      color: #fff;
      font-size: .88rem;
      font-weight: 600;
      font-family: inherit;
      padding: .65rem 1rem;
      cursor: pointer;
      box-shadow: 0 3px 14px var(--primary-glow);
      transition: filter .18s, transform .12s;
    }
    .infoTree .btn-primary:hover  { filter: brightness(1.1); transform: translateY(-1px); }
    .infoTree .btn-primary:active { filter: brightness(.95); transform: none; }
 
    .infoTree .tags {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
      margin-top: .7rem;
    }
 
    .infoTree .tag {
      font-size: .68rem;
      font-weight: 600;
      padding: .22rem .6rem;
      border-radius: 5px;
      border: 1px solid var(--tag-border);
      background: var(--tag-bg);
      color: var(--muted);
      cursor: pointer;
      user-select: none;
      transition: background .16s, color .16s, border-color .16s;
    }
    .infoTree .tag:hover,
    .infoTree .tag.active {
      background: var(--tag-active-bg);
      border-color: var(--primary);
      color: var(--tag-active-fg);
    }
 
    .infoTree .input-wrap {
      position: relative;
      margin-top: .7rem;
    }
    .infoTree .input-wrap svg {
      position: absolute;
      left: .7rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--error);
      pointer-events: none;
    }
    .infoTree .input-wrap input {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--error);
      border-radius: 8px;
      padding: .55rem .9rem .55rem 2.1rem;
      color: var(--error);
      font-family: inherit;
      font-size: .82rem;
      outline: none;
      box-shadow: 0 0 0 3px var(--error-bg);
    }
    .infoTree .input-wrap input::placeholder { color: var(--error); opacity: .65; }
 
    /* toggle demo */
    .demo-toggle { display: flex; gap: .5rem; }
    .demo-toggle button {
      padding: .38rem .9rem;
      border-radius: 6px;
      border: 1px solid #ccc;
      background: #fff;
      cursor: pointer;
      font-size: .78rem;
      font-weight: 600;
    }
    .demo-toggle button.on { background: #5b5bd6; color: #fff; border-color: #5b5bd6; }
/* ══════════════════════════════════════════════
   Panel de búsqueda — scoped desde .infoTree
   Hereda tokens de .infoTree y .infoTree.dark
══════════════════════════════════════════════ */

.infoTree .panel.panel-default {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 10px;
    box-shadow:    var(--shadow);
    transition:    background .25s, border-color .25s;
}

.infoTree .panel.panel-default > .panel-body {
    padding: .85rem 1rem;
}

/* labels */
.infoTree .form-group label {
    font-size:      .7rem;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--label);
    margin-bottom:  .3rem;
    display:        block;
}

/* inputs y select */
.infoTree .form-control {
    background:    var(--surface-2);
    border:        1px solid var(--border);
    border-radius: 7px;
    color:         var(--text);
    font-size:     .85rem;
    height:        34px;
    padding:       .35rem .75rem;
    box-shadow:    none;
    transition:    border-color .18s, box-shadow .18s;
}

.infoTree .form-control:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px var(--primary-glow);
    outline:      none;
}

.infoTree .form-control::placeholder {
    color:   var(--label);
    opacity: 1;
}

/* select flecha */
.infoTree select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right .7rem center;
    padding-right:       2rem;
}

/* checkbox */
.infoTree .checkbox label {
    font-size:      .85rem;
    font-weight:    400;
    letter-spacing: 0;
    text-transform: none;
    color:          var(--text);
    display:        flex;
    align-items:    center;
    gap:            .4rem;
    cursor:         pointer;
}

.infoTree .checkbox input[type="checkbox"] {
    accent-color: var(--primary);
    width:  15px;
    height: 15px;
}

/* botón */
.infoTree .btn.btn-primary.btn-block {
    background:  var(--primary);
    border:      none;
    border-radius: 8px;
    font-size:   .88rem;
    font-weight: 600;
    height:      34px;
    box-shadow:  0 3px 14px var(--primary-glow);
    transition:  filter .18s, transform .12s;
}

.infoTree .btn.btn-primary.btn-block:hover  { filter: brightness(1.1); transform: translateY(-1px); }
.infoTree .btn.btn-primary.btn-block:active { filter: brightness(.95); transform: none; }

.infoTree .btn.btn-primary.btn-block[disabled] {
    opacity: .6;
    cursor:  not-allowed;
    transform: none;
}

/* alert error */
.infoTree .alert.alert-danger {
    background:    var(--error-bg);
    border:        1px solid var(--error);
    border-radius: 8px;
    color:         var(--error);
    font-size:     .82rem;
    padding:       .5rem .85rem;
    margin-top:    .6rem;
    margin-bottom: 0;
}
/* toggle switch IA */
.infoTree .ia-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
}

.infoTree .ia-switch {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
}

.infoTree .ia-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.infoTree .ia-track {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: var(--border);
    cursor: pointer;
    transition: background .2s;
}

.infoTree .ia-switch input:checked ~ .ia-track {
    background: var(--primary);
}

.infoTree .ia-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
    pointer-events: none;
}

.infoTree .ia-switch input:checked ~ .ia-track .ia-thumb {
    transform: translateX(16px);
}

.infoTree .ia-label {
    font-size: .84rem;
    color: var(--text);
}

/* barra inferior */
.infoTree .tree-bottom-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: .7rem;
    flex-wrap: wrap;
}

.infoTree .tree-sys-info {
    font-size: 16px;
    color: var(--muted);
}
.tree-sys-info span {
  font-size: 16px;
}

.infoTree .tree-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.infoTree .tree-legend span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    color: var(--muted);
}

.infoTree .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.infoTree .dot-solicitud  { background: #378ADD; }
.infoTree .dot-actividad  { background: #1D9E75; }
.infoTree .dot-plantilla  { background: #D85A30; }
.infoTree .dot-respuestas { background: #7F77DD; }
.infoTree .dot-pdf { background: #993C1D; }
.infoTree .dot-libro  { background: #378ADD; }
.infoTree .dot-tag { background:#1D9E75 }
.infoTree .dot-hijotag { background:#84e95cff }
.infoTree .dot-doc { background:#534AB7}
.infoTree .dot-chunk { background:#5082eeff }
.infoTree .dot-qa { background: #990dc4ff }
.infoTree .dot-ia { background: #e79110ff }
.infoTree .dot-materiales { background: #2563EB;}
.infoTree .dot-movimiento { background: #DC2626;}
.infoTree .dot-bodegas { background: #059669;}
.infoTree .dot-lotes { background: #7C3AED;}
.infoTree .tree-view-btns { display: flex; gap: 4px; margin-left: auto; }

.infoTree .tvbtn {
    font-size: .7rem;
    padding: .2rem .65rem;
    border-radius: 5px;
    border: 1px solid var(--tag-border);
    background: var(--tag-bg);
    color: var(--muted);
    cursor: pointer;
    transition: all .16s;
}

.infoTree .tvbtn.active {
    background: var(--tag-active-bg);
    border-color: var(--primary);
    color: var(--tag-active-fg);
}
.infoTree .tree-view-btns {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.infoTree .tree-select-vista {
    font-size: .72rem;
    height: 28px;
    padding: 0 1.8rem 0 .6rem;
    border-radius: 6px;
    border: 1px solid var(--tag-border);
    background: var(--tag-bg);
    color: var(--text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    outline: none;
    transition: border-color .18s;
}

.infoTree .tree-select-vista:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
/* mode pills */
.infoTree .mode-pills {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 34px;
    margin-top: 20px; /* alinea con los inputs */
}

.infoTree .mode-pill {
    font-size: .78rem;
    font-weight: 600;
    padding: .3rem .85rem;
    border-radius: 7px;
    border: 1px solid var(--tag-border);
    background: var(--tag-bg);
    color: var(--muted);
    cursor: pointer;
    transition: all .16s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.infoTree .mode-pill:hover {
    background: var(--tag-active-bg);
    color: var(--tag-active-fg);
    border-color: var(--primary);
}

.infoTree .mode-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 3px 10px var(--primary-glow);
}
/* fuerza el tooltip de echarts a crecer */
/* apunta al div interno que ECharts genera dentro del tooltip */

#flareChartReal div .echarts-tooltip{
  width: 500px !important;
  height: 500px !important;
  overflow: hidden !important;
  
}
#flareChartReal div .ec-tooltip-ia h4   { font-size:16px; margin:0 0 4px; font-weight:600; }
#flareChartReal div .ec-tooltip-ia p    { margin:0 0 6px; font-size:15px; ; }
#flareChartReal div .ec-tooltip-ia b    { margin:0 0 6px; font-size:15px; }

/* ============================================================
   Buscador unificado — unified-search.css
   Prefijo: us-  (no colisiona con Bootstrap)
   ============================================================ */
/* ── Barra de búsqueda ─────────────────────────────────────────── */
.us-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 50px;
  padding: 0 12px;
  height: 40px;
  gap: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.us-bar:focus-within,
.us-bar.show {
  border-color: #9da8b7;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
 
.us-bar__icon {
  color: #9da8b7;
  font-size: 13px;
  flex-shrink: 0;
}
 
.us-bar__input {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 13.5px;
  color: #1a1a2e;
  padding: 0;
  min-width: 0;
}
.us-bar__input::placeholder { color: #b5bec9; }
 
.us-bar__close {
  font-size: 12px;
  color: #6c757d;
  background: #f1f3f5;
  border: none;
  border-radius: 50px;
  padding: 3px 12px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s;
}
.us-bar__close:hover { background: #e2e6ea; color: #343a40; }
 
 
/* ── Dropdown contenedor ───────────────────────────────────────── */
.us-dropdown {
  margin-top: 6px !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
  border: 1px solid #e9ecef !important;
  overflow: hidden;
}
.dark .us-dropdown {
   border: transparent !important;
}
 
.us-dropdown__scroll {
  max-height: 30rem;
}
 
 
/* ── Cabecera con conteo ───────────────────────────────────────── */
.us-dropdown__header {
  padding: 10px 16px 8px;
 /* border-bottom: 1px solid #f1f3f5;*/
  font-size: 12px;
  color: #6c757d;
}
.us-dropdown__count {
  font-weight: 600;
  color: #3874ff;
}
 
 
/* ── Etiqueta de sección ───────────────────────────────────────── */
.us-section-label {
  padding: 10px 16px 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #9da8b7;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-top: 1px solid #f1f3f5;
  background: #f5f7fc;
}
.dark .us-section-label{
    background: #1a1c21;
    border-top: 1px solid #2a2f3d;
} 
 
/* ── Fila de usuario ───────────────────────────────────────────── */
.us-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #f7f8fa;
  cursor: pointer;
  text-decoration: none;
  transition: background .1s;
}
.us-item:hover { background: #f8f9fc; }
.us-item:last-child { border-bottom: none; }
 
.us-item__avatar {
  flex-shrink: 0;
}
 
.us-item__body {
  flex: 1;
  min-width: 0;
}
 
.us-item__name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.us-item__tag {
  font-size: 11.5px;
  color: #6c757d;
  margin: 0 0 2px;
}
 
.us-item__org {
  font-size: 11.5px;
  color: #868e96;
  margin: 0;
  display: flex;
  align-items: center;
  text-transform: capitalize;
}
 
.us-item__star {
  position: relative;
  display: inline-flex;
  align-items: center;
}
 
.us-item__check {
  position: absolute;
  font-size: 7px;
  bottom: -2px;
  right: -3px;
}
 
.us-item__arrow {
  color: #ced4da;
  font-size: 11px;
  flex-shrink: 0;
}
 
.us-item__you-badge {
  font-size: 10.5px;
  background: #e7f0ff;
  color: #3874ff;
  border-radius: 50px;
  padding: 2px 9px;
  font-weight: 600;
  flex-shrink: 0;
}
 
 
/* ── Fila de publicación ───────────────────────────────────────── */
.us-post {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid #f7f8fa;
  cursor: pointer;
  text-decoration: none;
  transition: background .1s;
}
.us-post:hover { background: #f8f9fc; }
.us-post:last-child { border-bottom: none; }
 
.us-post__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f1f3f5;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
 
.us-post__body {
  flex: 1;
  min-width: 0;
}
 
.us-post__top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
 
.us-post__title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1a2e;
}
 
.us-post__hashtag {
  font-size: 11px;
  background: #f1f3f5;
  color: #6c757d;
  border-radius: 4px;
  padding: 1px 6px;
}
 
.us-post__summary {
  font-size: 12px;
  color: #6c757d;
  margin: 0 0 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
 
.us-post__meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #9da8b7;
}
 
 
/* ── Cargando ─────────────────────────────────────────────────── */
.us-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  font-size: 13px;
  color: #6c757d;
}
 
 
/* ── Sin resultados ───────────────────────────────────────────── */
.us-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px;
  gap: 8px;
}
.us-empty__icon {
  font-size: 22px;
  color: #ced4da;
}
.us-empty__text {
  font-size: 13.5px;
  font-weight: 600;
  color: #adb5bd;
  margin: 0;
}
/* ── Árbol (N niveles dinámicos) ──────────────────────────────── */
.us-tree {
  padding: 2px 0 6px;
  cursor: pointer;
  transition: background .15s;
  border-radius: 0px;
  border-top:1px solid #efefef;
  border-bottom:1px solid #efefef;
}
.dark .us-tree{
    border-top: 1px solid #2a2f3d;
    border-bottom: 1px solid #2a2f3d;
}
.us-tree:hover { background: #f8f9fc; }
/* Fila base — padding-left se aplica via ng-style dinámico */
.us-tree__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  line-height: 1.2;
  border-bottom: none;
}
.us-tree__item:last-child { border-bottom: none; }
.us-tree__item:hover {
  background: transparent !important;
}
/* Nodo raíz (nivel 1) */
.us-tree__item--root > .us-tree__text {
  font-weight: 600;
  font-size: 13.5px;
  color: #1a1a2e;
}
 
/* Conector ↳ — se repite una vez por nivel de profundidad */
.us-tree__connector {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.us-tree__line {
  height: 10px;
}
.us-tree__arrow {
  font-size: 11px;
  color: #ced4da;
  line-height: 1;
}
 
/* Ícono */
.us-tree__icon {
  font-size: 12px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.us-tree__icon--root { color: #3874ff; }
.us-tree__icon--mid  { color: #6c757d; }
.us-tree__icon--leaf { color: #adb5bd; }
 
/* Texto — elipsis si es muy largo */
.us-tree__text {
  font-size: 13px;
  color: #495057;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
 
/* Indicador "hay más nodos" */
.us-tree__more {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  /*border-top: 1px dashed #e9ecef;*/
  cursor: pointer;
  transition: background .1s;
}
/*.us-tree__more:hover { background: #f8f9fc; }*/
.us-tree__more-dots {
  font-size: 11px;
  color: #ced4da;
  letter-spacing: 3px;
  padding-left: 4px;
}
.us-tree__more-label {
  font-size: 11.5px;
  color: #adb5bd;
  font-style: italic;
  flex: 1;
}
.us-tree__more-arrow {
  font-size: 10px;
  color: #ced4da;
}
 
/* ── Cuerpo del nodo (texto + badge) ──────────────────────────── */
.us-tree__body {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
 
/* Contador para grupos */
.us-tree__count {
  font-size: 11px;
  background: #f1f3f5;
  color: #6c757d;
  border-radius: 10px;
  padding: 1px 7px;
  flex-shrink: 0;
}
 
/* ── Badges por tipo ──────────────────────────────────────────── */
.us-tree__badge {
  font-size: 10px;
  border-radius: 4px;
  padding: 1px 6px;
  flex-shrink: 0;
  white-space: nowrap;
}
.us-tree__badge--tag          { background:#dbeafe; color:#1d4ed8; }
.us-tree__badge--hijo_tag     { background:#fef9c3; color:#a16207; }
.us-tree__badge--docmaster    { background:#fee2e2; color:#b91c1c; }
.us-tree__badge--grupo_chunk  { background:#e0f2fe; color:#0369a1; }
.us-tree__badge--chunk        { background:#f0fdf4; color:#166534; }
.us-tree__badge--grupo_ia     { background:#f3e8ff; color:#7e22ce; }
.us-tree__badge--ia           { background:#fdf4ff; color:#a21caf; }
 
/* ── Íconos por tipo ──────────────────────────────────────────── */
.us-tree__icon--tag          { color:#1d4ed8; }
.us-tree__icon--hijo_tag     { color:#a16207; }
.us-tree__icon--docmaster    { color:#b91c1c; }
.us-tree__icon--grupo_chunk  { color:#0369a1; }
.us-tree__icon--chunk        { color:#166534; }
.us-tree__icon--grupo_ia     { color:#7e22ce; }
.us-tree__icon--ia           { color:#a21caf; }


.kb-card .kb-prose {
  font-size: 16px !important;
  font-family: var(--phoenix-body-font-family) !important;
  line-height: 1.5 !important;
}

/* Texto normal */
.kb-card .kb-prose p,
.kb-card .kb-prose span,
.kb-card .kb-prose strong
.kb-card .kb-prose a
.kb-card .kb-prose mark {
  font-size: inherit  !important;
  font-family: inherit !important;
  line-height: inherit !important;
}
.kb-card .kb-prose mark {
  font-size: inherit  !important;
  font-family: inherit !important;
  font-weight: bold !important;
  line-height: inherit !important;
}
.kb-card .kb-prose strong {
  font-size: 18px  !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  line-height: inherit !important;
}
.kb-card .kb-prose p strong {
  font-size: 16px  !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  line-height: inherit !important;
}
/* Títulos */
.kb-card .kb-prose h1 {
  font-size: 20px;
  font-weight: 600;
  font-family: inherit !important;
  line-height: inherit !important;
}

.kb-card .kb-prose h2 {
  font-size: 18px;
  font-weight: 600;
  font-family: inherit !important;
  line-height: inherit !important;
}

.kb-card .kb-prose h3 {
  font-size: 16px;
  font-weight: 600;
  font-family: inherit !important;
  line-height: inherit !important;
}

.kb-card .kb-prose h4 {
    font-size: 18px !important;
    font-weight: 800 !important;
    font-family: inherit !important;
    line-height: inherit !important;
}
/* --- Lista de tarjetas --- */
  .lugares-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
 
  /* --- Tarjeta individual --- */
  .lugar-card {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 14px;
    align-items: start;
    background: #ffffff;
    border: 0.5px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .lugar-card:hover {
    border-color: rgba(0,0,0,0.20);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .lugar-card--active {
    border-color: rgba(24, 95, 165, 0.45);
  }
 
  /* --- Imagen de tarjeta --- */
  .lugar-card__img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f0e8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .lugar-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lugar-card__img-placeholder {
    color: #b4b2a9;
    font-size: 22px;
  }
 
  /* --- Cuerpo de tarjeta --- */
  .lugar-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .lugar-card__date {
    font-size: 11px;
    color: #888780;
    margin-bottom: 2px;
  }
  .lugar-card__name {
    font-size: 15px;
    font-weight: 600;
    color: #2c2c2a;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
 
  /* --- Tags / pills --- */
  .lugar-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
  }
  .lugar-tag {
    font-size: 11px;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
  }
  .lugar-tag--neutral {
    background: #f1f0e8;
    color: #5f5e5a;
    border: 0.5px solid #d3d1c7;
  }
  .lugar-tag--accent {
    background: #e6f1fb;
    color: #185fa5;
    border: 0.5px solid #b5d4f4;
  }
 
  /* --- Botón cerrar / eliminar --- */
  .lugar-card__close {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b4b2a9;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    padding: 0;
  }
  .lugar-card__close:hover {
    background: #f1f0e8;
    color: #2c2c2a;
  }
 
  /* --- Panel del mapa --- */
  .lugar-map-panel {
    background: #ffffff;
    border: 0.5px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    overflow: hidden;
  }
  .lugar-map-panel__search {
    padding: 14px 14px 10px;
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
  }
  .lugar-map-panel__hint {
    font-size: 11px;
    color: #888780;
    text-align: right;
    margin: 8px 0 0;
    line-height: 1.4;
  }
  .lugar-map-panel__map {
    background: #e8e8e8;
  }
 
  /* --- Estado vacío --- */
  .lugar-empty-state {
    border: 0.5px dashed rgba(0,0,0,0.15);
    border-radius: 12px;
    background: #f9f9f7;
    color: #888780;
  }

[data-bs-theme=dark] .btn-subtle-primary {
  --phoenix-btn-color: #85A9FF;--phoenix-btn-bg: rgba(56, 116, 255, 0.14);--phoenix-btn-border-color: rgba(56, 116, 255, 0.14);--phoenix-btn-hover-color: #85A9FF;--phoenix-btn-hover-bg: rgba(56, 116, 255, 0.2);--phoenix-btn-hover-border-color: rgba(175, 199, 255, 0.226);--phoenix-btn-focus-shadow-rgb: 110, 153, 255;--phoenix-btn-active-color: #000000;--phoenix-btn-active-bg: rgba(209, 223, 255, 0.312);--phoenix-btn-active-border-color: rgba(175, 199, 255, 0.226);--phoenix-btn-active-shadow: initial;--phoenix-btn-disabled-color: #fff;--phoenix-btn-disabled-bg: rgba(56, 116, 255, 0.14);--phoenix-btn-disabled-border-color: rgba(56, 116, 255, 0.14)
}

[data-bs-theme=dark] .btn-subtle-secondary {
  --phoenix-btn-color: #cbd0dd;--phoenix-btn-bg: rgba(49, 55, 74, 0.5);--phoenix-btn-border-color: rgba(49, 55, 74, 0.5);--phoenix-btn-hover-color: #cbd0dd;--phoenix-btn-hover-bg: rgba(49, 55, 74, 0.8);--phoenix-btn-hover-border-color: rgba(101, 105, 119, 0.55);--phoenix-btn-focus-shadow-rgb: 102, 108, 125;--phoenix-btn-active-color: #fff;--phoenix-btn-active-bg: rgba(137, 141, 152, 0.6);--phoenix-btn-active-border-color: rgba(101, 105, 119, 0.55);--phoenix-btn-active-shadow: initial;--phoenix-btn-disabled-color: #fff;--phoenix-btn-disabled-bg: rgba(49, 55, 74, 0.5);--phoenix-btn-disabled-border-color: rgba(49, 55, 74, 0.5)
}

[data-bs-theme=dark] .btn-subtle-success {
  --phoenix-btn-color: #90D67F;--phoenix-btn-bg: rgba(37, 176, 3, 0.14);--phoenix-btn-border-color: rgba(37, 176, 3, 0.14);--phoenix-btn-hover-color: #90D67F;--phoenix-btn-hover-bg: rgba(37, 176, 3, 0.2);--phoenix-btn-hover-border-color: rgba(167, 223, 153, 0.226);--phoenix-btn-focus-shadow-rgb: 112, 203, 90;--phoenix-btn-active-color: #000000;--phoenix-btn-active-bg: rgba(205, 237, 197, 0.312);--phoenix-btn-active-border-color: rgba(167, 223, 153, 0.226);--phoenix-btn-active-shadow: initial;--phoenix-btn-disabled-color: #fff;--phoenix-btn-disabled-bg: rgba(37, 176, 3, 0.14);--phoenix-btn-disabled-border-color: rgba(37, 176, 3, 0.14)
}

[data-bs-theme=dark] .btn-subtle-info {
  --phoenix-btn-color: #60C6FF;--phoenix-btn-bg: rgba(0, 151, 235, 0.14);--phoenix-btn-border-color: rgba(0, 151, 235, 0.14);--phoenix-btn-hover-color: #60C6FF;--phoenix-btn-hover-bg: rgba(0, 151, 235, 0.2);--phoenix-btn-hover-border-color: rgba(152, 213, 247, 0.226);--phoenix-btn-focus-shadow-rgb: 67, 184, 249;--phoenix-btn-active-color: #000000;--phoenix-btn-active-bg: rgba(196, 231, 250, 0.312);--phoenix-btn-active-border-color: rgba(152, 213, 247, 0.226);--phoenix-btn-active-shadow: initial;--phoenix-btn-disabled-color: #fff;--phoenix-btn-disabled-bg: rgba(0, 151, 235, 0.14);--phoenix-btn-disabled-border-color: rgba(0, 151, 235, 0.14)
}

[data-bs-theme=dark] .btn-subtle-warning {
  --phoenix-btn-color: #FFCC85;--phoenix-btn-bg: rgba(229, 120, 11, 0.14);--phoenix-btn-border-color: rgba(229, 120, 11, 0.14);--phoenix-btn-hover-color: #FFCC85;--phoenix-btn-hover-bg: rgba(229, 120, 11, 0.2);--phoenix-btn-hover-border-color: rgba(245, 200, 156, 0.226);--phoenix-btn-focus-shadow-rgb: 247, 179, 97;--phoenix-btn-active-color: #000000;--phoenix-btn-active-bg: rgba(249, 224, 199, 0.312);--phoenix-btn-active-border-color: rgba(245, 200, 156, 0.226);--phoenix-btn-active-shadow: initial;--phoenix-btn-disabled-color: #fff;--phoenix-btn-disabled-bg: rgba(229, 120, 11, 0.14);--phoenix-btn-disabled-border-color: rgba(229, 120, 11, 0.14)
}

[data-bs-theme=dark] .btn-subtle-danger {
  --phoenix-btn-color: #F48270;--phoenix-btn-bg: rgba(236, 31, 0, 0.14);--phoenix-btn-border-color: rgba(236, 31, 0, 0.14);--phoenix-btn-hover-color: #F48270;--phoenix-btn-hover-bg: rgba(236, 31, 0, 0.2);--phoenix-btn-hover-border-color: rgba(247, 165, 152, 0.226);--phoenix-btn-focus-shadow-rgb: 242, 100, 79;--phoenix-btn-active-color: #000000;--phoenix-btn-active-bg: rgba(251, 203, 196, 0.312);--phoenix-btn-active-border-color: rgba(247, 165, 152, 0.226);--phoenix-btn-active-shadow: initial;--phoenix-btn-disabled-color: #fff;--phoenix-btn-disabled-bg: rgba(236, 31, 0, 0.14);--phoenix-btn-disabled-border-color: rgba(236, 31, 0, 0.14)
}

.btn-subtle-primary {
  --phoenix-btn-color: #003CC7;--phoenix-btn-bg: #E5EDFF;--phoenix-btn-border-color: #E5EDFF;--phoenix-btn-hover-color: #003CC7;--phoenix-btn-hover-bg: var(--phoenix-primary-lighter);--phoenix-btn-hover-border-color: #e8efff;--phoenix-btn-focus-shadow-rgb: 195, 210, 247;--phoenix-btn-active-color: #000000;--phoenix-btn-active-bg: #eaf1ff;--phoenix-btn-active-border-color: #e8efff;--phoenix-btn-active-shadow: initial;--phoenix-btn-disabled-color: #000000;--phoenix-btn-disabled-bg: #E5EDFF;--phoenix-btn-disabled-border-color: #E5EDFF
}

.btn-subtle-secondary {
  --phoenix-btn-color: #525b75;--phoenix-btn-bg: #eff2f6;--phoenix-btn-border-color: #eff2f6;--phoenix-btn-hover-color: #525b75;--phoenix-btn-hover-bg: var(--phoenix-secondary-lighter);--phoenix-btn-hover-border-color: #f1f3f7;--phoenix-btn-focus-shadow-rgb: 215, 219, 227;--phoenix-btn-active-color: #000000;--phoenix-btn-active-bg: #f2f5f8;--phoenix-btn-active-border-color: #f1f3f7;--phoenix-btn-active-shadow: initial;--phoenix-btn-disabled-color: #000000;--phoenix-btn-disabled-bg: #eff2f6;--phoenix-btn-disabled-border-color: #eff2f6
}

.btn-subtle-success {
  --phoenix-btn-color: #1C6C09;--phoenix-btn-bg: #D9FBD0;--phoenix-btn-border-color: #D9FBD0;--phoenix-btn-hover-color: #1C6C09;--phoenix-btn-hover-bg: var(--phoenix-success-lighter);--phoenix-btn-hover-border-color: #ddfbd5;--phoenix-btn-focus-shadow-rgb: 189, 230, 178;--phoenix-btn-active-color: #000000;--phoenix-btn-active-bg: #e1fcd9;--phoenix-btn-active-border-color: #ddfbd5;--phoenix-btn-active-shadow: initial;--phoenix-btn-disabled-color: #000000;--phoenix-btn-disabled-bg: #D9FBD0;--phoenix-btn-disabled-border-color: #D9FBD0
}

.btn-subtle-info {
  --phoenix-btn-color: #005585;--phoenix-btn-bg: #C7EBFF;--phoenix-btn-border-color: #C7EBFF;--phoenix-btn-hover-color: #005585;--phoenix-btn-hover-bg: var(--phoenix-info-lighter);--phoenix-btn-hover-border-color: #cdedff;--phoenix-btn-focus-shadow-rgb: 169, 213, 237;--phoenix-btn-active-color: #000000;--phoenix-btn-active-bg: #d2efff;--phoenix-btn-active-border-color: #cdedff;--phoenix-btn-active-shadow: initial;--phoenix-btn-disabled-color: #000000;--phoenix-btn-disabled-bg: #C7EBFF;--phoenix-btn-disabled-border-color: #C7EBFF
}

.btn-subtle-warning {
  --phoenix-btn-color: #BC3803;--phoenix-btn-bg: #FFEFCA;--phoenix-btn-border-color: #FFEFCA;--phoenix-btn-hover-color: #BC3803;--phoenix-btn-hover-bg: var(--phoenix-warning-lighter);--phoenix-btn-hover-border-color: #fff1cf;--phoenix-btn-focus-shadow-rgb: 245, 212, 172;--phoenix-btn-active-color: #000000;--phoenix-btn-active-bg: #fff2d5;--phoenix-btn-active-border-color: #fff1cf;--phoenix-btn-active-shadow: initial;--phoenix-btn-disabled-color: #000000;--phoenix-btn-disabled-bg: #FFEFCA;--phoenix-btn-disabled-border-color: #FFEFCA
}

.btn-subtle-danger {
  --phoenix-btn-color: #B81800;--phoenix-btn-bg: #FFE0DB;--phoenix-btn-border-color: #FFE0DB;--phoenix-btn-hover-color: #B81800;--phoenix-btn-hover-bg: var(--phoenix-danger-lighter);--phoenix-btn-hover-border-color: #ffe3df;--phoenix-btn-focus-shadow-rgb: 244, 194, 186;--phoenix-btn-active-color: #000000;--phoenix-btn-active-bg: #ffe6e2;--phoenix-btn-active-border-color: #ffe3df;--phoenix-btn-active-shadow: initial;--phoenix-btn-disabled-color: #000000;--phoenix-btn-disabled-bg: #FFE0DB;--phoenix-btn-disabled-border-color: #FFE0DB
}