/* IATAXY PRUEBAS-3 — experimental visual layer inspired by CEO2.
   No operational code, bindings, routes or session behavior changed.
   Remove the single <link> in index.html to revert instantly. */
:root,
:root[data-theme="dark"] {
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg-app: #03080e;
  --bg-surface: #07101a;
  --bg-surface-strong: #07101a;
  --bg-highlight: linear-gradient(135deg, #0645bd, #092a6c);
  --bg-accent-soft: linear-gradient(135deg, #0642b7, #075ce2);
  --text-primary: #f7faff;
  --text-secondary: #9db0c9;
  --text-on-dark: #ffffff;
  --border-soft: #2b3b50;
  --border-strong: #287ff1;
  --shadow-soft: 0 9px 22px rgba(0, 0, 0, .22);
  --brand: #3988ff;
  --brand-strong: #84b9ff;
  --danger: #ff707b;
  --danger-soft: #3b1722;
  --success: #58df91;
  --success-soft: #103c2b;
  --warning: #ffbf52;
  --warning-soft: #3d2c13;
  --info: #75adff;
  --info-soft: #102a4e;
  --slate: #9aabc0;
  --slate-soft: #19283b;
}
:root[data-theme="light"] {
  --brand: #075fe0;
  --brand-strong: #064bb5;
  --border-strong: #2484f5;
  --bg-highlight: linear-gradient(135deg, #0751c7, #073b88);
  --bg-accent-soft: linear-gradient(135deg, #0642b7, #075ce2);
}
html { font-size: 16px; }
body {
  background: #111827;
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.4;
}
.driver-app-shell {
  width: min(100%, 440px);
  min-height: 100dvh;
  background: var(--bg-app);
  border-inline: 1px solid var(--border-soft);
  padding: calc(12px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 12px 104px;
}
.driver-app-shell--flow { padding-bottom: 30px; }
.main-content, .screen-stack { gap: 9px; }
.app-topline {
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border-soft);
}
.app-topline__actions { gap: 5px; }
.app-topline__copy { min-width: 0; }
.app-brand {
  font-weight: 850;
  letter-spacing: .015em;
  font-size: 13px;
  color: var(--brand);
  margin: 0;
}
.app-identity-line {
  margin-top: 2px;
  font-size: 11px !important;
  line-height: 1.35;
  color: var(--text-secondary);
}
.eyebrow {
  font-size: 11px;
  letter-spacing: .045em;
  font-weight: 800;
  color: var(--brand-strong);
}
.section-heading h2, .screen-card h2, .screen-card h3 { line-height: 1.2; letter-spacing: -.025em; }
.screen-card h2, .hero-card h1 { font-size: clamp(18px, 4.8vw, 23px); }
.screen-card, .hero-card, .progress-panel, .summary-hero {
  background: var(--bg-surface-strong);
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
}
.screen-card { padding: 14px; }
.screen-card--compact { border-radius: 12px; padding: 13px; }
.hero-card { border-radius: 14px; padding: 13px; gap: 9px; }
.screen-card--highlight, .summary-hero:not(.summary-hero--accent) {
  background: var(--bg-highlight);
  border-color: #2988f9;
  color: #fff;
}
.screen-card--highlight .muted-copy, .screen-card--highlight .support-copy { color: #e2ecff; }
.screen-card--pin {
  padding: 22px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(155deg, #0c1d33 0%, #07111e 100%);
  border-radius: 16px;
}
.pin-heading h2 { font-size: 23px; letter-spacing: -.035em; }
.pin-input { font-size: 21px; letter-spacing: .45em; }
.driver-app-shell--flow:has(.screen-card--pin) .main-content {
  align-content: center;
  min-height: calc(100dvh - 130px);
}
.progress-panel { padding: 10px; border-radius: 12px; }
.progress-panel__chip, .status-pill, .tag-chip {
  font-size: 11px;
  border-radius: 9px;
}
.progress-step { min-width: 34px; min-height: 34px; }
.progress-step.is-current { background: #10396d; border-color: #348ffb; }
.icon-action-button {
  min-width: 41px;
  min-height: 41px;
  padding: 0 9px;
  border-radius: 11px;
  box-shadow: none;
  background: var(--bg-surface-strong);
  color: var(--text-primary);
  border: 1px solid var(--border-soft);
}
.icon-action-button:focus-visible, .action-button:focus-visible,
.bottom-nav__item:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #79b6ff;
  outline-offset: 2px;
}
.action-button {
  min-height: 46px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: none;
}
.action-button--primary, .action-button.is-primary {
  background: linear-gradient(135deg, #0642b7 0%, #075ce2 100%);
  color: #fff;
  border: 1px solid #348dff;
}
.action-button--secondary {
  background: #071523;
  border: 1px solid #2866b9;
  color: #91bfff;
}
.action-button--small { min-height: 39px; font-size: 12px; border-radius: 9px; }
.action-button:disabled { opacity: .48; filter: grayscale(.25); }
.field-block { gap: 6px; }
.field-label { color: var(--text-primary); font-size: 13px; font-weight: 750; }
.field-block input, .field-block textarea, .field-block select,
.pin-input, .amount-input, .text-input {
  min-height: 48px;
  background: #07111d;
  border: 1px solid #354e69;
  border-radius: 10px;
  color: var(--text-primary);
  padding: 10px 13px;
  box-shadow: none;
}
.field-block input::placeholder, .pin-input::placeholder { color: #8094ac; }
.lead-copy { font-size: 14px; line-height: 1.45; }
.muted-copy, .support-copy { font-size: 12px; line-height: 1.45; }
.screen-code-tag { font-size: 10px; min-height: 21px; border-radius: 6px; }
.summary-hero { gap: 10px; padding: 13px; border-radius: 14px; }
.summary-hero__title h2, .summary-hero__title h3 { font-size: 25px; }
.summary-grid, .kpi-grid { gap: 6px; }
.summary-tile, .kpi-tile {
  gap: 5px;
  min-height: 76px;
  padding: 10px 7px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: 11px;
}
.summary-tile strong, .kpi-tile strong { font-size: 19px; color: var(--text-primary); }
.summary-tile span, .kpi-tile span { font-size: 11px; }
.list-row--card, .driver-option, .metric-card, .photo-preview-card {
  border-radius: 12px;
  background: var(--bg-surface-strong);
  border-color: var(--border-soft);
  box-shadow: none;
}
.list-row, .detail-pair { gap: 9px; }
.flow-dialog {
  background: #0a1727;
  border: 1px solid #344c68;
  border-radius: 15px;
  box-shadow: 0 20px 60px #000a;
}
.bottom-nav {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(100%, 440px);
  gap: 5px;
  padding: 8px 9px calc(8px + env(safe-area-inset-bottom));
  background: #06111ddf;
  border-top: 1px solid #2c3d52;
  backdrop-filter: blur(14px);
  border-radius: 0;
}
.bottom-nav__item {
  min-height: 50px;
  border-radius: 10px;
  padding: 7px 3px;
  font-size: 12px;
}
.bottom-nav__item.is-active, .bottom-nav__item[aria-current="page"] {
  background: linear-gradient(135deg, #0642b7, #075ce2);
  color: #fff;
}
.feedback-banner {
  border-radius: 10px;
  border: 1px solid var(--border-strong);
}
@media (max-width: 390px) {
  .driver-app-shell { padding-inline: 9px; }
  .app-topline__actions { gap: 3px; }
  .icon-action-button { min-width: 37px; min-height: 39px; }
  .screen-card { padding: 12px; }
  .screen-card--pin { padding: 17px; }
}
@media (min-width: 550px) {
  .driver-app-shell { margin: 16px auto; min-height: calc(100dvh - 32px); border-radius: 23px; overflow: clip; }
  .bottom-nav { border-radius: 14px 14px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .driver-app-shell *, .driver-app-shell *::before, .driver-app-shell *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
/* Keep the pre-existing light-mode toggle usable during the trial. */
:root[data-theme="light"] {
  --bg-app: #f2f5fa;
  --bg-surface: #ffffff;
  --bg-surface-strong: #ffffff;
  --text-primary: #152539;
  --text-secondary: #50617a;
  --text-on-dark: #ffffff;
  --border-soft: #c9d4e2;
  --border-strong: #075fe0;
  --shadow-soft: 0 8px 22px #17263b12;
  --slate-soft: #e6edf5;
}
:root[data-theme="light"] .screen-card--pin {
  background: linear-gradient(155deg, #ffffff, #f0f5fb);
}
:root[data-theme="light"] .field-block input,
:root[data-theme="light"] .field-block textarea,
:root[data-theme="light"] .field-block select,
:root[data-theme="light"] .pin-input,
:root[data-theme="light"] .amount-input,
:root[data-theme="light"] .text-input,
:root[data-theme="light"] .icon-action-button {
  background: #fff;
  color: #152539;
}
:root[data-theme="light"] .action-button--secondary,
:root[data-theme="light"] .flow-dialog {
  background: #f8faff;
  color: #0753bd;
}
:root[data-theme="light"] .bottom-nav {
  background: #f6f9fee8;
  border-color: #cbd7e5;
}

/* Stable compact header/navigation grid for narrow test devices. */
.app-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.app-topline__actions { justify-content: flex-end; }
.bottom-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bottom-nav__item {
  min-width: 0;
  grid-column: auto;
}


/* Compatibility with the current official CSS: visual overrides only.
   Keep the official sticky navigation in normal document flow. */
.driver-app-shell { overflow: visible; }
.bottom-nav {
  position: sticky;
  left: auto;
  right: auto;
  transform: none;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bottom-nav:has([data-route="metrics"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bottom-nav__item { color: var(--text-secondary); }
.bottom-nav__label { font-size: 13px; line-height: 1.3; }
.driver-app-shell .action-button {
  min-height: 46px !important;
  padding: 10px 13px !important;
  border-radius: 11px;
}
.driver-app-shell .action-button--small {
  min-height: 40px !important;
  padding: 9px 11px !important;
}
.shift-home .screen-card { padding: 13px; }
.shift-home .action-button { min-height: 48px !important; }
.app-topline__actions { min-width: 0; }
.header-replenishment-button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 13px;
}
.field-block input, .field-block select, .field-block textarea,
.field-block--compact input, .field-block--compact select,
.field-block--compact textarea { font-size: 16px; }
.field-block--compact .field-label { font-size: 13px; }
:root[data-theme="light"] {
  --danger: #ba2537;
  --danger-soft: #fde9ed;
  --success: #14763d;
  --success-soft: #e4f5eb;
  --warning: #8b5300;
  --warning-soft: #fff2d9;
  --info: #0753bd;
  --info-soft: #e6efff;
}
@media (min-width: 550px) {
  .driver-app-shell { overflow: visible; }
  .bottom-nav { border-radius: 12px; }
}
@media (max-width: 350px) {
  .app-topline { grid-template-columns: minmax(0, 1fr); }
  .app-topline__actions { justify-content: flex-start; }
}

/* Keep every form field and button clear of the navigation bar. */
.driver-app-shell:not(.driver-app-shell--flow) {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.driver-app-shell:not(.driver-app-shell--flow) > .main-content { flex: 1; }
.bottom-nav {
  position: relative;
  bottom: auto;
  flex-shrink: 0;
}
.driver-app-shell .shift-home .action-button { border-radius: 11px; }

.driver-app-shell:not(.driver-app-shell--flow) > .main-content {
  align-content: start;
}
.driver-app-shell .action-button--small {
  border-radius: 9px !important;
}

/* Failed operations must remain distinct from successful feedback in both themes. */
.feedback-banner.feedback-banner--error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger);
}