:root {
    --navy:#142B49; --blue:#2563EB; --blue-d:#1D4ED8; --green:#16A34A; --amber:#D97706; --red:#DC2626;
    --bg:#F8FAFC; --surface:#FFFFFF; --surface2:#F1F5F9; --text:#172033; --muted:#64748B; --border:#E2E8F0;
    --blue-soft:#EFF6FF; --green-soft:#DCFCE7; --amber-soft:#FEF3C7; --red-soft:#FEE2E2; --gray-soft:#E2E8F0;
    --shadow:0 1px 2px rgba(16,24,40,.05),0 6px 16px rgba(16,24,40,.06);
    --side:#142B49; --radius:14px;
  }
  [data-theme="dark"] {
    --bg:#0B1220; --surface:#111B2E; --surface2:#16233B; --text:#E6EDF7; --muted:#93A3BC; --border:#223250;
    --blue-soft:#13264A; --green-soft:#0F3B24; --amber-soft:#3F2D0B; --red-soft:#451A1A; --gray-soft:#1E2A42;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 20px rgba(0,0,0,.25); --side:#0D1A2F;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body { font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif; background:var(--bg); color:var(--text);
    min-height:100vh; line-height:1.45; transition:background .2s,color .2s; }
  .hidden { display:none !important; }
  .ic { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
  h1,h2,h3 { letter-spacing:-.01em; }
  label { display:block; font-size:.78rem; font-weight:600; color:var(--muted); margin:10px 0 4px; }

  /* ---- Botões e campos ---- */
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; border:1px solid transparent;
    border-radius:10px; padding:10px 16px; font-weight:600; font-size:.9rem; font-family:inherit; transition:background .15s,transform .05s,box-shadow .15s; }
  .btn:active { transform:scale(.98); }
  .btn-primary { background:var(--blue); color:#fff; box-shadow:0 1px 2px rgba(37,99,235,.35); }
  .btn-primary:hover { background:var(--blue-d); }
  .btn-block { width:100%; margin-top:14px; }
  .btn-ghost { background:var(--surface); color:var(--text); border-color:var(--border); }
  .btn-ghost:hover { background:var(--surface2); }
  .btn-ok { background:var(--green); color:#fff; } .btn-ok:hover { filter:brightness(.92); }
  .btn-no { background:var(--red); color:#fff; } .btn-no:hover { filter:brightness(.92); }
  .btn-sm { padding:6px 11px; font-size:.8rem; border-radius:8px; }
  .btn-link { background:none; border:none; color:var(--blue); font-weight:600; font-size:.85rem; font-family:inherit; cursor:pointer; margin-top:14px; }
  .btn-link:hover { text-decoration:underline; }
  .icon-btn { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
    background:var(--surface); color:var(--text); cursor:pointer; }
  .icon-btn:hover { background:var(--surface2); }
  input, select { width:100%; padding:10px 13px; background:var(--surface); border:1px solid var(--border); border-radius:10px;
    color:var(--text); font-size:.92rem; font-family:inherit; outline:none; transition:border-color .15s,box-shadow .15s; }
  input:focus, select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
  input[type="time"] { min-height:42px; }
  .erro { color:var(--red); font-size:.85rem; margin-top:8px; min-height:1.1em; }
  .ok { color:var(--green); font-size:.85rem; margin-top:8px; }
  .row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .muted { color:var(--muted); }

  /* ---- Cartões ---- */
  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
  .card h3 { font-size:1rem; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
  .card .sub { color:var(--muted); font-size:.85rem; margin-bottom:14px; }
  .stack { display:flex; flex-direction:column; gap:18px; }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media(max-width:560px){ .form-row { grid-template-columns:1fr; } }

  .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; letter-spacing:-.02em; }
  .logo { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#3B82F6,#2563EB); color:#fff; display:grid; place-items:center; box-shadow:0 4px 10px rgba(37,99,235,.4); }
  .logo .ic { width:20px; height:20px; stroke-width:2.4; }

  /* ---- Página pública ---- */
  .pub-top { display:flex; justify-content:space-between; align-items:center; padding:14px 22px; padding-top:calc(14px + env(safe-area-inset-top,0px));
    background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; }
  .wrap { max-width:1000px; margin:0 auto; padding:26px 20px 40px; display:flex; flex-direction:column; gap:18px; }
  .hero h1 { font-size:1.7rem; } .hero p { color:var(--muted); margin-top:4px; }

  /* ---- Login ---- */
  .auth { min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; }
  .auth-side { background:linear-gradient(160deg,#142B49,#1E40AF); color:#E2E8F0; padding:48px; display:flex; flex-direction:column; justify-content:space-between; }
  .auth-side h2 { font-size:2rem; color:#fff; line-height:1.2; max-width:420px; }
  .auth-side p { color:#BFD0EA; margin-top:12px; max-width:400px; }
  .auth-side ul { list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:26px; font-size:.92rem; }
  .auth-side li { display:flex; gap:10px; align-items:center; } .auth-side li .ic { color:#7DD3FC; }
  .auth-main { display:grid; place-items:center; padding:24px; }
  .auth-card { width:100%; max-width:380px; }
  .auth-card h1 { font-size:1.5rem; } .auth-card .sub { color:var(--muted); margin:4px 0 14px; font-size:.92rem; }
  @media(max-width:860px){ .auth { grid-template-columns:1fr; } .auth-side { display:none; } }

  /* ---- App shell ---- */
  .shell { display:flex; min-height:100vh; }
  .sidebar { width:260px; background:var(--side); color:#CBD5E1; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
    padding:18px 14px; gap:18px; transition:width .2s; z-index:40; overflow:hidden; }
  .sidebar .brand { color:#fff; padding:0 6px; }
  .nav { display:flex; flex-direction:column; gap:4px; flex:1; }
  .nav button { display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border-radius:10px; border:none; background:none;
    color:#CBD5E1; font-weight:600; font-size:.9rem; font-family:inherit; cursor:pointer; text-align:left; white-space:nowrap; }
  .nav button:hover { background:rgba(255,255,255,.08); color:#fff; }
  .nav button.active { background:var(--blue); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.4); }
  .nav .cnt { margin-left:auto; background:var(--amber); color:#fff; font-size:.7rem; padding:2px 7px; border-radius:99px; }
  .userbox { display:flex; align-items:center; gap:10px; padding:10px; background:rgba(255,255,255,.06); border-radius:12px; white-space:nowrap; }
  .avatar { width:36px; height:36px; border-radius:50%; background:#3B82F6; color:#fff; display:grid; place-items:center; font-weight:700; flex:none; }
  .userbox .meta { min-width:0; } .userbox .nm { color:#fff; font-weight:600; font-size:.88rem; overflow:hidden; text-overflow:ellipsis; }
  .userbox .rl { font-size:.72rem; color:#93A8C7; }
  .shell.collapsed .sidebar { width:76px; }
  .shell.collapsed .nl, .shell.collapsed .brand-name, .shell.collapsed .userbox .meta, .shell.collapsed .nav .cnt { display:none; }
  .content { flex:1; min-width:0; display:flex; flex-direction:column; }
  .topbar { display:flex; align-items:center; gap:10px; padding:12px 24px; padding-top:calc(12px + env(safe-area-inset-top,0px));
    background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30; }
  .topbar h2 { font-size:1.1rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #btnMenu { display:none; }
  .page { max-width:1060px; width:100%; margin:0 auto; padding:24px; padding-bottom:calc(24px + env(safe-area-inset-bottom,0px)); }
  .sec { display:none; flex-direction:column; gap:18px; } .sec.active { display:flex; }
  .overlay { display:none; }
  @media(max-width:860px){
    .sidebar { position:fixed; left:0; top:0; width:260px !important; transform:translateX(-100%); transition:transform .22s; }
    .shell.open .sidebar { transform:none; box-shadow:0 0 40px rgba(0,0,0,.4); }
    .shell.open .overlay { display:block; position:fixed; inset:0; background:rgba(8,15,30,.55); z-index:35; }
    .shell.collapsed .nl, .shell.collapsed .brand-name, .shell.collapsed .userbox .meta { display:inline; }
    #btnMenu { display:inline-grid; } #btnColapsar { display:none; }
    .topbar, .page { padding-left:16px; padding-right:16px; }
    .topbar { gap:6px; }
  }

  /* ---- Indicadores ---- */
  .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
  .stat { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
  .stat-ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; }
  .stat .num { font-size:1.55rem; font-weight:800; line-height:1.1; } .stat .lbl { font-size:.78rem; color:var(--muted); }
  .s-amber .stat-ic { background:var(--amber-soft); color:var(--amber); } .s-green .stat-ic { background:var(--green-soft); color:var(--green); }
  .s-red .stat-ic { background:var(--red-soft); color:var(--red); } .s-blue .stat-ic { background:var(--blue-soft); color:var(--blue); }
  .s-orange .stat-ic { background:var(--amber-soft); color:#EA580C; }

  /* ---- Listas ---- */
  .item { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:var(--surface);
    border:1px solid var(--border); border-left:4px solid #94A3B8; border-radius:12px; padding:12px 14px; margin-bottom:10px; }
  .item.pendente { border-left-color:var(--amber); } .item.aprovado { border-left-color:var(--green); }
  .item.rejeitado { border-left-color:var(--red); } .item.cancelado { border-left-color:#94A3B8; }
  .item .data { font-weight:600; font-size:.95rem; } .item .info { color:var(--muted); font-size:.83rem; margin-top:2px; }
  .item .right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .tag { font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:99px; text-transform:uppercase; letter-spacing:.03em; }
  .tag.pendente { background:var(--amber-soft); color:var(--amber); }
  .tag.aprovado { background:var(--green-soft); color:var(--green); }
  .tag.rejeitado { background:var(--red-soft); color:var(--red); }
  .tag.cancelado { background:var(--gray-soft); color:var(--muted); }
  .tag.horas { background:var(--blue-soft); color:var(--blue); }
  .tag.conflito { background:var(--red-soft); color:var(--red); }
  .vazio { color:var(--muted); text-align:center; padding:22px; font-size:.9rem; }
  .aviso { background:var(--amber-soft); color:var(--amber); padding:10px 14px; border-radius:10px; font-size:.85rem; margin-top:8px; }
  .chip { display:inline-flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--border); padding:6px 12px; border-radius:99px; font-size:.85rem; }
  .table-wrap { overflow-x:auto; }
  table { width:100%; border-collapse:collapse; font-size:.88rem; }
  th, td { text-align:left; padding:11px 10px; border-bottom:1px solid var(--border); }
  th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
  .tin { min-width:110px; padding:7px 10px; }

  /* ---- Calendário ---- */
  .cal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
  .cal-titulo { font-weight:700; font-size:1.02rem; }
  .cal-nav { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; }
  .cal-nav:hover { background:var(--surface2); }
  .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center; }
  .cal-dow { font-size:.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; padding:4px 0; }
  .cal-dia { min-height:44px; display:grid; place-items:center; border-radius:10px; font-size:.92rem; cursor:pointer; background:var(--surface2);
    border:1px solid transparent; user-select:none; transition:border-color .12s,transform .05s; }
  .cal-dia:hover { border-color:var(--blue); } .cal-dia:active { transform:scale(.96); }
  .cal-past { color:var(--muted); opacity:.45; cursor:not-allowed; } .cal-past:hover { border-color:transparent; }
  .cal-hoje { border-color:var(--navy); font-weight:800; } [data-theme="dark"] .cal-hoje { border-color:#7DD3FC; }
  .cal-aprov { background:var(--green-soft); color:var(--green); font-weight:700; }
  .cal-pend { background:var(--amber-soft); color:var(--amber); font-weight:700; }
  .cal-sel { background:var(--blue); color:#fff; font-weight:700; box-shadow:0 4px 12px rgba(37,99,235,.4); }
  .cal-legenda { display:flex; gap:16px; font-size:.78rem; margin-bottom:12px; flex-wrap:wrap; color:var(--muted); }
  .cal-legenda span { display:inline-flex; align-items:center; gap:6px; }
  .cal-legenda span::before { content:''; width:10px; height:10px; border-radius:3px; background:currentColor; }
  .lg-aprov { color:var(--green); } .lg-pend { color:var(--amber); } .lg-sel { color:var(--blue); }
  .sel-info { font-size:.88rem; color:var(--muted); margin:14px 0 2px; } .sel-info b { color:var(--text); }
  .cal-dia { align-content:center; }
  .cal-tag { font-size:.62rem; font-weight:800; line-height:1; margin-top:3px; letter-spacing:.06em; opacity:.9; }
  .turno-btn { padding:9px 16px; border-radius:99px; border:1px solid var(--border); background:var(--surface); color:var(--text);
    font-weight:600; font-size:.88rem; font-family:inherit; cursor:pointer; transition:background .15s; }
  .turno-btn:hover { background:var(--surface2); }
  .turno-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 4px 12px rgba(37,99,235,.35); }
  .chip .x { background:none; border:none; color:var(--muted); cursor:pointer; display:inline-grid; padding:0; }
  .chip .x:hover { color:var(--red); } .chip .x .ic { width:14px; height:14px; }
  .resumo-total { font-size:.95rem; margin-bottom:10px; }

  /* ---- Editor de turnos ---- */
  .turno-card { border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:12px; background:var(--surface); }
  .turno-card-top { display:flex; gap:10px; align-items:center; margin-bottom:6px; }
  .turno-card-top .tc-nome { flex:1; font-weight:600; }
  .turno-grade { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
  .turno-grade .campo { min-width:0; }
  .check { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted); margin-top:10px; font-weight:500; }
  .check input { width:auto; }
  .turno-preview { margin-top:10px; padding:9px 12px; border-radius:10px; background:var(--blue-soft); color:var(--blue);
    font-size:.84rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .turno-preview.alerta { background:var(--amber-soft); color:var(--amber); }
  .turno-preview .selo { background:rgba(255,255,255,.6); }

/* ===== mobile ===== */
/* ===== PlantãoPro — ajustes mobile-first ===== */
html { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
button, .btn, .icon-btn, .cal-dia, .turno-btn, .cal-nav, .turno-card input { touch-action: manipulation; }
.cal-grid { touch-action: pan-y; }
#btnSairTop, #barraEnvio { display: none; }
.hoje-box { display: none; background: var(--green-soft); color: var(--green); border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: .95rem; }
.hoje-box.on { display: block; }
.dia-det { margin-top: 12px; padding: 12px 14px; background: var(--surface2); border-radius: 12px; font-size: .9rem; display: flex; flex-direction: column; gap: 3px; }
.dia-det .mut { color: var(--muted); }
#offline { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--red); color: #fff; text-align: center;
  font-size: .8rem; padding: calc(5px + env(safe-area-inset-top, 0px)) 8px 5px; }
#offline.on { display: block; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media (max-width: 860px) {
  /* campos 16px = sem zoom automático no iOS; alvos de toque >= 44px */
  input, select { font-size: 16px; min-height: 46px; }
  input[type=checkbox] { min-height: 0; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; padding: 8px 14px; }
  .icon-btn { width: 44px; height: 44px; }
  .cal-nav { width: 44px; height: 44px; }
  .cal-dia { min-height: 48px; }
  .turno-btn { min-height: 44px; }
  .card { padding: 16px; }
  .hero h1 { font-size: 1.4rem; }
  .pub-top { padding-left: 16px; padding-right: 16px; }
  .wrap { padding: 18px 14px 40px; }
  .resumo-cards { grid-template-columns: repeat(2, 1fr); }

  /* menu lateral vira barra de abas inferior */
  #btnMenu { display: none !important; }
  #btnSairTop { display: inline-grid; }
  .sidebar { top: auto !important; bottom: 0; left: 0; right: 0; width: 100% !important; height: auto; transform: none !important;
    flex-direction: row; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 0; z-index: 50;
    border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 -4px 16px rgba(0,0,0,.2); }
  .sidebar .brand, .sidebar .userbox, #btnSair { display: none; }
  .nav { flex-direction: row; gap: 2px; }
  .nav button { flex: 1; min-width: 0; flex-direction: column; justify-content: center; align-items: center; gap: 3px;
    padding: 7px 2px; font-size: .68rem; text-align: center; position: relative; }
  .nav button .nl { display: block !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav button .cnt { display: inline-block; position: absolute; top: 2px; right: calc(50% - 22px); margin: 0; }
  .nav button .cnt.hidden { display: none !important; }
  .page { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  body.com-barra .page { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

  /* barra fixa de envio (seleção em massa) */
  #barraEnvio.on { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 45;
    align-items: center; gap: 10px; background: var(--navy); color: #fff; border-radius: 14px; padding: 8px 8px 8px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35); }
  [data-theme="dark"] #barraEnvio.on { background: #1E3A66; }
  #barraEnvio span { flex: 1; font-size: .9rem; font-weight: 600; }

  /* botões de ação dos itens ocupam a largura toda */
  .item .right:has(.btn) { width: 100%; }
  .item .right:has(.btn) .btn { flex: 1; }
  .item .acoes .btn { flex: 1 1 45%; }

  /* editor de turnos */
  .turno-grade { grid-template-columns: repeat(2, 1fr); }
  .turno-card { padding: 12px; }
  .turno-card-top .tc-nome { font-size: 16px; }

  /* tabelas viram cartões */
  .table-wrap { overflow: visible; }
  table, tbody { display: block; }
  thead { display: none; }
  #tabelaHoras tr { display: block; border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--surface); }
  #tabelaHoras td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 6px 0; }
  #tabelaHoras td::before { color: var(--muted); font-size: .78rem; font-weight: 600; }
  #tabelaHoras td:nth-child(1)::before { content: 'Colaborador'; }
  #tabelaHoras td:nth-child(2)::before { content: 'Dias aprovados'; }
  #tabelaHoras td:nth-child(3)::before { content: 'Horas aprovadas'; }
  #tabelaHoras td:nth-child(4)::before { content: 'Horas pendentes'; }

  /* relatório: tabela principal vira lista */
  #relTabela .rel-tabela, #relPorTurno .rel-tabela, #relatorioMes .rel-tabela { display: block; }
  #relTabela .rel-tabela thead, #relPorTurno .rel-tabela thead, #relatorioMes .rel-tabela thead { display: none; }
  #relTabela .rel-tabela tr, #relPorTurno .rel-tabela tr, #relatorioMes .rel-tabela tr {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; border: 1px solid var(--border);
    border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface); }
  #relTabela .rel-tabela tr td, #relPorTurno .rel-tabela tr td, #relatorioMes .rel-tabela tr td {
    border: 0; padding: 2px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  #relTabela .rel-tabela tr td:first-child, #relPorTurno .rel-tabela tr td:first-child,
  #relatorioMes .rel-tabela tr td:first-child { grid-column: 1 / -1; font-weight: 700; }
  #relTabela .rel-tabela tr td:nth-child(2)::before, #relPorTurno .rel-tabela tr td:nth-child(2)::before,
  #relatorioMes .rel-tabela tr td:nth-child(2)::before { content: 'Dias'; color: var(--muted); font-size: .78rem; font-weight: 600; }
  #relTabela .rel-tabela tr td:nth-child(3)::before, #relPorTurno .rel-tabela tr td:nth-child(3)::before,
  #relatorioMes .rel-tabela tr td:nth-child(3)::before { content: 'Plantões'; color: var(--muted); font-size: .78rem; font-weight: 600; }
  #relTabela .rel-tabela tr td:nth-child(4)::before, #relPorTurno .rel-tabela tr td:nth-child(4)::before,
  #relatorioMes .rel-tabela tr td:nth-child(4)::before { content: 'Média'; color: var(--muted); font-size: .78rem; font-weight: 600; }
  #relTabela .rel-tabela tr td:nth-child(5)::before, #relPorTurno .rel-tabela tr td:nth-child(5)::before,
  #relatorioMes .rel-tabela tr td:nth-child(5)::before { content: 'Horas'; color: var(--muted); font-size: .78rem; font-weight: 600; }
  #relTabela .rel-tabela tr td:last-child, #relPorTurno .rel-tabela tr td:last-child,
  #relatorioMes .rel-tabela tr td:last-child { grid-column: 1 / -1; justify-content: flex-end; }
  #relTabela .rel-tabela tfoot, #relPorTurno .rel-tabela tfoot, #relatorioMes .rel-tabela tfoot { display: block; }
  #relTabela .rel-tabela tfoot tr, #relPorTurno .rel-tabela tfoot tr, #relatorioMes .rel-tabela tfoot tr { background: var(--surface2); }

  /* tabela de detalhamento continua como tabela (rolagem horizontal) */
  .rel-detalhe-tabela { display: table; width: 100%; }
  .rel-detalhe-tabela thead { display: table-header-group; }
  .rel-detalhe-tabela tbody { display: table-row-group; }
  .rel-detalhe-tabela tr { display: table-row; }
  .rel-detalhe-tabela td { display: table-cell; padding: 7px 12px; }
  .rel-detalhe-bloco { overflow-x: auto; }
}


/* ===== componentes / relatórios ===== */
/* ===== PlantãoPro - componentes de UX (modal, sheet, relatórios) ===== */

/* ---------- Camada: modal (desktop) / bottom sheet (celular) ---------- */
.camada { position: fixed; inset: 0; z-index: 300; display: none; }
.camada.on { display: block; }
.camada-fundo { position: absolute; inset: 0; background: rgba(8,15,30,.62); backdrop-filter: blur(2px); }
.camada-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(540px, calc(100vw - 32px));
  max-height: min(86vh, 760px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(8,15,30,.38); padding: 20px; display: flex; flex-direction: column; gap: 14px;
  animation: camadaIn .18s ease; }
.camada-box h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.camada-box h3 .ic { color: var(--blue); }
.camada-texto { font-size: .92rem; color: var(--muted); }
.camada-texto b { color: var(--text); }
.camada-caixa { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface2); font-size: .87rem; }
.camada-caixa .linha { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.camada-acoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.camada-erro { color: var(--red); font-size: .85rem; min-height: 1.1em; }
@keyframes camadaIn { from { opacity: 0; transform: translate(-50%,-46%); } to { opacity: 1; transform: translate(-50%,-50%); } }
@media (max-width: 860px) {
  .camada-box { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-height: 90vh; border-radius: 18px 18px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); animation: sheetIn .22s ease; }
  @keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }
  .camada-acoes { flex-direction: column-reverse; }
  .camada-acoes .btn { width: 100%; }
}

/* ---------- Campos de formulário ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo-rot { font-size: .78rem; font-weight: 600; color: var(--muted); }
.campo-ajuda { font-size: .75rem; color: var(--muted); }
.campo input, .campo select, .campo textarea { width: 100%; }
.campo textarea { padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text); font: inherit; font-size: .92rem; resize: vertical; min-height: 74px; }
.campo textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .linha-campos { grid-template-columns: 1fr; } }

/* ---------- Opções em lista (radio) ---------- */
.opcoes { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Atualizado / refresh ---------- */
#atualizado { font-size: .74rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 720px) { #atualizado { display: none; } }

/* ---------- Abas ---------- */
.abas { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.aba { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font-weight: 600; font-size: .85rem; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; }
.aba:hover { border-color: var(--blue); color: var(--text); }
.aba.ativa { background: var(--blue); border-color: var(--blue); color: #fff; }
.aba .n { background: rgba(0,0,0,.12); border-radius: 99px; padding: 1px 7px; font-size: .72rem; }
.aba.ativa .n { background: rgba(255,255,255,.28); }

/* ---------- Filtros ---------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filtros .campo { min-width: 140px; }
.filtros .campo input, .filtros .campo select { min-height: 40px; }
.atalhos { display: flex; gap: 6px; flex-wrap: wrap; }
.atalho { border: 1px solid var(--border); background: var(--surface); border-radius: 99px; padding: 5px 12px; font-size: .78rem;
  font-weight: 600; color: var(--muted); cursor: pointer; font-family: inherit; }
.atalho:hover { border-color: var(--blue); color: var(--blue); }
.atalho.ativo { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }

/* ---------- Tabela de relatório ---------- */
.rel-tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.rel-tabela th, .rel-tabela td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.rel-tabela th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.rel-tabela tr.clicavel { cursor: pointer; }
.rel-tabela tr.clicavel:hover { background: var(--surface2); }
.rel-num { text-align: right; font-variant-numeric: tabular-nums; }
.rel-detalhe td { background: var(--surface2); font-size: .84rem; }
.rel-detalhe .mini { color: var(--muted); }

/* ---------- Cartões de resumo ---------- */
.resumo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.resumo-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.resumo-card .n { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.resumo-card .l { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.resumo-card.destaque { background: linear-gradient(135deg, var(--navy), #1E40AF); border-color: transparent; color: #fff; }
.resumo-card.destaque .l { color: #BFD0EA; }

/* ---------- Estados do calendário ---------- */
.cal-dia { font-family: inherit; width: 100%; padding: 0; color: var(--text); }
.cal-dia:disabled { cursor: default; }
.cal-bloq { background: repeating-linear-gradient(135deg, var(--surface2), var(--surface2) 5px, transparent 5px, transparent 10px); color: var(--muted); }
.cal-bloq:hover { border-color: var(--red); }
.cal-ocup { border-color: var(--amber); color: var(--amber); font-weight: 700; }
.cal-ocup.cal-aprov { border-color: var(--green); }
.cal-sel { color: #fff; }
.cal-dia[aria-pressed="true"] { outline: 2px solid var(--blue); outline-offset: -2px; }
.cal-legenda .lg-bloq { color: var(--muted); }
.cal-legenda .lg-ocup { color: var(--amber); }

/* ---------- Menu "Mais" ---------- */
.menu-mais { display: flex; flex-direction: column; gap: 6px; }
.menu-mais button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600;
  font-size: .9rem; cursor: pointer; text-align: left; }
.menu-mais button:hover { border-color: var(--blue); background: var(--blue-soft); }
.menu-mais button .ic { color: var(--blue); }
.menu-mais .sub { display: block; font-size: .76rem; color: var(--muted); font-weight: 400; }

/* ---------- Botão carregando ---------- */
.btn.carregando { position: relative; color: transparent !important; pointer-events: none; }
.btn.carregando::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: girar .7s linear infinite; }
.btn-ghost.carregando::after, .btn-link.carregando::after { border-color: rgba(37,99,235,.35); border-top-color: var(--blue); }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Estado vazio melhorado ---------- */
.vazio-box { text-align: center; padding: 26px 16px; color: var(--muted); }
.vazio-box .ic { width: 34px; height: 34px; color: var(--border); margin-bottom: 6px; }
.vazio-box .t { font-weight: 700; color: var(--text); margin-bottom: 4px; font-size: .95rem; }
.vazio-box .d { font-size: .85rem; max-width: 380px; margin: 0 auto 12px; }

/* ---------- Selo / etiqueta ---------- */
.selo { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; padding: 3px 9px;
  border-radius: 99px; background: var(--surface2); color: var(--muted); text-transform: none; letter-spacing: 0; }
.selo.azul { background: var(--blue-soft); color: var(--blue); }
.selo.verde { background: var(--green-soft); color: var(--green); }
.selo.ambar { background: var(--amber-soft); color: var(--amber); }

/* ---------- Item de lista com ações ---------- */
.item .acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.item .sub2 { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.item.linha-troca { border-left-color: var(--blue); }
.item.linha-canc { border-left-color: var(--amber); }

/* ---------- Toast (novo, com aria-live) ---------- */
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(90px + env(safe-area-inset-bottom, 0px)); background: #0F172A; color: #fff;
  padding: 11px 18px; border-radius: 12px; z-index: 400; max-width: 90vw; font-size: .88rem; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; box-shadow: 0 10px 30px rgba(0,0,0,.35); text-align: center; }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(-4px); }
#toast.erro { background: #7F1D1D; }
#toast.ok { background: #14532D; }
@media (max-width: 860px) { #toast { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Impressão ---------- */
@media print {
  body.imprimindo .sidebar, body.imprimindo .topbar, body.imprimindo .pub-top, body.imprimindo .filtros,
  body.imprimindo .atalhos, body.imprimindo .btn, body.imprimindo .abas, body.imprimindo .no-print { display: none !important; }
  body.imprimindo .page { padding: 0; max-width: none; }
  body.imprimindo .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  body.imprimindo .sec { display: none !important; }
  body.imprimindo .sec.ativa { display: flex !important; }
  body.imprimindo { background: #fff; }
  @page { margin: 14mm; size: A4; }
}

/* ---------- Seletor de período (calendário com intervalo) ---------- */
.sel-periodo { display: flex; flex-direction: column; gap: 10px; }
.sel-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sel-titulo { font-weight: 700; font-size: .9rem; text-align: center; }
.sel-cal { width: 100%; }
.cal-grid.mini { gap: 3px; }
.cal-dia.mini { min-height: 36px; font-size: .78rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.cal-dia.mini:hover { border-color: var(--blue); }
.cal-dia.mini.cal-range { background: var(--blue-soft); color: var(--blue); border-color: var(--blue-soft); }
.cal-dia.mini.cal-range-start { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 700; border-radius: 8px 0 0 8px; }
.cal-dia.mini.cal-range-end { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 700; border-radius: 0 8px 8px 0; }
.cal-dia.mini.cal-range-start.cal-range-end { border-radius: 8px; }
.sel-resumo { background: var(--surface2); border-radius: 10px; padding: 10px 12px; font-size: .85rem; color: var(--muted); }
.sel-resumo b { color: var(--text); }
@media (max-width: 560px) {
  .cal-dia.mini { min-height: 34px; font-size: .72rem; }
}

/* ---------- Chips de períodos salvos ---------- */
#periodosSalvos .chip { gap: 4px; }
#periodosSalvos .chip .x { color: var(--muted); }
#periodosSalvos .chip .x:hover { color: var(--blue); }

/* ============================================================
   RELATÓRIO PROFISSIONAL — documento pronto para imprimir / PDF
   ============================================================ */
.rel-doc { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px; }
.rel-cab { border-bottom: 2px solid var(--navy); padding-bottom: 16px; margin-bottom: 20px; }
.rel-cab-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rel-cab h2 { font-size: 1.3rem; letter-spacing: -.02em; }
.rel-cab .sub { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.rel-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.rel-meta > div { background: var(--surface2); border-radius: 10px; padding: 9px 12px; }
.rel-meta span { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rel-meta b { font-size: .9rem; }

.rel-secao { margin-top: 22px; }
.rel-secao > h4 { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  border-left: 3px solid var(--blue); padding-left: 8px; margin-bottom: 10px; }

.rel-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.rel-tabela th { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.rel-tabela td { padding: 10px; border-bottom: 1px solid var(--border); }
.rel-tabela tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface2) 55%, transparent); }
.rel-tabela tbody tr.clicavel:hover { background: var(--blue-soft); }
.rel-tabela .rel-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rel-tabela tfoot td { font-weight: 800; background: var(--surface2); border-top: 2px solid var(--navy); border-bottom: none; }
.rel-tabela .rel-sub { font-size: .74rem; color: var(--muted); font-weight: 400; }
.rel-tabela .rel-pct { color: var(--muted); font-variant-numeric: tabular-nums; }
.rel-seta { color: var(--muted); font-size: .75rem; display: inline-block; transition: transform .15s; }
.rel-tabela tr[data-aberto="1"] .rel-seta { transform: rotate(90deg); }
.rel-detalhe-bloco { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; margin: 8px 0 14px; overflow: hidden; }
.rel-detalhe-cab { padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: .86rem;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rel-detalhe-tabela { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rel-detalhe-tabela th { font-size: .64rem; }
.rel-detalhe-tabela td { padding: 7px 12px; }
.rel-detalhe-tabela tbody tr:nth-child(even) { background: transparent; }

.rel-rodape { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); }
.rel-assinas { display: flex; gap: 34px; flex-wrap: wrap; margin-bottom: 18px; }
.rel-assina { flex: 1; min-width: 200px; }
.rel-assina span { display: block; font-size: .72rem; color: var(--muted); margin-bottom: 26px; }
.rel-assina b { display: block; border-top: 1px solid var(--muted); height: 1px; }
.rel-rodape small { color: var(--muted); font-size: .74rem; }

.rel-num-grande { font-size: 1.65rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.rel-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.rel-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.rel-card .l { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.rel-card .d { font-size: .72rem; color: var(--muted); margin-top: 3px; }
.rel-card.destaque { background: linear-gradient(135deg, var(--navy), #1E40AF); border-color: transparent; color: #fff; }
.rel-card.destaque .l, .rel-card.destaque .d { color: #BFD0EA; }

@media (max-width: 860px) {
  .rel-doc { padding: 16px; }
  .rel-cab h2 { font-size: 1.1rem; }
  .rel-meta { grid-template-columns: repeat(2, 1fr); }
  .rel-cards { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  body.imprimindo .rel-doc { border: 0; padding: 0; border-radius: 0; }
  body.imprimindo .rel-tabela { font-size: 10pt; }
  body.imprimindo .rel-tabela thead { display: table-header-group !important; }
  body.imprimindo .rel-tabela tr { break-inside: avoid; }
  body.imprimindo .rel-secao { break-inside: avoid; }
  body.imprimindo .rel-rodape { break-inside: avoid; }
}


/* ===== painéis com abas (Equipe e regras / Meses e registros) ===== */
.painel-aba { display: none; flex-direction: column; gap: 18px; }
.painel-aba.ativo { display: flex; }
.abas-painel .aba { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   Lote de UX — toast com ação, estado vazio, tour, banner,
   login confortável, fonte maior e alvos de toque maiores.
   ============================================================ */

/* ---------- Toast com ação (Desfazer) ---------- */
#toast { display: flex; align-items: center; gap: 12px; justify-content: center; }
#toast > span { text-align: left; }
.toast-acao { flex: none; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: 9px; padding: 6px 13px; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; }
.toast-acao:hover { background: rgba(255,255,255,.28); }
#toast.erro .toast-acao { background: rgba(255,255,255,.2); }

/* ---------- Estado vazio com próximo passo ---------- */
.vazio-box { text-align: center; padding: 26px 16px; color: var(--muted); }
.vazio-texto { font-size: .85rem; max-width: 420px; margin: 0 auto 12px; color: var(--muted); }
.vazio-acao { display: inline-flex; }

/* ---------- Banner de aviso (senha padrão etc.) ---------- */
.banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 16px; border-radius: 12px;
  margin-bottom: 18px; font-size: .88rem; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.banner .ic { flex: none; }
.banner > div { flex: 1; min-width: 200px; }
.banner-alerta { background: var(--amber-soft); border-color: var(--amber); color: var(--text); }
.banner-alerta .ic { color: var(--amber); }
.banner-perigo { background: var(--red-soft); border-color: var(--red); }
.banner-perigo .ic { color: var(--red); }

/* ---------- Login confortável ---------- */
.campo-senha { position: relative; display: flex; align-items: center; }
.campo-senha input { padding-right: 46px; }
.btn-ver-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  display: grid; place-items: center; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 8px; }
.btn-ver-senha:hover { background: var(--surface2); color: var(--text); }
.btn-ver-senha.on { color: var(--blue); }
.linha-check { display: flex; align-items: center; gap: 9px; font-size: .85rem; font-weight: 500; color: var(--text); margin: 12px 0 0; }
.linha-check input { width: 19px; height: 19px; flex: none; accent-color: var(--blue); margin: 0; }
.linha-check + .btn-block { margin-top: 16px; }

/* ---------- Cartão dentro de cartão ---------- */
.card-dentro { background: var(--surface2); border-style: dashed; box-shadow: none; }
.card-dentro h4 { font-size: .92rem; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.card-dentro .sub { color: var(--muted); font-size: .82rem; margin-bottom: 8px; }

/* ---------- Tour de primeiro uso ---------- */
.tour { position: fixed; inset: 0; z-index: 900; }
.tour-fundo { position: absolute; inset: 0; background: rgba(9,15,28,.55); }
.tour-box { position: absolute; background: var(--surface); border-radius: 16px; padding: 18px 20px; max-width: 340px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35); border: 1px solid var(--border); }
.tour-passo { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.tour-box h4 { font-size: 1rem; margin-bottom: 6px; }
.tour-box p { font-size: .86rem; color: var(--muted); margin-bottom: 14px; }
.tour-acoes { display: flex; gap: 8px; justify-content: flex-end; }
.tour-alvo { position: relative; z-index: 950; outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 10px; }

/* ---------- Legenda do calendário com bolinhas ---------- */
.cal-legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: .76rem; color: var(--muted); margin: 4px 0 6px; }
.cal-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid var(--border); }
.cal-legenda .lg-aprov i { background: var(--green); border-color: var(--green); }
.cal-legenda .lg-pend i { background: var(--amber); border-color: var(--amber); }
.cal-legenda .lg-sel i { background: var(--blue); border-color: var(--blue); }
.cal-legenda .lg-ocup i { background: var(--surface); border-color: var(--amber); }
.cal-legenda .lg-bloq i { background: var(--surface2); border-color: var(--border); }

/* ---------- Fonte maior ---------- */
html.fonte-grande { font-size: 18px; }
html.fonte-grande body { font-size: 1rem; }
html.fonte-grande .btn { padding: 12px 18px; }
html.fonte-grande .btn-sm { padding: 9px 13px; font-size: .84rem; }
html.fonte-grande .card h3 { font-size: 1.08rem; }
html.fonte-grande .campo-ajuda, html.fonte-grande .sub { font-size: .82rem; }
html.fonte-grande .cal-dia { font-size: 1rem; }

/* ---------- Alvos de toque maiores (celular) ---------- */
@media (max-width: 560px) {
  .btn-sm { padding: 9px 13px; font-size: .84rem; min-height: 40px; }
  .icon-btn { width: 44px; height: 44px; }
  .turno-btn { min-height: 44px; }
  .cal-dia { min-height: 44px; }
  .btn-ver-senha { width: 40px; height: 40px; }
  .item .acoes .btn { min-height: 42px; }
  .cal-dia .x, .chip .x { width: 32px; height: 32px; }
}

/* =====================================================================
   Calendário - visual mais bonito e intuitivo (escala / inclusão de plantões)
   ===================================================================== */
#calAdmin, #calUser, #calPublic, #calAdminInicio {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border); border-radius: 20px; padding: 16px 16px 18px;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
[data-theme="dark"] #calAdmin, [data-theme="dark"] #calUser, [data-theme="dark"] #calPublic, [data-theme="dark"] #calAdminInicio {
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.cal-head { padding: 4px 4px 14px; margin-bottom: 6px; align-items: center; }
.cal-titulo { font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em; text-transform: capitalize; color: var(--text); }
.cal-nav {
  width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); box-shadow: 0 2px 6px rgba(15,23,42,.06);
  transition: all .18s ease;
}
.cal-nav:hover { background: var(--blue); color: #fff; border-color: var(--blue); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(37,99,235,.25); }
.cal-nav:active { transform: scale(.94); }

.cal-grid:not(.mini) { gap: 8px; }
.cal-grid:not(.mini) .cal-dow {
  font-size: .7rem; letter-spacing: .08em; padding: 6px 0 8px; color: var(--muted); font-weight: 700;
  border-bottom: 1px solid var(--border); margin-bottom: 2px;
}
.cal-grid:not(.mini) .cal-dow:nth-child(7n+1), .cal-grid:not(.mini) .cal-dow:nth-child(7n) { color: #64748B; }

/* dia base */
.cal-grid:not(.mini) .cal-dia {
  position: relative; min-height: 60px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--border); font-weight: 650; font-size: 1rem; font-variant-numeric: tabular-nums;
  color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
  padding-top: 2px;
}
.cal-grid:not(.mini) .cal-dia:hover { transform: translateY(-2px); border-color: rgba(37,99,235,.45); box-shadow: 0 8px 18px rgba(37,99,235,.12); z-index: 1; }
.cal-grid:not(.mini) .cal-dia:active { transform: scale(.97); }
.cal-grid:not(.mini) .cal-dia:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }

/* fins de semana sutis */
.cal-grid:not(.mini) .cal-dia:nth-child(7n+1), .cal-grid:not(.mini) .cal-dia:nth-child(7n) { background: color-mix(in srgb, var(--surface2) 65%, var(--surface)); }

/* hoje: anel claro e destaque */
.cal-grid:not(.mini) .cal-hoje {
  border: 2px solid #2563EB; background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%);
  color: #1D4ED8; font-weight: 800; box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 4px 12px rgba(37,99,235,.18);
}
.cal-grid:not(.mini) .cal-hoje::before {
  content: 'HOJE'; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  font-size: .48rem; letter-spacing: .08em; font-weight: 800; color: #2563EB; opacity: .9;
}
[data-theme="dark"] .cal-grid:not(.mini) .cal-hoje {
  border-color: #60A5FA; background: linear-gradient(180deg, rgba(37,99,235,.28), rgba(37,99,235,.18)); color: #BFDBFE;
  box-shadow: 0 0 0 3px rgba(96,165,250,.18), 0 4px 12px rgba(0,0,0,.25);
}
[data-theme="dark"] .cal-grid:not(.mini) .cal-hoje::before { color: #93C5FD; }

/* aprovado (verde) e pendente (âmbar) */
.cal-grid:not(.mini) .cal-aprov { background: linear-gradient(180deg, #ECFDF3 0%, #DCFCE7 100%); border-color: rgba(22,163,74,.45); color: #166534; font-weight: 700; }
.cal-grid:not(.mini) .cal-pend { background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%); border: 1.5px dashed #D97706; color: #92400E; font-weight: 700; }
.cal-grid:not(.mini) .cal-aprov::after, .cal-grid:not(.mini) .cal-pend::after { content: ''; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.cal-grid:not(.mini) .cal-pend::after { background: #F59E0B; }
[data-theme="dark"] .cal-grid:not(.mini) .cal-aprov { background: rgba(22,163,74,.18); color: #86EFAC; border-color: rgba(34,197,94,.45); }
[data-theme="dark"] .cal-grid:not(.mini) .cal-pend { background: rgba(245,158,11,.16); color: #FCD34D; border-color: rgba(251,191,36,.55); }

/* dia e noite com presença (azul) */
.cal-grid:not(.mini) .cal-dianoite {
  background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%);
  border-color: rgba(37,99,235,.65); color: #1D4ED8; font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 4px 12px rgba(37,99,235,.12);
}
.cal-grid:not(.mini) .cal-dianoite::after { background: #2563EB !important; }
[data-theme="dark"] .cal-grid:not(.mini) .cal-dianoite { background: linear-gradient(180deg, rgba(37,99,235,.32), rgba(37,99,235,.18)); color: #BFDBFE; border-color: rgba(96,165,250,.65); }

/* falta de colaborador/presença */
.cal-grid:not(.mini) .cal-falta:not(.cal-aprov):not(.cal-pend):not(.cal-dianoite) { background: linear-gradient(180deg, #FFF1F2 0%, #FFE4E6 100%); border-color: rgba(225,29,72,.5); color: #9F1239; }
.cal-grid:not(.mini) .cal-falta.cal-aprov, .cal-grid:not(.mini) .cal-falta.cal-pend, .cal-grid:not(.mini) .cal-falta.cal-dianoite {
  box-shadow: inset 0 -4px 0 #E11D48;
}
.cal-grid:not(.mini) .cal-falta::before {
  content: '!'; position: absolute; top: 6px; left: 7px; width: 16px; height: 16px; border-radius: 50%;
  background: #E11D48; color: #fff; font-size: .62rem; font-weight: 800; display: grid; place-items: center; line-height: 1;
}
.cal-grid:not(.mini) .cal-hoje.cal-falta::before { bottom: 18px; top: auto; left: 6px; }
.cal-tag-falta { color: #BE123C; font-weight: 800; background: rgba(225,29,72,.1); border-radius: 6px; padding: 1px 5px; font-size: .58rem; }
[data-theme="dark"] .cal-grid:not(.mini) .cal-falta:not(.cal-aprov):not(.cal-pend):not(.cal-dianoite) { background: rgba(225,29,72,.16); color: #FDA4AF; border-color: rgba(251,113,133,.5); }
[data-theme="dark"] .cal-tag-falta { color: #FDA4AF; background: rgba(225,29,72,.22); }

/* selecionado */
.cal-grid:not(.mini) .cal-sel {
  background: linear-gradient(145deg, #3B82F6, #1D4ED8); border-color: #1D4ED8; color: #fff;
  box-shadow: 0 10px 22px rgba(37,99,235,.35); transform: translateY(-1px) scale(1.03); z-index: 2;
}
.cal-grid:not(.mini) .cal-sel:hover { transform: translateY(-2px) scale(1.04); }
.cal-grid:not(.mini) .cal-sel::after { background: #fff !important; border-color: #fff; }
.cal-grid:not(.mini) .cal-sel .cal-tag, .cal-grid:not(.mini) .cal-sel .cal-tag-falta { color: #fff; background: rgba(255,255,255,.2); }
.cal-grid:not(.mini) .cal-dia[aria-pressed="true"]:not(.cal-sel) { outline: 2px solid var(--blue); outline-offset: -2px; }

/* vaga preenchida / bloqueado / passado */
.cal-grid:not(.mini) .cal-ocup { background: var(--surface); border: 1.5px solid #F59E0B; color: #B45309; }
.cal-grid:not(.mini) .cal-ocup.cal-aprov { border-color: #16A34A; color: #15803D; }
.cal-grid:not(.mini) .cal-bloq { background: repeating-linear-gradient(135deg, var(--surface2), var(--surface2) 6px, var(--surface) 6px, var(--surface) 12px); color: var(--muted); font-weight: 500; opacity: .85; }
.cal-grid:not(.mini) .cal-bloq:hover { border-color: #EF4444; box-shadow: none; transform: none; }
.cal-grid:not(.mini) .cal-past { opacity: .42; box-shadow: none; filter: saturate(.7); }
.cal-grid:not(.mini) .cal-past:hover { transform: none; box-shadow: none; border-color: var(--border); }
.cal-grid:not(.mini) .cal-tag { font-size: .58rem; margin-top: 4px; font-weight: 800; letter-spacing: .02em; }

/* legenda em chips */
.cal-legenda { gap: 8px; margin: 10px 0 14px; }
.cal-legenda span {
  padding: 5px 12px 5px 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; font-weight: 600; font-size: .75rem; color: var(--text);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.cal-legenda span:has(> i)::before { display: none; }
.cal-legenda i { width: 12px; height: 12px; border-radius: 4px; }
.cal-legenda .lg-aprov i { background: #DCFCE7; border: 1.5px solid #16A34A; }
.cal-legenda .lg-pend i { background: #FEF3C7; border: 1.5px dashed #D97706; }
.cal-legenda .lg-sel i { background: #2563EB; border-color: #1D4ED8; }
.cal-legenda .lg-ocup i { background: #FFFBEB; border: 1.5px solid #F59E0B; }
.cal-legenda .lg-bloq i { background: repeating-linear-gradient(135deg, #E5E7EB, #E5E7EB 2px, #F9FAFB 2px, #F9FAFB 4px); border: 1px solid #D1D5DB; }
.cal-legenda .lg-falta i { background: #FFF1F2; border: 1.5px solid #E11D48; }
.cal-legenda .lg-dianoite i { background: #DBEAFE; border: 1.5px solid #2563EB; }

@media (max-width: 560px) {
  #calAdmin, #calUser, #calPublic, #calAdminInicio { padding: 12px 10px 14px; border-radius: 16px; }
  .cal-grid:not(.mini) { gap: 6px; }
  .cal-grid:not(.mini) .cal-dia { min-height: 52px; border-radius: 12px; font-size: .95rem; }
  .cal-grid:not(.mini) .cal-hoje::before { font-size: .45rem; bottom: 3px; }
  .cal-titulo { font-size: 1.08rem; }
}


/* "Só os meus plantões" como botão-pílula */
#sec-calendario .linha-check { padding: 8px 14px 8px 11px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface2); cursor: pointer; transition: background .15s, border-color .15s; }
#sec-calendario .linha-check:hover { border-color: var(--blue); }
#sec-calendario .linha-check:has(input:checked) { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); font-weight: 600; }

@media (max-width: 560px) {
  #calAdmin, #calUser, #calPublic { padding: 10px 8px 12px; border-radius: 16px; }
  .cal-grid:not(.mini) { gap: 5px; }
  .cal-grid:not(.mini) .cal-dia { min-height: 48px; border-radius: 11px; font-size: .92rem; }
  .cal-grid:not(.mini) .cal-aprov::after, .cal-grid:not(.mini) .cal-pend::after { top: 5px; right: 5px; width: 6px; height: 6px; }
  .cal-titulo { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-grid:not(.mini) .cal-dia, .cal-nav { transition: none; }
  .cal-grid:not(.mini) .cal-dia:hover, .cal-grid:not(.mini) .cal-sel { transform: none; }
}