.banner {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
}
.banner.bad { background: #fde8e6; color: var(--coral); }
.banner.good { background: #ddf7f1; color: var(--aqua); }
dialog.popup { width: min(560px, calc(100% - 24px)); }
dialog.popup .sheet > header { flex-wrap: nowrap; align-items: center; }
dialog.popup .sheet > header h2 { flex: 1; min-width: 0; }
.visit dialog select,
.visit dialog input,
.visit dialog textarea { width: 100%; padding: 12px; border-radius: 12px; }
.popup-form { margin-top: 18px; }
.history { margin-top: 18px; display: grid; gap: 10px; }
.history article { padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.history p { margin: 0; }
.login-card { padding: 26px; display: grid; gap: 8px; align-content: start; }
.home-card { text-decoration: none; }
.stack { display: grid; gap: 8px; }
.pad { padding: 22px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.section-title { font-family: var(--serif); font-weight: 560; letter-spacing: -0.03em; }
.line-card { padding: 12px 0; border-top: 1px solid var(--line); }
.line-card header { display: flex; justify-content: space-between; gap: 8px; }
.plain { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.cam { display: block; width: 100%; max-height: 52dvh; object-fit: cover; border-radius: 16px; background: #102126; }
.cam[hidden] { display: none; }
a.waze {
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  background: #102a22;
  color: #d9fff4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.qr { width: 180px; height: 180px; }
.labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding-bottom: 40px; }
.label {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: white;
  text-align: center;
}
.label img { width: 140px; height: 140px; }
.doc { overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.doc th, .doc td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.total { font-family: var(--serif); font-size: 28px; }
.status.nuevo, .status.borrador, .status.almacen { background: #fff4d8; color: var(--sun); }
.status.asignado, .status.emitido, .status.emitida, .status.instalada { background: #ddf7f1; color: var(--aqua); }
.status.no_contesta, .status.revision { background: #e7eef8; color: var(--cyan); }
.status.no_interesa, .status.baja, .status.cancelada { background: #f3e8e6; color: #8a625c; }
.status.cita, .status.hecha { background: #e5eef1; color: var(--sea); }
.scanner { display: grid; gap: 10px; margin-top: 14px; }
.scan-actions { display: grid; gap: 8px; }
.scan-actions .primary, .scan-actions .ghost, .scan-file { width: 100%; text-align: center; }
.scan-actions [hidden] { display: none; }
.scan-file {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 10px 14px;
}
.scan-file input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.actions { flex-wrap: wrap; }
.actions .field { flex: 1 1 180px; min-width: 0; }
@media (max-width: 860px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .wrap, .top, .demo { width: calc(100% - 16px); }
  .top {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: max(8px, env(safe-area-inset-top));
    padding: 8px;
  }
  .top > form { margin-left: auto; }
  .mark { width: 36px; height: 36px; }
  .brand strong { font-size: 20px; }
  .top nav {
    order: 3;
    width: 100%;
    display: flex;
    grid-template-columns: none;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .top nav a { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; text-align: left; }
  .toolbar { margin-top: 12px; padding: 12px; }
  .toolbar h1 { font-size: 30px; }
  .controls { width: 100%; }
  .controls button, .controls a, .controls .ghost, .controls .waze { min-height: 44px; }
  .board { grid-template-columns: 1fr; gap: 10px; }
  .visit { padding: 14px; }
  .visit footer .primary, .visit .actions button, .visit .actions a { width: 100%; }
  .split { grid-template-columns: 1fr; }
  dialog, dialog.popup {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    margin: auto;
  }
  .sheet { max-height: calc(100dvh - 24px); padding: 16px; }
  .sheet h2 { font-size: 28px; }
  .map { height: 42dvh; }
  .route-list li { grid-template-columns: auto 1fr; align-items: start; }
  .route-list li > div { min-width: 0; }
  .route-list li > div:first-of-type { display: grid; gap: 2px; }
  .route-list li > div:last-child { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
  input, select, textarea { font-size: 16px; }
  button, .ghost, .primary, .waze { min-height: 44px; }
}
@media print {
  .top, .demo, .toolbar, .no-print, .banner, .toast { display: none !important; }
  body { background: white; }
  .card { box-shadow: none; }
}