/* ============================================================
   Cronos Agendamento — plugin styles
   Prototype design system, scoped under #cronos-root so it
   never collides with the host WordPress theme.
   ============================================================ */

/* Full-bleed: let the app own the viewport on its page. */
body.cronos-app-page { margin: 0; background: #F4EFE3; }
body.cronos-app-page .entry-content,
body.cronos-app-page .wp-block-post-content,
body.cronos-app-page .site-content,
body.cronos-app-page main { margin: 0 !important; padding: 0 !important; max-width: none !important; }

#cronos-root { display: block; }
#cronos-root .app { min-height: 100vh; position: relative; }

/* Auth additions (login/register inside the app) */
#cronos-root .auth-error {
  margin: 4px 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--warn-soft);
  border: 1px solid #F0C9A8;
  color: var(--accent-deep);
  font-size: 13px;
}
#cronos-root .auth-switch {
  width: 100%;
  margin-top: 18px;
  padding: 10px;
  font-size: 13px;
  color: var(--ink-3);
  background: none;
  text-align: center;
}
#cronos-root .auth-switch em { font-style: normal; color: var(--accent); font-weight: 500; }
#cronos-root .auth-switch:hover em { text-decoration: underline; }
#cronos-root .field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--elevated);
  font-size: 14px;
  color: var(--ink);
}
#cronos-root .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Editable proceda pill */
#cronos-root .proceda-pill.editable { cursor: pointer; }
#cronos-root .proceda-pill.editable:hover { box-shadow: 0 0 0 2px var(--accent-soft); }
#cronos-root .proceda-input {
  width: 56px; padding: 4px 6px; border: 1px solid var(--accent);
  border-radius: 6px; font-family: 'Geist Mono', monospace; font-size: 13px;
}

/* Checklist cards (cadastros) */
#cronos-root .chk-card {
  background: var(--elevated); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px; margin-bottom: 14px;
}
#cronos-root .chk-card h4 { font-family: 'Instrument Serif', serif; font-size: 22px; font-weight: 400; margin-bottom: 6px; }
#cronos-root .chk-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
#cronos-root .chk-meta .rc-fact { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); background: var(--surface); border: 1px solid var(--line); padding: 4px 9px; border-radius: 100px; }
#cronos-root .chk-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { #cronos-root .chk-items { grid-template-columns: 1fr; } }
#cronos-root .chk-item { display: flex; gap: 8px; font-size: 13px; color: var(--ink-2); align-items: flex-start; }
#cronos-root .chk-item .cat { font-family: 'Geist Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-4); min-width: 92px; padding-top: 2px; }

/* Importação — zona de colar / IA */
#cronos-root .paste-zone { background: var(--elevated); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-sm); }
#cronos-root .paste-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#cronos-root .paste-head label { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); }
#cronos-root .paste-modes { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 100px; padding: 3px; }
#cronos-root .paste-mode { font-size: 12px; padding: 5px 12px; border-radius: 100px; color: var(--ink-3); }
#cronos-root .paste-mode.active { background: var(--accent); color: #fff; }
#cronos-root .paste-zone textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-family: 'Geist Mono', monospace; font-size: 13px; line-height: 1.5; color: var(--ink); background: var(--surface); resize: vertical; }
#cronos-root .paste-zone textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#cronos-root .paste-hint { margin-top: 10px; font-size: 12px; color: var(--ink-3); }
#cronos-root .upload-zone.dragover { border-color: var(--accent); background: var(--accent-soft); }
#cronos-root .upload-sim { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--ink-3); }
#cronos-root .upload-sim input { accent-color: var(--accent); }
#cronos-root .trip-select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13px; font-family: 'Geist Mono', monospace; cursor: pointer; }
#cronos-root .trip-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#cronos-root .import-warns { margin: 8px 0 0; padding: 10px 14px; background: var(--warn-soft); border: 1px solid #F0C9A8; border-radius: 10px; font-size: 12.5px; color: var(--accent-deep); }
#cronos-root .gc-unresolved { color: var(--warn); font-size: 10px; font-family: 'Geist Mono', monospace; }
#cronos-root .gc-diverg { color: var(--ink-3); font-size: 10px; font-family: 'Geist Mono', monospace; margin-top: 2px; }
/* Estado intermediário: roteado pela capital, CD fino a confirmar (informativo, não-bloqueante). */
#cronos-root .gc-cdfino { color: var(--ink-2); background: var(--blue-soft, #EAF1F7); border-radius: 7px; padding: 4px 8px; font-size: 10.5px; margin-top: 3px; line-height: 1.4; }
#cronos-root .gc-cdfino b { color: var(--accent-deep, var(--accent)); }

/* Edição de rede (aba Redes) */
#cronos-root .rd-edit-actions { margin-top: 12px; }
#cronos-root .rd-edit-form { margin-top: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
#cronos-root .rd-edit-form .rf-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#cronos-root .rd-edit-form .rf-row label { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); min-width: 150px; }
#cronos-root .rd-edit-form .rf-row input, #cronos-root .rd-edit-form .rf-row select { flex: 1; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: var(--elevated); color: var(--ink); }
#cronos-root .rd-edit-form .rf-row input:focus, #cronos-root .rd-edit-form .rf-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#cronos-root .rd-edit-form .rf-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
#cronos-root .rd-edit-form .rf-hint { font-size: 11px; color: var(--warn); margin-top: 8px; }
#cronos-root .gc-channel { display: inline-block; font-size: 10px; font-family: 'Geist Mono', monospace; padding: 2px 7px; border-radius: 100px; vertical-align: middle; margin-left: 6px; }
#cronos-root .gc-channel-email { background: var(--accent-soft); color: var(--accent-deep); }
#cronos-root .gc-channel-portal { background: var(--blue-soft); color: var(--blue); }
#cronos-root .gc-channel-telefone { background: var(--green-soft); color: var(--green); }
#cronos-root .gc-channel-indef { background: var(--warn-soft); color: var(--warn); }

/* Entrada de card novo (fade/scale) e toggle de quebra read-only (locked) */
#cronos-root .group-card.gc-enter { animation: gcEnter .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes gcEnter { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
#cronos-root .rule-toggle.locked { cursor: default; opacity: 0.92; }
#cronos-root .rule-toggle.locked:hover { background: inherit; }
@media (prefers-reduced-motion: reduce) {
  #cronos-root .group-card.gc-enter { animation: none; }
}

/* Grupo TRAVADO (aguardando cadastro completo) */
#cronos-root .group-card.gc-blocked { border-color: var(--warn); background: var(--warn-soft); }
#cronos-root .gc-blocked-tag { color: var(--warn); font-size: 10px; font-family: 'Geist Mono', monospace; margin-top: 2px; }

/* Avisos separados por nível (passo 3) */
#cronos-root .import-warns .iw-block { border-radius: 10px; padding: 9px 13px; margin: 8px 0 0; font-size: 12.5px; }
#cronos-root .import-warns .iw-block .iw-head { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
#cronos-root .import-warns .iw-block ul { margin: 0; padding-left: 16px; line-height: 1.55; }
#cronos-root .import-warns .iw-atencao { background: var(--warn-soft); border: 1px solid var(--warn); color: var(--accent-deep); }
#cronos-root .import-warns .iw-atencao .iw-head { color: var(--warn); }
#cronos-root .import-warns .iw-neutro { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
#cronos-root .import-warns .iw-neutro .iw-head { color: var(--ink-3); }

/* Configurações (aba de e-mail no app) */
#cronos-root .cfg-section { background: var(--elevated); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; }
#cronos-root .cfg-section h3 { font-family: 'Instrument Serif', serif; font-size: 22px; font-weight: 400; margin-bottom: 4px; }
/* WhatsApp/Z-API — config exclusiva do dono + tutorial */
#cronos-root .cfg-zapi { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft, rgba(184,74,26,.12)) inset; }
#cronos-root .cfg-owner-tag { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
#cronos-root .cfg-tut { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
#cronos-root .cfg-tut > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent); list-style: none; }
#cronos-root .cfg-tut > summary::-webkit-details-marker { display: none; }
#cronos-root .cfg-tut-body { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
#cronos-root .cfg-tut-body h4 { font-size: 13px; font-weight: 700; color: var(--ink); margin: 14px 0 4px; }
#cronos-root .cfg-tut-body ul { margin: 4px 0 0; padding-left: 18px; }
#cronos-root .cfg-tut-body li { margin: 4px 0; }
#cronos-root .cfg-tut-body a { color: var(--accent); }
#cronos-root .cfg-tut-body .cfg-warn { color: var(--warn, #B3261E); font-weight: 600; }
#cronos-root .cfg-mono { font-family: 'Geist Mono', monospace; font-size: 11.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 10px 0; word-break: break-all; color: var(--ink-1, var(--ink-2)); }
#cronos-root .cfg-section h3 em { font-style: italic; color: var(--accent); }
#cronos-root .cfg-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; line-height: 1.5; }
#cronos-root .cfg-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
#cronos-root .cfg-label { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); min-width: 130px; }
#cronos-root .cfg-toggle { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 100px; padding: 3px; }
#cronos-root .cfg-mode { font-size: 13px; padding: 7px 16px; border-radius: 100px; color: var(--ink-3); }
#cronos-root .cfg-mode.active { background: var(--accent); color: #fff; }
#cronos-root .cfg-locked { font-size: 11px; color: var(--warn); font-family: 'Geist Mono', monospace; }
#cronos-root .cfg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
#cronos-root .cfg-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-deep); border-radius: 100px; padding: 5px 8px 5px 12px; font-size: 13px; }
#cronos-root .cfg-chip button { color: var(--accent-deep); font-size: 15px; line-height: 1; opacity: 0.6; }
#cronos-root .cfg-chip button:hover { opacity: 1; }
/* contato de e-mail da UE: ● ativo (recebe) / ○ inativo (chip esmaecido). */
#cronos-root .cfg-chip.off { background: var(--surface); border-color: var(--line); color: var(--ink-3); }
#cronos-root .cfg-chip .cfg-chip-dot { font-size: 11px; opacity: 1; padding: 0; margin-right: -2px; }
#cronos-root .cfg-chip.off .cfg-chip-dot { color: var(--ink-4); }
#cronos-root .cfg-chip-add { display: inline-flex; align-items: center; gap: 6px; }
#cronos-root .cfg-chip-add input { min-width: 160px; }
#cronos-root .cfg-add { display: flex; gap: 8px; }
#cronos-root .cfg-add input, #cronos-root .cfg-input { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: var(--surface); color: var(--ink); min-width: 260px; }
#cronos-root .cfg-add input:focus, #cronos-root .cfg-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#cronos-root .cfg-actions { margin-top: 8px; }
#cronos-root .cfg-pend { color: var(--warn); font-size: 10px; font-family: 'Geist Mono', monospace; }
#cronos-root .cfg-filiais-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
#cronos-root .cfg-filiais-hint { font-size: 12px; color: var(--ink-3); line-height: 1.5; flex: 1; }
#cronos-root .cfg-row-pend td { background: var(--warn-soft); }

#cronos-root {
  --paper:        #F4EFE3;
  --paper-2:      #ECE5D2;
  --surface:      #FCFAF4;
  --elevated:     #FFFFFF;
  --ink:          #1F1B14;
  --ink-1:        #332D24; /* tom intermediário (usado em vários pontos sem estar definido) */
  --ink-2:        #4A4337;
  --ink-3:        #847A6A;
  --ink-4:        #B5AB97;
  --line:         #E5DCC7;
  --line-soft:    #EFE7D2;
  --accent:       #B84A1A;
  --accent-hi:    #D8612A;
  --accent-deep:  #8C3812;
  --accent-soft:  #FFF1E0;
  --accent-line:  #F0D5B6;
  --green:        #4D7A4D;
  --green-soft:   #E5F0E0;
  --blue:         #4F6B89;
  --blue-soft:    #E5EDF5;
  --warn:         #C76A2D;
  --warn-soft:    #FCE9D6;
  --shadow-sm:    0 1px 2px rgba(31, 27, 20, 0.04);
  --shadow:       0 1px 2px rgba(31, 27, 20, 0.04), 0 8px 24px rgba(31, 27, 20, 0.06);
  --shadow-lg:    0 4px 12px rgba(31, 27, 20, 0.06), 0 24px 60px rgba(31, 27, 20, 0.10);
}

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

#cronos-root, #cronos-root {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

#cronos-root { background-image: radial-gradient(circle at 25% 10%, rgba(184, 74, 26, 0.025), transparent 50%); }

#cronos-root .serif { font-family: 'Instrument Serif', serif; }
#cronos-root .serif-i { font-family: 'Instrument Serif', serif; font-style: italic; }
#cronos-root .mono { font-family: 'Geist Mono', monospace; }

#cronos-root button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
#cronos-root input, #cronos-root select { font: inherit; }

/* ======================== APP SHELL ======================== */

#cronos-root .app { min-height: 100vh; position: relative; }

#cronos-root .screen { display: none; min-height: 100vh; animation: fade 0.5s ease; }
#cronos-root .screen.active { display: block; }

@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ======================== TOPBAR (used after login) ======================== */

#cronos-root .topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 36px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(252, 250, 244, 0.85);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 50;
}

#cronos-root .tb-brand {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
#cronos-root .tb-brand .mark { width: 28px; height: 28px; }
#cronos-root .tb-brand .name {
  font-family: 'Instrument Serif', serif;
  font-size: 19px;
  letter-spacing: -0.005em;
}
#cronos-root .tb-brand .name em { font-style: italic; color: var(--accent); }

#cronos-root .tb-right { display: flex; align-items: center; gap: 16px; }

#cronos-root .tb-user {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--surface);
}
#cronos-root .tb-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-hi), var(--accent-deep));
  color: white;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 600;
}
#cronos-root .tb-uname { font-size: 13px; font-weight: 500; }
#cronos-root .tb-urole {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#cronos-root .tb-actions { display: flex; gap: 4px; }
#cronos-root .tb-icon-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--ink-3);
  transition: all 0.18s;
}
#cronos-root .tb-icon-btn:hover { background: var(--surface); color: var(--ink); }
#cronos-root .tb-icon-btn svg { width: 16px; height: 16px; }

/* ======================== LOGIN ======================== */

#cronos-root .login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 880px) { #cronos-root .login-shell { grid-template-columns: 1fr; } #cronos-root .login-art { display: none; } }

#cronos-root .login-form-col {
  display: flex; align-items: center; justify-content: center;
  padding: 60px 48px;
}

#cronos-root .login-form {
  max-width: 380px;
  width: 100%;
  animation: drift 0.7s ease;
}

@keyframes drift {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

#cronos-root .login-form .brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 48px;
}

#cronos-root .login-form .brand .mark { width: 36px; height: 36px; }
#cronos-root .login-form .brand .name {
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
}
#cronos-root .login-form .brand .name em { font-style: italic; color: var(--accent); }

#cronos-root .login-form h1 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
#cronos-root .login-form h1 em { font-style: italic; color: var(--accent); }

#cronos-root .login-form .sub {
  color: var(--ink-3);
  font-size: 15px;
  margin-bottom: 38px;
}

#cronos-root .field { margin-bottom: 16px; }
#cronos-root .field label {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 8px;
}

#cronos-root .field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--elevated);
  font-size: 14px;
  color: var(--ink);
  transition: all 0.18s;
}
#cronos-root .field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#cronos-root .login-form .help {
  display: flex; justify-content: space-between; align-items: center;
  margin: 18px 0 26px;
  font-size: 13px;
}
#cronos-root .login-form .help label { display: flex; align-items: center; gap: 8px; color: var(--ink-2); cursor: pointer; }
#cronos-root .login-form .help label input { accent-color: var(--accent); }
#cronos-root .login-form .help a { color: var(--accent); text-decoration: none; }

#cronos-root .login-form .legal {
  margin-top: 40px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

#cronos-root .login-art {
  background: linear-gradient(160deg, #1F1B14, #2C2418);
  position: relative;
  overflow: hidden;
}

#cronos-root .login-art-content {
  position: absolute;
  inset: 0;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--paper);
}

#cronos-root .login-art-content .quote {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: rgba(244, 239, 227, 0.95);
  max-width: 420px;
}
#cronos-root .login-art-content .quote em { font-style: normal; color: var(--accent-hi); }

#cronos-root .login-art-content .attribution {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 239, 227, 0.55);
  margin-top: 16px;
}

#cronos-root .login-art-svg {
  position: absolute; inset: 0;
  opacity: 0.6;
  pointer-events: none;
}

/* ======================== HUB ======================== */

#cronos-root .hub-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 40px 100px;
}

#cronos-root .hub-greeting {
  margin-bottom: 56px;
  text-align: left;
}

#cronos-root .hub-greeting .when {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

#cronos-root .hub-greeting h1 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(46px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
#cronos-root .hub-greeting h1 em { font-style: italic; color: var(--accent); }

#cronos-root .hub-greeting .q {
  margin-top: 18px;
  font-size: 18px;
  color: var(--ink-3);
  max-width: 540px;
}

#cronos-root .hub-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 36px;
}

