/* ==========================================================================
   Sentric Design System — Component Styles
   /static/css/sentric-pages.css

   Estilos para componentes Sentric (prefixo s-).
   Depende de tokens.css para custom properties.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SECTIONS
   -------------------------------------------------------------------------- */
.s-section {
  background: var(--s-bg-card);
  border-radius: var(--s-radius-lg);
  padding: var(--s-space-lg);
  margin-bottom: var(--s-space-lg);
  box-shadow: var(--s-shadow-soft);
  max-width: 100%;
  overflow-x: auto;
}

.s-section-header {
  display: flex;
  align-items: center;
  gap: var(--s-space-sm);
  font-size: var(--s-font-size-base);
  font-weight: 600;
  color: var(--s-text-primary);
  margin-bottom: var(--s-space-md);
  padding-bottom: var(--s-space-sm);
  border-bottom: 1px solid var(--s-gray-200);
}

.s-section-header i {
  font-size: 1.2rem;
  color: var(--s-primary);
}

/* --------------------------------------------------------------------------
   2. TABS (camera_menu.html)
   -------------------------------------------------------------------------- */
.s-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-md);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-space-lg) 0;
  border-bottom: 2px solid var(--s-gray-200);
  padding-bottom: var(--s-space-sm);
}

.s-tabs .nav-item {
  margin: 0;
}

.s-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 0.85rem;
  font-size: var(--s-font-size-sm);
  font-weight: 500;
  color: var(--s-text-secondary);
  text-decoration: none;
  border-radius: var(--s-radius-md) var(--s-radius-md) 0 0;
  border: none;
  background: transparent;
  transition: color var(--s-transition-fast), background-color var(--s-transition-fast);
  white-space: nowrap;
}

.s-tabs .nav-link:hover {
  color: var(--s-primary);
  background-color: var(--s-primary-light);
}

.s-tabs .nav-link.active {
  color: var(--s-primary);
  background-color: var(--s-primary-light);
  border-bottom: 2px solid var(--s-primary);
  margin-bottom: -2px;
  font-weight: 600;
}

.s-tabs .nav-link i {
  font-size: 1rem;
}

.s-tab-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.85rem;
  font-size: var(--s-font-size-sm);
  font-weight: 500;
  color: var(--s-text-muted);
  text-decoration: none;
  margin-left: auto;
  transition: color var(--s-transition-fast);
}

.s-tab-back:hover {
  color: var(--s-primary);
}

/* --------------------------------------------------------------------------
   3. ALERTS
   -------------------------------------------------------------------------- */
.s-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-space-sm);
  padding: 0.75rem 1rem;
  border-radius: var(--s-radius-md);
  font-size: var(--s-font-size-sm);
  line-height: 1.5;
  margin-bottom: var(--s-space-md);
}

.s-alert i {
  font-size: 1.1rem;
  margin-top: 1px;
  flex-shrink: 0;
}

.s-alert-success {
  background-color: var(--s-success-light);
  color: var(--s-success-dark);
  border-left: 3px solid var(--s-success);
}

.s-alert-danger {
  background-color: var(--s-danger-light);
  color: var(--s-danger-dark);
  border-left: 3px solid var(--s-danger);
}

.s-alert-warning {
  background-color: var(--s-warning-light);
  color: var(--s-warning-dark);
  border-left: 3px solid var(--s-warning);
}

.s-alert-info {
  background-color: var(--s-info-light);
  color: var(--s-info-dark);
  border-left: 3px solid var(--s-info);
}

/* --------------------------------------------------------------------------
   4. BADGES
   -------------------------------------------------------------------------- */
.s-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--s-radius-full);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

.s-badge i {
  font-size: 0.85rem;
}

.s-badge-success {
  background-color: var(--s-success-light);
  color: var(--s-success-dark);
}

.s-badge-danger {
  background-color: var(--s-danger-light);
  color: var(--s-danger);
}

.s-badge-info {
  background-color: var(--s-info-light);
  color: var(--s-info-dark);
}

.s-badge-warning {
  background-color: var(--s-warning-light);
  color: var(--s-warning-dark);
}

.s-badge-primary {
  background: var(--s-primary-light);
  color: var(--s-primary);
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.s-btn-primary {
  background-color: var(--s-primary);
  color: var(--s-text-inverse);
  border: none;
  border-radius: var(--s-radius-md);
  font-weight: 500;
  font-size: var(--s-font-size-sm);
  transition: background-color var(--s-transition-fast), transform var(--s-transition-fast);
  cursor: pointer;
}

.s-btn-primary:hover {
  background-color: var(--s-primary-hover);
  color: var(--s-text-inverse);
  transform: translateY(-1px);
}

.s-btn-excel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 0.85rem;
  background-color: #107C41;
  color: #ffffff;
  border: none;
  border-radius: var(--s-radius-md);
  font-size: var(--s-font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--s-transition-fast);
}

.s-btn-excel:hover {
  background-color: #0d6535;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   5b. DATE FILTER
   -------------------------------------------------------------------------- */
.s-date-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.s-date-filter .form-control {
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-md);
  padding: 0.45rem 0.75rem;
  font-size: 0.875rem;
  transition: border-color var(--s-transition-fast);
  max-width: 200px;
}

.s-date-filter .form-control:focus {
  border-color: var(--s-primary);
  box-shadow: 0 0 0 3px var(--s-focus-ring);
}

.s-date-filter label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--s-text-muted);
  margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   6. PHOTO CARD (camera_photos.html)
   -------------------------------------------------------------------------- */
.s-photo-card {
  display: block;
  position: relative;
  border-radius: var(--s-radius-lg);
  overflow: hidden;
  background: var(--s-bg-light);
  aspect-ratio: 4 / 3;
  text-decoration: none;
}
.s-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--s-transition-normal);
}

.s-photo-card:hover img {
  transform: scale(1.05);
}

.s-photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0);
  color: #ffffff;
  font-size: var(--s-font-size-sm);
  font-weight: 500;
  opacity: 0;
  transition: opacity var(--s-transition-normal), background var(--s-transition-normal);
}

.s-photo-card:hover .s-photo-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.45);
}

.s-photo-overlay i {
  font-size: 1.5rem;
}

