/* KAVITOR — components (capa 4/6): componentes canónicos. Crecen aquí, no en cada página. */
@layer components {
  /* --- Botones (§7/§8: UN relleno azul dominante por vista) --- */
  .k-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
    height: var(--control-lg); padding-inline: var(--sp-6);
    font-weight: var(--fw-medium); font-size: var(--fs-base);
    border: var(--bw-1) solid transparent; border-radius: var(--radius-control);
    text-decoration: none; cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .k-btn--primary { background: var(--action-primary-bg); color: var(--on-accent); }
  .k-btn--primary:hover { background: var(--action-primary-hover); color: var(--on-accent); }
  .k-btn--primary:active { background: var(--action-primary-pressed); }
  .k-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border); }
  .k-btn--ghost:hover { border-color: var(--border-strong); background: var(--hover-bg); }
  .k-btn--architect { background: var(--plan-architect); color: var(--on-plan-architect); font-weight: var(--fw-semibold); }
  .k-btn--architect:hover { filter: brightness(1.06); color: var(--on-plan-architect); }
  .k-btn--sm { height: var(--control-md); padding-inline: var(--sp-5); font-size: var(--fs-sm); }

  /* --- Label mono en caps (eyebrows, marcadores de sección) --- */
  .k-label {
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium);
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary);
  }
  .k-label--accent { color: var(--selection-indicator); }

  /* --- Regla corta azul del hero (moodboard) --- */
  .k-rule { width: 32px; height: var(--bw-2); background: var(--selection-indicator); border: 0; margin: 0; }

  /* --- Acordeón nativo (FAQ) --- */
  .k-acc { border-top: var(--bw-1) solid var(--border-subtle); }
  .k-acc:last-of-type { border-bottom: var(--bw-1) solid var(--border-subtle); }
  .k-acc > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
    padding: var(--sp-6) var(--sp-2); cursor: pointer; list-style: none;
    font-weight: var(--fw-medium); font-size: var(--fs-md);
  }
  .k-acc > summary::-webkit-details-marker { display: none; }
  .k-acc > summary::after {
    content: ""; flex: 0 0 auto; width: 10px; height: 10px;
    border-right: var(--bw-1) solid var(--text-secondary); border-bottom: var(--bw-1) solid var(--text-secondary);
    transform: rotate(45deg); transition: transform var(--dur-base) var(--ease);
  }
  .k-acc[open] > summary::after { transform: rotate(-135deg); }
  .k-acc > .k-acc__body { padding: 0 var(--sp-2) var(--sp-6); color: var(--text-secondary); max-width: 70ch; overflow: hidden; }
  /* El despliegue suave lo anima landing.js (WAAPI midiendo altura real) — CSS solo prepara el overflow. */

  /* --- Listas de características (planes) --- */
  .k-checks { list-style: none; padding: 0; display: grid; gap: var(--sp-4); font-size: var(--fs-sm); }
  /* li en block con marca absoluta: con flex, el <strong> y el texto eran items separados y abria huecos */
  .k-checks li { display: block; position: relative; padding-left: calc(1em + var(--sp-3)); }
  .k-checks li::before { content: "✓"; color: var(--success); font-family: var(--font-mono); position: absolute; left: 0; }
  .k-checks li.is-off { color: var(--text-muted); }
  .k-checks li.is-off::before { content: "×"; color: var(--text-muted); }
  .k-checks strong { font-weight: var(--fw-semibold); }

  /* --- Stat factual (fila bajo el hero) --- */
  .k-stat { display: grid; gap: var(--sp-2); }
  .k-stat__value { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-medium); }
  .k-stat__label { font-size: var(--fs-xs); color: var(--text-secondary); }

  /* --- Tamaños/anchos extra de k-btn --- */
  .k-btn--lg { height: var(--control-lg); padding-inline: var(--sp-7); font-size: var(--fs-base); }
  .k-btn--block { width: 100%; }

  /* --- Diálogo nativo <dialog> (el sustituto de los modales Bootstrap, R3) --- */
  .k-dialog { margin: auto; background: var(--bg-surface); color: var(--text-primary); border: var(--bw-1) solid var(--border); border-radius: var(--radius-panel, 4px); padding: 0; width: min(640px, calc(100vw - 32px)); box-shadow: var(--elev-3); } /* margin:auto = re-centrar (el reset lo puso a 0) */
  .k-dialog::backdrop { background: rgba(0, 0, 0, .55); }
  .k-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-6) var(--sp-7); border-bottom: var(--bw-1) solid var(--border-subtle); }
  .k-dialog__head h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: 0; }
  .k-dialog__close { background: transparent; border: 0; color: var(--text-secondary); cursor: pointer; font-size: 18px; line-height: 1; padding: var(--sp-2); border-radius: var(--radius-control); }
  .k-dialog__close:hover { color: var(--text-primary); background: var(--hover-bg); }
  .k-dialog__body { padding: var(--sp-7); }
  .k-dialog .kv-tools { grid-template-columns: 1fr; margin-top: 0; } /* en diálogo, las tools apiladas */

  /* --- Formularios de diálogo (auth: login/registro) --- */
  .k-dialog form { display: grid; gap: var(--sp-5); }
  .k-dialog__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .k-field label { display: block; font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: var(--sp-2); }
  .k-field .k-hint { font-size: var(--fs-micro); color: var(--text-muted); margin-top: var(--sp-2); }
  .k-input { width: 100%; background: var(--bg-sunken); border: var(--bw-1) solid var(--control-border, var(--border)); border-radius: var(--radius-control); color: var(--text-primary); font: inherit; font-size: 15px; padding: var(--sp-3) var(--sp-4); }
  .k-input::placeholder { color: var(--text-muted); }
  .k-input:focus { outline: var(--bw-2) solid var(--focus-ring); outline-offset: 1px; border-color: var(--border-strong); }
  .k-passfield { position: relative; }
  .k-passfield .k-input { padding-right: 40px; }
  .k-passfield__toggle { position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--text-muted); cursor: pointer; padding: var(--sp-2); border-radius: var(--radius-control); }
  .k-passfield__toggle:hover { color: var(--text-primary); }
  .k-sep { display: flex; align-items: center; gap: var(--sp-4); color: var(--text-muted); font-size: var(--fs-xs); }
  .k-sep::before, .k-sep::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
  .k-check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-xs); color: var(--text-secondary); }
  .k-check input[type="checkbox"] { accent-color: var(--selection-indicator); margin-top: 2px; flex: 0 0 auto; width: 14px; height: 14px; }
  .k-check a { color: var(--link); }
  .k-dialog__intro { text-align: center; display: grid; gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .k-dialog__intro p { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0; max-width: none; }
  .k-dialog__swap { text-align: center; font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--sp-2); }
  .k-dialog__swap a { color: var(--link); text-decoration: none; font-weight: var(--fw-medium); }
  .k-notice { display: block; text-align: center; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-control); font-size: var(--fs-sm); border: var(--bw-1) solid var(--border); background: var(--bg-raised); color: var(--text-primary); }
  .k-notice--ok { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
  .k-notice--ok strong, .k-notice--ok i { color: var(--success); }
  .k-notice--err { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
  .k-notice--err strong, .k-notice--err i { color: var(--danger); }
  .k-notice small { display: block; color: var(--text-secondary); margin-top: var(--sp-1); }
  .k-btn--google svg { width: 16px; height: 16px; flex: 0 0 auto; }

  /* --- Página standalone de auth (login/forgot/reset): la tarjeta reusa las primitivas del diálogo --- */
  .k-authwrap { display: flex; justify-content: center; padding: var(--sp-16) var(--sp-5); }
  .k-authcard { width: min(440px, 100%); background: var(--bg-surface); border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-panel, 4px); padding: var(--sp-9); display: grid; gap: var(--sp-5); }
  .k-authcard__title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin: 0; text-align: center; letter-spacing: 0; }
  .k-authcard__sub { color: var(--text-secondary); font-size: var(--fs-sm); text-align: center; margin: 0; max-width: none; }
  .k-authcard form { display: grid; gap: var(--sp-5); }

  /* --- Secciones de página (antes en landing.css; las comparten home y públicas) --- */
  .kv-section { padding: var(--sp-16) 0; }
  .kv-section--flush { padding-top: var(--sp-12); }
  .kv-section--rule-b { border-bottom: var(--bw-1) solid var(--border-subtle); padding-bottom: var(--sp-16); }
  .kv-section__head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-10); }
  .kv-section__head--center { justify-items: center; text-align: center; }
  .kv-section__head--center p { max-width: 60ch; color: var(--text-secondary); }

  /* --- Tarjetas de plan (compartidas por home y precios público) --- */
  .kv-planes { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--bw-1) solid var(--border-subtle); }
  .kv-plan { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-8) var(--sp-7); border-top: var(--bw-2) solid transparent; }
  .kv-plan + .kv-plan { border-left: var(--bw-1) solid var(--border-subtle); }
  .kv-plan--pro { border-top-color: var(--selection-indicator); background: var(--bg-sunken); }
  .kv-plan--architect { border-top-color: var(--plan-architect); }
  .kv-plan { transition: background var(--dur-base) var(--ease); }
  .kv-plan:hover { background: color-mix(in srgb, var(--kv-neutral-0) 5%, var(--bg-base)); }
  .kv-plan--pro:hover { background: color-mix(in srgb, var(--kv-blue-400) 10%, var(--bg-sunken)); }
  .kv-plan--architect:hover { background: color-mix(in srgb, var(--plan-architect) 9%, var(--bg-base)); }
  .kv-plan__tag { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
  .kv-plan--pro .kv-plan__tag { color: var(--selection-indicator); }
  .kv-plan--architect .kv-plan__tag { color: var(--plan-architect); }
  .kv-plan__name { font-size: var(--fs-xl); font-weight: var(--fw-medium); }
  .kv-plan__desc { color: var(--text-secondary); font-size: var(--fs-sm); }
  .kv-plan__for { color: var(--text-secondary); font-size: var(--fs-sm); }
  .kv-plan__pricing { display: grid; gap: var(--sp-3); justify-items: center; text-align: center; padding-block: var(--sp-4); }
  .kv-plan__price { font-size: 2.5rem; font-weight: var(--fw-semibold); line-height: 1; letter-spacing: -0.01em; }
  .kv-plan__price small { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: var(--fw-regular); }
  .kv-plan__price .old { font-size: var(--fs-lg); color: var(--text-muted); text-decoration: line-through; margin-right: var(--sp-3); font-weight: var(--fw-regular); }
  .kv-plan__badge { font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: var(--sp-1) var(--sp-4); border-radius: var(--radius-control); }
  .kv-plan__badge--anual { background: var(--success); color: var(--kv-neutral-1000); }
  .kv-plan__badge--oferta { background: var(--plan-architect); color: var(--kv-neutral-1000); }
  .kv-plan .k-btn { margin-top: auto; }
  .kv-planes__note { text-align: center; color: var(--text-secondary); font-size: var(--fs-sm); margin-top: var(--sp-6); }

  /* --- Testimonio (k-quote): cita real con autor y logo --- */
  .kv-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .k-quote { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-7); background: var(--bg-raised); border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-panel, 4px); height: 100%; }
  .k-quote__stars { color: var(--warning); font-size: var(--fs-sm); letter-spacing: 3px; }
  .k-quote__text { color: var(--text-primary); line-height: 1.6; margin: 0; font-size: var(--fs-sm); }
  .k-quote__author { display: flex; align-items: center; gap: var(--sp-4); margin-top: auto; }
  .k-quote__author img { height: 28px; object-fit: contain; opacity: .85; filter: brightness(1.35); }
  [data-theme="light"] .k-quote__author img { filter: none; }
  .k-quote__who strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
  .k-quote__who span { font-size: var(--fs-xs); color: var(--text-secondary); }

  @media (max-width: 880px) {
    .kv-planes, .kv-quotes { grid-template-columns: 1fr; }
    .kv-plan + .kv-plan { border-left: 0; border-top: var(--bw-1) solid var(--border-subtle); }
    .kv-plan--pro, .kv-plan--architect { border-top-width: var(--bw-2); }
  }
}