:root{
    --app-navy:#27458f;
    --app-blue:#1f5fbf;
    --app-cyan:#6ab8ff;
    --app-bg:#edf2f8;
    --app-surface:#ffffff;
    --app-surface-soft:#f7f9fc;
    --app-border:#dfe7f2;
    --app-shadow:0 18px 40px rgba(33, 55, 98, .10);
    --app-shadow-soft:0 10px 25px rgba(33, 55, 98, .08);
    --app-radius:22px;

    --app-gradient:#27458f;
    --app-gradient-vertical:#27458f;
    --app-primary:#3f5bd1;
    --app-primary-dark:#2c3e91;
    --app-primary-light:#6faeff;
  }

  html, body{
    background:var(--app-bg) !important;
  }

  .app-nav-toggle,
  .app-nav-action{
    width:50px;
    height:40px;
    --bs-border-opacity:.1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    border:1px solid rgba(255,255,255,.16);
    border-radius:.7rem;
    background:rgba(31,75,160,.34);
    box-shadow:0 4px 12px rgba(15,23,42,.12);
    text-decoration:none;
  }

  .app-nav-toggle:hover,
  .app-nav-action:hover{
    color:#ffffff;
    background:rgba(31,75,160,.46);
    text-decoration:none;
  }

  .app-navbar-brand{
    color:#ffffff;
    font-weight:400;
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    line-height:1;
    white-space:nowrap;
  }

  .app-navbar-brand img{
    width:34px;
    height:auto;
    opacity:.72;
  }

  .app-navbar-brand small{
    color:rgba(255,255,255,.5);
    font-size:.82em;
    font-weight:400;
    opacity:1 !important;
  }

  .app-navbar-brand-compact{
    font-size:1.25rem !important;
    margin-left:.35rem !important;
    margin-right:.35rem !important;
  }

  body{
    color:#1b2430;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  .app-shell-row{
    min-height:100vh;
  }

  .app-sidebar-logo{
    width:30%;
  }

  .app-user-email{
    font-size:12px;
  }

  .app-shell-left{
    background:var(--app-gradient-vertical) !important;
    box-shadow:inset -1px 0 0 rgba(255,255,255,.18);
  }

  .app-main-col{
    background:transparent !important;
    padding-top:32px !important;
    padding-bottom:32px !important;
  }

  .dashboard-surface{
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:var(--app-shadow);
    border-radius:28px;
    padding:28px 16px 36px 16px;
    min-height:calc(100vh - 80px);
  }

  .apunte-surface{
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:var(--app-shadow);
    border-radius:28px;
    padding:20px 12px 28px 12px;
    min-height:calc(100vh - 80px);
  }

  .apunte-card{
    border:0;
    border-radius:1.1rem;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    background:#fff;
    overflow:hidden;
  }

  .apunte-hero{
    background:var(--app-navy);
    color:#fff;
    padding:1.1rem 1.2rem;
  }

  .apunte-title{
    font-size:1.05rem;
    font-weight:700;
    line-height:1.2;
    display:flex;
    align-items:center;
    gap:.75rem;
  }

  .apunte-title i{
    font-size:1.25rem;
  }

  .apunte-body{
    padding:1.1rem 1rem 1.25rem 1rem;
  }

  .section-card{
    border:0;
    border-radius:1rem;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
  }

  .section-title{
    font-size:.78rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#6c757d;
  }

  .info-card{
    background:#fff;
    border:1px solid #e7edf5;
    border-radius:1rem;
  }

  .info-card .list-group-item{
    border-left:0;
    border-right:0;
    padding:1rem 1.05rem;
  }

  .info-card .list-group-item:first-child{
    border-top:0;
  }

  .info-card .list-group-item:last-child{
    border-bottom:0;
  }

  .calc-row{
    padding:.95rem 0;
    border-bottom:1px solid #e9eef5;
  }

  .calc-row:last-child{
    border-bottom:0;
  }

  .calc-label{
    font-weight:500;
    color:#28303d;
  }

  .calc-input,
  .calc-select,
  .calc-result-input{
    border-radius:.85rem !important;
    min-height:48px;
  }

  .calc-result{
    border:1px solid #dfe7f2;
    border-radius:.9rem;
    background:#f8fafc;
    padding:.1rem .35rem;
  }

  .btn-calc-main{
    border-radius:1rem;
    padding:.8rem 1.15rem;
    font-weight:600;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
  }

  .toggle-pill{
    border-radius:999px;
  }

  .sticky-tools{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(8px);
    border-bottom:1px solid #e9ecef;
  }

  .footer-note{
    font-size:.82rem;
    color:#6c757d;
  }

  .dashboard-grid{
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2, minmax(140px, 170px));
    justify-content:center;
    gap:28px 28px;
  }

  .navbar{
    padding-top:0 !important;
  /* Instrucción que genera el marco a   background:var(--app-gradient) !important; */
  }

  .offcanvas,
  .bg-sidebar{
    background:transparent !important;
  }

  .offcanvas-body{
    color:#172132;
  }

  .offcanvas .list-group-item,
  .offcanvas .list-group-item-action{
    background:rgba(255,255,255,.88) !important;
    color:#1f2a37 !important;
    border:1px solid rgba(255,255,255,.52) !important;
    border-radius:16px !important;
    margin-bottom:10px;
    box-shadow:0 8px 20px rgba(20, 35, 68, .10);
    transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  }

  .offcanvas .list-group-item-action:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(20, 35, 68, .14);
    background:#fff !important;
  }

  .offcanvas .list-group-item-action:active{
    transform:translateY(0);
  }

  .offcanvas .list-group-item h6,
  .offcanvas .list-group-item,
  .offcanvas .list-group-item a{
    color:#1f2a37 !important;
  }

  .offcanvas .text-black-50{
    color:#667085 !important;
  }

  .offcanvas hr{
    opacity:.15;
    border-color:#10234d;
  }

  .navbar-brand,
  .navbar-brand small{
    color:#fff !important;
  }

  .navbar-brand .app-navbar-brand,
  a.navbar-brand .app-navbar-brand{
    font-weight:400 !important;
  }

  .navbar-brand .app-navbar-brand small,
  a.navbar-brand .app-navbar-brand small{
    color:rgba(255,255,255,.5) !important;
    font-weight:400 !important;
    font-size:.82em;
    padding-left:.01rem;
    opacity:1 !important;
  }

  .navbar-brand .app-navbar-brand img{
    opacity:.72;
  }

