/* ============================================================
   Centro Cirúrgico (out/2026) — complementos do mc-modulo.css (prefixo cc-).
   Só o que a fundação mm-* não cobre: a grade sala × horário do mapa
   (cartões posicionados pelo horário, faixas para sobreposição, linha do
   "agora"), a semana sala × dia, o roteiro de fases do modal, o painel
   "próximo passo", o checklist OMS e a folha de gastos.
   Tudo com os tokens --p-* (claro/escuro herdados de .mm/.mm-layer).
   ============================================================ */

/* Cor de cada fase como variável (para --ev, faixas e pontos) */
.cc-f-pink   { --fase: var(--p-pink); }
.cc-f-blue   { --fase: var(--p-blue-light); }
.cc-f-teal   { --fase: var(--p-teal); }
.cc-f-yellow { --fase: var(--p-yellow); }
.cc-f-orange { --fase: var(--p-orange); }
.cc-f-green  { --fase: var(--p-green); }
.cc-f-purple { --fase: var(--p-purple); }
.cc-f-gray   { --fase: var(--p-faint); }
.cc-f-red    { --fase: var(--p-red); }

/* ---------------- Grade sala × horário (dia) ---------------- */
.cc-grade { --sala-w: 168px; --lane-h: 60px; position: relative; }
.cc-grade-scroll { overflow-x: auto; border-radius: 0 0 14px 14px; }
.cc-grade-inner { min-width: 1100px; }
.cc-grade-head { display: flex; position: sticky; top: 0; z-index: 4; background: var(--p-soft); border-bottom: 1px solid var(--p-border); }
.cc-grade-corner {
    width: var(--sala-w); flex: none; padding: 8px 12px; border-right: 1px solid var(--p-border);
    font-size: .62rem; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--p-faint);
    display: flex; align-items: center;
}
.cc-grade-horas { flex: 1; display: flex; min-width: 0; }
.cc-grade-hora {
    flex: 1; min-width: 0; padding: 8px 0 8px 6px; border-left: 1px solid var(--p-border-soft);
    font-family: var(--p-mono); font-size: .68rem; font-weight: 800; color: var(--p-muted);
}
.cc-grade-hora.atual { color: var(--p-red); }
.cc-grade-row { display: flex; border-bottom: 1px solid var(--p-border-soft); }
.cc-grade-row:last-child { border-bottom: 0; }
.cc-grade-sala {
    width: var(--sala-w); flex: none; padding: 10px 12px; border-right: 1px solid var(--p-border);
    background: var(--p-surface); display: flex; flex-direction: column; justify-content: center; gap: 3px;
    position: sticky; left: 0; z-index: 3;
}
.cc-grade-sala-nome { font-size: .86rem; font-weight: 800; color: var(--p-ink); letter-spacing: -.2px; line-height: 1.2; }
.cc-grade-sala-sub { font-size: .64rem; font-weight: 600; color: var(--p-faint); }
.cc-grade-sala .mm-progress { height: 5px; margin-top: 3px; }
.cc-grade-track {
    flex: 1; position: relative; min-width: 0;
    min-height: calc(var(--lanes, 1) * var(--lane-h) + 12px);
    background: var(--p-surface);
}
.cc-grade-slots { position: absolute; inset: 0; display: flex; }
.cc-slot {
    flex: 1; min-width: 0; border: none; padding: 0; background: transparent;
    border-left: 1px solid var(--p-border-soft); position: relative; cursor: pointer;
}
.cc-slot.meia { border-left: 1px dashed color-mix(in srgb, var(--p-border-soft) 60%, transparent); }
.cc-slot.fora { background: repeating-linear-gradient(135deg, var(--p-soft) 0 6px, transparent 6px 12px); }
.cc-slot:hover { background: var(--p-blue-soft); }
.cc-slot:hover::after {
    content: "+"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--p-blue); font-size: 18px; font-weight: 700;
}
.cc-slot:disabled:hover { background: transparent; }
.cc-slot:disabled:hover::after { content: none; }
.cc-agora { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--p-red); z-index: 2; pointer-events: none; }
.cc-agora::before { content: ""; position: absolute; top: -3px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--p-red); }

