/* ===========================================================
   BONNIE · enhancement layer v2 · UX completa
   Capa no-invasiva sobre los HTMLs de Claude Design.
   Cubre landing + cliente + admin.
   =========================================================== */

/* === Progress bar fijo de scroll ============================ */
.kk-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 200; pointer-events: none;
  background: transparent;
}
.kk-progress::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--kk-progress, 0%);
  background: linear-gradient(90deg, var(--sage, #7A8A6E), var(--terracotta, #C97B5C));
  transition: width .12s linear;
}

/* === Header shrink ========================================== */
.site-header.is-scrolled {
  height: 48px !important;
  background: rgba(251, 250, 247, 0.92) !important;
  box-shadow: 0 1px 0 rgba(11,11,10,0.05);
  border-bottom-color: transparent !important;
}

/* === Scroll-spy · link activo en header ===================== */
.site-header .nav a.kk-active {
  color: var(--ink, #0B0B0A) !important;
  position: relative;
}
.site-header .nav a.kk-active:not(.nav-cta):not(.nav-access)::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--sage, #7A8A6E);
  border-radius: 999px;
  animation: kk-underline-in .35s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes kk-underline-in {
  from { transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* === Scroll reveal ========================================== */
.kk-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              transform .9s var(--ease-out, cubic-bezier(.16,1,.3,1));
  will-change: opacity, transform;
}
.kk-reveal.in {
  opacity: 1;
  transform: none;
}
.kk-reveal.kk-r-1 { transition-delay: .05s; }
.kk-reveal.kk-r-2 { transition-delay: .12s; }
.kk-reveal.kk-r-3 { transition-delay: .20s; }
.kk-reveal.kk-r-4 { transition-delay: .28s; }
.kk-reveal.kk-r-5 { transition-delay: .36s; }

/* === Image fade-in ========================================== */
.kk-fade-img {
  opacity: 0;
  transition: opacity .6s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.kk-fade-img.kk-loaded { opacity: 1; }

/* === Card hover lift ======================================== */
.programa, .pillar, .recurso, .clienta-card, .lead-card,
[class*="card"]:not(.cta-card):not(.no-lift):not(.kpi) {
  transition:
    transform .28s var(--ease-apple, cubic-bezier(.22,.61,.36,1)),
    box-shadow .28s var(--ease-apple, cubic-bezier(.22,.61,.36,1)),
    border-color .28s ease;
}
.programa:hover, .pillar:hover, .recurso:hover,
.clienta-card:hover, .lead-card:hover,
[class*="card"]:hover:not(.cta-card):not(.no-lift):not(.kpi) {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift, 0 24px 48px rgba(11,11,10,.10));
}

/* === KPI · sutil hover ====================================== */
.kpi {
  transition: transform .3s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              box-shadow .3s ease;
}
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11,11,10,.06);
}

/* === CTAs magnetic + glow halo ============================= */
.btn-primary, .nav-cta, .cta-primary, .new-entry-btn {
  position: relative;
  transition:
    transform .25s var(--ease-apple, cubic-bezier(.22,.61,.36,1)),
    box-shadow .25s var(--ease-apple, cubic-bezier(.22,.61,.36,1)),
    background-color .25s ease;
}
.btn-primary::after, .nav-cta::after, .cta-primary::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 16px 32px rgba(122, 138, 110, 0);
  pointer-events: none;
  transition: box-shadow .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.btn-primary:hover::after, .nav-cta:hover::after, .cta-primary:hover::after {
  box-shadow: 0 16px 32px rgba(122, 138, 110, .22);
}
.btn-primary .arrow, .nav-cta .arrow {
  display: inline-block;
  transition: transform .3s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.btn-primary:hover .arrow, .nav-cta:hover .arrow {
  transform: translateX(4px);
}

/* === Anchor scroll con offset ============================== */
section[id], div[id] { scroll-margin-top: 80px; }

/* === Focus rings ============================================ */
a:focus-visible, button:focus-visible, .btn-primary:focus-visible {
  outline: 2px solid var(--sage, #7A8A6E);
  outline-offset: 4px;
  border-radius: inherit;
}

/* === Selection ============================================== */
::selection { background: var(--ink, #0B0B0A); color: var(--paper, #FBFAF7); }

/* === Cursor pointer correctness ============================ */
[onclick], [role="button"], .nav-item, .diary-tab,
[class*="card"]:not(.no-click):not(.no-lift):not(.kpi),
.programa, .pillar, .recurso, .clienta-card, .lead-card,
button:not(:disabled) { cursor: pointer; }

/* === Smooth scroll ========================================== */
html { scroll-behavior: smooth; }

/* === Portrait shimmer (landing hero) ======================== */
.portrait { position: relative; overflow: hidden; }
.portrait::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 40%,
    rgba(255,255,255,.15) 50%,
    transparent 60%);
  transform: translateX(-100%);
  pointer-events: none;
  transition: transform 1.2s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.portrait:hover::before { transform: translateX(100%); }
.portrait img { transition: transform .6s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.portrait:hover img { transform: scale(1.02); }

/* === SPA view transitions (cliente + admin) ================ */
[data-view-root] > .view-active {
  animation: kk-view-enter .4s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes kk-view-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* === Tab indicator suave =================================== */
.diary-tab, .nav-item, [role="tab"] {
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.diary-tab.active, .nav-item.active, [role="tab"][aria-selected="true"] {
  transition: background .22s ease, color .22s ease;
}

/* === Back-to-top button ==================================== */
.kk-totop {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--ink, #0B0B0A);
  color: var(--paper, #FBFAF7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 0;
  box-shadow: 0 8px 24px rgba(11,11,10,.18);
  opacity: 0; pointer-events: none;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s var(--ease-out, cubic-bezier(.16,1,.3,1)), background .2s;
  z-index: 90;
}
.kk-totop.show { opacity: 1; pointer-events: auto; transform: none; }
.kk-totop:hover { background: var(--sage-deep, #5E6E54); transform: translateY(-2px); }
.kk-totop svg { width: 18px; height: 18px; }

/* === Toast notifications =================================== */
.kk-toast-stack {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex; flex-direction: column-reverse;
  gap: 10px; pointer-events: none;
}
.kk-toast {
  pointer-events: auto;
  background: var(--ink, #0B0B0A);
  color: var(--paper, #FBFAF7);
  padding: 12px 18px;
  border-radius: 12px;
  font-family: var(--body, sans-serif);
  font-size: 13px; font-weight: 500;
  box-shadow: 0 12px 32px rgba(11,11,10,.30);
  display: flex; align-items: center; gap: 10px;
  max-width: 380px;
  animation: kk-toast-in .35s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.kk-toast.success { background: var(--sage-deep, #5E6E54); }
.kk-toast.error { background: #b04a3d; }
.kk-toast.is-out { animation: kk-toast-out .25s ease-in both; }
@keyframes kk-toast-in {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
@keyframes kk-toast-out {
  to { opacity: 0; transform: translateY(20px) scale(.95); }
}

/* === Tooltips suaves ======================================== */
[data-tooltip] { position: relative; }
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--ink, #0B0B0A);
  color: var(--paper, #FBFAF7);
  padding: 6px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--ease-out, cubic-bezier(.16,1,.3,1));
  z-index: 100;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* === Skeleton loader ======================================== */
.kk-skeleton {
  background: linear-gradient(90deg,
    rgba(11,11,10,.04) 0%,
    rgba(11,11,10,.08) 50%,
    rgba(11,11,10,.04) 100%);
  background-size: 200% 100%;
  animation: kk-skeleton 1.4s linear infinite;
  border-radius: 6px;
}
@keyframes kk-skeleton {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

/* === Count-up KPIs · sutil glow al actualizar ============== */
.kpi .value.kk-count-pulse {
  animation: kk-pulse .8s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
@keyframes kk-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* === Mobile · drawer trigger en landing ==================== */
.kk-burger {
  display: none;
  width: 36px; height: 36px;
  border: 1px solid rgba(11,11,10,.10);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  align-items: center; justify-content: center;
  position: relative;
}
.kk-burger span {
  display: block; width: 16px; height: 1.5px;
  background: var(--ink, #0B0B0A);
  position: absolute;
  transition: transform .3s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              opacity .2s ease;
}
.kk-burger span:nth-child(1) { transform: translateY(-5px); }
.kk-burger span:nth-child(3) { transform: translateY(5px); }
.kk-burger.is-open span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.kk-burger.is-open span:nth-child(2) { opacity: 0; }
.kk-burger.is-open span:nth-child(3) { transform: translateY(0) rotate(-45deg); }
@media (max-width: 760px) {
  .kk-burger { display: inline-flex; }
}

.kk-drawer {
  position: fixed;
  top: 56px; left: 0; right: 0; bottom: 0;
  background: rgba(251, 250, 247, 0.98);
  backdrop-filter: saturate(180%) blur(20px);
  z-index: 48;
  display: flex; flex-direction: column;
  padding: 40px var(--pad-x, 24px);
  gap: 8px;
  transform: translateY(-100%);
  transition: transform .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
  pointer-events: none;
}
.kk-drawer.is-open {
  transform: translateY(0);
  pointer-events: auto;
}
.kk-drawer a {
  font-family: var(--display, sans-serif);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink, #0B0B0A);
  padding: 12px 0;
  border-bottom: 1px solid rgba(11,11,10,.06);
  text-decoration: none;
}
.kk-drawer a em {
  font-family: var(--serif, serif);
  font-style: italic;
  color: var(--sage-deep, #5E6E54);
  font-weight: 400;
}
.kk-drawer .nav-cta-mobile {
  margin-top: auto;
  background: var(--ink, #0B0B0A);
  color: var(--paper, #FBFAF7);
  text-align: center;
  padding: 18px;
  border-radius: 12px;
  font-size: 15px;
  border-bottom: 0;
}

/* === Print styles =========================================== */
@media print {
  .site-header, .kk-progress, .kk-totop, .kk-toast-stack,
  .marquee, .scroll-cue, .kk-drawer, .kk-burger { display: none !important; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
}

/* === Reduce motion ========================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01s !important;
    animation-duration: .01s !important;
    animation-iteration-count: 1 !important;
  }
  .kk-reveal { opacity: 1; transform: none; }
  .kk-fade-img { opacity: 1; }
  html { scroll-behavior: auto; }
}

/* === Mobile · tweaks generales ============================ */
@media (max-width: 640px) {
  .kk-reveal { transform: translateY(16px); }
  body { font-size: 15.5px; }
  .kk-totop { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}