/* ──────────────────────────────────────────────
   Demo Kukuri · Solar · overrides + chatbot widget
   Apple-style B/N + acento ámbar (sol)
   ────────────────────────────────────────────── */
:root{
    --kk-bg:#FFFFFF;
    --kk-fg:#0A0A0A;
    --kk-mute:#6E6E73;
    --kk-faint:#86868B;
    --kk-line:#E5E5EA;
    --kk-accent:#FFB400;
    --kk-accent-dark:#E8A317;
    --kk-success:#30D158;
    --kk-info:#0071E3;
    --kk-warn:#FF9500;
    --kk-danger:#FF3B30;
}

/* Sidebar brand reusa el negro Kukuri */
.brand-mark rect{ fill:#0A0A0A; }

/* Acento ámbar para botones primarios y elementos clave en este demo */
.btn-primary{ background:#0A0A0A; color:#fff; }
.btn-primary:hover{ background:#1f1f1f; }

.card-stat-trend.positive{ color:var(--kk-success); }

/* ───── Login split panel rebrand ───── */
.login-split-brand{
    background:#0A0A0A;
    color:#fff;
}
.login-split-mark{
    width:48px; height:48px; border-radius:12px;
    background:#FFB400;
    display:flex; align-items:center; justify-content:center;
    font-family:Inter,sans-serif; font-weight:700; font-size:24px; color:#0A0A0A;
}
.login-split-tagline h2{ color:#fff; font-size:38px; line-height:1.05; letter-spacing:-0.025em; margin:0 0 16px; }
.login-split-tagline p{ color:#A1A1A6; font-size:17px; line-height:1.5; max-width:420px; }
.login-split-meta{ display:flex; gap:32px; margin-top:48px; color:#fff; font-size:13px; }
.login-split-meta strong{ display:block; font-size:32px; font-weight:600; color:#FFB400; line-height:1; margin-bottom:4px; }

/* ───── Public landing styles ───── */
.kk-public{ background:#FFFFFF; color:#0A0A0A; min-height:100vh; }
.kk-nav{
    position:sticky; top:0; z-index:50;
    backdrop-filter:saturate(180%) blur(20px); background:rgba(255,255,255,.8);
    border-bottom:1px solid var(--kk-line);
}
.kk-nav-wrap{ max-width:1200px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.kk-nav-brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; color:#0A0A0A; text-decoration:none; }
.kk-nav-brand .mark{ width:28px; height:28px; border-radius:7px; background:#0A0A0A; color:#fff; font-weight:700; display:grid; place-items:center; font-size:14px; }
.kk-nav-brand .sub{ color:var(--kk-mute); font-weight:400; font-size:13px; }
.kk-nav-cta{ display:flex; gap:10px; }
.kk-pill{
    display:inline-flex; align-items:center; padding:10px 22px; border-radius:980px;
    font-size:14px; font-weight:500; text-decoration:none; transition:transform .18s ease, background .18s ease;
}
.kk-pill-primary{ background:#0A0A0A; color:#fff; }
.kk-pill-primary:hover{ background:#1f1f1f; }
.kk-pill-ghost{ background:transparent; color:#0A0A0A; border:1px solid var(--kk-line); }
.kk-pill-ghost:hover{ background:#F5F5F7; }

.kk-hero{ padding:96px 24px 80px; text-align:center; max-width:900px; margin:0 auto; }
.kk-hero h1{ font-size:64px; line-height:1.05; letter-spacing:-0.04em; margin:0 0 24px; font-weight:700; }
.kk-hero p{ font-size:21px; color:var(--kk-mute); max-width:640px; margin:0 auto 36px; }
.kk-hero-meta{ display:flex; justify-content:center; gap:48px; margin-top:60px; flex-wrap:wrap; color:#0A0A0A; font-size:13px; }
.kk-hero-meta strong{ display:block; font-size:36px; font-weight:600; color:#0A0A0A; line-height:1; margin-bottom:6px; }
.kk-hero-meta strong span{ color:#FFB400; }

.kk-section{ max-width:1200px; margin:0 auto; padding:80px 24px; }
.kk-section h2{ font-size:42px; letter-spacing:-0.025em; margin:0 0 12px; font-weight:700; }
.kk-section .sub{ color:var(--kk-mute); font-size:18px; margin-bottom:48px; max-width:600px; }

.kk-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.kk-card{
    background:#F5F5F7; border-radius:22px; padding:32px;
    transition:transform .18s ease;
}
.kk-card:hover{ transform:translateY(-3px); }
.kk-card h3{ font-size:22px; margin:8px 0 10px; letter-spacing:-0.015em; font-weight:600; }
.kk-card p{ color:var(--kk-mute); font-size:15px; line-height:1.5; margin:0; }
.kk-card .icon{ width:48px; height:48px; border-radius:14px; background:#FFB400; color:#0A0A0A; display:grid; place-items:center; font-size:22px; }

.kk-stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:24px; margin-bottom:32px; }
.kk-stat-card{ background:#fff; border:1px solid var(--kk-line); border-radius:18px; padding:24px; }
.kk-stat-card .label{ color:var(--kk-mute); font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:0.05em; }
.kk-stat-card .value{ font-size:32px; font-weight:600; letter-spacing:-0.02em; margin-top:6px; }

.kk-cta{ background:#0A0A0A; color:#fff; padding:80px 24px; text-align:center; }
.kk-cta h2{ font-size:42px; letter-spacing:-0.025em; margin:0 0 16px; }
.kk-cta p{ color:#A1A1A6; font-size:18px; margin:0 0 32px; }
.kk-cta .kk-pill-primary{ background:#FFB400; color:#0A0A0A; }
.kk-cta .kk-pill-primary:hover{ background:#FFC42E; }

.kk-foot{ text-align:center; padding:32px 24px; color:var(--kk-faint); font-size:13px; border-top:1px solid var(--kk-line); }
.kk-foot a{ color:var(--kk-mute); text-decoration:none; margin:0 8px; }
.kk-foot a:hover{ color:#0A0A0A; }

/* ───── CHATBOT WIDGET ───── */
.kk-chat-fab{
    position:fixed; right:24px; bottom:24px; z-index:9000;
    width:60px; height:60px; border-radius:50%;
    background:#0A0A0A; color:#fff;
    display:grid; place-items:center;
    box-shadow:0 8px 28px rgba(0,0,0,.18);
    cursor:pointer; border:none;
    transition:transform .18s ease;
}
.kk-chat-fab:hover{ transform:scale(1.05); }
.kk-chat-fab svg{ width:28px; height:28px; }
.kk-chat-fab.is-open{ background:#FFB400; color:#0A0A0A; }
.kk-chat-fab .dot{
    position:absolute; top:6px; right:6px; width:14px; height:14px; border-radius:50%;
    background:#FFB400; border:2px solid #0A0A0A;
}

.kk-chat-panel{
    position:fixed; right:24px; bottom:96px; z-index:9000;
    width:380px; max-width:calc(100vw - 48px);
    height:560px; max-height:calc(100vh - 120px);
    background:#fff; border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.22);
    display:flex; flex-direction:column;
    overflow:hidden;
    transform:translateY(20px) scale(.95); opacity:0; pointer-events:none;
    transition:transform .22s ease, opacity .22s ease;
}
.kk-chat-panel.is-open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }

.kk-chat-head{
    background:#0A0A0A; color:#fff; padding:18px 20px;
    display:flex; align-items:center; gap:12px;
}
.kk-chat-head .avatar{
    width:38px; height:38px; border-radius:50%; background:#FFB400; color:#0A0A0A;
    display:grid; place-items:center; font-weight:700; font-size:16px;
}
.kk-chat-head .name{ font-weight:600; font-size:15px; }
.kk-chat-head .status{ font-size:12px; color:#A1A1A6; display:flex; align-items:center; gap:6px; }
.kk-chat-head .status::before{ content:""; width:7px; height:7px; border-radius:50%; background:#30D158; }

.kk-chat-body{ flex:1; overflow-y:auto; padding:20px; background:#FAFAFA; }
.kk-msg{ margin-bottom:12px; display:flex; gap:8px; max-width:85%; }
.kk-msg.bot{ align-self:flex-start; flex-direction:row; }
.kk-msg.user{ align-self:flex-end; flex-direction:row-reverse; margin-left:auto; }
.kk-msg .bubble{
    padding:10px 14px; border-radius:18px; font-size:14px; line-height:1.45;
    word-wrap:break-word;
}
.kk-msg.bot .bubble{ background:#fff; color:#0A0A0A; border:1px solid var(--kk-line); border-top-left-radius:4px; }
.kk-msg.user .bubble{ background:#0A0A0A; color:#fff; border-top-right-radius:4px; }

.kk-chat-typing{ display:inline-flex; gap:3px; align-items:center; padding:10px 14px; background:#fff; border:1px solid var(--kk-line); border-radius:18px; }
.kk-chat-typing span{ width:6px; height:6px; border-radius:50%; background:#86868B; animation:kktyp 1.2s infinite; }
.kk-chat-typing span:nth-child(2){ animation-delay:.2s; }
.kk-chat-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes kktyp{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.kk-chat-foot{
    padding:14px 16px; border-top:1px solid var(--kk-line); background:#fff;
    display:flex; gap:8px;
}
.kk-chat-foot input{
    flex:1; border:1px solid var(--kk-line); border-radius:12px; padding:10px 14px; font:inherit; font-size:14px;
}
.kk-chat-foot input:focus{ outline:none; border-color:#0A0A0A; }
.kk-chat-foot button{
    border:none; background:#0A0A0A; color:#fff; padding:0 18px; border-radius:12px;
    font-weight:600; cursor:pointer; font-size:14px;
}
.kk-chat-foot button:disabled{ opacity:.4; cursor:wait; }

.kk-chat-quick{ display:flex; flex-wrap:wrap; gap:6px; padding:0 20px 12px; background:#FAFAFA; }
.kk-chat-quick button{
    background:#fff; border:1px solid var(--kk-line); padding:6px 12px; border-radius:980px;
    font-size:12px; cursor:pointer; color:#0A0A0A;
}
.kk-chat-quick button:hover{ background:#0A0A0A; color:#fff; }

@media (max-width:600px){
    .kk-chat-panel{ right:8px; bottom:80px; left:8px; width:auto; max-width:none; height:70vh; }
    .kk-hero h1{ font-size:42px; }
    .kk-hero p{ font-size:17px; }
    .kk-section h2{ font-size:30px; }
    .kk-section{ padding:60px 16px; }
}