/* =========================================
   SECURANGOLA — DESIGN SYSTEM
   ========================================= */

:root {
  --bg-deep:        #0d1424;
  --bg-dark:        #111827;
  --bg-card:        #1a2236;
  --bg-card-hover:  #1e2a40;
  --bg-sidebar:     #0f1929;
  --border:         #2a3550;
  --border-light:   #3a4560;

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;

  --green:   #22c55e;
  --green-bg:#14532d;
  --green-light: #86efac;
  --yellow:  #f59e0b;
  --yellow-bg:#78350f;
  --red:     #ef4444;
  --red-bg:  #7f1d1d;
  --blue:    #3b82f6;
  --blue-bg: #1e3a5f;
  --navy:    #1e40af;
  --purple:  #8b5cf6;
  --orange:  #f97316;
  --teal:    #14b8a6;

  --cta:     #3b82f6;
  --cta-hover: #2563eb;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow:     0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow-green:  0 0 20px rgba(34,197,94,0.25);
  --shadow-glow-red:    0 0 20px rgba(239,68,68,0.25);
  --shadow-glow-blue:   0 0 20px rgba(59,130,246,0.25);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

/* =========================================
   LOADING SCREEN
   ========================================= */
#loading-screen {
  position: fixed; inset: 0;
  background: var(--bg-deep);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loading-screen.fade-out { opacity: 0; visibility: hidden; }

.loading-content { text-align: center; }

.loading-logo {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 32px;
  animation: bounce 1s ease infinite alternate;
  box-shadow: var(--shadow-glow-blue);
}
.loading-logo i { color: white; }

.loading-content h1 { font-size: 28px; font-weight: 800; color: var(--text-primary); }
.loading-content p  { color: var(--text-secondary); margin-top: 4px; }

.loading-bar {
  width: 200px; height: 4px;
  background: var(--border);
  border-radius: 999px;
  margin: 20px auto 0;
  overflow: hidden;
}
.loading-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 999px;
  animation: loadProg 1.5s ease-in-out forwards;
}

@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes loadProg { from { width: 0; } to { width: 100%; } }

/* =========================================
   TOP NAV
   ========================================= */
.hidden { display: none !important; }

.top-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800;
  color: var(--text-primary);
}
.nav-brand i { color: var(--blue); font-size: 22px; }

.nav-toggle-group {
  display: flex; gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  margin: 0 auto;
}
.toggle-btn {
  padding: 8px 20px;
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary);
  cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.toggle-btn.active {
  background: var(--blue); color: white;
  box-shadow: var(--shadow-glow-blue);
}
.toggle-btn:hover:not(.active) { color: var(--text-primary); background: var(--bg-card-hover); }

.nav-info {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary);
  white-space: nowrap;
}
.online-dot {
  width: 8px; height: 8px;
  background: var(--green); border-radius: 50%;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* =========================================
   VIEW SECTIONS
   ========================================= */
.view-section { padding: 20px; }

/* =========================================
   MOBILE MOCKUP
   ========================================= */
.mobile-container {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
}

.phone-mockup {
  width: 375px;
  min-height: 780px;
  background: #0a0f1a;
  border: 3px solid #2a3550;
  border-radius: 40px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 0 0 2px #1a2236;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}

.phone-notch {
  background: #0a0f1a;
  padding: 10px 20px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-secondary);
}
.notch-time { font-weight: 600; }
.notch-icons { display: flex; gap: 6px; font-size: 11px; }

.phone-screen {
  flex: 1;
  background: var(--bg-dark);
  overflow: hidden;
  position: relative;
}

.phone-home-bar {
  height: 24px; background: #0a0f1a;
  display: flex; align-items: center; justify-content: center;
}
.phone-home-bar::after {
  content: '';
  width: 120px; height: 4px;
  background: var(--border-light);
  border-radius: 999px;
}

/* Mobile Screens */
.mobile-screen {
  position: absolute; inset: 0;
  padding: 16px;
  overflow-y: auto;
  background: var(--bg-dark);
  opacity: 0;
  pointer-events: none;
  transform: translateX(30px);
  transition: all 0.3s ease;
  display: flex; flex-direction: column; gap: 12px;
}
.mobile-screen.active {
  opacity: 1; pointer-events: all; transform: translateX(0);
}
.mobile-screen::-webkit-scrollbar { width: 3px; }
.mobile-screen::-webkit-scrollbar-track { background: transparent; }
.mobile-screen::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Screen Header */
.screen-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding-bottom: 8px;
}
.screen-header.compact {
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.greeting { font-size: 13px; color: var(--text-secondary); margin-bottom: 2px; }
.posto-name { font-size: 16px; font-weight: 700; }
.screen-header h3 { font-size: 16px; font-weight: 700; flex: 1; text-align: center; }

.back-btn {
  background: none; border: none; color: var(--blue);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
}

.sync-status {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 4px 8px;
  border-radius: 999px; font-weight: 500;
}
.sync-status.online { background: rgba(34,197,94,0.1); color: var(--green); }
.sync-status.offline { background: rgba(239,68,68,0.1); color: var(--red); }

/* Handover Alert (home) */
.handover-alert {
  display: flex; align-items: center; gap: 10px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.handover-alert i { color: var(--yellow); font-size: 18px; }
.handover-alert strong { font-size: 13px; }
.handover-alert p { font-size: 11px; color: var(--text-secondary); }
.btn-alert-action {
  margin-left: auto;
  background: var(--yellow); color: #000;
  border: none; border-radius: var(--radius-sm);
  padding: 6px 12px; font-size: 11px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}

/* Shift Status Card */
.shift-status-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; align-items: center; gap: 12px;
}
.status-icon {
  width: 40px; height: 40px;
  background: rgba(59,130,246,0.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.status-label { font-size: 11px; color: var(--text-secondary); }
.status-value { font-size: 15px; font-weight: 600; display: block; }
.shift-time { margin-left: auto; text-align: right; font-size: 11px; color: var(--text-secondary); }
.shift-time strong { display: block; font-size: 18px; color: var(--green); }

/* CTA Button */
.cta-section { text-align: center; }
.btn-cta {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, var(--green), #16a34a);
  color: white; font-size: 16px; font-weight: 800;
  border: none; border-radius: var(--radius);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all 0.2s; letter-spacing: 0.5px;
  box-shadow: var(--shadow-glow-green);
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(34,197,94,0.4); }
.btn-cta.disabled { background: var(--bg-card); color: var(--text-muted); box-shadow: none; pointer-events: none; }
.cta-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

.quick-info-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.quick-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
  display: flex; flex-direction: column; gap: 4px;
}
.quick-card i { font-size: 16px; color: var(--blue); }
.quick-card span { font-size: 10px; color: var(--text-secondary); }
.quick-card strong { font-size: 14px; font-weight: 700; }

.btn-secondary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius); padding: 10px;
  width: 100%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px;
  transition: all 0.2s;
}
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); }

/* Shift Timer Card */
.shift-timer-card {
  background: linear-gradient(135deg, var(--bg-card), #1e2d3f);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.timer-guard {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.guard-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.guard-avatar.green { background: rgba(34,197,94,0.2); color: var(--green); border: 2px solid var(--green); }
.guard-avatar.blue  { background: rgba(59,130,246,0.2); color: var(--blue); border: 2px solid var(--blue); }
.timer-guard strong { display: block; font-size: 14px; }
.timer-guard span   { font-size: 11px; color: var(--text-secondary); }

.timer-display {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 28px; font-weight: 800;
  color: var(--green); font-family: monospace;
}
.shift-badge {
  text-align: center; font-size: 11px;
  color: var(--text-secondary); margin-top: 6px;
}

/* Meals Section */
.meals-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.section-title {
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.section-subtitle {
  font-size: 11px; color: var(--text-muted); margin-bottom: 10px;
}

/* Meal Timeline */
.meal-timeline { margin-bottom: 10px; }
.timeline-bar { padding: 0 8px; }
.timeline-track {
  position: relative; height: 4px;
  background: var(--border);
  border-radius: 999px; margin: 12px 0 4px;
}
.meal-dot {
  position: absolute; top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.meal-dot.confirmed { background: var(--green); box-shadow: var(--shadow-glow-green); }
.meal-dot.available { background: var(--yellow); box-shadow: 0 0 10px rgba(245,158,11,0.4); }
.meal-dot.pending   { background: var(--border-light); }
.timeline-now {
  position: absolute; top: -6px;
  width: 2px; height: 16px;
  background: var(--blue);
  transform: translateX(-50%);
  border-radius: 999px;
}
.timeline-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-muted);
}

.meals-grid { display: flex; flex-direction: column; gap: 6px; }

.meal-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-dark);
}
.meal-card.confirmed { border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.05); }
.meal-card.available { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.05); cursor: pointer; }
.meal-card.pending   { opacity: 0.5; }

.meal-icon { font-size: 20px; }
.meal-info { flex: 1; }
.meal-info strong { display: block; font-size: 13px; font-weight: 600; }
.meal-time { font-size: 11px; color: var(--text-secondary); }
.meal-status { display: block; font-size: 11px; margin-top: 2px; }
.confirmed-text { color: var(--green); }
.available-text { color: var(--yellow); }
.pending-text   { color: var(--text-muted); }
.missed-text    { color: var(--red); }
.pulse-text { animation: textPulse 1.5s infinite; }
@keyframes textPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.btn-meal-confirm {
  background: var(--yellow); color: #000;
  border: none; border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: 11px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}

/* Action Buttons */
.action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.action-btn {
  padding: 14px 10px;
  border: none; border-radius: var(--radius);
  cursor: pointer; font-weight: 600; font-size: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: all 0.2s;
}
.action-btn i { font-size: 20px; }
.action-btn.danger { background: rgba(239,68,68,0.15); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
.action-btn.warning { background: rgba(245,158,11,0.15); color: var(--yellow); border: 1px solid rgba(245,158,11,0.3); }
.action-btn:hover { transform: translateY(-2px); }

.btn-end-shift {
  width: 100%; padding: 12px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: var(--red); border-radius: var(--radius);
  cursor: pointer; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s;
}
.btn-end-shift:hover { background: rgba(239,68,68,0.2); }

/* Activity Feed */
.activity-feed {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
}
.activity-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.activity-dot.green { background: var(--green); }
.activity-dot.blue  { background: var(--blue); }
.activity-dot.red   { background: var(--red); }
.activity-text { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.activity-text span { font-size: 12px; }
.activity-text time { font-size: 10px; color: var(--text-muted); }

/* Step Indicator */
.step-indicator {
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.step {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  transition: all 0.3s;
}
.step.active { background: var(--blue); border-color: var(--blue); color: white; box-shadow: var(--shadow-glow-blue); }
.step.done   { background: var(--green); border-color: var(--green); color: white; }
.step-line {
  flex: 1; height: 2px; background: var(--border);
  max-width: 40px;
}
.step-labels {
  display: flex; justify-content: space-around;
  font-size: 10px; color: var(--text-muted);
  margin-top: 4px;
}

/* Occurrence Steps */
.occurrence-step { display: none; flex-direction: column; gap: 10px; }
.occurrence-step.active { display: flex; }
.occurrence-step h4 { font-size: 14px; color: var(--text-secondary); }

.priority-grid { display: flex; flex-direction: column; gap: 8px; }
.priority-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: pointer; transition: all 0.2s; text-align: left;
}
.priority-btn i { font-size: 22px; }
.priority-btn strong { display: block; font-size: 15px; }
.priority-btn span { font-size: 11px; color: var(--text-secondary); }
.priority-btn.low  i { color: var(--green); }
.priority-btn.medium i { color: var(--yellow); }
.priority-btn.high i   { color: var(--red); }
.priority-btn.selected { transform: scale(1.03); }
.priority-btn.low.selected  { border-color: var(--green); background: rgba(34,197,94,0.1); }
.priority-btn.medium.selected { border-color: var(--yellow); background: rgba(245,158,11,0.1); }
.priority-btn.high.selected   { border-color: var(--red); background: rgba(239,68,68,0.1); }

.type-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.type-btn {
  padding: 12px 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-primary); transition: all 0.2s;
}
.type-icon { font-size: 24px; }
.type-btn:hover,.type-btn.selected { border-color: var(--blue); background: rgba(59,130,246,0.1); color: var(--blue); }

.occ-textarea {
  width: 100%; padding: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: var(--radius); resize: vertical;
  font-family: 'Inter', sans-serif; font-size: 13px;
}
.occ-textarea:focus { outline: none; border-color: var(--blue); }
.occ-textarea.small { font-size: 12px; }

.photo-upload-area {
  padding: 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius); text-align: center;
  cursor: pointer; transition: all 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.photo-upload-area:hover { border-color: var(--blue); }
.photo-upload-area i { font-size: 24px; color: var(--blue); }
.photo-upload-area span { font-size: 13px; font-weight: 600; }
.photo-upload-area small { font-size: 11px; color: var(--text-muted); }

.photo-preview { position: relative; display: inline-block; }
.photo-preview img { width: 100%; border-radius: var(--radius); }
.remove-photo {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,0.7); border: none;
  color: white; border-radius: 50%; width: 24px; height: 24px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.location-auto {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.3); border-radius: var(--radius);
}
.location-auto i:first-child { color: var(--green); font-size: 18px; }
.location-auto strong { display: block; font-size: 13px; }
.location-auto span { font-size: 11px; color: var(--text-muted); }
.green-icon { color: var(--green); margin-left: auto; }
.red-icon   { color: var(--red); }
.blue-icon  { color: var(--blue); }

.occ-select {
  width: 100%; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
}
.occ-select:focus { outline: none; border-color: var(--blue); }

.step-navigation {
  display: flex; gap: 8px; margin-top: auto; padding-top: 8px;
}
.btn-step-prev, .btn-step-next {
  flex: 1; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); color: var(--text-primary);
  cursor: pointer; font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-step-next { background: var(--blue); border-color: var(--blue); color: white; }
.btn-submit-occ {
  flex: 1; padding: 12px;
  background: var(--green); border: none; border-radius: var(--radius);
  color: white; font-weight: 700; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Round Screen */
.round-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; text-align: center;
}
.round-circle {
  position: relative; width: 80px; height: 80px; margin: 0 auto 8px;
}
.round-circle svg { transform: rotate(-90deg); }
.circle-bg  { fill: none; stroke: var(--border); stroke-width: 2.5; }
.circle-fill { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dasharray 1s; }
.round-circle span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
}
.round-checkpoints { display: flex; flex-direction: column; gap: 8px; }
.checkpoint {
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px;
}
.checkpoint.done { border-color: rgba(34,197,94,0.3); color: var(--green); }
.checkpoint.current { border-color: rgba(59,130,246,0.5); color: var(--blue); font-weight: 700; background: rgba(59,130,246,0.08); }
.checkpoint i { font-size: 16px; }
.cp-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.cp-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cp-time { font-size: 11px; color: var(--text-muted); font-family: monospace; }

/* Round footer actions */
.round-footer-actions {
  display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap;
}
.btn-round-qr {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.3);
  color: #a78bfa; border-radius: var(--radius); padding: 10px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-round-qr:hover { background: rgba(139,92,246,0.2); color: #c4b5fd; }
