:root {
  /*Variables de configuración institucional*/
  --color-institucional:#028793;

  --color-sis-main: #2d8dad;
  --sw-anchor-active-primary-color: #1393d3;
  --sw-progress-color: #1393d3;
  --color_resalte: #83aff7;
  --color_fondo_filtro_activo: #EDEDED;
  --color_texto_filtro_activo: #858796;
  --color_borde_filtro_activo: #cecece;

  /*Contenedores de totales*/
  --bg-color: #f4f7f9; --card-bg: #ffffff; --border-color: #e9ecef;
  --text-color: #343a40; --text-muted: #6c757d; --header-bg: #f8f9fa;
  --header-color: #fff; --row-hover: #f8f9fa; --primary-color: #0d6efd;
  --accent-orange: #fd7e14; --accent-red: #dc3545; --accent-green: #198754;
  --accent-yellow: #ffc107;
  --shadow: 0 4px 12px rgba(0,0,0, 0.05); --gap: 24px; --padding: 18px;

  --primaryfont:'Inter'
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: var(--primaryfont), sans-serif;
  background: #f8f9fa;
  transition: background 0.3s, color 0.3s;
}
body.nav-d14s-dark {
  background: #1e1e2f;
  color: #eee;
}
.nav-d14s-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  z-index: 10;
  position: sticky;
  top: 0;
}
body.nav-d14s-dark .nav-d14s-topbar {
  background: #2a2a3d;
  border-color: #444;
}
a{
  text-decoration: none;
  color:#333;
}
body.nav-d14s-dark a{
  color: #eee;
}
body.d14s-img-top{
  display: block;
}
body.d14s-img-top-dark{
  display: none;
}
body.nav-d14s-dark .d14s-img-top{
  display: none;
}
body.nav-d14s-dark .d14s-img-top-dark{
  display: block;
}
.nav-d14s-logo {
  font-weight: bold;
  font-size: 20px;
}
.nav-d14s-container_d14s {
  display: flex;
  min-height: calc(100vh - 60px);
}
aside {
  background: #fff;
  width: 250px;
  transition: width 0.3s, left 0.3s;
  border-right: 1px solid #ddd;
  overflow-y: auto;
  position: relative;
}
body.nav-d14s-dark aside {
  background: #2a2a3d;
  color: #eee;
  border-color: #444;
}
aside.nav-d14s-collapsed {
  width: 60px;
}
aside.nav-d14s-collapsed ul li {
  justify-content: center;
  padding: 15px 35px;
}
aside ul {
  margin-top: 20px;
  list-style: none;
  padding: 0;
}
aside ul li {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  position: relative;
  justify-content: flex-start;
  color:#7c7c7c;
  font-size: 16px;
}
aside ul li:hover {
  background: rgba(53, 220, 214, 0.1);
}
body.nav-d14s-dark aside ul li:hover {
  background: rgba(255, 255, 255, 0.1);
}
aside ul li i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
}
aside ul li.nav-d14s-active {
  background: #028793;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 15px;
  padding-right: 5px;
}
aside ul li.nav-d14s-active i {
  color: #fff;
}
aside ul li.nav-d14s-active a span{
  color: #fff;
}
aside.nav-d14s-collapsed ul li span {
  display: none;
}

/* Indicador de submenú */
.nav-d14s-has-submenu::after {
  content: '\f105';
  font-family:'Font Awesome 6 Free', var(--primaryfont), sans-serif;
  font-weight: 900;
  margin-left: auto;
  font-size: 12px;
  opacity: 0.7;
  transition: transform 0.3s;
}

.nav-d14s-has-submenu.nav-d14s-submenu-open::after {
  transform: rotate(90deg);
}

aside.nav-d14s-collapsed .nav-d14s-has-submenu::after {
  display: none;
}

/* Submenú flotante para DESKTOP */
.nav-d14s-floating-submenu {
  position: fixed;
  left: 260px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}
.nav-d14s-floating-submenu ul li{
  justify-content: left !important;
}
body.nav-d14s-dark .nav-d14s-floating-submenu {
  background: #3a3a4f;
  border-color: #555;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.nav-d14s-floating-submenu.nav-d14s-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.nav-d14s-floating-submenu ul {
  padding: 8px 0;
  margin: 0;
}

.nav-d14s-floating-submenu li {
  padding: 12px 16px !important;
  margin: 0 !important;
  font-size: 14px;
  border-radius: 0 !important;
  background: transparent !important;
  color: #333 !important;
  font-weight: normal !important;
  transition: background 0.2s;
  white-space: nowrap;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

body.nav-d14s-dark .nav-d14s-floating-submenu li {
  color: #eee !important;
}

.nav-d14s-floating-submenu li:hover {
  background: #f8f9fa !important;
  color: #028793 !important;
}

.nav-d14s-floating-submenu li:hover a{
  color: #028793 !important;
}

.nav-d14s-floating-submenu li.nav-d14s-selected {
  background: #028793 !important;
  color: #fff !important;
}
.nav-d14s-floating-submenu li.nav-d14s-selected a{
  color: #fff !important;
}

body.nav-d14s-dark .nav-d14s-floating-submenu li:hover {
  background: #4a4a5f !important;
  color: #fff !important;
}

body.nav-d14s-dark .nav-d14s-floating-submenu li.nav-d14s-selected {
  background: #028793 !important;
  color: #fff !important;
}

.nav-d14s-floating-submenu li i {
  margin-right: 8px;
  width: 16px;
  font-size: 13px;
}

#sidebar{
  overflow: hidden;
  position: fixed;
  height: 100vh;
  z-index: 999;
}

/* Cuando el sidebar está colapsado */
aside.nav-d14s-collapsed + .nav-d14s-main .nav-d14s-floating-submenu {
  left: 70px;
}

/* Submenú inline para MOBILE */
.nav-d14s-inline-submenu {
  display: none;
  background: rgba(220, 53, 69, 0.05);
  border-left: 3px solid #dc3545;
  margin-top: 0;
  padding-left: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

body.nav-d14s-dark .nav-d14s-inline-submenu {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: #dc3545;
}

.nav-d14s-inline-submenu.nav-d14s-show {
  display: block;
  max-height: 300px;
  padding: 8px 0;
}

.nav-d14s-inline-submenu ul {
  padding: 0;
  margin: 0;
}

.nav-d14s-inline-submenu li {
  padding: 12px 20px 12px 50px !important;
  margin: 0 !important;
  font-size: 14px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #666 !important;
  font-weight: normal !important;
  transition: all 0.2s;
  position: relative;
}

body.nav-d14s-dark .nav-d14s-inline-submenu li {
  color: #ccc !important;
}

.nav-d14s-inline-submenu li:hover {
  background: rgba(220, 53, 69, 0.1) !important;
  color: #dc3545 !important;
}

.nav-d14s-inline-submenu li.nav-d14s-selected {
  background: #dc3545 !important;
  color: #fff !important;
}

body.nav-d14s-dark .nav-d14s-inline-submenu li:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

body.nav-d14s-dark .nav-d14s-inline-submenu li.nav-d14s-selected {
  background: #dc3545 !important;
  color: #fff !important;
}

.nav-d14s-inline-submenu li i {
  margin-right: 8px;
  width: 16px;
  font-size: 13px;
}

/* Tooltip para sidebar colapsado */
.nav-d14s-tooltip {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  margin-left: 10px;
  z-index: 1001;
}

body.nav-d14s-dark .nav-d14s-tooltip {
  background: #fff;
  color: #333;
}

.nav-d14s-tooltip::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: #333;
}

body.nav-d14s-dark .nav-d14s-tooltip::before {
  border-right-color: #fff;
}

aside.nav-d14s-collapsed ul li:hover .nav-d14s-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Ocultar tooltips cuando el submenú está abierto */
aside.nav-d14s-collapsed .nav-d14s-has-submenu.nav-d14s-submenu-open .nav-d14s-tooltip {
  opacity: 0;
  visibility: hidden;
}

.nav-d14s-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.nav-d14s-user {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 180px;
  font-size: 16px;;
}
.nav-d14s-user img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  vertical-align: middle;
  border: 2px solid #028793;
}
body.nav-d14s-dark .nav-d14s-user img {
  border-color: #fff;
}
.nav-d14s-user span {
  margin-left: 10px;
}
.nav-d14s-submenu {
  display: none;
  position: absolute;
  right: 0;
  top: 50px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 100;
  width: 180px;
  font-size: 14px;
}
body.nav-d14s-dark .nav-d14s-submenu {
  background: #3a3a4f;
  border-color: #555;
}
.nav-d14s-submenu a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #7c7c7c;
}
body.nav-d14s-dark .nav-d14s-submenu a {
  color: #eee;
}
.nav-d14s-submenu a:hover {
  background: #f0f0f0;
}
body.nav-d14s-dark .nav-d14s-submenu a:hover {
  background: #4a4a5f;
}
.nav-d14s-content {
  padding: 20px;
}
.nav-d14s-content h2{
  font-size: 3rem;
}
body.nav-d14s-dark .nav-d14s-content h2{
  color:#eee;
}
.nav-d14s-content p{
  font-size: 1.6rem;
}
#toggleMenuMobile {
  margin-right: 15px;
  cursor: pointer;
  display: none;
}

.d14s-content-right{
  margin-top:20px;
  padding-left: 70px!important;
}

.ui-datepicker{
  font-family: var(--primaryfont), sans-serif;
}

