/* === Coronel Sur — Componentes base ==============================
 *
 * Componentes reusables que viven sobre tokens.css. Todos los nombres
 * de clase llevan prefijo `cs-` para evitar choques con CSS legacy.
 *
 * Uso: importar despues de tokens.css
 *   <link rel="stylesheet" href="/static/components/tokens.css">
 *   <link rel="stylesheet" href="/static/components/components.css">
 *
 * Convencion: variantes por modificador (`cs-btn`, `cs-btn--primary`).
 * ================================================================ */

/* ── Reset minimo (Tailwind preflight inspired) ─────────────────── */
.cs-reset, .cs-reset *, .cs-reset *::before, .cs-reset *::after {
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────
 * BUTTON — primary / secondary / ghost / danger / icon
 * ───────────────────────────────────────────────────────────────── */
.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.cs-btn:hover { background: var(--surface-3); }
.cs-btn:active { transform: translateY(1px); }
.cs-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.cs-btn:disabled, .cs-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variantes */
.cs-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: var(--fw-semibold);
}
.cs-btn--primary:hover { background: var(--accent-2); }

.cs-btn--secondary {
  background: var(--surface);
  border-color: var(--border);
}
.cs-btn--secondary:hover { border-color: var(--border-strong); }

.cs-btn--ghost {
  background: transparent;
  color: var(--text-2);
}
.cs-btn--ghost:hover {
  background: var(--surface);
  color: var(--text);
}

.cs-btn--danger {
  background: var(--danger);
  color: white;
}
.cs-btn--danger:hover { background: #dc2626; }

/* Tamanos */
.cs-btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--fs-sm); }
.cs-btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--fs-md); }
.cs-btn--xl { padding: var(--space-4) var(--space-8); font-size: var(--fs-md); }

/* Solo icono (cuadrado) */
.cs-btn--icon {
  padding: var(--space-2);
  width: 36px;
  height: 36px;
}

/* Ancho completo */
.cs-btn--block { width: 100%; }

/* ─────────────────────────────────────────────────────────────────
 * INPUT — text / search / number / textarea
 * ───────────────────────────────────────────────────────────────── */
.cs-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cs-input::placeholder { color: var(--text-3); }
.cs-input:hover { border-color: var(--border-strong); }
.cs-input:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.cs-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Tamanos */
.cs-input--sm { padding: var(--space-1) var(--space-2); font-size: var(--fs-sm); }
.cs-input--lg { padding: var(--space-3) var(--space-4); font-size: var(--fs-md); }

/* Input para numeros (precios, codigos) — fuente mono */
.cs-input--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Input wrapper con icono */
.cs-input-group { position: relative; }
.cs-input-group .cs-input { padding-left: 36px; }
.cs-input-group .cs-input--right-icon { padding-right: 36px; padding-left: var(--space-3); }
.cs-input-group__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: var(--fs-md);
  pointer-events: none;
}
.cs-input-group__icon--right { left: auto; right: var(--space-3); }

/* Label de input */
.cs-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: var(--space-1);
}

/* ─────────────────────────────────────────────────────────────────
 * CHIP — filter, status, segment
 * ───────────────────────────────────────────────────────────────── */
.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
}
.cs-chip:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--text);
}

.cs-chip--active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* Variantes semanticas (status badges) */
.cs-chip--success { color: var(--success); border-color: var(--success); background: var(--success-dim); }
.cs-chip--warning { color: var(--warning); border-color: var(--warning); background: var(--warning-dim); }
.cs-chip--danger  { color: var(--danger);  border-color: var(--danger);  background: var(--danger-dim); }
.cs-chip--info    { color: var(--info);    border-color: var(--info);    background: var(--info-dim); }

.cs-chip__count {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  opacity: 0.8;
  margin-left: var(--space-1);
}

/* Chip solo de presentacion (no clickable) */
.cs-chip--static { cursor: default; }
.cs-chip--static:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-2);
}

/* ─────────────────────────────────────────────────────────────────
 * CARD — KPI, list item, product card
 * ───────────────────────────────────────────────────────────────── */
.cs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--pad-card);
  transition: border-color var(--transition);
}
.cs-card--hover:hover { border-color: var(--border-strong); }

.cs-card--elevated { box-shadow: var(--shadow); }

.cs-card__title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-bottom: var(--space-2);
}
.cs-card__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: var(--lh-tight);
}
.cs-card__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
}
.cs-card__delta--up   { color: var(--success); }
.cs-card__delta--down { color: var(--danger); }

/* ─────────────────────────────────────────────────────────────────
 * SKELETON — loading state
 * ───────────────────────────────────────────────────────────────── */
.cs-skeleton {
  display: block;
  background: linear-gradient(90deg,
    var(--surface-2) 0%,
    var(--surface-3) 50%,
    var(--surface-2) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: cs-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes cs-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Helpers de tamano */
.cs-skeleton--text   { height: 14px; width: 100%; }
.cs-skeleton--title  { height: 24px; width: 60%; }
.cs-skeleton--card   { height: 120px; }
.cs-skeleton--avatar { width: 32px; height: 32px; border-radius: 50%; }
.cs-skeleton--img    { width: 100%; aspect-ratio: 4 / 3; }

/* ─────────────────────────────────────────────────────────────────
 * HERO — banner principal de tienda / landing
 * ───────────────────────────────────────────────────────────────── */
.cs-hero {
  position: relative;
  padding: var(--space-12) var(--space-6);
  background:
    radial-gradient(ellipse at 80% 20%, var(--accent-dim) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-elev) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
  overflow: hidden;
}
.cs-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}
.cs-hero__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--space-3);
  max-width: 600px;
}
.cs-hero__subtitle {
  font-size: var(--fs-md);
  color: var(--text-2);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-6);
  max-width: 500px;
}
.cs-hero__cta-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────
 * TRUST SIGNALS — fila con iconos + labels (envio, pago seguro, etc.)
 * ───────────────────────────────────────────────────────────────── */
.cs-trust-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-8);
}
.cs-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-2);
}
.cs-trust-item__icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.cs-trust-item__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
}
.cs-trust-item__sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────────
 * UTILITIES — stack, row, gap, sr-only
 * ───────────────────────────────────────────────────────────────── */
.cs-stack    { display: flex; flex-direction: column; }
.cs-row      { display: flex; flex-direction: row; align-items: center; }
.cs-row--center { justify-content: center; }
.cs-row--between { justify-content: space-between; }
.cs-row--end { justify-content: flex-end; }
.cs-gap-1 { gap: var(--space-1); }
.cs-gap-2 { gap: var(--space-2); }
.cs-gap-3 { gap: var(--space-3); }
.cs-gap-4 { gap: var(--space-4); }
.cs-gap-6 { gap: var(--space-6); }

.cs-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cs-muted { color: var(--text-3); }

/* Visually hide (accesible para SR) */
.cs-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────────────────────────
 * RESPONSIVE — breakpoints (mobile-first)
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cs-hero { padding: var(--space-8) var(--space-4); margin-bottom: var(--space-6); }
  .cs-trust-row { grid-template-columns: 1fr; padding: var(--space-4); }
  .cs-trust-item__sub { display: none; }
}