/* Faixa da engrenagem (antes dos botões de berço) + modal de alertas */



.berco-settings-bar {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  width: 100%;

}



.berco-settings-global-btn {

  width: 38px;

  height: 38px;

  border-radius: 10px;

  border: 1px solid rgba(0, 0, 0, 0.12);

  background: #f1f3f5;

  color: #495057;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  padding: 0;

  flex-shrink: 0;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;

}



.berco-settings-global-btn svg {

  width: 20px;

  height: 20px;

  display: block;

}



.berco-settings-global-btn:hover {

  background: #e9ecef;

  color: #212529;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

}



.berco-settings-global-btn:active {

  transform: scale(0.94);

}



.berco-settings-global-btn.has-disabled {

  box-shadow: 0 0 0 2px rgba(255, 149, 0, 0.55);

}



.app-container.guincho-violation .berco-settings-global-btn {

  pointer-events: auto;

}



/* Legado: engrenagens antigas nos botões de berço (removidas via JS) */

.berco-btn-right {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  flex-shrink: 0;

  align-self: stretch;

}



.berco-settings-btn {

  width: 34px;

  height: 34px;

  border-radius: 9px;

  border: 1px solid rgba(0, 0, 0, 0.14);

  background: rgba(0, 0, 0, 0.06);

  color: #495057;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  padding: 0;

  flex-shrink: 0;

  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;

}



.berco-settings-btn svg {

  width: 18px;

  height: 18px;

  fill: currentColor;

}



.berco-settings-btn:hover {

  background: rgba(0, 0, 0, 0.1);

  color: #212529;

}



.berco-settings-btn:active {

  transform: scale(0.94);

}



.berco-btn.active .berco-settings-btn {

  background: rgba(255, 255, 255, 0.14);

  border-color: rgba(255, 255, 255, 0.28);

  color: #ffffff;

}



.berco-btn.active .berco-settings-btn:hover {

  background: rgba(255, 255, 255, 0.22);

}



.berco-settings-btn.has-disabled {

  box-shadow: 0 0 0 2px rgba(255, 149, 0, 0.55);

}



.app-container.guincho-violation .berco-settings-btn {

  pointer-events: auto;

}



/* Modal */

.berco-settings-overlay {

  position: fixed;

  inset: 0;

  z-index: 10000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 16px;

  background: rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(3px);

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.22s ease, visibility 0.22s ease;

}



.berco-settings-overlay.is-open {

  opacity: 1;

  visibility: visible;

}



.berco-settings-modal {

  width: min(100%, 744px);

  background: #ffffff;

  border-radius: 0;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);

  overflow: hidden;

  transform: translateY(8px);

  transition: transform 0.22s ease;

}



.berco-settings-overlay.is-open .berco-settings-modal {

  transform: translateY(0);

}



.berco-settings-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 12px;

  padding: 20px 20px 12px;

}



.berco-settings-title {

  font-size: clamp(22px, 3.2vw, 28px);

  font-weight: 800;

  color: #111111;

  letter-spacing: -0.02em;

  border-bottom: 2px solid #2563eb;

  display: inline-block;

  padding-bottom: 4px;

  line-height: 1.1;

}



.berco-settings-subtitle {

  display: block;

  font-size: clamp(11px, 1.5vw, 13px);

  font-weight: 600;

  color: #8b929a;

  margin-top: 8px;

  text-transform: uppercase;

  letter-spacing: 0.06em;

}



.berco-settings-close {

  width: 36px;

  height: 36px;

  border: none;

  border-radius: 8px;

  background: transparent;

  color: #868e96;

  font-size: 24px;

  line-height: 1;

  cursor: pointer;

  flex-shrink: 0;

}



.berco-settings-close:hover {

  background: #f1f3f5;

  color: #495057;

}



/* Abas de berço */

.berco-settings-berco-tabs {

  display: flex;

  gap: 10px;

  padding: 8px 20px 0;

}



.berco-settings-berco-tab {

  flex: 1;

  padding: 14px 12px;

  border: 1px solid #d8dde3;

  border-radius: 12px;

  background: #ffffff;

  color: #111111;

  font-family: inherit;

  font-size: clamp(14px, 2vw, 17px);

  font-weight: 800;

  letter-spacing: 0.04em;

  cursor: pointer;

  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;

}



.berco-settings-berco-tab:hover {

  background: #f8f9fa;

}



.berco-settings-berco-tab.is-active {

  background: #0f2d2a;

  border-color: #0f2d2a;

  color: #ffffff;

}



/* Tabs CAM */

.berco-settings-tabs {

  display: flex;

  gap: 24px;

  padding: 18px 20px 0;

  border-bottom: 1px solid #d8dde3;

}



.berco-settings-tab {

  padding: 0 0 12px;

  margin-bottom: -1px;

  border: none;

  background: none;

  color: #8b929a;

  font-family: inherit;

  font-size: clamp(13px, 1.8vw, 15px);

  font-weight: 800;

  letter-spacing: 0.08em;

  cursor: pointer;

  border-bottom: 3px solid transparent;

  transition: color 0.15s ease, border-color 0.15s ease;

}