.s-photo-overlay span {
  font-size: 0.8rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   7. TIMELINE HOUR HEADER (NVR photos)
   -------------------------------------------------------------------------- */
.s-timeline-hour {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--s-text-primary);
  margin: 1.25rem 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.s-timeline-hour .s-badge {
  font-size: 0.7rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   8. PAGINATION
   -------------------------------------------------------------------------- */
.s-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-space-md) 0;
  flex-wrap: wrap;
  gap: var(--s-space-sm);
}

.s-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.4rem 0.85rem;
  font-size: var(--s-font-size-sm);
  font-weight: 500;
  color: var(--s-primary);
  text-decoration: none;
  border-radius: var(--s-radius-md);
  background: var(--s-primary-light);
  transition: background-color var(--s-transition-fast), color var(--s-transition-fast);
}

.s-page-btn:hover {
  background-color: var(--s-primary);
  color: var(--s-text-inverse);
}

.s-page-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.s-page-info {
  font-size: var(--s-font-size-sm);
  color: var(--s-text-muted);
}

/* --------------------------------------------------------------------------
   9. STAT CARDS (operator_cameras.html)
   -------------------------------------------------------------------------- */
.s-stat-card {
  display: flex;
  align-items: center;
  gap: var(--s-space-md);
  background: var(--s-bg-card);
  border-radius: var(--s-radius-lg);
  padding: var(--s-space-lg);
  box-shadow: var(--s-shadow-soft);
  transition: transform var(--s-transition-fast), box-shadow var(--s-transition-fast);
  height: 100%;
}

.s-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--s-shadow-sm);
}

.s-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--s-radius-xl);
  font-size: 1.4rem;
  flex-shrink: 0;
}

.s-stat-icon-primary {
  background-color: var(--s-primary-light);
  color: var(--s-primary);
}

.s-stat-icon-success {
  background-color: var(--s-success-light);
  color: var(--s-success);
}

.s-stat-body {
  flex: 1;
  min-width: 0;
}

.s-stat-label {
  font-size: var(--s-font-size-sm);
  color: var(--s-text-muted);
  margin-bottom: 2px;
}

.s-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--s-text-primary);
  line-height: 1.2;
}

.s-stat-value small {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--s-text-muted);
}

.s-stat-icon-danger {
  background-color: var(--s-danger-light);
  color: var(--s-danger);
}

.s-stat-icon-warning {
  background-color: var(--s-warning-light);
  color: var(--s-warning);
}

.s-stat-icon-info {
  background-color: var(--s-info-light);
  color: var(--s-info);
}

.s-stat-icon-dark {
  background-color: var(--s-gray-200);
  color: var(--s-gray-700);
}

/* --------------------------------------------------------------------------
   10. TABLE
   -------------------------------------------------------------------------- */
.s-table {
  width: 100%;
  border-collapse: collapse;
}

.s-table thead {
  background: var(--s-gray-50);
}

.s-table thead th {
  font-size: var(--s-font-size-sm);
  font-weight: 600;
  color: var(--s-text-secondary);
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--s-gray-200);
  white-space: nowrap;
}

.s-table tbody td {
  padding: 0.75rem 1rem;
  font-size: var(--s-font-size-sm);
  color: var(--s-text-primary);
  border-bottom: 1px solid var(--s-gray-100);
  vertical-align: middle;
}

.s-table tbody tr:hover {
  background-color: var(--s-gray-50);
}

/* Icon centering inside action buttons in tables
   Overrides core.min.css: .btn:not(.rounded-circle)>i { margin-right:10px } */
.s-table td > .btn > i,
.s-table td .btn > i {
  line-height: 1;
  vertical-align: middle;
  margin-right: 0;
}

.s-link-primary {
  color: var(--s-primary);
  text-decoration: none;
  font-weight: 500;
}

.s-link-primary:hover {
  color: var(--s-primary-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   11. WEATHER (prevision.html)
   -------------------------------------------------------------------------- */

/* Hero Section */
.s-hero-weather {
  display: flex;
  align-items: center;
  gap: var(--s-space-lg);
  background: linear-gradient(135deg, var(--s-primary-900) 0%, var(--s-primary-700) 100%);
  color: #ffffff;
  border-radius: var(--s-radius-xl);
  padding: var(--s-space-xl);
  margin-bottom: var(--s-space-lg);
  max-width: 100%;
  overflow: hidden;
  flex-wrap: wrap;
}

.s-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  flex-shrink: 0;
}

.s-hero-icon i {
  font-size: 2.5rem;
}

.s-hero-temp {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.s-hero-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--s-font-size-sm);
  opacity: 0.85;
  margin-top: 4px;
}

.s-hero-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--s-font-size-xs);
  opacity: 0.65;
  margin-top: 2px;
}

/* Weather Metrics Grid */
.s-weather-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-space-md);
  margin-bottom: var(--s-space-lg);
  max-width: 100%;
}

.s-info-metric {
  display: flex;
  align-items: center;
  gap: var(--s-space-sm);
  background: var(--s-bg-card);
  border-radius: var(--s-radius-lg);
  padding: var(--s-space-md);
  box-shadow: var(--s-shadow-soft);
}

.s-metric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--s-radius-md);
  background: var(--s-primary-light);
  color: var(--s-primary);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.s-metric-value {
  font-size: var(--s-font-size-base);
  font-weight: 600;
  color: var(--s-text-primary);
}

.s-metric-label {
  font-size: var(--s-font-size-xs);
  color: var(--s-text-muted);
}

/* Hourly Forecast */
.s-hourly-container {
  display: flex;
  gap: var(--s-space-sm);
  overflow-x: auto;
  padding-bottom: var(--s-space-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--s-gray-300) transparent;
}

.s-hourly-container::-webkit-scrollbar {
  height: 6px;
}

.s-hourly-container::-webkit-scrollbar-track {
  background: transparent;
}

.s-hourly-container::-webkit-scrollbar-thumb {
  background: var(--s-gray-300);
  border-radius: 3px;
}

.s-hourly-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  padding: var(--s-space-sm) var(--s-space-md);
  background: var(--s-gray-50);
  border-radius: var(--s-radius-lg);
  text-align: center;
  transition: background-color var(--s-transition-fast);
  flex-shrink: 0;
}

.s-hourly-card:hover {
  background: var(--s-primary-light);
}

.s-hourly-time {
  font-size: var(--s-font-size-xs);
  font-weight: 500;
  color: var(--s-text-muted);
}