@media (max-width: 800px) { #cronos-root .hub-cards { grid-template-columns: 1fr; } }

/* ─────────── Área "Operações em andamento" no hub (viagens 🚚) ─────────── */
#cronos-root .hub-viagens { margin-bottom: 36px; }
#cronos-root .hub-viagens:empty { display: none; }
#cronos-root .hv-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
#cronos-root .hv-title { font-family: 'Instrument Serif', serif; font-size: 22px; font-weight: 400; margin: 0; flex: 1 1 auto; }

/* Seletor de modo: ▦ Grade · ☰ Lista · 📅 Calendário (segmented control). */
#cronos-root .hv-views { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 100px; flex: 0 0 auto; }
#cronos-root .hv-view-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: none; background: transparent; color: var(--ink-3); font-size: 12.5px; border-radius: 100px; cursor: pointer; transition: all .15s; touch-action: manipulation; }
#cronos-root .hv-view-btn:hover { color: var(--ink); }
#cronos-root .hv-view-btn.active { background: var(--elevated); color: var(--accent); box-shadow: 0 1px 3px rgba(80,60,40,.12); font-weight: 600; }
#cronos-root .hv-view-ic { font-size: 14px; line-height: 1; }

/* ── MODO LISTA (linha em 2 faixas: topo id/status/ações · base rota/frota/datas
      /selos · timeline do caminhão). Flex robusto — nada vaza. ── */
#cronos-root .hv-list { display: flex; flex-direction: column; gap: 8px; }
#cronos-root .hv-row { display: flex; flex-direction: column; gap: 7px; padding: 13px 16px; background: var(--elevated); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: all .15s; }
#cronos-root .hv-row:hover { border-color: var(--accent-line, #F0D8C4); box-shadow: 0 4px 14px rgba(80,60,40,.07); }
#cronos-root .hv-row.hv-sos { border-color: #F0C9C4; background: #FDF4F2; }
#cronos-root .hv-row.hv-atraso { border-left: 3px solid #B3261E; }
#cronos-root .hv-row.hv-done { opacity: .78; background: var(--surface); }
#cronos-root .hv-row.hv-done:hover { opacity: 1; }

/* TOPO da linha */
#cronos-root .hvr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#cronos-root .hvr-ic { font-size: 17px; flex: 0 0 auto; }
#cronos-root .hvr-id b { font-size: 14px; }
#cronos-root .hvr-spacer { flex: 1 1 auto; }
#cronos-root .hvr-acoes { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#cronos-root .hvr-top .hv-go { color: var(--ink-3); font-size: 16px; flex: 0 0 auto; }

/* BASE da linha (metadados): rola/encolhe sem vazar */
#cronos-root .hvr-bottom { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
#cronos-root .hvr-rota, #cronos-root .hvr-datas, #cronos-root .hvr-frota { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cronos-root .hvr-datas { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-3); }
#cronos-root .hvr-minis { display: inline-flex; gap: 4px; flex-wrap: wrap; }
#cronos-root .hvr-frota .hv-wa { text-decoration: none; }

/* TIMELINE do caminhão na lista — reusa .hv-prog/.hv-truck do card; só damos
   uma largura confortável e o texto ao lado. */
#cronos-root .hvr-timeline { display: flex; align-items: center; gap: 12px; }
#cronos-root .hvr-timeline .hv-prog { flex: 1 1 auto; max-width: 420px; margin-top: 0; }
#cronos-root .hvr-timeline .hv-prog-txt { flex: 0 0 auto; margin-top: 0; white-space: nowrap; }

/* ── MODO CALENDÁRIO (pipeline temporal saída→entrega) ── */
#cronos-root .hv-cal { margin-top: 4px; }
#cronos-root .hvc-legend { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
#cronos-root .hvc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 14px; background: var(--elevated); }
#cronos-root .hvc-grid { position: relative; }
#cronos-root .hvc-row, #cronos-root .hvc-head { display: grid; grid-template-columns: 92px 1fr; align-items: center; }
#cronos-root .hvc-row { border-top: 1px solid var(--line); cursor: pointer; transition: background .15s; }
#cronos-root .hvc-row:hover { background: var(--surface); }
#cronos-root .hvc-rowhead { display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12px; color: var(--ink-2); border-right: 1px solid var(--line); align-self: stretch; }
#cronos-root .hvc-rowhead b { font-size: 12.5px; }
#cronos-root .hvc-ic { font-size: 14px; }
#cronos-root .hvc-track { position: relative; height: 44px; }
#cronos-root .hvc-axis { height: 38px; }
#cronos-root .hvc-head { background: var(--surface); border-radius: 14px 14px 0 0; position: sticky; top: 0; z-index: 2; }
/* eixo de dias */
#cronos-root .hvc-day { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
#cronos-root .hvc-day-n { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-2); font-weight: 600; }
#cronos-root .hvc-day-m { font-family: 'Geist Mono', monospace; font-size: 8px; color: var(--ink-3); text-transform: uppercase; }
#cronos-root .hvc-day.hoje .hvc-day-n { color: var(--accent); }
/* linha do "hoje" atravessando as faixas */
#cronos-root .hvc-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: .5; transform: translateX(-50%); z-index: 1; pointer-events: none; }
#cronos-root .hvc-now span { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-family: 'Geist Mono', monospace; font-size: 8px; color: #fff; background: var(--accent); padding: 1px 5px; border-radius: 100px; white-space: nowrap; }
/* barra da viagem (saída→entrega) */
/* Wrapper que posiciona a viagem no tempo (left/width). */
#cronos-root .hvc-barwrap { position: absolute; top: 50%; transform: translateY(-50%); height: 26px; }
/* Barra da viagem: trilho saída→entrega, LIMPO. overflow hidden = clipa o fill. */
#cronos-root .hvc-bar { position: absolute; inset: 0; border-radius: 100px; display: flex; align-items: center; padding: 0 12px; background: var(--surface); border: 1px solid var(--accent); color: var(--ink); cursor: pointer; transition: filter .15s; overflow: hidden; }
#cronos-root .hvc-bar:hover { filter: brightness(.97); }
#cronos-root .hvc-bar.hv-sos { border-color: #B3261E; }
#cronos-root .hvc-bar.hv-atraso { border-style: dashed; border-color: #B3261E; }
#cronos-root .hvc-bar.hv-done { border-color: var(--green); }
#cronos-root .hvc-bar.hvc-bar-aberta { border-style: dashed; } /* só saída, sem entrega prevista */
#cronos-root .hvc-bar-lbl { position: relative; z-index: 3; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* PREENCHIMENTO verde = entregue (até a parada atual), clipado pela barra. */
#cronos-root .hvc-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(127,167,122,.38); z-index: 1; transition: width .5s cubic-bezier(.4,0,.2,1); }
#cronos-root .hvc-bar.hv-done .hvc-fill { background: var(--green-soft, #E5F0E0); }

/* 🚚 na divisa do preenchimento (onde a carreta está). Espelhado p/ a direita. */
#cronos-root .hvc-truck { position: absolute; top: 50%; transform: translate(-50%, -50%) scaleX(-1); font-size: 15px; z-index: 2; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); transition: left .5s cubic-bezier(.4,0,.2,1); }

/* Pílula de "aguardando datas" (viagem travada, sem janela de entrega). */
#cronos-root .hvc-pill { position: absolute; top: 50%; left: 0; transform: translateY(-50%); white-space: nowrap; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-3); background: var(--surface); border: 1px dashed var(--ink-3); border-radius: 100px; padding: 4px 11px; cursor: pointer; }
#cronos-root .hvc-pill:hover { color: var(--ink); border-color: var(--accent); }

/* ✓ de concluída no cabeçalho da linha. */
#cronos-root .hvc-done-chk { color: var(--green); font-weight: 700; }

/* Legenda enxuta (preenchido vs vazio). */
#cronos-root .hvc-lg-fill, #cronos-root .hvc-lg-empty { display: inline-block; width: 18px; height: 9px; border-radius: 100px; vertical-align: middle; margin: 0 2px 0 6px; box-sizing: border-box; }
#cronos-root .hvc-lg-fill { background: rgba(127,167,122,.38); border: 1px solid var(--green); }
#cronos-root .hvc-lg-empty { background: var(--surface); border: 1px solid var(--line); }

/* ── TOOLTIP RICO do calendário (cartão flutuante com a lista de CDs) ──
   pointer-events fica "none" enquanto escondido (não atrapalha cliques por
   baixo), e vira "auto" só quando .show — dá pra mover o mouse PARA DENTRO
   do cartão e rolar a lista manualmente (ver calTipShow/calTipScheduleHide
   em cronos-app.js: sair da barra agenda o fechamento com um respiro; entrar
   no cartão cancela). */
#cronos-root .hvc-tip { position: fixed; z-index: 9600; max-width: 280px; background: var(--elevated); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(40,30,20,.22); padding: 12px 14px; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .14s ease, transform .14s ease; }
#cronos-root .hvc-tip.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#cronos-root .hvc-tip .ct-head { font-weight: 600; font-size: 13px; color: var(--ink); }
#cronos-root .hvc-tip .ct-sub { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
#cronos-root .hvc-tip .ct-sub b { color: var(--accent-deep, var(--accent)); }
#cronos-root .hvc-tip .ct-list { margin-top: 9px; display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; scroll-behavior: smooth; }
#cronos-root .hvc-tip .ct-list::-webkit-scrollbar { width: 6px; }
#cronos-root .hvc-tip .ct-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 100px; }
#cronos-root .hvc-tip .ct-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-1, var(--ink-2)); padding: 3px 6px; border-radius: 7px; }
#cronos-root .hvc-tip .ct-row em { color: var(--ink-3); font-style: normal; font-size: 10.5px; }
/* realça a parada ATUAL (alvo do auto-scroll) — fica óbvio onde a carreta está. */
#cronos-root .hvc-tip .ct-row-now { background: var(--accent-soft, #FBE9DE); font-weight: 600; }
#cronos-root .hvc-tip .ct-ic { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box; }
#cronos-root .hvc-tip .ct-ic.ok { background: var(--green); }
#cronos-root .hvc-tip .ct-ic.now { background: var(--accent); box-shadow: 0 0 0 3px rgba(184,74,26,.18); }
#cronos-root .hvc-tip .ct-ic.wait { background: var(--surface); border: 1.5px solid var(--line); }

/* ── CX-HELP: tooltip inline "bonito" para botões (substitui o title nativo) ──
   Motor único por delegação (ver wireHelpTooltips): converte qualquer [title]
   em [data-help] na hora do 1º hover/foco e mostra este cartão flutuante, com
   seta apontando pro botão. Conteúdo simples = 1 parágrafo; conteúdo "rico"
   (dos botões-chave: capa, avisar CDs, concluir, excluir…) tem duas seções
   — "O que faz" e "Quando usar" — para tirar a dúvida sem precisar clicar. */
#cronos-root .cx-help {
  position: fixed; z-index: 9650; max-width: 280px; background: var(--elevated);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(40,30,20,.22);
  padding: 11px 13px; opacity: 0; transform: translateY(4px) scale(.98); pointer-events: none;
  transition: opacity .13s ease, transform .13s ease; font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
}
#cronos-root .cx-help.show { opacity: 1; transform: translateY(0) scale(1); }
#cronos-root .cx-help::before {
  content: ''; position: absolute; width: 9px; height: 9px; background: var(--elevated);
  border: 1px solid var(--line); border-right: none; border-bottom: none; transform: rotate(45deg);
  left: var(--cx-arrow-x, 50%); margin-left: -5px; bottom: -5px; border-radius: 0 0 0 2px;
}
#cronos-root .cx-help.below::before { top: -5px; bottom: auto; transform: rotate(225deg); }
#cronos-root .cx-help .cx-h-what { color: var(--ink); }
#cronos-root .cx-help .cx-h-what b, #cronos-root .cx-help .cx-h-when b {
  display: inline-flex; align-items: center; gap: 4px; color: var(--accent-deep, var(--accent));
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}
#cronos-root .cx-help .cx-h-what > span, #cronos-root .cx-help .cx-h-when > span { display: block; }
#cronos-root .cx-help .cx-h-when { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); color: var(--ink-3); }
#cronos-root .cx-help .cx-h-when b { color: var(--ink-3); }
#cronos-root .hv-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
#cronos-root .hv-fbtn { padding: 6px 13px; border-radius: 100px; border: 1px solid var(--line); background: var(--elevated); color: var(--ink-2); font-size: 12.5px; cursor: pointer; transition: all .15s; }
#cronos-root .hv-fbtn:hover { border-color: var(--accent); }
#cronos-root .hv-fbtn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#cronos-root .hv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
#cronos-root .hv-empty { color: var(--ink-3); font-size: 13.5px; padding: 24px; text-align: center; }
#cronos-root .hv-card {
  text-align: left; background: var(--elevated); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 18px; cursor: pointer; transition: transform .25s cubic-bezier(.22,.9,.3,1), box-shadow .25s, border-color .25s;
  box-shadow: 0 4px 14px rgba(80,60,40,.04);
}
#cronos-root .hv-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(80,60,40,.1); border-color: var(--accent-line, #F0D8C4); }
#cronos-root .hv-card.hv-sos { border-color: #F0C9C4; background: #FDF4F2; }
#cronos-root .hv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#cronos-root .hv-ic { font-size: 20px; }
#cronos-root .hv-num { font-weight: 600; font-size: 15px; }
#cronos-root .hv-placa { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-3); background: var(--surface); padding: 2px 7px; border-radius: 6px; }
#cronos-root .hv-go { margin-left: auto; color: var(--accent); font-size: 18px; }
#cronos-root .hv-badge.sos { font-family: 'Geist Mono', monospace; font-size: 10px; color: #B3261E; background: #FCE9E6; padding: 2px 7px; border-radius: 100px; }
#cronos-root .hv-rota { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
#cronos-root .hv-rota b { color: var(--ink); }
#cronos-root .hv-minis { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#cronos-root .hv-mini { font-family: 'Geist Mono', monospace; font-size: 11px; padding: 2px 8px; border-radius: 100px; background: var(--surface); border: 1px solid var(--line); }
#cronos-root .hv-mini.ok { background: var(--green-soft); color: var(--green); border-color: transparent; }
#cronos-root .hv-mini.wait { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
#cronos-root .hv-mini.prop { background: var(--warn-soft); color: var(--accent-deep); border-color: transparent; }
#cronos-root .hv-mini.block { background: #FCE9E6; color: #B3261E; border-color: transparent; }
#cronos-root .hv-progwrap { cursor: help; } /* sinaliza tooltip dos CDs no hover */
#cronos-root .hv-prog { height: 5px; background: var(--surface); border-radius: 100px; overflow: hidden; margin-top: 4px; }
#cronos-root .hv-prog-fill { height: 100%; background: var(--accent); border-radius: 100px; transition: width .4s; }
#cronos-root .hv-prog-txt { font-size: 11px; color: var(--ink-3); margin-top: 4px; display: inline-block; }
#cronos-root .hv-datas { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-3); margin-bottom: 8px; }
#cronos-root .hv-sort { margin-left: auto; font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
#cronos-root .hv-sort select { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; background: var(--elevated); color: var(--ink-1); font-size: 12px; cursor: pointer; }
#cronos-root .hv-acoes { margin-top: 10px; display: flex; gap: 6px; }
#cronos-root .hv-act { font-size: 11.5px; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
#cronos-root .hv-act:hover { border-color: var(--accent); color: var(--accent-deep); }
#cronos-root .hv-act-danger:hover { border-color: #B3261E; color: #B3261E; background: #FCE9E6; }
/* viagem concluída: card mais sóbrio. */
#cronos-root .hv-card.hv-done { opacity: .82; background: var(--surface); }
#cronos-root .hv-card.hv-done:hover { opacity: 1; }
/* seção finalizadas (toggle). */
#cronos-root .hv-fin { margin-top: 22px; }
#cronos-root .hv-fin-toggle { font-family: 'Geist Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); background: none; border: none; cursor: pointer; padding: 6px 0; }
#cronos-root .hv-fin-toggle:hover { color: var(--ink-1); }
#cronos-root .hv-grid-fin { margin-top: 12px; }

/* resumo no topo (KPIs) */
#cronos-root .hv-resumo { display: flex; gap: 12px; flex-wrap: wrap; }
#cronos-root .hv-kpi { font-size: 12.5px; color: var(--ink-2); }
#cronos-root .hv-kpi b { font-size: 15px; color: var(--ink); margin-right: 2px; }
#cronos-root .hv-kpi.sos b { color: #B3261E; }
#cronos-root .hv-kpi.atraso b { color: #B3261E; }
/* busca */
#cronos-root .hv-busca { position: relative; margin-bottom: 14px; max-width: 420px; }
#cronos-root .hv-busca-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; fill: none; stroke: var(--ink-3); pointer-events: none; }
#cronos-root .hv-busca input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--elevated); color: var(--ink); font-size: 13px; }
#cronos-root .hv-busca input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* atrasada */
#cronos-root .hv-card.hv-atraso { border-color: #F0C9C4; }
#cronos-root .hv-badge.atraso { font-family: 'Geist Mono', monospace; font-size: 10px; color: #B3261E; background: #FCE9E6; padding: 2px 7px; border-radius: 100px; }
/* frota no card (motorista + caminhão + whatsapp) */
#cronos-root .hv-frota { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 12.5px; color: var(--ink-2); }
#cronos-root .hv-frota .hv-moto { font-weight: 500; }
#cronos-root .hv-frota .hv-veic { color: var(--ink-3); font-family: 'Geist Mono', monospace; font-size: 11.5px; }
#cronos-root .hv-frota-vazia { color: var(--accent-deep); font-size: 12px; }
/* F2 — troca de frota por trecho (no card/linha do hub). */
#cronos-root .hv-trechos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -4px 0 9px; }
#cronos-root .hv-trecho { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.08); color: var(--ink-2); white-space: nowrap; }
#cronos-root .hv-trecho.atual { background: rgba(127,216,155,.18); border-color: rgba(60,160,90,.35); color: var(--ink-1, #2a2a2a); font-weight: 600; }
#cronos-root .hv-trecho em { font-style: normal; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-3); }
#cronos-root .hv-wa { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #25D366; color: #fff; text-decoration: none; font-size: 13px; flex-shrink: 0; }
#cronos-root .hv-wa:hover { filter: brightness(1.08); }
#cronos-root .hv-trocar { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); cursor: pointer; font-size: 12px; flex-shrink: 0; }
#cronos-root .hv-trocar:hover { border-color: var(--accent); color: var(--accent-deep); }
/* caminhãozinho 🚚 na barra (espelhado, anda com o progresso) */
#cronos-root .hv-prog { position: relative; overflow: visible; }
#cronos-root .hv-truck { position: absolute; top: 50%; transform: translate(-50%, -50%) scaleX(-1); font-size: 15px; transition: left .5s cubic-bezier(.4,0,.2,1); pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); z-index: 4; }
/* Pontos das UEs (paradas) na linha de progresso — lista, grade e calendário. */
#cronos-root .hv-dot { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--line); border: 1.5px solid var(--elevated); transform: translate(-50%, -50%); z-index: 2; pointer-events: none; box-sizing: border-box; }
#cronos-root .hv-dot.done { background: var(--accent); }
#cronos-root .hv-dot.cur { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); z-index: 3; }
/* No calendário os pontos ficam sobre a barra (barwrap) — menores e discretos. */
#cronos-root .hvc-barwrap .hv-dot { width: 6px; height: 6px; border-width: 1px; z-index: 4; }
#cronos-root .hv-fin-head { display: flex; align-items: center; gap: 12px; }

#cronos-root .hub-card {
  position: relative;
  padding: 32px 30px 28px;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: left;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

#cronos-root .hub-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-line);
}

#cronos-root .hub-card .pill {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 24px;
}
#cronos-root .hub-card .pill .dot {
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  animation: blip 2s infinite;
}

@keyframes blip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

#cronos-root .hub-card h2 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
#cronos-root .hub-card h2 em { font-style: italic; color: var(--accent); }

#cronos-root .hub-card .desc {
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.55;
  flex: 1;
  margin-bottom: 24px;
}

#cronos-root .hub-card .cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}
#cronos-root .hub-card .cta svg {
  width: 16px; height: 16px;
  transition: transform 0.3s;
}
#cronos-root .hub-card:hover .cta svg { transform: translateX(4px); }

#cronos-root .hub-card .accent-art {
  position: absolute;
  right: -20px; bottom: -20px;
  width: 180px; height: 180px;
  pointer-events: none;
  opacity: 0.06;
  color: var(--accent);
}

#cronos-root .hub-card.live {
  background: linear-gradient(180deg, var(--accent-soft), var(--elevated) 70%);
  border-color: var(--accent-line);
}
#cronos-root .hub-card.live .pill { background: white; }

#cronos-root .hub-card .live-summary {
  margin-top: 4px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--elevated);
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
#cronos-root .hub-card .live-summary strong { color: var(--ink); font-weight: 600; }

#cronos-root .hub-secondary {
  display: flex; gap: 12px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}

#cronos-root .hub-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  transition: all 0.18s;
  background: var(--surface);
}
#cronos-root .hub-link:hover { color: var(--ink); border-color: var(--ink-4); background: var(--elevated); }
#cronos-root .hub-link svg { width: 14px; height: 14px; color: var(--ink-3); }

/* ======================== WIZARD ======================== */

#cronos-root .wizard-shell {
  min-height: 100vh;
  display: flex; flex-direction: column;
}

#cronos-root .wizard-top {
  padding: 20px 36px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(252, 250, 244, 0.85);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}

#cronos-root .wizard-back {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-3);
}
#cronos-root .wizard-back:hover { background: var(--surface); color: var(--ink); }

#cronos-root .wizard-stepper {
  display: flex; align-items: center; gap: 0;
}
#cronos-root .wizard-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
}
#cronos-root .wizard-step .num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-3);
  display: grid; place-items: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
}
#cronos-root .wizard-step.done .num { background: var(--green); color: white; border-color: var(--green); }
#cronos-root .wizard-step.active .num { background: var(--accent); color: white; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
#cronos-root .wizard-step.active .label { color: var(--ink); font-weight: 500; }
#cronos-root .wizard-step .label { display: none; }
@media (min-width: 720px) { #cronos-root .wizard-step .label { display: inline; } }
#cronos-root .wizard-step-line {
  width: 32px; height: 1px;
  background: var(--line);
  margin: 0 4px;
}
#cronos-root .wizard-step-line.done { background: var(--green); }

#cronos-root .wizard-trip-info {
  justify-self: end;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#cronos-root .wizard-trip-info strong { color: var(--ink); font-weight: 600; }

#cronos-root .wizard-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 32px 120px;
}

#cronos-root .wizard-content {
  width: 100%;
  max-width: 720px;
  animation: drift 0.5s ease;
}

#cronos-root .wizard-content.wide { max-width: 1040px; }

#cronos-root .wizard-content .step-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

#cronos-root .wizard-content h2 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
#cronos-root .wizard-content h2 em { font-style: italic; color: var(--accent); }

#cronos-root .wizard-content .lead {
  font-size: 16px;
  color: var(--ink-3);
  margin-bottom: 40px;
  max-width: 540px;
  line-height: 1.55;
}

#cronos-root .wizard-foot {
  position: fixed;
  inset: auto 0 0 0;
  padding: 16px 36px;
  background: rgba(252, 250, 244, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  z-index: 30;
}

#cronos-root .wizard-foot .help {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-3);
  font-size: 13px;
}
#cronos-root .wizard-foot .help svg { width: 14px; height: 14px; }

#cronos-root .wizard-foot .actions { display: flex; gap: 10px; }

/* ======================== BUTTONS ======================== */

#cronos-root .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--elevated);
  color: var(--ink-2);
  transition: all 0.18s;
}
#cronos-root .btn:hover { background: var(--paper); color: var(--ink); border-color: var(--ink-4); }
#cronos-root .btn svg { width: 16px; height: 16px; }

#cronos-root .btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 12px rgba(184, 74, 26, 0.18);
}
#cronos-root .btn-primary:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 6px 16px rgba(184, 74, 26, 0.28);
}
#cronos-root .btn-primary:disabled {
  background: var(--paper-2);
  color: var(--ink-4);
  border-color: var(--line);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#cronos-root .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
#cronos-root .btn-ghost:hover { color: var(--ink); }

#cronos-root .btn-big { padding: 14px 24px; font-size: 15px; }

/* ======================== STEP 1: SOURCE PICKER ======================== */

#cronos-root .source-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 700px) { #cronos-root .source-options { grid-template-columns: 1fr; } }

#cronos-root .source-card {
  padding: 28px 24px;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  position: relative;
  display: flex;
  flex-direction: column;
}

#cronos-root .source-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

#cronos-root .source-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(184, 74, 26, 0.08);
}

#cronos-root .source-card .icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--paper-2);
  display: grid; place-items: center;
  color: var(--accent);
  margin-bottom: 18px;
}
#cronos-root .source-card.selected .icon { background: var(--elevated); }
#cronos-root .source-card .icon svg { width: 20px; height: 20px; }

#cronos-root .source-card .title {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
#cronos-root .source-card .title em { font-style: italic; color: var(--accent); }

#cronos-root .source-card .desc {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 14px;
}

#cronos-root .source-card .footnote {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#cronos-root .source-card .radio {
  position: absolute;
  top: 22px; right: 22px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  transition: all 0.2s;
}
#cronos-root .source-card.selected .radio {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px white;
}

/* ======================== STEP 2: UPLOAD AREA ======================== */

#cronos-root .upload-zone {
  margin-top: 28px;
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  padding: 56px 32px;
  text-align: center;
  background: var(--surface);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

#cronos-root .upload-zone:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

#cronos-root .upload-zone .doc-icon {
  display: inline-flex;
  width: 60px; height: 76px;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  background: white;
  align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: 22px;
  position: relative;
  box-shadow: var(--shadow);
}
#cronos-root .upload-zone .doc-icon::before {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 16px; height: 16px;
  background: var(--accent);
  border-radius: 50%;
  display: grid; place-items: center;
}
#cronos-root .upload-zone .doc-icon::after {
  content: '+';
  position: absolute;
  top: -3px; right: -3px;
  width: 16px; height: 16px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  display: grid; place-items: center;
  line-height: 1;
}
#cronos-root .upload-zone .doc-icon svg { width: 28px; height: 28px; }

#cronos-root .upload-zone h3 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
#cronos-root .upload-zone h3 em { font-style: italic; color: var(--accent); }

#cronos-root .upload-zone p { color: var(--ink-3); font-size: 13px; }
#cronos-root .upload-zone .accepted {
  margin-top: 22px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ======================== STEP 2 (alt): PROCESSING ======================== */

#cronos-root .processing-card {
  padding: 36px 32px;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

#cronos-root .processing-head {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}

#cronos-root .processing-file-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--accent-soft);
  display: grid; place-items: center;
  color: var(--accent);
}
#cronos-root .processing-file-icon svg { width: 22px; height: 22px; }

#cronos-root .processing-head .info { flex: 1; }
#cronos-root .processing-head .filename { font-weight: 500; font-size: 14px; }
#cronos-root .processing-head .meta {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

#cronos-root .processing-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
#cronos-root .processing-status.done {
  background: var(--green-soft);
  color: var(--green);
}
#cronos-root .processing-status .spinner {
  width: 10px; height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Spinner genérico (botões em estado "busy") — usa currentColor, então fica
   legível tanto em botões claros quanto nos botões escuros do app do motorista. */
#cronos-root .spinner {
  display: inline-block; vertical-align: middle;
  width: 11px; height: 11px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

#cronos-root .processing-status .check svg { width: 12px; height: 12px; }

#cronos-root .check-list { display: flex; flex-direction: column; }

#cronos-root .check-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
#cronos-root .check-item:last-child { border-bottom: none; }

#cronos-root .check-item .ind {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--paper-2);
  display: grid; place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--line);
  transition: all 0.4s;
}

#cronos-root .check-item.pending .ind {
  background: var(--paper-2);
  color: var(--ink-4);
}

#cronos-root .check-item.running .ind {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
#cronos-root .check-item.running .ind .spinner {
  width: 9px; height: 9px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

#cronos-root .check-item.done .ind {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
#cronos-root .check-item.done .ind svg { width: 12px; height: 12px; }

#cronos-root .check-item .label {
  font-size: 14px;
  color: var(--ink-2);
  flex: 1;
}
#cronos-root .check-item.done .label { color: var(--ink); }

#cronos-root .check-item .value {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity 0.4s;
}
#cronos-root .check-item.done .value { opacity: 1; color: var(--ink); font-weight: 500; }

/* ======================== STEP 3: CONSOLIDATION ======================== */

#cronos-root .consolidation-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

#cronos-root .csum-stat {
  padding: 16px 18px;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 12px;
}
#cronos-root .csum-stat .label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
#cronos-root .csum-stat .value {
  font-family: 'Instrument Serif', serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}
#cronos-root .csum-stat .value em { font-style: italic; color: var(--accent); }
#cronos-root .csum-stat .delta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--green);
  margin-top: 6px;
}

#cronos-root .rules-box {
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 24px;
}

#cronos-root .rules-box-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
#cronos-root .rules-box-head h4 {
  font-family: 'Instrument Serif', serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
#cronos-root .rules-box-sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 18px;
}

#cronos-root .rule-toggles { display: flex; gap: 10px; flex-wrap: wrap; }

#cronos-root .rule-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--elevated);
  font-size: 13px;
  color: var(--ink-2);
  transition: all 0.2s;
}
#cronos-root .rule-toggle.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}
#cronos-root .rule-toggle .switch {
  width: 26px; height: 14px;
  border-radius: 100px;
  background: var(--paper-2);
  position: relative;
  transition: background 0.2s;
}
#cronos-root .rule-toggle .switch::after {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: white;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
#cronos-root .rule-toggle.on .switch { background: var(--accent); }
#cronos-root .rule-toggle.on .switch::after { transform: translateX(12px); }

