/* ============================================================
   Cerealpaz — prototipo navegable
   Componentes del design system reescritos como CSS plano
   (en el diseño original son componentes React que sólo existen
   dentro del canvas de Claude Design) + marco de la demo.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #e8ebf0;
  font-family: var(--font-sans);
  color: var(--fg-default);
  -webkit-font-smoothing: antialiased;
}

/* ── Franja de demo ───────────────────────────────────────── */

.demo-barra {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 9px 18px;
  background: var(--color-navy-950);
  color: var(--color-navy-100);
  font-size: 12.5px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.demo-barra strong {
  color: #fff;
  font-weight: 600;
  letter-spacing: .01em;
}
.demo-barra .demo-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-warning-400);
  flex-shrink: 0;
}
.demo-barra .demo-sep { flex: 1; }
.demo-barra label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-navy-300);
}
.demo-barra select {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  max-width: 320px;
  cursor: pointer;
}
.demo-barra select:focus-visible {
  outline: 2px solid var(--color-teal-400);
  outline-offset: 1px;
}
.demo-barra option { color: #16202e; background: #fff; }

/* ── Marco de la pantalla ─────────────────────────────────── */
/* El diseño está compuesto a 1440x1024. Se conserva ese lienzo
   y se escala para que entre en cualquier pantalla: así lo que
   se ve es exactamente lo aprobado, sin recomponer nada.      */

.escenario {
  display: flex;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}
.marco {
  width: 1440px;
  min-height: 1024px;
  flex-shrink: 0;
  display: flex;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform-origin: top center;
}
.marco a { text-decoration: none; color: inherit; }
.marco a:focus-visible {
  outline: 2px solid var(--color-teal-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Button ───────────────────────────────────────────────── */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  letter-spacing: .01em;
  border-radius: var(--radius-button);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: var(--transition-button);
  text-decoration: none;
  white-space: nowrap;
  outline: none;
  position: relative;
  font-size: var(--text-sm);
  padding: var(--space-2-5) var(--space-4);
  height: 38px;
}
.ds-btn--sm { font-size: var(--text-sm); padding: var(--space-1-5) var(--space-3); height: 32px; }
.ds-btn--lg { font-size: var(--text-base); padding: var(--space-3) var(--space-6); height: 44px; }
.ds-btn--block { width: 100%; }

.ds-btn--primary {
  background-color: var(--color-teal-600);
  color: var(--color-white);
  border-color: var(--color-teal-600);
  box-shadow: var(--shadow-button-primary);
}
.ds-btn--primary:hover { background-color: var(--color-teal-700); border-color: var(--color-teal-700); }

.ds-btn--secondary {
  background-color: var(--bg-default);
  color: var(--color-navy-900);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-button);
}
.ds-btn--secondary:hover { background-color: var(--color-gray-50); }

.ds-btn--ghost { background-color: transparent; color: var(--color-navy-900); border-color: transparent; }
.ds-btn--ghost:hover { background-color: var(--color-gray-100); }

.ds-btn--outline { background-color: transparent; color: var(--color-teal-700); border-color: var(--color-teal-400); }
.ds-btn--outline:hover { background-color: var(--color-teal-50); }

.ds-btn--destructive {
  background-color: var(--color-danger-500);
  color: var(--color-white);
  border-color: var(--color-danger-500);
  box-shadow: 0 2px 8px -1px rgba(220, 38, 38, .30);
}
.ds-btn--destructive:hover { background-color: var(--color-danger-700); border-color: var(--color-danger-700); }

.ds-btn--gold {
  background-color: var(--color-warning-500);
  color: var(--color-white);
  border-color: var(--color-warning-500);
  box-shadow: 0 2px 8px -1px rgba(217, 119, 6, .30);
}
.ds-btn:focus-visible { box-shadow: var(--focus-ring); }

/* ── Badge ────────────────────────────────────────────────── */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--radius-badge);
  border: 1px solid transparent;
  white-space: nowrap;
  font-size: var(--text-xs);
  padding: 3px 9px;
  letter-spacing: .02em;
}
.ds-badge--sm { font-size: 10px; padding: 2px 7px; letter-spacing: .03em; }
.ds-badge--lg { font-size: var(--text-sm); padding: 4px 12px; }

