/*!
  ARKANARI + HYPER (Bootstrap 5) — Premium Overrides
  Cargar DESPUÉS de app.css
*/

:root{
    /* Brand */
    --ark-dark: #353535;
    --ark-light:#ffffff;
    --ark-gold: #917634;
    --ark-gold-hover: #7f6530;
    --ark-gold-active:#6f582a;

    /* Glow helpers */
    --ark-glow: rgba(145,118,52,.18);
    --ark-glow-soft: rgba(145,118,52,.10);
}

/* =========================================================
   1) Variables globales (más “premium”)
   ========================================================= */
:root,
[data-bs-theme="light"]{
    /* tu ajuste está bien — lo extiendo un poquito */
    --ct-border-color: rgba(145,118,52,.14);
    --ct-box-shadow: 0px 12px 42px rgba(145,118,52,.10);
    --ct-dropdown-box-shadow: 0px 18px 60px rgba(53,53,53,.18);
}

[data-bs-theme="dark"]{
    --ct-border-color: rgba(145,118,52,.18);
    --ct-box-shadow: 0px 18px 60px rgba(0,0,0,.55);
    --ct-dropdown-box-shadow: 0px 22px 70px rgba(0,0,0,.65);
}

/* =========================================================
   2) Menú “brand” con vida (biotech glow)
   app.css define brand con linear-gradient gris→negro【...】,
   aquí lo hacemos más orgánico.
   ========================================================= */
html[data-menu-color="brand"]{
    --ct-menu-bg:
        radial-gradient(900px circle at 18% 10%, rgba(145,118,52,.22) 0%, rgba(145,118,52,0) 58%),
        linear-gradient(135deg, rgba(53,53,53,.98) 0%, rgba(0,0,0,.98) 72%);
    --ct-menu-item-color: rgba(255,255,255,.74);
    --ct-menu-item-hover-color: #ffffff;
    --ct-menu-item-active-color: #ffffff;
    --ct-help-box-bg: rgba(145,118,52,.12);
}

/* En dark mode, Hyper solo sobre-escribe light/dark menu-color,
   pero no toca brand:contentReference[oaicite:5]{index=5}; aquí lo afinamos. */
html[data-bs-theme="dark"][data-menu-color="brand"]{
    --ct-menu-bg:
        radial-gradient(900px circle at 18% 10%, rgba(145,118,52,.18) 0%, rgba(145,118,52,0) 62%),
        linear-gradient(135deg, rgba(18,21,26,.98) 0%, rgba(5,6,8,.98) 82%);
    --ct-menu-item-color: rgba(255,255,255,.72);
    --ct-help-box-bg: rgba(145,118,52,.14);
}

/* =========================================================
   3) Detached layout: más “premium”
   app.css: border-radius 0.3rem + border:contentReference[oaicite:6]{index=6}
   ========================================================= */
html[data-layout-mode="detached"]:not([data-layout="topnav"]) .wrapper .leftside-menu{
    border-radius: .95rem;
    border-color: rgba(145,118,52,.16);
    box-shadow: 0 18px 70px rgba(0,0,0,.22);
}

/* Topbar (ya usa --ct-topbar-bg y box-shadow:contentReference[oaicite:7]{index=7}) */
.navbar-custom{
    border-bottom-color: rgba(145,118,52,.18);
}

/* Si usas topbar brand (default), dale un toque cálido */
html[data-topbar-color="brand"] .navbar-custom{
    background:
        linear-gradient(90deg, rgba(145,118,52,.07) 0%, rgba(255,255,255,.92) 40%, rgba(255,255,255,.92) 100%);
    backdrop-filter: blur(10px);
}

/* =========================================================
   4) Side-nav: active con “pill” + barrita dorada
   app.css: active solo color/font-weight:contentReference[oaicite:8]{index=8}
   ========================================================= */
html[data-menu-color="brand"] .side-nav .side-nav-item > .side-nav-link{
    border-radius: .70rem;
    margin: 2px .75rem;
    padding-left: calc(var(--ct-menu-item-padding-x) * 1.15);
    padding-right: calc(var(--ct-menu-item-padding-x) * 1.15);
}

html[data-menu-color="brand"] .side-nav .side-nav-item > .side-nav-link:hover{
    background: rgba(255,255,255,.06);
}

html[data-menu-color="brand"] .side-nav .menuitem-active > a{
    background: rgba(var(--ct-primary-rgb), .18);
}

html[data-menu-color="brand"] .side-nav .menuitem-active > a::before{
    content:"";
    position:absolute;
    left:.45rem;
    top: 14%;
    bottom: 14%;
    width: 3px;
    border-radius: 99px;
    background: linear-gradient(
        180deg,
        rgba(var(--ct-primary-rgb),0) 0%,
        rgba(var(--ct-primary-rgb),.95) 50%,
        rgba(var(--ct-primary-rgb),0) 100%
    );
}

/* =========================================================
   5) Inputs + botones: focus ring Arkanari
   ========================================================= */
.form-control:focus,
.form-select:focus{
    border-color: rgba(var(--ct-primary-rgb), .55);
    box-shadow: 0 0 0 .20rem rgba(var(--ct-primary-rgb), .18);
}

/* Bootstrap 5 button tokens */
.btn-primary{
    --bs-btn-bg: var(--ark-gold);
    --bs-btn-border-color: var(--ark-gold);
    --bs-btn-hover-bg: var(--ark-gold-hover);
    --bs-btn-hover-border-color: var(--ark-gold-hover);
    --bs-btn-active-bg: var(--ark-gold-active);
    --bs-btn-active-border-color: var(--ark-gold-active);
    --bs-btn-focus-shadow-rgb: var(--ct-primary-rgb);
}

/* =========================================================
   6) Cards “premium” (tu ajuste + shadow/radius)
   ========================================================= */
.card{
    border-color: rgba(145,118,52,.12);
    border-radius: .90rem;
    box-shadow: 0 12px 35px rgba(0,0,0,.06);
}
.card-header{
    border-bottom-color: rgba(145,118,52,.12);
}

[data-bs-theme="dark"] .card{
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
}