.s-hourly-icon {
  font-size: 1.5rem;
  color: var(--s-primary);
}

.s-hourly-temp {
  font-size: var(--s-font-size-sm);
  font-weight: 600;
  color: var(--s-text-primary);
}

/* --------------------------------------------------------------------------
   12. PTZ CONTROLS (camera_streaming.html)
   -------------------------------------------------------------------------- */
.s-ptz-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-space-xl);
  margin-top: var(--s-space-md);
}

.s-dpad {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(3, 52px);
  gap: 6px;
}

.s-dpad-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s-gray-100);
  border: 1px solid var(--s-gray-300);
  border-radius: var(--s-radius-md);
  color: var(--s-text-primary);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color var(--s-transition-fast), border-color var(--s-transition-fast);
}

.s-dpad-btn:hover:not(:disabled) {
  background: var(--s-primary-light);
  border-color: var(--s-primary);
  color: var(--s-primary);
}

.s-dpad-btn:active:not(:disabled) {
  transform: scale(0.92);
}
.s-dpad-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.s-dpad-center {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s-gray-50);
  border-radius: var(--s-radius-md);
  color: var(--s-text-muted);
  font-size: 1.3rem;
}

.s-ptz-options {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-sm);
}

.s-ptz-options label {
  font-size: var(--s-font-size-sm);
  font-weight: 500;
  color: var(--s-text-secondary);
}

.s-ptz-options select {
  width: 120px;
  font-size: 0.85rem;
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-md);
  padding: 0.35rem 0.5rem;
}

/* --------------------------------------------------------------------------
   13. DOWNLOAD CONTAINER
   -------------------------------------------------------------------------- */
.s-download-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-md);
  padding: var(--s-space-md);
  background: var(--s-gray-50);
  border-radius: var(--s-radius-lg);
  border: 1px dashed var(--s-gray-300);
}

/* --------------------------------------------------------------------------
   14. FORM VALIDATION
   -------------------------------------------------------------------------- */
.s-validate .form-control:invalid,
.s-validation .form-control.is-invalid {
  border-color: var(--s-danger);
}

.s-validate .form-control:valid,
.s-validation .form-control.is-valid {
  border-color: var(--s-success);
}

/* --------------------------------------------------------------------------
   15. LAYOUT OVERFLOW FIX
   -------------------------------------------------------------------------- */
#middle {
  min-width: 0;
  overflow-x: hidden;
}

#footer {
  background-color: var(--s-bg-card);
}

.s-hourly-scroll {
  max-width: 100%;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   16. COLLAPSIBLE SIDEBAR
   -------------------------------------------------------------------------- */

/* === DESKTOP (>=992px): sidebar fixo colapsável 70px → 250px on hover === */
@media (min-width: 992px) {
  #aside-main {
    width: 70px !important;
    transition: width 0.25s ease;
    overflow: hidden;
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
  }

  #aside-main:hover {
    width: 250px !important;
  }

  /* Ajusta conteúdo, header e footer para sidebar colapsado */
  #wrapper_content {
    margin-left: 70px !important;
  }

  #header {
    margin-left: 70px !important;
  }

  #footer {
    margin-left: 70px !important;
    transition: margin-left 0.25s ease;
  }

  /* --- Sidebar colapsado (padrão: 70px) --- */

  /* Remover padding horizontal quando colapsado */
  #aside-main:not(:hover) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Logo area: reduz padding quando colapsado */
  #aside-main:not(:hover) > .py-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0.25rem !important;
  }

  /* Nav-link: flex container para centralizar ícone */
  #aside-main:not(:hover) .nav-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.5rem 0 !important;
    overflow: hidden;
  }

  /* Span: escondido quando colapsado */
  #aside-main:not(:hover) .nav-link span {
    display: none !important;
  }

  /* Ícone: remover float/margin do framework para flex funcionar */
  #aside-main:not(:hover) .nav-link i,
  #aside-main:not(:hover) .nav-link svg {
    float: none !important;
    margin: 0 !important;
  }

  /* Nav-title: escondido quando colapsado */
  #aside-main:not(:hover) .nav-title {
    display: none !important;
  }

  /* Sidebar divider: linha fina entre global e block */
  #aside-main .sidebar-divider {
    list-style: none;
    border-top: 1px solid var(--s-border, rgba(0,0,0,0.1));
    margin: 0.5rem 0.75rem;
    padding: 0;
  }
  #aside-main:not(:hover) .sidebar-divider {
    margin: 0.35rem 0.5rem;
  }

  /* Sub-items do Ponto: ocultar quando colapsado */
  #aside-main:not(:hover) .nav-item.ms-3 {
    display: none !important;
  }

  /* --- Sidebar expandido (hover: 250px) --- */

  #aside-main:hover .nav-item.ms-3 {
    display: list-item;
  }

  /* Logo: reduz margem inferior quando colapsado */
  #aside-main > .py-2.mb-3 {
    transition: margin-bottom 0.25s ease;
  }

  #aside-main:hover > .py-2.mb-3 {
    margin-bottom: 1rem !important;
  }

  /* Logo: mostra mini por padrão, full no hover */
  #aside-main .logo-full {
    display: none;
  }

  #aside-main .logo-mini {
    display: block;
    margin: 0 auto;
    object-fit: contain;
  }

  #aside-main:hover .logo-full {
    display: block;
    margin: 0 auto;
  }

  #aside-main:hover .logo-mini {
    display: none;
  }
} /* fim @media desktop */

/* === MOBILE (<992px): sidebar é off-canvas overlay do framework SOW === */
@media (max-width: 991.98px) {
  #aside-main {
    width: 250px !important;
    z-index: 1001;
  }

  /* Logo: sempre mostrar versão completa no mobile */
  #aside-main .logo-full {
    display: block;
    margin: 0 auto;
  }

  #aside-main .logo-mini {
    display: none;
  }
}

/* Item ativo no sidebar */
.sidebar-active {
  background: var(--s-primary-light) !important;
  color: var(--s-primary) !important;
  border-left: 3px solid var(--s-primary);
  border-radius: var(--s-radius-md);
  font-weight: 600;
}

/* Esconder footer vazio e controles de scroll do sidebar */
#aside-main .border-top.border-light {
  display: none;
}

