/* ==========================================================================
   SITE PAGES
   ========================================================================== */

/* Página con footer fijo */
.page-content-safe-footer {
   margin-bottom: 5rem;
}

/* Animaciones */
@keyframes slidein {
   from {
      margin-left: 100%;
      width: 300%;
   }

   to {
      margin-left: 0%;
      width: 100%;
   }
}

@keyframes EntrarIzq {
   from {
      transform: translateX(-200%);
   }

   to {
      transform: translateX(0);
   }
}

@keyframes zoom {
   from {
      transform: scale(2.5);
   }

   to {
      transform: scale(1);
   }
}

/* Responsive */
@media (min-width: 768px) {
   .logo-adjust-index {
      max-width: 360px;
   }
}

@media (max-width: 991.98px) {
   .landing-header {
      padding-top: 2rem;
      padding-bottom: 1rem;
   }

   .landing-panel {
      min-height: 470px;
      padding: 2rem 1.5rem;
   }
}

@media (max-width: 575.98px) {
   .landing-hero {
      padding-top: 0.5rem;
      padding-bottom: 1.5rem;
   }

   .landing-panel {
      min-height: 400px;
      border-radius: 22px;
   }

   .titulo-bienvenida {
      margin-bottom: 1.5rem;
      line-height: 1.12;
   }

   .btn-entrar {
      width: 100%;
      min-width: auto;
   }
}

/* ==========================================================================
   LANDING / INDEX
   ========================================================================== */
.landing-header {
   padding: 2.5rem 0 1.25rem;
}
.logo-adjust-index {
   max-width: 320px;
   height: auto;
   animation: zoom 1.8s ease;
}
.landing-hero {
   padding-top: 1rem;
   padding-bottom: 2rem;
}
.landing-panel {
   position: relative;
   min-height: 460px;
   padding: 2.4rem 2.25rem;
   border-radius: 28px;
   overflow: hidden;
   background: linear-gradient(rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.12)), url('/assets/img/fondoDanone.webp') center / cover no-repeat;
   border: 1px solid rgba(255, 255, 255, 0.20);
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
   backdrop-filter: blur(12px);
}
.landing-content {
   width: min(100%, 640px);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.titulo-bienvenida {
   margin-bottom: 1.75rem;
   color: #ffffff;
   font-weight: 800;
   line-height: 1.08;
   font-size: clamp(1.9rem, 4vw, 4rem);
   letter-spacing: -0.035em;
   text-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.btn-entrar {
   background-color: #ffffff;
   color: var(--azul-primario);
   border-radius: 999px;
   font-weight: 800;
   padding: 1rem 2.5rem;
   min-width: 250px;
   border: 0;
   box-shadow: 0 12px 24px rgba(18, 58, 112, 0.16);
   transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
   letter-spacing: 0.3px;
}

   .btn-entrar:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 30px rgba(18, 58, 112, 0.22);
      filter: none;
   }
   .btn-entrar:active{
      transform:scale(0.98);
   }

.footer-index {
   background-color: var(--fondo-footer) !important;
   transition: background-color var(--transition-base);
   font-size: 0.95rem;
   min-height: 96px;
}
.footer-link-index {
   color: var(--texto-footer) !important;
   font-weight: 600;
   text-decoration: none;
   opacity: 0.92;
   font-size: 1rem;
}

   .footer-link-index:hover {
      opacity: 1;
   }

.enlace-video {
   opacity: 0.8;
   transition: opacity 0.3s;
}

   .enlace-video:hover {
      opacity: 1;
   }
.landing-footer {
   padding-top: 1rem;
   padding-bottom: 1rem;
}
.landing-compass {
   max-height: 56px;
}

/* ==========================================================================
   LOGIN
   ========================================================================== */

.login-page {
   position: relative;
}
.login-section {
   padding-top: 2rem;
   padding-bottom: 2rem;
}
.login-card {
   max-width: 540px;
   padding: 2.25rem 2.25rem 2rem;
   background-color: var(--surface-1);
   border-radius: 24px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
   border: 1px solid rgba(0, 0, 0, 0.04);
}
.login-card__header {
   margin-bottom: 2.25rem;
}
.login-logo {
   max-width: 360px;
   width: 100%;
   height: auto;
}
.login-form .form-control {
   height: 58px;
   background-color: #fbfbfc;
   border: 1px solid #d9dfe7;
   border-left: 0;
   box-shadow: none;
   font-size: 1.02rem;
}
   .login-form .form-control:focus {
      background-color: var(--surface-1);
      border-color: #9cb7da;
      box-shadow: 0 0 0 4px rgba(50, 92, 147, 0.10);
   }
.login-input-group {
   display: flex;
   align-items:center;
   background: #f8f9fa;
   border-radius: 14px;
   overflow: hidden;
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
   border: 1px solid var(--border-soft);
}
   .login-input-group .input-group-text {
      background-color: #fbfbfc;
      border: 1px solid #d9dfe7;
      border-right: 0;
      padding-inline: 1rem;
   }

.login-submit-btn {
   height: 58px;
   border: 0;
   border-radius: 14px;
   background: linear-gradient(135deg, var(--azul-primario) 0%, var(--azul-secundario) 100%);
   color: var(--surface-1);
   font-weight: 800;
   font-size: 1rem;
   box-shadow: var(--shadow-soft);
   transition: all 0.25s ease;
}
   .login-submit-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
      color: var(--surface-1);
   }
.login-divider {
   margin: 1.75rem 0;
   border-color: rgba(50, 92, 147, 0.10);
}
.login-actions {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   margin-top: 1.5rem;
   font-weight: 600;
}
   .login-actions a,
   .login-actions button {
      opacity: 0.8;
      transition: opacity 0.2s ease;
   }
      .login-actions a:hover,
      .login-actions button:hover {
         opacity: 1;
      }
   .login-actions .link-item,
   .login-actions .btn-tutorial-link {
      font-size: 1rem;
      font-weight: 600;
   }

@media (max-width: 575.98px) {
   .login-card {
      padding: 1.5rem;
      border-radius: 20px;
   }

   .login-logo {
      max-width: 300px;
   }

   .login-actions {
      flex-direction: column;
      align-items: center;
   }

   .login-submit-btn {
      height: 54px;
   }
}

/* ==========================================================================
   RESET
   ========================================================================== */
.reset-form .row {
   row-gap: 0.25rem;
}
/* ==========================================================================
   VERIFY
   ========================================================================== */
.token-input {
   letter-spacing: 0.4em;
   font-weight: 600;
   font-size: 1.2rem;
}
/* ==========================================================================
   APP LAYOUT - ADMIN / PROVIDER
   ========================================================================== */
.app-navbar-welcome {
   max-width: 520px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.app-layout-body {
   overflow: hidden;
}

.app-main {
   overflow-y: auto;
   padding: 1.25rem 0;
}

.app-navbar-logo {
   height: 30px;
   width: auto;
}

.app-navbar-divider {
   height: 25px;
}

.app-notification-badge {
   font-size: 0.6rem;
}

.app-footer-compass {
   max-height: 40px;
   width: auto;
}

.app-theme-toggle {
   box-shadow: none;
}

   .app-theme-toggle:focus {
      box-shadow: none;
   }
.navbar-sirius {
   background: rgba(255, 255, 255, 0.06);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.btn-logout-sirius {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   padding: 0.7rem 1.25rem;
   background: #f45b42;
   color: #ffffff !important;
   border-radius: 999px;
   font-weight: 700;
   border: none;
   transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
   text-decoration:none;
   white-space:nowrap;
}
.btn-logout-sirius i{
   color:inherit;
}

   .btn-logout-sirius:hover {
      background: #e14c34;
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(244, 91, 66, 0.22);
   }

/* ==========================================================================
   MENU CARDS
   ========================================================================== */

.menu-card {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
   background-color: var(--surface-1);
   border: 1px solid var(--border-soft);
   border-radius: 20px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

   .menu-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
   }

.menu-card-header {
   background-color: #add8e6;
   padding: 1.5rem 1.25rem;
   text-align: center;
   border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.menu-icon-lg {
   width: 64px;
   height: 64px;
   object-fit: contain;
   margin-bottom: 0.75rem;
}

.menu-title-lg {
   margin: 0;
   color: var(--azul-primario);
   font-size: 1.05rem;
   font-weight: 700;
   line-height: 1.25;
}

.menu-card-body {
   flex-grow: 1;
   background-color: var(--surface-1);
   padding: 1.1rem 1.25rem 1.25rem;
}

.submenu-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.submenu-item {
   position: relative;
   padding: 0.35rem 0 0.35rem 1.35rem;
}

   .submenu-item::before {
      content: "→";
      position: absolute;
      left: 0;
      color: var(--azul-primario);
      font-weight: 700;
   }

.submenu-link-clean {
   color: #1f2937;
   text-decoration: none;
   transition: color 0.2s ease, transform 0.2s ease;
}

   .submenu-link-clean:hover {
      color: var(--azul-primario);
      text-decoration: none;
   }

/* ==========================================================================
   HOME
   ========================================================================== */

.home-tutorial-row {
   margin-top: 1rem !important;
}

.home-tutorial-btn {
   color: #ffffff !important;
   font-weight: 600;
   font-size: 0.95rem;
   opacity: 0.9;
   text-decoration: none;
   transition: opacity 0.2s ease, transform 0.2s ease;
}

   .home-tutorial-btn:hover {
      color: #ffffff !important;
      opacity: 1;
      transform: translateY(-1px);
      filter: none;
      text-decoration:underline;
   }
/* ==========================================================================
   HOME DASHBOARD
   ========================================================================== */

.home-dashboard {
   padding-top: 1.5rem !important;
   padding-bottom: 1.5rem !important;
}
/* ==========================================================================
   BACK BUTTON
   ========================================================================== */

.app-back-button {
   margin-bottom: 1rem;
}

.btn-back {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(255,255,255,0.85);
   backdrop-filter: blur(6px);
   box-shadow: 0 6px 14px rgba(0,0,0,0.12);
   transition: all 0.2s ease;
}

   .btn-back img {
      width: 20px;
   }

   .btn-back:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.18);
   }
/* ==========================================================================
   CONTACT EDIT
   ========================================================================== */

.contact-edit-card {
   max-width: 480px;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
   padding: 0;
   overflow: hidden;
   margin-top: -20px;
}

.contact-edit-header {
   padding: 2.25rem 2rem 0.75rem;
}

.contact-edit-icon-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1rem;
}

