/* KAVITOR — kavitor.chrome.css: el CHROME compartido (navbar+menús+banner+toggle+footer+swap de tema).
   Lo carga head_kavitor.php para TODA página migrada — antes vivía por error en landing.css (módulo de la home). */
@layer components {
  /* La barra de scroll aparece/desaparece segun la pagina y TODO el header bailaba ~15px.
     Gutter reservado SIEMPRE → ancho de viewport estable en todo el programa. */
  html { scrollbar-gutter: stable; }

  /* ===== Navbar ===== */
  .kv-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg-base) 88%, transparent); backdrop-filter: blur(8px); border-bottom: var(--bw-1) solid var(--border-subtle); }
  /* Fluida (como el navbar clásico): extremos, pero metidos "un poquito" (40px) */
  .kv-nav__inner { display: flex; align-items: center; gap: var(--sp-8); height: 64px; padding-inline: var(--sp-9); }
  .kv-nav__logo { display: flex; align-items: center; }
  .kv-nav__logo img { height: 18px; width: auto; }
  .kv-nav__links { display: flex; align-items: center; gap: var(--sp-7); list-style: none; padding: 0; margin: 0 auto 0 var(--sp-8); } /* aire extra logo→Producto (petición 2026-07-20) */
  .kv-nav__links > li { display: flex; align-items: center; }
  .kv-nav__links a, .kv-nav__links .kv-menu > summary { font-size: var(--fs-sm); line-height: 1; }
  .kv-nav__links a { color: var(--text-secondary); text-decoration: none; font-size: var(--fs-sm); }
  .kv-nav__links a:hover { color: var(--text-primary); }
  /* Activo = SOLO color (Linear): la línea azul de antes metía alto extra y desplazaba el texto */
  .kv-nav__links a.is-active, .kv-nav__links .kv-menu.is-active > summary { color: var(--text-primary); }
  .kv-nav__cta { display: flex; align-items: center; gap: var(--sp-4); } /* center: los links/summary se estiraban y el texto quedaba arriba */

  /* ===== Swap de assets por tema ===== */
  .only-light { display: none; }
  [data-theme="light"] .only-dark { display: none; }
  [data-theme="light"] .only-light { display: block; }

  /* ===== Navbar: sesión, menús, banner, toggle ===== */
  .kv-banner { display: flex; justify-content: center; gap: var(--sp-5); align-items: center; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); background: color-mix(in srgb, var(--warning) 18%, var(--bg-base)); border-bottom: var(--bw-1) solid color-mix(in srgb, var(--warning) 40%, transparent); transition: opacity .4s var(--ease); }
  .kv-banner--danger { background: color-mix(in srgb, var(--danger) 18%, var(--bg-base)); border-bottom-color: color-mix(in srgb, var(--danger) 40%, transparent); }
  .kv-banner a { color: var(--text-primary); }

  .kv-menu { position: relative; }
  .kv-menu > summary { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; list-style: none; color: var(--text-secondary); font-size: var(--fs-sm); }
  .kv-menu > summary::-webkit-details-marker { display: none; }
  .kv-menu > summary::after { content: ""; width: 6px; height: 6px; border-right: var(--bw-1) solid currentColor; border-bottom: var(--bw-1) solid currentColor; transform: rotate(45deg) translateY(-2px); }
  .kv-menu > summary:hover { color: var(--text-primary); }
  .kv-menu__panel { position: absolute; top: calc(100% + 10px); left: 0; min-width: 230px; display: grid; background: var(--bg-raised); border: var(--bw-1) solid var(--border); border-radius: var(--radius-modal); padding: var(--sp-3); box-shadow: var(--elev-2); z-index: 60; }
  .kv-menu__panel--right { left: auto; right: 0; }
  .kv-menu__panel a { display: block; padding: var(--sp-3) var(--sp-4); color: var(--text-primary); text-decoration: none; font-size: var(--fs-sm); border-radius: var(--radius-control); }
  .kv-menu__panel a:hover { background: var(--hover-bg); }
  .kv-menu__head { padding: var(--sp-3) var(--sp-4) var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
  .kv-menu__panel a.kv-menu__danger { color: var(--danger); } /* especificidad, no !important (§8.3) */
  .kv-menu--user > summary { color: var(--text-primary); }
  .kv-menu__name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kv-avatar { width: 26px; height: 26px; border-radius: var(--radius-full); object-fit: cover; }
  .kv-avatar--initial { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-overlay); border: var(--bw-1) solid var(--border); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
  .kv-badge-architect { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--plan-architect); border: var(--bw-1) solid color-mix(in srgb, var(--plan-architect) 45%, transparent); border-radius: var(--radius-control); padding: 1px var(--sp-3); }
  /* Toggle y Mis proyectos SIN borde (petición 2026-07-20): el nav respira, hover = wash */
  .kv-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--control-md); height: var(--control-md); background: transparent; border: 0; border-radius: var(--radius-control); cursor: pointer; }
  .kv-theme-toggle svg { width: 14px; height: 14px; stroke: var(--text-secondary); fill: none; stroke-width: 1.5; }
  .kv-theme-toggle:hover { background: var(--hover-bg); }
  .kv-theme-toggle:hover svg { stroke: var(--text-primary); }
  /* Swap sol/luna: en dark se ofrece el sol (→ claro), en claro la luna (→ oscuro) */
  .kv-theme-toggle .kv-icon-sun { display: none; }
  :root[data-theme="dark"] .kv-theme-toggle .kv-icon-sun { display: block; }
  :root[data-theme="dark"] .kv-theme-toggle .kv-icon-moon { display: none; }
  .kv-nav .k-btn--ghost, .kv-nav .k-btn--ghost:hover { border-color: transparent; }

  /* ===== Footer (fluido, distribución como el header) ===== */
  .kv-footer { border-top: var(--bw-1) solid var(--border-subtle); padding: var(--sp-8) 0; }
  .kv-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6); padding-inline: var(--sp-9); }
  .kv-footer__brand { display: flex; align-items: center; gap: var(--sp-4); }
  .kv-footer__brand img { height: 14px; }
  .kv-footer small { color: var(--text-muted); }
  .kv-footer__right { display: flex; align-items: center; gap: var(--sp-8); }
  .kv-footer nav { display: flex; gap: var(--sp-6); }
  .kv-footer nav a { color: var(--text-secondary); font-size: var(--fs-xs); text-decoration: none; }
  .kv-footer nav a:hover { color: var(--text-primary); }
  .kv-footer__social { display: flex; align-items: center; gap: var(--sp-6); }
  .kv-footer__social svg { width: 19px; height: 19px; stroke: var(--text-primary); opacity: .8; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--dur-fast) var(--ease); }
  .kv-footer__social a:hover svg { opacity: 1; }
  .kv-footer__social .is-soon { opacity: .45; cursor: default; }

  /* ===== Tool-cards del hero — las PROTAGONISTAS (arranque con borrador automático) ===== */
  .kv-tools { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-7); }
  .kv-tool { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-7) var(--sp-7); border: var(--bw-1) solid var(--border); border-radius: var(--radius-control); text-decoration: none; color: var(--text-primary); background: var(--bg-sunken); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .kv-tool:hover { border-color: var(--selection-indicator); background: var(--bg-surface); color: var(--text-primary); }
  .kv-tool svg { width: 28px; height: 28px; flex: 0 0 auto; stroke: var(--selection-indicator); fill: none; stroke-width: 1.5; }
  .kv-tool strong { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-bottom: var(--sp-1); }
  .kv-tool span:not(.kv-tool__go) { display: block; font-size: var(--fs-xs); color: var(--text-secondary); }
  .kv-tool__go { margin-left: auto; font-family: var(--font-mono); color: var(--text-muted); transition: transform var(--dur-fast) var(--ease); }
  .kv-tool:hover .kv-tool__go { transform: translateX(3px); color: var(--selection-indicator); }
  /* Kavitor Studio (el editor) — identidad ligada al plan Architect: hover en su naranja */
  .kv-tool--studio strong { text-transform: uppercase; letter-spacing: .05em; }
  .kv-tool--studio svg { stroke: var(--plan-architect); }
  .kv-tool--studio:hover { border-color: var(--plan-architect); }
  .kv-tool--studio:hover .kv-tool__go { color: var(--plan-architect); }

  /* ===== Herramientas en el nav (logueado): texto con hover por ROL — azul calc, naranja Studio ===== */
  .kv-nav__tool { font-size: var(--fs-sm); color: var(--text-secondary); text-decoration: none; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-control); white-space: nowrap; }
  .kv-nav__tool:hover { color: var(--selection-indicator); background: var(--selection-wash); }
  .kv-nav__tool--studio:hover { color: var(--plan-architect); background: color-mix(in srgb, var(--plan-architect) 12%, transparent); }

  /* ===== Banner de cookies (partial compartido; en legacy lo pinta style.css sin capa) ===== */
  #cookie-banner { position: fixed; inset: auto 0 0 0; z-index: 9999; display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; padding: var(--sp-6) var(--sp-7); background: color-mix(in srgb, var(--bg-raised) 96%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: var(--bw-1) solid var(--border); }
  .cookie-banner-text { flex: 1; min-width: 260px; margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); max-width: none; }
  .cookie-banner-text strong { color: var(--text-primary); }
  .cookie-banner-text a { color: var(--link); text-decoration: none; }
  .cookie-banner-text a:hover { text-decoration: underline; }
  .cookie-banner-actions { display: flex; gap: var(--sp-4); flex-shrink: 0; }
  .cookie-btn-accept { padding: var(--sp-3) var(--sp-7); border: 0; border-radius: var(--radius-control); cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); background: var(--action-primary-bg); color: var(--on-accent); }
  .cookie-btn-accept:hover { background: var(--action-primary-hover); }
  .cookie-btn-info { display: inline-flex; align-items: center; padding: var(--sp-3) var(--sp-5); border: var(--bw-1) solid var(--border); border-radius: var(--radius-control); font-size: var(--fs-sm); color: var(--text-secondary); text-decoration: none; background: transparent; }
  .cookie-btn-info:hover { border-color: var(--border-strong); color: var(--text-primary); }

  /* ===== Menú móvil (hamburguesa LEGO) ===== */
  .kv-nav__burger { display: none; }
  .kv-nav__burger > summary { padding: var(--sp-2); border-radius: var(--radius-control); }
  .kv-nav__burger > summary::after { content: none; } /* sin chevron: el icono ya lo dice */
  .kv-nav__burger > summary:hover { background: var(--hover-bg); }
  .kv-nav__burger svg { width: 18px; height: 18px; stroke: var(--text-secondary); fill: none; stroke-width: 1.6; display: block; }
  .kv-nav__burger > summary:hover svg { stroke: var(--text-primary); }

  /* Responsive del chrome */
  @media (max-width: 960px) {
    .kv-nav__links { display: none; }
    .kv-nav__tool { display: none; }
    .kv-nav__burger { display: block; margin-left: auto; }
    /* padding-inline de escritorio (sp-9) no cabe en 390px con brand+burger+avatar+toggle */
    .kv-nav__inner { gap: var(--sp-4); padding-inline: var(--sp-5); }
    /* móvil: solo avatar — con el nombre y el botón Proyectos (ya está en la hamburguesa),
       brand+burger+cta no cabían en 390px y TODA página con sesión desbordaba en horizontal */
    .kv-menu--user .kv-menu__name { display: none; }
    .kv-menu--user > summary::after { content: none; }
    .kv-nav__cta > .k-btn { display: none; }
  }
}