/* Esconder controles de scroll/navegação do framework SOW no sidebar */
#aside-main .swiper-pagination,
#aside-main .swiper-button-next,
#aside-main .swiper-button-prev,
#aside-main ~ .scroll-info,
.aside-start ~ .scroll-info,
.aside-start ~ div[class*="scroll"],
#aside-main + .scroll-info {
  display: none !important;
}

/* Esconder qualquer widget de navegação SOW posicionado no canto do sidebar */
.js-stacked,
.scrollable-horizontal-nav,
[data-scrollable-nav] {
  display: none !important;
}

/* Sidebar: esconder overflow no aside-wrapper quando colapsado */
#aside-main .aside-wrapper {
  overflow-x: hidden !important;
  scrollbar-width: none;
}

#aside-main .aside-wrapper::-webkit-scrollbar {
  width: 0 !important;
  display: none;
}

/* Ícones do RemixIcon no sidebar */
#aside-main .nav-link i {
  font-size: 1.2rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   17. TOGGLE SWITCH
   -------------------------------------------------------------------------- */
.s-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--s-space-sm);
  cursor: pointer;
}

.s-toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}

.s-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.s-toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--s-gray-300);
  transition: 0.3s ease;
  border-radius: 25px;
}

.s-toggle-switch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3.5px;
  background-color: var(--s-bg-card);
  transition: 0.3s ease;
  border-radius: 50%;
}

.s-toggle-switch input:checked + .slider {
  background-color: var(--s-primary);
}

.s-toggle-switch input:checked + .slider:before {
  transform: translateX(25px);
}

/* --------------------------------------------------------------------------
   18. RESPONSIVE OVERRIDES
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .s-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--s-space-xs);
  }

  .s-tabs::-webkit-scrollbar {
    display: none;
  }

  .s-section {
    padding: var(--s-space-md);
    margin-bottom: var(--s-space-md);
  }

  .s-hero-weather {
    flex-direction: column;
    text-align: center;
    padding: var(--s-space-lg);
  }

  .s-weather-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .s-stat-card {
    padding: var(--s-space-md);
  }

  .s-stat-value {
    font-size: 1.25rem;
  }

  .s-pagination {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .s-ptz-container {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 576px) {
  .s-weather-metrics {
    grid-template-columns: 1fr;
  }

  .s-date-filter {
    flex-direction: column;
    align-items: stretch;
  }

  .s-date-filter .form-control {
    max-width: 100%;
  }

  .s-pagination {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   19. DARK MODE OVERRIDES
   Ativado via data-bs-theme="dark" no <html>.
   Tokens adaptam automaticamente; aqui estao overrides de componentes
   que usam classes Bootstrap ou precisam de ajustes especificos.
   -------------------------------------------------------------------------- */

/* Body bg-light override */
[data-bs-theme="dark"] .bg-light {
  background-color: var(--s-bg-light) !important;
}

/* Sidebar: fundo escuro */
[data-bs-theme="dark"] #aside-main {
  background-color: var(--s-gray-100) !important;
}

/* Sidebar nav links */
[data-bs-theme="dark"] .nav-deep-light .nav-item > .nav-link {
  color: var(--s-text-secondary);
}

[data-bs-theme="dark"] .nav-deep-light .nav-item:hover > .nav-link,
[data-bs-theme="dark"] .nav-deep-light .nav-item.active > .nav-link {
  color: var(--s-primary);
}

/* Sidebar nav title */
[data-bs-theme="dark"] .nav-deep-light .nav-title {
  color: var(--s-text-muted) !important;
}

/* Sidebar active state */
[data-bs-theme="dark"] .sidebar-active {
  background: var(--s-primary-light) !important;
  color: var(--s-primary) !important;
}

/* Header */
[data-bs-theme="dark"] #header {
  background-color: var(--s-gray-100) !important;
  border-bottom: 1px solid var(--s-border);
}

[data-bs-theme="dark"] #header .navbar-light .nav-link {
  color: var(--s-text-secondary);
}

[data-bs-theme="dark"] #header .navbar-light .nav-link:hover {
  color: var(--s-text-primary);
}

/* Footer */
[data-bs-theme="dark"] #footer {
  background-color: var(--s-bg-card) !important;
  border-top: 1px solid var(--s-border);
  color: var(--s-text-secondary);
}
[data-bs-theme="dark"] #footer a,
[data-bs-theme="dark"] #footer span {
  color: var(--s-text-secondary) !important;
}
[data-bs-theme="dark"] #footer a:hover {
  color: var(--s-text-primary) !important;
}
[data-bs-theme="dark"] #footer .dropdown-menu {
  background-color: var(--s-bg-card);
  border-color: var(--s-border);
}
[data-bs-theme="dark"] #footer .dropdown-item {
  color: var(--s-text-primary);
}
[data-bs-theme="dark"] #footer .dropdown-item:hover {
  background-color: var(--s-gray-100);
}

/* Section header border */
[data-bs-theme="dark"] .s-section-header {
  border-bottom-color: var(--s-border);
}

/* ---- Tables (Bootstrap .table + Sentric .s-table) ---- */

/* Base table: colors + borders */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--s-text-primary);
  --bs-table-border-color: var(--s-border);
  color: var(--s-text-primary);
  border-color: var(--s-border);
}

[data-bs-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--s-text-primary);
  border-bottom-color: var(--s-border);
  box-shadow: none;
}

/* thead */
[data-bs-theme="dark"] .table thead,
[data-bs-theme="dark"] .s-table thead {
  background: var(--s-gray-100);
}

[data-bs-theme="dark"] .table thead th {
  color: var(--s-text-secondary);
  border-bottom-color: var(--s-border);
  border-top-color: var(--s-border);
  background-color: var(--s-gray-100);
}

[data-bs-theme="dark"] .s-table tbody td {
  border-bottom-color: var(--s-border);
}

/* .table-light (used on thead rows) */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td {
  --bs-table-bg: var(--s-gray-100);
  background-color: var(--s-gray-100) !important;
  color: var(--s-text-secondary);
  border-color: var(--s-border);
}

/* .table-hover row hover */
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-color: var(--s-text-primary);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--s-text-primary);
}

/* .table-striped alternating rows */
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: var(--s-text-primary);
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--s-text-primary);
}

/* .table-bordered */
[data-bs-theme="dark"] .table-bordered,
[data-bs-theme="dark"] .table-bordered > :not(caption) > * > * {
  border-color: var(--s-border);
}