.contact-edit-icon {
   font-size: 2rem;
   color: var(--azul-primario);
   opacity: 0.22;
}

.contact-edit-title {
   margin: 0;
   color: var(--azul-primario);
   font-size: 2.1rem;
   font-weight: 800;
   letter-spacing: -0.04em;
   line-height: 1.1;
}

.contact-edit-content {
   padding: 1rem 3rem 2rem;
}

.contact-edit-label {
   display: block;
   font-size: 0.75rem;
   letter-spacing: 0.08em;
   font-weight: 700;
   color: var(--azul-primario);
   text-transform: uppercase;
   opacity: 0.7;
}

.contact-edit-input-group {
   border-radius: 14px;
   overflow: hidden;
   background: #f8f9fa;
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.contact-edit-input-icon {
   background: #f8f9fa;
   border: 0;
   color: var(--azul-primario);
   padding-inline: 1rem;
}

.contact-edit-input {
   border: 0;
   background: #f4f7fb;
   padding: 0.95rem 1rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   box-shadow: none !important;
}

   .contact-edit-input:focus {
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(50, 92, 147, 0.15);
   }
   .contact-edit-input::placeholder {
      color: #9aa7b5;
      opacity: 0.8;
   }

.contact-edit-save-btn {
   width: 64px;
   height: 64px;
   border: 0;
   border-radius: 18px;
   background: linear-gradient(135deg, var(--azul-primario) 0%, var(--azul-secundario) 100%);
   box-shadow: 0 14px 30px rgba(50, 92, 147, 0.22);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}
   .contact-edit-save-btn:active {
      transform: scale(0.96);
   }

   .contact-edit-save-btn:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 18px 34px rgba(50, 92, 147, 0.28);
   }

.contact-edit-save-icon {
   filter: brightness(0) invert(1);
}

.contact-edit-footer {
   padding: 0 2rem 1.5rem;
}

.contact-edit-tutorial {
   color: var(--azul-primario);
   opacity: 0.75;
   text-decoration: none;
   font-weight: 500;
}

   .contact-edit-tutorial:hover {
      color: var(--azul-primario);
      opacity: 1;
      filter: none;
   }

@media (max-width: 575.98px) {
   .contact-edit-card {
      max-width: 100%;
      border-radius: 22px;
   }

   .contact-edit-content {
      padding: 1rem 1.25rem 1.75rem;
   }

   .contact-edit-title {
      font-size: 1.7rem;
   }
}
/* ==========================================================================
   EMAIL EDIT
   ========================================================================== */

.email-edit-card {
   max-width: 480px;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
   padding: 0;
   overflow: hidden;
}

.email-edit-header {
   padding: 2.25rem 2rem 0.75rem;
}

.email-edit-icon-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1rem;
}

.email-edit-icon {
   width: 44px;
   height: 44px;
   opacity: 0.18;
}

.email-edit-title {
   margin: 0;
   color: var(--azul-primario);
   font-size: 1.95rem;
   font-weight: 800;
   letter-spacing: -0.03em;
   line-height: 1.1;
}

.email-edit-content {
   padding: 1rem 3rem 2rem;
}

.email-edit-label {
   display: block;
   font-size: 0.75rem;
   letter-spacing: 0.08em;
   font-weight: 700;
   color: var(--azul-primario);
   text-transform: uppercase;
   opacity: 0.78;
}