/* STYLES BOTONES DE CONTROL EN BARRAS */
.d14s-btn-bar-controller{
  /*border: 1px #e1e1e1 solid;
  border-radius: 20px;*/
  cursor: pointer;
  padding: 8px 12px 8px 12px; /*top, right, bottom, left*/
  margin: 0 5px;
  border-radius: 5px;
}
.d14s-btn-bar-controller:hover{
  background-color: #f8f9fc;
}
body.nav-d14s-dark .d14s-btn-bar-controller:hover{
  background-color: #1e1e2f;
}
.d14s-btn-bar-controller i{
  color: #bbbbbb !important;
  font-size: 16px;
}
.d14s-btn-bar-controller span {
    color: #858796 !important;
    font-size: 14px;
}
/* RESPONSIVE BTN CONTROLES - MOBILE */
@media(max-width: 768px) {

  .d14s-btn-bar-controller{
    padding: 8px 5px 8px 5px; /*top, right, bottom, left*/
  }
  .d14s-btn-bar-controller span {
    display: none;
  }
  .d14s-btn-bar-controller i{
    margin-top: 5px;
    font-size: 22px;
  }
}
/* END STYLES BOTONES DE CONTROL EN BARRAS */

.text_cabeceras{
  font-size: 18px;
}

/* DROPDOWN MENU */
/* Estilos básicos para el contenedor del dropdown */
.d14s-ddm-dropdown {
  position: relative;
  display: inline-block;
}

/* Estilo del botón principal */
.d14s-ddm-toggle {
  color: #858796 !important;
  font-size: 14px;
}

.d14s-ddm-toggle:hover {
  background-color: #f8f9fc;
}
body.nav-d14s-dark .d14s-ddm-toggle:hover {
  background-color: #1e1e2f;
}
body.nav-d14s-dark .control-label{
  color: #e1e1e1!important;
}
/* Estilo de la flecha dentro del botón */
.d14s-ddm-toggle .d14s-ddm-arrow {
  /*border: solid white;*/
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  margin-left: 10px;
  transform: rotate(45deg);
  transition: transform 0.3s;
}

/* Estilo de la flecha cuando el menú está abierto */
.d14s-ddm-toggle[aria-expanded="true"] .d14s-ddm-arrow {
  transform: rotate(-135deg);
}

/* Estilos del menú desplegable (oculto por defecto) */
.d14s-ddm-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 0;
  margin: 5px 0 0 0;
  list-style: none;
  z-index: 100;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  left: -100px;
}

/* Muestra el menú cuando tiene la clase 'd14s-ddm-show' */
.d14s-ddm-menu.d14s-ddm-show {
  display: block;
}

/* Estilos de los elementos del menú */
.d14s-ddm-menu li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.d14s-ddm-menu .active a{
  background: #dc3545;
  color: #fff!important;
  border-radius: 5px;
}
.d14s-ddm-menu .active a:hover{
  color: #222!important;
}

.d14s-ddm-menu li a:hover {
  background-color: #ef9eaa ;
}

.d14s-ddm-menu .active a{
  background: #dc3545;
  color: #fff!important;
}
/* Estilo del separador */
.d14s-ddm-divider {
  height: 1px;
  margin: 0.5rem 0;
  overflow: hidden;
  background-color: #e9ecef;
  border: 0;
}
@media(max-width: 768px) {
  .d14s-ddm-menu {
    left: -150px;
  } 
}
/* END DROPDOWN MENU */

