/* ═══════════════════════════════════════════════════════════════
   components.css — BOTONES + CHIPS · pieza 2 de 4 del modelo Belk
   ───────────────────────────────────────────────────────────────
   REQUIERE:  css/foundation.css cargado ANTES.
   ORDEN:     foundation → components → <pagina>.css → belk-shell
   SE COPIA:  sí, tal cual, a cualquier proyecto nuevo.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   components.css — los botones de Belk. Uno solo, cinco variantes.
   Creado 2026-07-26.

   ── POR QUÉ EXISTE ───────────────────────────────────────────
   Había 47 clases de botón repartidas en 8 CSS. No fue descuido:
   el skill guardaba la regla, pero sin un CSS compartido cada
   página reimplementaba `.btn` en local y la regla se deshacía
   sola. Esto es el componente compartido que faltaba.

   ── LA FORMA NO CAMBIA NUNCA ─────────────────────────────────
   radio 8px · padding 10px 18px · 12px/500. Idénticos en las
   cinco variantes. Lo único que cambia entre ellas es el color.
   Si una variante nueva necesita otra forma, no es una variante:
   es otro componente.

   ── QUÉ DICE CADA UNA ────────────────────────────────────────
   El color dice IMPORTANCIA, no desenlace.
     primario      la acción para la que existe la vista — UNA por vista
     secundario    todo lo demás — sin límite
     acento        dónde estás · la acción principal del marco — solo eso
     peligro       destructivas — contorno; el relleno solo en el
                   diálogo de confirmación, nunca suelto en la vista
     deshabilitado guard sin cumplir

   No hay variante `-success`. El verde en un botón anuncia un
   resultado que todavía no ocurrió: lo que confirma el guardado
   es el toast, no el botón que lo dispara.
   ═══════════════════════════════════════════════════════════ */

.belk-btn{
  /* la forma — no tocar por variante */
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:8px;
  font-family:inherit; font-size:12px; font-weight:500; line-height:1;
  white-space:nowrap; cursor:pointer;
  border:1px solid transparent;
  transition:background var(--belk-transition,.18s ease), border-color var(--belk-transition,.18s ease),
             color var(--belk-transition,.18s ease), opacity var(--belk-transition,.18s ease);
}

/* El anillo de foco es `outline`, no `box-shadow`: outline no necesita
   saber de qué color es el fondo, así que el mismo anillo sirve sobre
   los cuatro niveles sin definir uno por zona. */
