/* ══════════════════════════════════════════════════════════════════════
   In Lak' Loom — Tema 2025 (shell + componentes) sobre Falcon
   Basado en el mockup aprobado. Marca: marino #0E2554 · turquesa #53C5CF
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --ilk-navy:#0E2554; --ilk-navy2:#16356f; --ilk-blue:#1c4a86;
  --ilk-teal:#53C5CF; --ilk-teal2:#7ad4dc;
  --ilk-bg:#f4f7fb; --ilk-card:#fff; --ilk-ink:#16233f; --ilk-muted:#8a94a6; --ilk-line:#e9eef5;
  --ilk-r:18px; --ilk-r-sm:13px; --ilk-sb:264px;
  --ilk-shadow:0 12px 34px -18px rgba(14,37,84,.30);
  --bs-primary:#1c4a86; --falcon-primary:#1c4a86; --falcon-primary-rgb:28,74,134;
}
body{font-family:'Poppins','Open Sans',sans-serif;background:var(--ilk-bg)!important;color:var(--ilk-ink)}

/* ░░░░░ Estructura general ░░░░░ */
.ilk-app{display:flex;min-height:100vh;background:var(--ilk-bg)}
.ilk-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ilk-content-body{padding:24px;flex:1}
.ilk-overlay{display:none;position:fixed;inset:0;background:rgba(14,37,84,.45);z-index:60}

/* ░░░░░ Sidebar ░░░░░ */
.ilk-sidebar{width:var(--ilk-sb);flex-shrink:0;background:var(--ilk-navy);
  color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:65}