#cronos-root .ai-callout {
  display: flex; gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #FFF8F0, var(--elevated));
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  margin: 22px 0;
}

#cronos-root .ai-callout .ai-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: grid; place-items: center;
  color: white;
  flex-shrink: 0;
}
#cronos-root .ai-callout .ai-mark svg { width: 16px; height: 16px; }

#cronos-root .ai-callout .ai-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 4px;
}

#cronos-root .ai-callout .ai-body { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
#cronos-root .ai-callout .ai-body strong { color: var(--ink); font-weight: 600; }

#cronos-root .ai-callout .ai-acts { display: flex; gap: 8px; margin-top: 12px; }

#cronos-root .btn-mini {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--elevated);
  color: var(--ink-2);
  transition: all 0.18s;
}
#cronos-root .btn-mini:hover { background: var(--paper); }
#cronos-root .btn-mini.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
#cronos-root .btn-mini.primary:hover { background: var(--accent-hi); }

#cronos-root .groups-section h3 {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
#cronos-root .groups-section .sec-sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 18px;
}

#cronos-root .groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

#cronos-root .group-card {
  padding: 14px 16px;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.18s;
  animation: drift 0.4s ease;
}

#cronos-root .group-card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-sm);
}

#cronos-root .group-card .gc-branch {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  color: white;
}

#cronos-root .group-card .gc-info { flex: 1; min-width: 0; }
#cronos-root .group-card .gc-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cronos-root .group-card .gc-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
#cronos-root .group-card .gc-count {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ======================== STEP 4: REVIEW & DISPATCH ======================== */

#cronos-root .review-card {
  padding: 32px;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

#cronos-root .review-card h3 {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 4px;
}

#cronos-root .review-card .rc-sub {
  color: var(--ink-3);
  font-size: 13px;
  margin-bottom: 24px;
}

#cronos-root .review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 26px;
}

#cronos-root .review-stat {
  padding: 16px 18px;
  background: var(--paper);
  border-radius: 10px;
}
#cronos-root .review-stat .label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
#cronos-root .review-stat .value {
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
  font-style: italic;
  color: var(--ink);
}

#cronos-root .email-preview {
  padding: 22px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-2);
}

#cronos-root .email-preview .email-from {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 4px;
}

#cronos-root .email-preview .email-subject {
  font-family: 'Instrument Serif', serif;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

#cronos-root .email-preview a.cta-link {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 14px;
  background: var(--accent);
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

/* ======================== STEP 5: SUCCESS ======================== */

#cronos-root .success-screen {
  text-align: center;
  padding: 40px 0;
}

#cronos-root .success-mark {
  display: inline-flex;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6FA76F, #4D7A4D);
  color: white;
  align-items: center; justify-content: center;
  margin-bottom: 32px;
  box-shadow: 0 20px 50px rgba(77, 122, 77, 0.25);
  position: relative;
}
#cronos-root .success-mark::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--green);
  opacity: 0.2;
  animation: success-ring 2.5s infinite;
}
#cronos-root .success-mark::after {
  content: '';
  position: absolute; inset: -16px;
  border-radius: 50%;
  border: 1px solid var(--green);
  opacity: 0.1;
  animation: success-ring 2.5s 0.5s infinite;
}
@keyframes success-ring {
  0% { transform: scale(1); opacity: 0.3; }
  100% { transform: scale(1.2); opacity: 0; }
}
#cronos-root .success-mark svg { width: 44px; height: 44px; }

#cronos-root .success-screen h2 {
  margin-bottom: 14px;
}

#cronos-root .success-screen .lead { margin: 0 auto 40px; }

#cronos-root .success-actions {
  display: flex; gap: 10px; justify-content: center;
}

/* ======================== ACOMPANHAMENTO (Operations) ======================== */

#cronos-root .ops-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 36px 80px;
}

#cronos-root .ops-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 36px;
  gap: 24px;
  flex-wrap: wrap;
}

#cronos-root .ops-head .crumb {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}

#cronos-root .ops-head h1 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
#cronos-root .ops-head h1 em { font-style: italic; color: var(--accent); }

#cronos-root .ops-head .sub {
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-3);
}

#cronos-root .ops-head-actions { display: flex; gap: 10px; }
/* Badge de "quantos aguardam resposta" no botão Disparar lembretes */
#cronos-root .ops-remind-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--accent, #d8612a); color: #fff; font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600; line-height: 1; }
/* Modal de confirmação de lembretes: cards para-quem / o-quê / como */
#cronos-root .remind-body { padding: 4px 22px 8px; display: flex; flex-direction: column; gap: 11px; }
#cronos-root .remind-card { padding: 12px 14px; background: var(--bg-2, rgba(0,0,0,.03)); border-radius: 11px; }
#cronos-root .remind-card-tit { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--accent, #d8612a); margin-bottom: 6px; }
#cronos-root .remind-line { font-size: 13.5px; color: var(--ink-1); line-height: 1.55; }
#cronos-root .remind-sub { margin: 7px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
#cronos-root .remind-note { margin-top: 7px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }

#cronos-root .ops-summary {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
}

@media (max-width: 900px) { #cronos-root .ops-summary { grid-template-columns: 1fr; } }

#cronos-root .trip-headline {
  padding: 28px 30px;
  background: linear-gradient(135deg, var(--accent-soft), var(--elevated) 70%);
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

#cronos-root .trip-headline .trip-num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}

#cronos-root .trip-headline h3 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
#cronos-root .trip-headline h3 em { font-style: italic; color: var(--accent); }

#cronos-root .trip-progress {
  height: 4px;
  background: rgba(184, 74, 26, 0.12);
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
#cronos-root .trip-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 64%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  border-radius: 100px;
}
#cronos-root .trip-progress-fill::after {
  content: '';
  position: absolute;
  right: -2px; top: -3px;
  width: 10px; height: 10px;
  background: var(--accent-hi);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(184,74,26,0.15);
}

#cronos-root .trip-meta {
  display: flex; gap: 24px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#cronos-root .trip-meta span strong { color: var(--ink); font-weight: 600; }

#cronos-root .mini-stat {
  padding: 22px 24px;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 16px;
}
#cronos-root .mini-stat .label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
#cronos-root .mini-stat .value {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1;
}
#cronos-root .mini-stat .value em { font-style: italic; color: var(--accent); }
#cronos-root .mini-stat .breakdown {
  margin-top: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#cronos-root .ops-tabs {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--paper-2);
  border-radius: 10px;
  width: fit-content;
  margin-bottom: 14px;
}

/* Toolbar de Operações: busca + ordenação (client-side). */
#cronos-root .ops-toolbar {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 10px; flex-wrap: wrap;
}
#cronos-root .ops-search {
  position: relative; flex: 1 1 320px; min-width: 220px;
  display: flex; align-items: center;
}
#cronos-root .ops-search-ic {
  position: absolute; left: 12px; width: 16px; height: 16px;
  fill: none; stroke: var(--ink-3); pointer-events: none;
}
#cronos-root .ops-search-input {
  width: 100%; padding: 10px 34px 10px 36px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--elevated); color: var(--ink);
  font-size: 13.5px; transition: border-color 0.18s, box-shadow 0.18s;
}
#cronos-root .ops-search-input::placeholder { color: var(--ink-3); }
#cronos-root .ops-search-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
#cronos-root .ops-search-clear {
  position: absolute; right: 8px; width: 22px; height: 22px;
  border-radius: 50%; border: none; background: var(--paper-2);
  color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer;
}
#cronos-root .ops-search-clear:hover { background: var(--line); color: var(--ink); }
#cronos-root .ops-sort { display: inline-flex; align-items: center; gap: 8px; }
#cronos-root .ops-sort-lbl {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
}
#cronos-root .ops-sort-sel {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--elevated); color: var(--ink); font-size: 13px; cursor: pointer;
}
#cronos-root .ops-sort-sel:focus { outline: none; border-color: var(--accent); }
#cronos-root .ops-result-meta {
  font-size: 12px; color: var(--ink-3); margin-bottom: 10px; display: none;
}
#cronos-root .ops-clear-filters {
  border: none; background: none; padding: 0; margin-left: 6px;
  color: var(--accent); font-size: 12px; text-decoration: underline; cursor: pointer;
}
#cronos-root .ops-clear-filters:hover { color: var(--accent-deep); }
/* Linhas de agendamentos já ENTREGUES (desfecho registrado) descem e ficam suaves. */
#cronos-root .conv-row.is-done { opacity: 0.66; }
#cronos-root .conv-row.is-done:hover { opacity: 1; }
@media (max-width: 640px) {
  #cronos-root .ops-toolbar { gap: 8px; }
  #cronos-root .ops-sort { width: 100%; }
  #cronos-root .ops-sort-sel { flex: 1; }
}
#cronos-root .ops-tab {
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--ink-3);
  transition: all 0.18s;
  display: inline-flex; align-items: center; gap: 8px;
}
#cronos-root .ops-tab:hover { color: var(--ink); }
#cronos-root .ops-tab.active {
  background: var(--elevated);
  color: var(--ink);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
#cronos-root .ops-tab .count {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  padding: 1px 7px;
  background: var(--paper);
  border-radius: 100px;
  color: var(--ink-3);
}
#cronos-root .ops-tab.active .count { background: var(--accent-soft); color: var(--accent); }

#cronos-root .conversations-list {
  display: flex; flex-direction: column;
  gap: 10px;
}

#cronos-root .conv-row {
  display: grid;
  grid-template-columns: 50px 1fr auto auto auto;
  gap: 18px;
  align-items: center;
  padding: 16px 22px;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s;
}

@media (max-width: 800px) {
  #cronos-root .conv-row { grid-template-columns: 50px 1fr auto; }
  #cronos-root .conv-row .conv-meta-cell { display: none; }
}

#cronos-root .conv-row:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

#cronos-root .conv-branch {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: white;
}

#cronos-root .conv-main .conv-name {
  font-size: 14px;
  font-weight: 500;
}
#cronos-root .conv-main .conv-line2 {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 3px;
}

#cronos-root .conv-meta-cell {
  text-align: center;
}
#cronos-root .conv-meta-cell .num {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
}
#cronos-root .conv-meta-cell .lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

#cronos-root .conv-date {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
}

#cronos-root .status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
#cronos-root .status-chip .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
}
#cronos-root .status-chip.confirmed { background: var(--green-soft); color: var(--green); }
#cronos-root .status-chip.confirmed .dot { background: var(--green); }
#cronos-root .status-chip.pending { background: var(--paper-2); color: var(--ink-3); }
#cronos-root .status-chip.pending .dot { background: var(--ink-3); }
#cronos-root .status-chip.sent { background: var(--blue-soft); color: var(--blue); }
#cronos-root .status-chip.sent .dot { background: var(--blue); animation: pulse-dot 2s infinite; }
#cronos-root .status-chip.proposed { background: var(--warn-soft); color: var(--warn); }
#cronos-root .status-chip.proposed .dot { background: var(--warn); animation: pulse-dot 2s infinite; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ======================== SIDE PANEL (conversation detail) ======================== */

#cronos-root .side-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 20, 0.3);
  backdrop-filter: blur(4px);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#cronos-root .side-panel-overlay.show { opacity: 1; pointer-events: auto; }

#cronos-root .side-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  z-index: 70;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column;
}
#cronos-root .side-panel.show { transform: translateX(0); }

#cronos-root .side-panel-head {
  padding: 22px 28px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  background: var(--elevated);
}

#cronos-root .side-panel-head .sp-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}

#cronos-root .side-panel-head .sp-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#cronos-root .side-panel-close {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-3);
  cursor: pointer;
  flex-shrink: 0;
}
#cronos-root .side-panel-close:hover { background: var(--paper-2); color: var(--ink); }

#cronos-root .side-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
}

#cronos-root .sp-section { margin-bottom: 28px; }
#cronos-root .sp-section-title {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

#cronos-root .sp-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#cronos-root .sp-info-cell {
  padding: 12px 14px;
  background: var(--elevated);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
#cronos-root .sp-info-cell .l {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
#cronos-root .sp-info-cell .v {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
}

#cronos-root .timeline {
  position: relative;
  padding-left: 22px;
}
#cronos-root .timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--line);
}

#cronos-root .timeline-item {
  position: relative;
  padding: 8px 0 16px;
}
#cronos-root .timeline-item::before {
  content: '';
  position: absolute;
  left: -19px; top: 12px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--elevated);
  border: 2px solid var(--line);
}
#cronos-root .timeline-item.done::before { background: var(--green); border-color: var(--green); }
#cronos-root .timeline-item.active::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#cronos-root .timeline-item .ti-when {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}

#cronos-root .timeline-item .ti-msg {
  background: var(--elevated);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

#cronos-root .timeline-item.outbound .ti-msg { background: var(--accent-soft); border-color: var(--accent-line); }
#cronos-root .timeline-item.inbound .ti-msg { background: var(--elevated); }

/* Pós-entrega na timeline do operador (desfecho + canhotos) */
#cronos-root .sp-desfecho { margin-top: 12px; padding: 9px 12px; border-radius: 9px; font-size: 13px; }
#cronos-root .sp-desfecho.ok { background: var(--green-soft); color: var(--green); }
#cronos-root .sp-desfecho.warn { background: #FCE9E6; color: #B3261E; }
#cronos-root .sp-anexos { margin-top: 10px; }
#cronos-root .sp-anexos-lbl { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 6px; }
#cronos-root .sp-anexo { display: inline-block; margin: 0 6px 6px 0; padding: 6px 11px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--accent-deep); text-decoration: none; }
#cronos-root .sp-anexo:hover { background: var(--accent-soft); }

/* E3 — bloco de recebimento no side-panel (estado de cada recebedor). */
#cronos-root .sp-receb { margin-top: 12px; padding: 10px 12px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); }
#cronos-root .sp-receb-lbl { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 7px; }
#cronos-root .sp-receb-line { font-size: 13px; padding: 3px 0; color: var(--ink-2); }
#cronos-root .sp-receb-line.ok { color: var(--green); }
#cronos-root .sp-receb-line.warn { color: #B3261E; }
#cronos-root .sp-receb-line.wait { color: var(--ink-3); }
#cronos-root .sp-receb-ic { display: inline-block; width: 1.2em; text-align: center; }

#cronos-root .sp-footer {
  padding: 20px 28px;
  border-top: 1px solid var(--line-soft);
  background: var(--elevated);
  display: flex; gap: 10px;
}

/* ======================== CADASTROS ======================== */

#cronos-root .cadastros-shell {
  max-width: 1300px;
  margin: 0 auto;
  padding: 56px 36px 80px;
}

#cronos-root .cadastros-head {
  margin-bottom: 36px;
}
#cronos-root .cadastros-head .crumb {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
#cronos-root .cadastros-head h1 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
#cronos-root .cadastros-head h1 em { font-style: italic; color: var(--accent); }
#cronos-root .cadastros-head .sub {
  font-size: 15px;
  color: var(--ink-3);
  margin-top: 8px;
  max-width: 580px;
}

/* Grupos-mãe dos cadastros (nível 1) */
#cronos-root .cad-groups { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
#cronos-root .cad-group {
  padding: 9px 18px; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--ink-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: all .15s;
}
#cronos-root .cad-group:hover { background: var(--paper-2); color: var(--ink); }
#cronos-root .cad-group.active { background: var(--elevated); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
#cronos-root .cad-group.has-alert { color: var(--accent-deep); }
#cronos-root .cad-group.has-alert.active { color: var(--accent-deep); }

#cronos-root .cadastros-tabs {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--paper-2);
  border-radius: 10px;
  width: fit-content;
  margin-bottom: 24px;
}
#cronos-root .cadastros-tabs:empty { display: none; }
#cronos-root .cad-tab {
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--ink-3);
}
#cronos-root .cad-tab.active {
  background: var(--elevated);
  color: var(--ink);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}

#cronos-root .cad-pane { display: none; }
#cronos-root .cad-pane.active { display: block; animation: drift 0.3s; }

/* Abas da tela Comunicações (espelham as cadastros-tabs) */
#cronos-root .comms-tabs { display: flex; gap: 4px; padding: 4px; background: var(--paper-2); border-radius: 10px; width: fit-content; margin: 8px 0 24px; flex-wrap: wrap; }
#cronos-root .comms-tab { padding: 8px 14px; border-radius: 7px; font-size: 13px; color: var(--ink-3); }
#cronos-root .comms-tab.active { background: var(--elevated); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-sm); }
#cronos-root .comms-pane { display: none; }
#cronos-root .comms-pane.active { display: block; animation: drift 0.3s; }

/* Tela "cidades sem CD" na aba Destinatários: fila de trabalho p/ destravar. */
#cronos-root .dest-semcd { background: #FCF3E8; border: 1px solid var(--accent-line, #F0D8C4); border-radius: 12px; padding: 14px 16px; }
#cronos-root .dest-semcd-tit { font-weight: 600; color: var(--accent-deep); font-size: 14px; margin-bottom: 4px; }
#cronos-root .dest-semcd-sub { font-size: 12.5px; color: var(--ink-2); margin-bottom: 12px; line-height: 1.5; }
#cronos-root .dest-semcd-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--accent-line, #F0D8C4); font-size: 13px; }
#cronos-root .dest-semcd-row span { color: var(--ink-1); }
/* Tabs por CANAL na lista de destinatários (E-mail/Portal/WhatsApp/Telefone) — filtro de exibição. */
#cronos-root .dest-canal-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
#cronos-root .dest-canal-tab { font-size: 12.5px; padding: 6px 12px; border-radius: 100px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
#cronos-root .dest-canal-tab:hover { border-color: var(--accent); color: var(--ink-1); }
#cronos-root .dest-canal-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#cronos-root .dest-canal-n { font-family: 'Geist Mono', monospace; font-size: 10.5px; padding: 1px 6px; border-radius: 100px; background: rgba(0, 0, 0, 0.08); }
#cronos-root .dest-canal-tab.active .dest-canal-n { background: rgba(255, 255, 255, 0.25); }
/* Botão "💬 chamar no WhatsApp" nas grades de CD/destinatário. */
#cronos-root a.wa-chamar { text-decoration: none; border-color: #25D366; color: #128C3E; white-space: nowrap; }
#cronos-root a.wa-chamar:hover { background: #25D366; color: #fff; border-color: #25D366; }

#cronos-root .cad-table {
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

#cronos-root table { width: 100%; border-collapse: collapse; }

#cronos-root .cad-table th {
  text-align: left;
  padding: 14px 22px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  background: var(--paper);
}

#cronos-root .cad-table td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
  vertical-align: middle;
}
#cronos-root .cad-table tr:last-child td { border-bottom: none; }
#cronos-root .cad-table tr:hover td { background: var(--paper); }

#cronos-root .cad-table td .strong { font-weight: 500; }

#cronos-root .cad-stub {
  padding: 56px 28px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.6;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 14px;
}
#cronos-root .cad-stub .stub-tag {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

#cronos-root .redes-grid { display: flex; flex-direction: column; gap: 10px; }

#cronos-root .rede-card {
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s;
}
#cronos-root .rede-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
#cronos-root .rede-card.open { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }

#cronos-root .rc-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; }

#cronos-root .rc-sigla {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  font-size: 13px;
}
#cronos-root .rc-main { flex: 1; min-width: 0; }
#cronos-root .rc-nome { font-size: 15px; font-weight: 500; }
#cronos-root .rc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
#cronos-root .rc-pill {
  font-family: 'Geist Mono', monospace;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 3px 8px; border-radius: 100px;
}
#cronos-root .rc-pill.portal { background: var(--blue-soft); color: var(--blue); }
#cronos-root .rc-pill.email { background: var(--green-soft); color: var(--green); }
#cronos-root .rc-pill.voucher { background: var(--accent-soft); color: var(--accent); }
#cronos-root .rc-fact {
  font-family: 'Geist Mono', monospace;
  font-size: 10px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
#cronos-root .rc-cds {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 22px; color: var(--accent); flex-shrink: 0; text-align: right; line-height: 1;
}
#cronos-root .rc-cds small {
  display: block;
  font-family: 'Geist Mono', monospace; font-size: 9px; font-style: normal;
  color: var(--ink-4); letter-spacing: 0.1em; margin-top: 2px;
}
#cronos-root .rc-chevron { width: 18px; height: 18px; color: var(--ink-4); flex-shrink: 0; transition: transform 0.3s; }
#cronos-root .rede-card.open .rc-chevron { transform: rotate(180deg); }

#cronos-root .rc-detail { display: none; padding: 0 18px 18px; }
#cronos-root .rede-card.open .rc-detail { display: block; animation: drift 0.3s; }

#cronos-root .rd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
#cronos-root .rd-cell { padding: 10px 12px; background: var(--paper); border-radius: 9px; }
#cronos-root .rd-cell .l {
  font-family: 'Geist Mono', monospace;
  font-size: 9px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px;
}
#cronos-root .rd-cell .v { font-size: 13px; font-weight: 500; color: var(--ink); word-break: break-word; }
#cronos-root .rd-obs {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--accent-soft);
  border-radius: 9px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}
#cronos-root .rd-obs strong { color: var(--accent); }

#cronos-root .dayX {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--accent);
}

#cronos-root .flag-set { display: inline-flex; gap: 5px; flex-wrap: wrap; }
#cronos-root .flag {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--paper-2);
  color: var(--ink-3);
  border: 1px solid var(--line);
}
#cronos-root .flag.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

#cronos-root .proceda-pill {
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  font-size: 14px;
  padding: 4px 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 6px;
  color: var(--accent);
  display: inline-block;
}

#cronos-root .mini-mono {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
}

/* ======================== TOAST ======================== */

#cronos-root .toast-stack {
  position: fixed; bottom: 28px; right: 28px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 9500; /* acima do banner (8000) e do modal PWA (9200) — toast nunca fica tapado */
  pointer-events: none;
}

#cronos-root .toast {
  background: var(--elevated);
  border: 1px solid var(--line);
  padding: 14px 18px;
  border-radius: 12px;
  display: flex; gap: 12px; align-items: flex-start;
  max-width: 360px;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.4s ease;
  pointer-events: auto;
}

@keyframes toast-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

#cronos-root .toast.exit { animation: toast-out 0.3s forwards; }
@keyframes toast-out { to { transform: translateX(40px); opacity: 0; } }

#cronos-root .toast-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: white;
}
#cronos-root .toast.success .toast-icon { background: var(--green); }
#cronos-root .toast.info .toast-icon { background: var(--accent); }
#cronos-root .toast.warn .toast-icon { background: var(--warn); }

#cronos-root .toast-content { flex: 1; }
#cronos-root .toast-title { font-weight: 600; font-size: 13px; }
#cronos-root .toast-msg { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ======================== SCROLLBAR ======================== */

#cronos-root ::-webkit-scrollbar { width: 8px; height: 8px; }
#cronos-root ::-webkit-scrollbar-track { background: transparent; }
#cronos-root ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 100px; }
/* ======================== SIDE PANEL — VEHICLE BLOCK ======================== */

#cronos-root .sp-vehicle {
  margin-bottom: 28px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--accent-soft), var(--elevated) 80%);
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