.belk-btn:focus-visible{
  outline:2px solid var(--belk-brand,#143A7D);
  outline-offset:2px;
}

/* ── Primario ── 10,9 claro · 6,7 documento ───────────────────── */
.belk-btn--primary{
  background:var(--belk-brand,#143A7D); color:var(--belk-on-brand,#FFFFFF);
}
.belk-btn--primary:hover{ background:var(--belk-brand-hover,#0F2E63); }

/* ── Secundario ── 12,8 claro · 12,3 documento ────────────────
   Lleva filo obligatorio: contra el lienzo el escalón de nivel
   separa solo 1,2 de contraste y sin borde el botón se funde. */
.belk-btn--secondary{
  background:var(--belk-level-2,#E4EBF8); color:var(--belk-text,#0D2350);
  border-color:var(--belk-border-strong,rgba(13,35,80,.18));
}
.belk-btn--secondary:hover{
  background:var(--belk-level-2-hi,#F2F6FD); border-color:var(--belk-brand,#143A7D);
}

/* ── Acento ── 5,16 en ambas zonas ────────────────────────────
   El texto encima es navy, no blanco: blanco sobre el naranjo da 2,96.
   Y el hover ACLARA — al oscurecerlo el navy cae a 4,28. */
.belk-btn--accent{
  background:var(--belk-accent,#E87722); color:var(--belk-on-accent,#0D2350);
  border-color:var(--belk-border-strong,rgba(13,35,80,.18));
}
.belk-btn--accent:hover{ background:var(--belk-accent-hover,#F08A3E); }

/* ── Peligro ── contorno: 5,2 claro · 7,5 documento ───────────── */
.belk-btn--danger{
  background:transparent; color:var(--belk-err,#8E3B31);
  border-color:currentColor;
}
.belk-btn--danger:hover{ background:var(--belk-err-soft,#F8E7E3); }

/* Relleno — SOLO dentro del diálogo que confirma la destrucción.
   Suelto en una vista, compite con el primario y se hace clic sin leer.
   El texto es el `-soft`, no blanco: el par err/err-soft ya está invertido
   por zona, así que siempre cae del lado opuesto al relleno. Blanco fijo
   daba 7,45 arriba pero 2,28 en documento, donde el rojo es salmón claro. */
.belk-btn--danger-solid{
  background:var(--belk-err,#8E3B31); color:var(--belk-err-soft,#F8E7E3);
}
.belk-btn--danger-solid:hover{ filter:brightness(1.08); }

/* ── Deshabilitado ── .55, no .45 ─────────────────────────────
   La norma exime a los controles deshabilitados del mínimo de
   contraste, pero el usuario de Belk no es técnico: a .45 el botón
   se leía como roto, no como bloqueado. A .55 queda apagado y legible. */
.belk-btn:disabled,
.belk-btn[aria-disabled="true"],
.belk-btn.is-disabled{
  opacity:.55; cursor:not-allowed;
}
.belk-btn:disabled:hover,
.belk-btn[aria-disabled="true"]:hover,
.belk-btn.is-disabled:hover{
  background:var(--belk-level-2,#E4EBF8); border-color:var(--belk-border-strong,rgba(13,35,80,.18));
}
.belk-btn--primary:disabled:hover,
.belk-btn--primary.is-disabled:hover{ background:var(--belk-brand,#143A7D); }
.belk-btn--accent:disabled:hover,
.belk-btn--accent.is-disabled:hover{ background:var(--belk-accent,#E87722); }

/* ── Sobre el papel ───────────────────────────────────────────
   Dentro del documento la zona no manda: el papel es blanco en las
   dos, así que la marca de zona (#7FA0D4) daría 2,4 y el borde
   claro desaparecería. Usa la familia del papel. */
.belk-paper .belk-btn--primary,
.doc .belk-btn--primary{
  background:var(--belk-paper-brand,#143A7D); color:var(--belk-on-paper-brand,#FFFFFF);
}
.belk-paper .belk-btn--secondary,
.doc .belk-btn--secondary{
  background:var(--belk-paper-sunken,#E9F0F9); color:var(--belk-paper-muted,#414B5C);
  border-color:var(--belk-paper-border,rgba(13,35,80,.10));
}
.belk-paper .belk-btn--secondary:hover,
.doc .belk-btn--secondary:hover{
  background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350);
  border-color:var(--belk-paper-brand,#143A7D);
}
.belk-paper .belk-btn--danger,
.doc .belk-btn--danger{ color:var(--belk-paper-err,#8E3B31); }
.belk-paper .belk-btn--danger:hover,
.doc .belk-btn--danger:hover{ background:var(--belk-paper-err-soft,#F8E7E3); }
.belk-paper .belk-btn--danger-solid,
.doc .belk-btn--danger-solid{
  background:var(--belk-paper-err,#8E3B31); color:var(--belk-paper,#FFFFFF);
}
.belk-paper .belk-btn:focus-visible,
.doc .belk-btn:focus-visible{ outline-color:var(--belk-paper-brand,#143A7D); }

/* ── Tamaños ──────────────────────────────────────────────────
   La forma base es la de una acción normal. Estos NO cambian el
   color ni el radio: solo densidad. Se usan 77 veces entre
   `btn-sm` y `btn-xs`, así que el sistema tiene que soportarlos
   o la migración cambia el tamaño de medio sitio sin querer. */
.belk-btn--sm{ padding:7px 13px; font-size:11px; gap:6px; }
.belk-btn--xs{ padding:4px 10px; font-size:11px; gap:5px; }
.belk-btn--full{ width:100%; }

/* Icono suelto (✕, 🗑, ▶): cuadrado, sin padding lateral extra. */
.belk-btn--icon{ padding:0; width:32px; height:32px; }
.belk-btn--icon.belk-btn--sm{ width:28px; height:28px; }

/* ═══════════════════════════════════════════════════════════════
   .belk-chip — la píldora de estado. NO es un botón: no hace nada
   al hacer clic, solo etiqueta un dato (un plan, un tipo de acción
   de registro, un nivel de confianza). Forma congelada por el
   plan (§8): radio 20px · padding 5px 10px · tipo 10px — no tocar
   sin pedirlo primero.

   Alcance real medido en la Fase E: 13 sitios en 2 archivos (los
   .plan-*/.log-* de admin y los .conf-*/mid/low de digitalización).
   Los banners de aviso (radio 4px, border-left) y los hovers de
   ícono destructivo (ya cubiertos por .belk-btn--danger:hover) NO
   son este componente — meterlos aquí habría sido la clase 48.
   ═══════════════════════════════════════════════════════════ */
.belk-chip{
  display:inline-block; padding:5px 10px; border-radius:20px;
  font-size:10px; font-weight:600; letter-spacing:.02em;
  /* Filo obligatorio (§5.5): --belk-chip--brand en zona documento usa el
     nivel-0 como fondo, que es más oscuro que el lienzo (nivel-1) que
     suele tenerlo detrás — mismo tono, la píldora se funde sin este borde. */
  border:1px solid var(--belk-border,rgba(13,35,80,.10));
}
.belk-chip--brand{ background:var(--belk-brand-soft,#E4EBF8); color:var(--belk-brand,#143A7D); }
.belk-chip--ok{    background:var(--belk-ok-soft,#E4EFE9);    color:var(--belk-ok,#275A42); }
.belk-chip--warn{  background:var(--belk-warn-soft,#FBEADC);  color:var(--belk-warn,#9C4A12); }
.belk-chip--err{   background:var(--belk-err-soft,#F8E7E3);   color:var(--belk-err,#8E3B31); }
/* Sin estado — "no hay nada que contar" (ej. plan free). No es un color
   de menor jerarquía dentro de ok/warn/err: es la ausencia de los tres. */
.belk-chip--muted{ background:var(--belk-level-2-hi,#F2F6FD);  color:var(--belk-text-muted,#414B5C); }