body { background: #f6f8fb; }
.card { border-radius: 14px; }

/* Encabezado azul claro */
.header-blue { background: #bfe8ff; }
.header-blue .navbar-brand,
.header-blue .header-meta { color: #0f2a3d; }
.header-blue .header-link {
  color: #0b4f7a;
  text-decoration: none;
  font-weight: 600;
}
.header-blue .header-link:hover { text-decoration: underline; }

.drawer-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(70px, 1fr));
  gap: 8px;
}
.drawer-cell {
  display: block;
  text-decoration: none;
  border-radius: 10px;
  padding: 8px;
  border: 1px solid #dce3ee;
  background: #fff;
  color: #1c2430;
  min-height: 62px;
}
.drawer-cell .label { display:block; font-size: .82rem; font-weight: 600; }
.drawer-cell .meta { display:block; font-size: .72rem; opacity: .8; }
.drawer-cell.empty { background: #ffffff; }
.drawer-cell.filled { background: #e8f7ea; border-color: #b9e3c0; }
.drawer-cell.blocked { background: #ffe7e7; border-color: #f2b3b3; color: #8b1d1d; }

@media (max-width: 576px){
  .drawer-grid { grid-template-columns: repeat(var(--cols), minmax(56px, 1fr)); gap: 6px; }
  .drawer-cell { padding: 6px; min-height: 54px; }
}