@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800;900&family=Inter:wght@400;500;600&display=swap');

:root {
  /* --- Marca (del feed / logo) --- */
  --zn-navy-900: #060E24;
  --zn-navy-800: #0B1B3F;
  --zn-blue-700: #1739C4;
  --zn-blue-600: #2F55F0;
  --zn-blue-500: #4A72FF;
  --zn-blue-400: #7C9BFF;

  /* --- Neutros / UI funcional --- */
  --zn-white: #FFFFFF;
  --zn-gray-050: #F4F6FB;
  --zn-gray-100: #E7EAF3;
  --zn-gray-400: #8993A8;
  --zn-gray-800: #1A2035;

  /* --- Estados --- */
  --zn-success: #23C08B;
  --zn-warning: #F5A623;
  --zn-danger: #F0455A;

  /* --- Gradiente de marca --- */
  --zn-gradient-brand: linear-gradient(135deg, var(--zn-navy-900) 0%, var(--zn-blue-700) 55%, var(--zn-blue-500) 100%);

  /* --- Tipografia --- */
  --zn-font-display: 'Poppins', sans-serif;
  --zn-font-body: 'Inter', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--zn-font-body);
  color: var(--zn-gray-800);
}

h1, h2, h3, .zn-display {
  font-family: var(--zn-font-display);
}

a {
  color: inherit;
}

/* --- Header superior (comun a login, portal cliente y panel admin) --- */
.zn-header {
  background: var(--zn-navy-900);
  color: var(--zn-white);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.zn-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.zn-header-title {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 15px;
}

.zn-header-user {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  flex-shrink: 0;
}

.zn-header-user a {
  color: var(--zn-blue-400);
  text-decoration: none;
}

.zn-header-user a:hover {
  text-decoration: underline;
}

.zn-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--zn-white);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .zn-header {
    flex-wrap: wrap;
  }
}