.email-edit-input-group {
   border-radius: 14px;
   overflow: hidden;
   background: #f8f9fa;
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.email-edit-input-icon {
   background: #f8f9fa;
   border: 0;
   color: var(--azul-primario);
   padding-inline: 1rem;
}

.email-edit-input {
   border: 0;
   background: #f4f7fb;
   padding: 0.95rem 1rem;
   font-weight: 600;
   letter-spacing: 0.04em;
   box-shadow: none !important;
}

   .email-edit-input:focus {
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(50, 92, 147, 0.15);
   }

   .email-edit-input::placeholder {
      color: #9aa7b5;
      opacity: 0.8;
   }

.email-edit-save-btn {
   width: 64px;
   height: 64px;
   border: 0;
   border-radius: 18px;
   background: linear-gradient(135deg, var(--azul-primario) 0%, var(--azul-secundario) 100%);
   box-shadow: 0 14px 30px rgba(50, 92, 147, 0.22);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

   .email-edit-save-btn:hover {
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 18px 34px rgba(50, 92, 147, 0.28);
   }

   .email-edit-save-btn:active {
      transform: scale(0.96);
   }

.email-edit-save-icon {
   filter: brightness(0) invert(1);
}

.email-edit-footer {
   padding: 0 2rem 1.5rem;
}

.email-edit-tutorial {
   color: var(--azul-primario);
   opacity: 0.75;
   font-weight: 500;
   text-decoration: none;
}

   .email-edit-tutorial:hover {
      color: var(--azul-primario);
      opacity: 1;
      filter: none;
   }

@media (max-width: 575.98px) {
   .email-edit-card {
      max-width: 100%;
      border-radius: 22px;
   }

   .email-edit-content {
      padding: 1rem 1.25rem 1.75rem;
   }

   .email-edit-title {
      font-size: 1.7rem;
   }
}
/* ==========================================================================
   IVR EDIT
   ========================================================================== */

.ivr-edit-card {
   max-width: 480px;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
   padding: 0;
   overflow: hidden;
}

.ivr-edit-header {
   padding: 2.25rem 2rem 0.75rem;
}

.ivr-edit-icon-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1rem;
}

.ivr-edit-icon {
   width: 44px;
   height: 44px;
   opacity: 0.18;
}

.ivr-edit-title {
   margin: 0;
   color: var(--azul-primario);
   font-size: 1.95rem;
   font-weight: 800;
   letter-spacing: -0.03em;
   line-height: 1.1;
}

.ivr-edit-content {
   padding: 1rem 3rem 2rem;
}

.ivr-edit-label {
   display: block;
   font-size: 0.75rem;
   letter-spacing: 0.08em;
   font-weight: 700;
   color: var(--azul-primario);
   text-transform: uppercase;
   opacity: 0.78;
}

.ivr-edit-input-group {
   border-radius: 14px;
   overflow: hidden;
   background: #f8f9fa;
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.ivr-edit-input-icon {
   background: #f8f9fa;
   border: 0;
   padding-inline: 1rem;
}

.ivr-edit-input {
   border: 0;
   background: #f4f7fb;
   padding: 0.95rem 1rem;
   font-weight: 600;
   box-shadow: none !important;
}

   .ivr-edit-input:focus,
   .ivr-edit-select:focus {
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(50, 92, 147, 0.15);
   }

.ivr-edit-pin-input {
   letter-spacing: 0.25em;
}

.ivr-edit-select {
   border: 0;
   border-radius: 14px;
   background: #f4f7fb;
   padding: 0.95rem 1rem;
   font-weight: 600;
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.ivr-edit-readonly {
   padding: 0.95rem 1rem;
   border-radius: 14px;
   background: #f4f7fb;
   color: #5f6b7a;
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
   font-size: 0.95rem;
}

.ivr-edit-save-btn {
   width: 64px;
   height: 64px;
   border: 0;
   border-radius: 18px;
   background: linear-gradient(135deg, var(--azul-primario) 0%, var(--azul-secundario) 100%);
   box-shadow: 0 14px 30px rgba(50, 92, 147, 0.22);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

   .ivr-edit-save-btn:hover {
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 18px 34px rgba(50, 92, 147, 0.28);
   }

   .ivr-edit-save-btn:active {
      transform: scale(0.96);
   }

.ivr-edit-save-icon {
   filter: brightness(0) invert(1);
}

.ivr-edit-footer {
   padding: 0 2rem 1.5rem;
}

.ivr-edit-tutorial {
   color: var(--azul-primario);
   opacity: 0.75;
   font-weight: 500;
   text-decoration: none;
}

   .ivr-edit-tutorial:hover {
      color: var(--azul-primario);
      opacity: 1;
      filter: none;
   }

@media (max-width: 575.98px) {
   .ivr-edit-card {
      max-width: 100%;
      border-radius: 22px;
   }

   .ivr-edit-content {
      padding: 1rem 1.25rem 1.75rem;
   }

   .ivr-edit-title {
      font-size: 1.7rem;
   }
}
/* ==========================================================================
   COMPANY SELECTOR
   ========================================================================== */

.company-selector-page {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.company-selector-header {
   margin-bottom: 1.5rem;
}

.company-selector-subtitle {
   color: rgba(255, 255, 255, 0.82);
   font-size: 0.98rem;
   font-weight: 500;
   letter-spacing: 0.01em;
}

.company-selector-card {
   display: block;
}

.company-selector-linktext {
   color: var(--azul-secundario);
   opacity: 0.85;
   font-weight: 500;
}

.company-selector-arrow {
   display: flex;
   align-items: center;
   justify-content: center;
}

.company-selector-arrow-icon {
   transform: rotate(180deg);
   opacity: 0.3;
   transition: transform 0.2s ease, opacity 0.2s ease;
}

.empresa-row-card:hover .company-selector-arrow-icon {
   transform: rotate(180deg) translateX(3px);
   opacity: 0.55;
}

.swal-company-title {
   color: #325C93;
   font-weight: 800;
}

.swal-company-content {
   min-height: 300px;
}
.company-selector-list {
   max-height: 70vh;
   overflow-y: auto;
   padding-right: 6px;
}
   .company-selector-list::-webkit-scrollbar {
      width: 6px;
   }

   .company-selector-list::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.2);
      border-radius: 10px;
   }

.swal-company-content--sm {
   min-height: 200px;
}
/* ==========================================================================
   NOTIFICATIONS
   ========================================================================== */

.notifications-grid {
   margin-top: 0.5rem;
}

.notification-card-trigger {
   display: block;
}

.notification-card {
   min-height: 250px;
   overflow: hidden;
   border-radius: 20px;
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

   .notification-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14);
   }

.notification-card-header {
   border-bottom: 0;
}

.notification-card-body {
   padding: 1.25rem;
}

.notification-card-text {
   line-height: 1.5;
}

.notification-card-link {
   opacity: 0.9;
}

.notification-modal-popup {
   border-radius: 20px !important;
   box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28) !important;
}

.notification-modal-title {
   font-weight: 800;
}

.notification-modal-content {
   line-height: 1.65;
}

.notification-modal-attachment {
   background: #f8f9fa;
}

@media (max-width: 575.98px) {
   .notification-card {
      min-height: auto;
   }
}

/* ==========================================================================
   SWEET ALERT BACKDROP FIX
   ========================================================================== */

.swal2-container {
   padding: 1rem !important;
   background: rgba(6, 10, 18, 0.78) !important;
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
   z-index: 2000 !important;
}

.swal2-backdrop-show {
   background: rgba(6, 10, 18, 0.78) !important;
}

.swal2-popup {
   position: relative;
   z-index: 2001 !important;
}
body.swal2-shown {
   overflow: hidden !important;
   padding-right: 0 !important;
}

/* ==========================================================================
   TICKET MANAGEMENT
   ========================================================================== */

.ticket-management-page {
   padding-top: 1.5rem !important;
   padding-bottom: 2rem !important;
}

.ticket-management-header {
   margin-bottom: 1.5rem;
}

.ticket-management-title {
   color: #ffffff;
   font-size: clamp(1.75rem, 2.8vw, 2.6rem);
   font-weight: 800;
   letter-spacing: -0.03em;
   text-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.ticket-management-card {
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
   overflow: hidden;
}

.ticket-management-card-body {
   padding: 2rem;
}

.ticket-management-actions {
   display: flex;
   justify-content: center;
   gap: 1.5rem;
   padding: 0 2rem 2rem;
}

.ticket-action-btn {
   width: 64px;
   height: 64px;
   border: 0;
   border-radius: 18px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

   .ticket-action-btn img {
      width: 28px;
      height: 28px;
   }

.ticket-action-btn--primary {
   background: linear-gradient(135deg, var(--azul-primario) 0%, var(--azul-secundario) 100%);
   box-shadow: 0 14px 30px rgba(50, 92, 147, 0.22);
}

   .ticket-action-btn--primary img {
      filter: brightness(0) invert(1);
   }

.ticket-action-btn--secondary {
   background: #ffffff;
   border: 2px solid var(--azul-primario);
   box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

.ticket-action-btn:hover {
   transform: translateY(-2px) scale(1.03);
}

.ticket-management-label {
   display: block;
   font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   color: var(--azul-primario);
}

.ticket-management-textarea,
.ticket-management-file {
   border-radius: 14px;
   border: 1px solid #d9dfe7;
   background: #f8fafc;
   box-shadow: none;
}

   .ticket-management-textarea:focus,
   .ticket-management-file:focus {
      border-color: #9cb7da;
      box-shadow: 0 0 0 3px rgba(50, 92, 147, 0.15);
   }

/* Modal comentario */
.ticket-comment-modal {
   border: 0;
   border-radius: 22px;
   overflow: hidden;
}

.ticket-comment-modal__header {
   background: linear-gradient(135deg, var(--azul-primario) 0%, var(--azul-secundario) 100%);
   color: #ffffff;
   border-bottom: 0;
}

.ticket-comment-modal__body {
   padding: 1.5rem;
}

.ticket-comment-modal__footer {
   border-top: 0;
   padding: 0 1.5rem 1.5rem;
}

.ticket-comment-save-btn {
   border: 0;
   border-radius: 12px;
   background: linear-gradient(135deg, var(--azul-primario) 0%, var(--azul-secundario) 100%);
   color: #ffffff;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   font-weight: 700;
   padding: 0.75rem 1rem;
}

   .ticket-comment-save-btn img {
      filter: brightness(0) invert(1);
   }

/* Historial */
.ticket-history-offcanvas {
   max-width: 460px;
}

.ticket-history-offcanvas__header {
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ticket-history-offcanvas__body {
   background: #f8f9fa;
}

@media (max-width: 767.98px) {
   .ticket-management-card-body {
      padding: 1.25rem;
   }

   .ticket-management-actions {
      gap: 1rem;
      padding: 0 1.25rem 1.5rem;
   }

   .ticket-action-btn {
      width: 58px;
      height: 58px;
   }
}

/* ==========================================================================
   TICKET CREATE
   ========================================================================== */

.ticket-create-form {
   width: 100%;
}

.ticket-management-select {
   min-height: 54px;
   border-radius: 14px;
   border: 1px solid #d9dfe7;
   background: #f8fafc;
   box-shadow: none;
   font-weight: 500;
}

   .ticket-management-select:focus {
      border-color: #9cb7da;
      box-shadow: 0 0 0 3px rgba(50, 92, 147, 0.15);
      background: #ffffff;
   }

.ticket-management-textarea--lg {
   min-height: 160px;
   resize: vertical;
}

.ticket-dynamic-params {
   border-left: 4px solid var(--azul-primario);
   background: #f8fafc;
   border-radius: 14px;
   padding: 1rem 1rem 1rem 1.1rem;
   box-shadow: inset 0 0 0 1px rgba(50, 92, 147, 0.05);
}

.ticket-dynamic-params__loading {
   min-height: 44px;
}

/* ==========================================================================
   TICKET DYNAMIC PARAMETERS
   ========================================================================== */

.ticket-dynamic-fields {
   width: 100%;
}

.ticket-management-input {
   min-height: 54px;
   border-radius: 14px;
   border: 1px solid #d9dfe7;
   background: #f8fafc;
   box-shadow: none;
   font-weight: 500;
}

   .ticket-management-input:focus {
      border-color: #9cb7da;
      box-shadow: 0 0 0 3px rgba(50, 92, 147, 0.15);
      background: #ffffff;
   }

.ticket-management-input--readonly {
   background: #eef3f8;
   color: #5f6b7a;
}

.ticket-dynamic-file-view {
   min-height: 54px;
   display: flex;
   align-items: center;
   padding: 0.85rem 1rem;
   border-radius: 14px;
   background: #ffffff;
   border: 1px solid #d9dfe7;
}

.ticket-dynamic-file-link {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   color: var(--azul-primario);
   text-decoration: none;
   font-weight: 500;
}

.ticket-dynamic-current-file {
   margin-bottom: 0.5rem;
   color: #6b7280;
}

/* ==========================================================================
   TICKET DETAIL
   ========================================================================== */

.ticket-detail-view {
   width: 100%;
}

.ticket-detail-header {
   margin-bottom: 1.75rem;
}

.ticket-detail-title {
   margin: 0;
   color: var(--azul-primario);
   font-size: clamp(1.4rem, 2.2vw, 2rem);
   font-weight: 800;
   letter-spacing: -0.03em;
}

.ticket-management-textarea--detail {
   resize: none;
}

.ticket-detail-extra {
   border-left: 4px solid var(--azul-primario);
   background: #f8fafc;
   border-radius: 18px;
   padding: 1.25rem 1.25rem 1.35rem;
   box-shadow: inset 0 0 0 1px rgba(50, 92, 147, 0.05);
}

.ticket-detail-extra__header {
   margin-bottom: 1rem;
}

.ticket-detail-extra__title {
   margin: 0;
   color: var(--azul-primario);
   font-weight: 800;
}

.ticket-detail-extra__label {
   display: block;
   font-size: 0.78rem;
   font-weight: 700;
   color: #6b7280;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.ticket-detail-extra__text {
   color: #1f2937;
   font-weight: 600;
}

.ticket-detail-file-link {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   padding: 0.6rem 0.9rem;
   border-radius: 999px;
   border: 1px solid rgba(50, 92, 147, 0.16);
   background: #ffffff;
   color: var(--azul-primario);
   text-decoration: none;
   font-weight: 600;
   max-width: 100%;
}

.ticket-detail-file-link__text {
   display: inline-block;
   max-width: 220px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.ticket-detail-rating {
   background: #f8fafc;
   border-radius: 20px;
   border: 1px solid rgba(50, 92, 147, 0.08);
   overflow: hidden;
}

.ticket-detail-rating__header {
   padding: 1.2rem 1.25rem 0.75rem;
}

.ticket-detail-rating__title {
   margin: 0;
   color: #198754;
   font-weight: 800;
}

.ticket-detail-rating__body {
   padding: 0 1.25rem 1.25rem;
}
.historial-comment-text {
   color: #1f2937;
   font-weight: 500;
}

/* ==========================================================================
   TABLE ACTION BUTTON
   ========================================================================== */

.btn-view-detail {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   border: none;
   background: rgba(50, 92, 147, 0.1);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: all 0.25s ease;
}

   .btn-view-detail img {
      width: 16px;
      opacity: 0.7;
   }

   .btn-view-detail:hover {
      background: #325C93;
      transform: translateY(-1px);
   }

      .btn-view-detail:hover img {
         filter: brightness(0) invert(1);
         opacity: 1;
      }

/* ==========================================================================
   TICKET INDEX
   ========================================================================== */

.ticket-index-page {
   padding-top: 1.5rem !important;
   padding-bottom: 2rem !important;
}

.ticket-index-header {
   margin-bottom: 1.5rem;
}

.ticket-index-title {
   color: #ffffff;
   font-size: clamp(1.8rem, 2.5vw, 2.6rem);
   font-weight: 800;
   letter-spacing: -0.03em;
   text-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.ticket-index-tabs .nav-link {
   border-radius: 999px;
   padding: 0.8rem 1.25rem;
   color: #ffffff;
   background: rgba(255, 255, 255, 0.10);
   border: 1px solid rgba(255, 255, 255, 0.08);
   transition: all 0.2s ease;
}

   .ticket-index-tabs .nav-link.active {
      background: #ffffff;
      color: var(--azul-primario);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
   }

.ticket-index-card {
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
   padding: 1.25rem;
   overflow: hidden;
}

.ticket-index-state-bar-col {
   width: 10px;
}

.ticket-index-state-bar {
   width: 10px;
   min-width: 10px;
   background: var(--ticket-state-color);
   border-radius: 0 6px 6px 0;
}

.ticket-status-badge {
   display: inline-flex;
   align-items: center;
   padding: 0.45rem 0.75rem;
   border-radius: 999px;
   background: color-mix(in srgb, var(--ticket-state-color) 18%, white);
   color: #1f2937;
   font-weight: 700;
}

.ticket-sla-badge {
   display: inline-flex;
   align-items: center;
   padding: 0.5rem 0.85rem;
   border-radius: 999px;
   background: #1f2937;
   color: #ffffff;
   font-weight: 700;
}

.ticket-sla-badge--expired {
   background: #dc3545 !important;
   color: #ffffff !important;
}

.ticket-create-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.9rem 1.5rem;
   border-radius: 999px;
   background: linear-gradient(135deg, var(--azul-primario) 0%, var(--azul-secundario) 100%);
   color: #ffffff;
   text-decoration: none;
   font-weight: 700;
   box-shadow: 0 14px 30px rgba(50, 92, 147, 0.22);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

   .ticket-create-btn:hover {
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(50, 92, 147, 0.28);
   }

   .ticket-create-btn img {
      width: 18px;
      filter: brightness(0) invert(1);
   }

/* ==========================================================================
   NOTIFICATIONS PAGE
   ========================================================================== */

.notifications-page__title {
   color: #ffffff;
   font-size: clamp(1.8rem, 2.5vw, 2.6rem);
   font-weight: 800;
   letter-spacing: -0.03em;
}

.notifications-page__subtitle {
   color: rgba(255, 255, 255, 0.75);
}

.notifications-panel {
   max-width: 1180px;
   margin: 0 auto;
   padding: 1.25rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
}

.notifications-tabs .nav-link {
   border-radius: 999px;
   padding: 0.75rem 1.25rem;
   color: var(--azul-primario);
   font-weight: 700;
}

   .notifications-tabs .nav-link.active {
      background: linear-gradient(135deg, var(--azul-primario), var(--azul-secundario));
      color: #ffffff;
   }

.notifications-content {
   border-radius: 18px;
   overflow: hidden;
}

/* ==========================================================================
   NOTIFICATIONS TABLE
   ========================================================================== */

.notifications-table {
   margin-bottom: 0;
}

   .notifications-table thead th {
      font-weight: 800;
   }

.notifications-folio {
   color: var(--azul-primario);
}

.notifications-comment {
   line-height: 1.45;
}

.notifications-date {
   font-weight: 600;
   color: #4b5563;
}

.notifications-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
}

.notifications-action-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   border: 0;
   border-radius: 999px;
   padding: 0.45rem 0.8rem;
   font-size: 0.85rem;
   font-weight: 700;
   text-decoration: none;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

   .notifications-action-btn:hover {
      transform: translateY(-1px);
      text-decoration: none;
   }

.notifications-action-btn--success {
   background: rgba(25, 135, 84, 0.12);
   color: #198754;
   border: 1px solid rgba(25, 135, 84, 0.25);
}

.notifications-action-btn--primary {
   background: linear-gradient(135deg, var(--azul-primario), var(--azul-secundario));
   color: #ffffff;
}

   .notifications-action-btn--primary:hover {
      color: #ffffff;
   }

.notifications-read-badge {
   display: inline-flex;
   align-items: center;
   padding: 0.45rem 0.75rem;
   border-radius: 999px;
   background: #eef2f7;
   color: #64748b;
   font-weight: 700;
   font-size: 0.85rem;
}

.notifications-empty {
   padding: 2rem !important;
   color: #64748b;
   font-weight: 600;
}

/* ==========================================================================
   SUPERADMIN LAYOUT
   ========================================================================== */

.superadmin-layout {
   height: 100vh;
   overflow: hidden;
   min-height: 100vh;
   display: grid;
   grid-template-columns: 280px 1fr;
   background: linear-gradient(135deg, #325C93 0%, #1f78d1 100%);
}

.superadmin-sidebar {
   position: sticky;
   top: 0;
   height: 100vh;
   display: flex;
   flex-direction: column;
   background: linear-gradient(180deg, #325C93 0%, #1f4f91 100%);
   color: #ffffff;
   padding: 1.5rem 1rem;
   box-shadow: 12px 0 30px rgba(0, 0, 0, 0.12);
   z-index: 20;
}

.superadmin-brand {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0.75rem 0 1.5rem;
   margin-bottom: 1rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

   .superadmin-brand img {
      max-width: 170px;
      height: auto;
   }

.superadmin-menu {
   flex: 1;
   overflow-y: auto;
   padding-right: 0.25rem;
}

.superadmin-menu-item {
   margin-bottom: 0.45rem;
}

.superadmin-menu-toggle {
   width: 100%;
   border: 0;
   border-radius: 16px;
   background: transparent;
   color: rgba(255, 255, 255, 0.88);
   display: grid;
   grid-template-columns: 34px 1fr auto;
   align-items: center;
   gap: 0.75rem;
   padding: 0.85rem 0.9rem;
   font-weight: 700;
   text-align: left;
   transition: background-color 0.2s ease, color 0.2s ease;
}

   .superadmin-menu-toggle:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
   }

.superadmin-menu-icon {
   width: 34px;
   height: 34px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.12);
}

   .superadmin-menu-icon img {
      width: 22px;
      height: 22px;
      object-fit: contain;
      filter: brightness(0) invert(1);
   }

.superadmin-menu-text {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.superadmin-menu-chevron {
   font-size: 0.75rem;
   opacity: 0.75;
}

.superadmin-submenu {
   padding: 0.35rem 0 0.35rem 3.2rem;
}

.superadmin-submenu-link {
   display: block;
   padding: 0.55rem 0.75rem;
   border-radius: 12px;
   color: rgba(255, 255, 255, 0.72);
   text-decoration: none;
   font-weight: 600;
   font-size: 0.94rem;
}

   .superadmin-submenu-link:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.1);
   }

.superadmin-sidebar-footer {
   padding-top: 1rem;
   border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.superadmin-logout {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0.8rem 1rem;
   border-radius: 999px;
   background: #f45b42;
   color: #ffffff;
   text-decoration: none;
   font-weight: 800;
}

   .superadmin-logout:hover {
      color: #ffffff;
      background: #e14c34;
   }

.superadmin-shell {
   min-width: 0;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   background: transparent;
   min-height: 0;
   height: 100vh;
   overflow: hidden;
}

.superadmin-topbar {
   height: 86px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 0 2rem;
   background: rgba(255,255,255,0.08);
   border-bottom: 1px solid rgba(255,255,255,0.12);
   box-shadow: none;
   position: sticky;
   top: 0;
   z-index: 10;
}

.superadmin-eyebrow {
   font-size: 0.78rem;
   font-weight: 800;
   color: rgba(255,255,255,0.7);
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.superadmin-welcome {
   color: #ffffff;
   font-size: 1.45rem;
   font-weight: 700;
}

.superadmin-actions {
   display: flex;
   align-items: center;
   gap: 1.25rem;
}

.superadmin-notifications {
   position: relative;
   color: var(--azul-primario);
   font-size: 1.1rem;
}

.superadmin-notification-badge {
   position: absolute;
   top: -10px;
   right: -12px;
   min-width: 20px;
   height: 20px;
   padding: 0 6px;
   border-radius: 999px;
   background: #dc3545;
   color: #ffffff;
   font-size: 0.7rem;
   font-weight: 800;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.superadmin-content {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   padding: 2rem;
   background: transparent;
}

.superadmin-footer {
   min-height: 96px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 1rem 0;
   background: var(--fondo-footer) !important;
   border-top: 0;
   color: #64748b;
   font-weight: 600;
   flex-shrink: 0;
}

.superadmin-footer-logo {
   max-height: 45px;
   width: auto;
}

.superadmin-mobile-toggle {
   display: none;
}

@media (max-width: 991.98px) {
   .superadmin-layout {
      grid-template-columns: 1fr;
   }

   .superadmin-sidebar {
      position: fixed;
      left: 0;
      top: 0;
      width: 280px;
      transform: translateX(-100%);
   }

   .superadmin-mobile-toggle {
      display: inline-flex;
      border: 0;
      background: transparent;
      color: var(--azul-primario);
      font-size: 1.25rem;
   }

   .superadmin-content {
      padding: 1.25rem;
   }
}

.superadmin-sidebar-overlay {
   display: none;
}

.superadmin-language,
.superadmin-language a,
.superadmin-notifications {
   color: #ffffff;
}

@media (max-width: 991.98px) {
   .superadmin-sidebar {
      transition: transform 0.25s ease;
   }

   body.superadmin-sidebar-open .superadmin-sidebar {
      transform: translateX(0);
   }

   body.superadmin-sidebar-open .superadmin-sidebar-overlay {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.55);
      z-index: 15;
   }
}

/* ==========================================================================
   USER ACCESS STATUS
   ========================================================================== */

.user-access-title {
   color: #ffffff;
   font-size: clamp(1.8rem, 2.5vw, 2.6rem);
   font-weight: 800;
   letter-spacing: -0.03em;
}

.user-access-subtitle {
   color: rgba(255, 255, 255, 0.75);
}

.user-access-panel {
   max-width: 1180px;
   margin: 0 auto;
   padding: 1.25rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
}

.user-access-tabs .nav-link {
   border-radius: 999px;
   padding: 0.75rem 1.25rem;
   color: var(--azul-primario);
   font-weight: 800;
}

   .user-access-tabs .nav-link.active {
      background: linear-gradient(135deg, var(--azul-primario), var(--azul-secundario));
      color: #ffffff;
   }

.user-access-loader {
   min-height: 180px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #64748b;
   font-weight: 700;
}

/*
   Active User
*/
.user-access-table-scroll {
   width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
   border-radius: 18px;
}

.user-access-table-section .dataTables_wrapper {
   width: 100%;
}

.user-access-table-section table.dataTable {
   width: 100% !important;
   min-width: 1100px;
}

.user-access-table-section .dataTables_filter input {
   max-width: 220px;
}
.user-access-table-title {
   color: var(--azul-primario);
   font-size: 1.35rem;
   font-weight: 800;
}

.user-access-action-btn {
   border: 0;
   border-radius: 999px;
   padding: 0.5rem 0.85rem;
   font-size: 0.85rem;
   font-weight: 800;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

   .user-access-action-btn:hover {
      transform: translateY(-1px);
   }

.user-access-action-btn--danger {
   background: rgba(220, 53, 69, 0.12);
   color: #dc3545;
   border: 1px solid rgba(220, 53, 69, 0.22);
}

.user-access-status-badge {
   display: inline-flex;
   align-items: center;
   padding: 0.45rem 0.75rem;
   border-radius: 999px;
   font-size: 0.85rem;
   font-weight: 800;
}

.user-access-status-badge--active {
   background: rgba(25, 135, 84, 0.12);
   color: #198754;
}

/* SUCCESS BUTTON (UNLOCK) */
.user-access-action-btn--success {
   background: rgba(25, 135, 84, 0.12);
   color: #198754;
   border: 1px solid rgba(25, 135, 84, 0.25);
}

/* BLOCKED BADGE */
.user-access-status-badge--blocked {
   background: rgba(220, 53, 69, 0.12);
   color: #dc3545;
}

/* =========================
   HOLIDAYS PAGE
========================= */

.holiday-title {
   color: #ffffff;
   font-size: clamp(1.8rem, 2.5vw, 2.6rem);
   font-weight: 800;
}

.holiday-subtitle {
   color: rgba(255,255,255,0.75);
}

.holiday-panel {
   max-width: 1100px;
   margin: 0 auto;
   padding: 1.5rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

/* BOTONES */

.holiday-action-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 0;
   transition: all 0.2s ease;
   margin-right: 6px;
}

   .holiday-action-btn img {
      width: 18px;
   }

.holiday-action-btn--edit {
   background: rgba(13,110,253,0.12);
}

.holiday-action-btn--delete {
   background: rgba(220,53,69,0.12);
}

.holiday-action-btn:hover {
   transform: translateY(-2px);
}

/* BOTÓN ADD */

.holiday-add-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: linear-gradient(135deg, #325C93, #1f78d1);
   box-shadow: 0 10px 25px rgba(0,0,0,0.2);
   transition: transform 0.2s ease;
}

   .holiday-add-btn img {
      width: 22px;
      filter: brightness(0) invert(1);
   }

   .holiday-add-btn:hover {
      transform: scale(1.08);
   }

/* ==========================================================================
   HOLIDAY CRUD
   ========================================================================== */

.holiday-crud-card {
   max-width: 620px;
   padding: 2rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

.holiday-crud-title {
   color: var(--azul-primario);
   font-size: clamp(1.7rem, 2.3vw, 2.3rem);
   font-weight: 800;
   letter-spacing: -0.03em;
}

.holiday-crud-actions {
   display: flex;
   justify-content: center;
   gap: 1rem;
   margin-top: 1rem;
}

.holiday-crud-btn {
   width: 58px;
   height: 58px;
   border-radius: 18px;
   border: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

   .holiday-crud-btn img {
      width: 22px;
      filter: brightness(0) invert(1);
   }

   .holiday-crud-btn:hover {
      transform: translateY(-2px);
   }

.holiday-crud-btn--save {
   background: linear-gradient(135deg, #325C93, #1f78d1);
   box-shadow: 0 12px 28px rgba(50, 92, 147, 0.24);
}

.holiday-crud-btn--cancel {
   background: #dc3545;
   box-shadow: 0 12px 28px rgba(220, 53, 69, 0.22);
}

/*
   Tickets Status
*/
.ticket-status-panel {
   max-width: 900px;
   margin: 0 auto;
   padding: 1.5rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

.ticket-status-title {
   color: #ffffff;
   font-weight: 800;
   font-size: clamp(1.8rem, 2.5vw, 2.4rem);
}

.ticket-status-subtitle {
   color: rgba(255,255,255,0.75);
}

/* BOTONES */

.ticket-status-btn {
   width: 36px;
   height: 36px;
   border-radius: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-right: 0.35rem;
   transition: transform 0.2s ease, background-color 0.2s ease;
}

   .ticket-status-btn img {
      width: 16px;
   }

   .ticket-status-btn:hover {
      transform: translateY(-2px);
   }

.ticket-status-btn--edit {
   background: rgba(50, 92, 147, 0.12);
}

.ticket-status-btn--delete {
   background: rgba(220, 53, 69, 0.12);
}

.ticket-status-btn--edit img {
   filter: invert(30%) sepia(32%) saturate(1060%) hue-rotate(176deg) brightness(90%);
}

.ticket-status-btn--delete img {
   filter: invert(29%) sepia(80%) saturate(2286%) hue-rotate(337deg) brightness(92%);
}

/* ADD */

.ticket-status-add-btn {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #325C93, #1f78d1);
   box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

   .ticket-status-add-btn img {
      width: 22px;
      filter: brightness(0) invert(1);
   }

/* ==========================================================================
   APP DATA TABLE - PREMIUM OVERRIDE
   ========================================================================== */

.app-data-table-wrap {
   border-radius: 18px;
   overflow: hidden;
   border: 1px solid rgba(50, 92, 147, 0.10);
}

.app-data-table {
   margin-bottom: 0 !important;
   border-collapse: separate !important;
   border-spacing: 0 !important;
}

   .app-data-table thead th {
      background: #eef4fb !important;
      color: var(--azul-primario) !important;
      font-weight: 800 !important;
      border: 0 !important;
      padding: 0.9rem 1rem !important;
   }

   .app-data-table tbody td {
      padding: 0.9rem 1rem !important;
      border-color: rgba(50, 92, 147, 0.08) !important;
      background: #ffffff !important;
   }

   .app-data-table.table-striped tbody tr:nth-of-type(odd) td {
      background: #f7faff !important;
   }

   .app-data-table tbody tr:hover td {
      background: #edf5ff !important;
   }

.dataTables_wrapper .dt-buttons .dt-button {
   border-radius: 10px !important;
   border: 1px solid rgba(50, 92, 147, 0.16) !important;
   background: #ffffff !important;
   color: var(--azul-primario) !important;
   font-weight: 700 !important;
   padding: 0.55rem 0.9rem !important;
}

.dataTables_wrapper .dataTables_filter input {
   border-radius: 10px !important;
   border: 1px solid rgba(50, 92, 147, 0.18) !important;
   padding: 0.45rem 0.75rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
   background: var(--azul-primario) !important;
   color: #ffffff !important;
   border-radius: 10px !important;
   border: 0 !important;
}

/* ==========================================================================
   TICKET STATUS CRUD
   ========================================================================== */

.ticket-status-crud-card {
   max-width: 620px;
   padding: 2rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

.ticket-status-crud-title {
   color: var(--azul-primario);
   font-size: clamp(1.7rem, 2.3vw, 2.3rem);
   font-weight: 800;
   letter-spacing: -0.03em;
}

.ticket-status-crud-actions {
   display: flex;
   justify-content: center;
   gap: 1rem;
   margin-top: 1rem;
}

.ticket-status-crud-btn {
   width: 58px;
   height: 58px;
   border-radius: 18px;
   border: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

   .ticket-status-crud-btn img {
      width: 22px;
      filter: brightness(0) invert(1);
   }

   .ticket-status-crud-btn:hover {
      transform: translateY(-2px);
   }

.ticket-status-crud-btn--save {
   background: linear-gradient(135deg, var(--azul-primario), var(--azul-secundario));
   box-shadow: 0 12px 28px rgba(50, 92, 147, 0.24);
}

.ticket-status-crud-btn--cancel {
   background: #dc3545;
   box-shadow: 0 12px 28px rgba(220, 53, 69, 0.22);
}

/* ==========================================================================
   TICKET STATUS COLOR INDEX
   ========================================================================== */

.ticket-status-color-panel {
   max-width: 980px;
   margin: 0 auto;
   padding: 1.5rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

.ticket-status-color-title {
   color: #ffffff;
   font-weight: 800;
   font-size: clamp(1.8rem, 2.5vw, 2.4rem);
}

.ticket-status-color-subtitle {
   color: rgba(255,255,255,0.75);
}

.ticket-status-color-btn {
   width: 36px;
   height: 36px;
   border-radius: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-right: 0.35rem;
   transition: transform 0.2s ease, background-color 0.2s ease;
}

   .ticket-status-color-btn img {
      width: 16px;
   }

   .ticket-status-color-btn:hover {
      transform: translateY(-2px);
   }

.ticket-status-color-btn--edit {
   background: rgba(50, 92, 147, 0.12);
}

.ticket-status-color-btn--delete {
   background: rgba(220, 53, 69, 0.12);
}

.ticket-status-color-btn--edit img {
   filter: invert(30%) sepia(32%) saturate(1060%) hue-rotate(176deg) brightness(90%);
}

.ticket-status-color-btn--delete img {
   filter: invert(29%) sepia(80%) saturate(2286%) hue-rotate(337deg) brightness(92%);
}

.ticket-status-color-code {
   display: inline-flex;
   align-items: center;
   padding: 0.45rem 0.75rem;
   border-radius: 999px;
   background: #eef4fb;
   color: var(--azul-primario);
   font-weight: 800;
   font-size: 0.85rem;
}

.ticket-status-color-swatch {
   width: 42px;
   height: 28px;
   border-radius: 999px;
   display: inline-block;
   background: var(--status-color);
   border: 2px solid rgba(15, 23, 42, 0.12);
   box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}

.ticket-status-color-add-btn {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #325C93, #1f78d1);
   box-shadow: 0 10px 25px rgba(0,0,0,0.2);
   transition: transform 0.2s ease;
}

   .ticket-status-color-add-btn:hover {
      transform: scale(1.08);
   }

   .ticket-status-color-add-btn img {
      width: 22px;
      filter: brightness(0) invert(1);
   }

.ticket-status-color-crud-card {
   max-width: 620px;
   padding: 2rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

.ticket-status-color-crud-title {
   color: var(--azul-primario);
   font-size: clamp(1.7rem, 2.3vw, 2.3rem);
   font-weight: 800;
   letter-spacing: -0.03em;
}

.ticket-status-color-picker {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0.75rem;
   background: #f8fbff;
   border: 1px solid rgba(50,92,147,0.12);
   border-radius: 16px;
}

.ticket-status-color-input {
   width: 58px;
   height: 44px;
   border: 0;
   background: transparent;
   cursor: pointer;
}

.ticket-status-color-picker-label {
   color: #64748b;
   font-weight: 700;
}

.ticket-status-color-crud-actions {
   display: flex;
   justify-content: center;
   gap: 1rem;
   margin-top: 1rem;
}

.ticket-status-color-crud-btn {
   width: 58px;
   height: 58px;
   border-radius: 18px;
   border: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

   .ticket-status-color-crud-btn img {
      width: 22px;
      filter: brightness(0) invert(1);
   }

   .ticket-status-color-crud-btn:hover {
      transform: translateY(-2px);
   }

.ticket-status-color-crud-btn--save {
   background: linear-gradient(135deg, var(--azul-primario), var(--azul-secundario));
   box-shadow: 0 12px 28px rgba(50, 92, 147, 0.24);
}

.ticket-status-color-crud-btn--cancel {
   background: #dc3545;
   box-shadow: 0 12px 28px rgba(220, 53, 69, 0.22);
}

/* ==========================================================================
   RESPONSE TIME INDEX
   ========================================================================== */

.response-time-panel {
   max-width: 980px;
   margin: 0 auto;
   padding: 1.5rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

.response-time-title {
   color: #ffffff;
   font-weight: 800;
   font-size: clamp(1.8rem, 2.5vw, 2.4rem);
}

.response-time-subtitle {
   color: rgba(255,255,255,0.75);
}

.response-time-btn {
   width: 36px;
   height: 36px;
   border-radius: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-right: 0.35rem;
   transition: transform 0.2s ease;
}

   .response-time-btn img {
      width: 16px;
   }

   .response-time-btn:hover {
      transform: translateY(-2px);
   }

.response-time-btn--edit {
   background: rgba(50, 92, 147, 0.12);
}

.response-time-btn--delete {
   background: rgba(220, 53, 69, 0.12);
}

.response-time-btn--edit img {
   filter: invert(30%) sepia(32%) saturate(1060%) hue-rotate(176deg) brightness(90%);
}

.response-time-btn--delete img {
   filter: invert(29%) sepia(80%) saturate(2286%) hue-rotate(337deg) brightness(92%);
}

.response-time-hours {
   display: inline-flex;
   align-items: center;
   padding: 0.45rem 0.75rem;
   border-radius: 999px;
   background: #eef4fb;
   color: var(--azul-primario);
   font-weight: 800;
   font-size: 0.85rem;
}

.response-time-add-btn {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #325C93, #1f78d1);
   box-shadow: 0 10px 25px rgba(0,0,0,0.2);
   transition: transform 0.2s ease;
}

   .response-time-add-btn:hover {
      transform: scale(1.08);
   }

   .response-time-add-btn img {
      width: 22px;
      filter: brightness(0) invert(1);
   }

/* ==========================================================================
   RESPONSE TIME CRUD
   ========================================================================== */

.response-time-crud-card {
   max-width: 620px;
   padding: 2rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

.response-time-crud-title {
   color: var(--azul-primario);
   font-size: clamp(1.7rem, 2.3vw, 2.3rem);
   font-weight: 800;
   letter-spacing: -0.03em;
}

.response-time-crud-actions {
   display: flex;
   justify-content: center;
   gap: 1rem;
   margin-top: 1rem;
}

.response-time-crud-btn {
   width: 58px;
   height: 58px;
   border-radius: 18px;
   border: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

   .response-time-crud-btn img {
      width: 22px;
      filter: brightness(0) invert(1);
   }

   .response-time-crud-btn:hover {
      transform: translateY(-2px);
   }

.response-time-crud-btn--save {
   background: linear-gradient(135deg, var(--azul-primario), var(--azul-secundario));
   box-shadow: 0 12px 28px rgba(50, 92, 147, 0.24);
}

.response-time-crud-btn--cancel {
   background: #dc3545;
   box-shadow: 0 12px 28px rgba(220, 53, 69, 0.22);
}

/* ==========================================================================
   PROBLEM PARAMETER INDEX
   ========================================================================== */

.problem-parameter-panel {
   max-width: 980px;
   margin: 0 auto;
   padding: 1.5rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

.problem-parameter-title {
   color: #ffffff;
   font-weight: 800;
   font-size: clamp(1.8rem, 2.5vw, 2.4rem);
}

.problem-parameter-subtitle {
   color: rgba(255,255,255,0.75);
}

.problem-parameter-btn {
   width: 36px;
   height: 36px;
   border-radius: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-right: 0.35rem;
   transition: transform 0.2s ease;
}

   .problem-parameter-btn img {
      width: 16px;
   }

   .problem-parameter-btn:hover {
      transform: translateY(-2px);
   }

.problem-parameter-btn--edit {
   background: rgba(50, 92, 147, 0.12);
}

.problem-parameter-btn--delete {
   background: rgba(220, 53, 69, 0.12);
}

.problem-parameter-btn--edit img {
   filter: invert(30%) sepia(32%) saturate(1060%) hue-rotate(176deg) brightness(90%);
}

.problem-parameter-btn--delete img {
   filter: invert(29%) sepia(80%) saturate(2286%) hue-rotate(337deg) brightness(92%);
}

.problem-parameter-add-btn {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, var(--azul-primario), var(--azul-secundario));
   box-shadow: 0 10px 25px rgba(0,0,0,0.2);
   transition: transform 0.2s ease;
}

   .problem-parameter-add-btn:hover {
      transform: scale(1.08);
   }

   .problem-parameter-add-btn img {
      width: 22px;
      filter: brightness(0) invert(1);
   }
/* ==========================================================================
   PROBLEM PARAMETER CRUD
   ========================================================================== */
.problem-parameter-crud-card {
   max-width: 680px;
   padding: 2rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

.problem-parameter-crud-title {
   color: var(--azul-primario);
   font-size: clamp(1.7rem, 2.3vw, 2.3rem);
   font-weight: 800;
   letter-spacing: -0.03em;
}

.problem-parameter-crud-actions {
   display: flex;
   justify-content: center;
   gap: 1rem;
   margin-top: 1rem;
}

.problem-parameter-crud-btn {
   width: 58px;
   height: 58px;
   border-radius: 18px;
   border: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

   .problem-parameter-crud-btn img {
      width: 22px;
      filter: brightness(0) invert(1);
   }

   .problem-parameter-crud-btn:hover {
      transform: translateY(-2px);
   }

.problem-parameter-crud-btn--save {
   background: linear-gradient(135deg, var(--azul-primario), var(--azul-secundario));
   box-shadow: 0 12px 28px rgba(50, 92, 147, 0.24);
}

.problem-parameter-crud-btn--cancel {
   background: #dc3545;
   box-shadow: 0 12px 28px rgba(220, 53, 69, 0.22);
}
/* ==========================================================================
   FREQUENT PROBLEM INDEX
   ========================================================================== */

.frequent-problem-panel {
   max-width: 980px;
   margin: 0 auto;
   padding: 1.5rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

.frequent-problem-title {
   color: #ffffff;
   font-weight: 800;
   font-size: clamp(1.8rem, 2.5vw, 2.4rem);
}

.frequent-problem-subtitle {
   color: rgba(255,255,255,0.75);
}

.frequent-problem-btn {
   width: 36px;
   height: 36px;
   border-radius: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-right: 0.35rem;
   transition: transform 0.2s ease;
}

   .frequent-problem-btn img {
      width: 16px;
   }

   .frequent-problem-btn:hover {
      transform: translateY(-2px);
   }

.frequent-problem-btn--edit {
   background: rgba(50, 92, 147, 0.12);
}

.frequent-problem-btn--delete {
   background: rgba(220, 53, 69, 0.12);
}

.frequent-problem-btn--edit img {
   filter: invert(30%) sepia(32%) saturate(1060%) hue-rotate(176deg) brightness(90%);
}

.frequent-problem-btn--delete img {
   filter: invert(29%) sepia(80%) saturate(2286%) hue-rotate(337deg) brightness(92%);
}

.frequent-problem-add-btn {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, var(--azul-primario), var(--azul-secundario));
   box-shadow: 0 10px 25px rgba(0,0,0,0.2);
   transition: transform 0.2s ease;
}

   .frequent-problem-add-btn:hover {
      transform: scale(1.08);
   }

   .frequent-problem-add-btn img {
      width: 22px;
      filter: brightness(0) invert(1);
   }

/* ==========================================================================
   FREQUENT PROBLEM INDEX
   ========================================================================== */
.frequent-problem-crud-card {
   max-width: 620px;
   padding: 2rem;
   background: #ffffff;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

.frequent-problem-crud-title {
   color: var(--azul-primario);
   font-size: clamp(1.7rem, 2.3vw, 2.3rem);
   font-weight: 800;
   letter-spacing: -0.03em;
}

.frequent-problem-crud-actions {
   display: flex;
   justify-content: center;
   gap: 1rem;
   margin-top: 1rem;
}

.frequent-problem-crud-btn {
   width: 58px;
   height: 58px;
   border-radius: 18px;
   border: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

   .frequent-problem-crud-btn img {
      width: 22px;
      filter: brightness(0) invert(1);
   }

   .frequent-problem-crud-btn:hover {
      transform: translateY(-2px);
   }

.frequent-problem-crud-btn--save {
   background: linear-gradient(135deg, var(--azul-primario), var(--azul-secundario));
   box-shadow: 0 12px 28px rgba(50, 92, 147, 0.24);
}

.frequent-problem-crud-btn--cancel {
   background: #dc3545;
   box-shadow: 0 12px 28px rgba(220, 53, 69, 0.22);
}
/* ==========================================================================
   Change Email INDEX
   ========================================================================== */
.supplier-email-action-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   padding: 0.5rem 0.85rem;
   border-radius: 999px;
   background: rgba(50, 92, 147, 0.12);
   color: var(--azul-primario);
   font-weight: 800;
   font-size: 0.85rem;
   text-decoration: none;
   transition: transform 0.2s ease, background-color 0.2s ease;
}

   .supplier-email-action-btn:hover {
      background: var(--azul-primario);
      color: #ffffff;
      transform: translateY(-1px);
   }

/* ==========================================================================
   Session Query INDEX
   ========================================================================== */
.session-query-filters {
   position: sticky;
   top: 1rem;
}

.session-query-filter-card {
   background: #ffffff;
   border-radius: 24px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.14);
   overflow: hidden;
}

.session-query-filter-header {
   padding: 1rem 1.25rem;
   background: #eef4fb;
   color: var(--azul-primario);
}

   .session-query-filter-header h2 {
      margin: 0;
      font-size: 1rem;
      font-weight: 800;
   }

.session-query-company-list {
   max-height: 58vh;
   overflow-y: auto;
   padding: 0.75rem;
}

.session-query-company-item {
   display: block;
   padding: 0.75rem 0.9rem;
   border-radius: 14px;
   color: #334155;
   text-decoration: none;
   font-weight: 700;
}

   .session-query-company-item:hover {
      background: rgba(50, 92, 147, 0.1);
      color: var(--azul-primario);
   }

.session-query-check {
   padding: 1.25rem;
   font-weight: 700;
}

.session-query-percentage {
   display: inline-flex;
   padding: 0.75rem 1rem;
   border-radius: 999px;
   background: #eef4fb;
   color: var(--azul-primario);
   font-weight: 800;
}

.session-query-status {
   display: inline-flex;
   padding: 0.4rem 0.75rem;
   border-radius: 999px;
   background: rgba(25,135,84,0.12);
   color: #198754;
   font-weight: 800;
}

/*
   KPI DASHBOARD
*/
.kpi-filter-panel {
   border-radius: 28px;
   background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
   border: 1px solid rgba(15,23,42,.06);
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(15,23,42,.06), 0 2px 10px rgba(15,23,42,.04);
}

.kpi-filter-panel__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.5rem 2rem;
   border-bottom: 1px solid rgba(15,23,42,.06);
   background: linear-gradient(135deg, rgba(50,92,147,.08), rgba(255,255,255,.35));
}

.kpi-filter-panel__title {
   font-size: 1.35rem;
   font-weight: 700;
   color: #1e293b;
}

.kpi-filter-panel__subtitle {
   color: #64748b;
   font-size: .95rem;
}

.kpi-filter-panel__icon {
   width: 52px;
   height: 52px;
   border-radius: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #325c93, #4f8cff);
   color: white;
   font-size: 1.15rem;
   box-shadow: 0 10px 24px rgba(50,92,147,.25);
}

.kpi-filter-panel__body {
   padding: 2rem;
}

.kpi-filter-panel__actions {
   display: flex;
   gap: 1rem;
   justify-content: flex-end;
   flex-wrap: wrap;
}

.kpi-filter-panel__info {
   display: flex;
   gap: 1rem;
   align-items: flex-start;
   padding: 1rem 1.25rem;
   border-radius: 18px;
   background: rgba(59,130,246,.08);
   border: 1px solid rgba(59,130,246,.12);
   color: #1e3a8a;
   font-size: .95rem;
}

.kpi-filter-panel__info-icon {
   width: 34px;
   height: 34px;
   border-radius: 12px;
   background: #3b82f6;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.kpi-filter-panel__tooltip {
   color: #325c93;
   cursor: pointer;
   transition: .2s ease;
}

   .kpi-filter-panel__tooltip:hover {
      transform: scale(1.08);
   }

.kpi-dashboard-header {
   color: #ffffff;
}

.kpi-dashboard-eyebrow {
   font-size: .8rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .08em;
   opacity: .75;
}

.kpi-dashboard-title {
   font-size: clamp(1.8rem, 2.5vw, 2.6rem);
   font-weight: 800;
   letter-spacing: -.03em;
}

.kpi-group-title {
   color: #ffffff;
   font-size: 1.05rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .03em;
   margin-bottom: 1rem;
}

.kpi-card {
   position: relative;
   height: 100%;
   padding: 1.5rem;
   border-radius: 24px;
   background: rgba(255,255,255,.96);
   border: 1px solid rgba(255,255,255,.45);
   box-shadow: 0 18px 40px rgba(15,23,42,.12);
   overflow: hidden;
}

   .kpi-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 6px;
      background: var(--kpi-accent);
   }

.kpi-card--info {
   --kpi-accent: #325c93;
}

.kpi-card--success {
   --kpi-accent: #198754;
}

.kpi-card--warning {
   --kpi-accent: #f59e0b;
}

.kpi-card__label {
   display: block;
   margin-bottom: .75rem;
   color: #64748b;
   font-size: .78rem;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: .06em;
}

.kpi-card__value {
   display: block;
   margin-bottom: .65rem;
   color: #0f172a;
   font-size: clamp(2rem, 4vw, 3.2rem);
   font-weight: 900;
   line-height: 1;
}

.kpi-card__description {
   margin: 0;
   color: #64748b;
   font-size: .95rem;
   font-weight: 600;
}
.kpi-section-header {
   color: #ffffff;
}

.kpi-chart-card {
   height: 100%;
   border-radius: 28px;
   background: rgba(255,255,255,.96);
   border: 1px solid rgba(255,255,255,.45);
   box-shadow: 0 18px 40px rgba(15,23,42,.12);
   overflow: hidden;
}

.kpi-chart-card__header {
   padding: 1.25rem 1.5rem;
   border-bottom: 1px solid rgba(15,23,42,.06);
   background: linear-gradient(135deg, rgba(50,92,147,.08), rgba(255,255,255,.35));
}

   .kpi-chart-card__header h3 {
      margin: 0;
      color: #1e293b;
      font-size: 1rem;
      font-weight: 900;
   }

.kpi-chart-card__body {
   padding: 1.5rem;
}

.chart-box-kpi {
   position: relative;
   min-height: 320px;
}

   .chart-box-kpi canvas {
      width: 100% !important;
      height: 320px !important;
   }

.kpi-chart-card__note {
   display: flex;
   gap: .85rem;
   align-items: flex-start;
   padding: 1rem;
   border-radius: 18px;
   background: rgba(59,130,246,.08);
   color: #1e3a8a;
   font-weight: 600;
   font-size: .92rem;
}

   .kpi-chart-card__note i {
      margin-top: .15rem;
      color: #3b82f6;
   }
.kpi-friction-section {
   position: relative;
}

.kpi-chart-subtitle {
   display: block;
   margin-top: .25rem;
   color: #64748b;
   font-size: .82rem;
   font-weight: 600;
}

.kpi-chart-icon {
   width: 52px;
   height: 52px;
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(59,130,246,.12);
   color: #2563eb;
   font-size: 1.1rem;
}

   .kpi-chart-icon.danger {
      background: rgba(239,68,68,.12);
      color: #dc2626;
   }

.kpi-chart-description {
   padding: 1rem 1.2rem;
   border-radius: 18px;
   background: rgba(15,23,42,.03);
   border: 1px solid rgba(15,23,42,.05);
}

   .kpi-chart-description p {
      color: #475569;
      font-size: .92rem;
      line-height: 1.6;
      font-weight: 500;
   }

.kpi-chart-loading {
   min-height: 260px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: row;
   color: #64748b;
   font-weight: 700;
}

.kpi-table-wrapper {
   border-radius: 18px;
   overflow: hidden;
   border: 1px solid rgba(15,23,42,.06);
}

   .kpi-table-wrapper table {
      margin-bottom: 0;
   }

   .kpi-table-wrapper thead {
      background: #325c93;
      color: #fff;
   }

      .kpi-table-wrapper thead th {
         border: none !important;
         font-size: .8rem;
         text-transform: uppercase;
         letter-spacing: .04em;
         padding: 1rem;
      }

   .kpi-table-wrapper tbody td {
      padding: 1rem;
      vertical-align: middle;
      border-color: rgba(15,23,42,.06);
   }

   .kpi-table-wrapper tbody tr:hover {
      background: rgba(59,130,246,.05);
   }
.chart-box-kpi--lg {
   min-height: 380px;
}

   .chart-box-kpi--lg canvas {
      height: 380px !important;
   }
.kpi-chart-legend {
   display: flex;
   flex-wrap: wrap;
   gap: .6rem;
   justify-content: center;
}
.kpi-chart-card__header--filters {
   gap: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
}

.kpi-pages-filter-wrap {
   display: flex;
   align-items: center;
   gap: .75rem;
   flex-wrap: wrap;
}

.kpi-filter-label {
   display: flex;
   align-items: center;
   color: #1e293b;
   font-size: .85rem;
   font-weight: 800;
   margin: 0;
   white-space: nowrap;
}

.kpi-filter-select {
   min-width: 320px;
   height: 46px;
   border-radius: 14px;
   border: 1px solid rgba(15,23,42,.08);
   background: rgba(255,255,255,.9);
   box-shadow: 0 4px 14px rgba(15,23,42,.05);
   font-weight: 600;
}

   .kpi-filter-select:focus {
      border-color: #325c93;
      box-shadow: 0 0 0 .2rem rgba(50,92,147,.15);
   }

.kpi-filter-info {
   width: 42px;
   height: 42px;
   border: none;
   border-radius: 12px;
   background: rgba(59,130,246,.12);
   color: #2563eb;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: .2s ease;
}

   .kpi-filter-info:hover {
      transform: translateY(-2px);
      background: rgba(59,130,246,.18);
   }
.kpi-chart-icon.success {
   background: rgba(25,135,84,.12);
   color: #198754;
}
.kpi-pivot-toggle {
   display: inline-flex;
   width: 22px;
   height: 22px;
   align-items: center;
   justify-content: center;
   margin-right: .4rem;
   border-radius: 8px;
   background: rgba(50,92,147,.12);
   color: var(--azul-primario);
   font-weight: 900;
   cursor: pointer;
}

.kpi-pivot-spacer {
   display: inline-block;
   width: 22px;
   margin-right: .4rem;
}

.kpi-pivot-label {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 700;
}

.kpi-pivot-detail {
   color: #64748b;
   font-size: .75rem;
   font-weight: 700;
}

.kpi-pivot-total {
   text-align: right;
   font-weight: 800;
}
.kpi-embudo-item {
   margin-bottom: 1rem;
}

.kpi-embudo-label {
   font-weight: 700;
   margin-bottom: .45rem;
   color: var(--azul-primario);
}

.kpi-embudo-wrap {
   width: 100%;
}

.kpi-embudo-bar {
   min-height: 44px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   color: #fff;
   box-shadow: 0 10px 25px rgba(15,23,42,.12);
}
.kpi-chart-legend-item {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   margin: .25rem .75rem .25rem 0;
   color: #334155;
   font-weight: 700;
   font-size: .9rem;
}

.kpi-chart-legend-dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   display: inline-block;
   flex-shrink: 0;
}

.admin-query-select-wrap {
   max-width: 520px;
   width: 100%;
}