/**
 * ============================================================================
 * PRO DESIGN SYSTEM — COMPONENTES BASE (2026)
 * ============================================================================
 * Requiere: tokens/design-tokens.css
 * Todos los valores provienen de tokens (var(--pro-*)). Sin colores hardcodeados.
 * Light/dark automático vía los tokens semánticos.
 * ============================================================================
 */

/* --- Reset mínimo y base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body.pro {
  margin: 0;
  font-family: var(--pro-font-family);
  font-weight: var(--pro-font-weight-book);
  font-size: var(--pro-font-size-base);
  line-height: var(--pro-line-height-normal);
  letter-spacing: var(--pro-letter-spacing);
  font-kerning: var(--pro-font-kerning);
  color: var(--pro-text-primary);
  background: var(--pro-bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pro-container {
  width: 100%;
  max-width: var(--pro-container-max);
  margin-inline: auto;
  padding-inline: var(--pro-space-6);
}

/* ==========================================================================
   TIPOGRAFÍA
   Manual: títulos = Gotham Rounded Bold MAYÚSCULA; copy = Book oración.
   ========================================================================== */
.pro-display,
.pro-h1, .pro-h2, .pro-h3, .pro-h4 {
  font-weight: var(--pro-font-weight-bold);
  text-transform: uppercase;
  line-height: var(--pro-line-height-tight);
  color: var(--pro-text-primary);
  margin: 0 0 var(--pro-space-4);
}
.pro-display { font-size: var(--pro-font-size-display); line-height: 1.05; }
.pro-h1 { font-size: var(--pro-font-size-h1); }
.pro-h2 { font-size: var(--pro-font-size-h2); line-height: var(--pro-line-height-snug); }
.pro-h3 { font-size: var(--pro-font-size-h3); line-height: var(--pro-line-height-snug); }
.pro-h4 { font-size: var(--pro-font-size-h4); line-height: var(--pro-line-height-snug); }

.pro-body   { font-size: var(--pro-font-size-base); color: var(--pro-text-primary); margin: 0 0 var(--pro-space-4); }
.pro-body-lg{ font-size: var(--pro-font-size-lg); }
.pro-body-sm{ font-size: var(--pro-font-size-sm); }
.pro-lead   { font-size: var(--pro-font-size-lg); color: var(--pro-text-secondary); line-height: var(--pro-line-height-relaxed); }
.pro-caption{ font-size: var(--pro-font-size-caption); color: var(--pro-text-muted); }
.pro-overline {
  font-size: var(--pro-font-size-overline);
  font-weight: var(--pro-font-weight-medium);
  text-transform: uppercase;
  color: var(--pro-text-muted);
}
.pro-muted { color: var(--pro-text-muted); }

/* Marca en texto: "PRO" siempre mayúscula + bold (regla del manual) */
.pro-mark { text-transform: uppercase; font-weight: var(--pro-font-weight-bold); }

a.pro-link {
  color: var(--pro-text-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--pro-duration-fast) var(--pro-ease-standard);
}
a.pro-link:hover { color: var(--pro-text-link-hover); border-bottom-color: currentColor; }
a.pro-link:focus-visible { outline: none; box-shadow: var(--pro-focus-ring); border-radius: var(--pro-radius-sm); }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.pro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pro-space-2);
  font-family: inherit;
  font-weight: var(--pro-font-weight-bold);
  font-size: var(--pro-font-size-base);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--pro-letter-spacing);
  padding: var(--pro-space-3) var(--pro-space-6);
  border: 1px solid transparent;
  border-radius: var(--pro-radius-full);
  cursor: pointer;
  transition: background var(--pro-duration-base) var(--pro-ease-standard),
              transform var(--pro-duration-fast) var(--pro-ease-standard),
              box-shadow var(--pro-duration-base) var(--pro-ease-standard);
}
.pro-btn:active { transform: translateY(1px); }
.pro-btn:focus-visible { outline: none; box-shadow: var(--pro-focus-ring); }
.pro-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Primario: gradiente de marca, texto oscuro (accesible sobre el claro) */
.pro-btn--primary {
  background: var(--pro-action-primary-bg);
  color: var(--pro-action-primary-text);
  box-shadow: var(--pro-shadow-sm);
}
.pro-btn--primary:hover:not(:disabled) { background: var(--pro-action-primary-hover); box-shadow: var(--pro-shadow-md); }
.pro-btn--primary:active:not(:disabled) { background: var(--pro-action-primary-active); }

/* Secundario: contorno */
.pro-btn--secondary {
  background: var(--pro-action-secondary-bg);
  color: var(--pro-action-secondary-text);
  border-color: var(--pro-action-secondary-border);
}
.pro-btn--secondary:hover:not(:disabled) { background: var(--pro-action-secondary-hover); }

/* Fantasma / texto */
.pro-btn--ghost {
  background: transparent;
  color: var(--pro-text-primary);
}
.pro-btn--ghost:hover:not(:disabled) { background: var(--pro-bg-subtle); }

.pro-btn--sm { padding: var(--pro-space-2) var(--pro-space-4); font-size: var(--pro-font-size-sm); }
.pro-btn--lg { padding: var(--pro-space-4) var(--pro-space-8); font-size: var(--pro-font-size-lg); }

/* ==========================================================================
   CARD
   ========================================================================== */
.pro-card {
  background: var(--pro-bg-surface);
  border: 1px solid var(--pro-border-subtle);
  border-radius: var(--pro-radius-lg);
  padding: var(--pro-space-6);
  box-shadow: var(--pro-shadow-sm);
}
.pro-card--raised { box-shadow: var(--pro-shadow-lg); }
.pro-card__title { margin: 0 0 var(--pro-space-2); }
.pro-card__body { color: var(--pro-text-secondary); margin: 0; }