#cronos-root .sp-vehicle-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
#cronos-root .sp-vehicle-icon {
  width: 46px; height: 46px;
  background: white;
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 24px;
  flex-shrink: 0;
}
#cronos-root .sp-vehicle-info { flex: 1; min-width: 0; }
#cronos-root .sp-vehicle-plate {
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.04em;
}
#cronos-root .sp-vehicle-driver {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 3px;
}
#cronos-root .sp-vehicle-driver strong { font-weight: 500; }
#cronos-root .sp-vehicle-trip {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-top: 2px;
}
#cronos-root .sp-vehicle-call {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  display: grid; place-items: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.18s;
  flex-shrink: 0;
}
#cronos-root .sp-vehicle-call:hover { background: #5C8C5C; transform: scale(1.05); }

#cronos-root .sp-mini-map-wrap {
  background: white;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px;
  margin-top: 14px;
}

#cronos-root .sp-mini-map-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
#cronos-root .sp-mini-map-header .label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
#cronos-root .sp-mini-map-header .status {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: inline-flex; align-items: center; gap: 6px;
}
#cronos-root .sp-mini-map-header .status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 2s infinite;
}
#cronos-root .sp-mini-map-header .status.alert { color: var(--warn); }

#cronos-root .sp-mini-map-svg { width: 100%; height: 160px; display: block; }

#cronos-root .your-stop-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  animation: your-ring-pulse 2s infinite;
}
@keyframes your-ring-pulse {
  0%, 100% { stroke-opacity: 1; r: 14; }
  50% { stroke-opacity: 0.3; r: 22; }
}

#cronos-root .your-stop-badge {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  fill: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

#cronos-root .sp-stop-info {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  display: flex; align-items: center; gap: 12px;
}
#cronos-root .sp-stop-info .num-badge {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 24px;
  color: var(--accent);
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
}
#cronos-root .sp-stop-info .num-badge sub {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  font-style: normal;
  vertical-align: 0;
}
#cronos-root .sp-stop-info strong { color: var(--ink); font-weight: 500; }

#cronos-root ::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ======================== LOGIN — DRIVER BUTTON ======================== */

#cronos-root .login-driver-btn {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.18s;
}
#cronos-root .login-driver-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
#cronos-root .login-driver-btn .truck-em {
  font-size: 16px;
  filter: grayscale(0.2);
}

/* ======================== ANIMATED MAP ======================== */

#cronos-root .map-section {
  margin-bottom: 32px;
  padding: 26px 30px;
  background: linear-gradient(180deg, var(--surface), var(--elevated));
  border: 1px solid var(--line);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}

#cronos-root .map-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}
#cronos-root .map-section-head h3 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
}
#cronos-root .map-section-head h3 em { font-style: italic; color: var(--accent); }

#cronos-root .map-status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--green-soft);
  color: var(--green);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
#cronos-root .map-status-pill.alert {
  background: var(--warn-soft);
  color: var(--warn);
  animation: alert-pulse 1.5s infinite;
}
#cronos-root .map-status-pill .dot {
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}
@keyframes alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 106, 45, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(199, 106, 45, 0); }
}

#cronos-root .route-map-wrap {
  position: relative;
  background: #FAF7ED;
  border-radius: 14px;
  padding: 16px;
  overflow: hidden;
}

#cronos-root .route-map-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(31, 27, 20, 0.06) 1px, transparent 0);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0.5;
}

/* ── TRILHO LINEAR (Visão geral da carreta): início → paradas → fim ──────────
   PC = horizontal; celular vira vertical (a altura cresce via @media). */
#cronos-root #route-map { width: 100%; height: 210px; display: block; position: relative; z-index: 1; }

/* Trilho de fundo (a entregar): linha reta cheia, suave. */
#cronos-root .rail-base {
  fill: none;
  stroke: var(--line);
  stroke-width: 3;
  stroke-linecap: round;
}
/* Trilho percorrido (até a parada atual): "entregue", cresce ao avançar. */
#cronos-root .rail-done {
  fill: none;
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
  transition: d 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* anima onde suportado; senão pula */
}

/* Nós (paradas) */
#cronos-root .rail-node .rail-dot {
  transition: fill 0.4s ease, r 0.3s ease;
  stroke: var(--line); stroke-width: 1.5;
}
#cronos-root .rail-node.visited .rail-dot { fill: var(--green); stroke: var(--green); }
#cronos-root .rail-node.current .rail-dot { fill: var(--accent); stroke: var(--accent); }
#cronos-root .rail-node.pending .rail-dot { fill: var(--elevated); stroke: var(--line); }
/* Origem (carga) e destino (fim) têm um anel sutil de destaque. */
#cronos-root .rail-node.origin .rail-dot,
#cronos-root .rail-node.dest .rail-dot { stroke-width: 2.5; }

#cronos-root .rail-node .rail-check { stroke: #fff; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Pulso na parada atual. */
#cronos-root .rail-node.current .rail-pulse {
  fill: none; stroke: var(--accent); stroke-width: 2;
  transform-origin: center;
  animation: rail-radiate 2s ease-out infinite;
}
@keyframes rail-radiate {
  0% { r: 8; opacity: 0.55; }
  100% { r: 24; opacity: 0; }
}

#cronos-root .rail-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  fill: var(--ink-2); font-weight: 500;
}
#cronos-root .rail-node.current .rail-label { fill: var(--accent); font-weight: 600; }
#cronos-root .rail-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 8px; text-transform: uppercase; letter-spacing: 0.14em;
  fill: var(--ink-3);
}

/* Caminhão: desliza de um nó ao próximo SÓ quando a parada avança (transition
   no transform). Respiro sutil enquanto parado (escala + sombra, sem sair do lugar). */
#cronos-root .truck-marker {
  transition: transform 0.7s cubic-bezier(0.45, 0, 0.25, 1);
  filter: drop-shadow(0 3px 7px rgba(184, 74, 26, 0.32));
}
#cronos-root .truck-marker.no-anim { transition: none; } /* posição inicial sem deslizar */
#cronos-root .truck-marker .truck-bg {
  fill: var(--accent);
  transition: fill 0.4s;
}
/* O respiro vive no wrapper interno (não interfere no translate do <g> externo). */
#cronos-root .truck-flip {
  transform: scaleX(-1); /* 🚚 nativo aponta p/ ESQUERDA → espelha p/ a DIREITA */
  transform-origin: center;
  transform-box: fill-box;
  animation: truck-breathe 2.6s ease-in-out infinite;
}
@keyframes truck-breathe {
  0%, 100% { transform: scaleX(-1) scale(1); }
  50% { transform: scaleX(-1) scale(1.07); }
}
#cronos-root .truck-marker.alert .truck-bg { fill: var(--warn); }
#cronos-root .truck-marker.alert .truck-flip { animation: truck-shake 0.45s infinite; }
@keyframes truck-shake {
  0%, 100% { transform: scaleX(-1) rotate(0); }
  25% { transform: scaleX(-1) rotate(-4deg); }
  75% { transform: scaleX(-1) rotate(4deg); }
}
#cronos-root .truck-marker.alert .truck-emoji { opacity: 0; }
#cronos-root .truck-marker.alert .alert-emoji { opacity: 1; }
#cronos-root .truck-marker .alert-emoji { opacity: 0; transition: opacity 0.3s; }

/* Acessibilidade: sem movimento → sem respiro nem deslize animado. */
@media (prefers-reduced-motion: reduce) {
  #cronos-root .truck-flip { animation: none !important; transform: scaleX(-1) !important; }
  #cronos-root .truck-marker { transition: none !important; }
  #cronos-root .rail-node.current .rail-pulse { animation: none !important; }
  #cronos-root .rail-done { transition: none !important; }
}

#cronos-root .map-legend {
  display: flex; gap: 18px;
  margin-top: 14px;
  flex-wrap: wrap;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#cronos-root .map-legend-item { display: inline-flex; align-items: center; gap: 6px; }
#cronos-root .map-legend-item .swatch { width: 10px; height: 10px; border-radius: 50%; }

/* ======================== SOS BANNER (in Ops) ======================== */

#cronos-root .sos-banner {
  display: none;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #FCE9D6, #FAEEDA);
  border: 1.5px solid var(--warn);
  border-radius: 14px;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  animation: drift 0.4s;
}

#cronos-root .sos-banner.show { display: flex; }

/* Banner de REVERSÃO (F: cancelar/reverter SOS): não é alarme — tom calmo, sem o sweep/bob. */
#cronos-root .sos-revert {
  background: linear-gradient(135deg, #EAF1F7, #F1F5F9);
  border-color: #7BA0C9;
}
#cronos-root .sos-revert::before { display: none; }
#cronos-root .sos-revert .sos-icon-big { animation: none; }
#cronos-root .sos-revert .sos-message em { color: #4D7A4D; }

#cronos-root .sos-banner::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: sos-sweep 3s infinite;
}
@keyframes sos-sweep {
  to { left: 200%; }
}

#cronos-root .sos-banner .sos-icon-big {
  font-size: 32px;
  flex-shrink: 0;
  animation: sos-bob 1.2s infinite;
}
@keyframes sos-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

#cronos-root .sos-banner .sos-text { flex: 1; }
#cronos-root .sos-banner .sos-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--warn);
  margin-bottom: 4px;
  font-weight: 600;
}
#cronos-root .sos-banner .sos-message {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 6px;
}
#cronos-root .sos-banner .sos-message em { font-style: italic; color: var(--warn); }
#cronos-root .sos-banner .sos-details {
  font-size: 13px;
  color: var(--ink-2);
}
#cronos-root .sos-banner .sos-actions { display: flex; gap: 8px; }

/* ======================== DRIVER SCREEN (phone mockup) ======================== */

/* App do motorista REAL: tela cheia (não é mais uma moldura de demonstração).
   Celular → 100% da tela; PC → painel estilo iPad (alto, centralizado, sem notch). */
#cronos-root .driver-shell {
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(180deg, #14110C 0%, #0F0C08 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}

#cronos-root .driver-frame {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* A coluna institucional lateral some no app real — a saudação já vive dentro do app. */
#cronos-root .driver-frame .side-info { display: none; }

#cronos-root .phone {
  background: linear-gradient(180deg, #1F1B14, #0F0C08);
  position: relative;
  overflow: hidden;
  color: var(--paper);
  display: flex; flex-direction: column;
  /* PC: estilo iPad — painel alto centralizado, cantos suaves, sem notch. */
  width: min(560px, 96vw);
  height: min(900px, 94vh);
  border-radius: 22px;
  border: 1px solid #3A3428;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 20px 20px 18px;
}

/* Celular: ocupa a tela toda, sem bordas/raio (é o app, não uma moldura). */
@media (max-width: 640px) {
  #cronos-root .phone {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
    padding-top: calc(14px + env(safe-area-inset-top));
  }
}

/* Header do app (barra de status + Sair) — substitui a navegação lateral antiga. */
#cronos-root .phone-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
#cronos-root .phone-exit {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(244,239,227,0.07); border: 1px solid rgba(244,239,227,0.1);
  color: rgba(244,239,227,0.8); font-size: 12px; padding: 5px 11px; border-radius: 100px; cursor: pointer;
}
#cronos-root .phone-exit:hover { background: rgba(244,239,227,0.13); }
#cronos-root .phone-exit svg { width: 12px; height: 12px; }

#cronos-root .phone-status-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
  padding: 0 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: rgba(244, 239, 227, 0.9);
}

#cronos-root .phone-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
#cronos-root .phone-content::-webkit-scrollbar { width: 3px; }
#cronos-root .phone-content::-webkit-scrollbar-thumb { background: rgba(244,239,227,0.15); }

#cronos-root .phone-greet {
  padding: 0 6px;
  margin-bottom: 16px;
}
#cronos-root .phone-greet .day {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(244, 239, 227, 0.5);
  margin-bottom: 6px;
}
#cronos-root .phone-greet h2 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
#cronos-root .phone-greet h2 em { font-style: italic; color: var(--accent-hi); }

#cronos-root .phone-trip {
  background: linear-gradient(180deg, rgba(244, 239, 227, 0.08), rgba(244, 239, 227, 0.03));
  border: 1px solid rgba(244, 239, 227, 0.1);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

#cronos-root .phone-trip-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: rgba(244, 239, 227, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
#cronos-root .phone-trip-row strong { color: var(--paper); font-weight: 500; }

#cronos-root .phone-trip-route {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
}
#cronos-root .phone-trip-route .from, #cronos-root .phone-trip-route .to { flex: 1; }
#cronos-root .phone-trip-route .to { text-align: right; }
#cronos-root .phone-trip-route .city-name {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: var(--paper);
  line-height: 1;
}
#cronos-root .phone-trip-route .city-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: rgba(244, 239, 227, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}
#cronos-root .phone-trip-arrow {
  color: var(--accent-hi);
  font-size: 18px;
  animation: arrow-bounce 1.5s infinite;
}
@keyframes arrow-bounce {
  0%, 100% { transform: translateX(-2px); opacity: 0.5; }
  50% { transform: translateX(2px); opacity: 1; }
}

#cronos-root .phone-progress {
  margin-top: 14px;
  height: 3px;
  background: rgba(244, 239, 227, 0.08);
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}
#cronos-root .phone-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 64%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  border-radius: 100px;
}
#cronos-root .phone-progress-fill::after {
  content: '';
  position: absolute;
  right: -3px; top: -3px;
  width: 9px; height: 9px;
  background: var(--accent-hi);
  border-radius: 50%;
}

#cronos-root .phone-mini-map {
  background: rgba(244, 239, 227, 0.04);
  border: 1px solid rgba(244, 239, 227, 0.06);
  border-radius: 14px;
  margin-bottom: 14px;
  padding: 12px;
  position: relative;
  overflow: hidden;
}
#cronos-root .phone-mini-map svg { width: 100%; height: 130px; display: block; }
#cronos-root .phone-mini-map .pm-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: rgba(244, 239, 227, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

#cronos-root .phone-mini-map .city-label { fill: rgba(244, 239, 227, 0.65); }

#cronos-root .phone-stops {
  background: rgba(244, 239, 227, 0.04);
  border: 1px solid rgba(244, 239, 227, 0.06);
  border-radius: 14px;
  padding: 6px;
  margin-bottom: 14px;
}

#cronos-root .phone-stop {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
}
#cronos-root .phone-stop.current { background: rgba(244, 239, 227, 0.06); }

#cronos-root .phone-stop .pst-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(244, 239, 227, 0.15);
  border: 1px solid rgba(244, 239, 227, 0.2);
  flex-shrink: 0;
}
#cronos-root .phone-stop.done .pst-dot { background: var(--green); border-color: var(--green); }
#cronos-root .phone-stop.current .pst-dot {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  animation: pulse-dot 1.8s infinite;
  box-shadow: 0 0 0 4px rgba(216, 97, 42, 0.2);
}

#cronos-root .phone-stop .pst-info { flex: 1; min-width: 0; }
#cronos-root .phone-stop .pst-city {
  font-size: 13px;
  color: rgba(244, 239, 227, 0.95);
  font-weight: 500;
}
#cronos-root .phone-stop .pst-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: rgba(244, 239, 227, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 1px;
}
#cronos-root .phone-stop .pst-eta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: rgba(244, 239, 227, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#cronos-root .phone-stop.current .pst-eta { color: var(--accent-hi); font-weight: 600; }

/* Entregas da parada atual (app do motorista) */
#cronos-root .phone-deliveries { margin: 4px 0 12px; display: flex; flex-direction: column; gap: 7px; }
#cronos-root .phone-deliv-lbl { font-family: 'Geist Mono', monospace; font-size: 9.5px; letter-spacing: .12em; color: rgba(244,239,227,.45); margin-bottom: 2px; }
#cronos-root .phone-deliv-empty { font-size: 12px; color: rgba(244,239,227,.45); padding: 8px 2px; }
/* Entregas BLOQUEADAS até o motorista marcar "Cheguei" (gate de etapa). */
#cronos-root .phone-deliv-locked { font-size: 12.5px; line-height: 1.45; color: rgba(244,239,227,.62); padding: 12px 13px; border-radius: 11px; background: rgba(244,239,227,.04); border: 1px dashed rgba(244,239,227,.14); }
#cronos-root .phone-deliv-locked strong { color: #F4EFE3; }
#cronos-root .phone-deliv { width: 100%; text-align: left; padding: 10px 12px; border-radius: 11px; background: rgba(244,239,227,.05); border: 1px solid rgba(244,239,227,.08); color: #F4EFE3; cursor: pointer; }
#cronos-root .phone-deliv:hover { background: rgba(244,239,227,.09); }
#cronos-root .phone-deliv-dest { font-size: 13px; font-weight: 600; }
#cronos-root .phone-deliv-meta { font-size: 11px; color: rgba(244,239,227,.55); margin-top: 3px; }
#cronos-root .phone-deliv-done { color: #7FD89B; }
#cronos-root .phone-deliv-pend { color: rgba(244,239,227,.7); }

/* Resumo grande do dia (topo do app do motorista) */
#cronos-root .phone-today { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 2px 0 14px; padding: 12px 14px; border-radius: 13px; background: rgba(244,239,227,.06); border: 1px solid rgba(244,239,227,.10); }
#cronos-root .phone-today .pt-big { font-size: 17px; font-weight: 700; color: #F4EFE3; }
#cronos-root .phone-today .pt-ok { font-size: 13px; font-weight: 600; color: #7FD89B; }
#cronos-root .phone-today .pt-falta { font-size: 13px; font-weight: 600; color: #F0C98A; }
#cronos-root .phone-today .pt-next { font-size: 12px; color: rgba(244,239,227,.6); width: 100%; }
#cronos-root .phone-today .pt-next strong { color: #F4EFE3; }

/* Cartões de entrega — UX de 1 toque (botões grandes) */
#cronos-root .dcard { padding: 12px 13px; border-radius: 13px; background: rgba(244,239,227,.05); border: 1px solid rgba(244,239,227,.09); }
#cronos-root .dcard.done.ok { background: rgba(127,216,155,.10); border-color: rgba(127,216,155,.30); }
#cronos-root .dcard.done.warn { background: rgba(240,201,138,.10); border-color: rgba(240,201,138,.30); }
#cronos-root .dcard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#cronos-root .dcard-dest { font-size: 14px; font-weight: 700; color: #F4EFE3; }
#cronos-root .dcard-canhoto-ok { font-size: 10.5px; color: #7FD89B; white-space: nowrap; }
#cronos-root .dcard-meta { font-size: 11.5px; color: rgba(244,239,227,.55); margin-top: 2px; }
#cronos-root .dcard-result { margin-top: 8px; font-size: 13px; font-weight: 600; }
#cronos-root .dcard.done.ok .dcard-result { color: #7FD89B; }
#cronos-root .dcard.done.warn .dcard-result { color: #F0C98A; }
#cronos-root .dcard-acts { display: flex; gap: 7px; margin-top: 11px; }
#cronos-root .dcard-btn { flex: 1; padding: 12px 6px; border-radius: 11px; font-size: 12.5px; font-weight: 600; background: rgba(244,239,227,.08); border: 1px solid rgba(244,239,227,.12); color: #F4EFE3; cursor: pointer; min-height: 46px; }
#cronos-root .dcard-btn:active { transform: scale(.97); }
#cronos-root .dcard-btn.ok { background: rgba(127,216,155,.16); border-color: rgba(127,216,155,.40); color: #C8F0D4; }
#cronos-root .dcard-prob { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
#cronos-root .dcard-prob-opt { width: 100%; text-align: left; padding: 11px 12px; border-radius: 10px; font-size: 12.5px; background: rgba(240,201,138,.10); border: 1px solid rgba(240,201,138,.25); color: #F4EFE3; cursor: pointer; }
#cronos-root .dcard-via { margin-top: 6px; font-size: 11px; color: rgba(244,239,227,.5); }

/* Registro pelo OPERADOR no side-panel (tema CLARO): override dos .dcard p/ fundo claro */
#cronos-root .sp-opreg { margin-top: 12px; }
#cronos-root .sp-opreg-lbl { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
#cronos-root .sp-opreg .dcard { background: var(--surface); border-color: var(--line); }
#cronos-root .sp-opreg .dcard-dest { color: var(--ink); }
#cronos-root .sp-opreg .dcard-meta { color: var(--ink-3); }
#cronos-root .sp-opreg .dcard-btn { background: var(--elevated); border-color: var(--line); color: var(--ink-1, var(--ink-2)); }
#cronos-root .sp-opreg .dcard-btn.ok { background: rgba(127,167,122,.16); border-color: rgba(127,167,122,.45); color: var(--green, #4E7A48); }
#cronos-root .sp-opreg .dcard-prob-opt { color: var(--ink-1, var(--ink-2)); }
/* Tema claro do side-panel: o ramo resolvido do dcard (via/resultado) precisa de cor legível sobre fundo claro. */
#cronos-root .sp-opreg .dcard-via { color: var(--ink-3); }
#cronos-root .sp-opreg .dcard.done.ok .dcard-result { color: var(--green, #4E7A48); }
#cronos-root .sp-opreg .dcard.done.warn .dcard-result { color: #9A6B12; }
#cronos-root .sp-desfecho-via { display: block; margin-top: 2px; font-size: 11px; opacity: .75; font-weight: 400; }

/* Chips de FONTE (modal do registro pelo operador) */
#cronos-root .op-fonte-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
#cronos-root .op-fonte-chip { padding: 9px 13px; border-radius: 999px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; }
#cronos-root .op-fonte-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Seletor de NFs (devolução por nota, E4.2). Hierarquia z: parada 9120 < nf-pick 9180 <
   fonte 9250 (operador faz NFs → depois fonte, que abre por cima). */
#cronos-root #nf-pick-modal { z-index: 9180; }
#cronos-root .nf-pick-list { max-height: 52vh; overflow: auto; padding: 6px 22px; }
#cronos-root .nf-pick-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13.5px; }
#cronos-root .nf-pick-item:last-of-type { border-bottom: 0; }
#cronos-root .nf-pick-item input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
#cronos-root .nf-pick-seq { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-3); }
#cronos-root .nf-pick-num { font-weight: 600; color: var(--ink); }
#cronos-root .nf-pick-info { color: var(--ink-3); font-size: 12px; }
#cronos-root .nf-pick-empty { padding: 18px 4px; color: var(--ink-3); font-size: 13px; text-align: center; }
#cronos-root .nf-pick-tools { display: flex; gap: 8px; padding: 10px 0 2px; }
#cronos-root .btn.btn-sm { padding: 5px 10px; font-size: 12px; }

/* Baixa WS (E4.3): selo + botão no card resolvido */
#cronos-root .dcard-baixa-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
#cronos-root .dcard-baixa { font-size: 11px; font-weight: 600; }
#cronos-root .dcard-baixa.ok { color: var(--green, #4E7A48); }
#cronos-root .dcard-baixa.parcial { color: #9A6B12; }
#cronos-root .dcard-btn.sm { padding: 4px 9px; font-size: 11.5px; }

/* Relatório de pós-entrega (E4.4) */
#cronos-root .pos-entrega-body { padding: 8px 22px; max-height: 60vh; overflow: auto; }
#cronos-root .pe-sec { margin-bottom: 14px; }
#cronos-root .pe-sec-h { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
#cronos-root .pe-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13.5px; color: var(--ink-1, var(--ink-2)); }
#cronos-root .pe-lbl { color: var(--ink-2); }
#cronos-root .pe-val { font-weight: 600; color: var(--ink); }
#cronos-root .pe-val.ok { color: var(--green, #4E7A48); }
#cronos-root .pe-val.warn { color: #9A6B12; }

