/* ============================================================
   CAMPO MODE - Layout imersivo PWA/App
   ============================================================ */

/* Paleta navy institucional TCM-BA */
:root {
  --campo: #1e3a5f;
  --campo-hover: #162d4a;
  --campo-light: #2d5280;
  --campo-50: #f0f4f8;
  --campo-100: #d9e2ec;
  --campo-200: #bcccdc;
  --campo-dark: #102a43;
  --campo-darker: #0a1929;
  --campo-gold: #d4a843;
  --campo-gold-dim: rgba(212,168,67,0.3);
  --campo-bottom-h: 72px;
}

/* Esconder layout normal */
body.campo-mode .sidebar { display:none !important; }
body.campo-mode .sidebar-overlay { display:none !important; }
body.campo-mode .top-bar { display:none !important; }
body.campo-mode .main-content { margin-left:0 !important; background:linear-gradient(170deg,#0a1929 0%,#102a43 30%,#f0f4f8 30.1%,#f8f9fa 100%); min-height:100vh; }
body.campo-mode .content-area { max-width:100%; padding:0; padding-bottom:var(--campo-bottom-h); }

/* App Header */
.campo-header {
  display:none;
  position:sticky; top:0; z-index:100;
  background:linear-gradient(135deg, var(--campo-dark), var(--campo-darker));
  height:64px;
  align-items:center; padding:0 1.25rem; gap:0.85rem;
  color:white;
  box-shadow:0 4px 20px rgba(0,0,0,0.2);
}
body.campo-mode .campo-header { display:flex; }
.campo-header-logo {
  width:106px; height:24px; object-fit:contain; flex-shrink:0;
  background:rgba(255,255,255,0.96); border-radius:8px; padding:3px 6px;
}
.campo-header-back {
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.1); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.15); color:white;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.2s ease;
}
.campo-header-back:hover { background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.3); }
.campo-header-back:active { background:rgba(255,255,255,0.28); transform:scale(0.95); }
.campo-header-brand { display:flex; flex-direction:column; min-width:0; }
.campo-header-title { font-size:1.12rem; font-weight:700; letter-spacing:0; white-space:nowrap; }
.campo-header-sub { font-size:0.74rem; opacity:0.78; font-weight:400; letter-spacing:0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Step indicator strip (override wizard-steps) */
body.campo-mode .wizard-steps {
  background:rgba(255,255,255,0.7); backdrop-filter:blur(12px); border:none; border-radius:0; margin-bottom:0;
  padding:0.85rem 1.25rem;
  box-shadow:0 1px 8px rgba(0,0,0,0.06);
  overflow-x:auto;
  scrollbar-width:none;
}
body.campo-mode .wizard-steps::-webkit-scrollbar { display:none; }
body.campo-mode .wiz-step .wiz-num { border-color:var(--campo-200); width:34px; height:34px; font-size:0.8rem; }
body.campo-mode .wiz-step.active .wiz-num {
  background:var(--campo); border-color:var(--campo);
  box-shadow:0 2px 10px rgba(37,99,235,0.4);
}
body.campo-mode .wiz-step.done .wiz-num { background:var(--campo-light); border-color:var(--campo-light); }
body.campo-mode .wiz-step .wiz-label { font-size:0.78rem; }
body.campo-mode .wiz-step.active .wiz-label { color:var(--campo); font-weight:700; }
body.campo-mode .wiz-step.done .wiz-label { color:var(--campo-hover); }
body.campo-mode .wiz-step.done:not(:last-child)::after { background:var(--campo-light); }

/* Content panels padding */
body.campo-mode .wiz-content { padding:1.5rem 1.25rem; }
body.campo-mode .wiz-content .wiz-title { color:var(--campo-dark); font-size:1.25rem; margin-bottom:1.25rem; }

/* Bottom nav fixo */
body.campo-mode .wiz-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  background:white; margin:0;
  padding:0.75rem 1rem;
  padding-bottom:calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--border);
  box-shadow:0 -4px 16px rgba(0,0,0,0.08);
}
body.campo-mode .wiz-nav .btn { padding:0.85rem 1.25rem; font-size:0.95rem; border-radius:12px; }
body.campo-mode .wiz-nav .btn-primary { background:var(--campo); box-shadow:0 3px 12px rgba(37,99,235,0.3); }
body.campo-mode .wiz-nav .btn-primary:hover { background:var(--campo-hover); }
body.campo-mode .wiz-nav .btn-secondary { color:var(--campo); border-color:var(--campo); }
body.campo-mode .wiz-nav .btn-secondary:hover { background:var(--campo-50); }