/* Escritorio: rail de íconos que se expande SOLO al pasar el mouse (sin botón) */
@media(min-width:861px){
  .ilk-app{padding-left:78px;box-sizing:border-box}      /* reserva el ancho del rail sin desbordar */
  .ilk-sidebar{position:fixed;left:0;top:0;width:78px;overflow:hidden;transition:width .22s ease}
  .ilk-sidebar:hover{width:var(--ilk-sb);box-shadow:14px 0 44px -18px rgba(14,37,84,.6)}
  .ilk-main{min-width:0}
  .ilk-nav a{white-space:nowrap}
  .ilk-txt,.ilk-label,.ilk-sb-user .ilk-uinfo{opacity:0;transition:opacity .14s ease}
  .ilk-sidebar:hover .ilk-txt,.ilk-sidebar:hover .ilk-label,.ilk-sidebar:hover .ilk-sb-user .ilk-uinfo{opacity:1}
}
.ilk-brand{display:flex;align-items:center;gap:12px;padding:22px 22px 16px;color:#fff!important;text-decoration:none}
.ilk-brand .ilk-mark{width:42px;height:42px;border-radius:13px;background:#fff;
  display:grid;place-items:center;flex-shrink:0;overflow:hidden;padding:5px}
.ilk-brand .ilk-mark img{width:100%;height:100%;object-fit:contain}
.ilk-brand b{font-weight:700;font-size:1.05rem;line-height:1.1}
.ilk-brand small{display:block;color:var(--ilk-teal2);font-size:.6rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}
.ilk-nav{padding:6px 12px;overflow-y:auto;overflow-x:hidden;flex:1}
.ilk-nav .ilk-label{color:#6f80ab;font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:16px 12px 8px}
.ilk-nav a{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:12px;color:rgba(255,255,255,.72)!important;
  font-weight:500;font-size:.92rem;margin:3px 0;text-decoration:none;transition:.18s}
.ilk-nav a i,.ilk-nav a svg{width:20px;min-width:20px;text-align:center;font-size:.95rem;color:rgba(255,255,255,.5);transition:.18s}
.ilk-nav a:hover{background:rgba(255,255,255,.07);color:#fff!important}
.ilk-nav a:hover i,.ilk-nav a:hover svg{color:var(--ilk-teal)}
.ilk-nav a.active{background:rgba(255,255,255,.10);color:var(--ilk-teal)!important;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.ilk-nav a.active i,.ilk-nav a.active svg{color:var(--ilk-teal)}
.ilk-nav .ilk-badge{margin-left:auto;background:#ff5e7e;color:#fff;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:20px}
.ilk-nav .ilk-sub{margin-left:20px}
.ilk-sb-user{margin:12px;padding:11px;border-radius:14px;background:rgba(255,255,255,.06);display:flex;align-items:center;gap:11px}
.ilk-sb-user .av{width:38px;height:38px;border-radius:11px;background:var(--ilk-blue);
  display:grid;place-items:center;font-weight:700;color:#fff;font-size:.82rem;flex-shrink:0}
.ilk-sb-user b{font-size:.82rem;display:block;color:#fff}.ilk-sb-user span{font-size:.68rem;color:#8fa0c7}

/* ░░░░░ Topbar ░░░░░ */
.ilk-topbar{height:70px;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ilk-line);display:flex;align-items:center;gap:14px;padding:0 24px;position:sticky;top:0;z-index:55}
.ilk-topbar .ilk-tb-brand{font-weight:700;color:var(--ilk-navy);font-size:1.05rem}
.ilk-spacer{margin-left:auto}
.ilk-icon-btn{width:42px;height:42px;border-radius:12px;border:1.5px solid var(--ilk-line);background:#fff;
  display:grid;place-items:center;color:var(--ilk-blue);cursor:pointer;position:relative;transition:.18s;text-decoration:none}
.ilk-icon-btn:hover{border-color:var(--ilk-teal);color:var(--ilk-teal);transform:translateY(-1px)}
.ilk-tb-av{width:42px;height:42px;border-radius:12px;overflow:hidden;cursor:pointer;border:0;background:var(--ilk-blue)}
.ilk-tb-av img{width:100%;height:100%;object-fit:cover}
.ilk-burger{display:none;width:42px;height:42px;border-radius:12px;border:1.5px solid var(--ilk-line);background:#fff;color:var(--ilk-navy);cursor:pointer;align-items:center;justify-content:center;transition:.18s}
.ilk-burger:hover{border-color:var(--ilk-teal);color:var(--ilk-teal)}

/* ░░░░░ Componentes de contenido (Falcon) ░░░░░ */
.card{border:0!important;border-radius:var(--ilk-r)!important;box-shadow:var(--ilk-shadow)!important}
.card-header{background:transparent!important;border-bottom:1px solid var(--ilk-line)!important;font-weight:600}
.btn{border-radius:var(--ilk-r-sm);font-weight:600}
.btn-primary,.btn-falcon-primary{border:0!important;background:var(--ilk-blue)!important;
  color:#fff!important;box-shadow:0 8px 16px -10px rgba(28,74,134,.45);transition:.18s}
.btn-primary:hover,.btn-falcon-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-outline-primary{color:var(--ilk-blue)!important;border-color:var(--ilk-blue)!important}
.btn-outline-primary:hover{background:var(--ilk-blue)!important;color:#fff!important}
.form-control,.form-select{border-radius:var(--ilk-r-sm);border:1.5px solid var(--ilk-line);padding:.55rem .85rem;background:#f8fafc;transition:.2s}
.form-control:focus,.form-select:focus{border-color:var(--ilk-teal);background:#fff;box-shadow:0 0 0 4px rgba(83,197,207,.15)}
.form-label{font-weight:600;color:#46506a}
.table>thead th{text-transform:uppercase;font-size:.72rem;letter-spacing:.5px;color:var(--ilk-muted);font-weight:600;border-bottom:2px solid var(--ilk-line)}
.table>tbody>tr{transition:background .15s}
.table>tbody>tr:hover{background:rgba(83,197,207,.06)}
.table>:not(caption)>*>*{padding:.8rem .85rem}
.dropdown-menu{border:0;border-radius:var(--ilk-r-sm);box-shadow:0 16px 40px -16px rgba(14,37,84,.35)}
.modal-content{border:0;border-radius:var(--ilk-r)}
.badge.bg-primary{background:var(--ilk-blue)!important}
.text-primary{color:var(--ilk-blue)!important}.bg-primary{background-color:var(--ilk-blue)!important}
a{color:var(--ilk-blue)}
::selection{background:rgba(83,197,207,.35)}

/* ░░░░░ Responsive ░░░░░ */
@media(max-width:860px){
  .ilk-sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .25s;box-shadow:0 0 50px rgba(0,0,0,.35)}
  body.ilk-nav-open .ilk-sidebar{transform:translateX(0)}
  body.ilk-nav-open .ilk-overlay{display:block}
  .ilk-burger{display:flex}
  .ilk-content-body{padding:16px}
  .ilk-topbar{padding:0 16px}
}