/* ═══════════════════════════════════════════════════════════
   K14 ◆ OPEN_SERVICES · neo-brutalist design system
   shared tokens + global components
   ═══════════════════════════════════════════════════════════ */

:root {
  --white:           #ffffff;
  --paper:           #f5f5f5;
  --paper-dark:      #e5e5e5;
  --ink:             #0a0a0a;
  --ink-soft:        #1a1a1a;
  --rule:            #0a0a0a;
  --muted:           #6b6b6b;
  --muted-soft:      #a8a8a8;
  --neo-green:       #00ff66;
  --neo-green-d:     #00cc52;
  --hot-pink:        #ff2bd1;
  --hot-pink-d:      #d100a3;
  --bright-orange:   #ff8a00;
  --bright-orange-d: #cc6e00;
  --electric-blue:   #2b6bff;
  --electric-blue-d: #1850d8;
  --soft-yellow:     #fff170;
  --border:          3px solid var(--ink);
  --border-thin:     2px solid var(--ink);
  --shadow-hard:     6px 6px 0 var(--ink);
  --shadow-md:       4px 4px 0 var(--ink);
  --shadow-sm:       3px 3px 0 var(--ink);
  --ease:            cubic-bezier(0.25, 1, 0.5, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Archivo Black', sans-serif; font-weight: 900; letter-spacing: -0.02em; }
.font-mono    { font-family: 'JetBrains Mono', monospace; }

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}

/* ═══ BRAND BAR ═══ */
.brand-bar {
  background: var(--white);
  border: var(--border);
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto auto;
  align-items: stretch;
  margin-bottom: 24px;
}
.brand-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-right: var(--border-thin);
  text-decoration: none;
  color: var(--ink);
}
.brand-cell.link { cursor: pointer; transition: background 150ms; }
.brand-cell.link:hover { background: var(--soft-yellow); }
.brand-cell:last-child { border-right: none; }
.brand-logo {
  width: 52px;
  height: 52px;
  border: var(--border-thin);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  flex-shrink: 0;
  padding: 6px;
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1; gap: 4px; }
.brand-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: uppercase;
}
.brand-sub {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brand-spacer { border-right: var(--border-thin); }

.meta-cell {
  padding: 12px 18px;
  border-right: var(--border-thin);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 130px;
}
.meta-cell .k {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.meta-cell .v {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.meta-cell .v.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.meta-cell .v.status::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--neo-green);
  border: 1.5px solid var(--ink);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:0.4 } }

.exit-btn {
  background: var(--ink);
  color: var(--white);
  border: none;
  padding: 0 26px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 150ms;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.exit-btn:hover { background: var(--hot-pink); color: var(--ink); }

/* ═══ HERO ═══ */
.hero-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(56px, 9vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-transform: uppercase;
}
.sticker {
  background: var(--white);
  border: var(--border-thin);
  padding: 10px 16px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  transform: rotate(2deg);
  box-shadow: var(--shadow-sm);
  text-transform: uppercase;
  text-align: center;
  max-width: 220px;
  margin-top: 18px;
  align-self: center;
}

.subtitle {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.subtitle .sep { color: var(--muted-soft); margin: 0 6px; }

/* ═══ TAGS ROW ═══ */
.tags-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: var(--border-thin);
  align-items: center;
}
.tags-row .tag { display: inline-flex; gap: 6px; }
.tags-row .tag .k { color: var(--muted); }
.tags-row .sep { color: var(--muted-soft); }

/* ═══ CARD ═══ */
.card {
  background: var(--white);
  border: var(--border);
  padding: 22px 24px;
}
.card-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title::before { content: '//'; color: var(--muted-soft); }

/* ═══ BUTTONS ═══ */
.btn {
  padding: 13px 16px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: var(--border-thin);
  background: var(--white);
  text-align: center;
  text-decoration: none;
  display: block;
  color: var(--ink);
  transition: all 150ms var(--ease);
}
.btn:hover { background: var(--soft-yellow); }
.btn-primary {
  background: var(--neo-green);
  color: var(--ink);
  border: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); background: var(--neo-green); }
.btn-primary:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-ghost { background: var(--white); }
.btn-ghost:hover { background: var(--soft-yellow); }

/* ═══ STATUS BADGE (Cliente / Prestador) ═══ */
.status-badge {
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: var(--border-thin);
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
}
.status-badge > span:first-child { font-size: 13px; line-height: 1; }
.badge-done    { background: var(--neo-green); }
.badge-working { background: var(--bright-orange); }
.badge-pending { background: var(--paper); color: var(--muted); }
.badge-blocked { background: var(--hot-pink); }

/* ═══ TOAST ═══ */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  background: var(--neo-green);
  color: var(--ink);
  padding: 14px 24px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: var(--border);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  transition: transform 400ms var(--ease);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ═══ FOCUS / SCROLL ═══ */
::selection { background: var(--neo-green); color: var(--ink); }

/* ═══ RESPONSIVE BRAND BAR ═══ */
@media (max-width: 1100px) {
  .brand-bar { grid-template-columns: 1fr 1fr; }
  .brand-cell { border-right: var(--border-thin); border-bottom: var(--border-thin); }
  .brand-cell:nth-child(2n) { border-right: none; }
  .brand-spacer { display: none; }
  .meta-cell { border-right: var(--border-thin); border-bottom: var(--border-thin); min-width: 0; }
  .meta-cell:nth-child(2n+1) { border-right: none; }
  .exit-btn { grid-column: 1 / -1; padding: 14px; }
}
@media (max-width: 760px) {
  .wrap { padding: 16px; }
  .hero-title { font-size: 48px; }
  .brand-bar { grid-template-columns: 1fr; }
  .brand-cell, .meta-cell { border-right: none; border-bottom: var(--border-thin); }
}

@media print {
  body { background: white; }
  .toast { display: none !important; }
}