/* ============================================================================
   RELÓGIO TEMPORAMA — estilo do módulo (Rl)

   Tudo aqui é escopado em `.rl`. Nenhum seletor de elemento solto, nenhuma regra
   em body ou :root fora das variáveis com prefixo --rl-: o módulo entra num
   projeto alheio sem repintar a página de quem o recebeu.

   As variáveis abaixo são a superfície de tema. Trocar as cinco primeiras adapta
   o relógio a qualquer identidade sem tocar em mais nada.

   COR DE ESTADO, NUNCA COR DE DADO — verde, âmbar e vermelho aqui dizem se a volta
   bateu a meta, que é ESTADO. Nenhum dado é colorido por identidade: cena, take e
   operador não têm cor. Por isso cada estado vem sempre com PALAVRA junto ("no alvo",
   "passou", "GRAVANDO"): cor sozinha não informa quem não separa verde de vermelho.
   ========================================================================== */
.rl {
    --rl-fundo: #0b0b0d;
    --rl-painel: rgba(28, 28, 30, 0.75);
    --rl-borda: rgba(255, 255, 255, 0.12);
    --rl-texto: #ffffff;
    --rl-fraco: #ebebf599;

    --rl-boa: #30d158;
    --rl-entrando: #ff9f0a;
    --rl-longa: #ff453a;
    --rl-rec: #ff453a;
    --rl-clap: #bf5af2;

    --rl-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    --rl-ui: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;

    color: var(--rl-texto);
    font-family: var(--rl-ui);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 560px;
}
.rl *, .rl *::before, .rl *::after { box-sizing: border-box; }

/* --- topo: claquete e selos ------------------------------------------------ */
.rl-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rl-claquete { display: flex; gap: 14px; }
.rl-campo { display: flex; flex-direction: column; gap: 3px; }
.rl-campo > span { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.7px; color: var(--rl-fraco); }
.rl-campo-linha { flex-direction: row; align-items: center; gap: 6px; }
.rl-campo input[type="text"], .rl-campo input:not([type]), .rl-campo input[type="number"], .rl-campo select {
    background: var(--rl-painel); color: var(--rl-texto);
    border: 1px solid var(--rl-borda); border-radius: 8px;
    padding: 5px 8px; font-family: var(--rl-mono); font-size: 0.95rem; min-width: 62px;
}
.rl-campo output { font-family: var(--rl-mono); font-size: 1.05rem; padding: 5px 0; }

.rl-selos { display: flex; gap: 6px; }
.rl-selo {
    font-family: var(--rl-mono); font-size: 0.7rem; font-weight: 700;
    padding: 4px 9px; border-radius: 20px;
    border: 1px solid var(--rl-borda); color: var(--rl-fraco);
    transition: color .15s, border-color .15s, background .15s;
}
.rl-selo-rec.on { color: var(--rl-rec); border-color: var(--rl-rec); background: rgba(255, 69, 58, 0.14); animation: rl-pulsa 1.1s ease-in-out infinite; }
.rl-selo-run.on { color: var(--rl-boa); border-color: var(--rl-boa); background: rgba(48, 209, 88, 0.14); }
@keyframes rl-pulsa { 50% { opacity: 0.42; } }
@media (prefers-reduced-motion: reduce) { .rl-selo-rec.on { animation: none; } }

/* --- mostrador -------------------------------------------------------------- */
.rl-mostrador { position: relative; display: grid; place-items: center; padding: 4px 0; }
.rl-face { width: min(260px, 72vw); height: auto; transform: rotate(-90deg); }
.rl-trilho { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 9; }
.rl-arco {
    fill: none; stroke: var(--rl-fraco); stroke-width: 9; stroke-linecap: round;
    transition: stroke .2s;
}
.rl-arco[data-classe="boa"] { stroke: var(--rl-boa); }
.rl-arco[data-classe="entrando"] { stroke: var(--rl-entrando); }
.rl-arco[data-classe="longa"] { stroke: var(--rl-longa); }

.rl-digitos { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rl-total { font-family: var(--rl-mono); font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.rl-parcial { font-family: var(--rl-mono); font-size: 0.78rem; color: var(--rl-fraco); font-variant-numeric: tabular-nums; }

/* --- botões ------------------------------------------------------------------ */
.rl-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-b {
    font-family: var(--rl-ui); font-size: 0.82rem; font-weight: 600;
    color: var(--rl-texto); background: var(--rl-painel);
    border: 1px solid var(--rl-borda); border-radius: 10px;
    padding: 9px 15px; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.rl-b:hover { background: rgba(255, 255, 255, 0.1); }
.rl-b:focus-visible { outline: 2px solid var(--rl-boa); outline-offset: 2px; }
.rl-b-play.rodando { border-color: var(--rl-boa); color: var(--rl-boa); }
.rl-b-clap { border-color: rgba(191, 90, 242, 0.42); color: var(--rl-clap); }
.rl-b-rec { border-color: rgba(255, 69, 58, 0.42); color: var(--rl-rec); }
.rl-b-fraco { color: var(--rl-fraco); font-weight: 500; }

.rl-ajustes { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }

/* --- registros ---------------------------------------------------------------- */
.rl-lista-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--rl-borda); padding-top: 12px; }
.rl-conta { font-family: var(--rl-mono); font-size: 0.72rem; color: var(--rl-fraco); }
.rl-saidas { display: flex; gap: 6px; }

.rl-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 340px; overflow-y: auto; }
.rl-item {
    display: grid;
    grid-template-columns: 30px minmax(94px, auto) 1fr auto auto 28px;
    align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 9px;
    background: var(--rl-painel); border: 1px solid var(--rl-borda);
    border-left-width: 3px; border-left-color: var(--rl-borda);
    font-size: 0.76rem;
}
.rl-item.boa { border-left-color: var(--rl-boa); }
.rl-item.entrando { border-left-color: var(--rl-entrando); }
.rl-item.longa { border-left-color: var(--rl-longa); }
.rl-item.gravando { border-left-color: var(--rl-rec); background: rgba(255, 69, 58, 0.09); }
.rl-item.fav { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }

.rl-item-id { font-family: var(--rl-mono); font-weight: 700; font-size: 0.7rem; color: var(--rl-fraco); }
.rl-item-cena { font-family: var(--rl-mono); }
.rl-item-hora { font-family: var(--rl-mono); color: var(--rl-fraco); font-size: 0.68rem; }
.rl-item-tempo { font-family: var(--rl-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.rl-item.gravando .rl-item-tempo { color: var(--rl-rec); }
.rl-item-classe { font-size: 0.66rem; color: var(--rl-fraco); text-transform: uppercase; letter-spacing: 0.4px; }
.rl-fav { background: none; border: none; cursor: pointer; color: var(--rl-fraco); font-size: 0.95rem; padding: 0; line-height: 1; }
.rl-item.fav .rl-fav { color: #ffd60a; }

@media (max-width: 520px) {
    .rl-item { grid-template-columns: 26px 1fr auto 26px; }
    .rl-item-hora, .rl-item-classe { display: none; }
}