/* Painel da PARADA (operador, Fase 3): lista de entregas da parada + concluir parada.
   O modal de FONTE precisa abrir POR CIMA deste (operador escolhe a fonte de uma
   entrega listada aqui). Hierarquia: parada 9120 < fonte 9250 < toast 9500 < tooltip 9600.
   9250 (não 9200) evita empate com .pwa-guide-overlay (9200). */
#cronos-root #op-fonte-modal { z-index: 9250; }
#cronos-root #op-parada-modal { z-index: 9120; }
#cronos-root .op-parada-body { padding: 8px 22px 4px; max-height: 56vh; overflow: auto; }
#cronos-root .op-parada-body.sp-opreg { margin-top: 0; }
#cronos-root .op-parada-body .dcard { margin-bottom: 10px; }
#cronos-root .op-parada-empty { padding: 18px 4px; color: var(--ink-3); font-size: 13px; text-align: center; }
/* Ordem sugerida de entrega: nota + numerador #N ao lado do cartão */
#cronos-root .op-parada-ordemnote { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin: 2px 2px 12px; padding: 8px 11px; background: var(--bg-2, rgba(0,0,0,.03)); border-radius: 9px; }
#cronos-root .op-parada-item { display: flex; align-items: flex-start; gap: 10px; }
#cronos-root .op-parada-item-card { flex: 1 1 auto; min-width: 0; }
#cronos-root .op-parada-seq { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent, #d8612a); color: #fff; font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600; }

/* Banner "auto-avançar parada" (CTA, nunca avança sozinho) */
#cronos-root .phone-advance { margin: 4px 0 12px; padding: 13px 14px; border-radius: 13px; background: rgba(127,216,155,.10); border: 1px solid rgba(127,216,155,.30); }
#cronos-root .phone-advance .padv-txt { font-size: 12.5px; color: #F4EFE3; margin-bottom: 10px; }
#cronos-root .phone-advance .padv-txt strong { color: #C8F0D4; }
#cronos-root .phone-advance .padv-btn { width: 100%; padding: 13px; border-radius: 11px; font-size: 14px; font-weight: 700; background: #7FD89B; border: none; color: #18331F; cursor: pointer; }
#cronos-root .phone-advance .padv-btn:active { transform: scale(.98); }

/* Painel de uma entrega (desfecho + canhoto) */
#cronos-root .phone-delivery-modal { display: none; position: absolute; inset: 0; background: #1A1714; flex-direction: column; padding: 18px 16px; z-index: 6; border-radius: inherit; overflow-y: auto; }
#cronos-root .phone-delivery-modal.show { display: flex; }

/* Alerta "faltam entregas sem registro" ao concluir a parada (full-screen no phone) */
#cronos-root .phone-pend-modal { display: none; position: absolute; inset: 0; background: linear-gradient(180deg,#221D16,#15110C); flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 22px; z-index: 12; border-radius: inherit; overflow-y: auto; }
#cronos-root .phone-pend-modal.show { display: flex; animation: drift .35s; }
#cronos-root .ppend-emoji { font-size: 46px; margin-bottom: 12px; }
#cronos-root .ppend-title { font-family: 'Instrument Serif', serif; font-size: 27px; font-weight: 400; color: #F4EFE3; line-height: 1.1; margin-bottom: 8px; }
#cronos-root .ppend-title em { font-style: italic; color: var(--accent-hi, #E8915E); }
#cronos-root .ppend-sub { font-size: 13.5px; color: rgba(244,239,227,.72); line-height: 1.5; margin-bottom: 14px; max-width: 300px; }
#cronos-root .ppend-list { list-style: none; margin: 0 0 14px; padding: 10px 14px; width: 100%; max-width: 320px; background: rgba(244,239,227,.05); border: 1px solid rgba(244,239,227,.1); border-radius: 12px; text-align: left; max-height: 150px; overflow-y: auto; }
#cronos-root .ppend-list li { font-size: 13px; color: #F4EFE3; padding: 5px 0; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(244,239,227,.06); }
#cronos-root .ppend-list li:last-child { border-bottom: none; }
#cronos-root .ppend-cargas { font-size: 11px; color: rgba(244,239,227,.5); white-space: nowrap; }
#cronos-root .ppend-note { font-size: 11.5px; color: rgba(244,239,227,.5); line-height: 1.5; margin-bottom: 18px; max-width: 300px; }
#cronos-root .ppend-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
#cronos-root .ppend-btn { width: 100%; padding: 14px 16px; border-radius: 13px; font-size: 14px; font-weight: 600; cursor: pointer; background: rgba(244,239,227,.07); border: 1px solid rgba(244,239,227,.14); color: #F4EFE3; }
#cronos-root .ppend-btn.primary { background: var(--accent, #d8612a); border: none; color: #fff; }
#cronos-root .ppend-btn.primary:hover { filter: brightness(1.08); }
#cronos-root .ppend-btn.ghost { background: transparent; border: none; color: rgba(244,239,227,.5); font-weight: 400; font-size: 13px; padding: 8px; }
#cronos-root .pdm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#cronos-root .pdm-titles { flex: 1; }
#cronos-root .pdm-title { font-size: 15px; font-weight: 700; color: #F4EFE3; }
#cronos-root .pdm-sub { font-size: 11px; color: rgba(244,239,227,.55); margin-top: 2px; }
#cronos-root .dlv-opts { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
#cronos-root .dlv-opt { width: 100%; text-align: left; padding: 13px 14px; border-radius: 12px; background: rgba(244,239,227,.06); border: 1px solid rgba(244,239,227,.1); color: #F4EFE3; font-size: 14px; cursor: pointer; }
#cronos-root .dlv-opt:hover { background: rgba(244,239,227,.12); }
#cronos-root .dlv-done { font-size: 13px; color: #7FD89B; padding: 10px 0; }
#cronos-root .dlv-canhoto-row { margin-top: 6px; }
#cronos-root .dlv-canhoto { padding: 11px 14px; border-radius: 12px; background: var(--accent); border: none; color: #fff; font-size: 13px; cursor: pointer; }
#cronos-root .dlv-canhoto-ok { font-size: 11px; color: #7FD89B; margin-left: 8px; }

/* Rodapé fixo do app: ações sempre visíveis (não rolam com a lista de entregas). */
#cronos-root .phone-footer {
  flex: 0 0 auto;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid rgba(244,239,227,0.08);
}
#cronos-root .phone-action {
  display: flex; gap: 8px;
  margin-bottom: 10px;
}
#cronos-root .phone-btn-small {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  background: rgba(244, 239, 227, 0.06);
  border: 1px solid rgba(244, 239, 227, 0.08);
  color: var(--paper);
  font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
#cronos-root .phone-btn-small:hover { background: rgba(244, 239, 227, 0.1); }
/* Botão de AÇÃO da etapa (Iniciar / Concluir e seguir): verde, destaque. */
#cronos-root .phone-btn-go { background: #7FD89B; border-color: #7FD89B; color: #18331F; font-weight: 700; }
#cronos-root .phone-btn-go:hover { background: #8fe0a8; filter: brightness(1.02); }
#cronos-root .phone-btn-go:active { transform: scale(.98); }
/* Selo "já cheguei aqui" ao lado do botão de concluir. */
#cronos-root .phone-arrived-tag { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #C8F0D4; background: rgba(127,216,155,.12); border: 1px solid rgba(127,216,155,.28); }
/* Nota da última parada (sem botão de avançar). */
#cronos-root .phone-last-note { flex: 1; font-size: 11px; line-height: 1.4; color: rgba(244,239,227,.55); align-self: center; }

/* INDICADOR DE ETAPA (passo a passo) no topo do app do motorista. */
#cronos-root .phone-step { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 2px 0 10px; }
#cronos-root .phone-step .pstep { font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(244,239,227,.05); border: 1px solid rgba(244,239,227,.08); color: rgba(244,239,227,.45); white-space: nowrap; }
#cronos-root .phone-step .pstep.on { background: rgba(127,216,155,.14); border-color: rgba(127,216,155,.34); color: #C8F0D4; }
#cronos-root .phone-step .pstep.done { color: rgba(200,240,212,.62); border-color: rgba(127,216,155,.18); }
#cronos-root .phone-step .psep { color: rgba(244,239,227,.3); font-size: 11px; }
/* F2 — selo "seu trecho a partir de {CD}" no app do motorista (quando assumiu num CD). */
#cronos-root .phone-trecho { margin: 2px 0 10px; padding: 8px 12px; border-radius: 11px; font-size: 12.5px; color: #C8F0D4; background: rgba(127,216,155,.12); border: 1px solid rgba(127,216,155,.28); }
#cronos-root .phone-trecho strong { color: #F4EFE3; }

#cronos-root .phone-sos {
  width: 100%;
  padding: 16px;
  background: linear-gradient(180deg, rgba(199, 106, 45, 0.15), rgba(199, 106, 45, 0.08));
  border: 1px solid rgba(199, 106, 45, 0.4);
  border-radius: 14px;
  display: flex; align-items: center; gap: 12px;
  color: var(--paper);
  transition: all 0.2s;
  position: relative;
}
#cronos-root .phone-sos:hover {
  background: linear-gradient(180deg, rgba(199, 106, 45, 0.25), rgba(199, 106, 45, 0.12));
  border-color: var(--warn);
}
#cronos-root .phone-sos-emoji {
  font-size: 26px;
  flex-shrink: 0;
  animation: sos-bob 1.5s infinite;
}
#cronos-root .phone-sos-text { flex: 1; text-align: left; }
#cronos-root .phone-sos-text strong {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
}
#cronos-root .phone-sos-text span {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: rgba(244, 239, 227, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

#cronos-root .phone-sos.in-alert {
  background: var(--warn);
  border-color: var(--warn);
  animation: alert-blink 1s infinite;
}
@keyframes alert-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 106, 45, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(199, 106, 45, 0); }
}
#cronos-root .phone-sos.in-alert .phone-sos-text strong { font-style: normal; font-family: 'Geist', sans-serif; font-weight: 600; font-size: 13px; }
#cronos-root .phone-sos.in-alert .phone-sos-text span { color: rgba(244,239,227,0.85); }

/* SOS Modal inside phone */
#cronos-root .phone-sos-modal {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1F1B14, #0F0C08);
  display: none;
  flex-direction: column;
  padding: 38px 22px 24px;
  z-index: 20;
  border-radius: inherit;
  animation: drift 0.4s;
}
#cronos-root .phone-sos-modal.show { display: flex; }

#cronos-root .psm-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
  padding: 0 6px;
}
#cronos-root .psm-back {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(244, 239, 227, 0.08);
  border: 1px solid rgba(244, 239, 227, 0.1);
  color: var(--paper);
  display: grid; place-items: center;
  cursor: pointer;
}
#cronos-root .psm-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--warn);
  font-weight: 600;
}

#cronos-root .psm-emoji {
  font-size: 42px;
  text-align: center;
  margin: 14px 0;
  animation: sos-bob 1.5s infinite;
}

#cronos-root .psm-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 12px;
  color: var(--paper);
}
#cronos-root .psm-title em { font-style: italic; color: var(--accent-hi); }

#cronos-root .psm-sub {
  text-align: center;
  color: rgba(244, 239, 227, 0.6);
  font-size: 13px;
  margin-bottom: 28px;
  padding: 0 12px;
  line-height: 1.5;
}

#cronos-root .psm-section-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(244, 239, 227, 0.5);
  margin-bottom: 10px;
  padding: 0 6px;
}

#cronos-root .psm-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}

#cronos-root .psm-type {
  padding: 12px 10px;
  background: rgba(244, 239, 227, 0.04);
  border: 1px solid rgba(244, 239, 227, 0.08);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--paper);
}
#cronos-root .psm-type:hover { background: rgba(244, 239, 227, 0.08); }
#cronos-root .psm-type.selected {
  background: var(--warn);
  border-color: var(--warn);
}
#cronos-root .psm-type .emoji { font-size: 22px; }
#cronos-root .psm-type .name {
  font-size: 11px;
  font-weight: 500;
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#cronos-root .psm-days {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}

#cronos-root .psm-day {
  padding: 14px 4px;
  background: rgba(244, 239, 227, 0.04);
  border: 1px solid rgba(244, 239, 227, 0.08);
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer;
  color: var(--paper);
  transition: all 0.18s;
}
#cronos-root .psm-day:hover { background: rgba(244, 239, 227, 0.08); }
#cronos-root .psm-day.selected {
  background: var(--warn);
  border-color: var(--warn);
}
#cronos-root .psm-day .n {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 20px;
}
#cronos-root .psm-day .l {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(244, 239, 227, 0.5);
}
#cronos-root .psm-day.selected .l { color: rgba(244, 239, 227, 0.85); }

#cronos-root .psm-impact {
  background: rgba(244, 239, 227, 0.04);
  border: 1px solid rgba(244, 239, 227, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 11px;
  color: rgba(244, 239, 227, 0.7);
  line-height: 1.5;
  margin-bottom: 14px;
  display: flex; gap: 10px;
}
#cronos-root .psm-impact .pi-icon { color: var(--accent-hi); flex-shrink: 0; }
#cronos-root .psm-impact strong { color: var(--paper); }

#cronos-root .psm-footer {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 8px;
}
#cronos-root .btn-sos-confirm {
  padding: 14px;
  background: var(--warn);
  color: white;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
#cronos-root .btn-sos-confirm:hover { background: #B45A20; }

#cronos-root .phone-confirmed-state {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1F1B14, #0F0C08);
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: 38px 22px 24px;
  z-index: 20;
  border-radius: inherit;
  text-align: center;
}
#cronos-root .phone-confirmed-state.show { display: flex; animation: drift 0.5s; }
#cronos-root .pcs-emoji { font-size: 56px; margin-bottom: 18px; animation: bob 2s infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
#cronos-root .pcs-title {
  font-family: 'Instrument Serif', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 12px;
}
#cronos-root .pcs-title em { font-style: italic; color: var(--accent-hi); }
#cronos-root .pcs-msg {
  color: rgba(244, 239, 227, 0.6);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 280px;
}
/* "Voltar ao app" nesta tela: NÃO herda o flex:1 do .phone-btn-small (que num
   container em COLUNA esticava o botão verticalmente). Botão sólido, compacto e
   proporcional, alinhado ao centro. */
#cronos-root .phone-confirmed-state .phone-btn-small {
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  min-width: 180px;
  padding: 13px 28px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent, #d8612a);
  border: none;
  color: #fff;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
#cronos-root .phone-confirmed-state .phone-btn-small:hover { background: var(--accent, #d8612a); filter: brightness(1.08); transform: translateY(-1px); }

/* ======================== CONFETTI (success) ======================== */

#cronos-root .confetti {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 200;
}
#cronos-root .confetti-piece {
  position: absolute;
  width: 8px; height: 14px;
  top: -20px;
  animation: confetti-fall 3s linear forwards;
  border-radius: 1px;
}
@keyframes confetti-fall {
  to {
    top: 110vh;
    transform: rotate(var(--r));
  }
}


/* ═══════════ Didática da jornada (Passo 3, Operações, Painel, Mapa) ═══════════ */

/* Passo 3 — explicador "Como agrupamos" + linha de contagem */
#cronos-root .consolidation-explainer { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; }
#cronos-root .ce-title { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
#cronos-root .ce-body p { margin: 0 0 8px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
#cronos-root .ce-body ul { margin: 0; padding-left: 18px; }
#cronos-root .ce-body li { font-size: 13px; color: var(--ink-2); margin: 4px 0; line-height: 1.5; }
#cronos-root .groups-count-line { font-size: 13px; color: var(--ink-3); margin: 0 0 12px; font-family: 'Geist Mono', monospace; }

/* Passo 3 — "o que acontece a seguir" e badge de consolidação no card */
#cronos-root .gc-next-action { font-size: 11.5px; margin-top: 6px; padding: 3px 8px; border-radius: 6px; display: inline-block; }
#cronos-root .gc-next-action.email { background: var(--blue-soft); color: var(--blue); }
#cronos-root .gc-next-action.portal { background: #EFEAFB; color: #5B49B0; }
#cronos-root .gc-next-action.phone { background: var(--green-soft); color: var(--green); }
#cronos-root .gc-next-action.indef { background: var(--warn-soft); color: var(--warn); }
#cronos-root .gc-next-action.blocked { background: #FCE9E6; color: #B3261E; }
#cronos-root .gc-consolidated { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }

/* Operações — chips e narrativa no card */
#cronos-root .conv-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
#cronos-root .conv-chip { font-size: 10.5px; padding: 2px 7px; border-radius: 100px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-family: 'Geist Mono', monospace; white-space: nowrap; }
#cronos-root .conv-chip.ch-email { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
#cronos-root .conv-chip.ch-portal { background: #EFEAFB; color: #5B49B0; border-color: transparent; }
#cronos-root .conv-chip.ch-phone { background: var(--green-soft); color: var(--green); border-color: transparent; }
#cronos-root .conv-chip.ch-indef { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
#cronos-root .conv-chip.ch-cd { font-weight: 600; }
#cronos-root .conv-chip.ch-date-ok { color: var(--green); }
#cronos-root .conv-chip.ch-date-prov { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
#cronos-root .conv-chip.ch-next { color: var(--accent-deep); }
#cronos-root .conv-chip.ch-blocked { background: #FCE9E6; color: #B3261E; border-color: transparent; }
#cronos-root .conv-chip .conv-sub { opacity: .6; font-size: 9.5px; }
/* Rastreamento de e-mail (selo no card): funil pendente→enviado→aberto→clicou + erro. */
#cronos-root .conv-chip.ch-mail-wait { background: var(--surface); color: var(--ink-3); }
#cronos-root .conv-chip.ch-mail-sent { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
#cronos-root .conv-chip.ch-mail-open { background: #FFF3DC; color: #9A6A1B; border-color: transparent; }
#cronos-root .conv-chip.ch-mail-click { background: var(--green-soft); color: var(--green); border-color: transparent; }
#cronos-root .conv-chip.ch-mail-fail { background: #FCE9E6; color: #B3261E; border-color: transparent; font-weight: 600; }

/* Painel da fila de e-mail (Configurações). */
#cronos-root .mq-funnel { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
#cronos-root .mq-stat { flex: 1; min-width: 90px; text-align: center; padding: 12px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
#cronos-root .mq-stat .mq-n { font-family: 'Instrument Serif', serif; font-size: 28px; line-height: 1; }
#cronos-root .mq-stat .mq-l { font-size: 11px; color: var(--ink-3); margin-top: 5px; font-family: 'Geist Mono', monospace; }
#cronos-root .mq-stat.ch-mail-sent .mq-n { color: var(--blue); }
#cronos-root .mq-stat.ch-mail-open .mq-n { color: #9A6A1B; }
#cronos-root .mq-stat.ch-mail-click .mq-n { color: var(--green); }
#cronos-root .mq-stat.ch-mail-fail .mq-n { color: #B3261E; }
#cronos-root .mq-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
#cronos-root .mq-errors { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
#cronos-root .mq-errors-tit { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); padding: 9px 12px; background: var(--surface); }
#cronos-root .mq-err { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); }
#cronos-root .mq-err-to { font-size: 13px; font-weight: 600; color: var(--ink); }
#cronos-root .mq-err-tipo { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-3); font-weight: 400; }
#cronos-root .mq-err-msg { grid-column: 1; font-size: 12px; color: #B3261E; }
#cronos-root .mq-err button { grid-row: 1 / span 2; }
#cronos-root .mq-note { font-size: 12px; color: var(--ink-3); line-height: 1.5; background: var(--surface); border-radius: 10px; padding: 10px 12px; }

/* ═══════════ TELA COMUNICAÇÕES (acompanhamento de e-mail) ═══════════ */
#cronos-root .comms-shell { max-width: 1040px; margin: 0 auto; padding: 28px 24px 80px; }
#cronos-root .comms-head { margin-bottom: 22px; }
#cronos-root .comms-kicker { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .2em; color: var(--accent); margin-bottom: 6px; }
#cronos-root .comms-head h1 { font-family: 'Instrument Serif', serif; font-size: 34px; font-weight: 400; margin: 0 0 6px; }
#cronos-root .comms-head h1 em { color: var(--accent); font-style: italic; }
#cronos-root .comms-lead { color: var(--ink-2); font-size: 14px; line-height: 1.55; max-width: 640px; }
#cronos-root .comms-empty { text-align: center; padding: 28px; color: var(--ink-3); font-size: 13px; }

/* KPIs do topo */
#cronos-root .comms-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
#cronos-root .comms-kpis .kpi { flex: 1; min-width: 120px; padding: 14px; border-radius: 14px; background: var(--elevated); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(80,60,40,.04); }
#cronos-root .comms-kpis .kpi-n { font-family: 'Instrument Serif', serif; font-size: 30px; line-height: 1; }
#cronos-root .comms-kpis .kpi-l { font-size: 11px; color: var(--ink-3); margin-top: 6px; font-family: 'Geist Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
#cronos-root .comms-kpis .kpi.ch-mail-sent .kpi-n { color: var(--blue); }
#cronos-root .comms-kpis .kpi.ch-mail-open .kpi-n { color: #9A6A1B; }
#cronos-root .comms-kpis .kpi.ch-mail-click .kpi-n { color: var(--green); }
#cronos-root .comms-kpis .kpi.ch-mail-fail .kpi-n { color: #B3261E; }

/* Filtros por tipo */
#cronos-root .comms-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
#cronos-root .comms-filters .cf-lbl { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-right: 4px; }
#cronos-root .cf-btn { padding: 6px 12px; border-radius: 100px; border: 1px solid var(--line); background: var(--elevated); color: var(--ink-2); font-size: 12.5px; cursor: pointer; transition: all .15s; }
#cronos-root .cf-btn:hover { border-color: var(--accent); }
#cronos-root .cf-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Viagem (operação) expansível */
#cronos-root .comms-trip { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; background: var(--elevated); }
#cronos-root .cv-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 18px; background: none; border: none; cursor: pointer; text-align: left; }
#cronos-root .cv-head:hover { background: var(--surface); }
#cronos-root .cv-caret { color: var(--ink-3); font-size: 12px; width: 14px; }
#cronos-root .cv-num { font-weight: 600; font-size: 15px; flex-shrink: 0; }
#cronos-root .cv-funil { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }
#cronos-root .cv-mini { font-family: 'Geist Mono', monospace; font-size: 11px; padding: 2px 8px; border-radius: 100px; background: var(--surface); border: 1px solid var(--line); }
#cronos-root .cv-mini.ch-mail-sent { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
#cronos-root .cv-mini.ch-mail-open { background: #FFF3DC; color: #9A6A1B; border-color: transparent; }
#cronos-root .cv-mini.ch-mail-click { background: var(--green-soft); color: var(--green); border-color: transparent; }
#cronos-root .cv-mini.ch-mail-wait { color: var(--ink-3); }
#cronos-root .cv-mini.ch-mail-fail { background: #FCE9E6; color: #B3261E; border-color: transparent; }
#cronos-root .cv-body { padding: 0 18px; }
#cronos-root .cv-body:not(:empty) { padding: 4px 18px 14px; }