/* Card de marca (gradiente de fondo, texto oscuro) */
.pro-card--brand {
  background: var(--pro-gradient-brand-diag);
  border: none;
  color: var(--pro-text-on-brand);
}
.pro-card--brand .pro-card__body { color: var(--pro-text-on-brand); opacity: 0.85; }

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.pro-field { display: flex; flex-direction: column; gap: var(--pro-space-2); }
.pro-label {
  font-size: var(--pro-font-size-sm);
  font-weight: var(--pro-font-weight-medium);
  color: var(--pro-text-secondary);
}
.pro-input, .pro-select, .pro-textarea {
  font-family: inherit;
  font-size: var(--pro-font-size-base);
  color: var(--pro-text-primary);
  background: var(--pro-bg-surface);
  border: 1px solid var(--pro-border-default);
  border-radius: var(--pro-radius-md);
  padding: var(--pro-space-3) var(--pro-space-4);
  transition: border-color var(--pro-duration-base) var(--pro-ease-standard),
              box-shadow var(--pro-duration-base) var(--pro-ease-standard);
}
.pro-input::placeholder, .pro-textarea::placeholder { color: var(--pro-text-muted); }
.pro-input:focus, .pro-select:focus, .pro-textarea:focus {
  outline: none;
  border-color: var(--pro-brand-500);
  box-shadow: var(--pro-focus-ring);
}
.pro-input:disabled { background: var(--pro-bg-subtle); cursor: not-allowed; }
.pro-input--error { border-color: var(--pro-error-500); }

/* ==========================================================================
   BADGES / PILLS
   ========================================================================== */
.pro-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pro-space-1);
  font-size: var(--pro-font-size-caption);
  font-weight: var(--pro-font-weight-medium);
  padding: var(--pro-space-1) var(--pro-space-3);
  border-radius: var(--pro-radius-full);
  border: 1px solid transparent;
}
.pro-badge--brand   { background: var(--pro-brand-200); color: var(--pro-brand-900); }
.pro-badge--neutral { background: var(--pro-bg-muted); color: var(--pro-text-secondary); }
.pro-badge--success { background: var(--pro-success-bg); color: var(--pro-success-fg); border-color: var(--pro-success-border); }
.pro-badge--warning { background: var(--pro-warning-bg); color: var(--pro-warning-fg); border-color: var(--pro-warning-border); }
.pro-badge--error   { background: var(--pro-error-bg);   color: var(--pro-error-fg);   border-color: var(--pro-error-border); }
.pro-badge--info    { background: var(--pro-info-bg);    color: var(--pro-info-fg);    border-color: var(--pro-info-border); }

/* ==========================================================================
   ALERTS
   ========================================================================== */
.pro-alert {
  display: flex;
  gap: var(--pro-space-3);
  padding: var(--pro-space-4);
  border-radius: var(--pro-radius-md);
  border: 1px solid transparent;
  font-size: var(--pro-font-size-sm);
}
.pro-alert__title { font-weight: var(--pro-font-weight-bold); margin: 0 0 var(--pro-space-1); }
.pro-alert--success { background: var(--pro-success-bg); color: var(--pro-success-fg); border-color: var(--pro-success-border); }
.pro-alert--warning { background: var(--pro-warning-bg); color: var(--pro-warning-fg); border-color: var(--pro-warning-border); }
.pro-alert--error   { background: var(--pro-error-bg);   color: var(--pro-error-fg);   border-color: var(--pro-error-border); }
.pro-alert--info    { background: var(--pro-info-bg);    color: var(--pro-info-fg);    border-color: var(--pro-info-border); }

/* ==========================================================================
   TABLA
   ========================================================================== */
.pro-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pro-font-size-sm);
}
.pro-table th {
  text-align: left;
  text-transform: uppercase;
  font-size: var(--pro-font-size-caption);
  font-weight: var(--pro-font-weight-bold);
  color: var(--pro-text-muted);
  padding: var(--pro-space-3) var(--pro-space-4);
  border-bottom: 2px solid var(--pro-border-default);
}
.pro-table td {
  padding: var(--pro-space-3) var(--pro-space-4);
  border-bottom: 1px solid var(--pro-border-subtle);
  color: var(--pro-text-primary);
}
.pro-table tbody tr:hover { background: var(--pro-bg-subtle); }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.pro-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pro-space-6);
  padding: var(--pro-space-4) var(--pro-space-6);
  background: var(--pro-bg-surface);
  border-bottom: 1px solid var(--pro-border-subtle);
}
.pro-navbar__brand { font-weight: var(--pro-font-weight-bold); text-transform: uppercase; font-size: var(--pro-font-size-lg); }
.pro-navbar__links { display: flex; gap: var(--pro-space-6); list-style: none; margin: 0; padding: 0; }
.pro-navbar__links a {
  color: var(--pro-text-secondary);
  text-decoration: none;
  font-size: var(--pro-font-size-sm);
  font-weight: var(--pro-font-weight-medium);
  transition: color var(--pro-duration-fast) var(--pro-ease-standard);
}
.pro-navbar__links a:hover { color: var(--pro-text-primary); }

/* ==========================================================================
   UTILIDADES DE COLOR / SUPERFICIE
   ========================================================================== */
.pro-surface { background: var(--pro-bg-surface); }
.pro-surface-subtle { background: var(--pro-bg-subtle); }
.pro-gradient-brand { background: var(--pro-gradient-brand); }
.pro-divider { height: 1px; background: var(--pro-border-subtle); border: 0; margin: var(--pro-space-6) 0; }