/* ═══════════════════════════════════════════════════════════
   BUCARE — main.css  v2026
   Sistema de gestión bibliotecaria · COREDUCACIÓN
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────
   VARIABLES GLOBALES
───────────────────────────── */
:root {
    --pr:   #a32260;
    --sec:  #e75330;
    --acc:  #b8738b;
    --ok:   #cc94b4;
    --sc:   #3D6B8C;

    --dark: #2c3e50;
    --bg:   #f0f2f5;
    --white:#ffffff;

    --grad:  linear-gradient(135deg, #a32260 0%, #e75330 100%);
    --grad2: linear-gradient(135deg, #b8738b 0%, #cc94b4 100%);

    --shadow:       0 10px 30px rgba(163,34,96,.15);
    --shadow-hover: 0 15px 35px rgba(163,34,96,.25);
    --card-sh:      0 4px 20px rgba(163,34,96,.10);

    --hh:            70px;
    --tr:            all .3s ease;
    --border-radius: 16px;
    --ff:            'Poppins', sans-serif;
}

/* ─────────────────────────────
   RESET BASE
───────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--ff);
    background: var(--bg);
    color: #495057;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.has-navbar { padding-top: var(--hh); }
.main-content { flex: 1; min-height: calc(100vh - var(--hh) - 48px); }

::-webkit-scrollbar        { width:8px; height:8px; }
::-webkit-scrollbar-track  { background:#f1f1f1; border-radius:10px; }
::-webkit-scrollbar-thumb  { background: var(--grad); border-radius:10px; }
*                          { scrollbar-width:thin; scrollbar-color: var(--pr) #f1f1f1; }

/* ═══════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════ */
.navbar {
    background: #ffffff !important;
    border-bottom: 2px solid rgba(163,34,96,.10);
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
    padding: 0;
    min-height: var(--hh);
    z-index: 1050;
}
.navbar-brand {
    display: flex; align-items: center; gap: .65rem;
    text-decoration: none; padding: .5rem 0;
}
.nb-logo-wrap { width:50px; height:50px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.nb-logo-img  { width:50px; height:50px; object-fit:contain; }
.nb-logo-fallback {
    display:none; width:46px; height:46px; background:var(--grad);
    border-radius:12px; align-items:center; justify-content:center; color:#fff; font-size:1.4rem;
}
.nb-brand-text { display:flex; flex-direction:column; line-height:1.2; }
.nb-name {
    font-size:1.5rem; font-weight:700;
    background:var(--grad); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:1.5px;
}
.nb-sub { font-size:.62rem; font-weight:500; color:#9aa0ad; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }

.navbar-nav .nav-link {
    font-family:var(--ff); font-size:.875rem; font-weight:500; color:#4a5568 !important;
    padding:.45rem .85rem !important; border-radius:8px;
    display:flex; align-items:center; gap:.4rem; transition:var(--tr); white-space:nowrap;
}
.navbar-nav .nav-link:hover  { color:var(--pr) !important; background:rgba(163,34,96,.07); }
.navbar-nav .nav-link.active { color:var(--pr) !important; background:rgba(163,34,96,.10); font-weight:600; }
.nav-icon { font-size:.8rem; opacity:.8; }

.navbar-toggler { border:none; background:none; padding:.4rem; cursor:pointer; display:flex; flex-direction:column; gap:5px; width:40px; height:40px; justify-content:center; }
.navbar-toggler:focus { outline:none; box-shadow:0 0 0 3px rgba(163,34,96,.25); border-radius:6px; }
.nb-toggler-bar { display:block; width:22px; height:2px; background:var(--pr); border-radius:2px; transition:var(--tr); }

/* Búsqueda navbar */
.nb-search-wrap { position:relative; }
.nb-search-toggle {
    width:38px; height:38px; border-radius:10px; background:rgba(163,34,96,.07);
    border:1.5px solid rgba(163,34,96,.12); color:var(--pr); font-size:.9rem;
    cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--tr);
}
.nb-search-toggle:hover { background:rgba(163,34,96,.14); }
.nb-search-box {
    position:absolute; right:0; top:calc(100% + 10px); width:380px;
    background:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.14);
    border:1.5px solid rgba(163,34,96,.10); overflow:hidden; display:none; z-index:2000;
}
.nb-search-box.open { display:block; animation: searchIn .2s ease; }
@keyframes searchIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.nb-search-inner { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-bottom:1px solid rgba(163,34,96,.08); }
.nb-si { color:#b8c0cc; font-size:.9rem; flex-shrink:0; }
#nbSearchInput { flex:1; border:none; outline:none; font-family:var(--ff); font-size:.88rem; color:var(--dark); background:transparent; padding:.3rem 0; caret-color:var(--pr); }
#nbSearchInput::placeholder { color:#c0c8d4; }
.nb-search-close { background:none; border:none; color:#c0c8d4; font-size:.8rem; cursor:pointer; padding:.2rem; display:flex; align-items:center; transition:color .2s; flex-shrink:0; }
.nb-search-close:hover { color:var(--pr); }
.nb-search-dropdown { max-height:400px; overflow-y:auto; }
.nb-sd-item { display:flex; align-items:center; gap:.75rem; padding:.65rem 1rem; cursor:pointer; border-bottom:1px solid rgba(163,34,96,.04); text-decoration:none; color:inherit; transition:background .15s; font-size:.85rem; }
.nb-sd-item:hover { background:rgba(163,34,96,.05); }
.nb-sd-empty,.nb-sd-loading { padding:1.5rem 1rem; text-align:center; font-size:.82rem; color:#9aa0ad; }

/* Icono btn */
.nb-icon-btn { position:relative; width:38px; height:38px; border-radius:10px; background:rgba(163,34,96,.07); border:1.5px solid rgba(163,34,96,.12); color:var(--pr); font-size:.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--tr); }
.nb-icon-btn:hover { background:rgba(163,34,96,.14); }
.nb-badge { position:absolute; top:-4px; right:-4px; width:18px; height:18px; background:var(--sec); color:#fff; font-size:.6rem; font-weight:700; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }

/* Usuario */
.nb-user-btn { display:flex; align-items:center; gap:.55rem; background:none; border:1.5px solid rgba(163,34,96,.20); border-radius:12px; padding:.3rem .7rem .3rem .4rem; cursor:pointer; transition:var(--tr); }
.nb-user-btn:hover { background:rgba(163,34,96,.06); border-color:rgba(163,34,96,.35); }
.nb-avatar { width:34px; height:34px; background:var(--grad); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.88rem; font-weight:700; flex-shrink:0; }
.nb-avatar-lg { width:44px; height:44px; font-size:1.1rem; }
.nb-username { font-size:.84rem; font-weight:600; color:var(--dark); line-height:1.2; }
.nb-role { font-size:.68rem; color:var(--pr); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.nb-chevron { font-size:.65rem; color:#9aa0ad; transition:transform .25s; }
.nb-user-btn[aria-expanded="true"] .nb-chevron { transform:rotate(180deg); }
.nb-btn-login { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem 1.1rem; background:var(--grad); color:#fff !important; border:none; border-radius:10px; font-family:var(--ff); font-size:.875rem; font-weight:600; text-decoration:none; transition:var(--tr); white-space:nowrap; }
.nb-btn-login:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(163,34,96,.4); }

/* Dropdown */
.nb-dropdown { border:none; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.13); padding:.4rem 0; margin-top:.5rem; min-width:230px; animation:menuIn .18s ease; }
@keyframes menuIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.nb-dropdown-header { padding:.7rem 1.1rem .5rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#9aa0ad; border-bottom:1px solid #f0f0f0; pointer-events:none; }
.nb-user-header { display:flex; align-items:center; gap:.7rem; pointer-events:none; }
.nb-user-header strong { display:block; font-size:.88rem; color:var(--dark); font-weight:600; }
.nb-user-header span { font-size:.72rem; color:var(--pr); font-weight:600; text-transform:uppercase; }
.nb-dropdown-item { font-family:var(--ff); font-size:.87rem; padding:.6rem 1.1rem; display:flex; align-items:center; gap:.6rem; transition:var(--tr); color:#495057; }
.nb-dropdown-item i { font-size:.88rem; color:var(--acc); width:18px; text-align:center; }
.nb-dropdown-item:hover { background:rgba(163,34,96,.07); color:var(--pr); }
.nb-dropdown-item:hover i { color:var(--pr); }
.nb-dropdown-danger { color:#dc3545 !important; }
.nb-dropdown-danger i { color:#dc3545 !important; }
.nb-dropdown-danger:hover { background:rgba(220,53,69,.08) !important; }
.nb-notif-item { display:flex !important; align-items:center; gap:.7rem; padding:.7rem 1rem !important; text-decoration:none; }
.nb-notif-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; }
.nb-notif-danger .nb-notif-icon { background:#fee2e2; color:#b91c1c; }
.nb-notif-body { display:flex; flex-direction:column; line-height:1.3; }
.nb-notif-body strong { font-size:.83rem; color:var(--dark); }
.nb-notif-body span   { font-size:.72rem; color:#9aa0ad; }
.nb-notif-empty { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:1.2rem 1rem; font-size:.82rem; color:#9aa0ad; pointer-events:none; }
.nb-notif-empty i { color:#15803d; font-size:1rem; }

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB
   ═══════════════════════════════════════════════════════════ */
.bc-bar { background:#fff; border-bottom:1px solid rgba(163,34,96,.08); padding:.5rem 0; }
.bc-ol { margin:0; padding:0; font-size:.8rem; font-family:var(--ff); background:none; }
.bc-ol .breadcrumb-item a { color:var(--pr); text-decoration:none; font-weight:500; transition:color .2s; }
.bc-ol .breadcrumb-item a:hover { color:var(--sec); }
.bc-ol .breadcrumb-item.active { color:#6c757d; font-weight:500; }
.bc-ol .breadcrumb-item + .breadcrumb-item::before { color:#ced4da; }

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════ */
.hero-section {
    background: var(--grad);
    position: relative;
    overflow: hidden;
    padding: 4rem 0 3rem;
}
.hero-bg-pattern {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.06) 0%, transparent 40%),
        radial-gradient(circle at 60% 80%, rgba(0,0,0,.08) 0%, transparent 40%);
}
.hero-content { color: #fff; max-width: 700px; padding-bottom: 2.5rem; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
    color: #fff; padding: .35rem .9rem; border-radius: 50px;
    font-size: .78rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .8px; margin-bottom: 1.2rem; backdrop-filter: blur(4px);
}
.hero-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: .8rem;
}
.hero-title .text-gradient {
    background: linear-gradient(135deg, #ffd6ec 0%, #ffe0d5 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-subtitle {
    font-size: 1.05rem; color: rgba(255,255,255,.82); margin-bottom: 2rem; font-weight: 400;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-lg-pr { padding: .7rem 1.6rem !important; font-size: 1rem !important; border-radius: 12px !important; }
.btn-outline-pr.btn-lg-pr { background:rgba(255,255,255,.15) !important; color:#fff !important; border-color:rgba(255,255,255,.5) !important; }
.btn-outline-pr.btn-lg-pr:hover { background:rgba(255,255,255,.25) !important; }

/* Hero welcome (logueado) */
.hero-welcome { display:flex; align-items:center; gap:1rem; }
.hero-avatar {
    width:56px; height:56px; background:rgba(255,255,255,.2);
    border:2px solid rgba(255,255,255,.4); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; font-weight:700; color:#fff; flex-shrink:0;
}
.hero-welcome-text { font-size:.85rem; color:rgba(255,255,255,.75); margin:0; line-height:1.2; }
.hero-welcome-name { font-size:1.2rem; font-weight:700; color:#fff; margin:0; }

/* Hero stats */
.hero-stats {
    display: flex; align-items: center; gap: 0;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    border-radius: 20px; padding: 1.2rem 2rem;
    backdrop-filter: blur(8px); width: fit-content;
    flex-wrap: wrap; row-gap: 1rem;
}
.hero-stat-item { text-align: center; padding: 0 1.5rem; }
.hero-stat-num { display: block; font-size: 1.8rem; font-weight: 800; color: #fff; line-height: 1; }
.hero-stat-label { font-size: .72rem; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .5px; margin-top: .25rem; display:block; }
.hero-stat-sep { width: 1px; height: 40px; background: rgba(255,255,255,.25); flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════
   CARRUSEL DE LOGOS
   ═══════════════════════════════════════════════════════════ */
.carousel-section { background: #fff; padding: 1.5rem 0; border-bottom: 1px solid rgba(163,34,96,.07); }
.carousel-label { text-align:center; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:#9aa0ad; margin-bottom:1rem; }
.carousel-track-outer { overflow: hidden; position: relative; }
.carousel-track-outer::before,
.carousel-track-outer::after {
    content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;
}
.carousel-track-outer::before { left:0; background:linear-gradient(to right, #fff, transparent); }
.carousel-track-outer::after  { right:0; background:linear-gradient(to left, #fff, transparent); }
.carousel-track {
    display: flex; gap: 2rem; align-items: center;
    animation: scrollLogos 30s linear infinite;
    width: max-content;
}
.carousel-track:hover { animation-play-state: paused; }
@keyframes scrollLogos { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.carousel-item-logo { display:flex; flex-direction:column; align-items:center; gap:.5rem; flex-shrink:0; }
.carousel-item-logo a { text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.carousel-logo-wrap { width:56px; height:56px; display:flex; align-items:center; justify-content:center; }
.carousel-logo-wrap img { width:100%; height:100%; object-fit:contain; filter:grayscale(.3); transition:filter .3s; }
.carousel-item-logo:hover .carousel-logo-wrap img { filter:grayscale(0); }
.carousel-logo-name { font-size:.65rem; color:#9aa0ad; text-align:center; max-width:80px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }

/* ═══════════════════════════════════════════════════════════
   BÚSQUEDA GLOBAL
   ═══════════════════════════════════════════════════════════ */
.search-section { padding: 3rem 0; background: var(--bg); }
.search-wrapper { position: relative; max-width: 800px; margin: 0 auto; }
.search-input-group {
    display: flex; align-items: center; gap: 0;
    background: #fff; border: 2px solid rgba(163,34,96,.15);
    border-radius: 16px; padding: .5rem .5rem .5rem 1.2rem;
    box-shadow: var(--card-sh); transition: var(--tr);
}
.search-input-group:focus-within {
    border-color: var(--pr); box-shadow: 0 0 0 3px rgba(163,34,96,.12), var(--card-sh);
}
.si-icon { color: #b8c0cc; font-size: 1rem; flex-shrink: 0; margin-right: .2rem; }
#searchGlobal {
    flex: 1; border: none; outline: none; font-family: var(--ff);
    font-size: 1rem; color: var(--dark); background: transparent;
    padding: .4rem .5rem; caret-color: var(--pr);
}
#searchGlobal::placeholder { color: #c0c8d4; }
.search-clear {
    background: none; border: none; color: #c0c8d4; font-size: .85rem;
    cursor: pointer; padding: .4rem; transition: color .2s; display: none; flex-shrink: 0;
}
.search-clear.visible { display: flex; }
.search-clear:hover { color: var(--pr); }
.search-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1.2rem; background: var(--grad); color: #fff; border: none;
    border-radius: 10px; font-family: var(--ff); font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: var(--tr); white-space: nowrap; flex-shrink: 0;
}
.search-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(163,34,96,.4); }
.search-dropdown {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.14);
    border: 1.5px solid rgba(163,34,96,.10); overflow: hidden;
    display: none; z-index: 999; animation: searchIn .2s ease;
}
.search-dropdown.open { display: block; }
.search-hint { text-align: center; font-size: .78rem; color: #b0b8c4; margin-top: .75rem; }
.search-hint kbd {
    background: #fff; border: 1px solid #dde0e5; border-radius: 4px;
    padding: .1rem .35rem; font-size: .72rem; font-family: var(--ff); color: var(--dark);
    box-shadow: 0 1px 0 #ccc;
}
/* Items de resultado */
.sd-item {
    display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem;
    text-decoration:none; color:inherit; border-bottom:1px solid rgba(163,34,96,.04);
    transition:background .15s; cursor:pointer;
}
.sd-item:hover,.sd-item.selected { background:rgba(163,34,96,.05); }
.sd-item-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.9rem; }
.sd-item-title { font-size:.88rem; font-weight:600; color:var(--dark); line-height:1.3; }
.sd-item-sub   { font-size:.74rem; color:#9aa0ad; }
.sd-empty,.sd-loading { padding:2rem 1rem; text-align:center; color:#9aa0ad; font-size:.85rem; }
.sd-empty i,.sd-loading i { font-size:1.8rem; margin-bottom:.5rem; display:block; opacity:.4; }
.sd-section-label { padding:.5rem 1rem .25rem; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#b0b8c4; background:rgba(163,34,96,.03); border-bottom:1px solid rgba(163,34,96,.06); }

/* ═══════════════════════════════════════════════════════════
   PANEL DE ROL (MENÚ DE MÓDULOS)
   ═══════════════════════════════════════════════════════════ */
.panel-section { padding: 4rem 0; }
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
}
.menu-card {
    background: #fff; border-radius: var(--border-radius);
    border: 1px solid rgba(163,34,96,.08); box-shadow: var(--card-sh);
    padding: 1.75rem 1.25rem 1.25rem;
    cursor: pointer; transition: var(--tr); position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem;
    text-decoration: none;
}
.menu-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--grad); transform:scaleX(0); transition:transform .3s ease;
    transform-origin: left;
}
.menu-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(163,34,96,.2); }
.menu-card:hover::before { transform:scaleX(1); }
.menu-card:focus { outline: 3px solid rgba(163,34,96,.3); outline-offset:3px; }

.menu-card-icon {
    width:60px; height:60px; border-radius:16px;
    background:linear-gradient(135deg, rgba(163,34,96,.1) 0%, rgba(231,83,48,.1) 100%);
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; color:var(--pr); transition:var(--tr); flex-shrink:0;
}
.menu-card:hover .menu-card-icon { background:var(--grad); color:#fff; transform:scale(1.1); }

.menu-card-title { font-size:.88rem; font-weight:600; color:var(--dark); line-height:1.3; margin:0; }

.menu-card-arrow {
    position:absolute; bottom:.75rem; right:.9rem;
    font-size:.7rem; color:var(--acc); opacity:0; transition:var(--tr);
    transform:translateX(-4px);
}
.menu-card:hover .menu-card-arrow { opacity:1; transform:translateX(0); }

/* ═══════════════════════════════════════════════════════════
   SERVICIOS (vista pública)
   ═══════════════════════════════════════════════════════════ */
.services-section { padding: 5rem 0; background: var(--bg); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
.service-card {
    background: #fff; border-radius: var(--border-radius); border: 1px solid rgba(163,34,96,.08);
    box-shadow: var(--card-sh); padding: 2rem 1.5rem; text-align: center; transition: var(--tr);
}
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.service-icon {
    width:64px; height:64px; border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.6rem; margin:0 auto 1.2rem;
}
.service-icon-pr  { background:rgba(163,34,96,.12); color:var(--pr); }
.service-icon-sec { background:rgba(231,83,48,.12);  color:var(--sec); }
.service-icon-sc  { background:rgba(61,107,140,.12); color:var(--sc); }
.service-icon-acc { background:rgba(184,115,139,.15);color:var(--acc); }
.service-title { font-size:1.05rem; font-weight:700; color:var(--dark); margin-bottom:.6rem; }
.service-desc  { font-size:.85rem; color:#9aa0ad; margin:0; line-height:1.6; }

/* ═══════════════════════════════════════════════════════════
   ESTADÍSTICAS
   ═══════════════════════════════════════════════════════════ */
.stats-section { padding: 5rem 0; background: var(--grad); position: relative; overflow: hidden; }
.stats-section::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(circle at 30% 50%, rgba(255,255,255,.07) 0%, transparent 60%),
               radial-gradient(circle at 70% 20%, rgba(0,0,0,.08) 0%, transparent 50%);
}
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1.5rem; position:relative; }
.stats-card {
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
    border-radius:var(--border-radius); padding:2rem 1.5rem; text-align:center;
    backdrop-filter:blur(8px); transition:var(--tr);
}
.stats-card:hover { background:rgba(255,255,255,.18); transform:translateY(-4px); }
.stats-icon-wrap { width:54px; height:54px; background:rgba(255,255,255,.15); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff; margin:0 auto 1rem; }
.stats-number { font-size:2.2rem; font-weight:800; color:#fff; line-height:1; margin-bottom:.4rem; }
.stats-label  { font-size:.78rem; color:rgba(255,255,255,.78); text-transform:uppercase; letter-spacing:.5px; font-weight:600; }

/* ═══════════════════════════════════════════════════════════
   CONTENIDO GENÉRICO DE VISTAS INTERNAS
   ═══════════════════════════════════════════════════════════ */
.page-wrap { padding: 2rem 0 3rem; }

.page-header {
    display:flex; align-items:flex-start; justify-content:space-between;
    flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem;
    padding-bottom:1rem; border-bottom:2px solid rgba(163,34,96,.08);
}
.page-title { font-size:1.55rem; font-weight:700; color:var(--dark); margin:0 0 .2rem; display:flex; align-items:center; gap:.5rem; }
.page-title i { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-size:1.3rem; }
.page-subtitle { font-size:.85rem; color:#9aa0ad; font-weight:400; margin:0; }
.page-actions { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

/* Cards */
.card-bucare { background:#fff; border-radius:var(--border-radius); border:1px solid rgba(163,34,96,.08); box-shadow:var(--card-sh); overflow:hidden; transition:var(--tr); }
.card-bucare:hover { box-shadow:var(--shadow); }
.card-header-bucare { padding:1rem 1.25rem; border-bottom:1px solid rgba(163,34,96,.08); display:flex; align-items:center; justify-content:space-between; gap:.5rem; background:#fff; }
.card-header-bucare h5 { font-size:1rem; font-weight:600; color:var(--dark); margin:0; display:flex; align-items:center; gap:.45rem; }
.card-header-bucare h5 i { color:var(--pr); }
.card-body-bucare { padding:1.25rem; }

/* Stats mini */
.stat-mini { background:#fff; border-radius:14px; border:1px solid rgba(163,34,96,.08); box-shadow:var(--card-sh); padding:1.1rem 1.25rem; display:flex; align-items:center; gap:1rem; transition:var(--tr); }
.stat-mini:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.stat-mini-icon { width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.stat-mini-icon.pr      { background:rgba(163,34,96,.12); color:var(--pr); }
.stat-mini-icon.sec     { background:rgba(231,83,48,.12);  color:var(--sec); }
.stat-mini-icon.sc      { background:rgba(61,107,140,.12); color:var(--sc); }
.stat-mini-icon.ok      { background:rgba(204,148,180,.15);color:var(--acc); }
.stat-mini-icon.success { background:rgba(21,128,61,.12);  color:#15803d; }
.stat-mini-icon.danger  { background:rgba(185,28,28,.12);  color:#b91c1c; }
.stat-mini-icon.warning { background:rgba(146,64,14,.12);  color:#92400e; }
.stat-mini-value  { font-size:1.6rem; font-weight:700; color:var(--dark); line-height:1; }
.stat-mini-label  { font-size:.78rem; color:#9aa0ad; margin-top:.1rem; }

/* Botones */
.btn-pr {
    background:var(--grad); color:#fff; border:none; border-radius:10px; padding:.5rem 1.1rem;
    font-family:var(--ff); font-size:.875rem; font-weight:600; cursor:pointer;
    display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; transition:var(--tr); white-space:nowrap;
}
.btn-pr:hover { color:#fff; transform:translateY(-2px); box-shadow:0 4px 14px rgba(163,34,96,.4); }
.btn-outline-pr {
    background:transparent; color:var(--pr); border:2px solid var(--pr); border-radius:10px;
    padding:.45rem 1rem; font-family:var(--ff); font-size:.875rem; font-weight:600; cursor:pointer;
    display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; transition:var(--tr); white-space:nowrap;
}
.btn-outline-pr:hover { background:var(--pr); color:#fff; transform:translateY(-2px); }
.btn-sm-pr { padding:.35rem .75rem !important; font-size:.8rem !important; border-radius:8px !important; }
.btn-danger-soft { background:rgba(220,53,69,.1); color:#dc3545; border:none; border-radius:8px; padding:.4rem .8rem; font-family:var(--ff); font-size:.82rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; text-decoration:none; transition:var(--tr); }
.btn-danger-soft:hover { background:#dc3545; color:#fff; }
.btn-sc { background:var(--sc); color:#fff; border:none; border-radius:10px; padding:.5rem 1.1rem; font-family:var(--ff); font-size:.875rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; transition:var(--tr); }
.btn-sc:hover { color:#fff; background:#2d5470; transform:translateY(-2px); }

/* Badges */
.badge-bucare { display:inline-flex; align-items:center; gap:.3rem; padding:.28rem .7rem; border-radius:50px; font-size:.72rem; font-weight:700; font-family:var(--ff); letter-spacing:.3px; text-transform:uppercase; }
.badge-disponible { background:#dcfce7; color:#15803d; }
.badge-prestado   { background:#fef3c7; color:#92400e; }
.badge-revision   { background:#dbeafe; color:#1e40af; }
.badge-danado     { background:#fee2e2; color:#b91c1c; }
.badge-perdido    { background:#f3f4f6; color:#374151; }
.badge-activo     { background:#dcfce7; color:#15803d; }
.badge-inactivo   { background:#fee2e2; color:#b91c1c; }
.badge-vencido    { background:#fee2e2; color:#b91c1c; }
.badge-renovado   { background:#ede9fe; color:#5b21b6; }
.badge-devuelto   { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.badge-pendiente  { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
.badge-aprobada   { background:#f0fdf4; color:#15803d; }
.badge-rechazada  { background:#fef2f2; color:#b91c1c; }
.badge-pr         { background:rgba(163,34,96,.12); color:var(--pr); }
.badge-warning    { background:#fffbeb; color:#92400e; }

/* Formularios */
.form-group-bucare { margin-bottom:1.2rem; }
.form-group-bucare label { display:block; font-size:.82rem; font-weight:600; color:var(--dark); margin-bottom:.4rem; letter-spacing:.2px; }
.form-group-bucare .form-control,
.form-group-bucare .form-select {
    border:2px solid #e9ecef; border-radius:10px; font-family:var(--ff);
    font-size:.875rem; color:var(--dark); background:#f8f9fa; padding:.6rem .9rem; transition:var(--tr); width:100%; outline:none;
}
.form-group-bucare .form-control:focus,
.form-group-bucare .form-select:focus { border-color:var(--pr); background:#fff; box-shadow:0 0 0 3px rgba(163,34,96,.10); }
.form-group-bucare .form-control.is-invalid,
.form-group-bucare .form-select.is-invalid { border-color:#dc3545; box-shadow:0 0 0 3px rgba(220,53,69,.10); }
.form-group-bucare .invalid-feedback { font-size:.78rem; margin-top:.3rem; }
.form-group-bucare textarea.form-control { resize:vertical; min-height:90px; }

/* Tablas */
.table-bucare { width:100%; border-collapse:collapse; font-size:.875rem; font-family:var(--ff); }
.table-bucare thead th { background:rgba(163,34,96,.05); color:var(--dark); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; padding:.75rem 1rem; border-bottom:2px solid rgba(163,34,96,.12); white-space:nowrap; }
.table-bucare tbody td { padding:.75rem 1rem; border-bottom:1px solid rgba(163,34,96,.05); color:#495057; vertical-align:middle; }
.table-bucare tbody tr:hover { background:rgba(163,34,96,.03); }
.table-bucare tbody tr:last-child td { border-bottom:none; }
.table-responsive-bucare { overflow-x:auto; border-radius:var(--border-radius); border:1px solid rgba(163,34,96,.08); }

/* Paginación */
.pagination-bucare { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; padding:1rem 1.25rem; border-top:1px solid rgba(163,34,96,.07); }
.pagination-info { font-size:.8rem; color:#9aa0ad; }
.pagination-controls { display:flex; gap:.35rem; }
.pag-btn { width:34px; height:34px; border-radius:8px; border:1.5px solid rgba(163,34,96,.15); background:#fff; color:var(--dark); font-family:var(--ff); font-size:.82rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--tr); text-decoration:none; }
.pag-btn:hover { border-color:var(--pr); color:var(--pr); background:rgba(163,34,96,.05); }
.pag-btn.active { background:var(--grad); color:#fff; border-color:transparent; }
.pag-btn:disabled { opacity:.4; cursor:not-allowed; }

/* Alertas */
.alert-bucare { padding:.85rem 1.1rem; border-radius:12px; font-size:.875rem; font-weight:500; display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; animation:alertIn .3s ease; }
@keyframes alertIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.alert-bucare.error   { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.alert-bucare.success { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.alert-bucare.warning { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
.alert-bucare.info    { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }

/* Filtros de tabla */
.filters-bar { background:#fff; border-radius:14px; border:1px solid rgba(163,34,96,.08); padding:1rem 1.25rem; margin-bottom:1.25rem; display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-end; }
.filter-group { display:flex; flex-direction:column; gap:.3rem; }
.filter-group label { font-size:.75rem; font-weight:600; color:var(--dark); text-transform:uppercase; letter-spacing:.3px; }
.filter-group .form-control,
.filter-group .form-select { border:1.5px solid #e9ecef; border-radius:8px; font-family:var(--ff); font-size:.82rem; padding:.4rem .7rem; background:#f8f9fa; transition:var(--tr); outline:none; }
.filter-group .form-control:focus,
.filter-group .form-select:focus { border-color:var(--pr); background:#fff; box-shadow:0 0 0 3px rgba(163,34,96,.08); }

/* Empty state */
.empty-state { text-align:center; padding:4rem 2rem; }
.empty-state-icon { width:80px; height:80px; background:rgba(163,34,96,.08); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--pr); margin:0 auto 1.5rem; }
.empty-state h3 { font-size:1.2rem; font-weight:600; color:var(--dark); margin-bottom:.5rem; }
.empty-state p  { font-size:.88rem; color:#9aa0ad; margin-bottom:1.5rem; }

/* Utilidades */
.text-gradient { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-title  { font-weight:700; font-size:2rem; text-align:center; margin-bottom:.75rem; }
.section-subtitle { text-align:center; font-size:1rem; color:#9aa0ad; margin-bottom:2.5rem; }
.gap-xs { gap:.35rem !important; }
.skip-link:focus { position:fixed !important; top:10px; left:10px; z-index:9999; padding:.4rem .9rem; background:var(--pr); color:#fff; border-radius:8px; font-family:var(--ff); font-weight:600; text-decoration:none; }

/* SweetAlert2 */
.swal-bucare .swal2-popup { font-family:var(--ff) !important; border-radius:20px !important; }
.swal-bucare .swal2-title { font-size:1.3rem !important; color:var(--dark) !important; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.site-footer { background:var(--grad); padding:.85rem 0; margin-top:auto; flex-shrink:0; }
.footer-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.4rem; font-size:.78rem; color:rgba(255,255,255,.85); }
.footer-bar strong { color:#fff; font-weight:700; }
.footer-dev { opacity:.85; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width:992px) {
    .navbar-nav .nav-link { padding:.55rem .7rem !important; }
    .nb-search-box { position:fixed; top:var(--hh); left:0; right:0; width:100%; border-radius:0; }
    .hero-stats { padding:1rem 1.2rem; }
    .hero-stat-item { padding:0 .9rem; }
}
@media (max-width:768px) {
    :root { --hh:62px; }
    .nb-logo-wrap,.nb-logo-img { width:40px; height:40px; }
    .nb-name { font-size:1.25rem; }
    .nb-sub  { display:none; }
    .hero-section { padding:2.5rem 0 2rem; }
    .hero-stats { flex-wrap:wrap; justify-content:center; }
    .hero-stat-sep { display:none; }
    .menu-grid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1rem; }
    .section-title { font-size:1.6rem; }
    .stats-grid { grid-template-columns:repeat(2, 1fr); }
    .page-header { flex-direction:column; }
    .footer-bar { flex-direction:column; text-align:center; }
}
@media (max-width:480px) {
    .hero-title { font-size:2rem; }
    .menu-grid { grid-template-columns:repeat(2, 1fr); }
    .stats-grid { grid-template-columns:repeat(2, 1fr); }
    .search-btn span { display:none; }
    .filters-bar { flex-direction:column; }
}
/* ═══════════════════════════════════════════════════════════
   NOTIFICACIONES — Campanita del navbar
   Agregar al final de public/assets/css/main.css
   ═══════════════════════════════════════════════════════════ */

/* ── Panel contenedor ── */
.nb-notif-panel {
    width: 340px;
    padding: 0;
    border-radius: 16px;
    border: 1px solid rgba(163, 34, 96, .12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
    overflow: hidden;
}

/* ── Cabecera del panel ── */
.nb-notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    background: linear-gradient(135deg, #a32260 0%, #7b1048 100%);
    border-bottom: none;
}

.nb-notif-panel-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .3px;
}

.nb-notif-panel-title .fa-bell {
    font-size: .85rem;
    opacity: .9;
}

.nb-notif-panel-count {
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 20px;
    padding: .15rem .65rem;
    letter-spacing: .3px;
}

/* ── Lista ── */
.nb-notif-list {
    max-height: 360px;
    overflow-y: auto;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #e8dce4 transparent;
}
.nb-notif-list::-webkit-scrollbar { width: 4px; }
.nb-notif-list::-webkit-scrollbar-track { background: transparent; }
.nb-notif-list::-webkit-scrollbar-thumb { background: #e8dce4; border-radius: 4px; }

/* ── Ítem de notificación ── */
.nb-notif-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.1rem;
    text-decoration: none;
    color: inherit;
    transition: background .18s;
    border-bottom: 1px solid #f5eef3;
    position: relative;
}
.nb-notif-item:last-child { border-bottom: none; }
.nb-notif-item:hover { background: #fdf7fb; text-decoration: none; color: inherit; }

/* ── Icono del ítem ── */
.nb-notif-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}

/* Colores por nivel */
.nb-notif-danger  .nb-notif-item-icon { background: #fef2f2; color: #dc2626; }
.nb-notif-warning .nb-notif-item-icon { background: #fef9ec; color: #d97706; }
.nb-notif-info    .nb-notif-item-icon { background: #eff8ff; color: #2563eb; }

/* Borde izquierdo por nivel */
.nb-notif-danger  { border-left: 3px solid #ef4444; }
.nb-notif-warning { border-left: 3px solid #f59e0b; }
.nb-notif-info    { border-left: 3px solid #3b82f6; }

/* ── Texto del ítem ── */
.nb-notif-item-body { flex: 1; min-width: 0; }

.nb-notif-item-title {
    font-size: .83rem;
    font-weight: 700;
    color: #1e1e2d;
    margin: 0 0 .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.nb-notif-item-sub {
    font-size: .75rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.3;
}

/* ── Contador del ítem ── */
.nb-notif-item-count {
    font-size: .72rem;
    font-weight: 700;
    border-radius: 20px;
    padding: .15rem .55rem;
    flex-shrink: 0;
    line-height: 1.5;
}
.nb-notif-danger  .nb-notif-item-count { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.nb-notif-warning .nb-notif-item-count { background: #fef9ec; color: #d97706; border: 1px solid #fde68a; }
.nb-notif-info    .nb-notif-item-count { background: #eff8ff; color: #2563eb; border: 1px solid #bfdbfe; }

/* ── Estado vacío ── */
.nb-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    text-align: center;
    background: #fff;
}

.nb-notif-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f0fdf4;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: .9rem;
}

.nb-notif-empty-title {
    font-size: .88rem;
    font-weight: 700;
    color: #1e1e2d;
    margin: 0 0 .25rem;
}

.nb-notif-empty-sub {
    font-size: .78rem;
    color: #9ca3af;
    margin: 0;
}

/* ── Pie del panel ── */
.nb-notif-panel-footer {
    padding: .7rem 1.1rem;
    background: #fdf7fb;
    border-top: 1px solid #f5eef3;
}

.nb-notif-footer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 600;
    color: #a32260;
    text-decoration: none;
    transition: color .18s;
}
.nb-notif-footer-link:hover { color: #7b1048; text-decoration: none; }
.nb-notif-footer-link .fa-arrow-right { font-size: .72rem; }

/* ── Badge de la campanita (heredado, ajuste de posición) ── */
.nb-icon-btn { position: relative; }
.nb-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    background: #e75330;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .3rem;
    border: 2px solid #fff;
    line-height: 1;
    pointer-events: none;
}

/* ── Animación de entrada del panel ── */
.nb-notif-panel.show {
    animation: notifSlideIn .2s cubic-bezier(.22,1,.36,1);
}
@keyframes notifSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .nb-notif-panel { width: calc(100vw - 2rem); }
}