/* =========================================================================
   CITEM — Componentes del design system, en CSS plano (clases `cds-*`)
   -------------------------------------------------------------------------
   Esta hoja es la ÚNICA implementación en CSS plano de los componentes del
   Manual de Marca (§5): la usa la web y la publica el Design System de
   claude.ai (scripts/design-system.mjs la mete en su components/bundle.css,
   detrás del andamiaje del visor). Un cambio aquí cambia los dos.

   Recrea las clases de campus_dc (button-variants.ts, citem-superficies.css,
   citem-chip.css…), que allí se escriben con Tailwind y no se pueden cargar
   tal cual. Los colores, sombras y espacios son tokens de marca, y cada pieza
   nombra su papel y no su tono: bordes, tintes y superficies invertidas van
   en la tinta (`--c-ink`, hoy Carbón, ADR-188). Las medidas escritas (44 px,
   12 a 16 px) son reglas del manual, que manda (§5 y §8.2).
   ========================================================================= */

/* Sobre un fondo Coral oscuro solo el Papel llega a AA (§3.1, 5,38:1): un
   titular Índigo da 2,24 y el secundario atenuado 2,06. La superficie pone en
   Papel los papeles del texto que va encima (titular y secundario), y solo en
   el texto: un campo es su propia superficie Papel y conserva los suyos, o su
   placeholder sería Papel sobre Papel. El foco también es Papel (§8.1): el
   Coral no se ve sobre sí mismo. */
.sobre-coral { color: var(--c-paper); }
.sobre-coral :where(h1, h2, h3, h4, h5, h6, p, li) { --c-text-heading: var(--c-paper); --c-text-muted: var(--c-paper); }
.sobre-coral :focus-visible { outline-color: var(--c-paper); }

.cds-icono { width: 1.1em; height: 1.1em; flex: none; }

/* ── Botón (§5.1) ─────────────────────────────────────────────────────── */
.cds-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: 44px; padding: 0 var(--space-md2);
  font: 900 0.875rem/1 var(--font-heading); text-transform: uppercase; letter-spacing: 0.14em;
  border: var(--border-w-structural) solid var(--c-ink);
  background: var(--c-paper); color: var(--c-text-strong); cursor: pointer; text-decoration: none;
  transition: translate var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cds-boton--principal { background: var(--c-coral-dark); border-color: var(--c-coral-dark); color: var(--c-paper); box-shadow: var(--shadow-blockout); }
.cds-boton--secundario { background: var(--c-ink); color: var(--c-paper); box-shadow: var(--shadow-blockout); }
.cds-boton--contorno { box-shadow: var(--shadow-blockout-soft); }
.cds-boton--fantasma { border-color: transparent; }
.cds-boton--fantasma:hover { border-color: var(--c-ink); }
.cds-boton--enlace { border: 0; min-height: 0; padding: 0; background: none; color: var(--c-coral-dark); }
.cds-boton--enlace:hover { text-decoration: underline; }
.cds-boton--peligro { background: var(--c-coral-dark); border-color: var(--c-coral-dark); color: var(--c-paper); }
.cds-boton--peligro:hover { border-color: var(--c-ink); }
.cds-boton--pequeno { min-height: 44px; padding: 0 var(--space-md); font-size: 0.75rem; }
.cds-boton:disabled { opacity: 0.5; cursor: not-allowed; }
/* El levantamiento de `.citem-lift` (campus: citem-gestos.css y
   utilidades-de-motion.css): con ratón y con movimiento permitido, sube 2 px
   y llega a la sombra Blockout; el principal llega a la Coral. */
@media screen and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cds-boton--principal:hover, .cds-boton--secundario:hover, .cds-boton--contorno:hover { translate: -2px -2px; box-shadow: var(--shadow-blockout); }
  .cds-boton--principal:hover { box-shadow: var(--shadow-crimson); }
  .cds-tarjeta--bloque:hover { translate: -2px -2px; box-shadow: var(--shadow-blockout-hover); }
}
.cds-boton--principal:active, .cds-boton--secundario:active, .cds-boton--contorno:active { translate: none; box-shadow: none; }

