:root {
  --fundo: #f6f7f9;
  --superficie: #ffffff;
  --borda: #e3e6ea;
  --texto: #1c2430;
  --texto-suave: #5d6876;
  --marca: #1f6feb;
  --livre: #1a7f4b;
  --livre-fundo: #e8f5ee;
  --ofertado: #b45309;
  --ofertado-fundo: #fff4e0;
  --agendado: #1f6feb;
  --agendado-fundo: #e6efff;
  --ocupado: #8a93a0;
  --ocupado-fundo: #eef0f3;
  --erro: #b42318;
  --sombra: 0 1px 2px rgb(16 24 40 / 6%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f1419;
    --superficie: #171d24;
    --borda: #2a333d;
    --texto: #e6eaef;
    --texto-suave: #9aa5b1;
    --marca: #5b9bff;
    --livre: #4cc38a;
    --livre-fundo: #12291e;
    --ofertado: #f0a54a;
    --ofertado-fundo: #33240f;
    --agendado: #6aa5ff;
    --agendado-fundo: #15233b;
    --ocupado: #6b7480;
    --ocupado-fundo: #1d242c;
    --erro: #ff8a80;
    --sombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2 { margin: 0; line-height: 1.2; }
h1 { font-size: 20px; }
h2 { font-size: 15px; }
button, select, input { font: inherit; }
button {
  border: 1px solid var(--marca);
  background: var(--marca);
  color: #fff;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
}
button.secundario { background: transparent; color: var(--texto); border-color: var(--borda); }
button.mini { padding: 2px 8px; font-size: 12px; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.selo { margin: 0 0 2px; font-size: 12px; color: var(--ofertado); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* --- login */
.tela-login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.cartao-login { width: min(380px, 100%); background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 28px; box-shadow: var(--sombra); }
.cartao-login .sub { color: var(--texto-suave); margin: 6px 0 20px; }
.cartao-login form { display: grid; gap: 14px; }
.cartao-login label { display: grid; gap: 4px; font-size: 13px; color: var(--texto-suave); }
.cartao-login input { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); color: var(--texto); }
.erro { color: var(--erro); margin: 0; font-size: 13px; }

/* --- topo e layout */
.topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
.acoes-topo { display: flex; align-items: center; gap: 8px; }
.acoes-topo form { margin: 0; }
.status { font-size: 13px; color: var(--texto-suave); display: inline-flex; align-items: center; gap: 6px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ocupado); }
.status[data-estado="ao-vivo"]::before { background: var(--livre); box-shadow: 0 0 0 3px var(--livre-fundo); }
.status[data-estado="erro"]::before { background: var(--erro); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; padding: 20px; max-width: 1500px; margin: 0 auto; }
.layout > * { min-width: 0; }
@media (max-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr); padding: 16px; } }

section, .lateral > section { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; box-shadow: var(--sombra); }
.lateral { display: grid; gap: 20px; align-content: start; }
.lateral > section { max-height: 520px; overflow: auto; }
.cabecalho-secao { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.filtro { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); }
.filtro select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); }
.separado { margin-top: 28px; margin-bottom: 10px; }

/* --- dias */
.dias { display: flex; gap: 6px; overflow-x: auto; margin: 14px 0 10px; padding-bottom: 4px; }
.dia { flex: 0 0 auto; display: grid; justify-items: center; gap: 1px; min-width: 62px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); position: relative; }
.dia small { font-size: 11px; color: var(--texto-suave); text-transform: capitalize; }
.dia strong { font-size: 16px; }
.dia[aria-pressed="true"] { border-color: var(--marca); background: var(--agendado-fundo); }
.dia .marcas { display: flex; gap: 3px; min-height: 6px; }
.dia .marcas i { width: 6px; height: 6px; border-radius: 50%; }
.dia .marcas .m-ofertado { background: var(--ofertado); }
.dia .marcas .m-agendado { background: var(--agendado); }
.dia.sem-agenda { opacity: .45; }