.btn-cta-sm {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, var(--green), #16a34a);
  border: none; color: #fff; border-radius: var(--radius); padding: 10px 14px;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s;
  box-shadow: 0 3px 10px rgba(34,197,94,0.3);
}
.btn-cta-sm:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(34,197,94,0.4); }

/* Handover Card */
.handover-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.handover-title {
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(239,68,68,0.3), rgba(59,130,246,0.3), rgba(34,197,94,0.3));
  text-align: center; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-secondary);
}
.handover-guards {
  display: flex; align-items: center; padding: 16px;
  gap: 8px;
}
.guard-side { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.guard-side strong { font-size: 13px; font-weight: 700; }
.guard-shift { font-size: 10px; color: var(--text-secondary); }

.guard-avatar-lg {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; border: 3px solid;
}
.guard-avatar-lg.red   { background: rgba(239,68,68,0.15); color: var(--red); border-color: var(--red); }
.guard-avatar-lg.green { background: rgba(34,197,94,0.15); color: var(--green); border-color: var(--green); }
.pulse-border { box-shadow: 0 0 0 4px rgba(34,197,94,0.3); }

.guard-status-badge {
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px;
}
.guard-status-badge.red   { background: rgba(239,68,68,0.15); color: var(--red); }
.guard-status-badge.green { background: rgba(34,197,94,0.15); color: var(--green); }
.guard-bi { font-size: 9px; color: var(--text-muted); font-family: monospace; }

.handover-arrow { text-align: center; }
.arrow-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(59,130,246,0.15); border: 1px solid var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--blue); margin: 0 auto 4px;
}
.handover-arrow span { font-size: 9px; color: var(--text-muted); }

/* Shift Summary */
.shift-summary {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
}
.summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }
.summary-item {
  text-align: center; padding: 8px;
  background: var(--bg-dark); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 4px;
}
.summary-item i { font-size: 16px; }
.summary-item span { font-size: 10px; color: var(--text-secondary); }
.summary-item strong { font-size: 14px; font-weight: 700; }

.meals-summary { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.meals-summary h5 { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.meals-summary-row { display: flex; flex-direction: column; gap: 4px; }
.meal-summary-item { font-size: 11px; display: flex; align-items: center; gap: 6px; }
.meal-summary-item.confirmed-text { color: var(--green); }
.meal-summary-item.missed-text    { color: var(--red); }

.rounds-progress { margin-top: 8px; }
.progress-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.progress-bar-bg { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--green); border-radius: 999px; transition: width 1s; }

/* Rating */
.rating-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.star-rating { display: flex; gap: 6px; font-size: 24px; cursor: pointer; }
.star-rating .fas { color: var(--yellow); }
.star-rating .far { color: var(--border-light); }

/* Checklist */
.checklist-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
}
.checklist-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: 12px;
}
.checklist-item:last-of-type { border-bottom: none; }
.checklist-item input[type="checkbox"] { margin-top: 2px; accent-color: var(--green); transform: scale(1.2); }
.checklist-counter {
  font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 8px;
  padding: 6px; background: var(--bg-dark); border-radius: var(--radius-sm);
}

.btn-end-shift-final {
  width: 100%; padding: 16px;
  border: none; border-radius: var(--radius);
  font-size: 15px; font-weight: 800; cursor: pointer;
  background: linear-gradient(135deg, var(--red), #b91c1c);
  color: white; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s;
}
.btn-end-shift-final.disabled {
  background: var(--bg-card); color: var(--text-muted);
  pointer-events: none;
}

/* Waiting Confirmation */
.waiting-confirmation {
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius); padding: 12px;
}
.waiting-inner {
  display: flex; align-items: center; gap: 12px;
}
.waiting-inner strong { font-size: 13px; color: var(--yellow); }
.waiting-inner p { font-size: 11px; color: var(--text-secondary); }
.spinner {
  width: 28px; height: 28px; flex-shrink: 0;
  border: 3px solid var(--border);
  border-top-color: var(--yellow);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Receive Shift Screen */
.receive-alert-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 13px; color: var(--yellow); font-weight: 600;
}
.receive-alert-banner i { font-size: 18px; }

/* Observations from guard */
.obs-from-guard {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
}
.obs-note-card {
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: var(--radius-sm); padding: 12px;
  position: relative;
}
.obs-note-card i { color: var(--yellow); opacity: 0.5; font-size: 16px; }
.obs-note-card p { font-size: 12px; margin: 6px 0; font-style: italic; }
.obs-note-card small { font-size: 10px; color: var(--text-muted); }

/* Equipment Verification */
.equipment-verification {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
}
.equipment-check-list { display: flex; flex-direction: column; gap: 8px; }

.equip-check-card {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
}
.equip-check-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.equip-icon { font-size: 20px; }
.equip-info { flex: 1; }
.equip-info strong { display: block; font-size: 13px; font-weight: 600; }
.equip-info small { font-size: 10px; color: var(--text-muted); font-family: monospace; }

.equip-status-buttons { display: flex; gap: 6px; }
.equip-btn {
  flex: 1; padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-secondary);
  cursor: pointer; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: all 0.2s;
}
.equip-btn.ok.active     { background: rgba(34,197,94,0.2); border-color: var(--green); color: var(--green); }
.equip-btn.warn.active   { background: rgba(245,158,11,0.2); border-color: var(--yellow); color: var(--yellow); }
.equip-btn.absent.active { background: rgba(239,68,68,0.2); border-color: var(--red); color: var(--red); }

.equip-issue-field { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.photo-upload-mini {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--blue); cursor: pointer;
  padding: 6px 10px; border: 1px dashed var(--blue);
  border-radius: var(--radius-sm);
}
.issue-warn-note {
  font-size: 10px; color: var(--yellow);
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: rgba(245,158,11,0.08);
  border-radius: var(--radius-sm);
}

.equip-summary-bar {
  display: flex; gap: 12px; justify-content: center;
  padding: 10px; margin-top: 10px;
  background: var(--bg-dark); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600;
}
.equip-summary-bar .ok-count     { color: var(--green); display: flex; align-items: center; gap: 4px; }
.equip-summary-bar .warn-count   { color: var(--yellow); display: flex; align-items: center; gap: 4px; }
.equip-summary-bar .absent-count { color: var(--red); display: flex; align-items: center; gap: 4px; }

/* Obs Section */
.obs-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
}