/* Contextual row classes */
[data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] .table-danger > th,
[data-bs-theme="dark"] .table-danger > td {
  --bs-table-bg: var(--s-danger-light);
  background-color: var(--s-danger-light) !important;
  color: var(--s-danger);
  border-color: var(--s-border);
}

[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table-warning > th,
[data-bs-theme="dark"] .table-warning > td {
  --bs-table-bg: var(--s-warning-light);
  background-color: var(--s-warning-light) !important;
  color: var(--s-warning);
  border-color: var(--s-border);
}

[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-success > th,
[data-bs-theme="dark"] .table-success > td {
  --bs-table-bg: var(--s-success-light);
  background-color: var(--s-success-light) !important;
  color: var(--s-success);
  border-color: var(--s-border);
}

[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-info > th,
[data-bs-theme="dark"] .table-info > td {
  --bs-table-bg: var(--s-info-light);
  background-color: var(--s-info-light) !important;
  color: var(--s-info);
  border-color: var(--s-border);
}

[data-bs-theme="dark"] .table-secondary,
[data-bs-theme="dark"] .table-secondary > th,
[data-bs-theme="dark"] .table-secondary > td {
  --bs-table-bg: rgba(148, 163, 184, 0.10);
  background-color: rgba(148, 163, 184, 0.10) !important;
  color: var(--s-text-secondary);
  border-color: var(--s-border);
}

/* .table-sm compact spacing — inherit colors */
[data-bs-theme="dark"] .table-sm > :not(caption) > * > * {
  border-bottom-color: var(--s-border);
}

/* table-responsive wrapper */
[data-bs-theme="dark"] .table-responsive {
  border-color: var(--s-border);
}

/* Tabs border */
[data-bs-theme="dark"] .s-tabs {
  border-bottom-color: var(--s-border);
}

/* Form controls */
[data-bs-theme="dark"] .s-date-filter .form-control,
[data-bs-theme="dark"] .s-ptz-options select {
  background-color: var(--s-bg-card);
  color: var(--s-text-primary);
  border-color: var(--s-border);
}

/* D-pad buttons */
[data-bs-theme="dark"] .s-dpad-btn {
  background: var(--s-gray-200);
  border-color: var(--s-gray-300);
  color: var(--s-text-primary);
}

[data-bs-theme="dark"] .s-dpad-center {
  background: var(--s-gray-100);
}

/* Download container */
[data-bs-theme="dark"] .s-download-container {
  background: var(--s-gray-100);
  border-color: var(--s-gray-300);
}

/* Hourly forecast cards */
[data-bs-theme="dark"] .s-hourly-card {
  background: var(--s-gray-100);
}

/* Scrollbars */
[data-bs-theme="dark"] .s-hourly-container {
  scrollbar-color: var(--s-gray-300) transparent;
}

[data-bs-theme="dark"] .s-hourly-container::-webkit-scrollbar-thumb {
  background: var(--s-gray-300);
}

/* Toggle switch slider (keep knob white for contrast) */
[data-bs-theme="dark"] .s-toggle-switch .slider {
  background-color: var(--s-gray-300);
}

/* Bootstrap dropdown overrides */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--s-bg-card);
  border-color: var(--s-border);
}

[data-bs-theme="dark"] .dropdown-item {
  color: var(--s-text-primary);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--s-gray-200);
  color: var(--s-text-primary);
}

/* Account dropdown header */
[data-bs-theme="dark"] .dropdown-header.bg-primary {
  background: linear-gradient(135deg, var(--s-primary-300) 0%, var(--s-primary-500) 100%) !important;
}

/* Theme toggle button */
[data-bs-theme="dark"] #theme-toggle {
  background-color: var(--s-gray-200) !important;
  color: var(--s-text-primary) !important;
  border-color: var(--s-gray-300) !important;
}

/* HTMX progress bar */
[data-bs-theme="dark"] #htmx-progress {
  background: var(--s-primary) !important;
}

/* Bootstrap card override */
[data-bs-theme="dark"] .card {
  background-color: var(--s-bg-card);
  border-color: var(--s-border);
  color: var(--s-text-primary);
}

/* SOW .section override (framework sets #ffffff) */
[data-bs-theme="dark"] body.layout-admin #middle .section:not(.section-clean) {
  background-color: var(--s-bg-card);
  color: var(--s-text-primary);
  box-shadow: var(--s-shadow-soft);
}

/* ---- Disabled form controls (both modes) ---- */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--s-gray-100, #F1F5F9) !important;
  color: var(--s-text-muted, #64748b) !important;
  border-style: dashed !important;
  cursor: not-allowed;
  opacity: 0.75;
}
.form-floating > .form-control:disabled ~ label,
.form-floating > .form-control[readonly] ~ label,
.form-floating > .form-select:disabled ~ label {
  color: var(--s-text-muted, #64748b) !important;
  opacity: 0.75;
}
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-select:disabled {
  background-color: var(--s-gray-200, #334155) !important;
  color: var(--s-text-muted) !important;
  border-color: var(--s-border) !important;
  border-style: dashed !important;
}

/* Global form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--s-bg-card) !important;
  color: var(--s-text-primary) !important;
  border-color: var(--s-border) !important;
}
[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--s-text-muted) !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--s-bg-card) !important;
  color: var(--s-text-primary) !important;
  border-color: var(--s-primary) !important;
  box-shadow: 0 0 0 3px var(--s-focus-ring) !important;
}
[data-bs-theme="dark"] .form-select option {
  background-color: var(--s-bg-card);
  color: var(--s-text-primary);
}

/* Form floating labels */
[data-bs-theme="dark"] .form-floating > .form-control,
[data-bs-theme="dark"] .form-floating > .form-select {
  background-color: var(--s-bg-card);
  color: var(--s-text-primary);
  border-color: var(--s-border);
}

[data-bs-theme="dark"] .form-floating > label {
  color: var(--s-text-muted);
}

/* Modal */
[data-bs-theme="dark"] .modal-content {
  background-color: var(--s-bg-card);
  border-color: var(--s-border);
}

/* Input group */
[data-bs-theme="dark"] .input-group-text {
  background-color: var(--s-gray-200);
  color: var(--s-text-secondary);
  border-color: var(--s-border);
}

/* Portlet (SOW framework) */
[data-bs-theme="dark"] .portlet {
  background-color: var(--s-bg-card);
  color: var(--s-text-primary);
  border-color: var(--s-border);
}

[data-bs-theme="dark"] .portlet-header {
  border-bottom-color: var(--s-border);
  color: var(--s-text-primary);
}

/* bg-white override */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--s-bg-card) !important;
}

