/* ═══════════════════════════════════════
   ▓ COMPONENTE · Card — gemelo vanilla ▓
   v1.0 · 2026-08-23. Ficha: design-system/COMPONENTE_CARD.md
   Kit: catalogo-cd/components/Card.jsx

   EL CONTENEDOR QUE AGRUPA CONTENIDO RELACIONADO sobre una superficie. Su trabajo es
   DELIMITAR, no decorar. Si no agrupa nada —si es un ícono, una fila o una opción
   seleccionable— NO es una card, aunque su clase se llame así.

   La prueba, en una pregunta: ¿si le quito el fondo y el borde, se pierde qué
   contenido va con qué? SÍ → es una card. NO → es otra cosa con nombre prestado.

   ⛔ EL RELIEVE NO SE REPARTE POR IMPORTANCIA: SE REPARTE POR SI LA CARD FLOTA.
     · flota sobre el lienzo de la página → var(--relieve-card)
     · anidada dentro de otra card o panel → data-nested="true", ninguna
     · es una OPCIÓN, no un contenedor → no es esta pieza: es CardSelector

   ⛔ Y EL BORDE VA SIEMPRE, AUNQUE HAYA SOMBRA. En @media print el relieve no va —una
   hoja no tiene fuente de luz ni eje Z—, así que una card que se apoya sólo en su
   sombra DESAPARECE al imprimirse y el cliente recibe un contrato con cajas
   invisibles. El borde es lo que sobrevive al papel.

   POR QUÉ ESTA FICHA IMPORTA MÁS QUE OTRAS, con el número que lo justifica: al
   escribirse el canon había 194 reglas de card en producción, 111 familias distintas
   y 56 contenedoras, de las cuales 39 sin sombra — sin que nadie hubiera elegido nada
   de eso. La fragmentación no era el problema: era el síntoma de que faltaba la regla.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (colors_and_type.css).
     2. box-sizing: border-box.
   ═══════════════════════════════════════ */

/* ── LA CARD ─────────────────────────────────────────────────────────────────
   El padding se ajusta por variable —no por una clase de modo— porque es la única
   medida de la pieza que cambia según la densidad de la pantalla que la usa: 20–24
   es el canon y 16 el de las cards densas de tabla. Poner una clase por cada valor
   habría convertido una medida en una taxonomía. */
.exds-card {
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--relieve-card, 0 1px 2px rgba(15,20,25,0.05), 0 6px 16px -8px rgba(15,20,25,0.10));
  padding: var(--card-padding, 24px);
  /* ⛔ SÓLO EN EL GEMELO, Y ES A PROPÓSITO (Ricardo, 2026-08-24 · defecto medido montando Board).
     El kit de React SIEMPRE renderiza un <div>, así que nunca necesitó esto. El propio README de
     esta pieza manda que la variante NAVEGABLE sea un <button> de verdad (accesible por teclado y
     lector de pantalla) — y el <button> del navegador trae `text-align:center` de fábrica. Sin
     este reset, CUALQUIER texto montado dentro de una card navegable sale centrado en vez de a la
     izquierda, aunque cada hijo declare su propia tipografía (así se vio en Board: nombre, correo
     y producto, todos centrados). Mismo patrón que el resto del catálogo — cada pieza que usa un
     <button> como contenedor escribe su propio `text-align:left` (ver `admin/css/backoffice.css`,
     p. ej. `.sbx-sub`, `.bo-cmdk-item`) — nunca se asume un reset global. */
  text-align: left;
}

/* Anidada = PLANA. No flota sobre nada: comparte plano con su contenedora, y una
   sombra dentro de una sombra es "profundidad acumulada" — decoración, no jerarquía. */
.exds-card[data-nested="true"] { box-shadow: none; }

/* ── EL PAPEL · la excepción de todo el sistema ──────────────────────────────
   Ver la cabecera: el relieve se apaga y el borde sobrevive. */
@media print {
  .exds-card { box-shadow: none !important; }
}

/* ── LA CARD NAVEGABLE ───────────────────────────────────────────────────────
   data-interactive la vuelve un control: abre un detalle. Sólo entonces aparecen
   hover, activo y foco — una card contenedora que reacciona al ratón promete algo
   que no cumple.

   ⛔ EL ACTIVO NO ES EL FOCO, y son dos señales distintas a propósito: data-active
   dice "ésta es la que estás viendo" y lo pone el anfitrión; el anillo dice "aquí
   está el teclado" y lo pone el navegador. Reutilizar el anillo para el activo deja
   a quien navega con Tab sin la única señal que le dice dónde está. */
.exds-card[data-interactive] {
  cursor: pointer;
  transition: background var(--motion-fast, 120ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)),
              border-color var(--motion-fast, 120ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-card[data-interactive]:hover { background: var(--color-bg-subtle, #F2F4F6); }
.exds-card[data-interactive][data-active="true"] {
  background: var(--color-bg-subtle, #F2F4F6);
  border-color: var(--color-action-ink, #21272C);
}
/* El anillo va HACIA DENTRO (offset negativo): la card ya toca a sus vecinas en una
   rejilla, y un anillo hacia fuera se solaparía con la de al lado. */
.exds-card[data-interactive]:focus-visible {
  outline: 2px solid var(--color-border-focus, #6E7378);
  outline-offset: -2px;
}

/* ── MOVIMIENTO REDUCIDO ────────────────────────────────────────────────────
   Se apaga el RECORRIDO, no la SEÑAL: el hover y el activo siguen cambiando el
   fondo, sólo que sin transición. Apagar el movimiento no puede dejar a nadie sin
   la información (INC-405). */
@media (prefers-reduced-motion: reduce) {
  .exds-card[data-interactive] { transition: none; }
}