/* Screen Nav Pills */
.screen-nav-pills {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.screen-pill {
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer; font-size: 12px;
  transition: all 0.2s;
}
.screen-pill.active,
.screen-pill:hover { background: var(--blue); border-color: var(--blue); color: white; }

/* =========================================
   WEB BACKOFFICE
   ========================================= */
.web-container {
  display: flex; height: calc(100vh - 65px);
  background: var(--bg-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Sidebar */
.sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 16px 0;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px 16px;
  font-size: 16px; font-weight: 800;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.sidebar-brand i { color: var(--blue); }

.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: none; border: none; border-radius: var(--radius);
  color: var(--text-secondary); cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: all 0.2s;
  position: relative;
  width: 100%; text-align: left;
}
.nav-item i { width: 18px; text-align: center; }
.nav-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.nav-item.active {
  background: rgba(59,130,246,0.15);
  color: var(--blue);
  border-left: 3px solid var(--blue);
}

.nav-badge {
  margin-left: auto; padding: 2px 7px;
  background: var(--bg-card);
  border-radius: 999px; font-size: 10px; font-weight: 700;
}
.nav-badge.warn { background: rgba(245,158,11,0.2); color: var(--yellow); }
.nav-badge.red  { background: rgba(239,68,68,0.2); color: var(--red); }

.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(59,130,246,0.2); color: var(--blue);
  border: 2px solid var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.user-info strong { display: block; font-size: 13px; font-weight: 600; }
.user-info span   { font-size: 11px; color: var(--text-secondary); }

/* Web Main */
.web-main {
  flex: 1; overflow-y: auto;
  background: var(--bg-dark); padding: 24px;
}
.web-main::-webkit-scrollbar { width: 5px; }
.web-main::-webkit-scrollbar-track { background: transparent; }
.web-main::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Web Pages */
.web-page { display: none; }
.web-page.active { display: block; }

/* Page Header */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.page-header h1 { font-size: 22px; font-weight: 800; }
.page-header p  { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Web Buttons */
.btn-web-primary {
  padding: 9px 18px;
  background: var(--blue); border: none; border-radius: var(--radius);
  color: white; font-weight: 600; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all 0.2s;
}
.btn-web-primary:hover { background: var(--cta-hover); transform: translateY(-1px); }
.btn-web-secondary {
  padding: 9px 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-primary);
  font-weight: 500; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all 0.2s;
}
.btn-web-secondary:hover { border-color: var(--blue); color: var(--blue); }
.btn-web-secondary.small { padding: 6px 12px; font-size: 12px; }
.btn-web-danger {
  padding: 6px 12px;
  background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius); color: var(--red);
  font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all 0.2s;
}
.btn-web-danger:hover { background: rgba(239,68,68,0.25); }

/* Critical Alert */
.critical-alert {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; margin-bottom: 20px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: var(--radius);
  animation: alertSlideIn 0.5s ease;
}
@keyframes alertSlideIn { from { opacity:0; transform: translateY(-10px); } to { opacity:1; transform: translateY(0); } }
.critical-alert i { color: var(--red); font-size: 20px; }
.alert-content { flex: 1; }
.alert-content strong { display: block; font-size: 14px; color: var(--red); }
.alert-content span   { font-size: 12px; color: var(--text-secondary); }
.btn-alert-dismiss {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 16px; padding: 4px;
}
.pulse-border-red { box-shadow: 0 0 0 2px rgba(239,68,68,0.3); }

/* KPI Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.kpi-grid.mini { grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); margin-bottom: 16px; }

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; transition: all 0.2s;
}
.kpi-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi-card.mini { padding: 12px; }

.kpi-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.kpi-icon.green  { background: rgba(34,197,94,0.15); color: var(--green); }
.kpi-icon.blue   { background: rgba(59,130,246,0.15); color: var(--blue); }
.kpi-icon.blue2  { background: rgba(99,179,237,0.15); color: #63b3ed; }
.kpi-icon.red    { background: rgba(239,68,68,0.15); color: var(--red); }
.kpi-icon.yellow { background: rgba(245,158,11,0.15); color: var(--yellow); }
.kpi-card.mini .kpi-icon { width: 36px; height: 36px; font-size: 15px; border-radius: 8px; }

.kpi-info span  { font-size: 11px; color: var(--text-secondary); display: block; }
.kpi-info strong { font-size: 20px; font-weight: 800; }
.kpi-card.mini .kpi-info strong { font-size: 16px; }
.kpi-info small { color: var(--text-muted); font-size: 13px; }

.kpi-trend {
  margin-left: auto; font-size: 11px; font-weight: 600;
  padding: 4px 8px; border-radius: 999px;
  display: flex; align-items: center; gap: 3px; white-space: nowrap;
}
.kpi-trend.up   { background: rgba(34,197,94,0.1); color: var(--green); }
.kpi-trend.down { background: rgba(239,68,68,0.1); color: var(--red); }
.kpi-trend.neutral { background: rgba(245,158,11,0.1); color: var(--yellow); }

/* Dashboard Grid */
.dashboard-grid {
  display: grid; grid-template-columns: 1fr 380px; gap: 16px;
}
@media (max-width: 1100px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* Map Card */
.map-card, .feed-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.map-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.map-header h3 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.map-legend { display: flex; gap: 12px; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.green { background: var(--green); }
.dot.red   { background: var(--red); }
.dot.yellow { background: var(--yellow); }
.map-area { padding: 8px; position: relative; }
.angola-map { width: 100%; height: auto; cursor: pointer; }
.map-post { cursor: pointer; transition: opacity 0.2s; }
.map-post:hover { opacity: 0.8; }
.map-pulse { animation: mapPulse 2s infinite; }
@keyframes mapPulse {
  0%,100% { r: 10; opacity: 0.9; }
  50%      { r: 12; opacity: 1; }
}
.map-tooltip {
  position: absolute; background: var(--bg-dark);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 12px; pointer-events: none;
  box-shadow: var(--shadow);
}

/* Feed Card */
.feed-card { padding: 0; }
.feed-card h3 { padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.live-feed { padding: 8px 0; max-height: 320px; overflow-y: auto; }
.feed-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}
.feed-item:hover { background: var(--bg-card-hover); }
.feed-item:last-child { border-bottom: none; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.feed-dot.red    { background: var(--red); box-shadow: 0 0 6px rgba(239,68,68,0.5); }
.feed-dot.green  { background: var(--green); }
.feed-dot.blue   { background: var(--blue); }
.feed-dot.yellow { background: var(--yellow); }
.feed-text { flex: 1; }
.feed-text strong { display: block; font-size: 12px; font-weight: 700; }
.feed-text span   { font-size: 11px; color: var(--text-secondary); }
.feed-text time   { display: block; font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* Filters Row */
.filters-row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px;
}
.filter-chip {
  padding: 6px 14px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer; font-size: 12px;
  transition: all 0.2s;
}
.filter-chip.active { background: var(--blue); border-color: var(--blue); color: white; }
.filter-chip.red-chip.active  { background: rgba(239,68,68,0.15); border-color: var(--red); color: var(--red); }
.filter-chip.yellow-chip.active { background: rgba(245,158,11,0.15); border-color: var(--yellow); color: var(--yellow); }
.filter-chip.green-chip.active  { background: rgba(34,197,94,0.15); border-color: var(--green); color: var(--green); }
.filter-chip:hover { border-color: var(--blue); color: var(--blue); }
.filter-select {
  padding: 6px 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: 999px; font-size: 12px;
}

/* Data Table */
.data-table-wrapper { overflow-x: auto; }
.data-table {
  width: 100%; border-collapse: collapse;
}
.data-table th, .data-table td {
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.data-table th {
  background: var(--bg-sidebar);
  color: var(--text-secondary); font-size: 11px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.data-table tr:hover td { background: var(--bg-card-hover); }
.data-table .row-alert td { background: rgba(239,68,68,0.04); }

.table-user { display: flex; align-items: center; gap: 10px; }
.table-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.table-avatar.green  { background: rgba(34,197,94,0.15); color: var(--green); }
.table-avatar.blue   { background: rgba(59,130,246,0.15); color: var(--blue); }
.table-avatar.orange { background: rgba(249,115,22,0.15); color: var(--orange); }
.table-avatar.purple { background: rgba(139,92,246,0.15); color: var(--purple); }
.table-avatar.red    { background: rgba(239,68,68,0.15); color: var(--red); }
.table-avatar.teal   { background: rgba(20,184,166,0.15); color: var(--teal); }
.table-user strong { display: block; font-size: 13px; }
.table-user small  { font-size: 10px; color: var(--text-muted); font-family: monospace; }

.btn-table {
  padding: 5px 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-secondary);
  cursor: pointer; font-size: 12px; transition: all 0.2s;
  margin-right: 4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.btn-table:hover        { border-color: var(--blue); color: var(--blue); }
.btn-table.green:hover  { border-color: var(--green); color: var(--green); }
.btn-table.red:hover    { border-color: var(--red); color: var(--red); }

/* Badge variants */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge.green   { background: rgba(34,197,94,0.15); color: var(--green); }
.badge.red     { background: rgba(239,68,68,0.15); color: var(--red); }
.badge.yellow  { background: rgba(245,158,11,0.15); color: var(--yellow); }
.badge.blue    { background: rgba(59,130,246,0.15); color: var(--blue); }
.badge.blue-bd { background: rgba(59,130,246,0.1); color: #60a5fa; }
.badge.navy    { background: rgba(30,64,175,0.2); color: #93c5fd; }
.badge-cat {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(139,92,246,0.15); color: var(--purple);
  font-size: 10px; font-weight: 600;
}

.text-red { color: var(--red); }

/* Postos Grid */
.postos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px;
}
.posto-card {
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 16px; position: relative;
  transition: all 0.2s;
}
.posto-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.posto-card.green { border-color: rgba(34,197,94,0.3); }
.posto-card.red   { border-color: rgba(239,68,68,0.3); }
.posto-card.yellow{ border-color: rgba(245,158,11,0.3); }
.posto-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  position: absolute; top: 12px; right: 12px;
}
.posto-card.green .posto-status-dot { background: var(--green); box-shadow: var(--shadow-glow-green); }
.posto-card.red   .posto-status-dot { background: var(--red); box-shadow: var(--shadow-glow-red); }
.posto-card.yellow .posto-status-dot { background: var(--yellow); }
.posto-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.posto-card p  { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }

/* =========================================
   POSTO CARD RICH — Cards expandidos
   ========================================= */
.posto-card-rich {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: all 0.25s;
  overflow: hidden;
}
.posto-card-rich:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.posto-card-rich.green { border-color: rgba(34,197,94,0.3); }
.posto-card-rich.red   { border-color: rgba(239,68,68,0.35); }
.posto-card-rich.yellow{ border-color: rgba(245,158,11,0.35); }

/* Header do card */
.pcr-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.pcr-status-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.pcr-status-dot.green  { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.pcr-status-dot.red    { background: var(--red);   box-shadow: 0 0 6px rgba(239,68,68,0.5); }
.pcr-status-dot.yellow { background: var(--yellow);}

.pcr-title-block { flex: 1; min-width: 0; }
.pcr-title-block h4 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcr-client { font-size: 11px; color: var(--text-muted); }

/* Meta row */
.pcr-meta {
  display: flex; gap: 12px; padding: 8px 16px;
  flex-wrap: wrap; background: rgba(255,255,255,0.015);
  border-bottom: 1px solid var(--border);
}
.pcr-meta-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); }
.pcr-meta-item i { color: var(--text-muted); font-size: 10px; }

/* KPI strip */
.pcr-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; padding: 10px 12px;
}
.pcr-kpi {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px;
  border-right: 1px solid var(--border);
}
.pcr-kpi:last-child { border-right: none; }
.pcr-kpi i   { font-size: 14px; }
.pcr-kpi strong { font-size: 18px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.pcr-kpi span { font-size: 10px; color: var(--text-muted); text-align: center; }

/* Turno info */
.pcr-shift-info {
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: rgba(34,197,94,0.03);
}
.pcr-shift-guard {
  display: flex; align-items: center; gap: 10px; font-size: 12px;
}
.pcr-shift-guard > div { flex: 1; }
.pcr-shift-guard strong { display: block; font-size: 12px; font-weight: 600; color: var(--text-primary); }
.pcr-shift-guard span { font-size: 10px; color: var(--text-muted); }

/* Alert banner */
.pcr-alert-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: rgba(239,68,68,0.1); border-top: 1px solid rgba(239,68,68,0.2);
  font-size: 11px; color: #fca5a5;
}
.pcr-alert-banner i { color: var(--red); flex-shrink: 0; }
.pcr-alert-banner.yellow {
  background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); color: #fcd34d;
}
.pcr-alert-banner.yellow i { color: var(--yellow); }

/* Guard avatar small */
.guard-avatar-sm {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px; flex-shrink: 0;
}
.guard-avatar-sm.green  { background: rgba(34,197,94,0.15);  color: var(--green);  border: 1px solid rgba(34,197,94,0.3); }
.guard-avatar-sm.blue   { background: rgba(59,130,246,0.15); color: var(--primary);border: 1px solid rgba(59,130,246,0.3); }
.guard-avatar-sm.yellow { background: rgba(245,158,11,0.15); color: var(--yellow); border: 1px solid rgba(245,158,11,0.3); }
.guard-avatar-sm.purple { background: rgba(139,92,246,0.15); color: #a78bfa;       border: 1px solid rgba(139,92,246,0.3); }
.guard-avatar-sm.red    { background: rgba(239,68,68,0.15);  color: var(--red);    border: 1px solid rgba(239,68,68,0.3); }

/* Action buttons row */
.pcr-actions {
  display: flex; gap: 0;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.btn-pcr-action {
  flex: 1; padding: 10px 8px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12px; font-weight: 600; cursor: pointer; border: none;
  border-right: 1px solid var(--border); background: transparent;
  transition: all 0.18s; color: var(--text-secondary);
}
.btn-pcr-action:last-child { border-right: none; }
.btn-pcr-action:hover { background: rgba(255,255,255,0.05); }
.btn-pcr-action.blue:hover  { background: rgba(59,130,246,0.1);  color: var(--primary); }
.btn-pcr-action.green:hover { background: rgba(34,197,94,0.1);   color: var(--green); }
.btn-pcr-action.grey:hover  { background: rgba(148,163,184,0.1); color: var(--text-primary); }
.btn-pcr-action i { font-size: 13px; }

/* badge.small */
.badge.small { font-size: 10px; padding: 2px 7px; }

/* =========================================
   MODAIS DE POSTOS — Histórico, Gerir, Editar
   ========================================= */

/* Modal xlarge */
.modal.xlarge { max-width: 960px; width: 96vw; max-height: 90vh; }

/* KPI strip do Histórico */
.ph-kpi-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 0; background: var(--bg-deep);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 16px;
}
.ph-kpi {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px; border-right: 1px solid var(--border);
  text-align: center;
}
.ph-kpi:last-child { border-right: none; }
.ph-kpi i { font-size: 18px; }
.ph-kpi strong { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.ph-kpi span   { font-size: 11px; color: var(--text-muted); }

/* Tabs Historico / Gerir */
.ph-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.ph-tab {
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; gap: 6px; margin-bottom: -1px;
}
.ph-tab:hover  { color: var(--text-primary); }
.ph-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Panels */
.ph-panel, .pg-panel { display: none; }
.ph-panel.active, .pg-panel.active { display: block; }

/* Filter row */
.ph-filter-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}

/* Timeline */
.ph-timeline { display: flex; flex-direction: column; gap: 0; max-height: 420px; overflow-y: auto; }
.ph-tl-item {
  display: flex; gap: 14px; padding: 12px 4px;
  border-bottom: 1px solid var(--border); position: relative;
}
.ph-tl-item:last-child { border-bottom: none; }
.ph-tl-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
}
.ph-tl-dot.blue   { background: var(--primary); }
.ph-tl-dot.green  { background: var(--green); }
.ph-tl-dot.red    { background: var(--red); }
.ph-tl-dot.yellow { background: var(--yellow); }
.ph-tl-dot.purple { background: #a78bfa; }
.ph-tl-content  { flex: 1; }
.ph-tl-header   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.ph-tl-icon     { font-size: 14px; }
.ph-tl-title    { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
.ph-tl-time     { font-size: 11px; color: var(--text-muted); font-family: monospace; }
.ph-tl-detail   { font-size: 12px; color: var(--text-secondary); margin: 0; }

/* Rondas stats */
.ph-rondas-chart-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 4px;
}
.ph-ronda-stat {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; text-align: center;
  display: flex; flex-direction: column; gap: 4px;
}
.ph-ronda-stat strong { font-size: 24px; font-weight: 800; color: var(--text-primary); }
.ph-ronda-stat span   { font-size: 11px; color: var(--text-muted); }
.ph-ronda-stat.green strong { color: var(--green); }
.ph-ronda-stat.blue strong  { color: var(--primary); }
.ph-ronda-stat.yellow strong{ color: var(--yellow); }

/* Performance bar */
.perf-bar { height: 6px; background: var(--border); border-radius: 3px; width: 80px; display: inline-block; vertical-align: middle; margin-right: 4px; }
.perf-fill { height: 100%; border-radius: 3px; }

/* ── GERIR POSTO ─────────────────────────────────────── */

/* Status bar */
.pg-status-bar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
}
.pg-status-item { display: flex; flex-direction: column; gap: 3px; }
.pg-status-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* Coverage alert */
.pg-coverage-alert {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.pg-coverage-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 12px; flex: 1; min-width: 160px;
}
.pg-coverage-item i { font-size: 16px; color: var(--text-muted); }
.pg-coverage-item strong { font-weight: 700; color: var(--text-primary); }
.pg-coverage-item span   { color: var(--text-muted); flex: 1; }
.pg-coverage-item.green { border-color: rgba(34,197,94,0.25); background: rgba(34,197,94,0.04); }
.pg-coverage-item.green i { color: var(--green); }

/* Escala de serviço */
.pg-escala-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.pg-escala-header h4 { font-size: 14px; margin: 0; flex: 1; text-align: center; color: var(--text-primary); }

.pg-escala-grid {
  display: grid; grid-template-columns: 130px repeat(7, 1fr);
  gap: 2px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.pg-escala-head {
  background: var(--bg-deep); padding: 8px 4px;
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.pg-escala-name {
  background: var(--bg-card); padding: 10px 12px;
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border);
}
.pg-escala-cell {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 4px; font-size: 11px; font-weight: 600;
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  text-align: center; cursor: pointer; transition: all 0.15s;
}
.pg-escala-cell:hover   { filter: brightness(1.2); }
.shift-diurno  { background: rgba(245,158,11,0.12); color: #fcd34d; }
.shift-noturno { background: rgba(59,130,246,0.12); color: #93c5fd; }
.shift-folga   { background: rgba(34,197,94,0.08);  color: #6ee7b7; }

/* Equipment grid */
.pg-equip-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px;
}
.pg-equip-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
  transition: all 0.2s;
}
.pg-equip-card:hover { border-color: rgba(59,130,246,0.3); }
.pg-equip-icon { font-size: 24px; flex-shrink: 0; }
.pg-equip-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pg-equip-info strong { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.pg-equip-info span   { font-size: 11px; color: var(--text-muted); }

/* Inline input for checkpoints table */
.inline-input {
  padding: 5px 8px !important; font-size: 12px !important;
  min-height: unset !important; height: 30px !important;
  border-radius: 4px !important;
}

/* Equipment Tabs */
.subtab-bar {
  display: flex; gap: 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px;
  margin-bottom: 16px; width: fit-content;
}
.subtab-btn {
  padding: 8px 18px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary);
  cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.subtab-btn.active { background: var(--blue); color: white; }
.subtab-btn:hover:not(.active) { background: var(--bg-card-hover); color: var(--text-primary); }

.equip-tab { display: none; }
.equip-tab.active { display: block; }

/* Security Banner */
.security-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; margin-bottom: 16px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius);
}
.security-banner i { color: var(--red); font-size: 20px; }
.security-banner strong { display: block; font-size: 13px; color: var(--red); }
.security-banner span   { font-size: 12px; color: var(--text-secondary); }

/* Table actions row */
.table-actions-row {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap;
}
.filter-chips-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ═══ FILTRO POR CLIENTE ═══════════════════════════════ */
.postos-client-filter-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.pcf-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; flex-shrink: 0; cursor: default;
}
.pcf-label i { font-size: 11px; }

/* Select estilizado */
.pcf-select-wrap {
  position: relative;
  display: inline-flex; align-items: center;
  min-width: 240px;
}
.pcf-select {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px; font-weight: 500;
  padding: 8px 38px 8px 14px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  font-family: inherit;
}
.pcf-select:hover {
  border-color: rgba(99,102,241,0.45);
}
.pcf-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.pcf-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}
.pcf-select-arrow {
  position: absolute; right: 12px;
  font-size: 11px; color: var(--text-muted);
  pointer-events: none;
  transition: transform 0.2s;
}
.pcf-select-wrap:focus-within .pcf-select-arrow {
  transform: rotate(180deg);
}
/* Indicador colorido do cliente selecionado */
.pcf-color-dot {
  position: absolute; left: 12px;
  width: 9px; height: 9px; border-radius: 50%;
  pointer-events: none;
  transition: background 0.2s;
  display: none;
}
.pcf-select-wrap.has-client .pcf-color-dot { display: block; }
.pcf-select-wrap.has-client .pcf-select    { padding-left: 30px; }

/* ═══ BANNER CLIENTE ATIVO ══════════════════════════════ */
.posto-client-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.06));
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 16px;
  animation: fadeInOverlay 0.25s ease;
}
.pcb-inner {
  display: flex; align-items: center; gap: 14px; flex: 1; flex-wrap: wrap;
}
.pcb-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  color: #fff; font-weight: 900; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.pcb-info {
  display: flex; flex-direction: column; gap: 3px;
}
.pcb-info strong { font-size: 14px; color: var(--text-primary); font-weight: 800; }
.pcb-info span   { font-size: 11px; color: var(--text-muted); }
.pcb-stats {
  display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto;
}
.pcb-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pcb-stat strong { font-size: 14px; font-weight: 800; }
.pcb-stat span   { font-size: 10px; color: var(--text-muted); }
.pcb-clear {
  background: rgba(255,255,255,0.07); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 8px;
  padding: 6px 12px; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.pcb-clear:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: var(--red); }

@media (max-width: 768px) {
  .postos-client-filter-row { flex-direction: column; align-items: flex-start; }
  .pcb-stats { margin-left: 0; }
  .posto-client-banner { flex-direction: column; align-items: flex-start; }
}

.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 14px; flex: 1; min-width: 200px;
}
.search-box i { color: var(--text-muted); }
.search-box input {
  background: none; border: none; color: var(--text-primary);
  font-family: 'Inter', sans-serif; font-size: 13px; flex: 1;
}
.search-box input:focus { outline: none; }