/* ── Estado (§3.1, §5.7) ──────────────────────────────────────────────── */
.cds-estado {
  display: inline-flex; align-items: center; gap: var(--space-sm); padding: 6px var(--space-sm2);
  border: var(--border-w-interactive) solid;
  font: 900 0.75rem/1 var(--font-heading); text-transform: uppercase; letter-spacing: 0.14em;
}
.cds-estado--exito { background: var(--c-state-success-bg); border-color: var(--c-state-success-border); color: var(--c-state-success-text); }
.cds-estado--aviso { background: var(--c-state-warning-bg); border-color: var(--c-state-warning-border); color: var(--c-state-warning-text); }
.cds-estado--error { background: var(--c-state-error-bg); border-color: var(--c-state-error-border); color: var(--c-state-error-text); }
.cds-estado--info { background: var(--c-state-info-bg); border-color: var(--c-state-info-border); color: var(--c-state-info-text); }
/* La insignia que destaca (p. ej. «Pro») es figura: Coral oscuro con texto Papel (§3.1, ADR-188). */
.cds-estado--destaca { background: var(--c-coral-dark); border-color: var(--c-coral-dark); color: var(--c-paper); }
.cds-estado--neutro { background: var(--c-state-neutral-bg); border-color: var(--c-state-neutral-border); color: var(--c-state-neutral-text); }

/* ── Chip (§5.7) ──────────────────────────────────────────────────────── */
.cds-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm2);
  border: var(--border-w-interactive) solid var(--c-ink); background: var(--c-paper); color: var(--c-text-muted);
  font: 900 0.75rem/1 var(--font-heading); text-transform: uppercase; letter-spacing: 0.14em; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cds-chip:hover { color: var(--c-text-strong); box-shadow: var(--shadow-blockout-soft); }
/* Lo elegido es figura (ADR-188): Coral oscuro con texto Papel (5,38:1). */
.cds-chip[aria-pressed="true"] { background: var(--c-coral-dark); border-color: var(--c-coral-dark); color: var(--c-paper); }

/* ── Campo (§5.5) ─────────────────────────────────────────────────────── */
.cds-campo { display: grid; gap: 6px; }
.cds-campo label { font: 900 0.75rem/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-text-heading); }
.cds-campo input {
  min-height: 44px; padding: 0 var(--space-sm2); font: 16px var(--font-body); color: var(--c-text-strong);
  background: var(--c-paper); border: var(--border-w-interactive) solid var(--c-ink);
}
.cds-campo input::placeholder { color: var(--c-text-muted); }
.cds-campo input[aria-invalid="true"] { border-color: var(--c-coral); }
.cds-campo input:disabled { opacity: 0.5; cursor: not-allowed; }
.cds-campo-error { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--c-state-error-text); }

/* ── Tarjeta (§5.6) ───────────────────────────────────────────────────── */
.cds-tarjeta { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-lg); background: var(--c-paper); }
.cds-tarjeta--bloque { border: var(--border-w-structural) solid var(--c-ink); box-shadow: var(--shadow-blockout); transition: translate var(--dur-medium) var(--ease-out), box-shadow var(--dur-medium) var(--ease-out); }
.cds-tarjeta--sutil { border: var(--border-w-interactive) solid var(--c-ink); box-shadow: var(--shadow-blockout-soft); }
.cds-tarjeta--destacada { border: var(--border-w-structural) solid var(--c-ink); box-shadow: var(--shadow-crimson); }
.cds-tarjeta--invertida { background: var(--c-ink); color: var(--c-paper); border: var(--border-w-structural) solid var(--c-ink); }
.cds-tarjeta--invertida .cds-tarjeta-titulo { color: var(--c-paper); }
.cds-tarjeta-kicker { font: 900 0.75rem/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-coral-dark); }
.cds-tarjeta--invertida .cds-tarjeta-kicker { color: var(--c-paper); }
.cds-tarjeta-titulo { margin: 0; font: 900 1.5rem/var(--leading-display) var(--font-heading); text-transform: uppercase; color: var(--c-text-heading); }
.cds-tarjeta p { margin: 0; }