/*
 * OpoReal — Design System canónico (tokens + utilidades base)
 * -----------------------------------------------------------
 * Fuentes de verdad: maquetas del cliente "Inicio Real" (#2667) y
 * "Temario" (#2657) — comparten un :root idéntico — más "Tema 1" (#2658) y
 * la variante premium elite.css. Estos tokens SUSTITUYEN a la marca vieja
 * (#060097 / #c10fff / tipografía Inter), que queda DEPRECADA.
 *
 * Se encola en front-end como CAPA BASE (prioridad 5), de modo que las hojas
 * de componentes (test-player, físicas, checkout, login…) cascadan por encima.
 *
 * Doc: dev/docs/design-system.md
 */

:root {
	/* ===== Marca / superficie ===== */
	--opr-navy: #1e2a4a;        /* primario · texto · botón primario */
	--opr-navy-dark: #131c33;   /* navy profundo */
	--opr-navy-light: #2d3d68;  /* hover del primario · degradados */
	--opr-accent: #3b82f6;      /* acento azul · enlaces destacados */
	--opr-accent-strong: #2563eb;
	--opr-bg: #f7f9fc;          /* fondo de página */
	--opr-bg-soft: #eef2f9;     /* fondo suave · chips */
	--opr-white: #ffffff;
	--opr-surface: #ffffff;     /* fondo de tarjeta */
	--opr-text: #1e2a4a;
	--opr-text-soft: #5a6685;   /* texto atenuado */
	--opr-text-invert: #e6e9f2; /* texto sobre fondo oscuro (de Tema 1) */
	--opr-border: #e2e8f0;

	/* ===== Estados ===== */
	--opr-green: #22c55e;
	--opr-green-dark: #166534;
	--opr-green-bg: #f0fdf4;
	--opr-green-border: #86efac;
	--opr-red: #ef4444;
	--opr-red-dark: #b91c1c;
	--opr-red-bg: #fef2f2;
	--opr-red-border: #fca5a5;
	--opr-amber: #f59e0b;
	--opr-amber-dark: #d97706;

	/* ===== Premium (élite / dorado) — ver elite.css ===== */
	--opr-gold: #d4a017;
	--opr-gold-light: #f5c542;
	--opr-gold-dark: #b88a0d;
	--opr-gold-ink: #3d2a00;    /* texto legible sobre oro */

	/* ===== Tipografía ===== */
	--opr-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--opr-fw-medium: 500;
	--opr-fw-semibold: 600;
	--opr-fw-bold: 700;
	--opr-fw-extrabold: 800;

	/* ===== Radios ===== */
	--opr-radius-sm: 10px;   /* inputs */
	--opr-radius: 14px;      /* controles medianos */
	--opr-radius-lg: 18px;   /* tarjetas */
	--opr-radius-xl: 24px;   /* bloques grandes */
	--opr-radius-pill: 999px;

	/* ===== Sombras (tinte navy rgba(30,42,74,…)) ===== */
	--opr-shadow-sm: 0 2px 8px rgba(30, 42, 74, 0.06);
	--opr-shadow-md: 0 8px 24px rgba(30, 42, 74, 0.08);
	--opr-shadow-lg: 0 20px 50px rgba(30, 42, 74, 0.12);
	--opr-shadow-primary: 0 6px 18px rgba(30, 42, 74, 0.16);

	/* ===== Espaciado ===== */
	--opr-space-2: 8px;
	--opr-space-3: 12px;
	--opr-space-4: 16px;
	--opr-space-5: 20px;
	--opr-space-6: 24px;
	--opr-space-8: 32px;
	--opr-gap: 24px;
	--opr-card-pad: 26px;

	/* ===== Foco ===== */
	--opr-ring: 0 0 0 3px rgba(59, 130, 246, 0.18);       /* azul acento */
	--opr-ring-navy: 0 0 0 4px rgba(30, 42, 74, 0.08);    /* navy (selección) */
}

/* =================================================================== */
/*  Utilidades mínimas — consumen los tokens de arriba.                 */
/*  Compatibles con el markup existente: `.opr-btn` a secas = primario  */
/*  relleno; `.opr-btn--ghost` (BEM) y `.opr-btn-ghost` = contorno.     */
/* =================================================================== */

/* ---- Botones ---- */
.opr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--opr-font);
	font-weight: var(--opr-fw-bold);
	font-size: 0.95rem;
	line-height: 1.2;
	padding: 0.8em 1.8em;
	border: 0;
	border-radius: var(--opr-radius-pill);
	background: var(--opr-navy);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--opr-shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.opr-btn:hover {
	background: var(--opr-navy-light);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--opr-shadow-md);
}
.opr-btn:disabled,
.opr-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Alias explícito del primario (para markup que separa base + variante) */
.opr-btn-primary { background: var(--opr-navy); color: #fff; }
.opr-btn-primary:hover { background: var(--opr-navy-light); }

/* Secundario (acento azul) */
.opr-btn-secondary { background: var(--opr-accent); color: #fff; }
.opr-btn-secondary:hover { background: var(--opr-accent-strong); }

/* Contorno / fantasma — soporta ambas convenciones de nombre */
.opr-btn-ghost,
.opr-btn--ghost {
	background: var(--opr-white);
	color: var(--opr-navy);
	border: 1.5px solid var(--opr-border);
	box-shadow: none;
}
.opr-btn-ghost:hover,
.opr-btn--ghost:hover {
	background: var(--opr-bg-soft);
	border-color: var(--opr-navy);
	color: var(--opr-navy);
	box-shadow: none;
}

/* ---- Tarjeta ---- */
.opr-card {
	background: var(--opr-surface);
	border: 1px solid var(--opr-border);
	border-radius: var(--opr-radius-lg);
	padding: var(--opr-card-pad);
	box-shadow: var(--opr-shadow-md);
}

/* ---- Input / campo ---- */
.opr-input {
	width: 100%;
	font-family: var(--opr-font);
	font-size: 1rem;
	color: var(--opr-text);
	background: var(--opr-white);
	border: 1px solid var(--opr-border);
	border-radius: var(--opr-radius-sm);
	padding: 0.6em 0.85em;
	min-height: 44px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.opr-input:focus {
	outline: 0;
	border-color: var(--opr-accent);
	box-shadow: var(--opr-ring);
}

/* ---- Badge / etiqueta ---- */
.opr-badge {
	display: inline-block;
	background: var(--opr-bg-soft);
	color: var(--opr-navy);
	padding: 6px 14px;
	border-radius: var(--opr-radius-pill);
	font-size: 0.85rem;
	font-weight: var(--opr-fw-semibold);
}

/* ---- Etiqueta de campo ---- */
.opr-label {
	color: var(--opr-navy);
	font-weight: var(--opr-fw-semibold);
}