/* rotinas — ver rotinas.js. Tokens do index.html; peças do kit s-* (secoes.css). */

.r-pad { max-width:1080px; }
.r-resumo { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.r-ponto { opacity:.5; }
.r-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap:12px; }

/* ---------- o cartão ---------- */
.r-card {
  position:relative; display:flex; flex-direction:column; gap:10px; min-width:0; padding:14px 14px 10px;
  border-radius:14px; background:var(--vidro-leve); border:1px solid var(--vidro-brd); box-shadow:var(--vidro-topo);
  transition:opacity .15s, border-color .15s;
}
.r-card.alerta { border-color:rgba(245,181,68,.45); }
.r-card.erro { border-color:rgba(248,113,113,.4); }
.r-card.pausada > :not(.r-topo):not(.r-acoes) { opacity:.55; }
.r-card.pausada .r-tit b { color:var(--muted); }

.r-topo { display:flex; align-items:flex-start; gap:11px; min-width:0; }
.r-tipo {
  flex:none; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:10px;
  font-size:15px; font-weight:700; line-height:1;
}
.r-tipo-pedido { color:var(--accent); background:rgba(56,189,248,.13); border:1px solid rgba(56,189,248,.3); }
.r-tipo-vigia { color:var(--ok); background:rgba(45,212,167,.12); border:1px solid rgba(45,212,167,.3); }
.r-tit { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.r-tit b { font-size:14.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.r-sub { display:flex; flex-wrap:wrap; gap:2px 6px; font-size:12px; color:var(--muted); }
.r-tipo-txt { font-weight:600; }

/* interruptor ativa/pausada */
.r-chave {
  flex:none; position:relative; width:42px; height:24px; margin-top:3px; border-radius:99px; padding:0; cursor:pointer;
  border:1px solid var(--vidro-brd); background:rgba(2,5,12,.55); transition:background .18s, border-color .18s;
}
.r-chave i {
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--muted);
  transition:transform .18s, background .18s; box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.r-chave.on { background:rgba(45,212,167,.28); border-color:rgba(45,212,167,.55); }
.r-chave.on i { transform:translateX(18px); background:var(--ok); }
.r-chave:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.r-det { display:flex; flex-direction:column; gap:6px; min-width:0; }
.r-pedido { margin:0; font-size:13px; line-height:1.45; color:var(--text); opacity:.9; overflow-wrap:anywhere;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.r-cmd {
  display:block; min-width:0; padding:7px 10px; border-radius:9px; background:rgba(2,5,12,.5); border:1px solid var(--vidro-brd);
  font-family:var(--mono); font-size:12px; color:#cfe6ff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.r-cond { font-size:12.5px; color:var(--muted); }
.r-e-claude { color:var(--accent); }

.r-estado { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.r-prox { color:var(--text); opacity:.85; }
.r-prox.off { color:var(--muted); }
.r-ver-saida { border:none; background:none; padding:2px 4px; color:var(--accent); font:inherit; font-size:12px; font-weight:600; cursor:pointer; border-radius:6px; }
.r-ver-saida:hover { text-decoration:underline; }
.r-ver-saida:focus-visible { outline:2px solid var(--accent); }

.r-saida {
  margin:0; padding:10px 12px; max-height:240px; overflow:auto; border-radius:10px; background:rgba(2,5,12,.6);
  border:1px solid var(--vidro-brd); color:#cfd8e6; font-family:var(--mono);
  font-size:12px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere;
}

.r-acoes { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-top:8px; border-top:1px solid rgba(255,255,255,.06); }
.r-acoes .s-btn { min-height:32px; padding:6px 11px; font-size:12.5px; }
.r-rodar { color:var(--accent); }

/* ---------- vazio ---------- */
.r-vazio { display:flex; flex-direction:column; gap:16px; padding:12px 0; }
.r-vazio-cab b { font-size:17px; font-weight:650; }
.r-vazio-cab p { margin:4px 0 0; color:var(--muted); font-size:13.5px; }
.r-explica-grade { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:12px; }
.r-explica {
  display:flex; flex-direction:column; gap:10px; align-items:flex-start; padding:16px; border-radius:14px;
  background:var(--vidro-leve); border:1px solid var(--vidro-brd); box-shadow:var(--vidro-topo);
}
.r-explica-topo { display:flex; align-items:center; gap:10px; }
.r-explica-topo b { font-size:15px; }
.r-explica p { margin:0; font-size:13px; line-height:1.5; color:var(--text); opacity:.88; }
.r-explica p.r-exemplo { color:var(--muted); opacity:1; font-size:12.5px; }
.r-explica .s-btn { margin-top:auto; }

/* ---------- diálogo criar/editar ---------- */
.r-overlay { align-items:center; }
/* Cabeçalho, erro e botões sempre à vista; só o meio rola (o formulário é mais alto que um celular). */
.card.r-dialogo { width:min(580px, 100%); max-height:calc(100dvh - 32px); overflow:hidden; }
.r-dialogo > .s-dialogo-corpo {
  flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  margin:0 -18px; padding:2px 18px 4px;
}
.r-dialogo > .cardTopo, .r-dialogo > .s-erro, .r-dialogo > .s-dialogo-acoes { flex:none; }
.r-dialogo textarea { resize:vertical; min-height:44px; line-height:1.45; font:inherit; font-size:14px; }
.r-dialogo textarea.r-mono { font-family:var(--mono); font-size:12.5px; }
.r-dialogo textarea:disabled { opacity:.45; }
.r-dialogo input, .r-dialogo textarea, .r-dialogo select { margin:0; }
.r-seg {
  display:flex; gap:2px; padding:3px; border-radius:12px; background:rgba(2,5,12,.45);
  border:1px solid var(--vidro-brd); box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}
.r-seg[hidden] { display:none; }
.r-seg-b {
  flex:1; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:7px 8px;
  border:1px solid transparent; border-radius:9px; background:none; color:var(--muted); font:inherit; font-size:12.5px;
  font-weight:550; cursor:pointer; white-space:nowrap;
}
.r-seg-b:hover { color:var(--text); }
.r-seg-b.on { color:var(--text); background:var(--vidro-leve); border-color:var(--vidro-brd); box-shadow:var(--vidro-topo); }
.r-seg-b:focus-visible, .r-dia:focus-visible, .r-modelo:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.r-seg-tipo .r-seg-b { padding:8px; font-size:13.5px; }
.r-seg-tipo .r-tipo { width:22px; height:22px; border-radius:7px; font-size:12px; }

.r-modelos { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.r-modelos[hidden] { display:none; }
.r-modelos-rot { font-size:10.5px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-right:2px; }
button.r-modelo { padding:4px 10px; color:var(--text); background:rgba(255,255,255,.03); }
button.r-modelo:hover { border-color:var(--accent); color:var(--accent); }

.r-dupla { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap:10px; }
.r-dupla > [hidden], .r-bloco[hidden], .s-campo[hidden], .r-dias[hidden] { display:none; }
.r-bloco { display:flex; flex-direction:column; gap:12px; }
.r-dias { display:flex; gap:6px; flex-wrap:wrap; }
.r-dia {
  width:36px; height:36px; border-radius:50%; border:1px solid var(--vidro-brd); background:none; color:var(--muted);
  font:inherit; font-size:13px; font-weight:650; cursor:pointer;
}
.r-dia:hover { color:var(--text); border-color:var(--line); }
.r-dia.on { background:var(--accent); border-color:var(--accent); color:#04121f; }
.r-com-sufixo { display:flex; align-items:center; gap:8px; }
.r-com-sufixo span { color:var(--muted); font-size:13px; }
.r-quando-txt { color:var(--accent); }
.r-cond-linha { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:10px; }
.r-cond-linha:has(> .r-campo-valor[hidden]) { grid-template-columns:minmax(0, 1fr); }
.r-campo-valor[hidden] { display:none; }

/* ---------- resultado e histórico ---------- */
.r-res { padding:12px 14px; border-radius:12px; border:1px solid var(--vidro-brd); display:flex; flex-direction:column; gap:4px; }
.r-res b { font-size:14.5px; }
.r-res p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.r-res-ok { border-color:rgba(45,212,167,.45); background:rgba(45,212,167,.07); }
.r-res-ok b { color:var(--ok); }
.r-res-warn { border-color:rgba(245,181,68,.5); background:rgba(245,181,68,.08); }
.r-res-warn b { color:var(--warn); }
.r-res-err { border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.08); }
.r-res-err b { color:var(--err); }

.r-hist { display:flex; flex-direction:column; gap:4px; max-height:56vh; overflow:auto; margin:0 -6px; padding:0 6px; }
.r-hist-item { display:flex; flex-direction:column; gap:6px; }
.r-hist-item .r-saida { margin:0 0 8px; max-height:200px; }
.r-hist-linha {
  display:flex; align-items:center; gap:8px; width:100%; min-width:0; padding:8px; border-radius:10px; text-align:left;
  border:1px solid transparent; background:none; color:var(--text); font:inherit; font-size:12.5px; cursor:pointer;
}
.r-hist-linha:hover { background:rgba(255,255,255,.04); border-color:var(--vidro-brd); }
.r-hist-linha:focus-visible { outline:2px solid var(--accent); }
.r-hist-txt { flex:1; min-width:0; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.r-hist-em { flex:none; color:var(--muted); font-variant-numeric:tabular-nums; font-size:11.5px; }

@media (max-width:860px) {
  .r-grade { grid-template-columns:minmax(0, 1fr); }
  .r-acoes { flex-wrap:nowrap; gap:5px; }
  .r-acoes .s-btn { padding:6px 10px; }
  .r-agora { display:none; }
  .r-cond-linha { grid-template-columns:minmax(0, 1fr); }
  .r-seg-b { font-size:12px; padding:7px 4px; white-space:normal; text-align:center; line-height:1.2; }
  .card.r-dialogo { max-height:calc(100dvh - 20px); padding:16px 14px; }
  .r-dialogo > .s-dialogo-corpo { margin:0 -14px; padding:2px 14px 4px; }
  .r-hist-linha { flex-wrap:wrap; }
  .r-hist-txt { flex-basis:100%; order:3; }
}
@media (prefers-reduced-motion: reduce) { .r-chave, .r-chave i { transition:none; } }