.btn-icon-topbar{
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.10) !important;
  box-shadow:0 8px 20px rgba(18,30,60,.12);
}

.btn-icon-topbar i{
  display:block !important;
  line-height:1 !important;
  margin:0 !important;
}

.app-mobile-nav-actions{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.app-mobile-title-slot{
  flex:1 1 auto;
  min-width:0;
  margin:0!important;
  justify-content:center;
  text-align:center;
}

.app-mobile-back-slot,
.app-mobile-notif-slot{
  flex:0 0 auto;
}

@media (min-width:576px){
  .app-mobile-nav-actions{
    display:block;
  }
}

.navbar .btn,
.navbar-toggler{
  min-height:40px;
}

  .btn-primary{
    background:var(--app-gradient) !important;
    border:none !important;
    box-shadow:0 8px 20px rgba(18,30,60,.12);
  }

  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active{
    background:var(--app-gradient) !important;
    border:none !important;
    filter:brightness(1.04);
  }

  .app-logo-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 14px;
    border-radius:18px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(4px);
  }

  .dashboard-tile{
    width:100%;
    aspect-ratio:1 / 1;
    border:0 !important;
    border-radius:26px !important;
    box-shadow:0 16px 28px rgba(17, 24, 39, .12) !important;
    display:flex !important;
    flex-direction:column;
    justify-content:center !important;
    align-items:center !important;
    gap:12px;
    text-align:center !important;
    padding:18px 14px !important;
    color:#ffffff !important;
    transition:transform .16s ease, box-shadow .16s ease;
  }

  .dashboard-tile:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 34px rgba(17, 24, 39, .16) !important;
  }

  .dashboard-tile i{
    display:block;
    color:inherit !important;
    margin:0 !important;
    line-height:1 !important;
    flex:0 0 auto;
  }

  .dashboard-tile .tile-label{
    width:100%;
    display:block;
    text-align:center !important;
    line-height:1.18;
    margin:0 !important;
    flex:0 0 auto;
    font-size:1rem;
  }

  .dashboard-tile.tile-gold{
    color:#4b3b1f !important;
  }

  .tile-green{
    background:#0a7d3d !important;
    color:#f6fbff !important;
  }

  .tile-blue{
    background:#0f63d8 !important;
    color:#f4f8ff !important;
  }

  .tile-gold{
    background:#e69500 !important;
    color:#4b3b1f !important;
  }

  .tile-red{
    background:#c82333 !important;
    color:#fff8f8 !important;
  }

  .tile-orange{
    background:#d94c00 !important;
    color:#fff8f2 !important;
  }

  .tile-purple{
    background:#5b00b3 !important;
    color:#faf7ff !important;
  }

  .tile-teal{
    background:#1f8a8c !important;
    color:#f5ffff !important;
  }

  .tile-magenta{
    background:#9e0059 !important;
    color:#fff7fb !important;
  }

  .tile-green i,
  .tile-blue i,
  .tile-red i,
  .tile-orange i,
  .tile-purple i,
  .tile-teal i,
  .tile-magenta i{
    color:rgba(255,255,255,.93) !important;
  }

  .tile-gold i{
    color:rgba(71,57,27,.85) !important;
  }

  .beta-pill{
    display:inline-block;
    margin-top:6px;
    padding:.16rem .42rem;
    font-size:.78rem;
    border-radius:999px;
    background:rgba(90, 20, 24, .78);
    color:#fff;
  }

  .input-group-text.bg-primary{
    background:var(--app-gradient) !important;
    border:none !important;
    color:#fff !important;
  }

  .login-pill,
  .pill{
    background:rgba(255,255,255,.16);
  }

  footer.bd-footer{
    background:rgba(255,255,255,.55) !important;
    border-top:1px solid var(--app-border);
    backdrop-filter:blur(6px);
  }

  footer.bd-footer h5{
    color:#1f2a37;
    font-weight:700;
  }

  footer.bd-footer a{
    color:#2453c6;
    text-decoration:none;
  }

  footer.bd-footer a:hover{
    text-decoration:underline;
  }

  @media (min-width: 768px){
    .dashboard-grid{
      grid-template-columns:repeat(2, minmax(155px, 180px));
      gap:34px 40px;
    }

    .dashboard-tile .tile-label{
      font-size:1rem;
    }
  }

  @media (min-width: 992px){
    .dashboard-grid{
      grid-template-columns:repeat(4, minmax(150px, 185px));
      max-width:980px;
      gap:40px 44px;
    }

    .dashboard-tile{
      border-radius:30px !important;
      gap:10px;
      padding:16px 12px !important;
    }

    .dashboard-tile i{
      font-size:2rem !important;
    }

    .dashboard-tile .tile-label{
      font-size:.92rem;
      line-height:1.15;
    }
  }

  @media (min-width: 1400px){
    .dashboard-grid{
      max-width:1080px;
      gap:46px 52px;
    }

    .dashboard-tile{
      border-radius:32px !important;
    }

    .dashboard-tile .tile-label{
      font-size:.96rem;
    }
  }

