/* From alerta-metta index.html — variáveis em .tablet-root */
.tablet-root {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  font-family: "Montserrat", sans-serif;
  background: #fff;
  box-sizing: border-box;
}

.tablet-root *,
.tablet-root *::before,
.tablet-root *::after {
  box-sizing: border-box;
  touch-action: pan-y;
}


    .tablet-root {
      --green-bg: #14eb2e;
      --green-pill: #0e4c35;
      --green-thumb: #093826;
      --green-text: #ffffff;

      --amber-pill: #807000;
      --amber-thumb: #4d4600;

      --red-bg: #ff0808;
      --red-pill: #d10000;
      --red-thumb: #960000;
      --red-text: #ffffff;

      --transition-speed: 0.4s;
    }


    

    .app-container {
      width: 100%;
      height: 100%;
      max-width: 744px;
      position: relative;
      background-color: #ffffff;
      /* Fundo branco no estado verde */
      transition: background-color var(--transition-speed) ease;
      display: flex;
      flex-direction: column;
      padding: 15px;
      /* Espaçamento das bordas */
      gap: 15px;
      /* Espaço entre o card superior e a área inferior */
    }

    /* Amber state — top is red, slider is orange */
    .app-container.state-amber {
      background-color: #000000;
    }

    .app-container.state-amber .main-content {
      background-color: var(--red-bg);
    }

    .app-container.state-amber .icon-green {
      opacity: 0;
      transform: scale(0.8);
    }

    .app-container.state-amber .icon-red {
      opacity: 1;
      transform: scale(1);
    }

    .app-container.state-amber .slider-track {
      background-color: var(--amber-pill);
    }

    .app-container.state-amber .slider-thumb {
      background-color: var(--amber-thumb);
    }

    .app-container.state-amber .slider-thumb svg {
      fill: #ffeb3b;
    }

    .app-container.state-amber .thumb-countdown {
      color: #ffeb3b;
    }

    /* Red State Overrides */
    .app-container.state-red {
      background-color: #000000;
    }

    /* Card principal (quadrado colorido) */
    .main-content {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
      background-color: var(--green-bg);
      border-radius: 8px;
      /* Bordas levemente arredondadas para um visual moderno */
      transition: background-color var(--transition-speed) ease;
    }

    .app-container.state-red .main-content {
      background-color: var(--red-bg);
    }

    /* Aproxime alerta ativo: só o fundo fica vermelho — mantém tela OK / operação aproxime */
    .app-container.aproxime-alert-screen .main-content {
      background-color: var(--red-bg) !important;
    }

    /* Preview aproxime: mostra ícone do afaste (pessoa) no centro — indica que vai mudar */
    .app-container.aproxime-alert-screen .icon-green {
      opacity: 0;
      transform: scale(0.8);
    }

    .app-container.aproxime-alert-screen .icon-red {
      opacity: 1;
      transform: scale(1);
    }

    /* Aproxime preview: só o slider aproxime fica vermelho (não mexe no afaste) */
    .app-container.aproxime-alert-screen #slider-panel-single .slider-track,
    .app-container.aproxime-alert-screen .dual-track.track-aproxime {
      background-color: var(--red-pill) !important;
    }

    .app-container.aproxime-alert-screen #slider-panel-single .slider-thumb,
    .app-container.aproxime-alert-screen .dual-track.track-aproxime .slider-thumb {
      background-color: var(--red-thumb) !important;
    }

    .app-container.aproxime-alert-screen #slider-panel-single .slider-thumb svg,
    .app-container.aproxime-alert-screen .dual-track.track-aproxime .slider-thumb svg {
      fill: #ff0808 !important;
    }

    .app-container.aproxime-alert-screen #slider-panel-single .slider-thumb.is-dragging,
    .app-container.aproxime-alert-screen .dual-track.track-aproxime .slider-thumb.is-dragging {
      animation: shake-thumb 0.25s linear infinite, blink-color-red 0.4s ease-in-out infinite !important;
    }

    .app-container.aproxime-alert-screen #slider-panel-single .slider-thumb.counting,
    .app-container.aproxime-alert-screen .dual-track.track-aproxime .slider-thumb.counting {
      animation: countdown-ring 1s ease-out infinite, blink-color-red 0.5s ease-in-out infinite !important;
    }

    /* Afaste: operadores saíram do berço → fundo verde + OK (guincho pode mover) */
    .app-container.afaste-alert-screen .main-content {
      background-color: var(--green-bg) !important;
    }

    .app-container.afaste-alert-screen .icon-red,
    .app-container.state-red.afaste-alert-screen .icon-red,
    .app-container.state-amber.afaste-alert-screen .icon-red {
      opacity: 0 !important;
      transform: scale(0.8);
    }

    .app-container.afaste-alert-screen .icon-green,
    .app-container.state-red.afaste-alert-screen .icon-green,
    .app-container.state-amber.afaste-alert-screen .icon-green {
      opacity: 1 !important;
      transform: scale(1);
    }

    /* Afaste alerta ativo: botão/slider vermelho → tons de verde (!important vence state-red) */
    .app-container.afaste-alert-screen .slider-track,
    .app-container.state-red.afaste-alert-screen .slider-track,
    .app-container.state-amber.afaste-alert-screen .slider-track {
      background-color: var(--green-pill) !important;
    }

    .app-container.afaste-alert-screen .slider-thumb,
    .app-container.state-red.afaste-alert-screen .slider-thumb,
    .app-container.state-amber.afaste-alert-screen .slider-thumb {
      background-color: var(--green-thumb) !important;
    }

    .app-container.afaste-alert-screen .slider-thumb svg,
    .app-container.state-red.afaste-alert-screen .slider-thumb svg,
    .app-container.state-amber.afaste-alert-screen .slider-thumb svg {
      fill: #14eb2e !important;
    }

    .app-container.afaste-alert-screen .slider-thumb.is-dragging,
    .app-container.state-red.afaste-alert-screen .slider-thumb.is-dragging,
    .app-container.state-amber.afaste-alert-screen .slider-thumb.is-dragging {
      animation: shake-thumb 0.25s linear infinite, blink-color 0.4s ease-in-out infinite !important;
    }

    .app-container.afaste-alert-screen .slider-thumb.counting,
    .app-container.state-red.afaste-alert-screen .slider-thumb.counting,
    .app-container.state-amber.afaste-alert-screen .slider-thumb.counting {
      animation: countdown-ring 1s ease-out infinite, blink-color 0.5s ease-in-out infinite !important;
    }

    /* Top Area Buttons */
    .top-area {
      display: flex;
      gap: 10px;
      width: 100%;
    }

    .berco-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 10px;
      border-radius: 12px;
      background: linear-gradient(to bottom, #ffffff, #f1f3f5);
      border: 1px solid #ced4da;
      border-bottom: 5px solid #adb5bd;
      color: #495057;
      cursor: pointer;
      transition: all 0.1s ease;
      user-select: none;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      font-family: inherit;
      font-weight: 700;
      position: relative;
      top: 0;
      height: 120px;
    }

    .berco-btn:hover {
      background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
      border-color: #adb5bd;
      border-bottom-color: #8e959c;
      color: #212529;
    }

    .berco-btn:active {
      transform: translateY(2px);
      border-bottom-width: 3px;
    }

    .berco-btn.active {
      background: linear-gradient(to bottom, #2d3748, #1a202c);
      border-color: #4a5568;
      border-bottom: 3px solid #0f172a;
      color: #ffffff;
      box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.35), 0 2px 3px rgba(0, 0, 0, 0.2);
      transform: translateY(4px);
      font-weight: 800;
      height: 120px;
    }

    .berco-btn.active:hover {
      transform: translateY(4px);
      background: linear-gradient(to bottom, #2d3748, #1a202c);
      color: #ffffff;
      box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.35), 0 2px 3px rgba(0, 0, 0, 0.2);
    }

    .berco-title {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    /* Pill counter widget */
    .berco-counters {
      position: absolute;
      bottom: 18px;
      left: 15px;
      right: 15px;
      display: flex;
      justify-content: space-between;
      z-index: 5;
    }

    .berco-counter-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .berco-counter-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.5px;
      color: rgba(0, 55, 12, 0.85);
    }

    .app-container.state-red .berco-counter-label,
    .app-container.state-amber .berco-counter-label {
      color: rgba(255, 255, 255, 0.85);
    }

    .berco-pill-track {
      display: flex;
      gap: 3px;
      background: rgba(0, 50, 10, 0.18);
      border: 2px dashed rgba(0, 70, 15, 0.45);
      border-radius: 9px;
      padding: 4px 5px;
    }

    .app-container.state-red .berco-pill-track,
    .app-container.state-amber .berco-pill-track {
      background: rgba(0, 0, 0, 0.25);
      border-color: rgba(255, 255, 255, 0.35);
    }

    .berco-seg {
      width: 15px;
      height: 26px;
      border-radius: 4px;
      background: transparent;
      border: 1.5px solid rgba(0, 70, 15, 0.28);
    }

    .app-container.state-red .berco-seg,
    .app-container.state-amber .berco-seg {
      border-color: rgba(255, 255, 255, 0.2);
    }

    .berco-seg.filled {
      background: #ff0808;
      border-color: #cc0000;
      box-shadow: 0 0 5px rgba(255, 8, 8, 0.7);
    }

    .berco-limit-line {
      width: 0;
      height: 26px;
      flex-shrink: 0;
      border-left: 2px dashed rgba(0, 70, 15, 0.7);
      margin: 0 2px;
    }

    .app-container.state-red .berco-limit-line,
    .app-container.state-amber .berco-limit-line {
      border-color: rgba(255, 255, 255, 0.6);
    }

    .berco-seg.filled.blinking {
      animation: blink-pill 1s infinite ease-in-out;
    }

    @keyframes blink-pill {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.15;
      }
    }

    .app-container.state-amber .top-area,
    .app-container.state-red .top-area {
      /* Pode esconder ou não na tela preta. O usuário pediu "aqui em cima na parte branca", mantemos visível. */
    }

    /* Icon Containers */
    .icon-container {
      position: absolute;
      transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .icon-green {
      width: 260px;
      height: 260px;
      /* background-color: white; */
      border-radius: 50%;
      opacity: 1;
      transform: scale(1);
    }

    .icon-green img {
      width: 65%;
      height: auto;
    }

    .icon-red {
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transform: scale(0.8);
      flex-direction: column;
    }

    .afaste-operador {
      position: absolute;
      top: clamp(8px, 2vw, 16px);
      right: clamp(8px, 2vw, 16px);
      width: clamp(40px, 10vw, 62px);
      height: auto;
      z-index: 6;
    }

    .afaste-stop-badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: min(58vw, 220px);
      height: min(58vw, 220px);
      background: #ffffff;
      border-radius: 50%;
      padding: 14px 12px 16px;
      box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12);
      gap: 0;
    }

    .afaste-guinco-stop {
      width: 48%;
      height: auto;
      flex: 0 0 auto;
    }

    .afaste-stop-label {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(28px, 7.5vw, 42px);
      font-weight: 800;
      color: #e80707;
      letter-spacing: 0.04em;
      line-height: 1;
    }

    /* Ocultar ícones no estado oposto */
    .app-container.state-red .icon-green {
      opacity: 0;
      transform: scale(0.8);
    }

    .app-container.state-red .icon-red {
      opacity: 1;
      transform: scale(1);
    }

    /* Bottom Slider Area */
    .bottom-area {
      padding: 10px 0;
      padding-bottom: 20px;
      background: transparent;
    }

    .slider-track {
      width: 100%;
      height: 80px;
      border-radius: 40px;
      background-color: var(--green-pill);
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
      transition: background-color var(--transition-speed) ease;
      box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.4);
    }

    .app-container.state-red .slider-track {
      background-color: var(--red-pill);
    }

    /* Track Disabled State (Gray tones) */
    .slider-track.disabled {
      background-color: #222 !important;
      pointer-events: none;
      box-shadow: none;
    }

    .slider-track.disabled .slider-thumb {
      background-color: #333 !important;
      box-shadow: none;
      animation: none !important;
    }

    .slider-track.disabled .slider-thumb svg {
      fill: #555 !important;
    }

    .slider-track.disabled .slider-text {
      color: #555 !important;
    }

    .slider-track.disabled .slider-arrow svg {
      stroke: #555 !important;
    }

    .slider-track.disabled .thumb-countdown {
      color: #555 !important;
    }

    .slider-text {
      position: absolute;
      width: 100%;
      text-align: end;
      padding-right: 23px;
      color: white;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 1px;
      pointer-events: none;
      z-index: 1;
      transition: opacity 0.2s ease;
    }

    /* Thumb / Button */
    .slider-thumb {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: var(--green-thumb);
      position: absolute;
      left: 5px;
      top: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
      cursor: grab;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
      transition: background-color var(--transition-speed) ease;
      /* Pulse animation */
      animation: pulse-thumb 2s infinite;

      /* Previne comportamento nativo que atrapalha o arrasto */
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
    }

    .slider-thumb * {
      pointer-events: none;
    }

    .app-container.state-red .slider-thumb {
      background-color: var(--red-thumb);
    }

    .slider-thumb:active {
      cursor: grabbing;
    }

    .slider-thumb svg {
      width: 34px;
      height: 34px;
      fill: #14eb2e;
      transition: fill var(--transition-speed) ease;
    }

    .app-container.state-red .slider-thumb svg {
      fill: #ff0808;
    }

    /* Arrow */
    .slider-arrow {
      position: absolute;
      left: 90px;
      z-index: 1;
      display: flex;
      align-items: center;
      animation: pulse-arrow 2s infinite;
    }

    .slider-arrow svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: rgba(255, 255, 255, 0.4);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Animations */
    @keyframes pulse-thumb {
      0% {
        transform: scale(1) translateX(0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
      }

      50% {
        transform: scale(1.05) translateX(0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
      }

      100% {
        transform: scale(1) translateX(0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
      }
    }

    @keyframes pulse-arrow {
      0% {
        opacity: 0.3;
        transform: translateX(0);
      }

      50% {
        opacity: 1;
        transform: translateX(5px);
      }

      100% {
        opacity: 0.3;
        transform: translateX(0);
      }
    }

    /* Shake + blink animation while dragging */
    @keyframes shake-thumb {
      0% {
        transform: translateX(var(--tx, 0px)) rotate(0deg);
      }

      20% {
        transform: translateX(calc(var(--tx, 0px) - 4px)) rotate(-4deg);
      }

      40% {
        transform: translateX(calc(var(--tx, 0px) + 4px)) rotate(4deg);
      }

      60% {
        transform: translateX(calc(var(--tx, 0px) - 3px)) rotate(-3deg);
      }

      80% {
        transform: translateX(calc(var(--tx, 0px) + 3px)) rotate(3deg);
      }

      100% {
        transform: translateX(var(--tx, 0px)) rotate(0deg);
      }
    }

    @keyframes blink-color {
      0% {
        background-color: var(--green-thumb);
        box-shadow: 0 0 0 0 rgba(20, 235, 46, 0.7);
      }

      50% {
        background-color: #14eb2e;
        box-shadow: 0 0 18px 8px rgba(20, 235, 46, 0.5);
      }

      100% {
        background-color: var(--green-thumb);
        box-shadow: 0 0 0 0 rgba(20, 235, 46, 0.7);
      }
    }

    @keyframes blink-color-amber {
      0% {
        background-color: var(--amber-thumb);
        box-shadow: 0 0 0 0 rgba(255, 235, 59, 0.7);
      }

      50% {
        background-color: #ffeb3b;
        box-shadow: 0 0 18px 8px rgba(255, 235, 59, 0.5);
      }

      100% {
        background-color: var(--amber-thumb);
        box-shadow: 0 0 0 0 rgba(255, 235, 59, 0.7);
      }
    }

    @keyframes blink-color-red {
      0% {
        background-color: var(--red-thumb);
        box-shadow: 0 0 0 0 rgba(255, 8, 8, 0.7);
      }

      50% {
        background-color: #ff0808;
        box-shadow: 0 0 18px 8px rgba(255, 8, 8, 0.5);
      }

      100% {
        background-color: var(--red-thumb);
        box-shadow: 0 0 0 0 rgba(255, 8, 8, 0.7);
      }
    }

    /* Applied while user is actively dragging */
    .slider-thumb.is-dragging {
      animation: shake-thumb 0.25s linear infinite, blink-color 0.4s ease-in-out infinite !important;
    }

    .app-container.state-amber .slider-thumb.is-dragging {
      animation: shake-thumb 0.25s linear infinite, blink-color-amber 0.4s ease-in-out infinite !important;
    }

    .app-container.state-red .slider-thumb.is-dragging {
      animation: shake-thumb 0.25s linear infinite, blink-color-red 0.4s ease-in-out infinite !important;
    }

    /* Hide text when dragging far enough */
    .slider-track.dragging .slider-text,
    .slider-track.dragging .slider-arrow {
      opacity: 0.2;
    }

    /* Desabilita animação de pulsar quando está sendo arrastado */
    .slider-track.dragging .slider-thumb {
      animation: none;
    }

    /* Countdown display in track */
    .thumb-countdown {
      font-family: 'Montserrat', sans-serif;
      font-size: 32px;
      font-weight: 700;
      color: #fff;
      line-height: 1;
      animation: none;
      position: absolute;
      right: 90px;
      z-index: 1;
    }

    .app-container.state-red .thumb-countdown {
      color: #fff;
    }

    /* Countdown ring animation */
    @keyframes countdown-ring {
      0% {
        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.8);
      }

      50% {
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
      }

      100% {
        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0);
      }
    }

    .slider-thumb.counting {
      animation: countdown-ring 1s ease-out infinite, blink-color 0.5s ease-in-out infinite !important;
      cursor: default;
    }

    .app-container.state-red .slider-thumb.counting {
      animation: countdown-ring 1s ease-out infinite, blink-color-red 0.5s ease-in-out infinite !important;
    }

    /* Cancel button (X) shown during countdown */
    .cancel-btn {
      background: transparent;
      color: #d1d1d1;
      border: none;
      font-size: 40px;
      font-weight: 400;
      line-height: 1;
      display: none;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 10;
      pointer-events: all;
    }

    .app-container.state-red .cancel-btn {
      color: #d1d1d1;
    }

    .cancel-btn.visible {
      display: flex;
    }

    /* Next screen overlay */
    .next-screen {
      position: absolute;
      inset: 0;
      background: #000;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.6s ease;
      gap: 20px;
    }

    .next-screen.visible {
      opacity: 1;
      pointer-events: all;
    }

    .next-screen h1 {
      color: #fff;
      font-size: 32px;
      font-weight: 700;
      letter-spacing: 2px;
    }

    .next-screen p {
      color: rgba(255, 255, 255, 0.6);
      font-size: 16px;
      text-align: center;
      padding: 0 30px;
    }

    /* Welcome/Activation Screen overlay */
    .welcome-screen {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 150;
      opacity: 1;
      transition: opacity 0.5s ease;
    }

    .welcome-screen.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .welcome-card {
      width: 90%;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 25px;
      color: #fff;
    }

    .activate-btn {
      width: 100%;
      max-width: 280px;
      padding: 18px;
      border-radius: 35px;
      border: none;
      background: #14eb2e;
      color: #000;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: 0 5px 20px rgba(20, 235, 46, 0.5);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .activate-btn:active {
      transform: scale(0.97);
    }