/* Wayra Staging 2026 — capa de armonización visual sin cambios geométricos. */
:root {
  --wayra-polish-shadow: 0 8px 24px rgba(25, 39, 46, .075);
  --wayra-polish-shadow-hover: 0 10px 28px rgba(25, 39, 46, .11);
  --wayra-polish-focus: rgba(18, 79, 159, .24);
}

body {
  background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 190px);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.sidebar {
  background-image: linear-gradient(180deg, var(--sidebar), var(--sidebar-dark));
  box-shadow: 8px 0 28px rgba(19, 29, 34, .08);
}

.nav-link,
.utility-link,
.button {
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.nav-link.active {
  background: rgba(255,255,255,.14);
  box-shadow: inset 3px 0 0 var(--accent);
  color: #fff;
}

.panel,
.stat,
.report-card,
.action-card,
.step {
  border-color: color-mix(in srgb, var(--line) 84%, var(--primary) 16%);
  box-shadow: var(--wayra-polish-shadow);
}

.panel:hover,
.stat:hover,
.report-card:hover,
.action-card:hover {
  border-color: color-mix(in srgb, var(--line) 62%, var(--primary) 38%);
  box-shadow: var(--wayra-polish-shadow-hover);
}

.panel-header {
  border-bottom-color: color-mix(in srgb, var(--line) 88%, var(--primary) 12%);
}

.panel-header h2,
.page-heading h1 {
  color: color-mix(in srgb, var(--text) 86%, var(--primary) 14%);
  letter-spacing: -.012em;
}

th {
  background: color-mix(in srgb, var(--surface) 91%, var(--primary) 9%);
  color: color-mix(in srgb, var(--text) 70%, var(--primary) 30%);
}

input:not([type=checkbox]):not([type=radio]),
textarea,
select {
  border-color: color-mix(in srgb, var(--line) 78%, var(--text) 22%);
  box-shadow: inset 0 1px 2px rgba(25, 39, 46, .035);
}

input:not([type=checkbox]):not([type=radio]):focus,
textarea:focus,
select:focus {
  border-color: var(--primary);
  outline: 0;
  box-shadow: 0 0 0 3px var(--wayra-polish-focus);
}

.button.primary {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary) 90%, white 10%), var(--primary));
  box-shadow: 0 2px 7px rgba(18,79,159,.16);
}

.button.secondary {
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--primary) 30%);
}

.button.ghost:hover,
.utility-link:hover {
  background: color-mix(in srgb, var(--surface) 88%, var(--primary) 12%);
  border-color: color-mix(in srgb, var(--line) 55%, var(--primary) 45%);
}

.alert,
.service-readonly-banner,
.paste-hint {
  border: 1px solid rgba(36, 53, 61, .08);
  box-shadow: 0 2px 9px rgba(25, 39, 46, .035);
}

.status,
.badge {
  box-shadow: inset 0 0 0 1px rgba(36, 53, 61, .06);
}

.wayra-staging-banner {
  background-image: linear-gradient(90deg, #6f4b0b, #8a6115);
  border-bottom: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 3px 12px rgba(41,31,12,.16);
}

.login-shell {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,216,61,.11), transparent 34%),
    radial-gradient(circle at 82% 75%, rgba(35,112,169,.24), transparent 38%),
    linear-gradient(145deg, #102a3a, #173f56 54%, #102c3f);
}

.login-card {
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: 0 28px 80px rgba(5,20,29,.32), 0 2px 8px rgba(5,20,29,.12);
}

@media (prefers-reduced-motion: reduce) {
  .nav-link, .utility-link, .button { transition: none; }
}