/* Solicitação (linha individual) */
#cronos-root .comms-sol { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
#cronos-root .cs-dest { font-weight: 600; font-size: 14px; }
#cronos-root .cs-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
#cronos-root .cs-erro { font-size: 12px; color: #B3261E; margin-top: 4px; }
#cronos-root .cs-tl-btn { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 13px; }
#cronos-root .cs-tl-btn:hover { border-color: var(--accent); }
#cronos-root .cs-timeline { grid-column: 1 / -1; }
#cronos-root .cs-timeline:not(:empty) { margin-top: 4px; padding: 10px 12px; background: var(--surface); border-radius: 10px; }
#cronos-root .cs-tl-item { font-size: 12.5px; color: var(--ink-2); padding: 3px 0; }
#cronos-root .cs-tl-w { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-3); margin-right: 8px; }
#cronos-root .conv-narrative { font-size: 12px; color: var(--ink-3); margin-top: 5px; line-height: 1.45; }

/* Painel lateral — stepper de jornada */
#cronos-root .journey-stepper { display: flex; gap: 4px; align-items: flex-start; margin: 4px 0 8px; }
#cronos-root .js-step { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 5px; position: relative; }
#cronos-root .js-step:not(:last-child)::after { content: ''; position: absolute; top: 6px; left: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
#cronos-root .js-step.done:not(:last-child)::after { background: var(--green); }
#cronos-root .js-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--line); position: relative; z-index: 1; }
#cronos-root .js-step.done .js-dot { background: var(--green); }
#cronos-root .js-step.active .js-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#cronos-root .js-step.blocked .js-dot { background: #B3261E; box-shadow: 0 0 0 3px #FCE9E6; }
#cronos-root .js-label { font-size: 10px; color: var(--ink-3); text-align: center; }
#cronos-root .js-step.active .js-label { color: var(--ink); font-weight: 600; }

/* Painel lateral — card "Como é agendada" */
#cronos-root .sp-channel { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
#cronos-root .sp-channel-head { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
#cronos-root .sp-channel-body { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
#cronos-root .sp-channel-next { font-size: 12px; margin-top: 7px; color: var(--accent-deep); font-weight: 600; }
#cronos-root .sp-channel.blocked { background: #FCE9E6; border-color: #E9B7B0; }
#cronos-root .sp-channel.blocked .sp-channel-next { color: #B3261E; }

/* Popup do mapa */
#cronos-root .map-help-btn { margin-left: auto; font-size: 11px; font-family: 'Geist Mono', monospace; border: 1px solid var(--line); background: var(--elevated); color: var(--ink-2); border-radius: 100px; padding: 4px 12px; cursor: pointer; }
#cronos-root .map-help-btn:hover { border-color: var(--accent); color: var(--accent); }
#cronos-root .map-help-overlay { position: fixed; inset: 0; background: rgba(31,27,20,.45); display: none; align-items: center; justify-content: center; z-index: 9000; padding: 20px; }
#cronos-root .map-help-overlay.show { display: flex; }
#cronos-root .map-help-box { background: var(--elevated); border-radius: 14px; max-width: 640px; width: 96%; max-height: 86vh; overflow: auto; box-shadow: 0 20px 60px rgba(80,60,40,.18); }
#cronos-root .mh-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--elevated); }
#cronos-root .mh-head h3 { margin: 0; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 21px; }
#cronos-root .mh-close { border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--ink-3); }
#cronos-root .mh-body { padding: 18px 22px 24px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
#cronos-root .mh-body h4 { margin: 18px 0 6px; font-size: 13px; color: var(--accent-deep); font-weight: 600; }
#cronos-root .mh-body h4:first-child { margin-top: 0; }
#cronos-root .mh-body ul { padding-left: 18px; margin: 6px 0; }
#cronos-root .mh-body li { margin: 5px 0; }

/* ═══════════ Cadastros: CRUD, modal, pendências, chat IA ═══════════ */
#cronos-root .cad-toolbar { margin-bottom: 14px; }
#cronos-root .btn-sm { font-size: 12.5px; padding: 7px 14px; }
#cronos-root .btn-mini.danger { color: #B3261E; border-color: #E9B7B0; }
#cronos-root .cad-actions { white-space: nowrap; text-align: right; }
#cronos-root .cad-actions .btn-mini { padding: 3px 8px; margin-left: 4px; }
#cronos-root .chk-actions { margin-top: 10px; display: flex; gap: 8px; }

/* Documentos anexados (modal da frota): zona de drag&drop + lista */
#cronos-root .docs-drop { border: 2px dashed var(--line); border-radius: 12px; padding: 22px 16px; text-align: center; cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s; margin-bottom: 14px; }
#cronos-root .docs-drop:hover, #cronos-root .docs-drop:focus { border-color: var(--accent); outline: none; }
#cronos-root .docs-drop.drag { border-color: var(--accent); background: var(--accent-soft); }
#cronos-root .docs-drop-ic { font-size: 26px; line-height: 1; }
#cronos-root .docs-drop-t { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-top: 6px; line-height: 1.4; }
#cronos-root .docs-drop-t u { color: var(--accent-deep, var(--accent)); text-decoration-thickness: 1px; }
#cronos-root .docs-drop-s { font-size: 10px; margin-top: 7px; font-family: 'Geist Mono', monospace; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
#cronos-root .docs-empty { padding: 12px 4px; text-align: center; color: var(--ink-3); font-size: 13px; }
#cronos-root .docs-list { display: flex; flex-direction: column; gap: 8px; }
#cronos-root .docs-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
#cronos-root .docs-link { flex: 1 1 auto; color: var(--accent-deep, var(--accent)); text-decoration: none; font-size: 13.5px; word-break: break-word; }
#cronos-root .docs-link:hover { text-decoration: underline; }
#cronos-root .docs-meta { flex: 0 0 auto; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-3); }

/* ── Grade editável (estilo planilha): barra de modo Ver/Editar + rolagem horizontal ── */
#cronos-root .cad-gridbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper);
}
#cronos-root .cad-gridbar-hint { flex: 1 1 320px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
#cronos-root .cad-gridbar-hint strong { color: var(--ink-2); font-weight: 600; }
#cronos-root .cad-gridbar-extra { flex: 0 0 auto; display: flex; gap: 8px; }
/* segmented Ver / Editar */
#cronos-root .cad-mode { display: inline-flex; flex: 0 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 100px; padding: 3px; }
#cronos-root .cad-mode button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 15px; border: none; border-radius: 100px; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--ink-3); background: transparent;
  transition: background .15s, color .15s;
}
#cronos-root .cad-mode button:hover { color: var(--ink); }
#cronos-root .cad-mode button.active { background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
/* rolagem horizontal quando há muitas colunas */
#cronos-root .cad-gridscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#cronos-root .cad-gridscroll table { min-width: 100%; }
/* cabeçalho com tooltip de coluna */
#cronos-root .cad-table th.cad-th-tip { cursor: help; }
#cronos-root .cad-table th.cad-th-tip span { border-bottom: 1px dotted var(--ink-4); }
/* inputs inline da grade */
#cronos-root .cad-ginput {
  width: 100%; min-width: 66px; box-sizing: border-box;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 13px; background: var(--surface); color: var(--ink);
}
#cronos-root .cad-ginput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#cronos-root select.cad-ginput { min-width: 118px; cursor: pointer; }
/* na edição, células mais compactas p/ caber os controles */
#cronos-root .cad-table.editing td { padding: 8px 12px; }
#cronos-root .cad-table.editing th { padding: 12px 12px; }
/* flash verde ao salvar a linha */
#cronos-root tr.cad-row-saved > td { animation: cadSaved 1.2s ease-out; }
@keyframes cadSaved { 0% { background: #E4F3E7; } 100% { background: transparent; } }
#cronos-root .cad-grid-empty { padding: 40px 24px; text-align: center; color: var(--ink-3); font-size: 13.5px; }

/* Modal genérico de cadastro */
#cronos-root .cad-modal-overlay { position: fixed; inset: 0; background: rgba(31,27,20,.45); display: none; align-items: center; justify-content: center; z-index: 9100; padding: 20px; }
#cronos-root .cad-modal-overlay.show { display: flex; }
#cronos-root .cad-modal-box { background: var(--elevated); border-radius: 14px; max-width: 520px; width: 96%; max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px rgba(80,60,40,.18); }
#cronos-root .cad-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line); }
#cronos-root .cad-modal-head h3 { margin: 0; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 21px; }
#cronos-root .cad-modal-close { border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--ink-3); }
#cronos-root .cad-modal-hint { padding: 10px 22px 0; font-size: 12.5px; color: var(--warn); }
#cronos-root .cad-modal-body { padding: 14px 22px; }
/* F2 — seção "Troca de frota por trecho" no modal de vincular frota. */
#cronos-root .vinc-base-lbl { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); margin: 0 0 8px; font-weight: 600; }
#cronos-root .vinc-base-lbl span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-3); }
#cronos-root .vinc-trechos { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
#cronos-root .vinc-trechos-hd { font-size: 13px; font-weight: 600; color: var(--ink-1, var(--ink)); margin-bottom: 8px; }
#cronos-root .vinc-trechos-hd span { font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
#cronos-root .vinc-seg-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
#cronos-root .vinc-seg-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 9px; background: rgba(0,0,0,.03); border: 1px solid var(--line); }
#cronos-root .vinc-seg-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#cronos-root .vinc-seg-cd { font-size: 11px; font-family: 'Geist Mono', monospace; color: var(--ink-3); }
#cronos-root .vinc-seg-moto { font-size: 13px; color: var(--ink-1, var(--ink)); }
#cronos-root .vinc-seg-acts { display: flex; gap: 5px; flex-shrink: 0; }
#cronos-root .vinc-seg-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 13px; }
#cronos-root .vinc-seg-btn:hover { background: rgba(0,0,0,.05); }
#cronos-root .vinc-seg-btn.danger { color: #B3261E; border-color: rgba(179,38,30,.3); }
#cronos-root .vinc-seg-empty { font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
#cronos-root .vinc-seg-add { width: 100%; padding: 9px; border-radius: 9px; border: 1px dashed var(--line); background: transparent; color: var(--accent-deep, var(--accent)); font-size: 13px; font-weight: 600; cursor: pointer; }
#cronos-root .vinc-seg-add:hover { background: rgba(0,0,0,.03); }
#cronos-root .vinc-seg-form { margin-top: 6px; padding: 12px; border-radius: 10px; background: rgba(0,0,0,.03); border: 1px solid var(--line); }
#cronos-root .vinc-seg-formacts { display: flex; gap: 8px; margin-top: 4px; }
#cronos-root .cad-field { margin-bottom: 12px; }
#cronos-root .cad-field label { display: block; font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 5px; }
#cronos-root .cad-input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: var(--surface); color: var(--ink); }
#cronos-root .cad-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#cronos-root .cad-fhint { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
#cronos-root .cad-modal-err { background: #FCE9E6; border: 1px solid #E9B7B0; color: #B3261E; border-radius: 8px; padding: 9px 12px; margin: 0 22px; font-size: 13px; }
#cronos-root .cad-modal-ok { background: #E7F3E9; border: 1px solid #B7D9BE; color: #2E6B3A; border-radius: 8px; padding: 9px 12px; margin: 10px 22px 0; font-size: 13px; }
#cronos-root .cad-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; flex-wrap: wrap; }

/* ── Modal de prévia da importação (novos × atualizações com diff) ── */
#cronos-root .cad-import-modal .cad-modal-box { max-width: 680px; }
#cronos-root .imp-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
#cronos-root .imp-chip { font-size: 12.5px; padding: 5px 12px; border-radius: 100px; font-weight: 600; }
#cronos-root .imp-chip.novo { background: #E7F3E9; color: #2E6B3A; }
#cronos-root .imp-chip.atu { background: var(--warn-soft); color: var(--accent-deep); }
#cronos-root .imp-chip.err { background: #FCE9E6; color: #B3261E; }
#cronos-root .imp-avisos { background: var(--warn-soft); border: 1px solid #F0C9A8; border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; font-size: 12.5px; color: var(--accent-deep); line-height: 1.6; }
#cronos-root .imp-sec { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
#cronos-root .imp-sec-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; background: var(--surface); user-select: none; }
#cronos-root .imp-sec-head:hover { background: var(--elevated); }
#cronos-root .imp-sec-caret { transition: transform .15s; color: var(--ink-3); font-size: 11px; }
#cronos-root .imp-sec.open .imp-sec-caret { transform: rotate(90deg); }
#cronos-root .imp-sec-tit { font-weight: 600; font-size: 13.5px; color: var(--ink); flex: 1; }
#cronos-root .imp-sec-n { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-2); background: var(--elevated); border: 1px solid var(--line); border-radius: 100px; padding: 1px 9px; }
#cronos-root .imp-sec-body { display: none; padding: 6px 14px 12px; max-height: 46vh; overflow-y: auto; }
#cronos-root .imp-sec.open .imp-sec-body { display: block; }
#cronos-root .imp-row { display: flex; align-items: baseline; gap: 9px; padding: 5px 0; border-bottom: 1px solid var(--line-2, #EFE7D9); font-size: 13px; }
#cronos-root .imp-row:last-child { border-bottom: none; }
#cronos-root .imp-ln { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--ink-3); background: var(--surface); border-radius: 5px; padding: 1px 6px; flex-shrink: 0; }
#cronos-root .imp-lbl { color: var(--ink); }
#cronos-root .imp-row.err .imp-lbl { color: #B3261E; }
#cronos-root .imp-upd { padding: 8px 0; border-bottom: 1px solid var(--line-2, #EFE7D9); }
#cronos-root .imp-upd:last-child { border-bottom: none; }
#cronos-root .imp-det { margin: 6px 0 0 30px; display: flex; flex-direction: column; gap: 4px; }
#cronos-root .imp-diff { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto 1fr; align-items: baseline; gap: 8px; font-size: 12.5px; }
#cronos-root .imp-campo { font-family: 'Geist Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
#cronos-root .imp-de { color: var(--ink-3); text-decoration: line-through; word-break: break-word; }
#cronos-root .imp-arrow { color: var(--accent); }
#cronos-root .imp-para { color: #2E6B3A; font-weight: 600; word-break: break-word; }
#cronos-root .imp-nodiff { font-size: 12px; color: var(--ink-3); margin-left: 30px; font-style: italic; }
#cronos-root .imp-cap { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
#cronos-root .imp-btn-all { border-color: #E9B7B0; color: #B3261E; }

/* Painel de pendências */
#cronos-root .pend-head { font-size: 14px; color: var(--ink-2); margin-bottom: 14px; line-height: 1.5; }
#cronos-root .pend-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-radius: 10px; margin-bottom: 8px; font-size: 13px; }
#cronos-root .pend-item.atencao { background: var(--warn-soft); border: 1px solid var(--warn); color: var(--accent-deep); }
#cronos-root .pend-item.aviso { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }

/* Chat IA dos cadastros */
#cronos-root .ia-intro { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 14px; }
#cronos-root .ia-textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; background: var(--surface); color: var(--ink); font-family: inherit; }
#cronos-root .ia-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#cronos-root .ia-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
#cronos-root .ia-diff-head { font-size: 13px; color: var(--ink-2); margin: 16px 0 10px; line-height: 1.5; }
#cronos-root .ia-avisos { background: var(--warn-soft); border: 1px solid var(--warn); color: var(--accent-deep); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 12px; }
#cronos-root .ia-op { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; background: var(--elevated); }
#cronos-root .ia-op-head { font-weight: 600; font-size: 13px; }
#cronos-root .ia-op-fields { font-size: 12px; color: var(--ink-3); margin-top: 3px; font-family: 'Geist Mono', monospace; word-break: break-word; }
#cronos-root .ia-motivo { font-size: 12px; color: var(--ink-2); margin-top: 4px; font-style: italic; }
#cronos-root .ia-sensivel { font-size: 10px; background: var(--warn-soft); color: var(--warn); padding: 1px 7px; border-radius: 100px; font-family: 'Geist Mono', monospace; }

/* Wizard guiado de cadastro */
#cronos-root .wizard-box { max-width: 560px; }
#cronos-root .cw-steps { display: flex; gap: 4px; padding: 14px 22px 0; }
#cronos-root .cw-step { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 5px; position: relative; }
#cronos-root .cw-step:not(:last-child)::after { content: ''; position: absolute; top: 6px; left: 50%; width: 100%; height: 2px; background: var(--line); }
#cronos-root .cw-step.done:not(:last-child)::after { background: var(--green); }
#cronos-root .cw-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--line); position: relative; z-index: 1; }
#cronos-root .cw-step.done .cw-dot { background: var(--green); }
#cronos-root .cw-step.active .cw-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#cronos-root .cw-step span:last-child { font-size: 10px; color: var(--ink-3); }
#cronos-root .cw-step.active span:last-child { color: var(--ink); font-weight: 600; }
#cronos-root .cw-foot { justify-content: space-between; }
#cronos-root .cw-foot-right { display: flex; gap: 8px; }

/* Upload na aba IA */
#cronos-root .ia-file-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
#cronos-root .ia-file-name { font-size: 11px; color: var(--ink-3); font-family: 'Geist Mono', monospace; }

/* ═══════════ Mapa do sistema (esquema do fluxo) ═══════════ */
#cronos-root .mapa-shell { max-width: 920px; margin: 0 auto; padding: 36px 20px 80px; }
#cronos-root .mapa-head { margin-bottom: 30px; }
#cronos-root .mapa-kicker { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .22em; color: var(--accent); margin-bottom: 8px; }
#cronos-root .mapa-head h1 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 40px; line-height: 1.05; margin: 0 0 10px; }
#cronos-root .mapa-head h1 em { font-style: italic; color: var(--accent); }
#cronos-root .mapa-lead { font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 640px; }

#cronos-root .mflow { position: relative; }
#cronos-root .mflow-stage { display: flex; gap: 16px; align-items: stretch; }
#cronos-root .mflow-node { flex: 0 0 48px; display: flex; flex-direction: column; align-items: center; }
#cronos-root .mflow-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--elevated); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 4px 14px rgba(80,60,40,.06); }
#cronos-root .mflow-card { flex: 1; background: var(--elevated); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: 0 6px 22px rgba(80,60,40,.05); }
#cronos-root .mflow-tag { font-family: 'Geist Mono', monospace; font-size: 9.5px; letter-spacing: .18em; color: var(--accent); margin-bottom: 5px; }
#cronos-root .mflow-titulo { font-family: 'Instrument Serif', serif; font-size: 22px; font-weight: 400; margin-bottom: 7px; }
#cronos-root .mflow-titulo em { color: var(--accent); font-style: italic; }
#cronos-root .mflow-faz { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 12px; }
#cronos-root .mflow-bd-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
#cronos-root .mflow-bd-lbl { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
#cronos-root .mflow-bd { font-family: 'Geist Mono', monospace; font-size: 11px; background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent-line, #F0D8C4); border-radius: 100px; padding: 3px 10px; cursor: pointer; }
#cronos-root .mflow-bd:hover { background: var(--accent); color: #fff; }
#cronos-root .mflow-nuances { margin: 0; padding-left: 18px; }
#cronos-root .mflow-nuances li { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 5px 0; }
#cronos-root .mflow-nuances b { color: var(--ink); }
#cronos-root .mflow-meta { font-size: 12px; border-radius: 8px; padding: 7px 11px; margin-top: 10px; line-height: 1.45; }
#cronos-root .mflow-meta.externo { background: var(--blue-soft); color: var(--blue); }
#cronos-root .mflow-meta.falta { background: var(--warn-soft); color: var(--accent-deep); }
#cronos-root .mflow-arrow { color: var(--line); font-size: 22px; text-align: center; width: 48px; line-height: 1; margin: 4px 0; }

/* Base: cadastros */
#cronos-root .mflow-base { margin-top: 34px; padding-top: 26px; border-top: 1px dashed var(--line); }
#cronos-root .mflow-base-title { font-family: 'Instrument Serif', serif; font-size: 20px; margin-bottom: 14px; }
#cronos-root .mflow-base-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
#cronos-root .mflow-base-card { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; transition: border-color .15s; }
#cronos-root .mflow-base-card:hover { border-color: var(--accent); }
#cronos-root .mb-n { font-family: 'Instrument Serif', serif; font-size: 26px; color: var(--accent); line-height: 1; }
#cronos-root .mb-t { font-weight: 600; font-size: 13px; margin: 4px 0 3px; }
#cronos-root .mb-d { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }

/* Legenda */
#cronos-root .mflow-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; font-size: 11.5px; color: var(--ink-3); }
#cronos-root .mflow-legenda .ll { font-family: 'Geist Mono', monospace; }

/* ════════════════════════════════════════════════════════════════════════
   MAPA DO SISTEMA — micro-animações (fluxo vivo). Só transform/opacity (GPU).
   Cada estágio entra em cascata; o nó respira; a seta escorre; e cada etapa
   tem uma animação-assinatura (e-mail voa, confirmação volta, caminhão anda).
   ════════════════════════════════════════════════════════════════════════ */

/* Entrada em cascata dos estágios (stagger via --mi index, setado no JS). */
@keyframes mflowStageIn {
  from { opacity: 0; transform: translateY(22px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
#cronos-root .mflow-stage {
  opacity: 0;
  animation: mflowStageIn .62s cubic-bezier(.22,.9,.3,1) forwards;
  animation-delay: calc(var(--mi, 0) * 0.09s);
}

/* O nó (ícone) "respira" e tem um halo que pulsa de leve. */
@keyframes mflowNodeBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.04); }
}
@keyframes mflowHalo {
  0%   { transform: scale(.75); opacity: .55; }
  70%  { opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
#cronos-root .mflow-ic {
  position: relative;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, border-color .35s;
  animation: mflowNodeBreath 4.5s ease-in-out infinite;
  animation-delay: calc(var(--mi, 0) * 0.4s);
  z-index: 1;
}
#cronos-root .mflow-ic::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: mflowHalo 3.8s ease-out infinite;
  animation-delay: calc(0.6s + var(--mi, 0) * 0.5s);
  pointer-events: none;
}

/* A linha vertical do nó vira um "trilho" por onde a energia escorre. */
#cronos-root .mflow-node { position: relative; }
#cronos-root .mflow-node::before {
  content: ''; position: absolute; top: 52px; bottom: -22px; left: 50%;
  width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--accent) 0%, transparent 65%);
  background-size: 100% 200%;
  opacity: .35;
  animation: mflowRailFlow 2.4s linear infinite;
}
/* Energia ESCORRE DE CIMA PRA BAIXO (segue o fluxo: um estágio leva ao próximo). */
@keyframes mflowRailFlow {
  from { background-position: 0 100%; }
  to   { background-position: 0 -100%; }
}
#cronos-root .mflow-stage:last-of-type .mflow-node::before { display: none; }

/* Card: hover "lift" elegante (como a Apple) + brilho que cruza ao passar. */
#cronos-root .mflow-card {
  position: relative; overflow: hidden;
  transition: transform .4s cubic-bezier(.22,.9,.3,1), box-shadow .4s, border-color .3s;
}
#cronos-root .mflow-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(80,60,40,.12);
  border-color: var(--accent-line, #F0D8C4);
}
#cronos-root .mflow-card::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
#cronos-root .mflow-card:hover::before {
  animation: mflowSheen .9s ease-out;
}
@keyframes mflowSheen {
  from { left: -60%; opacity: 0; }
  20%  { opacity: 1; }
  to   { left: 130%; opacity: 0; }
}