/* =========================================
   MODALS
   ========================================= */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeInOverlay 0.2s ease;
}
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUpModal 0.3s ease;
}
.modal::-webkit-scrollbar { width: 5px; }
.modal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
@keyframes slideUpModal { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.modal.small  { width: 100%; max-width: 400px; }
.modal.medium { width: 100%; max-width: 600px; }
.modal.large  { width: 100%; max-width: 800px; }

.modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-card); z-index: 1;
}
.modal-header h3 { font-size: 16px; font-weight: 700; flex: 1; display: flex; align-items: center; gap: 8px; }
.modal-header-badge {
  padding: 4px 10px; border-radius: 999px;
  background: rgba(239,68,68,0.1); color: var(--red); font-size: 11px; font-weight: 700;
}
.modal-close {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 18px; padding: 4px;
  transition: color 0.2s; border-radius: 50%; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { color: var(--red); }

.modal-body { padding: 20px 24px; }

.form-sections { display: flex; flex-direction: column; gap: 20px; }
.form-section {
  background: var(--bg-dark); border-radius: var(--radius);
  padding: 16px; border: 1px solid var(--border);
}
.form-section-title {
  font-size: 13px; font-weight: 700; color: var(--blue);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.form-input {
  padding: 9px 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif; font-size: 13px;
  transition: border-color 0.2s;
}
.form-input:focus { outline: none; border-color: var(--blue); }
.form-input[readonly] { color: var(--text-muted); cursor: not-allowed; }
.no-left-border { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; }

.phone-input { display: flex; }
.phone-input span {
  padding: 9px 10px; background: var(--bg-sidebar); border: 1px solid var(--border);
  border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--text-secondary); font-size: 12px;
}

/* Avatar Upload */
.avatar-upload-center { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 12px; }
.avatar-upload-circle {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bg-card); border: 3px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; overflow: hidden;
  font-size: 20px; font-weight: 700; color: var(--blue);
  transition: border-color 0.2s;
}
.avatar-upload-circle:hover { border-color: var(--blue); }
.avatar-overlay {
  position: absolute; inset: 0;
  background: rgba(59,130,246,0.7);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.avatar-upload-circle:hover .avatar-overlay { opacity: 1; }

/* Shift Selector */
.shift-selector { display: flex; gap: 6px; }
.shift-opt {
  flex: 1; padding: 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-card);
  color: var(--text-secondary); cursor: pointer; font-size: 12px;
  text-align: center; transition: all 0.2s;
}
.shift-opt.active { background: rgba(59,130,246,0.15); border-color: var(--blue); color: var(--blue); }

/* Doc Upload Zones */
.doc-upload-zone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 12px; border: 2px dashed var(--border);
  border-radius: var(--radius); cursor: pointer; text-align: center;
  transition: all 0.2s;
}
.doc-upload-zone:hover { border-color: var(--blue); }
.doc-upload-zone i { font-size: 24px; color: var(--blue); }
.doc-upload-zone span { font-size: 12px; font-weight: 500; }
.doc-upload-zone small { font-size: 10px; color: var(--text-muted); }
.doc-upload-row { display: flex; gap: 10px; }
.doc-upload-zone.small { padding: 12px 8px; flex: 1; }
.doc-upload-zone.small i { font-size: 18px; }
.doc-upload-zone.small span { font-size: 11px; }

/* Checkbox Group */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-item {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 12px; padding: 6px 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); transition: all 0.2s;
}
.checkbox-item input { accent-color: var(--green); }
.checkbox-item:hover { border-color: var(--blue); }

/* Stepper */
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); cursor: pointer; font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.stepper button:hover { background: var(--blue); border-color: var(--blue); }
.stepper-input {
  width: 60px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: var(--radius-sm); padding: 6px;
  font-size: 14px; font-weight: 600;
}

/* Map Placeholder */
.map-placeholder {
  height: 120px; background: var(--bg-dark);
  border: 1px dashed var(--border); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  gap: 8px; color: var(--text-muted); font-size: 13px; margin-top: 8px;
}
.map-placeholder i { font-size: 24px; }

/* Invoice Table */
.invoice-table {
  width: 100%; border-collapse: collapse; margin-bottom: 8px;
}
.invoice-table th, .invoice-table td {
  padding: 8px 10px; border: 1px solid var(--border); font-size: 12px;
}
.invoice-table th { background: var(--bg-sidebar); color: var(--text-secondary); font-size: 11px; }
.inv-input {
  width: 100%; background: transparent; border: none; color: var(--text-primary);
  font-family: 'Inter', sans-serif; font-size: 12px;
}
.inv-input.small { width: 50px; }
.inv-input:focus { outline: none; background: rgba(59,130,246,0.05); }
.inv-total { font-weight: 600; white-space: nowrap; }
.btn-inv-rm {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 12px; padding: 2px 6px; border-radius: 3px;
}
.btn-inv-rm:hover { color: var(--red); }
.btn-add-row {
  background: none; border: 1px dashed var(--border); color: var(--blue);
  border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer;
  font-size: 12px; display: flex; align-items: center; gap: 6px; margin-top: 6px;
}
.invoice-totals { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.inv-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 13px; background: var(--bg-dark);
}
.inv-total-row.grand {
  background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3);
  font-size: 16px; font-weight: 800;
}
.inv-total-row.grand strong { color: var(--green); }

/* Priority Inline */
.priority-inline { display: flex; gap: 6px; }
.prio-opt {
  flex: 1; padding: 7px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-card);
  cursor: pointer; font-size: 12px; font-weight: 600; text-align: center;
  transition: all 0.2s;
}
.prio-opt.active.green { background: rgba(34,197,94,0.15); border-color: var(--green); color: var(--green); }
.prio-opt.active.yellow { background: rgba(245,158,11,0.15); border-color: var(--yellow); color: var(--yellow); }
.prio-opt.active.red   { background: rgba(239,68,68,0.15); border-color: var(--red); color: var(--red); }

/* Modal Actions */
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 16px; margin-top: 16px;
  border-top: 1px solid var(--border);
}

/* Success Modal */
.success-modal { text-align: center; padding: 32px 24px; }
.success-icon { font-size: 56px; color: var(--green); margin-bottom: 12px; animation: popIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-modal h3 { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.success-modal p  { color: var(--text-secondary); margin-bottom: 8px; }
.warn-note { color: var(--yellow); font-size: 12px; display: flex; align-items: center; gap: 6px; justify-content: center; }

/* Confirm Transfer */
.confirm-transfer {
  padding: 14px; background: var(--bg-dark); border-radius: var(--radius);
  text-align: center; margin-bottom: 16px; font-size: 14px;
}
.confirm-transfer i { color: var(--blue); margin: 0 8px; }

/* Meal Modal */
.meal-confirm-buttons { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.btn-meal-yes, .btn-meal-no {
  padding: 12px; border: none; border-radius: var(--radius);
  cursor: pointer; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s;
}
.btn-meal-yes { background: rgba(34,197,94,0.15); color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
.btn-meal-no  { background: rgba(239,68,68,0.1); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
.btn-meal-yes:hover { background: rgba(34,197,94,0.25); }
.btn-meal-no:hover  { background: rgba(239,68,68,0.2); }
.btn-submit-full {
  width: 100%; padding: 10px; margin-top: 8px;
  background: var(--blue); border: none; border-radius: var(--radius);
  color: white; font-weight: 700; cursor: pointer;
}

/* Arma Detail */
.arma-detail-grid { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.arma-info-card {
  flex: 1; display: flex; gap: 16px; align-items: flex-start;
  background: var(--bg-dark); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.arma-icon-big { font-size: 48px; }
.data-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.data-row:last-child { border: none; }
.data-row span { font-size: 12px; color: var(--text-secondary); }
.data-row strong { font-size: 13px; font-weight: 600; }
.arma-data { flex: 1; }
.arma-alert-box {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius); font-size: 13px;
}
.arma-alert-box i { color: var(--yellow); font-size: 20px; }
.arma-alert-box strong { display: block; color: var(--yellow); }
.arma-alert-box span { color: var(--text-secondary); }

/* Timeline */
.timeline-section h4 { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.timeline { display: flex; flex-direction: column; gap: 2px; }
.timeline-item {
  display: flex; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--border); position: relative;
}
.timeline-item:last-child { border: none; }
.tl-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
}
.tl-dot.green  { background: var(--green); }
.tl-dot.blue   { background: var(--blue); }
.tl-dot.orange { background: var(--orange); }
.tl-dot.purple { background: var(--purple); }
.tl-content strong { display: block; font-size: 12px; font-weight: 700; }
.tl-content p      { font-size: 11px; color: var(--text-secondary); }
.tl-content time   { font-size: 10px; color: var(--text-muted); }

/* Efetivo Panel */
.efetivo-profile {
  display: flex; align-items: center; gap: 16px;
  padding: 16px; background: var(--bg-dark); border-radius: var(--radius); margin-bottom: 16px;
  flex-wrap: wrap;
}
.efetivo-avatar-big {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px; border: 3px solid;
}
.efetivo-avatar-big.green  { background: rgba(34,197,94,0.15);  color: var(--green);   border-color: var(--green); }
.efetivo-avatar-big.red    { background: rgba(239,68,68,0.15);  color: var(--red);     border-color: var(--red); }
.efetivo-avatar-big.yellow { background: rgba(245,158,11,0.15); color: var(--yellow);  border-color: var(--yellow); }
.efetivo-avatar-big.blue   { background: rgba(59,130,246,0.15); color: var(--primary); border-color: var(--primary); }
.efetivo-avatar-big.grey   { background: rgba(148,163,184,0.15);color: var(--text-muted); border-color: var(--border); }

/* Ficha do efetivo — grid de detalhes */
.efp-details-grid {
  display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.efp-info-card {
  background: var(--bg-dark); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  min-width: 220px; flex-shrink: 0;
}
.efp-info-card h5 {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin: 0 0 10px; display: flex; align-items: center; gap: 6px;
}
.efp-info-card h5 i { color: var(--primary); }
.efp-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 12px; gap: 8px;
}
.efp-info-row:last-child { border-bottom: none; }
.efp-info-row span  { color: var(--text-muted); flex-shrink: 0; }
.efp-info-row strong { color: var(--text-primary); text-align: right; }
.efetivo-profile-info { flex: 1; }
.efetivo-profile-info h2 { font-size: 18px; font-weight: 800; }
.efetivo-profile-info p { font-size: 13px; color: var(--text-secondary); }
.efetivo-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.efetivo-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
.stat-card {
  background: var(--bg-dark); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; text-align: center;
}
.stat-card span { display: block; font-size: 11px; color: var(--text-secondary); }
.stat-card strong { display: block; font-size: 20px; font-weight: 800; margin-top: 4px; }
.stat-card small  { font-size: 11px; color: var(--text-muted); }
.green-text { color: var(--green); }

/* Inventory Report */
.inventory-report { display: flex; flex-direction: column; gap: 8px; }
.inv-posto-item {
  background: var(--bg-dark); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.inv-posto-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer;
}
.inv-posto-name { flex: 1; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.inv-expand-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px;
}
.inv-posto-details { padding: 0 16px 12px; }
.inv-detail-row {
  display: flex; align-items: center; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.inv-detail-row:last-child { border: none; }
.inv-detail-row span:first-child { flex: 1; color: var(--text-secondary); }
.inv-detail-row strong { min-width: 20px; }

/* Toast Notifications */
.toast-container {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px; z-index: 9999;
}
.toast {
  padding: 12px 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; min-width: 280px;
  animation: toastSlideIn 0.3s ease, toastSlideOut 0.3s ease 2.7s forwards;
}
@keyframes toastSlideIn { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } }
@keyframes toastSlideOut { from { opacity:1; transform: translateX(0); } to { opacity:0; transform: translateX(20px); } }
.toast.success { border-left: 4px solid var(--green); }
.toast.error   { border-left: 4px solid var(--red); }
.toast.info    { border-left: 4px solid var(--blue); }
.toast i { font-size: 16px; }
.toast.success i { color: var(--green); }
.toast.error   i { color: var(--red); }
.toast.info    i { color: var(--blue); }

/* Pulse Animations */
.pulse-anim { animation: pulseScale 1.5s infinite; }
@keyframes pulseScale {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.85; }
}

/* Animations */
@keyframes fadeIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }

/* Misc */
textarea.form-input { resize: vertical; }
.btn-submit-full:hover { background: var(--cta-hover); }

/* =========================================
   NAV BELL / ALERT BUTTON
   ========================================= */
.nav-alert-bell {
  position: relative;
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 18px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  transition: all 0.2s; margin-right: 8px;
}
.nav-alert-bell:hover { color: var(--yellow); background: rgba(245,158,11,0.1); }
.bell-badge {
  position: absolute; top: 0; right: 0;
  background: var(--red); color: white;
  font-size: 9px; font-weight: 800;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: pulse-dot 2s infinite;
}

/* =========================================
   SIDEBAR DIVIDER
   ========================================= */
.nav-divider {
  height: 1px; background: var(--border);
  margin: 6px 12px;
}

/* =========================================
   DASHBOARD — ALERTS STRIP
   ========================================= */
.alerts-strip {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 4px; margin-bottom: 18px;
  scrollbar-width: thin;
}
.alerts-strip::-webkit-scrollbar { height: 3px; }
.alerts-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.alert-strip-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius);
  cursor: pointer; transition: all 0.2s; flex-shrink: 0;
  min-width: 220px;
}
.alert-strip-item:hover { transform: translateY(-2px); }
.alert-strip-item i { font-size: 18px; flex-shrink: 0; }
.alert-strip-item div strong { display: block; font-size: 12px; font-weight: 700; }
.alert-strip-item div span  { font-size: 10px; opacity: 0.75; }
.alert-strip-time {
  margin-left: auto; font-size: 10px; font-weight: 700;
  white-space: nowrap; padding: 2px 7px;
  border-radius: 999px; background: rgba(0,0,0,0.2);
}
.alert-strip-item.critical { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35); color: var(--red); }
.alert-strip-item.high     { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.35); color: var(--yellow); }
.alert-strip-item.medium   { background: rgba(59,130,246,0.10); border: 1px solid rgba(59,130,246,0.25); color: var(--blue); }
.alert-strip-item.low      { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); color: var(--green); }

/* =========================================
   DASHBOARD — KPI EXTENSIONS
   ========================================= */
.kpi-6 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.kpi-mini-bar {
  height: 3px; background: var(--border); border-radius: 999px;
  margin-top: 4px; overflow: hidden;
}
.kpi-mini-bar > div { height: 100%; border-radius: 999px; }
.bar-green { background: var(--green); }
.bar-blue  { background: var(--blue); }

.kpi-sub-info { font-size: 10px; margin-top: 2px; color: var(--text-muted); }
.red-text    { color: var(--red); }
.yellow-text { color: var(--yellow); }
.kpi-icon.purple { background: rgba(139,92,246,0.15); color: var(--purple); }

/* =========================================
   DASHBOARD — CHARTS
   ========================================= */
.charts-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 1200px) { .charts-row-2 { grid-template-columns: 1fr; } }

.chart-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
  overflow: hidden;
}
.chart-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px; flex-wrap: wrap; gap: 6px;
}
.chart-card-header h3 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.chart-legend-inline { display: flex; gap: 10px; font-size: 11px; color: var(--text-secondary); align-items: center; }
.chart-legend-inline span { display: flex; align-items: center; gap: 4px; }
.chart-tag {
  font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px;
}
.chart-tag.green { background: rgba(34,197,94,0.15); color: var(--green); }

/* Feed card header */
.feed-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.feed-card-header h3 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.btn-feed-all {
  font-size: 11px; color: var(--blue); background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 4px; font-weight: 600;
}
.btn-feed-all:hover { text-decoration: underline; }