/* Nav tabs */
[data-bs-theme="dark"] .nav-tabs {
  border-bottom-color: var(--s-border);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--s-text-secondary);
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--s-gray-300) var(--s-gray-300) var(--s-border);
  color: var(--s-text-primary);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--s-bg-card);
  border-color: var(--s-border) var(--s-border) var(--s-bg-card);
  color: var(--s-text-primary);
}

/* form-floating: Bootstrap hides native placeholder via transparent color;
   restore that so label + placeholder don't overlap */
[data-bs-theme="dark"] .form-floating > .form-control::placeholder {
  color: transparent !important;
}

[data-bs-theme="dark"] .form-label {
  color: var(--s-text-secondary);
}

/* Text color helpers */
[data-bs-theme="dark"] .text-muted {
  color: var(--s-text-muted) !important;
}

[data-bs-theme="dark"] .text-dark {
  color: var(--s-text-primary) !important;
}

/* Border helpers */
[data-bs-theme="dark"] .border {
  border-color: var(--s-border) !important;
}

[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
  border-color: var(--s-border) !important;
}

/* Shadow overrides */
[data-bs-theme="dark"] .shadow,
[data-bs-theme="dark"] .shadow-sm,
[data-bs-theme="dark"] .shadow-xs {
  box-shadow: var(--s-shadow-soft) !important;
}

/* Breadcrumb / page title */
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 {
  color: var(--s-text-primary);
}

/* Bootstrap buttons in dark mode */
[data-bs-theme="dark"] .btn-light {
  background-color: var(--s-gray-200);
  border-color: var(--s-gray-300);
  color: var(--s-text-primary);
}

[data-bs-theme="dark"] .btn-light:hover {
  background-color: var(--s-gray-300);
  border-color: var(--s-gray-400);
  color: var(--s-text-primary);
}

[data-bs-theme="dark"] .btn-outline-secondary {
  color: var(--s-text-secondary);
  border-color: var(--s-border);
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--s-gray-100);
  color: var(--s-text-primary);
  border-color: var(--s-gray-300);
}
[data-bs-theme="dark"] .btn-secondary {
  background-color: var(--s-gray-200) !important;
  border-color: var(--s-gray-300) !important;
  color: var(--s-text-primary) !important;
}
[data-bs-theme="dark"] .btn-secondary:hover {
  background-color: var(--s-gray-300) !important;
}

/* Card subtitle, text */
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .card-text {
  color: var(--s-text-primary);
}

[data-bs-theme="dark"] .card-subtitle {
  color: var(--s-text-muted) !important;
}

/* Hero weather: manter gradient escuro (tokens invertidos nao funcionam aqui) */
[data-bs-theme="dark"] .s-hero-weather {
  background: linear-gradient(135deg, #1c0950 0%, #3d2a8a 50%, #574fec 100%);
}

[data-bs-theme="dark"] .s-hero-icon {
  background: rgba(255, 255, 255, 0.12);
}

/* ---- Alerts (Bootstrap) ---- */
[data-bs-theme="dark"] .alert {
  border-color: var(--s-border);
}
[data-bs-theme="dark"] .alert-danger {
  background-color: var(--s-danger-light);
  color: var(--s-danger);
  border-color: var(--s-danger-dark);
}
[data-bs-theme="dark"] .alert-warning {
  background-color: var(--s-warning-light);
  color: var(--s-warning);
  border-color: var(--s-warning-dark);
}
[data-bs-theme="dark"] .alert-success {
  background-color: var(--s-success-light);
  color: var(--s-success);
  border-color: var(--s-success-dark);
}
[data-bs-theme="dark"] .alert-info {
  background-color: var(--s-info-light);
  color: var(--s-info);
  border-color: var(--s-info-dark);
}
[data-bs-theme="dark"] .alert-secondary {
  background-color: rgba(148, 163, 184, 0.10);
  color: var(--s-text-secondary);
  border-color: var(--s-border);
}
[data-bs-theme="dark"] .alert-light {
  background-color: var(--s-gray-100);
  color: var(--s-text-primary);
  border-color: var(--s-border);
}

/* ---- Breadcrumb ---- */
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--s-text-muted);
}
[data-bs-theme="dark"] .breadcrumb-item.active {
  color: var(--s-text-muted);
}
[data-bs-theme="dark"] .breadcrumb-item a {
  color: var(--s-primary);
}

/* ---- List group ---- */
[data-bs-theme="dark"] .list-group-item {
  background-color: var(--s-bg-card);
  color: var(--s-text-primary);
  border-color: var(--s-border);
}
[data-bs-theme="dark"] .list-group-item.active {
  background-color: var(--s-primary);
  border-color: var(--s-primary);
}

/* ---- Progress bar background ---- */
[data-bs-theme="dark"] .progress {
  background-color: var(--s-gray-300) !important;
  border: none;
}

/* ---- Pagination ---- */
[data-bs-theme="dark"] .page-link {
  background-color: var(--s-bg-card);
  color: var(--s-primary);
  border-color: var(--s-border);
}
[data-bs-theme="dark"] .page-link:hover {
  background-color: var(--s-gray-100);
  color: var(--s-primary-hover);
  border-color: var(--s-border);
}
[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: var(--s-primary);
  border-color: var(--s-primary);
  color: var(--s-text-inverse);
}
[data-bs-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--s-gray-200);
  color: var(--s-text-muted);
  border-color: var(--s-border);
}

/* ---- Accordion ---- */
[data-bs-theme="dark"] .accordion-item {
  background-color: var(--s-bg-card);
  border-color: var(--s-border);
}
[data-bs-theme="dark"] .accordion-button {
  background-color: var(--s-bg-card);
  color: var(--s-text-primary);
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--s-primary-light);
  color: var(--s-primary);
}

/* ---- Badge bg-light needs visible text in dark ---- */
[data-bs-theme="dark"] .badge.bg-light {
  background-color: var(--s-gray-200) !important;
  color: var(--s-text-primary) !important;
}

