* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f4f6f8;
  color: #1f2933;
  overflow: hidden;
}

.dashboard {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topbar {
  background-color: #e5e7ea;
  border-bottom: 1px solid #c9ced5;
  padding: clamp(16px, 1.6vh, 24px) clamp(22px, 2vw, 36px);
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  width: clamp(120px, 8vw, 180px);
  height: clamp(36px, 4vh, 56px);
  object-fit: contain;
}

.updated-at {
  font-size: clamp(14px, 1.2vh, 20px);
  color: #334155;
  white-space: nowrap;
}

.content {
  min-height: 0;
  padding: clamp(16px, 1.8vh, 30px);
}

.warning {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  color: #92400e;
  background-color: #ffedd5;
}

.hidden {
  display: none;
}

.board {
  --grid-gap: clamp(10px, 1vh, 16px);
  height: 100%;
  display: grid;
  gap: var(--grid-gap);
}

.grid-main {
  display: grid;
  gap: var(--grid-gap);
}

.grid-last {
  display: flex;
  justify-content: center;
  gap: var(--grid-gap);
}

.card {
  border: 1px solid transparent;
  border-radius: 12px;
  min-height: 0;
  padding: clamp(10px, 1.1vh, 16px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.15);
}

.card h2 {
  margin: 0;
  font-size: clamp(22px, 1.9vh, 32px);
  line-height: 1.1;
}

.status {
  align-self: flex-start;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: clamp(6px, 0.65vh, 10px) clamp(10px, 0.9vw, 16px);
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(14px, 1.1vh, 20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.card.marcha {
  background-color: #159447;
  border-color: #0f7a39;
}

.card.incidencia {
  background-color: #d83131;
  border-color: #b11f1f;
}