/* Upcoming List */
.upcoming-list { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.upcoming-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: var(--radius-sm);
  transition: background 0.2s; cursor: default;
}
.upcoming-item:hover { background: var(--bg-card-hover); }
.upcoming-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.upcoming-icon.red    { background: rgba(239,68,68,0.15); color: var(--red); }
.upcoming-icon.yellow { background: rgba(245,158,11,0.15); color: var(--yellow); }
.upcoming-icon.blue   { background: rgba(59,130,246,0.15); color: var(--blue); }
.upcoming-icon.green  { background: rgba(34,197,94,0.15); color: var(--green); }
.upcoming-item div { flex: 1; }
.upcoming-item div strong { display: block; font-size: 13px; font-weight: 600; }
.upcoming-item div p { font-size: 11px; color: var(--text-secondary); }
.upcoming-date { font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--text-secondary); }

/* =========================================
   ALERTAS PAGE
   ========================================= */
.alert-summary-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .alert-summary-grid { grid-template-columns: repeat(2,1fr); } }

.alert-sum-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: var(--radius);
  cursor: pointer; transition: all 0.2s;
}
.alert-sum-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.alert-sum-card i { font-size: 24px; }
.alert-sum-card strong { display: block; font-size: 26px; font-weight: 900; }
.alert-sum-card span  { font-size: 12px; opacity: 0.8; }
.alert-sum-card.critical { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: var(--red); }
.alert-sum-card.high     { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); color: var(--yellow); }
.alert-sum-card.medium   { background: rgba(59,130,246,0.10); border: 1px solid rgba(59,130,246,0.25); color: var(--blue); }
.alert-sum-card.low      { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); color: var(--green); }

/* Alerts List Full */
.alerts-list { display: flex; flex-direction: column; gap: 10px; }

.alert-card-full {
  display: flex; gap: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: all 0.2s;
}
.alert-card-full:hover { box-shadow: var(--shadow); }
.alert-card-full.unread { border-left-width: 3px; }
.alert-card-full.critical.unread { border-left-color: var(--red); }
.alert-card-full.high.unread     { border-left-color: var(--yellow); }
.alert-card-full.medium.unread   { border-left-color: var(--blue); }

.alert-card-left {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 16px 12px; gap: 10px; border-right: 1px solid var(--border);
  min-width: 72px;
}
.alert-priority-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; padding: 3px 6px; border-radius: 999px;
  white-space: nowrap;
}
.alert-priority-badge.critical { background: rgba(239,68,68,0.2); color: var(--red); }
.alert-priority-badge.high     { background: rgba(245,158,11,0.2); color: var(--yellow); }
.alert-priority-badge.medium   { background: rgba(59,130,246,0.15); color: var(--blue); }

.alert-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.alert-icon.critical { background: rgba(239,68,68,0.15); color: var(--red); }
.alert-icon.high     { background: rgba(245,158,11,0.15); color: var(--yellow); }
.alert-icon.medium   { background: rgba(59,130,246,0.1); color: var(--blue); }

.alert-card-body { flex: 1; padding: 16px; }
.alert-card-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 8px;
}
.alert-card-top h4 { font-size: 15px; font-weight: 700; }
.alert-card-time { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.alert-card-body p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }

.alert-affected-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.affected-tag {
  padding: 3px 10px; border-radius: 999px;
  background: var(--bg-dark); border: 1px solid var(--border);
  font-size: 11px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 5px;
}
.affected-tag.red    { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25); color: var(--red); }
.affected-tag.yellow { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); color: var(--yellow); }

.alert-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-alert-action-full {
  padding: 7px 14px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all 0.2s;
}
.btn-alert-action-full.primary {
  background: var(--blue); border: none; color: white;
}
.btn-alert-action-full.primary:hover { background: var(--cta-hover); }
.btn-alert-action-full.secondary {
  background: var(--bg-dark); border: 1px solid var(--border); color: var(--text-secondary);
}
.btn-alert-action-full.secondary:hover { border-color: var(--green); color: var(--green); }
.btn-alert-action-full.danger {
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: var(--red);
}
.btn-alert-action-full.danger:hover { background: rgba(239,68,68,0.2); }

.alert-card-full.acknowledged {
  opacity: 0.5; border-left-width: 1px;
}

/* =========================================
   RELATÓRIOS PAGE
   ========================================= */
.report-categories {
  display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap;
}
.report-cat-btn {
  padding: 9px 20px; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; transition: all 0.2s;
}
.report-cat-btn:hover  { border-color: var(--blue); color: var(--blue); }
.report-cat-btn.active { background: var(--blue); border-color: var(--blue); color: white; }

.report-section { display: none; }
.report-section.active { display: block; }

.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 1100px) { .report-grid { grid-template-columns: 1fr; } }

.report-chart-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px; overflow: hidden;
}
.report-chart-card.wide { grid-column: 1 / -1; }

.report-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.report-card-header h3 { font-size: 14px; font-weight: 700; }
.report-card-header p  { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.report-card-actions { display: flex; gap: 6px; }
.btn-report-export {
  padding: 5px 12px; border-radius: var(--radius-sm);
  background: var(--bg-dark); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; gap: 5px; transition: all 0.2s;
}
.btn-report-export:hover { border-color: var(--blue); color: var(--blue); }

/* Report KPI mini grid */
.report-kpi-mini-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  align-content: start;
}
.report-kpi-card {
  background: var(--bg-dark); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.rkpi-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 4px;
}
.rkpi-icon.green  { background: rgba(34,197,94,0.15); color: var(--green); }
.rkpi-icon.blue   { background: rgba(59,130,246,0.15); color: var(--blue); }
.rkpi-icon.red    { background: rgba(239,68,68,0.15); color: var(--red); }
.rkpi-icon.yellow { background: rgba(245,158,11,0.15); color: var(--yellow); }
.report-kpi-card strong { font-size: 18px; font-weight: 800; }
.report-kpi-card span   { font-size: 11px; color: var(--text-secondary); }
.report-kpi-card small  { font-size: 10px; color: var(--text-muted); }

/* =========================================
   ALERT CENTER MODAL
   ========================================= */
.alert-center-filter {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}

.modal-alerts-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.modal-alerts-list::-webkit-scrollbar { width: 4px; }
.modal-alerts-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.modal-alert-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--bg-dark); border: 1px solid var(--border);
  transition: background 0.2s;
}
.modal-alert-item:hover { background: var(--bg-card-hover); }
.modal-alert-item[style*="display: none"] { display: none !important; }

.mal-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
}
.mal-dot.critical { background: var(--red); box-shadow: 0 0 6px rgba(239,68,68,0.5); }
.mal-dot.high     { background: var(--yellow); }
.mal-dot.medium   { background: var(--blue); }

.mal-body { flex: 1; }
.mal-body strong { display: block; font-size: 13px; font-weight: 700; }
.mal-body p   { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.mal-body time { font-size: 10px; color: var(--text-muted); margin-top: 4px; display: block; }

.mal-action {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 10px;
  color: var(--blue); font-size: 11px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 4px; transition: all 0.2s;
}
.mal-action:hover { background: rgba(59,130,246,0.1); }

/* =========================================
   EQUIPMENT MODULE — ENHANCED STYLES
   ========================================= */

/* ── Inner tabs (Frota/Manutenção, Inventário/Inspeções) ── */
.inner-tab-bar {
  display: flex; gap: 4px; margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.inner-tab {
  padding: 8px 18px; border: none; background: none;
  color: var(--text-secondary); cursor: pointer; font-size: 13px; font-weight: 500;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: all 0.15s; display: flex; align-items: center; gap: 7px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.inner-tab.active { color: var(--primary); border-bottom-color: var(--primary); background: rgba(59,130,246,0.06); }
.inner-tab:hover:not(.active) { color: var(--text-primary); background: var(--bg-card-hover); }
.inner-badge {
  font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 20px; background: var(--bg-deep); color: var(--text-muted);
}
.inner-badge.yellow { background: rgba(245,158,11,0.2); color: var(--yellow); }
.inner-badge.red    { background: rgba(239,68,68,0.2);  color: var(--red); }

.inner-panel { display: none; }
.inner-panel.active { display: block; }

/* ── Reference tag ── */
.ref-tag {
  font-family: monospace; font-size: 11px; font-weight: 700;
  color: var(--text-secondary); background: var(--bg-deep);
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border);
}

/* ── Cell green value ── */
.cell-green { color: var(--green); font-weight: 600; }

/* ── Badge orange ── */
.badge.orange { background:rgba(249,115,22,0.15); color:#fb923c; border-color:rgba(249,115,22,0.3); }

/* ═══ GERIR EQUIPAMENTO MODAL ═══ */
.tipo-equip-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 6px;
}
.tipo-equip-btn {
  padding: 14px 10px; border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--bg-deep); color: var(--text-secondary); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; transition: all 0.2s;
}
.tipo-equip-btn i { font-size: 22px; }
.tipo-equip-btn.active { border-color: var(--primary); background: rgba(59,130,246,0.1); color: var(--primary); }
.tipo-equip-btn:hover:not(.active) { border-color: var(--text-muted); color: var(--text-primary); }

.gerir-estado-strip {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
}
.accoes-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 6px;
}
.accao-btn {
  padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--bg-deep); color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500;
  transition: all 0.2s; text-align: left;
}
.accao-btn i { font-size: 18px; width: 22px; text-align: center; }
.accao-btn small { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.accao-btn.active   { border-color: var(--primary); background: rgba(59,130,246,0.1); color: var(--primary); }
.accao-btn.a-yellow { border-color: var(--yellow);  background: rgba(245,158,11,0.08); color: var(--yellow); }
.accao-btn.a-green  { border-color: var(--green);   background: rgba(34,197,94,0.08);  color: var(--green); }
.accao-btn.a-red    { border-color: var(--red);     background: rgba(239,68,68,0.08);  color: var(--red); }
.accao-btn.a-purple { border-color: #8b5cf6;        background: rgba(139,92,246,0.08); color: #a78bfa; }
.accao-btn:hover:not(.active) { border-color: var(--text-muted); }

/* ═══ MANUTENÇÃO MODAL ═══ */
.estado-mnt-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 6px;
}
.estado-mnt-btn {
  padding: 10px 8px; border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--bg-deep); color: var(--text-secondary); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; transition: all 0.2s;
}
.estado-mnt-btn i { font-size: 18px; }
.estado-mnt-btn.active { border-color: var(--primary); background: rgba(59,130,246,0.1); color: var(--primary); }
.estado-mnt-btn:hover:not(.active) { border-color: var(--text-muted); color: var(--text-primary); }

.pecas-list { display: flex; flex-direction: column; gap: 8px; }
.peca-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.peca-row .form-input { margin: 0; }

/* Manutenção detail strip */
.mnt-detail-strip {
  display: flex; gap: 20px; flex-wrap: wrap;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 8px;
}
.mnt-detail-col { display: flex; flex-direction: column; gap: 4px; }
.mnt-detail-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); letter-spacing:.05em; }
.mnt-descricao-box {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.mnt-descricao-box h4 { font-size: 13px; margin-bottom: 8px; color: var(--text-secondary); }
.mnt-descricao-box p  { font-size: 13px; line-height: 1.6; color: var(--text-primary); }

.custo-breakdown {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-top: 10px;
}
.custo-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px;
  color: var(--text-secondary);
}
.custo-row.total {
  border-top: 2px solid var(--border); border-bottom: none;
  font-weight: 700; color: var(--text-primary); padding-top: 8px; margin-top: 4px;
}
.custo-row strong { color: var(--text-primary); }

/* Progress steps */
.mnt-progress-bar-wrap {
  display: flex; align-items: center; gap: 0;
  overflow-x: auto; padding: 8px 0;
}
.mnt-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 80px; font-size: 11px; color: var(--text-muted); text-align: center;
}
.mnt-step i { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; border: 2px solid var(--border); background: var(--bg-deep); }
.mnt-step.done   i { background: var(--green); border-color: var(--green); color: #fff; }
.mnt-step.active i { background: var(--yellow); border-color: var(--yellow); color: #0f172a; animation: pulse 1.5s infinite; }
.mnt-step.pending i { background: var(--bg-deep); border-color: var(--border); color: var(--text-muted); }
.mnt-step.done time, .mnt-step.active time { color: var(--text-secondary); }
.mnt-step-line { flex: 1; height: 2px; background: var(--border); min-width: 20px; }
.mnt-step-line.done { background: var(--green); }

/* ═══ INSPEÇÃO MODAL ═══ */
.inspeccao-checklist {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.ins-check-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px; border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background 0.15s;
}
.ins-check-item:last-child { border-bottom: none; }
.ins-check-item:hover { background: var(--bg-card-hover); }
.ins-check-item .check-status-btns { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.ins-check-item .chk-s-btn {
  padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border);
  background: none; font-size: 11px; cursor: pointer; color: var(--text-muted); transition: all 0.15s;
}
.ins-check-item .chk-s-btn.ok     { border-color: var(--green); color: var(--green); background: rgba(34,197,94,0.1); }
.ins-check-item .chk-s-btn.warn   { border-color: var(--yellow); color: var(--yellow); background: rgba(245,158,11,0.1); }
.ins-check-item .chk-s-btn.fail   { border-color: var(--red); color: var(--red); background: rgba(239,68,68,0.1); }
.ins-check-item .chk-s-btn:hover  { filter: brightness(1.2); }
.ins-check-item .chk-label { font-size: 13px; color: var(--text-primary); flex: 1; padding-top: 2px; }
.ins-check-item .chk-note  { font-size: 11px; color: var(--text-muted); display: block; margin-top: 3px; }

.resultado-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 6px;
}
.resultado-btn {
  padding: 14px 10px; border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--bg-deep); cursor: pointer; font-size: 13px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 8px; transition: all 0.2s;
  color: var(--text-secondary);
}
.resultado-btn i { font-size: 24px; }
.resultado-btn small { font-size: 11px; font-weight: 400; }
.resultado-btn.aprovado:hover, .resultado-btn.aprovado.active  { border-color: var(--green); background: rgba(34,197,94,0.1); color: var(--green); }
.resultado-btn.observacoes:hover,.resultado-btn.observacoes.active { border-color: var(--yellow); background: rgba(245,158,11,0.1); color: var(--yellow); }
.resultado-btn.reprovado:hover, .resultado-btn.reprovado.active  { border-color: var(--red); background: rgba(239,68,68,0.1); color: var(--red); }

/* Inspeção detail strip */
.ins-detail-strip {
  display: flex; gap: 20px; flex-wrap: wrap;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 8px;
}
.ins-resultado-checklist { display: flex; flex-direction: column; gap: 8px; }
.ins-check-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 13px;
}
.ins-check-row.ok   { background: rgba(34,197,94,0.06);  border-color: rgba(34,197,94,0.2);  color: var(--text-primary); }
.ins-check-row.warn { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.2); color: var(--text-primary); }
.ins-check-row.fail { background: rgba(239,68,68,0.06);  border-color: rgba(239,68,68,0.2);  color: var(--text-primary); }
.ins-check-row.ok   i { color: var(--green); }
.ins-check-row.warn i { color: var(--yellow); }
.ins-check-row.fail i { color: var(--red); }