/*CONTENEDORES DE TOTALES*/
    .d14s-container { max-width: 1400px; margin: 0 auto; padding: var(--gap); display: flex; flex-direction: column; gap: var(--gap); }
    .d14s-card { background-color: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--border-color); padding: var(--padding); }
    body.nav-d14s-dark .d14s-card { background-color: #2a2a3d; border-top-color:#444; border-bottom-color:#444;border-right-color:#444;}
    
    .d14s-info{text-align: left;}
    .d14s-dashboard-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-right: 15px;}
    .d14s-kpi-card { display: flex; align-items: center; gap: 12px; padding: 16px; }
    .d14s-kpi-card .d14s-icon { font-size: 28px; color: var(--primary-color); opacity: 0.8; }
    .d14s-kpi-card .d14s-info .d14s-value { font-size: 24px; font-weight: 700; }

    .kpi-cursor-pointer:hover{
      cursor: pointer;
      opacity: 0.7;
    }

    .d14s-dashboard-summary h2{
      display: none;
    }

    .d14s-btn-sub-nav{
      color: #6b7280;
    }
    .d14s-btn-sub-nav i{
      font-size:20px;
      cursor:pointer;
    }

    /* Estado visible */
    #containt-conta.active {
        right: 0;
    }
    #mov-conta{
      display: none;
    }
    #mov-conta.active{
        color: #16a34a;
    }

    @media (max-width: 768px) {
      #containt-conta {
        border-radius: 10px;
        background-color: #FFF;
        position: fixed;
        top: 85px; /* Ajusta según tu diseño */
        right: -370px; /* Fuera de pantalla */
        width: 350px;
        box-shadow: -3px 0 8px rgba(0,0,0,0.3);
        transition: right 0.4s ease;
        padding: 20px;
        z-index: 999;
      }
      #mov-conta{
        display: block;
      }
      .d14s-dashboard-summary h2{
        display: block;
      }
    }

    /*
      STYLOS PARA LOS CONTENEDORES DE TOTALES
    */
    .btnViewPanel{
      display: none;
    }
    
    .btnViewPanel.active{
      color: #16a34a;
    }

    .d14s-panel-totales{
      display: block;
    }
    
    @media (max-width: 768px) {
      .btnViewPanel{
        display: block;
      }
      .d14s-panel-totales{
        display: none;
      }
      .d14s-panel-totales.active{
        display: block!important;
      }
    }

    .d14s-info .d14s-value-kpi { font-size: 18px; font-weight: 300; }

    @media (max-width: 768px) {
      .d14s-info .d14s-value-kpi{
        font-size: 14px;
        font-weight: 600;
      }
    }

    .d14s-kpi-card .d14s-info .d14s-value small { font-size: 15px; color: var(--text-muted); font-weight: 500; margin-left: 6px; }
    body.nav-d14s-dark .d14s-info .d14s-value small  { color: #FFF; }
    .d14s-kpi-card .d14s-info .d14s-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.3;}
    body.nav-d14s-dark .d14s-kpi-card .d14s-info .d14s-label { color:#e1e1e1; }
    .d14s-kpi-card.d14s-yellow { border-left: 5px solid var(--accent-yellow); } .d14s-kpi-card.d14s-yellow .d14s-icon { color: var(--accent-yellow); }
    .d14s-kpi-card.d14s-green { border-left: 5px solid var(--accent-green); } .d14s-kpi-card.d14s-green .d14s-icon { color: var(--accent-green); }
    .d14s-kpi-card.d14s-orange { border-left: 5px solid #fd7e14; } .d14s-kpi-card.d14s-orange .d14s-icon { color: #fd7e14; }
    .d14s-kpi-card.d14s-red { border-left: 5px solid #dc3545; } .d14s-kpi-card.d14s-red .d14s-icon { color: #dc3545; }
    .d14s-kpi-card.d14s-blue { border-left: 5px solid #0d6efd; } .d14s-kpi-card.d14s-blue .d14s-icon { color: #0d6efd; }
    .d14s-kpi-card.d14s-black { border-left: 5px solid #374151; } .d14s-kpi-card.d14s-black .d14s-icon { color: #374151; }
    .d14s-kpi-combined-info { width: 100%; display: flex; flex-direction: column; gap: 4px; }
    .d14s-kpi-combined-row { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
    .d14s-kpi-combined-row span { color: var(--text-muted); }
    .d14s-kpi-combined-row strong { font-weight: 700; color: var(--text-color); }

    .d14s-kpi-slim-card.d14s-yellow { border: 1px solid var(--accent-yellow); } .d14s-kpi-slim-card.d14s-yellow .d14s-icon { color: var(--accent-yellow); font-size: 25.6px;}
    .d14s-kpi-slim-card.d14s-green { border: 1px solid var(--accent-green); } .d14s-kpi-slim-card.d14s-green .d14s-icon { color: var(--accent-green); font-size: 25.6px;}
    .d14s-kpi-slim-card.d14s-orange { border: 1px solid #fd7e14; } .d14s-kpi-slim-card.d14s-orange .d14s-icon { color: #fd7e14; font-size: 25.6px;}
    .d14s-kpi-slim-card.d14s-red { border: 1px solid #dc3545; } .d14s-kpi-slim-card.d14s-red .d14s-icon { color: #dc3545; font-size: 25.6px;}
    .d14s-kpi-slim-card.d14s-blue { border: 1px solid #0d6efd; } .d14s-kpi-slim-card.d14s-blue .d14s-icon { color: #0d6efd; font-size: 25.6px;}

    .horizon-divider{border-right:1px solid #dee2e6;}

    body.nav-d14s-dark .d14s-kpi-combined-row span { color: #e1e1e1; }
    body.nav-d14s-dark .d14s-kpi-combined-row strong { font-weight: 700; color: #e1e1e1 }

    .d14s-status-pill { padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-align: center; display: inline-block;}
    .d14s-status-pill-sm { padding: 3px 8px; font-size: 0.75rem; border-radius: 12px; }
    .d14s-status-green { background-color: #d1e7dd; color: #0f5132; }
    .d14s-status-gray { background-color: #e9ecef; color: #495057; }
    .d14s-status-red { background-color: #f8d7da; color: #842029; }
    .d14s-btn { padding: 10px 20px; border: 1px solid transparent; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; color: white; transition: all 0.2s ease-in-out; }
    .d14s-btn i { margin-right: 8px; }
    .d14s-btn-primary { background-color: var(--primary-color); }
    .d14s-btn-primary:hover { background-color: #0b5ed7; }
    
    .d14s-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .d14s-page-header h1 { font-size: 2.2rem; font-weight: 700; }
    .d14s-logo-container { font-size: 1.2rem; font-weight: 700; letter-spacing: 1px; background-color: var(--text-color); color: var(--card-bg); padding: 6px 14px; border-radius: 8px; }
    
    .d14s-filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; padding: 15px; }
    .d14s-filter-item { display: flex; align-items: center; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; }
    .d14s-filter-item .d14s-filter-label { padding-left: 12px; font-size: 0.9rem; color: var(--text-muted); white-space: nowrap; margin-right: 6px; }
    .d14s-filter-item select { flex-grow: 1; border: none; background-color: transparent; padding: 10px; padding-left: 6px; font-size: 0.9rem; cursor: pointer; -webkit-appearance: none; appearance: none; width: 100%; }
    .d14s-filter-item.d14s-period-filter { display: grid; grid-template-columns: auto 1fr 1fr 1fr; align-items: center; }
    .d14s-filter-item.d14s-period-filter select { padding-right: 2px; }
    .d14s-filter-actions { display: flex; gap: 10px; }
    .d14s-filter-actions .d14s-btn { width: 100%; }

    .d14s-table-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--gap); }
    .d14s-table-search-box { position: relative; width: 280px; }
    .d14s-table-search-box input { width: 100%; padding: 10px 15px 10px 35px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.9rem; }
    .d14s-table-search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
    
    .d14s-table-responsive { overflow-x: auto; }
    .d14s-project-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
    .d14s-project-table th, .d14s-project-table td { padding: 12px 15px; text-align: left; white-space: nowrap; vertical-align: middle; }
    .d14s-project-table thead tr { background-color: var(--header-bg); border-bottom: 2px solid var(--border-color); }
    .d14s-project-table th { font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 0.8rem; }
    .d14s-project-table tbody tr { border-bottom: 1px solid var(--border-color); }
    .d14s-project-table tbody tr:hover { background-color: var(--row-hover); }
    
    /* --- INICIO: ESTILOS PARA COLUMNA FIJA --- */
    .d14s-project-table th:first-child,
    .d14s-project-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
    }

    .d14s-project-table th:first-child {
        background-color: var(--header-bg);
    }

    .d14s-project-table td:first-child {
        background-color: var(--card-bg);
        border-right: 1px solid var(--border-color); /* Línea sutil para separar */
    }

    .d14s-project-table tbody tr:hover td:first-child {
        background-color: var(--row-hover);
    }
    /* --- FIN: ESTILOS PARA COLUMNA FIJA --- */
    
    .d14s-project-table .d14s-project-brand { font-weight: 500; }
    .d14s-project-table .d14s-project-name { font-weight: 600; font-size: 0.95rem; color: var(--text-color); }
    .d14s-project-table .d14s-profit-positive { color: var(--accent-green); font-weight: 600; }
    .d14s-project-table .d14s-profit-negative { color: var(--accent-red); font-weight: 600; }
    .d14s-project-table .d14s-folio-link { font-weight: 600; color: var(--primary-color); text-decoration: none; }
    .d14s-project-table .d14s-folio-link:hover { text-decoration: underline; }
    .d14s-project-table .d14s-actions-cell { text-align: center; }
    .d14s-project-table .d14s-actions-cell a { color: var(--text-muted); text-decoration: none; font-size: 1rem; }
    .d14s-project-table .d14s-actions-cell a:hover { color: var(--primary-color); }
    .d14s-project-table .d14s-action-delete:hover { color: var(--accent-red); }

    /* --- ESTILOS PARA LA PAGINACIÓN --- */
    .d14s-pagination-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 20px;
    }
    .d14s-pagination-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 8px;
    }
    .d14s-pagination-list button {
        border: 1px solid var(--border-color);
        background-color: var(--card-bg);
        color: var(--primary-color);
        padding: 8px 14px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.2s ease-in-out;
    }
    .d14s-pagination-list button:hover, .d14s-pagination-list button.d14s-active {
        background-color: var(--primary-color);
        color: var(--card-bg);
        border-color: var(--primary-color);
    }
    .d14s-pagination-list button:disabled {
        color: var(--text-muted);
        cursor: not-allowed;
        background-color: var(--bg-color);
    }

    body.nav-d14s-dark .pagination>li>a, .pagination>li>span {
      color:#1e1e2f;
    }

    body.nav-d14s-dark .pagination>.active>a {
      color:#11771c!important;
    }
    /* --- FIN DE ESTILOS DE PAGINACIÓN --- */

    @media (max-width: 768px) {
        :root { --gap: 16px; --padding: 16px; }
        .d14s-container { padding: var(--gap); }
        .d14s-page-header h1 { font-size: 1.6rem; }
        .d14s-logo-container { font-size: 1rem; padding: 4px 10px; }
        .d14s-filter-bar { grid-template-columns: 1fr; }
        .d14s-table-toolbar { flex-direction: column; align-items: stretch; gap: 15px; }
        .d14s-table-search-box { width: 100%; }
        .d14s-project-table th, .d14s-project-table td { padding: 10px 8px; font-size: 0.85rem; }
        .d14s-hide-on-mobile { display: none; }
    }
/*END CONTENEDORES DE TOTALES*/

/*FILL LABELS*/
.label-success {
    background-color: #d1e7dd;
    color: #0f5132;
    border-radius: 12px;
    padding: 3px 8px;
}
.label-danger {
    background-color: #f8d7da;
    color: #842029;
    border-radius: 12px;
    padding: 3px 8px;
}
.label-info {
    background-color: #cfe2ff;
    color: #0a58ca;
    border-radius: 12px;
    padding: 3px 8px;
}
.label-warning {
    background-color: #fff3cd;
    color: #664d03;
    border-radius: 12px;
    padding: 3px 8px;
}
.label-default {
    background-color: #e9ecef;
    color: #495057;
    border-radius: 12px;
    padding: 3px 8px;
}

/*Modo tema obscuro*/
body.nav-d14s-dark .label-success {
    background-color: #2a483a;
    color: #a3d4be;
    border-radius: 12px;
    padding: 3px 8px;
}
body.nav-d14s-dark .label-danger {
    background-color: #58282d;
    color: #f1a1ab;
    border-radius: 12px;
    padding: 3px 8px;
}
body.nav-d14s-dark .label-info {
    background-color: #25436e;
    color: #a9c7f8;
    border-radius: 12px;
    padding: 3px 8px;
}
body.nav-d14s-dark .label-warning {
    background-color: #554215;
    color: #fce8b2;
    border-radius: 12px;
    padding: 3px 8px;
}
body.nav-d14s-dark .label-default {
    background-color: #343a40;
    color: #dee2e6;
    border-radius: 12px;
    padding: 3px 8px;
}

body.nav-d14s-dark .x_panel{
  background:#2a2a3d;
  border-color:#444;
}
body.nav-d14s-dark .x_title{
  border-bottom-color: #444;
}
body.nav-d14s-dark .x_title h2{
  color:#FFF!important;
}
body.nav-d14s-dark .dtfc-fixed-left{
  background: #2c343d!important;
}
body.nav-d14s-dark .dtfc-fixed-right{
  background: #2c343d!important;
}
/*END FILL LABELS*/

/* RESPONSIVE - MOBILE */
@media(max-width: 768px) {
  aside {
    position: absolute;
    z-index: 1000;
    height: 100%;
    left: -250px;
  }
  aside.nav-d14s-active {
    left: 0;
  }
  
  #toggleMenuMobile {
    display: block;
  }

  /* Submenús flotantes en mobile cuando sidebar está colapsado */
  aside.nav-d14s-collapsed .nav-d14s-floating-submenu {
    display: block !important;
    left: 70px !important;
  }
  
  /* Ocultar submenús flotantes cuando sidebar NO está colapsado */
  aside:not(.nav-d14s-collapsed) .nav-d14s-floating-submenu {
    display: none !important;
  }
  
  /* Mostrar submenús inline cuando sidebar NO está colapsado */
  aside:not(.nav-d14s-collapsed) .nav-d14s-inline-submenu {
    display: block;
  }
  
  /* Ocultar submenús inline cuando sidebar está colapsado */
  aside.nav-d14s-collapsed .nav-d14s-inline-submenu {
    display: none !important;
  }
  
  /* Ajustar el contenido principal en mobile */
  .nav-d14s-main {
    width: 100%;
  }
  .d14s-content-right{
    padding-left: 15px!important;
  }
}

/* DESKTOP - Ocultar submenús inline */
@media(min-width: 769px) {
  .nav-d14s-inline-submenu {
    display: none !important;
  }

}


/* ///////////////////////////////////////////////////////////// */
/* Sistema de truncado de texto */
/* Clase base para truncar texto */
.text-d14s-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /*display: block;*/
}

/* Variantes con anchos predefinidos */
/* Ejemplo <div class="text-truncate text-truncate-sm">*/
.text-d14s-truncate-sm { max-width: 150px; }
.text-d14s-truncate-md { max-width: 250px; }
.text-d14s-truncate-lg { max-width: 350px; }
.text-d14s-truncate-xl { max-width: 500px; }

/* Clase personalizable */
/* Ejemplo <div class="text-d14s-truncate text-d14s-truncate-custom" style="--max-width: 300px;">*/
.text-d14s-truncate-custom {
  max-width: var(--max-width, 200px);

}
.text-d14s-truncate-custom-min{
  min-width: var(--min-width, 200px);
}

/* Para múltiples líneas */
/* Ejemplo <div class="text-truncate-multiline" style="--lines: 2; max-width: 400px;">*/
.text-d14s-truncate-multiline {
  display: -webkit-box;
  /*-webkit-line-clamp: var(--lines, 2);*/
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* ///////////////////////////////////////////////////////////// */
/* sistema para secciones de contenido */

/* Estilos para el nuevo contenedor (Widget) */
.d14s-widget {
  /*margin-top: 30px;*/
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s, border-color 0.3s;
}

.d14s-widget-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  transition: border-color 0.3s;
}

.d14s-widget-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.d14s-widget-body {
  padding: 20px;
}

/* Estilos de Texto */
.d14s-text-lead {
  font-size: 1.1em;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.d14s-text-regular {
  font-size: 1em;
  color: #555;
  line-height: 1.6;
}

.d14s-text-muted {
  font-size: 0.9em;
  color: #888;
}

/* --- Estilos para el Tema Oscuro --- */
body.nav-d14s-dark .d14s-widget {
  background-color: #2a2a3d;
  border-color: #444;
}

body.nav-d14s-dark .d14s-widget-header {
  border-color: #444;
}

body.nav-d14s-dark .d14s-widget-title {
  color: #eee;
}

body.nav-d14s-dark .d14s-text-lead {
  color: #f5f5f5;
}

body.nav-d14s-dark .d14s-text-regular {
  color: #ccc;
}

body.nav-d14s-dark .d14s-text-muted {
  color: #aaa;
}

/* INICIO: Estilos para el Modal en Tema Oscuro */
body.nav-d14s-dark .modal-content {
    background-color: #2a2a3d;
    color: #eee;
    border: 1px solid #444;
}

body.nav-d14s-dark .modal-header {
    border-bottom: 1px solid #444;
}

body.nav-d14s-dark .modal-footer {
    border-top: 1px solid #444;
}

body.nav-d14s-dark .modal-title {
    color: #eee;
}

body.nav-d14s-dark .modal-header button span {
  color: #e1e1e1!important;
}

body.nav-d14s-dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.nav-d14s-dark .form-control {
  background-color: #2a2a3d!important;
  color: #FFF!important;
  border-bottom-color: #e1e1e1!important;
}

body.nav-d14s-dark .btn-primary{
  background-color: #222!important;
  border-color: #e1e1e1!important;
}
/* FIN: Estilos para el Modal en Tema Oscuro */


/* INICIO: Estilos para los filtros en Tema claro|obscuro */
.card {
    position: relative;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e0e0e0;
    border-radius: .35rem;
}

body.nav-d14s-dark .card {
  background-color: #1e1e2f;
  border: 1px solid #999999;
}

.check-filters {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 20px;
    opacity: 0.8;
    color: #b7b9cc;
}
.active-all-items {
    color: #02822f;
}
.item-filters {
    display: inline-block;
    vertical-align: top;
}
.header-filter-top {
    margin: 0;
    white-space: nowrap;
    padding: .5rem 1.5rem;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 14px;
    color: #b7b9cc;
}

.item-filters {
    display: inline-block;
    vertical-align: top;
}
.item-filters .listItem {
    max-height: 265px;
    overflow-x: auto;
    padding: 3px;
    /* text-align: left; */
}
.pb-2, .py-2 {
    padding-bottom: 10px!important;
}
.pt-2, .py-2 {
    padding-top: 10px !important;
}
.h-100 {
    height: 100% !important;
}
.card {
    position: relative;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e3e6f0;
    border-radius: .35rem;
}
.dropdown-divider {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-top: 1px solid #eaecf4;
}
.margin-6 {
    margin-top: 3px;
    margin-bottom: 3px;
}
.text-size-14 {
    font-size: 14px;
}
.dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 1rem;
    clear: both;
    font-weight: 400;
    color: #3a3b45;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

body.nav-d14s-dark .dropdown-item {
  color: #e1e1e1;
  /*background-color: #2a2a3d;*/
  border-radius: 5px;
  border: 1px #3a3a4f solid;
}

.item-active-filter {
    color: #fff;
    text-decoration: none;
    background-color: var(--color_fondo_filtro_activo);
    color: var(--color_texto_filtro_activo);
    border: 1px var(--color_borde_filtro_activo) solid !important;
    border-radius: 3px;
}

body.nav-d14s-dark .item-active-filter{
  color: #1e1e2f;
}

.filtro-cadena {
    border: 1px #FFFFFF solid;
}
.modal-body{
  overflow-y: auto;
}
.text-size-12{
  font-size: 12px;
}
.cursorAction:hover {
    cursor: pointer;
    opacity: 0.6;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: #2e2f37;
    text-decoration: none;
    background-color: #eaecf4;
}
.w-100{
  width: 100%;
}

.control-title-beta{
  margin-top: 5px;
  color: #1c1c1c !important;
  font-size: 22px;
  font-weight: bold;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
}

.control-label-beta{
  margin-top: 5px;
  color: #1c1c1c;
  font-size: 13px;
  font-weight: bold;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;

  line-height: 16px;
  white-space: nowrap!important;
  overflow: hidden;
  text-overflow: ellipsis!important;

}

.control-data-beta{
  margin-top: 5px;
  color: #1c1c1c;
  font-size: 13px;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;

    line-height: 16px;
  white-space: nowrap!important;
  overflow: hidden;
  text-overflow: ellipsis!important;
}

.saltarLinea{
    margin-bottom: 5px;
}

.table-input{
  font-size: 12px; 
  border-radius: 5px;
  text-align: center;
  width: 100%!important;
}

.msgError{
  background-color:#ebccd1;
  color: #a94442;
  border: 1px #ef9eaa solid;
  border-radius: 5px;
  margin-bottom:5px;
  opacity: 0.8;
  padding-bottom: 5px;
  padding-top: 5px; 
}

.listItem select{
  font-size: 12px;
  text-align: center;
  padding: .375rem .75rem;
  margin-top: -3px;
}


/* ///////////////////////////////////////////////////////////// */
/* Sistema base: 12 columnas */
[class*="col-"] {
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* Reset para filas */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

body.nav-d14s-dark .dataTables_paginate{
  background-color: #222!important;
}

body.nav-d14s-dark .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
  color: #1c1c1c!important;
}

/*-=-=-=-=-=-=-=-=-= CUSTOM DASHBOARD STYLES -=-=-=-=-=-=-=-=-=*/
.d14s-home-dashboard-card {
    background-color: #fff;
    border: 1px solid #e3e6f0;
    border-radius: 5px;
    padding: 12.5px;
    min-height: 380px;
    margin-bottom: 15px;
}
body.nav-d14s-dark .d14s-home-dashboard-card {
    background-color: #2a2a3d;
    border-color: #444;
}
.d14s-home-card-title-custom {
    font-weight: 600;
    font-size: 14px;
    color: #5a5c69;
    margin-bottom: 1rem;
}
body.nav-d14s-dark .d14s-home-card-title-custom {
    color: #c0c3d0;
}

/* Small info cards */
.d14s-home-info-card {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #e3e6f0;
  border-left-width: 4px;
  border-radius: 6px;
  background-color: #fff;
  color: #5a5c69;
  transition: all 0.2s ease-in-out;
  height: 100%;
}
a.d14s-home-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  color: #5a5c69;
}
body.nav-d14s-dark .d14s-home-info-card {
    background-color: #2a2a3d;
    border-color: #444;
    color: #ccc;
}
body.nav-d14s-dark a.d14s-home-info-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    color: #ccc;
}
.d14s-col{
  margin: 0px 0px 18px 0px;   /*top, right bottom left*/
  /*width: 19%;*/
  display: inline-block;
}
.d14s-home-info-card-icon { font-size: 25px; }
.d14s-home-info-card-content { flex-grow: 1; margin: 0 1rem; }
.d14s-home-info-card-value { font-size: 28px; font-weight: 700; line-height: 1.1; color: #3a3b45;}
body.nav-d14s-dark .d14s-home-info-card-value { color: #fff; }
.d14s-home-info-card-label { font-size: 11px; font-weight: 600; color: #858796; text-transform: uppercase; }
body.nav-d14s-dark .d14s-home-info-card-label { color: #a0a8b9; }
.d14s-home-info-card-arrow { font-size: 1rem; color: #d1d3e2; }

.d14s-home-info-card.d14s-home-border-left-yellow { border-left-color: #f6c23e; }
.d14s-home-info-card.d14s-home-border-left-yellow .d14s-home-info-card-icon { color: #f6c23e; }
.d14s-home-info-card.d14s-home-border-left-blue { border-left-color: #4e73df; }
.d14s-home-info-card.d14s-home-border-left-blue .d14s-home-info-card-icon { color: #4e73df; }
.d14s-home-info-card.d14s-home-border-left-red { border-left-color: #e74a3b; }
.d14s-home-info-card.d14s-home-border-left-red .d14s-home-info-card-icon { color: #e74a3b; }
.d14s-home-info-card.d14s-home-border-left-green { border-left-color: #1cc88a; }
.d14s-home-info-card.d14s-home-border-left-green .d14s-home-info-card-icon { color: #1cc88a; }
.d14s-home-info-card.d14s-home-border-left-info { border-left-color: #36b9cc; }
.d14s-home-info-card.d14s-home-border-left-info .d14s-home-info-card-icon { color: #36b9cc; }

.d14s-home-info-card.d14s-home-border-left-help { 
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
  border: 1px #ef9eaa solid;
  border-left: 4px solid #ef4444;
  color: #ffffff; 
}
.d14s-home-info-card.d14s-home-border-left-help .d14s-home-info-card-icon { color: #dc3545; }

/* Big summary cards */
.d14s-home-summary-kpi { margin-bottom: 24px; }
.d14s-home-summary-kpi-icon { font-size: 20px; color: #b5b5c3; margin-right: 0.75rem; }
.d14s-home-summary-kpi-label { font-size: 15px; font-weight: 600; color: #5a5c69; text-transform: uppercase; }
body.nav-d14s-dark .d14s-home-summary-kpi-label { color: #c0c3d0; }
.d14s-home-summary-kpi-value { font-size: 22px; font-weight: 700; }/*36px*/
.d14s-home-summary-kpi-footer { font-size: 13px; color: #858796; }
body.nav-d14s-dark .d14s-home-summary-kpi-footer { color: #a0a8b9; }
.d14s-home-vs-change { font-weight: bold; }
.d14s-home-vs-change.d14s-home-negative { color: #e74a3b; }
.d14s-home-vs-change.d14s-home-positive { color: #1cc88a; }

/* Chart specific styling */
.d14s-home-chart-container { position: relative; min-height: 250px; }
#monthlyTrendChartContainer { min-height: 300px; }
#facturasRetrasadasChartContainer { min-height: 300px; }
.d14s-home-doughnut-wrapper { display: flex; align-items: center; justify-content: space-around; }
.d14s-home-doughnut-chart-container { position: relative; width: 120px; height: 120px; }
.d14s-home-doughnut-percentage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; font-weight: 700; }
.d14s-home-doughnut-legend { text-align: center; font-size: 13px; }
.d14s-home-legend-value { font-weight: bold; }

.pt-2 {
    padding-top: 8px !important;
}
.mt-3 {
    margin-top: 16px !important;
}
.justify-content-between {
    justify-content: space-between !important;
}
.border-top {
    border-top: 1px solid #dee2e6 !important;
}
.d14s-home-padding-0{
  padding-left: 0px;
  padding-bottom: 0px;
}
.mb-3 {
    margin-bottom: 1rem !important;
}
.align-items-center {
    align-items: center !important;
}
.justify-content-between {
    justify-content: space-between !important;
}
.d-flex {
    display: flex !important;
}
.fs-4 {
    font-size: 24px !important;
    font-weight:700!important;
}
.clr-d14s{
  clear: both;
}

tspan{
  font-family: var(--primaryfont), sans-serif;
  /*font-weight: 600;*/
  color: #5a5c69;
  /*font-size: 14px;*/
}
.highcharts-label tspan{
  font-size: 12px;
}
.highcharts-axis-labels{
  font-family: var(--primaryfont), sans-serif;
}

/*.chartDonutRender .highcharts-label tspan{
  font-size: 30px;
}*/

/*-=-=-=-=-=-=-=-=-= END CUSTOM DASHBOARD STYLES -=-=-=-=-=-=-=-=-=*/

.sandbox-container {
  background: linear-gradient(135deg, #ff9a56 0%, #ff6b35 100%);
  border: 2px solid #e55a2b;
  border-radius: 8px;
  padding: 12px 20px;
  color: #fff;
  font-family: var(--primaryfont), sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 8px rgba(229, 90, 43, 0.3);
  margin: 10px 0;
  display: inline-block;
  min-width: 200px;
}

.sandbox-container::before {
  content: "⚠️ ";
  margin-right: 8px;
}

.sandbox-container:hover {
  background: linear-gradient(135deg, #ff8a46 0%, #ff5b25 100%);
  box-shadow: 0 4px 12px rgba(229, 90, 43, 0.4);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}


/*-=-=-=-=-=-=-=-=-= SECCIÓN DE ACCIONES STYLES -=-=-=-=-=-=-=-=-=*/
.d14s-actions-container {
    /*max-width: 1600px;*/
    margin: auto;
    background-color: #fff;
    padding: 2rem 3rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.d14s-actions-subtitle {
    font-size: 16px;
    color: #7f8c8d;
    margin-bottom: 2.5rem;
}

.d14s-actions-filters {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2.5rem;
}

.d14s-actions-filters input[type="search"],
.d14s-actions-filters select {
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    flex-grow: 1;
}

.d14s-actions-filters input[type="search"] {
    flex-grow: 2;
}

.d14s-actions-filters button {
    padding: 0.75rem 1.5rem;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.d14s-actions-filters button:hover {
    background-color: #2980b9;
}

.d14s-actions-timeline-container {
    position: relative;
}

.d14s-actions-timeline {
    list-style-type: none;
    padding-left: 30px;
    position: relative;
}

.d14s-actions-timeline::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 14px;
    bottom: 15px;
    width: 2px;
    background-color: #e0e0e0;
}

.d14s-actions-timeline-item {
    margin-bottom: 1.5rem;
    position: relative;
}

.d14s-actions-timeline-icon {
    position: absolute;
    left: -31px;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.d14s-actions-timeline-icon svg {
    width: 16px;
    height: 16px;
    fill: white;
}

.d14s-actions-icon-error { background-color: #e74c3c; }
.d14s-actions-icon-upload { background-color: #e74c3c; }
.d14s-actions-icon-warning { background-color: #f1c40f; }

.d14s-actions-timeline-card {
    background-color: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    margin-left: 25px;
    position: relative;
}

.d14s-actions-timeline-card h3 {
    margin: 0 0 16px;
    font-size: 17.6px;
    font-weight: 600;
}

.d14s-actions-card-project-info {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 13.6px;
}

.d14s-actions-card-project-info strong {
    color: #34495e;
    margin-right: 6.8px;
    font-weight: 600;
}

.d14s-actions-timeline-card .d14s-actions-reason {
    color: #7f8c8d;
    margin: 0 0 16px;
    font-size: 14.4px;
}

.d14s-actions-id-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #ecf0f1;
    color: #7f8c8d;
    padding: 2.5px 7.5px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.d14s-actions-timeline-card .d14s-actions-action-button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.d14s-actions-timeline-card .d14s-actions-action-button:hover {
    background-color: #2980b9;
}

.d14s-actions-timeline-card .d14s-actions-action-button-danger {
    background-color: #dc2626;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.d14s-actions-timeline-card .d14s-actions-action-button-danger:hover {
    background-color: #fc5555;
}

.d14s-actions-pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.d14s-actions-pagination {
    display: flex;
    list-style-type: none;
    padding: 0;
}

.d14s-actions-pagination li a {
    color: #3498db;
    padding: 0.75rem 1rem;
    text-decoration: none;
    border: 1px solid #ddd;
    margin: 0 2px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.d14s-actions-pagination li a:hover,
.d14s-actions-pagination li.d14s-actions-active a {
    background-color: #3498db;
    color: white;
    border-color: #3498db;
}

.d14s-actions-pagination li.d14s-actions-disabled a {
    color: #aaa;
    pointer-events: none;
    border-color: #ddd;
}

/*-=-=-=-=-=-=-=-=-= TEMA OBSCURO PARA ACCIONES -=-=-=-=-=-=-=-=-=*/

/* Contenedor principal */
.nav-d14s-dark .d14s-actions-container {
    background-color: #2d3748; /* Fondo oscuro para el contenedor principal */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #e2e8f0; /* Color de texto base claro */
}

/* Subtítulo */
.nav-d14s-dark .d14s-actions-subtitle {
    color: #a0aec0; /* Un gris más claro para texto secundario */
}

/* Filtros y campos de entrada */
.nav-d14s-dark .d14s-actions-filters input[type="search"],
.nav-d14s-dark .d14s-actions-filters select {
    background-color: #1a202c; /* Fondo más oscuro para campos */
    border-color: #4a5568; /* Borde sutil */
    color: #e2e8f0; /* Texto claro */
}

/* Línea de tiempo */
.nav-d14s-dark .d14s-actions-timeline::before {
    background-color: #4a5568; /* Línea de tiempo de color gris oscuro */
}

/* Tarjeta dentro de la línea de tiempo */
.nav-d14s-dark .d14s-actions-timeline-card {
    background-color: #1a202c; /* Fondo más oscuro para las tarjetas */
    border-color: #4a5568;
}

/* Título de la tarjeta */
.nav-d14s-dark .d14s-actions-timeline-card h3 {
    color: #e2e8f0;
}

/* Contenedor de información del proyecto */
.nav-d14s-dark .d14s-actions-card-project-info {
    background-color: #2d3748; /* Un fondo ligeramente más claro para destacar */
    border-color: #4a5568;
    color: #cbd5e0;
}

.nav-d14s-dark .d14s-actions-card-project-info strong {
    color: #e2e8f0; /* Texto en negrita más brillante */
}

/* Texto de "motivo" */
.nav-d14s-dark .d14s-actions-timeline-card .d14s-actions-reason {
    color: #a0aec0;
}

/* Etiqueta de ID */
.nav-d14s-dark .d14s-actions-id-tag {
    background-color: #4a5568;
    color: #e2e8f0;
}

/* Paginación */
.nav-d14s-dark .d14s-actions-pagination li a {
    color: #3498db; /* Mantenemos el azul para que destaque */
    border-color: #4a5568;
    background-color: transparent;
}

.nav-d14s-dark .d14s-actions-pagination li a:hover,
.nav-d14s-dark .d14s-actions-pagination li.d14s-actions-active a {
    background-color: #3498db;
    color: white;
    border-color: #3498db;
}

.nav-d14s-dark .d14s-actions-pagination li.d14s-actions-disabled a {
    color: #718096; /* Un color deshabilitado más oscuro */
    border-color: #4a5568;
}

/*-=-=-=-=-=-=-=-=-= END SECCIÓN DE ACCIONES STYLES -=-=-=-=-=-=-=-=-=*/

.ui-autocomplete{
  z-index: 9999!important;
  font-family: var(--primaryfont), sans-serif;
}

.d14s-coga-cont-detail-item .dataInput{
  font-weight: 600;
  color: #222222;
  font-size: 15px;
  text-align-last:left;
}

.content-modal{
  margin: 0px!important;
  padding:0px;
}

.content-modal .x_panel{
  border: none!important;
  border-radius:0px;
  border-bottom: 1px solid #e0e0e0;
  padding: 0px;
}

.content-modal .x_title{
  padding: 20px;
}
.content-modal .x_title h2{
  font-size: 18px;
  font-weight: 500;
}

.content-modal input[readonly]{
  border-radius: 5px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}
.content-modal select[readonly]{
  border-radius: 5px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}
.content-modal input[disabled]{
  border-radius: 5px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}
.content-modal select[disabled]{
  border-radius: 5px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

.content-modal label{
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280!important;
  margin-bottom: 4px; 
}

.content-modal .dataInput{
  text-align: left!important;
  text-align-last:left!important;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.d14s-cotiz{
  background-color: #f8fafc;
  padding: 12.5px;
  border-radius: 1px;
  align-items: flex-start;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
}

.d14s-cotiz .dataInput{
  background-color: #f8fafc;
}

.d14s-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0, 0.05);
    border: 1px solid #dee2e6;
}

.d14s-section-nav-btn.active {
    background-color: #374151;
    color: white;
}

.d14s-section-nav-btn {
    flex-grow: 1;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border: 1px solid transparent;
    background-color: transparent;
    color: #6c757d;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.d14s-margin-t-10{
  margin-bottom: 10px!important;
}

#projects-card .d14s-section-nav {
  display: block!important;
}

#projects-card .d14s-coga-cont-card-title
{
  margin: 12px 0 12px 0;
}

.other-card .d14s-section-nav {
  display: block!important;
}

.other-card .d14s-coga-cont-card-title
{
  margin: 12px 0 12px 0;
}

/* --- INICIO: CÓDIGO AÑADIDO PARA RESPONSIVIDAD --- */
@media (max-width: 768px) {
  .d14s-section-nav-btn {
    padding: 8px 10px;
  }
  .d14s-section-nav-btn span{
    display: none;
  }
  .d14s-section-nav-btn i{
    font-size: 18px;
  }
  .margin-magic{
    padding-right: 0px!important;
  }
}

@media (max-width: 991px) {
  .margin-magic2{
    padding-right: 0px!important;
  }
}

/* --- FIN: CÓDIGO AÑADIDO PARA RESPONSIVIDAD --- */


/* --- INICIO: CÓDIGO TABLA ESTILO D14S --- */
.d14s-table-style{
  width: 100%;;
}

.d14s-table-style table{
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  overflow-x: auto;
}
.d14s-table-style th {
    background-color: #343a40;
    color: #fff;
    /*text-transform: uppercase;*/
    font-size: 13px;
}
.d14s-table-style th, .d14s-table-style td {
    padding: 8px 15px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
    font-size: 13px;
}
@media (min-width: 768px) {
    .d14s-table-style table {
        display: table;
        width: 100%;
        white-space: normal;
    }
}
@media (max-width: 768px) {
    .d14s-table-style th, .d14s-table-style td {
      font-size: 11px;
    }
}

.d14s-table-style .finance-summary-table th, .finance-summary-table td {
    border: 1px solid #dee2e6;
    /*padding: 16px 10px;*/
    font-size: 14px;
}

.d14s-table-style .finance-summary-table tbody th {
    text-align: left;
    font-weight: 600;
    background-color: #f8f9fa;
    color: #6c757d;
}
.d14s-table-style .finance-summary-table tbody td {
    text-align: right;
    font-weight: 400;
    color: #6c757d;
}
.d14s-table-style .finance-summary-table tbody tr:nth-child(3) {
    border-top: 2px dotted #ced4da;
}

.d14s-table-style .dataInput{
  text-align-last: right!important;
  border-radius: 5px;
  /*border-bottom: none;*/
  border:1px #e1e1e1 dashed!important;
  font-weight: 600;
  /*background: #f2f2f2;*/
}

.d14s-table-style input[readonly]{
  border: none!important;
  background-color: #FFF;
  color:#6c757d;
  font-weight: 400;
}

@media screen and (max-width: 600px) {
  .d14s-table-style .col-responsive{
    display: none;
  }
}



/* 💡 El truco principal está aquí */
.table-d14s tbody {
  display: block; /* ¡Clave! Permite darle altura y overflow */
  height: 80px;  /* Altura máxima para el cuerpo de la tabla */
  overflow-y: auto; /* Muestra la barra de scroll vertical si es necesario */
  border-collapse: collapse;
}

/* Aseguramos que la cabecera y las filas se comporten como tablas */
.table-d14s thead, .table-d14s tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed; /* Asegura que las columnas respeten el ancho */
}

/* ¡Crítico! Define el ancho de las columnas para que todo se alinee */
.table-d14s th, .table-d14s td {
  width: 33.33%; /* O anchos específicos como 150px, 200px, etc. */
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}

/* --- END: CÓDIGO TABLA ESTILO D14S --- */

.d14s-select-personalizado {
  /* --- 1. Apariencia y dimensiones solicitadas --- */
  background-color: #f9f9f9; /* Fondo gris claro */
  border: 1px solid #ccc;   /* Borde gris oscuro */
  width: 100%;
  height: 42px;
  
  /* --- 2. Reinicio de estilos y flecha personalizada --- */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; /* Elimina la apariencia nativa del navegador */
  
  /* Añadimos una flecha propia con SVG incrustado en el fondo */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center; /* Posición de la flecha */

  /* --- 3. Estilos adicionales para mejorar la apariencia --- */
  padding: 0 15px; /* Espacio para que el texto no se pegue al borde */
  border-radius: 8px; /* Bordes ligeramente redondeados */
  color: #333;
  cursor: pointer; /* Cambia el cursor a una mano para indicar que es clickeable */
}

/* Estilo para cuando el select está en foco (al hacer click) */
.d14s-select-personalizado:focus {
  outline: none; /* Quitamos el borde azul que aparece por defecto */
  border-color: #919191; /* Cambiamos el color del borde para indicar selección */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra suave */
}




/* Estilo del contenedor visible donde se muestra el status */
.d14s-status-display-container {
    font-family: 'Inter';
    padding: 25px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    background-color: #f9f9f9;
    text-align: center;
}
.d14s-status-display-container select{
  background-color: #f9f9f9;
  border:none;
}
/* --- INICIO: CÓDIGO PARA CALENDARIO D14S --- */

/* Contenedor principal para posicionar el panel desplegable */
.d14s-calendar-month-year-picker {
    font-family: 'Inter';
    position: relative;
    width: 100%;
    font-family: sans-serif;
}

/* Estilo del contenedor visible donde se muestra la fecha */
.d14s-calendar-display-container {
    font-family: 'Inter';
    padding: 25px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    background-color: #f9f9f9;
    text-align: center;
}

/* Panel con las opciones (oculto por defecto) */
.d14s-calendar-picker-panel {
    display: none; /* Oculto hasta que se haga clic */
    font-family: 'Inter';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 100;
    margin-top: 5px;
}

/* Clase para hacer visible el panel con jQuery */
.d14s-calendar-picker-panel.d14s-calendar-visible {
    display: block;
}

/* Nueva clase para mostrar el panel hacia arriba */
.d14s-calendar-picker-panel.d14s-calendar-show-above {
    top: auto; /* Anula la posición superior */
    bottom: 100%; /* Lo posiciona justo encima del contenedor */
    margin-top: 0; /* Elimina el margen superior */
    margin-bottom: 5px; /* Añade un pequeño espacio debajo */
}

/* Navegación del año */
.d14s-calendar-year-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ddd;
}
.d14s-calendar-year-display {
    font-weight: bold;
}
.d14s-calendar-nav-btn {
    border: none;
    background: none;
    font-size: 1.2em;
    cursor: pointer;
}

/* Cuadrícula para los meses */
.d14s-calendar-months-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 5px;
}
.d14s-calendar-month {
    padding: 12px 5px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}
.d14s-calendar-month:hover {
    background-color: #e9e9e9;
}
.d14s-calendar-month.d14s-calendar-selected {
    background-color: #075b93;
    color: white;
}
#selected-year{
  font-size: 15px;
  color:#6c757d;
  font-weight: 600;
}
#selected-month{
  font-size: 28px;
  font-weight: 700;
  color:#343a40;
}

/* --- END: CÓDIGO PARA CALENDARIO D14S --- */

.project-folio {
    font-size: 18px;
    font-weight: 600;
    color: #343a40;
}

.project-name {
    font-size: 18px;
    font-weight: 500;
    color: #6c757d;
    margin: 0;
}

.project-status{
  font-size: 18px;
  font-weight: 600;
}

.status-warning{
  color:#e5a800;
}
.status-danger{
  color:#dc3545;
}
.status-success{
  color:#198754;
}

@media (min-width: 768px) {
    .project-name {
        font-size: 24px;
    }
    .project-folio {
        font-size: 24px;
    }
    .project-status {
        font-size: 24px;
    }
}

.d14s-containt-alert{
  width: 100%;
  margin: 20px auto;
  padding: 5px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  text-align: center;
}
/* Variantes de color para el fondo */
.d14s-alert-danger {
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
    border: 1px #ef9eaa solid;
    border-left: 4px solid #ef4444;
}

.d14s-alert-success {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
    border: 1px #568e02 solid;
    border-left: 4px solid #10b981;
}

.d14s-alert-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
    border: 1px #fcd76a solid;
    border-left: 4px solid #f59e0b;
}

.d14s-alert-info {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
    border: 1px #13547c solid;
    border-left: 4px solid #3b82f6;
}

/* Responsive */
@media (max-width: 768px) {
    .d14s-alert-container {
        padding: 10px;
    }
}


/* STYLOS PARA PÁGINA DE ERROR*/
.d14s-ups-error-container {
    text-align: center;
    width: 100%;
    max-width: 600px;
    padding: 32px;
}

.d14s-ups-robot-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    background: #e3f2fd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.d14s-ups-robot {
    width: 40px;
    height: 40px;
    background: #2196f3;
    border-radius: 8px;
    position: relative;
}

.d14s-ups-robot::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 8px;
    background: #2196f3;
    border-radius: 3px 3px 0 0;
}

.d14s-ups-robot::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 8px;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    box-shadow: 16px 0 0 white;
}

.d14s-ups-warning-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    background: #ff5722;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.d14s-ups-error-message {
    background: #fce4ec;
    border: 1px solid #f8bbd9;
    border-radius: 8px;
    padding: 20px;
    color: #880e4f;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.d14s-ups-action-button {
    background: #2196f3;
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 6px;
    font-size: 15.2px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.d14s-ups-action-button:hover {
    background: #1976d2;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.d14s-ups-secondary-action {
    margin-top: 16px;
    color: #666;
    font-size: 15px;
}

.d14s-ups-secondary-action a {
    color: #2196f3;
    text-decoration: none;
}

.d14s-ups-secondary-action a:hover {
    text-decoration: underline;
}

/* --- ESTILOS PARA SUB PROYECTOS --- */
.subproject-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.subproject-card { padding: 0;  transition: all 0.2s ease; border-radius: 5px;}
.subproject-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.subproject-header { padding: 10px; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.subproject-folio { font-size: 13px; font-weight: 700; color: var(--primary-color); background-color: rgba(13, 110, 253, 0.1); padding: 4px 10px; border-radius: 20px; }
.subproject-name { font-size: 17px; font-weight: 600; color: #343a40; margin: 0; }
.subproject-details { padding: var(--padding); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.subproject-details > div .label { font-size: 13px; color: var(--text-muted); }
.subproject-details > div .value { font-size: 14px; font-weight: 500; }

.subproject-padre-real{
  border-top: 4px solid var(--accent-green);
}

.subproject-hijo{
  border-top: 4px solid var(--primary-color);
}

.subproject-hermano{
  border-top: 4px solid #fd7e14;
}

.color-disable{
  color:#e1e1e1;
}

.subproject-relation{
  color:#8a8a8a;
}

.subproject-color-relation{
  padding: 5px;
}
.subproject-color-relation i{
  font-size: 18px;
}

.subproject-color-relation-hijo i{
  color:var(--primary-color);
}
.subproject-color-relation-padre i{
  color:var(--accent-green);
}
.subproject-color-relation-hermano i{
  color:#fd7e14;
}

/* --- ESTILOS TABLET (`min-width: 768px`) --- */
@media (min-width: 768px) {
    .project-name { font-size: 1.8rem; }
    .subproject-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- ESTILOS DESKTOP (`min-width: 992px`) --- */
@media (min-width: 992px) {
    .subproject-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- ESTILOS DESKTOP GRANDE (`min-width: 1200px`) --- */
@media (min-width: 1200px) {
    .subproject-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- ESTILOS PARA MODAL CENTRADO VERTICALMENTE --- */
.modal-vcenter .modal-dialog {
  /* Mueve el modal 50% hacia abajo desde la parte superior de la ventana */
  top: 50%;
  /* Utiliza transform para mover el modal hacia arriba por la mitad de su propia altura */
  transform: translateY(-50%) !important; /* !important para sobreescribir estilos de Bootstrap */
  -webkit-transform: translateY(-50%) !important; /* Para navegadores antiguos */
  -ms-transform: translateY(-50%) !important; /* Para Internet Explorer */

  /* Opcional: Resetea el margen superior que Bootstrap 3 agrega por defecto */
  margin-top: 0; 
}

.d14s-coga-cont-timeline-item.active .d14s-coga-cont-timeline-icon{
  color:#059318!important;
}

/*ESTILOS COMPLEMENTARIOS DE WIZARD*/

.d14s-wizard-step-content-header {
    margin-bottom: 32px;
}

.d14s-wizard-step-content-title {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
}

.d14s-wizard-step-content-subtitle {
    color: #858796;
    margin-top: 4px;
    font-size: 18px;
}

.new-project label{
  font-size: 16px;
}

.new-project .dataInput{
  font-size: 18px;
}

.new-project h2{
  font-size: 22px!important;
}

.new-project .d14s-header-icon i{
  font-size:60px;
  color:var(--primary-color);
  opacity: 0.6;
}

.new-project .d14s-coga-cont-btn{
  width: 100%; 
  height:60px; 
  font-size:18px;
}
.new-project .d14s-coga-cont-btn:hover{
  opacity: 0.8;
}

/* Estilos para sección de portal de proveedores */
.supplier-section .d14s-wizard-step-content-subtitle{
  font-size: 14px;
}

.supplier-section .d14s-wizard-step-content-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
}

.supplier-section .d14s-header-icon i{
  font-size:45px;
  color:var(--primary-color);
  opacity: 0.6;
}

.supplier-section label{
  font-size: 16px;
}

.supplier-section .dataInput {
    font-size: 18px;
}

.supplier-section h2 {
    font-size: 22px !important;
}

.supplier-section .d14s-coga-cont-btn {
  font-size: 18px;
}

.sec-supplier-edit h2 {
  font-size: 22px !important;
}

/* Responsive Design */
@media (min-width: 1400px) {
  .supplier-section h2 {
      font-size: 18px !important;
  }
  .supplier-section .d14s-header-icon i {
      font-size: 35px;
  }
  .sec-supplier-edit  h2 {
    font-size: 18px !important;
  }
}

/*Estilos para nuevo movimiento*/
.new-financial-movement label{
  font-size: 16px;
}

.new-financial-movement .dataInput{
  font-size: 18px;
}

.new-financial-movement h2{
  font-size: 22px!important;
}

.new-financial-movement .d14s-header-icon i{
  font-size:70px;
  color:var(--primary-color);
  opacity: 0.6;
}

.new-financial-movement .d14s-coga-cont-btn{
  width: 100%; 
  height:60px; 
  font-size:18px;
}
.new-financial-movement .d14s-coga-cont-btn:hover{
  opacity: 0.8;
}

.d14s-wizard-total {
    border-top: 1px solid #d1d5db;
    padding-top: 8px;
    margin-top: 8px;
    font-weight: 600;
}
/* Clase base para el textarea */
.d14s-textarea-auto {
  width: 100%;
  min-height: 30px;    /*altura mínima */
  resize: none;        /* evita que el usuario cambie el tamaño manualmente */
  overflow-y: hidden;  /* oculta la barra de scroll */
  box-sizing: border-box;
  padding: 8px;
  font-size: 14px;
}

.d14s-cotiz .rfinance label{
  color:#334155;
}

.resalte{
  font-weight: 600!important;
}

.inputResumen{
  font-size: 18px;
  width: 100%; 
  text-align:right; 
  text-align-last:right!important; 
  color:#f8fafc; 
  margin-bottom:3px; 
  border-style:dashed!important; 
  color:#858796; 
  font-weight:400;
}

/*
ESTILOS PARA CONTADORES DE PROVEEDORES
*/
.d14s-conta-prov-dashboard {
    margin: 0 auto;
}

.d14s-conta-prov-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #2d3748;
}

.d14s-conta-prov-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.d14s-conta-prov-stat-card {
    background: #fcfdfd;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid #e8ecef;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.d14s-conta-prov-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.d14s-conta-prov-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-color);
}

.d14s-conta-prov-stat-card.d14s-conta-prov-total {
    --accent-color: #a8b5c8;
    --accent-color-rgb: 168, 181, 200;
}

.d14s-conta-prov-stat-card.d14s-conta-prov-collected {
    --accent-color: #7dd3a0;
    --accent-color-rgb: 125, 211, 160;
}

.d14s-conta-prov-stat-card.d14s-conta-prov-pending {
    --accent-color: #fac572;
    --accent-color-rgb: 250, 197, 114;
}

.d14s-conta-prov-stat-card.d14s-conta-prov-rejected {
    --accent-color: #f77181;
    --accent-color-rgb: 246, 156, 167;
}

.d14s-conta-prov-stat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.d14s-conta-prov-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--accent-color);
}

.d14s-conta-prov-stat-info {
    flex: 1;
}

.d14s-conta-prov-stat-label {
    font-size: 18px;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 4px;
}

.d14s-conta-prov-stat-amount {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
}

.d14s-conta-prov-stat-percentage {
    font-size: 24px;
    color: var(--accent-color);
    font-weight: 700;
    margin-left: auto;
}

.d14s-conta-prov-total .d14s-conta-prov-stat-percentage {
    color: #6b7688;
}

.d14s-conta-prov-collected .d14s-conta-prov-stat-percentage {
    color: #4a8e66;
}

.d14s-conta-prov-pending .d14s-conta-prov-stat-percentage {
    color: #b8904e;
}

.d14s-conta-prov-rejected .d14s-conta-prov-stat-percentage {
    color: #b85a67;
}

/* Responsive Design */
@media (max-width: 768px) {
    body {
        padding: 1rem;
    }

    .d14s-conta-prov-stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .d14s-conta-prov-stat-card {
        padding: 12.5px;
    }

    .d14s-conta-prov-stat-amount {
        font-size: 18px;
    }

    .d14s-conta-prov-stat-percentage {
        font-size: 16px;
    }

    .d14s-conta-prov-title {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .d14s-conta-prov-stat-header {
        gap: 0.5rem;
    }

    .d14s-conta-prov-stat-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .d14s-conta-prov-stat-amount {
        font-size: 0.95rem;
    }

    .d14s-conta-prov-stat-percentage {
        font-size: 1.125rem;
    }
}

/* Animation for loading effect */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.d14s-conta-prov-stat-card {
    animation: slideIn 0.4s ease-out;
}

.d14s-conta-prov-stat-card:nth-child(2) { animation-delay: 0.1s; }
.d14s-conta-prov-stat-card:nth-child(3) { animation-delay: 0.2s; }
.d14s-conta-prov-stat-card:nth-child(4) { animation-delay: 0.3s; }


/*
* ESTILOS PARA EL CALENDARIO DE SOLICITUD DE VACACIONES
*/
.d14s-calendar-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 24px;
    /*max-width: 600px;*/
    width: 100%;
    border: 1px #e1e1e1 solid;
}

.d14s-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.d14s-calendar-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.d14s-calendar-nav-btn {
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 18px;
    color: #475569;
}

.d14s-calendar-nav-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.d14s-calendar-nav-btn:active {
    transform: scale(0.95);
}

.d14s-calendar-month-year {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    min-width: 180px;
}

.d14s-calendar-config {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.d14s-calendar-config label {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.d14s-calendar-config input {
    width: 60px;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}

.d14s-calendar-counter {
    background: #3b82f6;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.d14s-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.d14s-calendar-weekday {
    background: #f8fafc;
    padding: 12px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.d14s-calendar-day {
    background: white;
    padding: 12px 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.d14s-calendar-day:hover {
    background: #f1f5f9;
}

.d14s-calendar-day.d14s-calendar-other-month {
    color: #cbd5e1;
    background: #f8fafc;
}

.d14s-calendar-day.d14s-calendar-weekend {
    background: #fef2f2;
    color: #dc2626;
    cursor: not-allowed;
}

.d14s-calendar-day.d14s-calendar-holiday {
    background: #fef3c7;
    color: #d97706;
    cursor: not-allowed;
}

.d14s-calendar-day.d14s-calendar-selected {
    background: #3b82f6;
    color: white;
}

.d14s-calendar-day.d14s-calendar-selected:hover {
    background: #2563eb;
}

.d14s-calendar-day.d14s-calendar-disabled {
    background: #f8fafc;
    color: #cbd5e1;
    cursor: not-allowed;
}

.d14s-calendar-holidays-config {
    margin-top: 20px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
}

.d14s-calendar-holidays-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

.d14s-calendar-holiday-input-group {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.d14s-calendar-holiday-input {
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    flex: 1;
    min-width: 200px;
}

.d14s-calendar-add-holiday-btn {
    background: #10b981;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.d14s-calendar-add-holiday-btn:hover {
    background: #059669;
}

.d14s-calendar-holiday-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.d14s-calendar-holiday-tag {
    background: #cbcbcdef;
    color: #4a4949;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d14s-calendar-remove-holiday {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.d14s-calendar-remove-holiday:hover {
    background: #dc2626;
    color: white;
}

@media (max-width: 640px) {
    .d14s-calendar-container {
        padding: 16px;
        margin: 10px;
    }

    .d14s-calendar-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .d14s-calendar-config {
        justify-content: center;
    }

    .d14s-calendar-nav {
        justify-content: center;
    }

    .d14s-calendar-month-year {
        font-size: 18px;
    }

    .d14s-calendar-day {
        min-height: 40px;
        font-size: 13px;
    }

    .d14s-calendar-weekday {
        padding: 8px 2px;
        font-size: 11px;
    }

    .d14s-calendar-holiday-input-group {
        flex-direction: column;
        align-items: stretch;
    }

    .d14s-calendar-holiday-input {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }

    .d14s-calendar-day {
        min-height: 36px;
        font-size: 12px;
        padding: 8px 2px;
    }

    .d14s-calendar-weekday {
        font-size: 10px;
        padding: 6px 2px;
    }
}
/*
* END ESTILOS PARA EL CALENDARIO DE SOLICITUD DE VACACIONES
*/


/* Tamaños para pantallas extra pequeñas (xs, >= 0px) */
@media (min-width: 0px) {
  /*.col-xs-1  { width: 8.3333%; }
  .col-xs-2  { width: 16.6667%; }
  .col-xs-3  { width: 25%; }
  .col-xs-4  { width: 33.3333%; }
  .col-xs-5  { width: 41.6667%; }
  .col-xs-6  { width: 50%; }
  .col-xs-7  { width: 58.3333%; }
  .col-xs-8  { width: 66.6667%; }
  .col-xs-9  { width: 75%; }
  .col-xs-10 { width: 83.3333%; }
  .col-xs-11 { width: 91.6667%; }
  .col-xs-12 { width: 100%; }*/
  .d14s-col{
    width: 100%;
  }
}

/* Tamaños para pantallas pequeñas (sm, >= 576px) */
@media (min-width: 576px) {
  /*.col-sm-1  { width: 8.3333%; }
  .col-sm-2  { width: 16.6667%; }
  .col-sm-3  { width: 25%; }
  .col-sm-4  { width: 33.3333%; }
  .col-sm-5  { width: 41.6667%; }
  .col-sm-6  { width: 50%; }
  .col-sm-7  { width: 58.3333%; }
  .col-sm-8  { width: 66.6667%; }
  .col-sm-9  { width: 75%; }
  .col-sm-10 { width: 83.3333%; }
  .col-sm-11 { width: 91.6667%; }
  .col-sm-12 { width: 100%; }*/
  .d14s-col{
    width: 100%;
  }

}

/* Tamaños para pantallas medianas (md, >= 768px) */
@media (min-width: 768px) {
  /*.col-md-1  { width: 8.3333%; }
  .col-md-2  { width: 16.6667%; }
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.3333%; }
  .col-md-5  { width: 41.6667%; }
  .col-md-6  { width: 50%; }
  .col-md-7  { width: 58.3333%; }
  .col-md-8  { width: 66.6667%; }
  .col-md-9  { width: 75%; }
  .col-md-10 { width: 83.3333%; }
  .col-md-11 { width: 91.6667%; }
  .col-md-12 { width: 100%; }*/
  .d14s-col{
    width: 45%;
  }

  .supplier-portal .d14s-col{
    width: 100%;
  }

}

/* Tamaños para pantallas grandes (lg, >= 992px) */
@media (min-width: 992px) {
  /*.col-lg-1  { width: 8.3333%; }
  .col-lg-2  { width: 16.6667%; }
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.3333%; }
  .col-lg-5  { width: 41.6667%; }
  .col-lg-6  { width: 50%; }
  .col-lg-7  { width: 58.3333%; }
  .col-lg-8  { width: 66.6667%; }
  .col-lg-9  { width: 75%; }
  .col-lg-10 { width: 83.3333%; }
  .col-lg-11 { width: 91.6667%; }
  .col-lg-12 { width: 100%; }*/
  .d14s-col{
    width: 48%;
  }

  .supplier-portal .d14s-col{
    width: 49.7%;
  }

}

/* Tamaños para pantallas extra grandes (xl, >= 1200px) */
@media (min-width: 1200px) {
  /*.col-xl-1  { width: 8.3333%; }
  .col-xl-2  { width: 16.6667%; }
  .col-xl-3  { width: 25%; }
  .col-xl-4  { width: 33.3333%; }
  .col-xl-5  { width: 41.6667%; }
  .col-xl-6  { width: 50%; }
  .col-xl-7  { width: 58.3333%; }
  .col-xl-8  { width: 66.6667%; }
  .col-xl-9  { width: 75%; }
  .col-xl-10 { width: 83.3333%; }
  .col-xl-11 { width: 91.6667%; }
  .col-xl-12 { width: 100%; }*/
  .d14s-col{
    width: 19.7%;
  }

  .supplier-portal .d14s-col{
    width: 24.7%;
  }


}