.berco-settings-tab:hover {

  color: #495057;

}



.berco-settings-tab.is-active {

  color: #111111;

  border-bottom-color: #111111;

}



.berco-settings-body {

  padding: 0 20px 24px;

  display: flex;

  flex-direction: column;

}



/* Linhas de detecção */

.berco-settings-detection-row {

  display: grid;

  grid-template-columns: auto auto 1fr;

  align-items: center;

  gap: clamp(10px, 1.6vw, 14px);

  padding: clamp(16px, 2.5vh, 22px) 0;

  border-bottom: 1px solid #e3e7eb;

  --detection-icon-size: clamp(88px, 11vh, 96px);

}



.berco-settings-detection-row:last-child {

  border-bottom: none;

}



.berco-settings-detection-check {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 28px;

  height: 28px;

  flex-shrink: 0;

  cursor: pointer;

}



.berco-settings-detection-check input {

  position: absolute;

  opacity: 0;

  width: 0;

  height: 0;

}



.berco-settings-detection-check-box {

  width: 28px;

  height: 28px;

  border-radius: 6px;

  border: 2px solid #c5ccd3;

  background: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.15s ease, border-color 0.15s ease;

}



.berco-settings-detection-check-box::after {

  content: '';

  width: 7px;

  height: 12px;

  border: solid #ffffff;

  border-width: 0 3px 3px 0;

  transform: rotate(45deg) scale(0);

  margin-top: -2px;

  transition: transform 0.12s ease;

}



.berco-settings-detection-check input:checked + .berco-settings-detection-check-box {

  background: #2563eb;

  border-color: #2563eb;

}



.berco-settings-detection-check input:checked + .berco-settings-detection-check-box::after {

  transform: rotate(45deg) scale(1);

}



.berco-settings-detection-icon {

  width: var(--detection-icon-size);

  height: var(--detection-icon-size);

  min-width: var(--detection-icon-size);

  min-height: var(--detection-icon-size);

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}



.berco-settings-detection-icon img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: contain;

}



.berco-settings-detection-row.is-disabled .berco-settings-detection-icon {

  opacity: 0.45;

}



.berco-settings-alert-group {

  display: flex;

  align-items: stretch;

  justify-content: flex-end;

  gap: clamp(8px, 1.4vw, 12px);

  flex-shrink: 0;

}



.berco-settings-alert-unit {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: space-between;

  gap: 8px;

  width: clamp(72px, 10vw, 84px);

  min-width: clamp(72px, 10vw, 84px);

  height: clamp(88px, 11vh, 96px);

  padding: 10px;

  border-radius: 12px;

  background: #f1f3f5;

  box-sizing: border-box;

  transition: opacity 0.15s ease;

}



.berco-settings-detection-row.is-disabled .berco-settings-alert-unit {

  opacity: 0.45;

  pointer-events: none;

}



.berco-settings-alert-icon {

  width: 100%;

  height: 40px;

  max-height: 40px;

  object-fit: contain;

  object-position: left center;

  display: block;

  flex-shrink: 0;

  transition: opacity 0.15s ease;

}



.berco-settings-detection-row.is-disabled .berco-settings-alert-icon {

  opacity: 0.45;

}



.berco-settings-pill-switch {

  position: relative;

  width: 44px;

  height: 22px;

  flex-shrink: 0;

}



.berco-settings-pill-switch input {

  opacity: 0;

  width: 0;

  height: 0;

  position: absolute;

}



.berco-settings-pill-track {

  position: absolute;

  inset: 0;

  border-radius: 11px;

  background: #c5ccd3;

  cursor: pointer;

  transition: background 0.2s ease;

}



.berco-settings-pill-track::after {

  content: '';

  position: absolute;

  top: 2px;

  left: 2px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: #ffffff;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);

  transition: transform 0.2s ease;

}



.berco-settings-pill-switch input:checked + .berco-settings-pill-track {

  background: #00ff1e;

}



.berco-settings-pill-switch input:checked + .berco-settings-pill-track::after {

  transform: translateX(22px);

}



.berco-settings-pill-switch input:focus-visible + .berco-settings-pill-track {

  outline: 2px solid #2563eb;

  outline-offset: 2px;

}



.app-container.camera-visual-disabled .main-content {

  filter: grayscale(0.35) brightness(0.85);

}



.app-container.camera-visual-disabled .slider-thumb.is-dragging,

.app-container.camera-visual-disabled .slider-thumb.counting,

.app-container.camera-visual-disabled .dual-track .slider-thumb.is-dragging,

.app-container.camera-visual-disabled .dual-track .slider-thumb.counting {

  animation: none !important;

}



@media (max-width: 560px) {

  .berco-settings-detection-row {

    grid-template-columns: auto auto 1fr;

    gap: 10px;

  }



  .berco-settings-alert-group {

    justify-content: flex-end;

    flex-wrap: wrap;

  }

}