/* Sub-tab badge */
.subtab-badge {
  background: var(--bg-deep); color: var(--text-secondary);
  border-radius: 20px; padding: 1px 7px; font-size: 10px; font-weight: 700;
}
.subtab-badge.red { background: rgba(239,68,68,0.2); color: var(--red); }

/* Matricula / Serial tags */
.matricula-tag {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13px; color: var(--primary);
  background: rgba(59,130,246,0.1); padding: 3px 8px;
  border-radius: 4px; border: 1px solid rgba(59,130,246,0.2);
}
.serial-tag {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px; color: #fca5a5;
  background: rgba(239,68,68,0.08); padding: 3px 8px;
  border-radius: 4px; border: 1px solid rgba(239,68,68,0.2);
}
.licence-tag {
  font-family: monospace; font-size: 11px;
  color: var(--text-secondary);
}

/* GPS dot indicator */
.gps-dot {
  font-size: 16px; cursor: default;
  transition: opacity 0.3s;
}
.gps-dot.green  { color: var(--green); animation: gps-pulse 2s infinite; }
.gps-dot.yellow { color: var(--yellow); }
.gps-dot.red    { color: var(--red); }
.gps-dot.grey   { color: var(--text-muted); }
@keyframes gps-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
}

/* Date status classes */
.date-ok      { color: var(--green); font-size: 12px; }
.date-warn    { color: var(--yellow); font-size: 12px; }
.date-expired { color: var(--red); font-size: 12px; }

/* Cell main/sub */
.cell-main { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.cell-sub  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Actions cell */
.actions-cell { display: flex; gap: 4px; align-items: center; }

/* QR button */
.btn-qr {
  background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.3);
  color: #a78bfa; border-radius: 6px; padding: 5px 8px;
  cursor: pointer; font-size: 14px; transition: all 0.2s;
}
.btn-qr:hover { background: rgba(139,92,246,0.2); color: #c4b5fd; }

/* Equipment Cost Summary */
.equip-cost-summary {
  margin-top: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.equip-cost-summary h3 { font-size: 14px; color: var(--text-secondary); margin-bottom: 14px; }
.cost-cards-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.cost-card {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px;
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 130px;
}
.cost-card.total { border-color: var(--primary); background: rgba(59,130,246,0.07); }
.cost-label { font-size: 11px; color: var(--text-muted); }
.cost-label i { margin-right: 4px; }
.cost-value { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.cost-card.total .cost-value { color: var(--primary); }

/* Arma QR preview in form */
.arma-qr-preview {
  display: flex; align-items: center; gap: 16px;
  background: rgba(139,92,246,0.07); border: 1px solid rgba(139,92,246,0.2);
  border-radius: var(--radius); padding: 14px 20px; margin-top: 16px;
  color: var(--text-secondary);
}
.arma-qr-preview strong { display: block; font-size: 14px; color: var(--text-primary); }
.arma-qr-preview p { font-size: 12px; margin-top: 4px; }

/* Security notice in form */
.security-notice-form {
  display: flex; align-items: center; gap: 10px;
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius); padding: 10px 16px; margin-bottom: 16px;
  font-size: 12px; color: #fca5a5;
}
.security-notice-form i { color: var(--red); font-size: 16px; }

/* Form section title */
.form-section-title {
  font-size: 12px; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px; margin: 20px 0 12px;
}

/* Form grid 3 cols */
.form-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.form-grid-3 .form-group.full { grid-column: 1 / -1; }

/* Doc upload zone large */
.doc-upload-row.large {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.doc-upload-zone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 16px 10px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 12px;
  transition: all 0.2s;
}
.doc-upload-zone:hover { border-color: var(--primary); color: var(--primary); background: rgba(59,130,246,0.05); }
.doc-upload-zone small { font-size: 10px; opacity: 0.7; }

/* Viatura Detail Strip */
.viatura-detail-strip {
  display: flex; gap: 20px; align-items: center;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px;
}
.viatura-detail-photo {
  width: 80px; height: 80px; background: rgba(59,130,246,0.1);
  border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.viatura-detail-info { flex: 1; }
.viatura-detail-info h2 { font-size: 18px; margin-bottom: 2px; }
.viatura-detail-kpis {
  display: flex; gap: 16px; flex-shrink: 0;
}
.vd-kpi { text-align: center; }
.vd-kpi span { display: block; font-size: 10px; color: var(--text-muted); }
.vd-kpi strong { font-size: 14px; }

/* Detail sub-tabs */
.detail-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 16px; flex-wrap: wrap;
}
.detail-tab {
  padding: 7px 16px; border: none; background: none;
  color: var(--text-secondary); cursor: pointer; font-size: 13px;
  border-bottom: 2px solid transparent; transition: all 0.15s;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.detail-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.detail-tab:hover:not(.active) { color: var(--text-primary); }

.detail-tab-panel { display: none; }
.detail-tab-panel.active { display: block; }

/* Info item */
.info-item { display: flex; flex-direction: column; gap: 3px; }
.info-item span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.info-item strong { font-size: 13px; color: var(--text-primary); }

/* Manutenção alerts */
.manutencao-alerts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.maint-alert-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--radius); border: 1px solid;
}
.maint-alert-card.ok { background: rgba(34,197,94,0.07); border-color: rgba(34,197,94,0.25); }
.maint-alert-card.ok i { color: var(--green); font-size: 18px; }
.maint-alert-card.warn { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.25); }
.maint-alert-card.warn i { color: var(--yellow); font-size: 18px; }
.maint-alert-card strong { font-size: 13px; display: block; margin-bottom: 3px; }
.maint-alert-card p { font-size: 12px; color: var(--text-muted); }

/* Seguro card */
.seguro-card {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
}
.seguro-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 4px;
}
.seguro-header h3 { font-size: 16px; margin-bottom: 2px; }
.seguro-header p { font-size: 12px; color: var(--text-muted); }

/* Fuel summary */
.fuel-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
}
.fuel-kpi {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.fuel-kpi span { font-size: 11px; color: var(--text-muted); }
.fuel-kpi strong { font-size: 15px; font-weight: 700; }

/* Data table small variant */
.data-table.small th,
.data-table.small td { padding: 7px 10px; font-size: 12px; }

/* Arma detail grid */
.arma-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;
}
.arma-info-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
}
.arma-icon-big { font-size: 40px; }
.arma-data { flex: 1; }
.data-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.data-row span { color: var(--text-muted); }
.arma-alert-box {
  display: flex; align-items: center; gap: 12px;
  background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius); padding: 12px 16px;
  color: var(--yellow);
}
.arma-alert-box strong { display: block; font-size: 13px; }
.arma-alert-box span { font-size: 12px; color: var(--text-muted); }
.arma-qr-box {
  display: flex; align-items: center; gap: 16px;
  background: rgba(139,92,246,0.07); border: 1px solid rgba(139,92,246,0.2);
  border-radius: var(--radius); padding: 12px 16px;
  color: var(--text-secondary);
}
.arma-qr-box strong { display: block; font-size: 13px; color: var(--text-primary); }

/* Status change modal */
#status-modal-info i { margin-right: 8px; }

/* Audit log modal */
.badge.orange { background: rgba(249,115,22,0.15); color: #fb923c; border-color: rgba(249,115,22,0.3); }
.badge.purple { background: rgba(139,92,246,0.15); color: #a78bfa; border-color: rgba(139,92,246,0.3); }

/* Equipment report modal */
.report-options-row {
  display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.report-options-row .form-group { flex: 1; min-width: 160px; margin-bottom: 0; }
.equip-report-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
}
.eq-report-section {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.eq-report-section h4 { font-size: 13px; margin-bottom: 12px; color: var(--text-primary); }
.eq-report-row {
  display: flex; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text-secondary);
}
.eq-report-row.total {
  border-top: 2px solid var(--border); border-bottom: none; margin-top: 4px;
  padding-top: 8px; font-weight: 700; color: var(--text-primary);
}
.eq-report-row strong { color: var(--text-primary); }
.eq-report-row .green-text  { color: var(--green); }
.eq-report-row .yellow-text { color: var(--yellow); }
.eq-report-row .red-text    { color: var(--red); }

/* Badge grey */
.badge.grey { background: rgba(148,163,184,0.15); color: #94a3b8; border-color: rgba(148,163,184,0.3); }

/* Checklist simple */
.check-list-simple { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--bg-deep); border-radius: var(--radius); border: 1px solid var(--border); }
.chk-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.chk-item input { accent-color: var(--green); width: 16px; height: 16px; cursor: pointer; }

/* btn-web-danger */
.btn-web-danger {
  padding: 8px 18px; border-radius: var(--radius);
  background: rgba(239,68,68,0.15); color: var(--red);
  border: 1px solid rgba(239,68,68,0.3);
  cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all 0.2s; display: flex; align-items: center; gap: 7px;
}
.btn-web-danger:hover { background: rgba(239,68,68,0.25); }

/* Tl-dot grey */
.tl-dot.grey { background: var(--text-muted); }

/* Green/yellow/red text */
.green-text  { color: var(--green); }
.yellow-text { color: var(--yellow); }
.red-text    { color: var(--red); }

/* ── Fuel Calculation Strip ── */
.fuel-calc-strip {
  display: flex; gap: 16px; flex-wrap: wrap;
  background: rgba(59,130,246,0.07); border: 1px solid rgba(59,130,246,0.2);
  border-radius: var(--radius); padding: 12px 16px; margin: 12px 0;
}
.fuel-calc-item {
  display: flex; flex-direction: column; gap: 3px;
}
.fuel-calc-item span { font-size: 11px; color: var(--text-muted); }
.fuel-calc-item strong { font-size: 14px; font-weight: 700; color: var(--primary); }

/* ── Seguro validade warnings ── */
.seg-valid   { color: var(--green); font-weight: 600; }
.seg-warn    { color: var(--yellow); font-weight: 600; }
.seg-expired { color: var(--red); font-weight: 600; }

/* ── Modal header badge ── */
.modal-header-badge {
  background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3);
  color: var(--primary); border-radius: var(--radius-sm);
  padding: 3px 10px; font-size: 12px; font-weight: 700; font-family: monospace;
  margin-left: 10px;
}

/* ── Viatura detail inline buttons spacing ── */
#vd-manutencao .modal-actions-mini {
  display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap;
}

/* ── Btn inline flex ── */
button.inline-flex { display: inline-flex !important; align-items: center; gap: 6px; }

/* ── Row alert ── */
.row-alert td { background: rgba(239,68,68,0.04); }

/* ── Table striped ── */
.data-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.01); }

/* ── Concluir btn ── */
.btn-table.btn-concluir {
  background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); color: var(--green);
}
.btn-table.btn-concluir:hover { background: rgba(34,197,94,0.25); }

/* ── Badge blue2 ── */
.badge.blue2, .kpi-icon.blue2 { background: rgba(14,165,233,0.15); color: #38bdf8; border-color: rgba(14,165,233,0.3); }
.kpi-icon.blue2 { background: rgba(14,165,233,0.15); color: #38bdf8; }

/* ── Inspection form ── */
.inspeccao-checklist .ins-check-item.has-ok   { background: rgba(34,197,94,0.04); }
.inspeccao-checklist .ins-check-item.has-warn { background: rgba(245,158,11,0.04); }
.inspeccao-checklist .ins-check-item.has-fail { background: rgba(239,68,68,0.04); }

/* ── Arma obs group ── */
#arma-obs-group { transition: all 0.2s; }

/* =========================================
   MÓDULO DE CÂMARA — CAPTURA DE FOTO
   ========================================= */

/* ── Modal Overlay ──────────────────────────────────────── */
.camera-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2,8,23,0.97);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 44px;
  overflow: hidden;
  animation: alertSlideIn 0.3s ease;
}

.camera-modal-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #020817;
  border-radius: 44px;
  overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────── */
.camera-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
  background: rgba(15,23,42,0.9);
  position: relative;
  z-index: 10;
}
.camera-modal-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #f8fafc;
}
.camera-modal-title i { color: var(--primary); font-size: 16px; }
.camera-close-btn {
  background: rgba(255,255,255,0.1); border: none;
  color: #94a3b8; width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.camera-close-btn:hover { background: rgba(239,68,68,0.2); color: var(--red); }

/* ── Context bar ─────────────────────────────────────────── */
.camera-context-bar {
  display: flex; align-items: center; gap: 6px;
  background: rgba(245,158,11,0.12); border-bottom: 1px solid rgba(245,158,11,0.2);
  padding: 6px 16px; font-size: 11px; color: #fbbf24;
}
.camera-context-bar i { color: #f59e0b; }

/* ── Viewfinder ──────────────────────────────────────────── */
.camera-viewfinder {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}

/* Live video */
#camera-video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror for selfie */
}

/* ── Simulated viewfinder ────────────────────────────────── */
.camera-simulated {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.camera-sim-frame {
  position: relative;
  width: 180px; height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.camera-sim-person {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  opacity: 0.6;
  animation: personBreath 3s ease-in-out infinite;
}
@keyframes personBreath {
  0%,100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.03); }
}
.sim-head {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(148,163,184,0.3); border: 2px solid rgba(148,163,184,0.5);
}
.sim-body {
  width: 80px; height: 90px; border-radius: 12px 12px 4px 4px;
  background: rgba(148,163,184,0.2); border: 2px solid rgba(148,163,184,0.35);
  margin-top: 6px;
}
.sim-location-tag {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  background: rgba(245,158,11,0.9); color: #000; padding: 3px 10px;
  border-radius: 20px; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}

/* Corner guides */
.cam-guide {
  position: absolute; width: 20px; height: 20px;
  border-color: rgba(59,130,246,0.7); border-style: solid;
}
.cam-guide.tl { top: 0; left: 0; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.cam-guide.tr { top: 0; right: 0; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.cam-guide.bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.cam-guide.br { bottom: 0; right: 0; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }

/* Scan line */
.camera-scan-line {
  position: absolute; left: 20px; right: 20px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.8), transparent);
  box-shadow: 0 0 8px rgba(59,130,246,0.6);
}
@keyframes scanLine {
  0%   { top: 20%;  opacity: 0.8; }
  50%  { top: 75%;  opacity: 1;   }
  100% { top: 20%;  opacity: 0.8; }
}

/* ── Preview overlay ─────────────────────────────────────── */
.camera-preview-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  overflow: hidden;
}
.camera-preview-overlay img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 0;
}
.camera-preview-stamp {
  position: relative; z-index: 2;
  width: 100%;
  background: rgba(0,0,0,0.65);
  padding: 8px 14px;
  display: flex; flex-direction: column; gap: 2px;
  color: #f8fafc; font-size: 11px;
}
.camera-preview-stamp i { color: var(--yellow); margin-right: 4px; }
.camera-preview-stamp span { font-weight: 600; }
.camera-preview-stamp time { color: #94a3b8; font-size: 10px; }

/* ── Flash effect ────────────────────────────────────────── */
.camera-flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.12s ease;
}

