/* =============================================================
   ROTINAS GRAVADAS
   -------------------------------------------------------------
   Uma rotina roda sozinha de madrugada. Então a tela precisa
   responder, sem clicar em nada, a três perguntas: o que ela faz,
   em que ritmo, e se está ligada. Por isso os passos aparecem
   escritos no cartão, e não escondidos atrás de um "editar".
============================================================= */

.rot-topo {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 14px 16px; margin-bottom: 16px;
    border-radius: 12px; border: 1px solid var(--border);
    background: var(--painel);
}
.rot-dica { font-size: 11px; line-height: 1.6; color: var(--text-faint); max-width: 62ch; }
.rot-dica b { color: var(--text-dim); font-weight: 600; }

.rot-btn-gravar {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 18px; border-radius: 8px; cursor: pointer;
    font-size: 12.5px; font-weight: 700;
    border: 1px solid rgba(var(--danger-rgb), .38);
    background: var(--danger-soft); color: var(--danger);
    transition: background .16s;
}
.rot-btn-gravar:hover { background: rgba(var(--danger-rgb), .18); }

.rot-ponto {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--danger); flex-shrink: 0;
    animation: rotPisca 1.3s ease-in-out infinite;
}
@keyframes rotPisca { 50% { opacity: .28; } }

/* Barra de gravação: fica por cima de tudo, em todas as abas.
   Sem ela, a pessoa vai para o Instagram e perde a noção de que
   ainda está gravando. */
.rot-barra {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 9000;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-radius: 999px;
    border: 1px solid rgba(var(--danger-rgb), .45);
    background: var(--flutuante);
    box-shadow: 0 10px 40px -12px rgba(var(--danger-rgb), .55), var(--sh-lg);
    backdrop-filter: blur(12px);
}
.rot-barra.hidden { display: none; }
.rot-barra-txt { font-size: 11px; color: var(--text); }
.rot-barra-txt b { color: var(--danger); font-variant-numeric: tabular-nums; }
.rot-barra-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: 20px; cursor: pointer;
    font-size: 11px; font-weight: 600;
    border: none; background: var(--danger); color: #fff;
}

/* Enquanto grava, a borda da tela lembra o tempo todo */
body.rot-gravando::after {
    content: ""; position: fixed; inset: 0; z-index: 8999;
    pointer-events: none; border: 2px solid rgba(var(--danger-rgb), .5);
    animation: rotPisca 2s ease-in-out infinite;
}

/* ---- Cartão da rotina ---- */
.rot-lista { display: flex; flex-direction: column; gap: 14px; }

.rot-card {
    padding: 16px; border-radius: 12px;
    border: 1px solid var(--border-soft); background: var(--surface);
    transition: border-color .2s;
}
.rot-card.ligada { border-color: rgba(var(--success-rgb), .35); }

.rot-card-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 12px;
}
.rot-card-nome {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 700; color: var(--text-strong);
}
.rot-farol {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-faint); flex-shrink: 0;
}
.rot-farol.on { background: var(--success); box-shadow: 0 0 9px var(--success); }

.rot-passos {
    margin: 0 0 12px; padding: 0 0 0 22px;
    font-size: 11px; line-height: 1.85; color: var(--text-dim);
}
.rot-passos li::marker { color: var(--accent); font-weight: 700; }
.rot-passos li.ruim { color: var(--danger); }

.rot-ritmo { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.rot-ritmo span {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; padding: 4px 9px; border-radius: 20px;
    background: rgba(255, 255, 255, .045); color: var(--text-faint);
    border: 1px solid var(--border-soft);
}
.rot-ritmo i { font-size: 11px; opacity: .8; }

.rot-rodape {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding-top: 12px; border-top: 1px solid var(--border-soft);
}
.rot-conta { font-size: 11px; color: var(--text-faint); }
.rot-conta b.ruim { color: var(--danger); }
.rot-acoes { display: flex; gap: 6px; flex-wrap: wrap; }

.rot-saida { display: none; margin-top: 12px; }
.rot-saida.mostrando { display: block; }
.rot-ok, .rot-erro {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; padding: 10px 12px; border-radius: 8px;
}
.rot-ok { background: var(--success-soft); color: var(--success); }
.rot-ok em { font-style: normal; opacity: .7; }
.rot-erro { background: var(--danger-soft); color: var(--danger); }

.rot-hist { margin: 0; padding: 0; list-style: none; }
.rot-hist li {
    display: flex; gap: 10px; padding: 7px 10px;
    font-size: 11px; color: var(--text-dim);
    border-bottom: 1px solid var(--border-soft);
}
.rot-hist li:last-child { border-bottom: none; }
.rot-hist li.ruim { color: var(--danger); }
.rot-hist span { flex-shrink: 0; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ---- Editor ---- */
.rot-editor {
    width: min(620px, 95vw); max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.rot-editor-corpo { overflow-y: auto; padding-right: 4px; }

.rot-secao {
    margin: 18px 0 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--accent);
}
.rot-nota {
    font-size: 11px; line-height: 1.6; color: var(--text-faint);
    padding: 9px 11px; margin-bottom: 11px;
    border-radius: 8px; background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border-soft);
}

.rot-passo {
    padding: 11px; border-radius: 12px; margin-bottom: 9px;
    border: 1px solid var(--border-soft); background: var(--bg-elev);
}
.rot-passo-topo { display: flex; align-items: center; gap: 9px; }
.rot-passo-n {
    width: 20px; height: 20px; border-radius: 8px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 11px; font-weight: 700;
    background: var(--accent-soft); color: var(--accent);
}
.rot-passo-acao { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text); }
.rot-passo-btns { display: flex; gap: 3px; }
.rot-passo-btns button {
    width: 24px; height: 24px; border-radius: 8px; cursor: pointer;
    display: grid; place-items: center; font-size: 11px;
    border: none; background: transparent; color: var(--text-faint);
}
.rot-passo-btns button:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.rot-passo-btns button.ruim:hover { background: var(--danger-soft); color: var(--danger); }

.rot-passo-campos {
    display: grid; gap: 9px; margin-top: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.rot-passo-campos label { display: block; }
.rot-passo-campos span {
    display: block; margin-bottom: 5px;
    font-size: 11px; color: var(--text-faint);
}
.rot-passo-campos input {
    width: 100%; padding: 7px 10px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    font-size: 11px;
}
.rot-passo-vazio { margin-top: 9px; font-size: 11px; color: var(--text-faint); font-style: italic; }

.rot-grade { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.rot-num { display: block; }
.rot-num span { display: block; margin-bottom: 5px; font-size: 11px; color: var(--text-dim); }
.rot-num input {
    width: 100%; padding: 7px 10px; border-radius: 8px; text-align: center;
    border: 1px solid var(--border); background: var(--bg-elev); color: var(--text);
    font-size: 11px; font-variant-numeric: tabular-nums;
}
.rot-num input:focus { outline: none; border-color: var(--accent-line); }

@media (max-width: 640px) {
    .rot-rodape { flex-direction: column; align-items: stretch; }
    .rot-acoes button { flex: 1; justify-content: center; }
    .rot-barra { left: 12px; right: 12px; transform: none; justify-content: space-between; }
}