/* Pieza 14 (ed4769c6 + f357807f): piel KOCINO de las pantallas sueltas del producto (/entrar, alta, Mi cuenta / cuota,
 * activar, cambiar y restablecer clave). Esas pantallas nacieron con su propio juego de variables (--bg, --panel, --tinta,
 * --cian, --grad…) con los colores de Vicius Studio escritos a mano; acá se reasignan UNA vez a los tokens semánticos del
 * DSM con data-theme="kocino" (dsm-tokens.css va antes). Ningún color nuevo vive acá: todo es var(--color-*).
 * Cada pantalla enlaza: dsm-tokens.css → kocino-producto.css (este) y declara <html data-theme="kocino">. */
:root {
  --bg: var(--color-bg-page);
  --panel: var(--color-bg-surface);
  --panel2: var(--color-bg-subtle);
  --tinta: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --line: var(--color-border-default);
  --cian: var(--color-tool-accent);              /* el acento de antes: enlaces, foco, avisos informativos */
  --grad: var(--color-action-fill);              /* el botón principal: naranja #FF8A00 en los dos modos (DS Kocino) */
  --verde: var(--color-feedback-success-text);
  --ok: var(--color-feedback-success-text);
  --err: var(--color-feedback-error-text);
  --k-on-accion: var(--color-on-action);         /* texto grafito sobre el naranja (7,37:1) */
  /* Campos (Marketing 16-10, paridad #2): el borde es contraste NO textual → 3:1 (WCAG 1.4.11). --line (#E8DCCB) daba
   * 1,27:1 en claro; el DS usa --line-strong (= color-border-strong) de 1,5 px sobre --surface. */
  --k-campo-borde: var(--color-border-strong);
  --k-campo-fondo: var(--color-bg-surface);
  --k-radio-campo: var(--radius-sm);
  --k-radio-boton: var(--radius-md);
  --k-info-bg: var(--color-tool-accent-tint);
  --k-info-line: var(--color-tool-accent-line);
  --k-ok-bg: var(--color-feedback-success-bg);
  --k-ok-line: var(--color-feedback-success-border);
  --k-err-bg: var(--color-feedback-error-bg);
  --k-err-line: var(--color-feedback-error-border);
}
body { font-family: var(--font-family-body); }
/* Paridad #4: los controles de formulario no heredan la fuente (el navegador les pone Arial): Inter en todo. */
button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { font-family: var(--font-family-display); letter-spacing: -0.01em; }
/* logotipo: letras crema sobre grafito, letras grafito sobre crema (la K naranja es la misma) */
.k-logo { display: block; width: 168px; max-width: 60%; height: auto; margin: 0 auto 20px; }
.k-logo.k-claro { display: none; }
:root[data-mode="light"] .k-logo.k-oscuro { display: none; }
:root[data-mode="light"] .k-logo.k-claro { display: block; }
.k-credito { font-size: 12px; color: var(--color-text-secondary); text-align: center; margin: 18px 0 0; }