.ds-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.ds-badge--default { background: var(--color-gray-100); color: var(--color-gray-700); border-color: var(--color-gray-200); }
.ds-badge--aldia,
.ds-badge--active { background: var(--status-al-dia-bg); color: var(--status-al-dia-fg); border-color: var(--status-al-dia-ring); }
.ds-badge--atrasado,
.ds-badge--pending { background: var(--status-atrasado-bg); color: var(--status-atrasado-fg); border-color: var(--status-atrasado-ring); }
.ds-badge--sinconexion,
.ds-badge--urgent { background: var(--status-sin-conexion-bg); color: var(--status-sin-conexion-fg); border-color: var(--status-sin-conexion-ring); }
.ds-badge--datoviejo,
.ds-badge--review { background: var(--status-dato-viejo-bg); color: var(--status-dato-viejo-fg); border-color: var(--status-dato-viejo-ring); }
.ds-badge--falla { background: var(--status-falla-bg); color: var(--status-falla-fg); border-color: var(--status-falla-ring); }
.ds-badge--neutro,
.ds-badge--closed { background: var(--status-neutro-bg); color: var(--status-neutro-fg); border-color: var(--status-neutro-ring); }
.ds-badge--acento,
.ds-badge--teal { background: var(--color-teal-100); color: var(--color-teal-800); border-color: var(--color-teal-300); }
.ds-badge--navy { background: var(--color-navy-900); color: var(--color-white); border-color: var(--color-navy-900); }
.ds-badge--gold { background: var(--color-warning-100); color: var(--color-warning-800); border-color: var(--color-warning-400); }

/* ── Avatar ───────────────────────────────────────────────── */

.ds-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
  width: 40px; height: 40px; font-size: 14px;
}
.ds-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.ds-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.ds-avatar--lg { width: 48px; height: 48px; font-size: 16px; }

.ds-avatar--p0 { background: var(--color-teal-100);    color: var(--color-teal-800); }
.ds-avatar--p1 { background: var(--color-navy-100);    color: var(--color-navy-800); }
.ds-avatar--p2 { background: var(--color-warning-100); color: var(--color-warning-800); }
.ds-avatar--p3 { background: var(--color-success-100); color: var(--color-success-700); }
.ds-avatar--p4 { background: var(--color-info-100);    color: var(--color-info-600); }

/* ── Input ────────────────────────────────────────────────── */

.ds-campo { display: flex; flex-direction: column; gap: var(--space-1-5); }
.ds-campo__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--fg-default);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.ds-campo__caja {
  display: flex;
  align-items: center;
  border-radius: var(--radius-input);
  border: 1.5px solid var(--border-strong);
  background: var(--bg-default);
  transition: var(--transition-input);
  overflow: hidden;
}
.ds-campo__caja:focus-within { border-color: var(--color-teal-500); box-shadow: var(--focus-ring); }
.ds-campo--error .ds-campo__caja { border-color: var(--color-danger-400); }
.ds-campo__caja input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg-default);
  padding: 8px 12px;
  height: 36px;
  border: none;
  outline: none;
  background: transparent;
}
.ds-campo__caja input::placeholder { color: var(--fg-subtle); }
.ds-campo__sufijo {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--fg-accent);
  padding: 0 12px;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  font-family: var(--font-sans);
}
.ds-campo__ayuda { font-size: var(--text-xs); color: var(--fg-muted); }
.ds-campo--error .ds-campo__ayuda { color: var(--color-danger-700); }

/* ── Select ───────────────────────────────────────────────── */

.ds-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--fg-default);
  background-color: var(--bg-default);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-input);
  padding: 7px 34px 7px 12px;
  height: 38px;
  outline: none;
  transition: var(--transition-input);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6170' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.ds-select:focus-visible { border-color: var(--color-teal-500); box-shadow: var(--focus-ring); }

/* ── Navegación cableada sobre el diseño ──────────────────── */

.nav-item { cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.nav-item:hover { background: rgba(255, 255, 255, .07) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}