@media (max-width: 767.98px){
  .navbar-toggler{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    padding:0 !important;
  }

  .navbar{
    padding-top:0 !important;
  /* Instrucción que genera el marco a  background:var(--app-gradient) !important; */ 
  }

  .navbar-toggler i{
    display:block !important;
    line-height:1 !important;
    margin:0 !important;
    transform:translateY(1px);
  }
}


  @media (max-width: 549px){
    .app-main-col{
      padding-top:6px !important;
      padding-bottom:18px !important;
    }

    .app-shell-row{
      min-height:auto !important;
    }

    .app-shell-left{
      min-height:auto !important;
      height:auto !important;
    }

    .navbar{
      height:auto !important;
      min-height:unset !important;
    }

    .navbar .container-fluid{
      min-height:auto !important;
      height:auto !important;
      padding-top:8px !important;
      padding-bottom:7px !important;
    }

    .dashboard-surface{
      min-height:auto;
      padding:20px 10px 28px 10px;
      border-radius:0;
      box-shadow:none;
      border:0;
      background:transparent;
      backdrop-filter:none;
    }

    .apunte-surface{
      min-height:auto;
      padding:4px 0 20px 0;
      border-radius:0;
      box-shadow:none;
      border:0;
      background:transparent;
      backdrop-filter:none;
    }

    .apunte-card{
      border-radius:1rem;
    }

    .apunte-hero{
      padding:1rem 1rem;
    }

    .apunte-title{
      font-size:.98rem;
    }

    .apunte-body{
      padding:1rem;
    }

    .dashboard-grid{
      max-width:100%;
      grid-template-columns:repeat(2, minmax(135px, 170px));
      gap:26px 26px;
    }

    .dashboard-tile{
      border-radius:22px !important;
    }

    .dashboard-tile .tile-label{
      font-size:1rem;
    }

    .offcanvas-start,
    .offcanvas-end{
      background:var(--app-gradient-vertical) !important;
      max-height:100vh;
    }

    .offcanvas-body{
      overflow-y:auto;
      max-height:calc(100vh - 70px);
      -webkit-overflow-scrolling:touch;
      padding-bottom:2rem;
    }

      .navbar{
    padding-top:0 !important;
background:var(--app-gradient) !important; 
  }
  }

  @media (max-width: 350px){
    .dashboard-grid{
      grid-template-columns:repeat(2, minmax(125px, 150px));
      gap:20px 20px;
    }

    .offcanvas-start,
    .offcanvas-end{
      background:#27458f !important;
    }
  }

  .notif-unread{
  background:#eef4ff;
}