/* Template cards */
body.campo-mode .tpl-card { padding:1.25rem; border-radius:14px; border-width:2px; background:rgba(255,255,255,0.85); backdrop-filter:blur(8px); }
body.campo-mode .tpl-card h4 { font-size:1rem; }
body.campo-mode .tpl-card p { font-size:0.85rem; }
body.campo-mode .tpl-card.selected { border-color:var(--campo); background:rgba(239,246,255,0.9); box-shadow:0 0 0 3px rgba(37,99,235,0.15); }
body.campo-mode .tpl-card .tpl-tipo { color:var(--campo); font-size:0.7rem; }

/* Form card */
body.campo-mode .form-card { border-radius:16px; border-color:rgba(167,243,208,0.5); background:rgba(255,255,255,0.88); backdrop-filter:blur(8px); }
body.campo-mode .form-group label { font-size:0.88rem; margin-bottom:0.4rem; }
body.campo-mode .form-control { padding:0.8rem 0.95rem; font-size:0.95rem; border-radius:10px; }
body.campo-mode .form-control:focus { border-color:var(--campo); box-shadow:0 0 0 3px rgba(37,99,235,0.12); }
body.campo-mode .form-control.invalid { border-color:var(--red); }

/* Achados */
body.campo-mode .achado-item { padding:1.1rem; border-radius:12px; margin-bottom:0.75rem; background:rgba(255,255,255,0.85); backdrop-filter:blur(8px); }
body.campo-mode .achado-item.selected { border-color:var(--campo); background:rgba(239,246,255,0.9); }
body.campo-mode .achado-item.selected .achado-check { background:var(--campo); border-color:var(--campo); }
body.campo-mode .achado-code { color:var(--campo); font-size:0.72rem; }
body.campo-mode .achado-name { font-size:0.9rem; }

/* Photo button */
body.campo-mode .btn-photo { background:var(--campo-50); color:var(--campo); border-color:var(--campo-200); padding:0.65rem 1.1rem; font-size:0.88rem; border-radius:10px; }

/* Review & submit buttons */
body.campo-mode .btn-green { background:var(--campo); box-shadow:0 2px 6px rgba(37,99,235,0.3); }
body.campo-mode .btn-green:hover { background:var(--campo-hover); }
body.campo-mode #wiz-4 .btn-primary { background:var(--campo); }
body.campo-mode #wiz-4 .btn-primary:hover { background:var(--campo-hover); }

/* Review cards */
body.campo-mode .review-achado { border-left-color:var(--campo-200); }

/* Toast acima do bottom nav */
body.campo-mode .toast-container { bottom:calc(var(--campo-bottom-h) + 0.75rem); }

/* Slide animations */
@keyframes campoSlideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes campoSlideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
body.campo-mode .wiz-content.active { animation:campoSlideLeft 0.25s ease; }
body.campo-mode .wiz-content.slide-back { animation:campoSlideRight 0.25s ease; }

/* Install banner */
.campo-install-banner {
  display:none; position:fixed;
  bottom:calc(var(--campo-bottom-h, 72px) + 0.5rem);
  left:1rem; right:1rem; z-index:95;
  background:white; border:1.5px solid var(--campo-200);
  border-radius:14px; padding:0.875rem 1rem;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  align-items:center; gap:0.75rem;
}
.campo-install-banner.show { display:flex; }
.campo-install-icon { width:40px; height:40px; border-radius:10px; background:var(--campo-50); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.campo-install-text { flex:1; }
.campo-install-text strong { font-size:0.85rem; display:block; color:var(--text); }
.campo-install-text small { font-size:0.72rem; color:var(--text-secondary); }

/* Mobile adjustments for campo */
@media (max-width:768px) {
  body.campo-mode .wiz-content { padding:1rem; }
  body.campo-mode .campo-header { padding:0 0.75rem; gap:0.65rem; }
  body.campo-mode .campo-header-logo { width:88px; height:23px; padding:3px 5px; }
  body.campo-mode .campo-header-title { font-size:1rem; }
  body.campo-mode .campo-header-sub { font-size:0.69rem; }
  body.campo-mode .wizard-steps { padding:0.65rem 0.75rem; }
  body.campo-mode .wiz-step { flex:0 0 auto; gap:0.35rem; }
  body.campo-mode .wiz-step:not(:last-child)::after { flex:0 0 22px; width:22px; margin:0 0.2rem; }
  body.campo-mode .wiz-step .wiz-label { display:none; }
  body.campo-mode .wiz-step.active .wiz-label { display:inline-block; max-width:118px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* PROC TABS & BUILDER TABS */
.proc-tab, .builder-tab { padding:0.6rem 1rem; border:none; background:transparent; font-size:0.82rem; font-weight:500; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; transition:all 0.15s ease; margin-bottom:-2px; font-family:inherit; }
.proc-tab.active, .builder-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.proc-tab:hover, .builder-tab:hover { color:var(--text); }