/* A Agenda por recurso (16a) e os Pacotes (5d) no /nova (frontend/nova/agenda.js). Os tokens do /nova; a cor nunca é a única pista
   (a etiqueta e o texto dizem o estado). Nada se mexe sozinho. */
.nv-ag-topo { display: grid; gap: 8px; }
.nv-ag-ctl { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.nv-ag-ctl .nv-m-filtros { margin: 0; }
.nv-ag-rolo { overflow: auto; max-height: 62vh; border: 1px solid var(--nv-borda); border-radius: 12px; background: var(--nv-vidro-claro); }
.nv-ag-grade { display: grid; position: relative; min-width: max-content; grid-template-columns: var(--ag-colunas); grid-template-rows: var(--ag-linhas); }
.nv-ag-grade > * { grid-column: var(--ag-c, auto); grid-row: var(--ag-l, auto); }   /* o lugar de cada peça vem do agenda.js pelas variáveis */
.nv-ag-canto, .nv-ag-col { position: sticky; top: 0; z-index: 2; background: rgba(28, 22, 52, .96); border-bottom: 1px solid var(--nv-borda); }
.nv-ag-col { display: flex; align-items: center; justify-content: center; padding: 0 8px; font: 600 13px/1 var(--sans, system-ui); color: var(--nv-txt-1); border-left: 1px solid var(--nv-borda); }
.nv-ag-hora { font: 500 11.5px/1 var(--sans, system-ui); color: var(--nv-txt-3); padding: 2px 6px 0 0; text-align: right; border-top: 1px solid var(--nv-borda); }
.nv-ag-vaga { border: 0; border-left: 1px solid var(--nv-borda); border-top: 1px dashed rgba(205, 182, 255, .08); background: transparent; padding: 0; cursor: pointer; }
.nv-ag-vaga:hover, .nv-ag-vaga:focus-visible { background: rgba(184, 153, 255, .12); outline: none; }
.nv-ag-vaga.fora { background: rgba(0, 0, 0, .22); cursor: default; }
.nv-ag-vaga.ocupada, .nv-ag-vaga.ocupada:hover { background: transparent; cursor: default; }   /* a vaga que o atendimento toma fica por baixo do bloco */
.nv-ag-bloq { z-index: 1; margin: 1px 4px; padding: 4px 6px; border-radius: 8px; font-size: 11.5px; color: var(--nv-txt-3);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 12px); border: 1px solid var(--nv-borda); }
.nv-ag-bloco { z-index: 1; margin: 1px 4px; padding: 4px 8px; border-radius: 9px; text-align: left; display: grid; gap: 2px; align-content: start; overflow: hidden; cursor: pointer;
  background: rgba(184, 153, 255, .26); border: 1px solid rgba(205, 182, 255, .55); color: var(--nv-txt-1); font: 500 12px/1.2 var(--sans, system-ui); }
.nv-ag-bloco b { font-weight: 600; font-size: 12.5px; }
.nv-ag-bloco small { color: var(--nv-txt-2); }
.nv-ag-bloco .nv-m-etq { justify-self: start; }
.nv-ag-bloco[data-agente="1"] { border-style: dashed; }
.nv-ag-bloco[data-estado="confirmada"] { background: rgba(120, 220, 170, .18); border-color: rgba(120, 220, 170, .5); }
.nv-ag-bloco[data-estado="feita"] { background: rgba(120, 220, 170, .1); opacity: .8; }
.nv-ag-bloco[data-estado="faltou"] { background: rgba(255, 130, 130, .14); border-color: rgba(255, 130, 130, .5); }
.nv-ag-bloco:focus-visible { outline: 2px solid var(--nv-lilas-forte); outline-offset: 1px; }
.nv-ag-detalhe { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--nv-vidro-claro); border: 1px solid var(--nv-borda); display: grid; gap: 6px; }
.nv-ag-detalhe h4 { margin: 0; font: 600 14px/1.3 var(--sans, system-ui); color: var(--nv-txt-1); }
.nv-ag-itens { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.nv-ag-itens li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--nv-txt-2); }
.nv-ag-caixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.nv-ag-planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.nv-ag-planos p { margin: 2px 0; font-size: 13px; color: var(--nv-txt-2); }
.nv-ag-uso { display: inline-grid; gap: 2px; min-width: 90px; }
.nv-ag-uso i { display: block; height: 6px; border-radius: 3px; background: var(--nv-lilas); }
.nv-ag-uso { background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)) no-repeat 0 0 / 100% 6px; }
.nv-ag-uso small { font-size: 11px; color: var(--nv-txt-3); }
@media (max-width: 760px) { .nv-ag-rolo { max-height: none; } }