.notif-unread:hover{
  background:#e4edff;
}

.btn-icon-topbar{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.min-w-0{
  min-width:0;
}

.notif-dropdown{
  width:360px;
  max-width:calc(100vw - 24px);
  border:0;
  border-radius:24px;
  overflow:hidden;
  background:#f7f9fc;
  box-shadow:0 18px 42px rgba(0,0,0,.14);
  margin-top:10px;
}

.notif-dropdown-header{
  padding:20px 24px 16px 24px;
  background:#f7fbff;
  border-bottom:1px solid #cfd8e6;
}

.notif-dropdown-title{
  font-size:1.05rem;
  font-weight:800;
  color:#2d5fd3;
  line-height:1.2;
  margin-bottom:4px;
}

.notif-dropdown-subtitle{
  font-size:.92rem;
  color:#6b7280;
}

.notif-dropdown-body{
  max-height:360px;
  overflow:auto;
  background:#ffffff;
}

.notif-dropdown-footer{
  min-height:14px;
  background:#eef1f5;
  border-top:1px solid #d7dde7;
}

.notif-item{
  background:#ffffff;
  padding-left:20px !important;
  padding-right:20px !important;
  white-space:normal !important;
}

.notif-item:last-child{
  border-bottom:0 !important;
}

.notif-item .fw-semibold{
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.25;
}

.notif-mensaje{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:unset !important;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.35;
  max-width:100%;
}

#notif-empty-state{
  padding:22px 24px !important;
  color:#6b7280 !important;
  background:#ffffff;
}

.notif-dropdown .dropdown-item:active,
.notif-dropdown .dropdown-item:focus{
  background-color:inherit;
  color:inherit;
}

.notif-dropdown .btn{
  border-radius:12px;
}

.notif-dropdown-wrap{
  position:relative;
}

.notif-dropdown-menu{
  width:360px;
  max-width:calc(100vw - 24px);
}

@media (min-width:992px){
  .notif-dropdown-wrap .notif-dropdown-menu{
    left:calc(100% + 18px) !important;
    right:auto !important;
    top:8px !important;
    transform:none !important;
  }
}

@media (max-width:991.98px){
  .notif-dropdown-wrap .notif-dropdown-menu{
    right:0 !important;
    left:auto !important;
  }
}

.notif-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:2px;
}

.notif-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:18px;
  font-weight:600;
  line-height:1;
}

.notif-btn-primary,
.notif-btn-success{
  background:#ffffff;
  color:#2f63d8;
  border:2px solid #2f63d8;
}

.notif-btn-primary:hover,
.notif-btn-success:hover{
  background:#eef4ff;
  color:#244fb1;
  border-color:#244fb1;
}

.notif-btn-secondary{
  background:#ffffff;
  color:#9a6a00;
  border:2px solid #d7a73a;
}