/* ---- Links (SOW .link-normal) ---- */
[data-bs-theme="dark"] .link-normal {
  color: var(--s-primary) !important;
}
[data-bs-theme="dark"] .link-normal:hover {
  color: var(--s-primary-hover) !important;
}
[data-bs-theme="dark"] a:not([class]),
[data-bs-theme="dark"] a.fw-medium:not(.btn):not(.badge) {
  color: var(--s-primary);
}

/* ---- <hr> ---- */
[data-bs-theme="dark"] hr {
  border-color: var(--s-border);
  opacity: 1;
}

/* ==========================================================================
   AUTH PAGES (login, recover-access, register)
   ========================================================================== */

.s-auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--s-gray-50) 0%, var(--s-gray-200) 100%);
  font-family: var(--s-font);
  padding: var(--s-space-lg);
}

/* Theme toggle: fixed top-right */
.s-auth-theme-toggle {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  z-index: 9999;
  background-color: var(--s-bg-card);
  border: 1px solid var(--s-border);
  border-radius: 50%;
  color: var(--s-text-secondary);
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--s-shadow-soft);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.s-auth-theme-toggle:hover {
  background-color: var(--s-primary-light);
  color: var(--s-primary);
  border-color: var(--s-primary);
}

/* Centered container */
.s-auth-container {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

/* Card */
.s-auth-card {
  background: var(--s-bg-card);
  border-radius: var(--s-radius-xl);
  padding: var(--s-space-xl);
  box-shadow: var(--s-shadow-md);
  border: 1px solid var(--s-border);
}

/* Logo area */
.s-auth-logo {
  text-align: center;
  margin-bottom: var(--s-space-lg);
}
.s-auth-logo img {
  max-height: 80px;
  width: auto;
  object-fit: contain;
}

/* Title + subtitle */
.s-auth-title {
  text-align: center;
  font-size: var(--s-font-size-xl);
  font-weight: 700;
  color: var(--s-text-primary);
  margin-bottom: var(--s-space-xs);
}
.s-auth-subtitle {
  text-align: center;
  font-size: var(--s-font-size-sm);
  color: var(--s-text-secondary);
  margin-bottom: var(--s-space-lg);
}

/* Links row at bottom of form */
.s-auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-space-xs);
  padding-top: var(--s-space-sm);
}
.s-auth-link {
  font-size: var(--s-font-size-sm);
  color: var(--s-primary);
  text-decoration: none;
}
.s-auth-link:hover {
  color: var(--s-primary-hover);
  text-decoration: underline;
}