/* Seta entre estágios: escorre para baixo com fade pulsante. */
#cronos-root .mflow-arrow {
  position: relative; overflow: visible;
}
#cronos-root .mflow-arrow span {
  display: inline-block;
  animation: mflowArrowDrop 1.8s ease-in-out infinite;
  color: var(--accent); opacity: .5;
}
@keyframes mflowArrowDrop {
  0%   { transform: translateY(-4px); opacity: 0; }
  40%  { opacity: .7; }
  100% { transform: translateY(5px); opacity: 0; }
}
/* "Pacote" que viaja pela seta (e-mail/dado indo ao próximo estágio). */
#cronos-root .mflow-arrow::after {
  content: ''; position: absolute; left: 50%; top: -2px;
  width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: mflowParcel 2.2s cubic-bezier(.5,0,.5,1) infinite;
  opacity: 0;
}
@keyframes mflowParcel {
  0%   { top: -2px; opacity: 0; transform: scale(.6); }
  15%  { opacity: 1; transform: scale(1); }
  85%  { opacity: 1; transform: scale(1); }
  100% { top: 30px; opacity: 0; transform: scale(.6); }
}

/* ── Animações-assinatura por etapa (classe mflow-anim no card via JS) ── */
/* Camada de palco para a animação-assinatura no rodapé do card. */
#cronos-root .mflow-stageplay {
  position: relative; height: 72px; margin-top: 16px;
  border-top: 1px dashed var(--line); padding-top: 14px;
  font-size: 12.5px; color: var(--ink-3); overflow: hidden;
}
/* Rótulo descritivo da cena (canto inferior-direito), legível. */
#cronos-root .mflow-stageplay > span:last-child {
  position: absolute; right: 4px; bottom: 4px; font-size: 11.5px;
  color: var(--ink-3); font-style: italic;
}

/* DISPARA — e-mail voando para fora (grande). */
#cronos-root .mfx-mail {
  position: absolute; left: 4px; top: 16px; font-size: 30px; line-height: 1;
  filter: drop-shadow(0 3px 5px rgba(80,60,40,.18));
  animation: mfxMailFly 3.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes mfxMailFly {
  0%   { left: 0; opacity: 0; transform: translateY(0) rotate(0); }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 90%; opacity: 0; transform: translateY(-18px) rotate(10deg); }
}
#cronos-root .mfx-trail {
  position: absolute; top: 32px; left: 0; height: 4px; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-soft));
  animation: mfxTrail 3.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes mfxTrail { 0%,12%{width:0;opacity:0} 50%{width:62%;opacity:.85} 100%{width:0;opacity:0;left:88%} }

/* RESPOSTA / RECEBIMENTO — confirmação ✓ voltando + anel de sucesso. */
#cronos-root .mfx-back {
  position: absolute; right: 4px; top: 14px; font-size: 26px; color: var(--green);
  animation: mfxBack 3.2s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes mfxBack {
  0%   { right: 88%; opacity: 0; transform: scale(.6); }
  20%  { opacity: 1; }
  75%  { right: 4px; opacity: 1; transform: scale(1); }
  85%  { transform: scale(1.4); }
  100% { right: 4px; opacity: 0; transform: scale(1); }
}
#cronos-root .mfx-ring {
  position: absolute; right: 10px; top: 20px; width: 18px; height: 18px;
  border: 2.5px solid var(--green); border-radius: 50%; opacity: 0;
  animation: mfxRing 3.2s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes mfxRing { 0%,72%{opacity:0;transform:scale(.4)} 82%{opacity:.8;transform:scale(1)} 100%{opacity:0;transform:scale(2.6)} }

/* EXECUÇÃO — caminhão andando pela rota (grande, virado p/ a DIREITA), paradas acendem. */
#cronos-root .mfx-route { position: absolute; left: 0; right: 0; top: 44px; height: 3px; border-radius: 3px; background: var(--line); }
#cronos-root .mfx-route i {
  position: absolute; top: -4px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--ink-3);
  animation: mfxStop 4.4s linear infinite;
}
#cronos-root .mfx-route i:nth-child(1) { left: 16%; animation-delay: .7s; }
#cronos-root .mfx-route i:nth-child(2) { left: 42%; animation-delay: 1.6s; }
#cronos-root .mfx-route i:nth-child(3) { left: 68%; animation-delay: 2.5s; }
#cronos-root .mfx-route i:nth-child(4) { left: 92%; animation-delay: 3.3s; }
@keyframes mfxStop { 0%,100%{background:var(--surface);border-color:var(--ink-3);transform:scale(1)} 50%{background:var(--green);border-color:var(--green);transform:scale(1.5)} }
/* O 🚚 nativo aponta p/ a ESQUERDA → espelha (scaleX -1) p/ "olhar" pra frente (direita).
   Movimento é por `left` (não transform), p/ não brigar com o scaleX fixo. */
#cronos-root .mfx-truck {
  position: absolute; top: 8px; left: 0; font-size: 30px; line-height: 1;
  transform: scaleX(-1);
  filter: drop-shadow(0 3px 4px rgba(80,60,40,.2));
  animation: mfxTruck 4.4s cubic-bezier(.45,.05,.55,.95) infinite, mfxTruckBob .9s ease-in-out infinite;
}
@keyframes mfxTruck {
  0%   { left: -5%; opacity: 1; }
  92%  { left: 92%; opacity: 1; }
  100% { left: 92%; opacity: .35; }
}
/* "Suspensão": sobe/desce de leve enquanto anda (mantém o espelhamento). */
@keyframes mfxTruckBob {
  0%,100% { transform: scaleX(-1) translateY(0); }
  50%     { transform: scaleX(-1) translateY(-2px); }
}

/* IMPORTA — linhas da planilha entrando (stack, maiores). */
#cronos-root .mfx-rows { position: absolute; left: 4px; top: 18px; display: flex; flex-direction: column; gap: 6px; }
#cronos-root .mfx-rows b {
  display: block; height: 6px; width: 0; border-radius: 3px; background: var(--accent-soft);
  animation: mfxRow 3.2s ease-in-out infinite;
}
#cronos-root .mfx-rows b:nth-child(1){animation-delay:0s}
#cronos-root .mfx-rows b:nth-child(2){animation-delay:.3s}
#cronos-root .mfx-rows b:nth-child(3){animation-delay:.6s}
@keyframes mfxRow { 0%{width:0;opacity:0} 30%{width:120px;opacity:1} 80%{width:120px;opacity:1} 100%{width:120px;opacity:.18} }

/* RESOLVE — alvo "encaixando" (check) com leve giro (grande). */
#cronos-root .mfx-match { position: absolute; left: 8px; top: 16px; font-size: 28px; animation: mfxMatch 2.8s ease-in-out infinite; }
@keyframes mfxMatch { 0%{opacity:.25;transform:scale(.8) rotate(-14deg)} 50%{opacity:1;transform:scale(1.12) rotate(0)} 100%{opacity:.25;transform:scale(.8) rotate(-14deg)} }

/* CONSOLIDA — peças se agrupando (grandes). */
#cronos-root .mfx-merge { position: absolute; top: 18px; font-size: 26px; animation: mfxMerge 3.2s ease-in-out infinite; }
#cronos-root .mfx-merge.a { left: 6px; }
#cronos-root .mfx-merge.b { left: 74px; animation-direction: reverse; }
@keyframes mfxMerge { 0%,100%{transform:translateX(0);opacity:.6} 50%{transform:translateX(32px);opacity:1} }

/* ── HANDSHAKE bidirecional: pedido VAI (→) e confirmação VOLTA (←) ──
   Usado em toda ponta com troca real: confirmação de data, contraproposta,
   recebimento (filial + CD), aviso ao motorista. Mostra os DOIS sentidos. */
#cronos-root .mfx-bridge {
  position: relative; left: 0; right: 0; top: 32px; height: 4px; border-radius: 3px;
  margin: 0 6px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
}
/* Rótulos das duas pontas (ex.: "Sistema" ↔ "Farmácia"). */
#cronos-root .mfx-bridge .mfx-end {
  position: absolute; top: -22px; font-size: 11.5px; letter-spacing: .03em;
  color: var(--ink-2); font-family: 'Geist Mono', monospace; white-space: nowrap;
}
#cronos-root .mfx-bridge .mfx-end::before {
  content: '●'; font-size: 8px; vertical-align: middle; margin-right: 4px; color: var(--accent);
}
#cronos-root .mfx-bridge .mfx-end.l { left: 0; }
#cronos-root .mfx-bridge .mfx-end.r { right: 0; }
/* Partícula de IDA (pedido/link) — sai da esquerda (sistema) p/ a direita. */
#cronos-root .mfx-go {
  position: absolute; top: -13px; left: 0; font-size: 24px; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(80,60,40,.18));
  animation: mfxGo 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes mfxGo {
  0%   { left: 2%; opacity: 0; transform: scale(.7); }
  10%  { opacity: 1; transform: scale(1); }
  45%  { left: 88%; opacity: 1; }
  55%, 100% { left: 88%; opacity: 0; transform: scale(.7); }
}
/* Partícula de VOLTA (✓ confirmação) — chega da direita p/ a esquerda, DEPOIS da ida. */
#cronos-root .mfx-return {
  position: absolute; top: -13px; right: 0; font-size: 24px; line-height: 1; font-weight: 700; color: var(--green);
  animation: mfxReturn 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes mfxReturn {
  0%, 50% { right: 86%; opacity: 0; transform: scale(.6); }
  58% { opacity: 1; transform: scale(1); }
  92% { right: 2%; opacity: 1; }
  97% { transform: scale(1.45); }
  100% { right: 2%; opacity: 0; transform: scale(1); }
}
/* Pulso verde na ponta de origem quando a confirmação chega (fecha o ciclo). */
#cronos-root .mfx-bridge::after {
  content: ''; position: absolute; left: -3px; top: -5px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--green); opacity: 0;
  animation: mfxLanded 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes mfxLanded { 0%,90%{opacity:0;transform:scale(.5)} 95%{opacity:.7;transform:scale(1.1)} 100%{opacity:0;transform:scale(2)} }
/* Duas voltas (recebimento: filial + CD) — 2ª partícula com atraso, logo abaixo. */
#cronos-root .mfx-return.two { animation-delay: .55s; top: 5px; opacity: .92; }

/* Loop da contraproposta: seta curva que retorna ao disparo. */
#cronos-root .mfx-loop { position: absolute; right: 2px; top: 14px; font-size: 22px; color: var(--accent);
  animation: mfxLoop 3s ease-in-out infinite; }
@keyframes mfxLoop { 0%,100%{transform:rotate(0);opacity:.5} 50%{transform:rotate(-180deg);opacity:1} }

/* Driver status: itens entram em cascata também. */
#cronos-root .mds-item { animation: mflowStageIn .5s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: calc(var(--di, 0) * 0.045s); }

/* Acessibilidade: respeita quem pediu menos movimento (padrão Apple). */
@media (prefers-reduced-motion: reduce) {
  #cronos-root .mflow-stage,
  #cronos-root .mflow-ic,
  #cronos-root .mflow-ic::after,
  #cronos-root .mflow-node::before,
  #cronos-root .mflow-arrow span,
  #cronos-root .mflow-arrow::after,
  #cronos-root .mfx-mail, #cronos-root .mfx-trail, #cronos-root .mfx-back, #cronos-root .mfx-ring,
  #cronos-root .mfx-truck, #cronos-root .mfx-route i, #cronos-root .mfx-rows b,
  #cronos-root .mfx-match, #cronos-root .mfx-merge, #cronos-root .mds-item,
  #cronos-root .mfx-go, #cronos-root .mfx-return, #cronos-root .mfx-bridge::after, #cronos-root .mfx-loop,
  #cronos-root .dfx-link, #cronos-root .dfx-trip, #cronos-root .dfx-finger, #cronos-root .dfx-ok,
  #cronos-root .dfx-done, #cronos-root .dfx-sos, #cronos-root .dfx-sos-wave, #cronos-root .dfx-office,
  #cronos-root .dfx-bubble, #cronos-root .dfx-gps {
    animation: none !important;
  }
  /* Sem movimento: as cenas mostram o estado FINAL (legível e fiel), não o meio. */
  #cronos-root .dfx-trip, #cronos-root .dfx-done,
  #cronos-root .dfx-office, #cronos-root .dfx-bubble.bot, #cronos-root .dfx-gps { opacity: 1 !important; }
  #cronos-root .dfx-link, #cronos-root .dfx-finger { opacity: 0 !important; }
  #cronos-root .mflow-stage { opacity: 1; }
  #cronos-root .mflow-card:hover { transform: none; }
  /* Caminhão parado: mantém o espelhamento (olhando p/ a direita), sem o bob. */
  #cronos-root .mfx-truck { transform: scaleX(-1); left: 40%; }
}

/* Status do app do motorista (na tela Mapa do sistema) — agora em cards-tema, no
   mesmo padrão dos cards do fluxo (mflow-stage/card). Aqui só os itens (lista com
   selo dentro do card) e as cenas (dfx-*). */
#cronos-root .mflow-driver { margin-top: 34px; padding-top: 26px; border-top: 1px dashed var(--line); }
#cronos-root .mflow-driver-lead { color: var(--ink-3); font-size: 13.5px; line-height: 1.5; margin: 6px 0 18px; max-width: 640px; }
/* Lista de itens dentro do card-tema (reusa .mflow-nuances; selo colorido por status). */
#cronos-root .mds-list { list-style: none; padding: 0; margin: 12px 0 0; }
#cronos-root .mds-li { display: flex; gap: 9px; align-items: flex-start; padding: 7px 10px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 6px; font-size: 12.8px; color: var(--ink-2); line-height: 1.45; }
#cronos-root .mds-li b { color: var(--ink); font-weight: 600; }
#cronos-root .mds-li .mds-selo { font-size: 13px; line-height: 1.3; flex: 0 0 auto; }
#cronos-root .mds-li.mds-ok { border-color: rgba(77,122,77,0.28); }
#cronos-root .mds-li.mds-meio { background: var(--warn-soft); border-color: transparent; }
#cronos-root .mds-li.mds-falta { border-style: dashed; opacity: .92; }

/* ───────────── Cenas (simulações) do app do motorista — dfx-* ─────────────
   Mesmo estilo leve/GPU das cenas do fluxo (mfx-*): só transform/opacity, em loop,
   dentro do palco .mflow-stageplay (72px). Respeitam prefers-reduced-motion abaixo. */
/* Celular-base das cenas: moldura + tela escura. */
#cronos-root .dfx-phone { position: absolute; left: 6px; top: 8px; width: 116px; height: 58px; border-radius: 9px; background: #2B2622; border: 2px solid #514a42; box-shadow: 0 3px 8px rgba(80,60,40,.18); overflow: hidden; }
#cronos-root .dfx-screen { position: absolute; inset: 3px; border-radius: 5px; background: linear-gradient(160deg,#fcfaf4,#efe9dd); overflow: hidden; font-size: 8.5px; color: var(--ink); }
/* CENA 1 — acesso por link: dedo toca o link, a tela troca p/ a viagem. */
#cronos-root .dfx-link { position: absolute; left: 8px; top: 9px; color: var(--accent); font-size: 9px; animation: dfxLinkTap 4s ease-in-out infinite; }
#cronos-root .dfx-trip { position: absolute; left: 8px; top: 8px; font-size: 8px; line-height: 1.5; font-weight: 700; opacity: 0; animation: dfxTripShow 4s ease-in-out infinite; }
#cronos-root .dfx-finger { position: absolute; font-size: 16px; left: 30px; top: 4px; opacity: 0; animation: dfxFinger 4s ease-in-out infinite; }
@keyframes dfxLinkTap { 0%,40%{opacity:1} 48%,100%{opacity:0} }
@keyframes dfxTripShow { 0%,50%{opacity:0} 60%,92%{opacity:1} 100%{opacity:0} }
@keyframes dfxFinger { 0%,18%{opacity:0;transform:translate(6px,6px)} 30%,42%{opacity:1;transform:translate(0,0)} 46%{transform:translate(0,-3px)} 54%,100%{opacity:0} }
/* CENA 2 — baixa num toque: dedo no "Entregue", surge o ✓. */
#cronos-root .dfx-card { position: absolute; left: 7px; top: 6px; font-size: 8px; line-height: 1.4; }
#cronos-root .dfx-card em { color: var(--ink-3); font-style: normal; }
#cronos-root .dfx-btns { position: absolute; left: 7px; bottom: 6px; display: flex; gap: 4px; align-items: center; }
#cronos-root .dfx-btns b { background: var(--elevated); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; font-size: 8px; font-weight: 600; }
#cronos-root .dfx-btns .dfx-ok { background: rgba(127,167,122,.18); border-color: rgba(127,167,122,.5); color: var(--green,#4E7A48); animation: dfxOkPress 3.4s ease-in-out infinite; }
#cronos-root .dfx-finger.e { left: 14px; bottom: 2px; top: auto; animation: dfxFingerE 3.4s ease-in-out infinite; }
#cronos-root .dfx-done { position: absolute; right: 8px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--green,#4E7A48); color: #fff; font-size: 10px; text-align: center; line-height: 16px; opacity: 0; transform: scale(.4); animation: dfxDone 3.4s ease-in-out infinite; }
@keyframes dfxOkPress { 0%,40%,60%,100%{transform:scale(1)} 50%{transform:scale(.9)} }
@keyframes dfxFingerE { 0%,22%{opacity:0;transform:translateY(6px)} 38%,48%{opacity:1;transform:translateY(0)} 52%{transform:translateY(-2px)} 62%,100%{opacity:0} }
@keyframes dfxDone { 0%,55%{opacity:0;transform:scale(.4)} 66%{opacity:1;transform:scale(1.15)} 78%,92%{opacity:1;transform:scale(1)} 100%{opacity:0} }
/* CENA 4 — SOS: triângulo pulsando + onda; chega ao "escritório". */
#cronos-root .dfx-sos { position: absolute; left: 16px; top: 18px; font-size: 30px; transform-origin: center; animation: dfxSosPulse 1.8s ease-in-out infinite; }
#cronos-root .dfx-sos-wave { position: absolute; left: 22px; top: 24px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: dfxSosWave 1.8s ease-out infinite; }
#cronos-root .dfx-office { position: absolute; right: 10px; top: 26px; font-size: 11px; color: var(--ink-2); opacity: 0; animation: dfxOffice 1.8s ease-in-out infinite; }
@keyframes dfxSosPulse { 0%,100%{transform:scale(1) rotate(-4deg);filter:none} 50%{transform:scale(1.16) rotate(4deg);filter:drop-shadow(0 0 6px rgba(184,74,26,.6))} }
@keyframes dfxSosWave { 0%{opacity:.7;transform:scale(.5)} 70%{opacity:0;transform:scale(3.4)} 100%{opacity:0} }
@keyframes dfxOffice { 0%,45%{opacity:0;transform:translateX(8px)} 60%,90%{opacity:1;transform:translateX(0)} 100%{opacity:.3} }
/* CENA 6 — futuro: chat com bot + pino de GPS surgindo. */
#cronos-root .dfx-chat { position: absolute; left: 7px; top: 6px; display: flex; flex-direction: column; gap: 4px; }
#cronos-root .dfx-bubble { font-size: 8px; padding: 3px 6px; border-radius: 8px; max-width: 92px; }
#cronos-root .dfx-bubble.in { align-self: flex-start; background: var(--elevated); border: 1px solid var(--line); animation: dfxBub1 4.4s ease-in-out infinite; }
#cronos-root .dfx-bubble.bot { align-self: flex-end; background: rgba(123,160,201,.18); border: 1px solid rgba(123,160,201,.4); opacity: 0; animation: dfxBub2 4.4s ease-in-out infinite; }
#cronos-root .dfx-gps { position: absolute; right: 14px; top: 18px; font-size: 22px; opacity: 0; animation: dfxGps 4.4s ease-in-out infinite; }
@keyframes dfxBub1 { 0%,10%{opacity:0;transform:translateY(4px)} 22%,100%{opacity:1;transform:translateY(0)} }
@keyframes dfxBub2 { 0%,42%{opacity:0;transform:translateY(4px)} 56%,100%{opacity:1;transform:translateY(0)} }
@keyframes dfxGps { 0%,60%{opacity:0;transform:translateY(-6px)} 74%{opacity:1;transform:translateY(0)} 86%{transform:translateY(-2px)} 100%{opacity:.7;transform:translateY(0)} }

/* ── ROADMAP (o que vamos construir): cenas rbx-* — mesmo palco 72px, só transform/opacity ── */
/* Nó "em breve": tracejado, mais apagado, p/ distinguir do que já existe */
#cronos-root .mflow-node-soon .mflow-ic { border-style: dashed; opacity: .92; }
#cronos-root .mflow-roadmap .mflow-tag { color: var(--accent); }
/* Alerta "nada aqui é promessa" — depende de viabilidade após fechar o sistema de e-mails */
#cronos-root .mflow-roadmap-alert { margin: 4px 0 22px; padding: 13px 16px; border-radius: 11px; background: rgba(202,161,77,.12); border: 1px solid rgba(202,161,77,.45); color: var(--ink-1); font-size: 13.5px; line-height: 1.6; }

/* CENA 1 — robô preenchendo o portal sozinho */
#cronos-root .rbx-portal { position: absolute; inset: 0; }
#cronos-root .rbx-win { position: absolute; left: 10px; top: 8px; width: 120px; height: 56px; border-radius: 7px; background: linear-gradient(160deg,#fcfaf4,#efe9dd); border: 1px solid var(--line); box-shadow: 0 3px 8px rgba(80,60,40,.16); overflow: hidden; }
#cronos-root .rbx-bar { position: absolute; left: 0; top: 0; right: 0; height: 12px; background: var(--elevated); border-bottom: 1px solid var(--line); font-size: 6.5px; color: var(--ink-3); line-height: 12px; padding-left: 16px; }
#cronos-root .rbx-bar i { position: absolute; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: #d8612a55; }
#cronos-root .rbx-bar i:nth-child(1){ left: 4px } #cronos-root .rbx-bar i:nth-child(2){ left: 10px; background:#caa14d55 } #cronos-root .rbx-bar i:nth-child(3){ left: 16px; background:#7fa77a55 }
#cronos-root .rbx-row { position: absolute; left: 9px; height: 6px; border-radius: 3px; background: var(--elevated); border: 1px solid var(--line); transform-origin: left center; transform: scaleX(0); }
#cronos-root .rbx-row.r1 { top: 20px; width: 64px; animation: rbxFill 4.2s ease-in-out infinite; }
#cronos-root .rbx-row.r2 { top: 30px; width: 80px; animation: rbxFill 4.2s ease-in-out .5s infinite; }
#cronos-root .rbx-row.r3 { top: 40px; width: 48px; animation: rbxFill 4.2s ease-in-out 1s infinite; }
#cronos-root .rbx-ok { position: absolute; right: 8px; bottom: 7px; font-size: 8px; font-weight: 700; color: var(--green,#4E7A48); background: rgba(127,167,122,.18); border: 1px solid rgba(127,167,122,.5); border-radius: 5px; padding: 1px 5px; opacity: 0; transform: scale(.5); animation: rbxOk 4.2s ease-in-out infinite; }
#cronos-root .rbx-bot { position: absolute; right: 6px; top: 24px; font-size: 22px; animation: rbxBot 4.2s ease-in-out infinite; }
@keyframes rbxFill { 0%,8%{transform:scaleX(0)} 26%,82%{transform:scaleX(1)} 100%{transform:scaleX(1);opacity:.6} }
@keyframes rbxOk { 0%,70%{opacity:0;transform:scale(.5)} 80%{opacity:1;transform:scale(1.12)} 92%{opacity:1;transform:scale(1)} 100%{opacity:0} }
@keyframes rbxBot { 0%,100%{transform:translateY(0) rotate(-4deg)} 25%{transform:translateY(-3px) rotate(3deg)} 60%{transform:translateY(-1px) rotate(-2deg)} }