/* Cartão da cirurgia na grade */
.cc-card {
    position: absolute; z-index: 1; height: calc(var(--lane-h) - 6px);
    display: flex; flex-direction: column; gap: 1px; padding: 5px 8px 4px 9px;
    border-radius: 9px; border: 1px solid color-mix(in srgb, var(--fase) 32%, var(--p-border));
    border-left: 4px solid var(--fase);
    background: color-mix(in srgb, var(--fase) 10%, var(--p-surface));
    color: var(--p-ink); text-align: left; overflow: hidden; font: inherit;
    box-shadow: var(--p-shadow-sm); transition: box-shadow .15s, transform .15s;
}
.cc-card:hover { box-shadow: var(--p-shadow); transform: translateY(-1px); z-index: 2; }
.cc-card.conflito { outline: 2px solid var(--p-red); outline-offset: -2px; }
.cc-card.apagada { opacity: .55; }
.cc-card.apagada .cc-card-pac { text-decoration: line-through; }
.cc-card-l1 { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cc-card-hr { font-family: var(--p-mono); font-size: .62rem; font-weight: 800; color: var(--p-muted); white-space: nowrap; }
.cc-card-flags { margin-left: auto; display: flex; align-items: center; gap: 3px; flex: none; }
.cc-card-flags i { font-size: 12px; color: var(--p-muted); }
.cc-card-flags i.red { color: var(--p-red); }
.cc-card-flags i.purple { color: var(--p-purple); }
.cc-card-flags i.green { color: var(--p-green); }
.cc-card-flags i.orange { color: var(--p-orange); }
.cc-card-pac { font-size: .72rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.cc-card-proc { font-size: .62rem; font-weight: 600; color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.cc-card .cc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fase); flex: none; }
.cc-card .cc-dot.pulse { animation: mmPulse 1.4s ease-in-out infinite; }
.cc-atraso { font-size: .58rem; font-weight: 800; color: var(--p-red); background: var(--p-red-soft); border-radius: 5px; padding: 0 4px; white-space: nowrap; }
/* Passo seguinte direto do cartão (um clique) */
.cc-card-go {
    position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--fase) 40%, var(--p-border)); background: var(--p-surface); color: var(--fase);
    display: none; align-items: center; justify-content: center; font-size: 13px; padding: 0;
}
.cc-card:hover .cc-card-go { display: flex; }
.cc-card-go:hover { background: var(--fase); color: #fff; }

/* Legenda das fases (clicável = filtro) */
.cc-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-legend-it {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 8px;
    border: 1px solid var(--p-border); background: var(--p-surface); color: var(--p-muted);
    font-size: .66rem; font-weight: 700; transition: all .15s;
}
.cc-legend-it .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--fase); }
.cc-legend-it:hover { border-color: var(--p-blue-line); color: var(--p-blue); }
.cc-legend-it.on { background: color-mix(in srgb, var(--fase) 12%, var(--p-surface)); border-color: var(--fase); color: var(--p-ink); }
.cc-legend-it .n { font-family: var(--p-mono); font-size: .6rem; color: var(--p-faint); }

/* ---------------- Semana (sala × dia) ---------------- */
.cc-semana td { height: 92px; }
.cc-semana .mm-ev { --ev: var(--fase); }
.cc-semana .mm-ev .hr { font-weight: 800; }
.cc-semana td .cc-dia-oc { font-size: .58rem; font-weight: 700; color: var(--p-faint); padding: 1px 4px; }
.cc-semana th.pess { min-width: 150px; width: 150px; }

/* ---------------- Mês ---------------- */
.cc-mes .mm-ev { --ev: var(--fase); }
.cc-mes-n { margin-left: auto; font-size: .62rem; font-weight: 800; color: var(--p-blue); background: var(--p-blue-soft); border-radius: 50px; padding: 0 7px; }