.notif-btn-secondary:hover{
  background:#fff7e6;
  color:#7a5300;
  border-color:#c6921f;
}


/* Sidebar estilo WhatsApp iPhone */
.offcanvas-body .container{padding-left:0!important;padding-right:0!important;}
#offcanvasExampleLabel,#offcanvasExampleLabel .list-group,#offcanvasExampleLabel ul.list-group,#offcanvasExampleLabel .row{width:100%;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;}
#offcanvasExampleLabel .row>*{padding-left:0!important;padding-right:0!important;}
.sidebar-wa-user-card{width:calc(100% + 10px);margin:0 0 14px -5px;padding:14px 14px 14px 12px;border:0;border-radius:20px;background:var(--app-cyan-soft);box-shadow:0 8px 22px rgba(39,69,143,.12);color:var(--app-navy)!important;}
.sidebar-wa-user-card{position:relative;}
.sidebar-wa-user-card h6{margin:0 0 2px 0!important;font-weight:800!important;color:var(--app-navy)!important;font-size:1rem;line-height:1.2;}
.sidebar-wa-user-card .text-black-50{color:rgba(39,69,143,.68)!important;font-size:.82rem!important;line-height:1.25;}
.sidebar-wa-user-card .sidebar-user-icon{width:54px!important;height:54px!important;min-width:54px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;font-size:1.35rem!important;line-height:1!important;padding:0!important;margin:0 14px 0 0!important;box-shadow:0 6px 16px rgba(39,69,143,.14);}
.sidebar-wa-user-card .sidebar-user-icon-admin{border:3px solid #f59e0b!important;box-shadow:0 0 0 3px rgba(245,158,11,.22),0 6px 16px rgba(39,69,143,.14)!important;}
.sidebar-user-grid{display:grid;grid-template-columns:74px minmax(0,1fr) 56px;align-items:center;gap:10px;width:100%;}
.sidebar-user-icon-col,.sidebar-user-config-col{display:flex;align-items:center;justify-content:center;}
.sidebar-user-text-col{min-width:0;text-align:left;}
.sidebar-user-text-col h6{white-space:normal!important;overflow-wrap:anywhere;margin-bottom:4px!important;}
.sidebar-user-text-col .app-user-email{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word;}
.sidebar-user-config-link{width:46px;height:46px;min-width:46px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--app-blue);color:#fff!important;text-decoration:none!important;box-shadow:0 6px 16px rgba(39,69,143,.14);}
.sidebar-user-config-link i{font-size:1.15rem;line-height:1;}
.sidebar-user-config-link:hover,.sidebar-user-config-link:focus{background:#123c7c;color:#fff!important;}
.sidebar-wa-user-card h6{justify-content:flex-start;text-align:left;}
.sidebar-wa-user-card .app-user-email{text-align:left;}
.sidebar-desktop-notif-corner{position:absolute;top:-86px;z-index:4;}
.sidebar-desktop-notif-corner-left{left:0;}
.sidebar-desktop-notif-corner-right{right:0;}
.app-inline-user-icon{width:28px!important;height:28px!important;min-width:28px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;font-size:.78rem!important;line-height:1!important;margin:0 8px 0 0!important;vertical-align:middle!important;box-shadow:0 4px 10px rgba(39,69,143,.14);}
.app-inline-user-icon-large{width:64px!important;height:64px!important;min-width:64px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;font-size:1.8rem!important;line-height:1!important;margin:0 16px 0 16px!important;vertical-align:middle!important;box-shadow:0 6px 16px rgba(39,69,143,.14);}
.app-inline-user-icon-large-tight{margin:0 8px 0 16px!important;}
.app-inline-user-icon-admin{border:2px solid #f59e0b!important;box-shadow:0 0 0 2px rgba(245,158,11,.22),0 4px 10px rgba(39,69,143,.14)!important;}
#offcanvasExampleLabel>hr,#offcanvasExampleLabel hr{display:none;}
#offcanvasExampleLabel .list-group-item-action{position:relative;display:flex!important;align-items:center!important;width:100%!important;min-height:62px;margin:0!important;padding:8px 12px 8px 6px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;color:#111827!important;text-align:left!important;font-weight:650;line-height:1.2;gap:0;}
#offcanvasExampleLabel .list-group-item-action::after{content:"";position:absolute;left:68px;right:0;bottom:0;height:1px;background:rgba(53,135,255,.28);}
#offcanvasExampleLabel .list-group-item-action:hover,#offcanvasExampleLabel .list-group-item-action:focus{transform:none!important;background:rgba(234,246,255,.68)!important;box-shadow:none!important;color:#111827!important;}
#offcanvasExampleLabel .list-group-item-action>i{width:46px!important;height:46px!important;min-width:46px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0 16px 0 0!important;font-size:1.15rem!important;line-height:1!important;box-shadow:0 6px 16px rgba(39,69,143,.14);}
#offcanvasExampleLabel .list-group-item-action .badge{margin-left:auto!important;min-width:24px;height:24px;padding:0 7px!important;border-radius:999px!important;display:inline-flex;align-items:center;justify-content:center;background:var(--app-blue)!important;color:#fff!important;font-size:.78rem;font-weight:800;line-height:1;}
#offcanvasExampleLabel .list-group-item-action .text-bg-danger{background:#dc3545!important;color:#fff!important;border:2px solid #dc3545!important;}
#offcanvasExampleLabel ul.list-group.pt-2{padding-top:4px!important;}
#offcanvasExampleLabel ul.list-group.pt-5{padding-top:18px!important;}
@media (min-width:576px){.offcanvas-start,.offcanvas-end{background:#fff!important}.offcanvas-body{padding-left:10px!important;padding-right:10px!important;}}
@media (max-width:575.98px){.offcanvas-start,.offcanvas-end{background:#fff!important}.offcanvas-body{padding-left:12px!important;padding-right:12px!important;}}


/* Fix contraste sidebar WhatsApp */
#offcanvasExampleLabel .list-group-item-action,
#offcanvasExampleLabel .list-group-item-action:visited,
#offcanvasExampleLabel .list-group-item-action:hover,
#offcanvasExampleLabel .list-group-item-action:focus{
  color:#111827!important;
  background:transparent!important;
}
#offcanvasExampleLabel .list-group-item-action > i{
  color:#fff!important;
  opacity:1!important;
}
#offcanvasExampleLabel .list-group-item-action > i.text-primary{background:#3587ff!important;}
#offcanvasExampleLabel .list-group-item-action > i.text-success{background:#29a85b!important;}
#offcanvasExampleLabel .list-group-item-action > i[data-wa-color="#44B2FF"]{background:#44B2FF!important;}
#offcanvasExampleLabel .list-group-item-action > i[data-wa-color="#3587ff"]{background:var(--app-blue)!important;}
#offcanvasExampleLabel .list-group-item-action > i[data-wa-color="#CE2E2E"]{background:#CE2E2E!important;}
#offcanvasExampleLabel .list-group-item-action > i[data-wa-color="#FFD700"]{background:#FFD700!important;}
#offcanvasExampleLabel .list-group-item-action > i[data-wa-color="#FF5A00"]{background:#FF5A00!important;}
#offcanvasExampleLabel .list-group-item-action > i[data-wa-color="#6405d0"]{background:#6405d0!important;}
#offcanvasExampleLabel .list-group-item-action > i[data-wa-color="#29A09B"]{background:#29A09B!important;}
#offcanvasExampleLabel .list-group-item-action > i[data-wa-color="#D9027D"]{background:#D9027D!important;}
#offcanvasExampleLabel .list-group-item-action > i[data-wa-color="#FF6347"]{background:#FF6347!important;}


/* Ajustes finales solicitados: aire móvil + contraste desktop */
@media (max-width:575.98px){
  .sidebar-wa-user-card{
    width:calc(100% - 24px)!important;
    margin:0 12px 16px 12px!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
      .navbar{
    padding-top:0 !important;
    background:var(--app-gradient) !important;
  }
}

@media (min-width:576px){
  #offcanvasExampleLabel .list-group-item-action,
  #offcanvasExampleLabel .list-group-item-action:visited,
  #offcanvasExampleLabel .list-group-item-action:hover,
  #offcanvasExampleLabel .list-group-item-action:focus{
    color:#ffffff!important;
  }

  #offcanvasExampleLabel .list-group-item-action:hover,
  #offcanvasExampleLabel .list-group-item-action:focus{
    background:rgba(255,255,255,.08)!important;
  }

  #offcanvasExampleLabel .list-group-item-action::after{
    background:rgba(106,184,255,.38)!important;
  }

}


/* Corrección campana notificaciones: mismo tamaño/color que los íconos del menú */
.btn-icon-topbar,
.notif-dropdown-wrap .btn-icon-topbar,
.sidebar-wa-user-card .btn-icon-topbar{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  max-width:46px!important;
  max-height:46px!important;
  padding:0!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 46px!important;
  background:var(--app-blue)!important;
  border:0!important;
  color:#ffffff!important;
  box-shadow:0 6px 16px rgba(39,69,143,.14)!important;
}

.btn-icon-topbar i,
.notif-dropdown-wrap .btn-icon-topbar i,
.sidebar-wa-user-card .btn-icon-topbar i{
  color:#ffffff!important;
  font-size:1.15rem!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
}

.btn-icon-topbar:hover,
.btn-icon-topbar:focus,
.btn-icon-topbar:active{
  background:var(--app-blue)!important;
  color:#ffffff!important;
  filter:brightness(1.04);
}

@media (min-width:768px){
  body:not(.theme-dark):not(.ui-nocturno) .sidebar-wa-user-card .btn-icon-topbar{
    border:1px solid rgba(255,255,255,.72)!important;
    box-shadow:0 6px 16px rgba(39,69,143,.14)!important;
  }
}

.notif-dropdown-wrap{
  position:relative;
}

.notif-dropdown-wrap.notif-dropdown-open-start .notif-dropdown-menu{
  left:0!important;
  right:auto!important;
  transform:none!important;
}

.notif-dropdown-wrap.notif-dropdown-open-end .notif-dropdown-menu{
  left:auto!important;
  right:0!important;
  transform:none!important;
}

@media (max-width:575.98px){
  .notif-dropdown-wrap.notif-dropdown-open-start .notif-dropdown-menu{
    left:0!important;
    right:auto!important;
  }

  .notif-dropdown-wrap.notif-dropdown-open-end .notif-dropdown-menu{
    left:auto!important;
    right:0!important;
  }
}

@media (max-width:767.98px){
  .app-shell-left{
    padding-bottom:0!important;
    margin-bottom:0!important;
  }

  .app-shell-left .navbar{
    padding-bottom:0!important;
    margin-bottom:0!important;
  }

  .app-shell-left .navbar > .container-fluid{
    padding-top:10px!important;
    padding-bottom:10px!important;
    margin-bottom:0!important;
  }

  .app-main-col{
    padding-top:13px!important;
    margin-top:0!important;
  }

  .apunte-surface,
  .dashboard-surface{
    padding-top:9px!important;
    margin-top:0!important;
  }
}

/* ── Navbar sticky en móvil ─────────────────────────────────────── */
@media (max-width:575.98px){
  .app-shell-left{
    position: sticky;
    top: 0;
    z-index: 200;
  }
}

#notif-badge{
  background:#dc3545!important;
  color:#ffffff!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  min-width:20px;
  height:20px;
  padding:0 6px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:.72rem!important;
  font-weight:800!important;
  line-height:1!important;
}

/* Mejorar contraste de btn-close en modos light y dark */
.offcanvas-header .btn-close,
.modal-header .btn-close{
  opacity:0.75;
}

.offcanvas-header .btn-close:hover,
.modal-header .btn-close:hover{
  opacity:1;
}

/* Modo dark - usar color claro para mejor contraste */
[data-bs-theme="dark"] .offcanvas-header .btn-close,
[data-bs-theme="dark"] .modal-header .btn-close{
  filter:invert(1);
  opacity:0.85;
}

[data-bs-theme="dark"] .offcanvas-header .btn-close:hover,
[data-bs-theme="dark"] .modal-header .btn-close:hover{
  filter:invert(1);
  opacity:1;
}

/* Para sidebar con fondo oscuro */
.bg-sidebar .btn-close{
  filter:invert(1);
  opacity:0.85;
}

.bg-sidebar .btn-close:hover{
  filter:invert(1);
  opacity:1;
}