/* ── Controls ────────────────────────────────────────────── */
.camera-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px 20px;
  background: rgba(10,15,30,0.95);
  position: relative; z-index: 10;
}
.cam-btn-secondary {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #f8fafc; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.cam-btn-secondary:hover { background: rgba(255,255,255,0.15); }

.cam-btn-capture {
  width: 68px; height: 68px; border-radius: 50%;
  background: transparent;
  border: 3px solid rgba(255,255,255,0.8);
  cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s;
}
.cam-btn-capture:active { transform: scale(0.95); }
.capture-ring {
  position: absolute; inset: 4px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
}
.capture-dot {
  width: 50px; height: 50px; border-radius: 50%;
  background: #fff;
  transition: transform 0.1s;
}
.cam-btn-capture:active .capture-dot { transform: scale(0.9); }

/* ── After controls ──────────────────────────────────────── */
.camera-after-controls {
  display: flex; gap: 12px;
  padding: 14px 20px 20px;
  background: rgba(10,15,30,0.95);
  position: relative; z-index: 10;
}
.cam-btn-retake {
  flex: 1;
  padding: 12px; border-radius: var(--radius);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #f8fafc; font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.2s;
}
.cam-btn-retake:hover { background: rgba(255,255,255,0.15); }

.cam-btn-confirm {
  flex: 2;
  padding: 12px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--primary), #0ea5e9);
  border: none; color: #fff; font-size: 13px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(59,130,246,0.35);
}
.cam-btn-confirm:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(59,130,246,0.5); }

/* =========================================
   COMPONENTES DE FOTO — HOME SCREEN
   ========================================= */
.selfie-required-hint {
  display: flex; align-items: center; gap: 8px;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius); padding: 8px 14px;
  color: #fbbf24; font-size: 12px; font-weight: 500;
  margin-bottom: 10px;
}
.selfie-required-hint i { font-size: 16px; }

.selfie-preview-strip {
  display: flex; align-items: center; gap: 12px;
  background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.25);
  border-radius: var(--radius); padding: 10px 14px;
  margin-bottom: 10px; animation: alertSlideIn 0.3s ease;
}
.selfie-thumb-wrap { position: relative; flex-shrink: 0; }
.selfie-thumb {
  width: 56px; height: 56px; border-radius: 10px;
  object-fit: cover; border: 2px solid rgba(34,197,94,0.4);
}
.selfie-ok-badge {
  position: absolute; bottom: -4px; right: -4px;
  font-size: 14px; background: #020817; border-radius: 50%; line-height: 1;
}
.selfie-info {
  display: flex; flex-direction: column; gap: 3px; flex: 1;
}
.selfie-info strong { font-size: 13px; color: var(--green); }
.selfie-info span   { font-size: 11px; color: var(--text-muted); }
.btn-retake {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(148,163,184,0.1); border: 1px solid rgba(148,163,184,0.2);
  color: #94a3b8; border-radius: 6px; padding: 3px 10px;
  font-size: 11px; cursor: pointer; transition: all 0.2s; margin-top: 2px;
}
.btn-retake:hover { background: rgba(148,163,184,0.2); color: #f8fafc; }

/* =========================================
   COMPONENTES DE FOTO — SHIFT TIMER CARD
   ========================================= */
.photo-verified-dot {
  position: absolute; bottom: -2px; right: -2px;
  font-size: 12px; background: #020817; border-radius: 50%; line-height: 1;
}
.shift-photo-status {
  display: flex; align-items: center; gap: 4px; margin-top: 3px;
}

/* =========================================
   COMPONENTES DE FOTO — RONDA CHECKPOINTS
   ========================================= */
.round-photo-notice {
  display: flex; align-items: center; gap: 8px;
  background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2);
  border-radius: var(--radius); padding: 8px 14px;
  color: #93c5fd; font-size: 11px; margin: 0 0 12px;
}
.round-photo-notice i { color: var(--primary); font-size: 14px; flex-shrink: 0; }

.cp-photo-thumb {
  display: flex; align-items: center; gap: 5px;
  background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25);
  border-radius: 8px; padding: 4px 10px;
  color: var(--green); font-size: 11px; cursor: pointer;
  transition: all 0.2s;
}
.cp-photo-thumb:hover { background: rgba(34,197,94,0.2); }
.cp-photo-thumb.done i { color: var(--green); }

.cp-photo-req {
  display: block; font-size: 10px; color: #fbbf24; margin-top: 2px;
}

.btn-cp-photo {
  display: flex; align-items: center; gap: 5px;
  background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.35);
  color: #93c5fd; border-radius: 8px; padding: 6px 12px;
  font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-cp-photo:hover { background: rgba(59,130,246,0.25); color: var(--primary); }

/* =========================================
   COMPONENTES DE FOTO — FECHO / RECEBIMENTO
   ========================================= */
.photo-required-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin: 12px 0;
}
.photo-section-hint {
  font-size: 11px; color: var(--text-muted); margin: 4px 0 12px;
}
.photo-options-row {
  display: flex; gap: 8px;
}
.btn-photo-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 8px; cursor: pointer;
  transition: all 0.2s; color: var(--text-secondary);
}
.btn-photo-opt i { font-size: 22px; margin-bottom: 2px; }
.btn-photo-opt span { font-size: 12px; font-weight: 600; }
.btn-photo-opt small { font-size: 10px; color: var(--text-muted); }
.btn-photo-opt:hover {
  border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.07); color: var(--primary);
}
.btn-photo-opt.selfie   i { color: #a78bfa; }
.btn-photo-opt.posto    i { color: #34d399; }
.btn-photo-opt.passagem i { color: #f59e0b; }

.close-photos-gallery {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px;
  min-height: 0;
}
.photo-status-row {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
}

/* required badge */
.required-badge {
  display: inline-block;
  background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3);
  color: var(--red); border-radius: 4px; padding: 1px 7px;
  font-size: 10px; font-weight: 700; margin-left: 6px; vertical-align: middle;
}

/* =========================================
   BANNER FOTO OBRIGATÓRIA (PHOTO-MANDATORY-BANNER)
   ========================================= */
.photo-mandatory-banner {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 16px;
  background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.06));
  border: 1.5px solid rgba(239,68,68,0.4);
  border-radius: var(--radius); margin: 0 0 14px;
  position: relative; overflow: hidden;
}
.photo-mandatory-banner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #ef4444, #f97316, #ef4444);
  animation: shimmer 2s linear infinite;
}
@keyframes shimmer { 0%{background-position:0%} 100%{background-position:200%} }

.photo-mandatory-banner.ronda-banner {
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04));
  border-color: rgba(245,158,11,0.4);
}
.photo-mandatory-banner.ronda-banner::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
}
.photo-mandatory-banner.close-banner {
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(99,102,241,0.04));
  border-color: rgba(99,102,241,0.4);
}
.photo-mandatory-banner.close-banner::before {
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #6366f1);
}

/* Banner done state */
.photo-mandatory-banner.banner-done {
  background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.04));
  border-color: rgba(34,197,94,0.4);
  animation: none;
}
.photo-mandatory-banner.banner-done::before {
  background: var(--green);
  animation: none;
}

.pmb-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(239,68,68,0.15); border: 2px solid rgba(239,68,68,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #ef4444;
}
.ronda-banner .pmb-icon { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.3); color: #f59e0b; }
.close-banner .pmb-icon  { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.3); color: #6366f1; }
.banner-done  .pmb-icon  { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); color: var(--green); }

.pmb-icon.camera-pulse {
  animation: cameraPulse 1.5s ease-in-out infinite;
}
@keyframes cameraPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

.pmb-text {
  text-align: center;
}
.pmb-text strong {
  display: block; font-size: 13px; color: var(--text-primary); margin-bottom: 3px;
}
.pmb-text span {
  font-size: 11px; color: var(--text-muted); line-height: 1.4;
}