/* ---- Auth dark mode ---- */
[data-bs-theme="dark"] .s-auth-page {
  background: linear-gradient(135deg, var(--s-gray-50) 0%, #0c1220 100%);
}
[data-bs-theme="dark"] .s-auth-theme-toggle {
  background-color: var(--s-gray-200);
  color: var(--s-text-primary);
  border-color: var(--s-gray-300);
}

/* ---- Auth responsive ---- */
@media (max-width: 576px) {
  .s-auth-page {
    padding: var(--s-space-md);
  }
  .s-auth-card {
    padding: var(--s-space-lg) var(--s-space-md);
  }
}

/* =============================================
   ROI / Áreas de Alertas — manage_rois page
   ============================================= */

/* Tabs */
.s-roi-tabs {
  display: flex;
  border-bottom: 2px solid var(--s-border, #e8eaed);
}
.s-roi-tab {
  flex: 1;
  text-align: center;
  padding: 1rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--s-text-muted, #6b7280);
  transition: background 0.3s, color 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.875rem;
}
.s-roi-tab i {
  font-size: 1.25rem;
  margin-bottom: 4px;
}
.s-roi-tab.active {
  color: var(--s-primary, #574fec);
  border-bottom: 3px solid var(--s-primary, #574fec);
  background-color: var(--s-primary-light, rgba(87,79,236,0.08));
}
.s-roi-tab:hover {
  background-color: var(--s-gray-50, #f8fafc);
}
@media (max-width: 500px) {
  .s-roi-tabs { flex-direction: column; }
  .s-roi-tab { border-bottom: 1px solid var(--s-border, #e8eaed); }
  .s-roi-tab.active { border-bottom: 3px solid var(--s-primary, #574fec); }
}

/* Tab content */
.s-roi-tab-content {
  padding: 1.5rem;
  display: none;
  animation: s-roi-fadeIn 0.3s ease-in-out;
  color: var(--s-text-primary);
}
.s-roi-tab-content.active { display: block; }
@keyframes s-roi-fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Canvas */
.s-roi-container { display: flex; justify-content: center; }
.s-roi-canvas {
  border: 2px dashed var(--s-border, #aaa);
  background-color: var(--s-bg-card, #fff);
  margin-bottom: 1.5rem;
  max-width: 100%;
}
#roiCanvas { border: 1px solid var(--s-border, #ccc); }

/* Action buttons */
.s-roi-btn-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.s-roi-btn-group button {
  font-size: 1rem;
  padding: 12px 20px;
  border-radius: var(--s-radius-md, 8px);
  border: none;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}
.s-roi-btn-finalizar { background-color: var(--s-success, #28a745); }
.s-roi-btn-finalizar:hover { background-color: #218838; }
.s-roi-btn-reset { background-color: var(--s-danger, #dc3545); }
.s-roi-btn-reset:hover { background-color: #c82333; }
.s-roi-btn-enviar { background-color: var(--s-primary, #574fec); }
.s-roi-btn-enviar:disabled { background-color: var(--s-text-muted, #6c757d); cursor: not-allowed; }
.s-roi-btn-enviar:hover:enabled { background-color: var(--s-primary-700, #3D2A8A); }

/* Existing ROI card */
.s-roi-existing {
  border: 1px solid var(--s-border, #e2e8f0);
  background-color: var(--s-bg-card, #f9fafb);
  border-radius: var(--s-radius-lg, 12px);
  padding: 1.5rem;
  box-shadow: var(--s-shadow-sm, 0 2px 6px rgba(0,0,0,0.03));
  text-align: center;
  max-width: 100%;
  margin-bottom: 1.25rem;
}
.s-roi-existing-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--s-text-primary, #374151);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-roi-canvas-container {
  width: 100%;
  text-align: center;
  padding: 10px;
  background: var(--s-bg-card, #fff);
  border-radius: var(--s-radius-md, 8px);
  margin-bottom: 15px;
}
.s-roi-canvas-container canvas {
  max-width: 100%;
  height: auto;
  display: inline-block;
  box-shadow: var(--s-shadow-sm, 0 2px 8px rgba(0,0,0,0.1));
}

/* Filter card */
.s-roi-filter {
  border: 1px solid var(--s-border, #e0e0e0);
  border-radius: var(--s-radius-lg, 12px);
  padding: 1.5rem;
  background-color: var(--s-bg-card, #fff);
  box-shadow: var(--s-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
  margin: auto;
  width: 100%;
  color: var(--s-text-primary);
}
.s-roi-filter label {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  display: block;
  color: var(--s-text-primary);
}
.s-roi-filter input[type="date"],
.s-roi-filter .form-control {
  border-radius: var(--s-radius-md, 8px);
  padding: 0.5rem;
  border: 1px solid var(--s-border, #ccc);
  width: 100%;
  background-color: var(--s-bg-card, #fff);
  color: var(--s-text-primary);
}
.s-roi-filter button {
  margin-top: 1rem;
  width: 100%;
  border-radius: var(--s-radius-md, 8px);
  padding: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
}
.s-roi-filter button i { margin-right: 0.5rem; font-size: 1rem; }

/* PDF button */
.s-roi-btn-pdf {
  background-color: #D32F2F;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M17.3359 2.33398H8.44677C8.15216 2.33398 7.86961 2.45102 7.66129 2.65934C7.45297 2.86766 7.33594 3.15021 7.33594 3.44482V8.16732L17.3359 14.0007L22.3359 16.1107L27.3359 14.0007V8.16732L17.3359 2.33398Z' fill='%23D32F2F'/%3E%3Cpath d='M7.33594 8.16699H17.3359V14.0003H7.33594V8.16699Z' fill='%23B71C1C'/%3E%3Cpath d='M26.2251 2.33398H17.3359V8.16732H27.3359V3.44482C27.3359 3.15021 27.2189 2.86766 27.0106 2.65934C26.8023 2.45102 26.5197 2.33398 26.2251 2.33398Z' fill='%23E53935'/%3E%3Cpath d='M17.3359 14H7.33594V24.5558C7.33594 24.8504 7.45297 25.133 7.66129 25.3413C7.86961 25.5496 8.15216 25.6667 8.44677 25.6667H26.2251C26.5197 25.6667 26.8023 25.5496 27.0106 25.3413C27.2189 25.133 27.3359 24.8504 27.3359 24.5558V19.8333L17.3359 14Z' fill='%231B0000'/%3E%3Cpath d='M17.3359 14H27.3359V19.8333H17.3359V14Z' fill='%23B71C1C'/%3E%3Cpath d='M3.61328 18.1673L6.30995 13.989L3.83995 9.83398H5.82745L7.17578 12.4898C7.29967 12.7415 7.38495 12.9293 7.43161 13.0532H7.44911C7.538 12.852 7.63106 12.6565 7.72828 12.4665L9.16912 9.83398H10.9933L8.45995 13.9657L11.0574 18.1673H9.11578L7.55828 15.2507C7.4849 15.1264 7.42272 14.9959 7.37245 14.8607H7.34911C7.30366 14.9929 7.24327 15.1196 7.16912 15.2382L5.56661 18.1673H3.61328Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 15px center;
  border-radius: var(--s-radius-md, 8px);
  border: 1px solid var(--s-border, #CCCFD1);
  color: #fff;
  font-weight: 500;
  line-height: 124%;
  text-decoration: none;
  display: inline-flex;
  padding: 16px 32px 12px 52px;
  font-size: 1rem;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all .3s;
}
.s-roi-btn-pdf:hover { border-color: #D32F2F; background-color: #B71C1C; }

/* ROI result images */
.s-roi-date {
  font-size: 1.15rem;
  color: var(--s-text-muted, #666);
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: block;
}
.s-roi-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.s-roi-action-btn {
  border: 1px solid var(--s-border, #ddd);
  background-color: var(--s-gray-50, #f9f9f9);
  border-radius: var(--s-radius-sm, 6px);
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  color: var(--s-text-secondary, #333);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.s-roi-action-btn:hover {
  background-color: var(--s-gray-100, #f1f1f1);
  border-color: var(--s-gray-300, #ccc);
}
.s-roi-action-btn--download { color: var(--s-primary, #2d7efc); }
.s-roi-action-btn--delete { color: var(--s-danger, #d33c3c); }
.s-roi-action-btn i { font-size: 1rem; }

/* Chart responsiveness */
.s-roi-chart {
  position: relative;
  width: 100%;
  height: 400px;
}
@media (max-width: 767px) { .s-roi-chart { height: 350px; } }
@media (min-width: 768px) { .s-roi-chart { height: 320px; } }
.s-roi-chart canvas { width: 100% !important; height: 100% !important; }

/* WhatsApp buttons */
.s-roi-btn-whatsapp {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #25D366;
  color: #fff;
  border: none;
  border-radius: var(--s-radius-md, 8px);
  padding: 8px 14px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: 0.2s;
}
.s-roi-btn-whatsapp:hover { background-color: #1ebe57; }
.s-roi-btn-whatsapp i { font-size: 1.2rem; }

/* Delete ROI */
.s-roi-btn-delete {
  display: inline-block;
  background-color: var(--s-danger, #ff4d4f);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--s-radius-md, 8px);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: var(--s-shadow-sm, 0 2px 6px rgba(0,0,0,0.1));
  transition: background-color 0.3s, transform 0.2s;
}
.s-roi-btn-delete:hover { background-color: #d9363e; transform: translateY(-1px); }
.s-roi-btn-delete:active { background-color: #b02a2f; transform: translateY(0); }

/* ROI image card */
.s-roi-img {
  border-radius: var(--s-radius-md, 8px);
  margin-bottom: 0.75rem;
  max-height: 300px;
  object-fit: cover;
  width: 100%;
  box-shadow: var(--s-shadow-sm, 0 2px 6px rgba(0,0,0,0.05));
}

/* Count badge */
.s-roi-count {
  background-color: var(--s-gray-50, #f8fafc);
  border: 1px solid var(--s-border, #e0e0e0);
  border-radius: var(--s-radius-md, 8px);
}