/* ---------------- Faixa "agora" (em curso) ---------------- */
.cc-curso { display: flex; flex-direction: column; gap: 6px; }
.cc-curso-it {
    display: grid; grid-template-columns: 4px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left;
    padding: 8px 10px 8px 0; border-radius: 11px; border: 1px solid var(--p-border); background: var(--p-surface); font: inherit; color: inherit;
}
.cc-curso-it:hover { border-color: var(--p-blue-line); background: var(--p-blue-soft); }
.cc-curso-it .barra { width: 4px; align-self: stretch; border-radius: 0 4px 4px 0; background: var(--fase); }
.cc-curso-tempo { font-family: var(--p-mono); font-size: .74rem; font-weight: 800; color: var(--p-ink); text-align: right; }
.cc-curso-tempo small { display: block; font-family: var(--p-font); font-size: .58rem; font-weight: 700; color: var(--p-faint); }

/* ---------------- Modal da cirurgia ---------------- */
.cc-roteiro { display: flex; align-items: stretch; gap: 0; }
.cc-rt {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative;
    padding: 0 2px; text-align: center;
}
.cc-rt::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--p-border); z-index: 0; }
.cc-rt:first-child::before { display: none; }
.cc-rt.feito::before { background: var(--p-green); }
.cc-rt.atual::before { background: linear-gradient(90deg, var(--p-green), var(--fase)); }
.cc-rt-dot {
    width: 30px; height: 30px; border-radius: 50%; position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    background: var(--p-surface); border: 2px solid var(--p-border); color: var(--p-faint);
}
.cc-rt.feito .cc-rt-dot { background: var(--p-green); border-color: var(--p-green); color: #fff; }
.cc-rt.atual .cc-rt-dot { background: color-mix(in srgb, var(--fase) 14%, var(--p-surface)); border-color: var(--fase); color: var(--fase); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fase) 16%, transparent); }
.cc-rt-lbl { font-size: .62rem; font-weight: 800; color: var(--p-muted); line-height: 1.2; }
.cc-rt.atual .cc-rt-lbl { color: var(--p-ink); }
.cc-rt-hr { font-family: var(--p-mono); font-size: .6rem; font-weight: 700; color: var(--p-faint); min-height: 12px; }

.cc-proximo {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: 14px;
    background: color-mix(in srgb, var(--fase) 8%, var(--p-surface)); border: 1px solid color-mix(in srgb, var(--fase) 30%, var(--p-border));
}
.cc-proximo-lbl { font-size: .6rem; font-weight: 800; letter-spacing: 1px; color: var(--p-faint); text-transform: uppercase; }
.cc-proximo-txt { font-size: .74rem; color: var(--p-text); }
.cc-hora {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 6px 0 10px; border-radius: 10px;
    border: 1px solid var(--p-border); background: var(--p-surface);
}
.cc-hora i { color: var(--p-faint); font-size: 16px; }
.cc-hora input { border: none; background: transparent; color: var(--p-ink); font-family: var(--p-mono); font-size: .92rem; font-weight: 800; width: 86px; }
.cc-hora input:focus { outline: none; }
.cc-hora .agora { border: none; background: var(--p-soft2); color: var(--p-muted); font-size: .62rem; font-weight: 800; border-radius: 7px; height: 26px; padding: 0 7px; }
.cc-hora .agora:hover { color: var(--p-blue); background: var(--p-blue-soft); }
.cc-go {
    height: 40px; padding: 0 16px; border-radius: 11px; border: none;
    background: var(--fase); color: #fff; font-size: .8rem; font-weight: 800;
    display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 10px 22px -12px var(--fase);
}
.cc-go i { font-size: 18px; }
.cc-go:hover:not(:disabled) { filter: brightness(1.07); }
.cc-go:disabled { opacity: .55; }

.cc-etapas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cc-etapa {
    display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; text-align: left;
    border: 1px solid var(--p-border); background: var(--p-surface); font: inherit; color: inherit; transition: all .15s;
}
.cc-etapa:hover { border-color: var(--p-blue-line); background: var(--p-blue-soft); }
.cc-etapa-ico { width: 32px; height: 32px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--p-soft2); color: var(--p-muted); }
.cc-etapa.ok .cc-etapa-ico { background: var(--p-green-soft); color: var(--p-green); }
.cc-etapa.parcial .cc-etapa-ico { background: var(--p-yellow-soft); color: var(--p-yellow); }
.cc-etapa.alerta { border-color: var(--p-red-line); }
.cc-etapa.alerta .cc-etapa-ico { background: var(--p-red-soft); color: var(--p-red); }
.cc-etapa-tit { font-size: .76rem; font-weight: 800; color: var(--p-ink); line-height: 1.25; }
.cc-etapa-sub { font-size: .64rem; font-weight: 600; color: var(--p-faint); margin-top: 1px; }
.cc-etapa.alerta .cc-etapa-sub { color: var(--p-red); }
.cc-etapa-st { margin-left: auto; font-size: 16px; color: var(--p-border-strong); flex: none; }
.cc-etapa.ok .cc-etapa-st { color: var(--p-green); }
.cc-etapa.parcial .cc-etapa-st { color: var(--p-yellow); }