.pmb-step-badge {
  position: absolute; top: 8px; right: 10px;
  background: rgba(239,68,68,0.2); border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5; border-radius: 20px; padding: 2px 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.banner-done .pmb-step-badge { background: rgba(34,197,94,0.2); border-color: rgba(34,197,94,0.3); color: #86efac; }

.pmb-btn {
  display: flex; align-items: center; gap: 6px;
  border-radius: 8px; padding: 8px 16px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s;
  border: none;
}
.pmb-btn.primary {
  background: #ef4444; color: #fff;
}
.pmb-btn.primary:hover { background: #dc2626; }
.pmb-btn.secondary {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: var(--text-secondary);
}
.pmb-btn.secondary:hover { background: rgba(255,255,255,0.14); }
.pmb-btn.small { padding: 6px 12px; font-size: 11px; }

.pmb-photo-actions {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}

.pmb-gallery {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  min-height: 0;
}

.pmb-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; text-align: center;
}

/* =========================================
   LOCKED CONTENT OVERLAY
   ========================================= */
.locked-content-overlay {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.3); border: 1px dashed rgba(255,255,255,0.1);
  border-radius: var(--radius); padding: 20px; margin: 8px 0;
  color: var(--text-muted); font-size: 12px; text-align: center;
}
.locked-content-overlay i { font-size: 20px; color: rgba(255,255,255,0.2); }

/* =========================================
   STEP INDICATOR BAR
   ========================================= */
.step-indicator-bar {
  display: flex; align-items: center; gap: 10px;
  background: rgba(59,130,246,0.07); border: 1px solid rgba(59,130,246,0.2);
  border-radius: 8px; padding: 8px 14px; margin: 12px 0 4px;
  font-size: 11px; color: #93c5fd;
}
.sib-badge {
  background: rgba(59,130,246,0.2); border: 1px solid rgba(59,130,246,0.3);
  border-radius: 20px; padding: 2px 8px;
  font-size: 9px; font-weight: 700; color: #60a5fa; text-transform: uppercase; white-space: nowrap;
}

/* =========================================
   RONDA — melhorias visuais
   ========================================= */
.header-center {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.ronda-subtitle {
  font-size: 10px; color: var(--text-muted); font-weight: 400;
}
.round-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin: 0 0 12px;
}
.round-card-info p { margin: 0; font-size: 12px; color: var(--text-secondary); }
.round-card-info small { font-size: 10px; color: var(--text-muted); }

.cp-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.cp-status-dot.green { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.cp-status-dot.yellow { background: var(--yellow); box-shadow: 0 0 6px rgba(245,158,11,0.5); }
.cp-status-dot.grey   { background: var(--border); }

.checkpoint {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  margin-bottom: 8px;
  transition: all 0.3s;
}
.checkpoint.done {
  border-color: rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.04);
}
.checkpoint.current {
  border-color: rgba(245,158,11,0.4);
  background: rgba(245,158,11,0.06);
  box-shadow: 0 0 0 2px rgba(245,158,11,0.15);
}
.checkpoint.locked {
  opacity: 0.5;
  filter: grayscale(0.5);
}
.cp-left {
  display: flex; align-items: flex-start; gap: 10px; flex: 1;
}
.cp-left i { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.cp-left span { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.cp-meta { display: block; font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.cp-right {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

.ronda-sent-confirm {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.3);
  border-radius: var(--radius); padding: 16px; margin-top: 12px;
  text-align: center; animation: alertSlideIn 0.4s ease;
}
.ronda-sent-confirm strong { font-size: 13px; color: var(--green); }
.ronda-sent-confirm span { font-size: 11px; color: var(--text-muted); }

/* =========================================
   COMPACT PHOTO SECTION (receive screen)
   ========================================= */
.compact-photo-section {
  background: rgba(59,130,246,0.04); border: 1px dashed rgba(59,130,246,0.2);
  padding: 10px 14px; margin: 8px 0;
}
.compact-photo-section .section-title { font-size: 12px; }
.compact-photo-section .photo-section-hint { font-size: 10px; }

/* =========================================
   MODAL ATRIBUIR EFETIVO
   ========================================= */
.ae-search-bar {
  display: flex; gap: 10px; align-items: center; margin-bottom: 14px;
}

.ae-list-hint {
  font-size: 11px; color: var(--text-muted); margin: 0 0 10px;
  display: flex; align-items: center; gap: 6px;
}
.ae-list-hint i { color: var(--primary); }

.ae-list-wrapper {
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-deep);
  margin-bottom: 16px;
}

.ae-efetivos-list {
  display: flex; flex-direction: column;
}

.ae-efetivo-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  cursor: pointer; transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}
.ae-efetivo-item:last-child { border-bottom: none; }
.ae-efetivo-item:hover { background: rgba(59,130,246,0.06); }
.ae-efetivo-item.selected {
  background: rgba(34,197,94,0.07);
  border-left: 3px solid var(--green);
}

.ae-ef-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg,var(--primary),#8b5cf6);
  color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ae-ef-info {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.ae-ef-info strong { font-size: 13px; color: var(--text-primary); }
.ae-ef-info span   { font-size: 11px; color: var(--text-muted); }
.ae-ef-posto {
  font-size: 10px; color: var(--text-muted);
  background: rgba(255,255,255,0.04); border-radius: 4px;
  padding: 1px 6px; display: inline-block;
}
.ae-ef-action { flex-shrink: 0; }

.ae-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 20px; color: var(--text-muted); text-align: center; font-size: 12px;
}
.ae-empty i { font-size: 22px; opacity: 0.4; }

/* Selecionado */
.ae-selected-section {
  background: var(--bg-card);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: var(--radius); padding: 14px 16px;
  margin-bottom: 4px;
}
.ae-selected-info {
  display: flex; align-items: center; gap: 12px;
}
.ae-selected-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg,var(--green),#059669);
  color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 2px solid rgba(34,197,94,0.4);
}
.ae-selected-info > div {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.ae-selected-info strong { font-size: 13px; color: var(--text-primary); }
.ae-selected-info span   { font-size: 11px; color: var(--text-muted); }
.ae-deselect-btn {
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25);
  color: var(--red); border-radius: 6px; padding: 4px 8px;
  cursor: pointer; font-size: 12px; transition: all 0.2s; flex-shrink: 0;
}
.ae-deselect-btn:hover { background: rgba(239,68,68,0.2); }

.ae-confirm-notice {
  display: flex; align-items: center; gap: 8px;
  background: rgba(59,130,246,0.07); border: 1px solid rgba(59,130,246,0.2);
  border-radius: 8px; padding: 8px 12px; margin-top: 10px;
  font-size: 11px; color: #93c5fd;
}
.ae-confirm-notice i { color: var(--primary); flex-shrink: 0; }

/* =========================================
   MODAL REMOVER / ALTERAR TURNO — Preview card
   ========================================= */
.remove-efetivo-preview, .alterar-turno-preview {
  /* placeholder — filled dynamically */
}
.remove-ef-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.ef-mini-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg,var(--primary),#8b5cf6);
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ef-mini-avatar.large { width: 44px; height: 44px; font-size: 15px; }
.ef-mini-avatar.red    { background: linear-gradient(135deg,#ef4444,#b91c1c); }
.ef-mini-avatar.yellow { background: linear-gradient(135deg,#f59e0b,#d97706); }
.ef-mini-avatar.green  { background: linear-gradient(135deg,var(--green),#059669); }

.remove-ef-info {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
}
.remove-ef-info strong { font-size: 13px; color: var(--text-primary); }
.remove-ef-info span   { font-size: 11px; color: var(--text-muted); }

.danger-notice {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.2);
  border-radius: 8px; padding: 10px 12px; margin-top: 12px;
  font-size: 11px; color: #fca5a5; line-height: 1.5;
}
.danger-notice i { color: var(--red); flex-shrink: 0; margin-top: 1px; }

/* Cabeçalho danger do modal */
.danger-header {
  background: rgba(239,68,68,0.08) !important;
  border-bottom-color: rgba(239,68,68,0.2) !important;
}
.danger-header h3 { color: #fca5a5 !important; }

/* =========================================
   MODAL ALTERAR TURNO — grid de opções
   ========================================= */
.turno-options-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.turno-opt-card {
  cursor: pointer; position: relative;
}
.turno-opt-card input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.turno-opt-inner {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--bg-deep); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 12px 8px;
  transition: all 0.2s; text-align: center;
}
.turno-opt-inner:hover { border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.05); }
.turno-opt-card input:checked + .turno-opt-inner {
  border-color: var(--green); background: rgba(34,197,94,0.08);
}
.turno-opt-icon { font-size: 22px; }
.turno-opt-inner strong { font-size: 12px; color: var(--text-primary); }
.turno-opt-inner small  { font-size: 10px; color: var(--text-muted); }

/* =========================================
   TABELA DE EFETIVOS — cell com avatar
   ========================================= */
.cell-with-avatar {
  display: flex; align-items: center; gap: 10px;
}

/* Empty table state */
.empty-table-cell { text-align: center; padding: 32px 20px !important; }
.empty-table-msg {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-muted); font-size: 13px;
}
.empty-table-msg i { font-size: 28px; opacity: 0.3; }
.empty-table-msg p { margin: 0; }
.btn-web-primary.small { padding: 6px 14px; font-size: 12px; }

/* =========================================
   RANKING DE MELHORES CLIENTES
   ========================================= */

/* Secção principal */
.ranking-section {
  margin-top: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}

/* Cabeçalho */
.ranking-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(234,179,8,0.04));
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: 12px;
}
.ranking-title-group {
  display: flex; align-items: center; gap: 14px;
}
.ranking-crown {
  font-size: 28px; color: #f59e0b;
  filter: drop-shadow(0 0 8px rgba(245,158,11,0.5));
  animation: crownGlow 2.5s ease-in-out infinite;
}
@keyframes crownGlow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(245,158,11,0.4)); }
  50%      { filter: drop-shadow(0 0 14px rgba(245,158,11,0.8)); }
}
.ranking-title {
  font-size: 18px; font-weight: 800; color: var(--text-primary); margin: 0;
}
.ranking-subtitle {
  font-size: 12px; color: var(--text-muted); margin: 2px 0 0;
}
.ranking-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ranking-filter-pills {
  display: flex; gap: 6px;
}
.rnk-pill {
  background: var(--bg-deep); border: 1px solid var(--border);
  color: var(--text-secondary); border-radius: 20px;
  padding: 5px 13px; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.rnk-pill:hover { border-color: rgba(245,158,11,0.4); color: #f59e0b; }
.rnk-pill.active {
  background: rgba(245,158,11,0.15);
  border-color: rgba(245,158,11,0.5);
  color: #f59e0b; font-weight: 700;
}
.ranking-period-sel {
  padding: 5px 10px; font-size: 12px; border-radius: 8px;
  background: var(--bg-deep); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer;
  min-width: 130px;
}

/* ─── PÓDIO ─────────────────────────────────────── */
.ranking-podium {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0; padding: 32px 24px 0;
  background: linear-gradient(180deg, rgba(245,158,11,0.04) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
  min-height: 280px;
}

.podium-place {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; flex: 1; max-width: 220px;
  cursor: pointer;
}

/* Card flutuante acima do bloco */
.podium-client-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 12px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%; text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 0; position: relative;
}
.podium-client-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
.place-1 .podium-client-card {
  border-color: rgba(245,158,11,0.5);
  background: linear-gradient(135deg, rgba(245,158,11,0.08), var(--bg-card));
  box-shadow: 0 4px 20px rgba(245,158,11,0.15);
}
.place-2 .podium-client-card { border-color: rgba(148,163,184,0.4); }
.place-3 .podium-client-card { border-color: rgba(205,124,62,0.4); }

.podium-medal { font-size: 26px; line-height: 1; }
.podium-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  color: #fff; font-weight: 800; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(255,255,255,0.15);
}
.place-1 .podium-avatar { width: 60px; height: 60px; font-size: 20px; border-color: #f59e0b; }

.podium-name {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
.podium-sector { font-size: 10px; color: var(--text-muted); }
.podium-score-badge {
  background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.3);
  color: #f59e0b; border-radius: 20px; padding: 2px 10px;
  font-size: 11px; font-weight: 700;
}
.podium-receita { font-size: 11px; color: var(--text-secondary); }
.podium-trend {
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px;
}
.podium-trend.up     { color: var(--green); background: rgba(34,197,94,0.1); }
.podium-trend.down   { color: var(--red);   background: rgba(239,68,68,0.1); }
.podium-trend.stable { color: var(--text-muted); background: rgba(255,255,255,0.05); }

/* Bloco colorido do pódio */
.podium-block {
  width: 100%; border-radius: 10px 10px 0 0;
  background: var(--podium-color, #475569);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10px; margin-top: 8px;
  opacity: 0.85;
}
.place-1 .podium-block { opacity: 1; box-shadow: 0 -4px 20px rgba(245,158,11,0.3); }
.podium-pos {
  color: rgba(255,255,255,0.7); font-size: 22px; font-weight: 900;
}

/* ─── TABELA ─────────────────────────────────────── */
.ranking-table-wrap {
  padding: 0 0 4px;
  overflow-x: auto;
}
.ranking-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.ranking-table thead tr {
  background: var(--bg-deep);
  border-bottom: 2px solid var(--border);
}
.ranking-table th {
  padding: 10px 14px; text-align: left;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap;
}
.rnk-th-pos { width: 52px; text-align: center; }

.rnk-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s; cursor: pointer;
}
.rnk-row:hover { background: rgba(255,255,255,0.03); }
.rnk-row-highlight { background: rgba(245,158,11,0.04); }
.rnk-row-highlight:hover { background: rgba(245,158,11,0.08); }
.ranking-table td { padding: 10px 14px; vertical-align: middle; }

/* Posição */
.rnk-pos {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; margin: 0 auto;
}
.rnk-pos-gold   { background: rgba(245,158,11,0.2); color: #f59e0b; border: 2px solid rgba(245,158,11,0.4); }
.rnk-pos-silver { background: rgba(148,163,184,0.15); color: #94a3b8; border: 2px solid rgba(148,163,184,0.3); }
.rnk-pos-bronze { background: rgba(205,124,62,0.15); color: #cd7c3e; border: 2px solid rgba(205,124,62,0.3); }
.rnk-pos-normal { background: var(--bg-deep); color: var(--text-muted); font-size: 12px; border: 1px solid var(--border); }

/* Cliente */
.rnk-client-cell {
  display: flex; align-items: center; gap: 10px;
}
.rnk-client-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  color: #fff; font-weight: 800; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rnk-client-cell strong { font-size: 13px; color: var(--text-primary); display: block; }
.rnk-setor { font-size: 10px; color: var(--text-muted); }

/* Postos badge */
.rnk-postos-badge {
  background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.25);
  color: #93c5fd; border-radius: 6px; padding: 2px 8px;
  font-size: 11px; font-weight: 700;
}

/* Receita */
.rnk-receita strong { font-size: 13px; color: var(--text-primary); }

/* Pontualidade barra */
.rnk-pont-wrap { display: flex; align-items: center; gap: 8px; min-width: 100px; }
.rnk-pont-bar {
  flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden;
}
.rnk-pont-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.rnk-bar-green  { background: var(--green); }
.rnk-bar-yellow { background: var(--yellow); }
.rnk-bar-red    { background: var(--red); }
.rnk-pont-pct { font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

/* Ocorrências badge */
.rnk-oc-badge {
  border-radius: 20px; padding: 2px 10px;
  font-size: 11px; font-weight: 700;
}
.rnk-oc-zero { background: rgba(34,197,94,0.12); color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
.rnk-oc-low  { background: rgba(245,158,11,0.12); color: var(--yellow); border: 1px solid rgba(245,158,11,0.3); }
.rnk-oc-high { background: rgba(239,68,68,0.12);  color: var(--red);   border: 1px solid rgba(239,68,68,0.3); }

/* Estrelas */
.rnk-stars { font-size: 12px; white-space: nowrap; }

/* Score círculo */
.rnk-score-wrap { display: flex; justify-content: center; }
.rnk-score-circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: conic-gradient(var(--score-color, var(--green)) var(--score-pct, 75%), rgba(255,255,255,0.08) 0%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.rnk-score-circle::before {
  content: ''; position: absolute; inset: 4px;
  border-radius: 50%; background: var(--bg-card);
}
.rnk-score-circle span {
  position: relative; z-index: 1;
  font-size: 11px; font-weight: 800; color: var(--text-primary);
}

/* Tendência */
.rnk-trend-cell { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.rnk-trend-up     { color: var(--green); background: rgba(34,197,94,0.1); }
.rnk-trend-down   { color: var(--red);   background: rgba(239,68,68,0.1); }
.rnk-trend-stable { color: var(--text-muted); background: rgba(255,255,255,0.05); }

/* ─── RODAPÉ KPIs ────────────────────────────────── */
.ranking-footer-kpis {
  display: flex; gap: 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.rnk-footer-kpi {
  flex: 1; min-width: 140px;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-right: 1px solid var(--border);
}
.rnk-footer-kpi:last-child { border-right: none; }
.rnk-footer-kpi i { font-size: 20px; flex-shrink: 0; }
.rnk-footer-kpi div { display: flex; flex-direction: column; gap: 2px; }
.rnk-footer-kpi strong { font-size: 15px; color: var(--text-primary); font-weight: 800; }
.rnk-footer-kpi span   { font-size: 10px; color: var(--text-muted); }
.rnk-footer-kpi.highlight {
  background: rgba(245,158,11,0.06);
  border-color: rgba(245,158,11,0.2);
}
.rnk-footer-kpi.highlight strong { color: #f59e0b; }
.rnk-footer-leader-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  color: #fff; font-weight: 800; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ─── MODAL DETALHE DO CLIENTE ───────────────────── */
.rnk-detail-header-inner {
  display: flex; align-items: center; gap: 16px; flex: 1;
}
.rnk-detail-avatar-wrap {
  position: relative; flex-shrink: 0;
}
.rnk-detail-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  color: #fff; font-weight: 900; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.rnk-detail-badge {
  position: absolute; bottom: -4px; right: -4px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 1px 7px;
  font-size: 11px; font-weight: 800; color: var(--text-primary);
  white-space: nowrap;
}
.rnk-detail-meta {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px;
}
.rnk-detail-meta span {
  font-size: 11px; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
}
.rnk-detail-meta span i { font-size: 10px; }

/* KPI strip do modal */
.rnk-detail-kpi-strip {
  display: flex; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
}
.rnk-kpi-box {
  flex: 1; min-width: 110px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 16px;
  border-right: 1px solid var(--border);
}
.rnk-kpi-box:last-child { border-right: none; }
.rnk-kpi-label {
  font-size: 10px; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.rnk-kpi-label i { font-size: 10px; }
.rnk-kpi-val {
  font-size: 17px; font-weight: 900; color: var(--text-primary);
}

/* Corpo do modal: gauge + breakdown */
.rnk-detail-body {
  display: flex; gap: 0;
  padding: 0;
}
.rnk-detail-gauge-col {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 4px;
  padding: 24px 20px;
  border-right: 1px solid var(--border);
  min-width: 160px;
  background: var(--bg-deep);
}
.rnk-gauge-ring svg { display: block; }
.rnk-gauge-label { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.rnk-gauge-value { font-size: 36px; font-weight: 900; margin-top: 2px; line-height: 1; }
.rnk-gauge-pts   { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.rnk-detail-trend-big {
  font-size: 15px; font-weight: 800;
  padding: 4px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.05);
}

.rnk-detail-right {
  flex: 1; padding: 20px;
  overflow-y: auto;
}
.rnk-breakdown-section {}
.rnk-breakdown-title {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  margin: 0 0 12px; display: flex; align-items: center; gap: 7px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.rnk-breakdown-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.rnk-bd-label {
  font-size: 11px; color: var(--text-secondary); width: 185px; flex-shrink: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rnk-bd-bar-wrap {
  flex: 1; height: 8px; background: rgba(255,255,255,0.07);
  border-radius: 4px; overflow: hidden;
}
.rnk-bd-bar {
  height: 100%; border-radius: 4px;
  transition: width 0.6s cubic-bezier(.34,1.56,.64,1);
}
.rnk-bd-pts {
  font-size: 11px; font-weight: 700; width: 42px;
  text-align: right; flex-shrink: 0;
}

/* Receita por período */
.rnk-receita-periods {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.rnk-period-box {
  flex: 1; min-width: 120px;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.rnk-period-box span { font-size: 10px; color: var(--text-muted); }
.rnk-period-box strong { font-size: 13px; font-weight: 800; color: var(--text-primary); }
.rnk-period-active {
  border-color: rgba(245,158,11,0.4);
  background: rgba(245,158,11,0.07);
}
.rnk-period-active strong { color: #f59e0b; }

/* Alertas */
.rnk-detail-alerts {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 20px; border-top: 1px solid var(--border);
  background: var(--bg-deep);
}
.rnk-alert-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  font-size: 12px;
}
.rnk-alert-item i { margin-top: 1px; flex-shrink: 0; font-size: 13px; }
.rnk-alert-red    { background: rgba(239,68,68,0.08);  color: #fca5a5; border-left: 3px solid #ef4444; }
.rnk-alert-yellow { background: rgba(245,158,11,0.08); color: #fde68a; border-left: 3px solid #f59e0b; }
.rnk-alert-green  { background: rgba(34,197,94,0.08);  color: #86efac; border-left: 3px solid #22c55e; }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 900px) {
  .ranking-podium { gap: 0; padding: 20px 12px 0; }
  .podium-client-card { padding: 10px 8px; }
  .podium-name { font-size: 11px; max-width: 100px; }
  .ranking-footer-kpis { flex-direction: column; }
  .rnk-footer-kpi { border-right: none; border-bottom: 1px solid var(--border); }
  .rnk-detail-body { flex-direction: column; }
  .rnk-detail-gauge-col { border-right: none; border-bottom: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 16px; gap: 12px; }
  .rnk-bd-label { width: 140px; }
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 768px) {
  .web-container { flex-direction: column; height: auto; }
  .sidebar { width: 100%; flex-direction: row; padding: 8px; }
  .sidebar-nav { flex-direction: row; overflow-x: auto; }
  .sidebar-brand { display: none; }
  .sidebar-user { display: none; }
  .nav-item span { display: none; }
  .nav-item { padding: 8px; }
  .view-section { padding: 10px; }
  .phone-mockup { width: 340px; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .efetivo-stats { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .alert-summary-grid { grid-template-columns: repeat(2,1fr); }
  .kpi-6 { grid-template-columns: repeat(2,1fr); }
  .report-kpi-mini-grid { grid-template-columns: 1fr; }
}