/* CENA 2 — carreta no mapa com GPS + ETA */
#cronos-root .rbx-map { position: absolute; inset: 0; }
#cronos-root .rbx-route { position: absolute; left: 12px; top: 40px; width: 116px; height: 0; border-top: 2px dashed #caa14d88; }
#cronos-root .rbx-truck { position: absolute; top: 26px; font-size: 22px; animation: rbxTruck 5s linear infinite; }
#cronos-root .rbx-pin { position: absolute; right: 16px; top: 14px; font-size: 17px; transform-origin: bottom center; animation: rbxPin 1.6s ease-in-out infinite; }
#cronos-root .rbx-eta { position: absolute; right: 8px; top: 4px; font-size: 8px; font-weight: 700; color: var(--ink-2); background: var(--elevated); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; opacity: 0; animation: rbxEta 5s ease-in-out infinite; }
@keyframes rbxTruck { 0%{transform:translateX(8px)} 100%{transform:translateX(110px)} }
@keyframes rbxPin { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-4px) scale(1.12)} }
@keyframes rbxEta { 0%,30%{opacity:0;transform:translateY(-4px)} 45%,85%{opacity:1;transform:translateY(0)} 100%{opacity:.4} }

/* CENA 3 — WhatsApp com robô de IA */
#cronos-root .rbx-zap { position: absolute; left: 8px; top: 4px; right: 8px; display: flex; flex-direction: column; gap: 3px; }
#cronos-root .rbx-b { font-size: 7.5px; padding: 2px 6px; border-radius: 8px; max-width: 78%; line-height: 1.3; opacity: 0; }
#cronos-root .rbx-b.in { align-self: flex-start; background: var(--elevated); border: 1px solid var(--line); }
#cronos-root .rbx-b.bot { align-self: flex-end; background: rgba(123,160,201,.18); border: 1px solid rgba(123,160,201,.4); }
#cronos-root .rbx-b:nth-child(1){ animation: rbxBub 6s ease-in-out infinite }
#cronos-root .rbx-b:nth-child(2){ animation: rbxBub 6s ease-in-out 1.1s infinite }
#cronos-root .rbx-b:nth-child(3){ animation: rbxBub 6s ease-in-out 2.2s infinite }
#cronos-root .rbx-b:nth-child(4){ animation: rbxBub 6s ease-in-out 3.3s infinite }
@keyframes rbxBub { 0%,8%{opacity:0;transform:translateY(4px)} 18%,92%{opacity:1;transform:translateY(0)} 100%{opacity:.5} }

/* CENA 4 — NF-e/XML anexada e enviada */
#cronos-root .rbx-nfe { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
#cronos-root .rbx-xml { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--accent); background: var(--elevated); border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; animation: rbxXml 4s ease-in-out infinite; }
#cronos-root .rbx-clip { font-size: 16px; opacity: 0; animation: rbxClip 4s ease-in-out infinite; }
#cronos-root .rbx-mail { font-size: 20px; color: var(--accent); animation: rbxMail 4s ease-in-out infinite; }
@keyframes rbxXml { 0%,20%{transform:translateX(0)} 45%,100%{transform:translateX(-10px)} }
@keyframes rbxClip { 0%,30%{opacity:0;transform:scale(.4)} 48%{opacity:1;transform:scale(1.1)} 60%,100%{opacity:1;transform:scale(1)} }
@keyframes rbxMail { 0%,55%{transform:translateX(0) scale(1)} 70%{transform:translateX(4px) scale(1.1)} 100%{transform:translateX(0) scale(1)} }

/* CENA 6 — troca EDI (PROCEDA) entre Cronos e o sistema CRONOS: duas pontas + mensagens
   indo e voltando (bidirecional, como o mfx-bridge mas com rótulos de mensagem). */
#cronos-root .rbx-edi { position: absolute; inset: 0; }
#cronos-root .rbx-edi-end { position: absolute; top: 24px; font-size: 9px; font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.25; }
#cronos-root .rbx-edi-end i { font-weight: 400; color: var(--ink-3); font-style: normal; font-size: 8px; }
#cronos-root .rbx-edi-end.l { left: 8px; } #cronos-root .rbx-edi-end.r { right: 8px; }
#cronos-root .rbx-edi-msg { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Geist Mono', monospace; font-size: 8px; font-weight: 600; padding: 2px 6px; border-radius: 5px; background: var(--elevated); border: 1px solid var(--line); white-space: nowrap; opacity: 0; }
#cronos-root .rbx-edi-msg.go { top: 16px; color: var(--accent); animation: rbxEdiGo 4.4s ease-in-out infinite; }
#cronos-root .rbx-edi-msg.back { top: 42px; color: var(--green,#4E7A48); animation: rbxEdiBack 4.4s ease-in-out infinite; }
@keyframes rbxEdiGo { 0%,6%{opacity:0;transform:translateX(-50%) translateX(-30px)} 22%,40%{opacity:1;transform:translateX(-50%) translateX(0)} 52%,100%{opacity:0;transform:translateX(-50%) translateX(30px)} }
@keyframes rbxEdiBack { 0%,50%{opacity:0;transform:translateX(-50%) translateX(30px)} 66%,84%{opacity:1;transform:translateX(-50%) translateX(0)} 96%,100%{opacity:0;transform:translateX(-50%) translateX(-30px)} }

@media (prefers-reduced-motion: reduce) {
  #cronos-root .rbx-row, #cronos-root .rbx-ok, #cronos-root .rbx-bot, #cronos-root .rbx-truck,
  #cronos-root .rbx-pin, #cronos-root .rbx-eta, #cronos-root .rbx-b, #cronos-root .rbx-xml,
  #cronos-root .rbx-clip, #cronos-root .rbx-mail,
  #cronos-root .rbx-edi-msg.go, #cronos-root .rbx-edi-msg.back { animation: none !important; }
  /* estado final legível: linhas preenchidas; o que aparece por animação fica visível;
     o que se desloca (carreta/truck, xml, bot) volta à posição neutra (transform:none)
     para não congelar fora do palco. */
  #cronos-root .rbx-row { transform: scaleX(1) !important; }
  #cronos-root .rbx-ok, #cronos-root .rbx-eta, #cronos-root .rbx-b, #cronos-root .rbx-clip,
  #cronos-root .rbx-edi-msg { opacity: 1 !important; }
  #cronos-root .rbx-ok, #cronos-root .rbx-eta, #cronos-root .rbx-b, #cronos-root .rbx-clip,
  #cronos-root .rbx-bot, #cronos-root .rbx-truck, #cronos-root .rbx-pin,
  #cronos-root .rbx-xml, #cronos-root .rbx-mail { transform: none !important; }
  #cronos-root .rbx-edi-msg { transform: translateX(-50%) !important; }
}

/* CTA "completar cadastro" no card de bloqueio do painel */
#cronos-root .sp-channel-cta { margin-top: 10px; }
#cronos-root .sp-cd-suggest { margin-top: 10px; padding: 9px 11px; background: var(--blue-soft); border: 1px solid transparent; border-radius: 9px; font-size: 12.5px; color: var(--ink-1); line-height: 1.5; }
#cronos-root .sp-cd-suggest-btn { display: inline-block; margin-top: 7px; }
#cronos-root .sp-cd-suggest-note { margin-top: 5px; font-size: 11px; color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE MOBILE (consolidado) — anti auto-zoom iOS, anti-vazamento
   lateral, layout em telas pequenas. Não altera o desktop.
   ════════════════════════════════════════════════════════════════════════ */

/* Duplo-toque não dá zoom em clicáveis; e nenhuma área vaza horizontalmente. */
#cronos-root button, #cronos-root a, #cronos-root .cad-tab, #cronos-root .cad-group,
#cronos-root .ops-tab, #cronos-root .hv-fbtn, #cronos-root .cf-btn, #cronos-root [role="button"] { touch-action: manipulation; }
#cronos-root, #cronos-root .screen { max-width: 100%; overflow-x: hidden; }

@media (max-width: 640px) {
  /* 1) ANTI AUTO-ZOOM iOS: todo campo focável com fonte ≥16px (Safari só dá zoom <16). */
  #cronos-root input, #cronos-root select, #cronos-root textarea,
  #cronos-root .cad-input, #cronos-root .cfg-input, #cronos-root .cfg-add input,
  #cronos-root .ia-textarea, #cronos-root .ops-search-input, #cronos-root .ops-sort-sel,
  #cronos-root .trip-select, #cronos-root .hv-busca input, #cronos-root .hv-sort select,
  #cronos-root .paste-zone textarea, #cronos-root .proceda-input,
  #cronos-root .rd-edit-form .rf-row input, #cronos-root .rd-edit-form .rf-row select { font-size: 16px; }

  /* 2) PADDINGS dos containers reduzidos (libera largura útil em ~360px). */
  #cronos-root .topbar { padding: 12px 16px; }
  #cronos-root .hub-shell { padding: 40px 16px 60px; }
  #cronos-root .ops-shell, #cronos-root .cadastros-shell, #cronos-root .comms-shell, #cronos-root .mapa-shell { padding-left: 16px; padding-right: 16px; padding-top: 32px; }
  #cronos-root .wizard-body { padding: 28px 16px 120px; }

  /* 3) TÍTULOS serif não estouram. */
  #cronos-root .ops-head h1, #cronos-root .cadastros-head h1, #cronos-root .comms-head h1 { font-size: 32px; overflow-wrap: break-word; }
  #cronos-root .wizard-content h2 { font-size: 30px; }
  #cronos-root .login-form h1 { font-size: 34px; }

  /* 4) TOPBAR enxuta (some nome/cargo, mantém avatar + ações). */
  #cronos-root .tb-right { gap: 8px; }
  #cronos-root .tb-uname, #cronos-root .tb-urole { display: none; }
  #cronos-root .tb-user { padding: 6px; }

  /* 5) GRIDS viram 1 coluna (nunca exigem largura > viewport). */
  #cronos-root .hub-cards, #cronos-root .hv-grid, #cronos-root .comms-kpis,
  #cronos-root .mflow-base-grid, #cronos-root .ops-summary { grid-template-columns: 1fr; }

  /* 5b) MODO LISTA no celular: a linha já é flex/empilhada; só liberamos a
     quebra de texto e a timeline ocupa a largura toda. */
  #cronos-root .hvr-bottom { gap: 6px 12px; }
  #cronos-root .hvr-rota, #cronos-root .hvr-frota, #cronos-root .hvr-datas { white-space: normal; }
  #cronos-root .hvr-timeline { flex-wrap: wrap; }
  #cronos-root .hvr-timeline .hv-prog { max-width: none; flex-basis: 100%; }
  /* 5c) Seletor de modo: só ícones no aperto (rótulos somem). */
  #cronos-root .hv-view-lbl { display: none; }
  #cronos-root .hv-view-btn { padding: 7px 11px; }
  /* 5d) Calendário: cabeçalho de viagem mais estreito; resto rola na horizontal. */
  #cronos-root .hvc-row, #cronos-root .hvc-head { grid-template-columns: 64px 1fr; }
  #cronos-root .hvc-rowhead { font-size: 11px; padding: 0 6px; }

  /* 6) BARRAS DE ABAS: rolam na horizontal em vez de quebrar/vazar. */
  #cronos-root .cadastros-tabs, #cronos-root .ops-tabs, #cronos-root .cad-groups,
  #cronos-root .hv-filters, #cronos-root .comms-filters {
    width: auto; max-width: 100%; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #cronos-root .cadastros-tabs::-webkit-scrollbar, #cronos-root .ops-tabs::-webkit-scrollbar,
  #cronos-root .cad-groups::-webkit-scrollbar { display: none; }
  #cronos-root .cad-tab, #cronos-root .cad-group, #cronos-root .ops-tab, #cronos-root .hv-fbtn { white-space: nowrap; flex: 0 0 auto; }

  /* 7) TABELAS de cadastros: rolam dentro do card (não vazam a tela). */
  #cronos-root .cad-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #cronos-root .cad-table table { min-width: 520px; }

  /* 8) FORMS empilham; min-width fixo zerado (some o vazamento lateral). */
  #cronos-root .cfg-row { flex-wrap: wrap; gap: 8px; }
  #cronos-root .cfg-label { min-width: 100%; }
  #cronos-root .cfg-input, #cronos-root .cfg-add input { min-width: 0; width: 100%; flex: 1 1 100%; }
  #cronos-root .cfg-add { flex-wrap: wrap; }
  #cronos-root .rd-edit-form .rf-row { flex-wrap: wrap; }
  #cronos-root .rd-edit-form .rf-row label { min-width: 100%; }
  #cronos-root .ops-search { flex: 1 1 100%; min-width: 0; }

  /* 9) WIZARD-TOP cabe (esconde info-redundante da viagem, comprime passos). */
  #cronos-root .wizard-top { grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; }
  #cronos-root .wizard-trip-info { display: none; }
  #cronos-root .wizard-step-line { width: 16px; margin: 0 2px; }

  /* 10) SIDE-PANEL: rodapé de ações empilha 2-a-2 (botões alcançáveis). */
  #cronos-root .sp-footer { flex-wrap: wrap; padding: 14px 16px; gap: 8px; }
  #cronos-root .sp-footer .btn { flex: 1 1 calc(50% - 5px); justify-content: center; }
  #cronos-root .sp-footer #sp-confirm { margin-left: 0; flex-basis: 100%; }

  /* 11) Linhas/grids de conteúdo encolhem o texto em vez de vazar. */
  #cronos-root .conv-main, #cronos-root .comms-sol, #cronos-root .mq-err, #cronos-root .hv-card { min-width: 0; }
  #cronos-root .conv-row { grid-template-columns: 42px 1fr auto; gap: 10px; padding: 12px 14px; }
  #cronos-root .conv-date { display: none; }
  #cronos-root .conv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #cronos-root .comms-sol { grid-template-columns: minmax(0,1fr) auto; }
  #cronos-root .cs-meta, #cronos-root .cs-erro { grid-column: 1 / -1; }
  #cronos-root .mq-err { grid-template-columns: minmax(0,1fr) auto; }

  /* 12) TOAST respeita as duas margens (não vaza pela direita). */
  #cronos-root .toast-stack { left: 12px; right: 12px; bottom: 12px; }
  #cronos-root .toast { max-width: 100%; width: 100%; }

  /* 13) Mapa do sistema: nó/cards menores; carreta menor. */
  #cronos-root .mflow-card, #cronos-root .mflow-base-card { min-width: 0; }
  #cronos-root .mflow-stage { gap: 10px; }
  #cronos-root .mflow-node { flex: 0 0 40px; }
  #cronos-root .mflow-ic { width: 40px; height: 40px; font-size: 18px; }
  /* Trilho da carreta vira VERTICAL no celular (viewBox 320×700) — precisa de
     altura p/ os nós respirarem; o JS já recalcula as coordenadas em coluna. */
  #cronos-root #route-map { height: 460px; }

  /* 14) SOS BANNER (Ops): empilha — ícone+texto em cima, AÇÕES largas embaixo.
     Em linha, os botões ficam espremidos contra a borda direita; empilhado eles
     respiram e ficam fáceis de tocar. */
  #cronos-root .sos-banner { flex-wrap: wrap; padding: 16px; gap: 12px; }
  #cronos-root .sos-banner .sos-icon-big { font-size: 26px; }
  #cronos-root .sos-banner .sos-text { flex: 1 1 calc(100% - 38px); min-width: 0; }
  #cronos-root .sos-banner .sos-message { font-size: 19px; }
  #cronos-root .sos-banner .sos-actions { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
  #cronos-root .sos-banner .sos-actions .btn,
  #cronos-root .sos-banner .sos-actions button { flex: 1 1 calc(50% - 4px); justify-content: center; min-width: 0; }

  /* 15) SOS no app do motorista: ícone não encosta no texto; texto não vaza. */
  #cronos-root .phone-sos { padding: 14px; gap: 10px; }
  #cronos-root .phone-sos-text { min-width: 0; }
  #cronos-root .phone-sos-text strong { overflow-wrap: break-word; }

  /* 16) GENÉRICO anti-aperto: qualquer barra de ações em linha pode quebrar
     para a linha de baixo em vez de comprimir os botões; botões não encolhem
     abaixo do conteúdo (sem texto cortado). */
  #cronos-root .ds-actions, #cronos-root .card-actions, #cronos-root .panel-actions,
  #cronos-root .row-actions, #cronos-root .hv-actions, #cronos-root .cs-actions { flex-wrap: wrap; gap: 8px; }
  #cronos-root .btn, #cronos-root .hv-fbtn, #cronos-root .cf-btn { min-width: 0; }
  /* Texto dos botões não quebra no meio da palavra deixando 1 letra órfã. */
  #cronos-root button, #cronos-root .btn { overflow-wrap: break-word; }
}

/* App do motorista: a moldura usa 100% (não 100vw — evita diferença da scrollbar). */
#cronos-root .phone { max-width: 100%; }

/* ════════════════════════════════════════════════════════════════════════
   PWA — SAFE-AREA + BANNER DE INSTALAÇÃO + MODAL DE TUTORIAL
   ════════════════════════════════════════════════════════════════════════ */

/* SAFE-AREA (pedido do usuário): quando instalado e aberto em TELA CHEIA
   (display-mode: standalone), o conteúdo do app NÃO pode invadir a área da
   barra de status do celular (sinal / bateria / relógio / notch). Reservamos
   esse espaço no topo (e nas laterais/baixo p/ o notch) usando env(safe-area).
   Fora do standalone (navegador comum), nada muda — o navegador já cuida. */
@media all and (display-mode: standalone) {
  /* A topbar é position:sticky top:0 — só reservar padding NÃO basta (o fundo
     gruda no topo absoluto e fica SOB a barra do sistema ao rolar). Empurramos
     o próprio ponto de fixação para baixo da barra de status com top:env(...),
     e ainda damos um respiro no padding superior. */
  #cronos-root .topbar {
    top: env(safe-area-inset-top);
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  #cronos-root .hub-shell { padding-top: calc(40px + env(safe-area-inset-top)); }
  #cronos-root .ops-shell, #cronos-root .cadastros-shell,
  #cronos-root .comms-shell, #cronos-root .mapa-shell { padding-top: calc(32px + env(safe-area-inset-top)); }

  /* App do motorista (tela cheia escura): preserva os paddings de DESIGN (14px/16px)
     já definidos no @media 640 e SOMA a safe-area — sem zerar o respiro original. */
  #cronos-root .phone {
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* A barra de status SIMULADA do app do motorista ("📶 LTE 100%") some quando
     instalado: ela existia só para a demonstração e, no app real, duplicaria/
     confundiria a barra de status NATIVA do celular. */
  #cronos-root .phone-status-bar { display: none !important; }

  /* Notch lateral (landscape) e base (indicador de gestos): aplica o inset
     lateral em UM só nível (#cronos-root) — em .screen também duplicaria o recuo. */
  #cronos-root {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Instalado: não faz sentido reconvidar a instalar. */
  #cronos-root .pwa-banner { display: none !important; }
}

/* ---- Banner de instalação (rodapé flutuante, discreto) ---- */
#cronos-root .pwa-banner {
  display: none;
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 8000;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(40, 30, 20, 0.18);
  padding: 12px 12px 12px 14px;
  align-items: center;
  gap: 12px;
  animation: pwaBannerIn 0.45s cubic-bezier(.22,.9,.3,1);
}
#cronos-root .pwa-banner.show { display: flex; }
@keyframes pwaBannerIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
#cronos-root .pwa-banner-icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 11px;
  background: var(--accent) center/72% no-repeat; /* a img da marca entra via JS */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
#cronos-root .pwa-banner-txt { flex: 1; min-width: 0; }
#cronos-root .pwa-banner-txt strong { display: block; font-size: 14.5px; color: var(--ink); line-height: 1.25; }
#cronos-root .pwa-banner-txt span { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.35; margin-top: 2px; overflow-wrap: break-word; }
#cronos-root .pwa-banner-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#cronos-root .pwa-banner-cta {
  background: var(--accent); color: #fff; border: none; border-radius: 10px;
  padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  touch-action: manipulation;
}
#cronos-root .pwa-banner-cta:hover { filter: brightness(1.05); }
#cronos-root .pwa-banner-x {
  background: transparent; border: none; color: var(--ink-3); font-size: 22px; line-height: 1;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; flex: 0 0 auto; touch-action: manipulation;
}
#cronos-root .pwa-banner-x:hover { background: var(--surface); color: var(--ink); }

/* ---- Modal de tutorial (passo a passo iOS/Android) ---- */
#cronos-root .pwa-guide-overlay {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(31,27,20,.5);
  display: none; align-items: center; justify-content: center;
  padding: 18px;
  padding-top: calc(18px + env(safe-area-inset-top));
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
#cronos-root .pwa-guide-overlay.show { display: flex; }
#cronos-root .pwa-guide-card {
  width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto;
  background: var(--elevated); border: 1px solid var(--line); border-radius: 20px;
  padding: 26px 24px; position: relative;
  box-shadow: 0 24px 70px rgba(40,30,20,.28);
  -webkit-overflow-scrolling: touch;
}
#cronos-root .pwa-guide-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-3);
  width: 32px; height: 32px; border-radius: 9px; font-size: 20px; line-height: 1; cursor: pointer; touch-action: manipulation;
}
#cronos-root .pwa-guide-close:hover { color: var(--ink); }
#cronos-root .pwa-guide-mark { width: 40px; height: 40px; margin-bottom: 12px; }
#cronos-root .pwa-guide-mark .mark { width: 40px; height: 40px; }
#cronos-root .pwa-guide-head h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 27px; line-height: 1.1; margin: 0 0 6px; color: var(--ink); }
#cronos-root .pwa-guide-head h2 em { font-style: italic; color: var(--accent); }
#cronos-root .pwa-guide-head p { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 18px; }
#cronos-root .pwa-guide-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
#cronos-root .pwa-guide-tab {
  flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-3); font-size: 13px; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
#cronos-root .pwa-guide-tab.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }
#cronos-root .pwa-steps { list-style: none; margin: 0; padding: 0; }
#cronos-root .pwa-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 14px; color: var(--ink-1); line-height: 1.5; }
#cronos-root .pwa-steps li:last-child { border-bottom: none; }
#cronos-root .pwa-steps li b { color: var(--ink); }
#cronos-root .pwa-step-n {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff; font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
#cronos-root .pwa-ic { font-size: 15px; }
#cronos-root .pwa-guide-note { margin-top: 18px; font-size: 12px; color: var(--ink-3); line-height: 1.5; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; }

@media (max-width: 640px) {
  #cronos-root .pwa-guide-card { padding: 22px 18px; border-radius: 18px; }
  #cronos-root .pwa-banner-txt span { display: none; } /* no aperto, fica só o título + CTA */
}