.cc-equipe { display: flex; flex-direction: column; gap: 6px; }
.cc-equipe-it { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cc-equipe-papel { font-size: .58rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--p-faint); }

.cc-tempos { display: flex; flex-direction: column; }
.cc-tempo { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--p-border); }
.cc-tempo:last-child { border-bottom: 0; }
.cc-tempo i { font-size: 15px; color: var(--p-faint); }
.cc-tempo.ok i { color: var(--p-green); }
.cc-tempo-lbl { font-size: .72rem; font-weight: 700; color: var(--p-text); }
.cc-tempo-hr { font-family: var(--p-mono); font-size: .76rem; font-weight: 800; color: var(--p-ink); }
.cc-tempo-hr.vazio { color: var(--p-border-strong); }
.cc-durs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }

/* ---------------- Agendamento ---------------- */
.cc-salas-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.cc-sala-opt { align-items: stretch !important; }
.cc-sala-opt .mm-opt-sub { display: flex; gap: 4px; flex-wrap: wrap; }
.cc-membro { display: grid; grid-template-columns: 150px 1fr 30px; gap: 8px; align-items: center; }
.cc-membro + .cc-membro { margin-top: 6px; }
.cc-membro-papel { font-size: .66rem; font-weight: 800; color: var(--p-muted); text-transform: uppercase; letter-spacing: .5px; }
.cc-membro-papel .prmd-req { margin-left: 2px; }
.cc-sug { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cc-sug button {
    border: 1px dashed var(--p-border-strong); background: transparent; color: var(--p-muted);
    border-radius: 50px; padding: 1px 8px; font-size: .62rem; font-weight: 700;
}
.cc-sug button:hover { border-style: solid; border-color: var(--p-blue-line); color: var(--p-blue); background: var(--p-blue-soft); }
.cc-livre {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; color: inherit;
    padding: 7px 10px; border-radius: 10px; border: 1px solid var(--p-green-line); background: var(--p-green-soft);
}
.cc-livre:hover { filter: brightness(.97); }
.cc-livre b { color: var(--p-green); font-family: var(--p-mono); }
.cc-livre .mm-flex1 { font-size: .72rem; font-weight: 600; color: var(--p-text); }
.cc-conf { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: .72rem; font-weight: 600; line-height: 1.45;
    background: var(--tom-soft); border: 1px solid var(--tom-line); color: var(--p-text); }
.cc-conf > i { color: var(--tom); font-size: 15px; flex: none; margin-top: 1px; }
.cc-dur-sug { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: .64rem; font-weight: 600; color: var(--p-faint); }
.cc-dur-sug button { border: none; background: var(--p-blue-soft); color: var(--p-blue); border-radius: 6px; padding: 1px 7px; font-size: .62rem; font-weight: 800; }

/* ---------------- Checklist OMS ---------------- */
.cc-ck-fases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cc-ck-fase {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; text-align: left;
    border: 1.5px solid var(--p-border); background: var(--p-surface); font: inherit; color: inherit;
}
.cc-ck-fase.on { border-color: var(--p-blue-light); background: var(--p-blue-soft); }
.cc-ck-fase.ok { border-color: var(--p-green-line); }
.cc-ck-fase .n { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; background: var(--p-soft2); color: var(--p-muted); }
.cc-ck-fase.on .n { background: var(--p-blue-light); color: #fff; }
.cc-ck-fase.ok .n { background: var(--p-green); color: #fff; }
.cc-ck-fase-tit { font-size: .78rem; font-weight: 800; color: var(--p-ink); line-height: 1.2; }
.cc-ck-fase-sub { font-size: .62rem; font-weight: 600; color: var(--p-faint); }
.cc-ck-itens { display: flex; flex-direction: column; gap: 6px; }
.cc-ck-it {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; width: 100%; text-align: left;
    border: 1px solid var(--p-border); background: var(--p-surface); font: inherit; color: inherit; transition: all .14s;
}
.cc-ck-it:hover:not(:disabled) { border-color: var(--p-blue-line); }
.cc-ck-it.on { border-color: var(--p-green-line); background: var(--p-green-soft); }
.cc-ck-it:disabled { cursor: default; }
.cc-ck-box {
    width: 22px; height: 22px; border-radius: 7px; flex: none; margin-top: 1px;
    border: 2px solid var(--p-border-strong); display: flex; align-items: center; justify-content: center; color: transparent; font-size: 15px;
}
.cc-ck-it.on .cc-ck-box { background: var(--p-green); border-color: var(--p-green); color: #fff; }
.cc-ck-txt { flex: 1; min-width: 0; }
.cc-ck-tit { font-size: .78rem; font-weight: 700; color: var(--p-ink); line-height: 1.35; }
.cc-ck-opc { font-size: .6rem; font-weight: 800; color: var(--p-faint); letter-spacing: .4px; text-transform: uppercase; margin-left: 6px; }
.cc-ck-extra { margin-top: 6px; }

/* ---------------- Folha de gastos ---------------- */
.cc-gasto { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--p-border); background: var(--p-surface); flex-wrap: wrap; }
.cc-gasto.on { border-color: var(--p-green-line); background: var(--p-green-soft); }
.cc-gasto-nome { font-size: .76rem; font-weight: 700; color: var(--p-ink); flex: 1; min-width: 180px; }
.cc-var { display: inline-flex; align-items: center; gap: 2px; border-radius: 8px; border: 1px solid var(--p-border); background: var(--p-surface); overflow: hidden; }
.cc-var.on { border-color: var(--p-green); }
.cc-var > button { border: none; background: transparent; color: var(--p-muted); font-size: .66rem; font-weight: 800; padding: 3px 8px; }
.cc-var.on > button.lbl { background: var(--p-green); color: #fff; }
.cc-qtd { display: inline-flex; align-items: center; border: 1px solid var(--p-border); border-radius: 8px; overflow: hidden; background: var(--p-surface); }
.cc-qtd button { border: none; background: transparent; width: 26px; height: 26px; color: var(--p-muted); font-weight: 800; }
.cc-qtd button:hover { background: var(--p-blue-soft); color: var(--p-blue); }
.cc-qtd span { min-width: 26px; text-align: center; font-family: var(--p-mono); font-size: .74rem; font-weight: 800; color: var(--p-ink); }

/* ---------------- Aldrete ---------------- */
.cc-ald { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; align-items: center; }
.cc-ald-lbl { font-size: .68rem; font-weight: 800; color: var(--p-muted); }
.cc-ald-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.cc-ald-opt {
    border: 1px solid var(--p-border); background: var(--p-surface); border-radius: 9px; padding: 5px 7px; text-align: left;
    font-size: .62rem; font-weight: 600; color: var(--p-text); line-height: 1.3; display: flex; gap: 6px; align-items: flex-start;
}
.cc-ald-opt b { font-family: var(--p-mono); font-size: .74rem; color: var(--p-muted); }
.cc-ald-opt.on { border-color: var(--p-blue-light); background: var(--p-blue-soft); }
.cc-ald-opt.on b { color: var(--p-blue); }
.cc-ald-total { font-size: 1.6rem; font-weight: 800; font-family: var(--p-mono); color: var(--tom); }

/* ---------------- Guia ---------------- */
.cc-guia-passo { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.cc-guia-n { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-weight: 800; background: var(--p-grad-primary); color: #fff; }
.cc-guia-txt { font-size: .78rem; color: var(--p-text); line-height: 1.6; }
.cc-guia-txt b { color: var(--p-ink); }
.cc-kbd { font-family: var(--p-mono); font-size: .66rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--p-soft2); border: 1px solid var(--p-border); color: var(--p-ink); }

@media print {
    .cc-slot:hover { background: transparent; }
    .cc-card-go { display: none !important; }
}