/* --- legenda */
.legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; padding: 0; margin: 0 0 14px; font-size: 12px; color: var(--texto-suave); }
.legenda li { display: inline-flex; align-items: center; gap: 6px; }
.ponto { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid; }
.ponto.livre { border-color: var(--livre); background: var(--livre-fundo); }
.ponto.ofertado { border-color: var(--ofertado); background: var(--ofertado-fundo); }
.ponto.agendado { border-color: var(--agendado); background: var(--agendado); }
.ponto.ocupado { border-color: var(--ocupado-fundo); background: var(--ocupado-fundo); }
.ponto.passado { border-color: var(--borda); background: transparent; border-style: dashed; }

/* --- grade de médicos */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.medico { border: 1px solid var(--borda); border-radius: 10px; padding: 12px; background: var(--fundo); }
.medico.apagado { opacity: .38; }
.medico h3 { margin: 0; font-size: 14px; }
.medico .areas { margin: 2px 0 8px; font-size: 12px; color: var(--texto-suave); }
.medico .aviso { font-size: 12px; color: var(--erro); margin: 0 0 8px; }
.slots { display: flex; flex-wrap: wrap; gap: 5px; }
.slot { font-size: 12.5px; font-variant-numeric: tabular-nums; padding: 3px 7px; border-radius: 6px; border: 1.5px solid; line-height: 1.3; }
.slot.livre { border-color: var(--livre); background: var(--livre-fundo); color: var(--livre); }
.slot.ofertado { border-color: var(--ofertado); background: var(--ofertado-fundo); color: var(--ofertado); font-weight: 600; }
.slot.agendado { border-color: var(--agendado); background: var(--agendado); color: #fff; font-weight: 600; }
.slot.ocupado { border-color: transparent; background: var(--ocupado-fundo); color: var(--ocupado); text-decoration: line-through; }
.slot.passado { border-color: var(--borda); border-style: dashed; color: var(--ocupado); }
.slot .quem { display: block; font-weight: 400; font-size: 11px; }
.slot.novo { animation: piscar 1.2s ease-in-out 3; }
@keyframes piscar { 50% { transform: scale(1.12); box-shadow: 0 0 0 4px var(--agendado-fundo); } }
.vazio { color: var(--texto-suave); font-size: 13px; margin: 8px 0; }

/* --- matriz de convênios */
.rolagem { overflow-x: auto; }
.matriz { border-collapse: collapse; font-size: 12.5px; min-width: 640px; width: 100%; }
.matriz th, .matriz td { border-bottom: 1px solid var(--borda); padding: 6px 8px; text-align: center; }
.matriz th:first-child, .matriz td:first-child { text-align: left; white-space: nowrap; }
.matriz thead th { color: var(--texto-suave); font-weight: 600; }
.matriz .sim { color: var(--livre); font-weight: 700; }
.matriz .nao { color: var(--ocupado); }
.matriz .destaque { background: var(--agendado-fundo); }
.matriz .recusado { color: var(--erro); }

/* --- feed e listas */
.feed, .lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.feed > li, .lista > li { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; background: var(--fundo); font-size: 13px; }
.feed .linha1 { display: flex; justify-content: space-between; gap: 8px; }
.feed .nome { font-weight: 600; }
.feed .hora, .lista .meta { color: var(--texto-suave); font-size: 12px; }
.feed .falhou .nome { color: var(--erro); }
.feed .resumo { margin: 3px 0 0; color: var(--texto); }
.feed .opcoes { margin: 4px 0 0; padding-left: 16px; color: var(--ofertado); }
.feed details { margin-top: 4px; }
.feed summary { cursor: pointer; color: var(--texto-suave); font-size: 12px; }
.feed pre { white-space: pre-wrap; word-break: break-word; font-size: 11.5px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 6px; max-height: 240px; overflow: auto; }
.feed > li.novo { animation: entrar .6s ease-out; }
@keyframes entrar { from { background: var(--ofertado-fundo); } }
.lista li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.lista .riscado { text-decoration: line-through; color: var(--texto-suave); }

@media (prefers-reduced-motion: reduce) { .slot.novo, .feed li.novo { animation: none; } }