/* ==========================================================================
   KONIO ARENA — Área do Cliente
   Complementa admin.css (mesma base visual), com o verde esportivo em destaque.
   ========================================================================== */

:root {
  --kc-sidebar-w: 264px;
  --kc-green-strong: #06b774;
  --kc-green-soft: #e6fbf3;
  --kc-gradient: linear-gradient(135deg, #0bd68c 0%, #06b774 55%, #067a7f 100%);
  --kc-topbar-h: 64px;
}

.text-muted-ka { color: var(--ka-muted) !important; }
.min-w-0 { min-width: 0; }

/* Botão principal verde na área do cliente */
.kc-body .btn-ka { background: var(--kc-gradient); color: #04261a; box-shadow: 0 6px 16px -6px rgba(6, 183, 116, .55); }
.kc-body .btn-ka:hover, .kc-body .btn-ka:focus { color: #04261a; }
.kc-body .form-control:focus, .kc-body .form-select:focus { border-color: var(--ka-green); box-shadow: 0 0 0 .2rem rgba(11, 214, 140, .18); }
.kc-body .form-check-input:checked { background-color: var(--kc-green-strong); border-color: var(--kc-green-strong); }
.kc-body .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(11, 214, 140, .2); border-color: var(--ka-green); }
.kc-body .page-link { color: var(--ka-text); }

/* ---------- Estrutura ---------- */
.kc-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.kc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kc-content { padding: 0 1rem 3rem; width: 100%; max-width: 1320px; margin: 0 auto; }
@media (min-width: 768px) { .kc-content { padding: 0 1.75rem 3rem; } }

/* ---------- Sidebar ---------- */
.kc-sidebar { --bs-offcanvas-width: var(--kc-sidebar-w); --bs-offcanvas-bg: var(--ka-navy); color: #c9d2e3; }
.kc-sidebar .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.kc-sidebar .offcanvas-body { display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem .9rem; }
@media (min-width: 992px) {
  .kc-aside {
    width: var(--kc-sidebar-w); flex-shrink: 0; background: var(--ka-navy);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
  }
  .kc-sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 1.25rem .9rem; }
}

.kc-brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .02em; padding: 0 .35rem; }
.kc-brand:hover { color: #fff; }
.kc-brand img { width: 34px; height: 34px; background: #fff; border-radius: 9px; padding: 3px; }
.kc-brand b { color: var(--ka-green); }
.kc-empresa {
  display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem; border-radius: 10px;
  background: rgba(255, 255, 255, .06); color: #fff; font-weight: 600; font-size: .85rem;
}
.kc-empresa i { color: var(--ka-green); }

.kc-nav { display: flex; flex-direction: column; gap: 2px; }
.kc-nav-group { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7c89a6; padding: .9rem .75rem .35rem; }
.kc-nav a {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 10px;
  color: #c9d2e3; text-decoration: none; font-weight: 600; font-size: .9rem; min-height: 44px;
}
.kc-nav a i { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .85; }
.kc-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.kc-nav a.active { background: rgba(11, 214, 140, .14); color: #fff; box-shadow: inset 3px 0 0 var(--ka-green); }
.kc-nav a.active i { color: var(--ka-green); opacity: 1; }
.kc-nav-soon { margin-top: auto; font-size: .78rem; color: #7c89a6; padding: .75rem; border: 1px dashed rgba(255, 255, 255, .12); border-radius: 10px; }

/* ---------- Topbar ---------- */
.kc-topbar {
  position: sticky; top: 0; z-index: 1020; height: var(--kc-topbar-h);
  display: flex; align-items: center; gap: .75rem; padding: 0 1rem;
  background: rgba(244, 246, 251, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ka-border);
}
@media (min-width: 768px) { .kc-topbar { padding: 0 1.75rem; } }
.kc-topbar-title { font-weight: 700; color: var(--ka-muted); font-size: .9rem; }
.kc-menu-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid var(--ka-border); font-size: 1.35rem; padding: 0; }
.kc-user::after { color: var(--ka-muted); }

.kc-trial {
  display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 1rem 0; padding: .75rem 1rem; border-radius: 12px;
  background: #fff8e6; border: 1px solid #ffe3a3; color: #6b4d00; font-size: .87rem;
}
@media (min-width: 768px) { .kc-trial { margin: 1rem 1.75rem 0; } }
.kc-trial i { color: #d99a00; margin-top: .1rem; }

/* ---------- Cabeçalho de página ---------- */
.kc-page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 1.5rem 0 1.25rem; }
.kc-page-header h1 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); font-weight: 800; margin: 0; letter-spacing: -.01em; }
.kc-page-header .btn { min-height: 44px; }
.kc-back { display: inline-flex; align-items: center; gap: .35rem; font-size: .83rem; font-weight: 600; color: var(--ka-muted); text-decoration: none; margin-bottom: .35rem; }
.kc-back:hover { color: var(--ka-text); }
@media (max-width: 575.98px) {
  .kc-page-header > .btn, .kc-page-header > a.btn { width: 100%; }
}

/* ---------- Listagens ---------- */
.kc-search { width: 100%; max-width: 320px; }
@media (max-width: 575.98px) { .kc-search { max-width: none; } }
.kc-row-inativo td { opacity: .6; }
.kc-badge-inativo { background: #f1f3f7; color: #667085; }
.kc-badge-padrao { background: #eef4ff; color: #3559c7; }
.kc-link { text-decoration: none; color: inherit; font-weight: 600; }
.kc-link:hover { color: var(--kc-green-strong); }
.kc-nome { font-weight: 700; color: var(--ka-text); }
.kc-sub { font-size: .8rem; color: var(--ka-muted); }
.kc-bank-icon { width: 32px; height: 32px; border-radius: 9px; object-fit: contain; background: #fff; border: 1px solid var(--ka-border); padding: 3px; flex-shrink: 0; }
.kc-bank-icon.ph { display: inline-grid; place-items: center; color: var(--ka-muted); font-size: 1rem; }
.kc-tipo-receita { background: #e5faf2; color: #067a55; }
.kc-tipo-despesa { background: #fdecec; color: #b42328; }
@media (max-width: 767.98px) {
  .ka-table td.ka-actions .btn { min-height: 40px; }
}

/* ---------- Formulários ---------- */
.kc-form .form-control, .kc-form .form-select { min-height: 46px; }
.kc-form textarea.form-control { min-height: 0; }
.kc-form-footer {
  display: flex; justify-content: flex-end; gap: .5rem; padding: .9rem 1.25rem;
  border-top: 1px solid var(--ka-border); background: #fafbfd; border-radius: 0 0 var(--ka-radius) var(--ka-radius);
  position: sticky; bottom: 0; z-index: 5;
}
.kc-form-footer .btn { min-height: 46px; min-width: 120px; }
@media (max-width: 575.98px) {
  .kc-form-footer { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); }
  .kc-form-footer .btn { flex: 1; min-width: 0; }
}
.kc-switch { padding-top: .25rem; min-height: 32px; }
.kc-switch .form-check-input { width: 2.6em; height: 1.35em; margin-top: .1em; }
.kc-switch .form-check-label { padding-left: .35rem; }

/* ---------- Dashboard ---------- */
.kc-hello { background: var(--ka-navy); color: #fff; border-radius: 18px; padding: 1.5rem; position: relative; overflow: hidden; }
.kc-hello::after { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(11, 214, 140, .35), transparent 65%); }
.kc-hello > * { position: relative; z-index: 1; }
.kc-hello h1 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); font-weight: 800; }
.kc-hello p { color: #b7c2d6; }
.kc-tile { display: flex; gap: .9rem; align-items: center; padding: 1rem 1.1rem; height: 100%; text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; }
.kc-tile:hover { transform: translateY(-2px); border-color: rgba(11, 214, 140, .5); color: inherit; }
.kc-tile-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--kc-green-soft); color: var(--kc-green-strong); font-size: 1.2rem; flex-shrink: 0; }
.kc-tile-num { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.kc-tile-label { font-size: .8rem; color: var(--ka-muted); font-weight: 600; }
.kc-check { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 12px; border: 1px solid var(--ka-border); text-decoration: none; color: inherit; background: #fff; }
.kc-check:hover { border-color: rgba(11, 214, 140, .5); color: inherit; }
.kc-check i { font-size: 1.2rem; margin-top: .05rem; }
.kc-check.done i { color: var(--kc-green-strong); }
.kc-check.todo i { color: #c0c7d4; }
.kc-check.done .kc-check-title { text-decoration: line-through; color: var(--ka-muted); }
.kc-check-title { font-weight: 700; font-size: .92rem; }

/* ---------- Tabela de valores ---------- */
.kc-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kc-grid { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 3px; font-size: .8rem; }
.kc-grid th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ka-muted); text-align: center; padding: .35rem; font-weight: 700; }
.kc-grid th.hora { text-align: right; padding-right: .6rem; white-space: nowrap; position: sticky; left: 0; background: #fff; z-index: 1; }
.kc-grid td { text-align: center; padding: .4rem .25rem; border-radius: 7px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-rp { background: #f3f5f9; color: #667085; }
.kc-r0 { background: #dcfbef; color: #05734d; }
.kc-r1 { background: #e3edff; color: #1f4fbf; }
.kc-r2 { background: #fff1d6; color: #8a5a00; }
.kc-r3 { background: #f0e8ff; color: #5b30c9; }
.kc-r4 { background: #ffe4e6; color: #b4233c; }
.kc-r5 { background: #dff6fb; color: #0b6b82; }
.kc-r6 { background: #fce7f6; color: #9d2378; }
.kc-r7 { background: #eaf7d4; color: #4d6b0e; }
.kc-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .78rem; color: var(--ka-muted); }
.kc-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.kc-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.kc-dias { display: flex; flex-wrap: wrap; gap: .35rem; }
.kc-dias .btn { min-width: 48px; min-height: 42px; padding: .35rem .5rem; font-size: .82rem; }
.kc-dias .btn-check:checked + .btn { background: var(--kc-green-strong); border-color: var(--kc-green-strong); color: #fff; }
.kc-quick { font-size: .78rem; }
.kc-quick button { border: 0; background: none; color: var(--kc-green-strong); font-weight: 700; padding: 0 .35rem 0 0; }
.kc-tipo-regra .btn-check:checked + .btn { background: var(--ka-navy); border-color: var(--ka-navy); color: #fff; }
.kc-tipo-regra .btn { min-height: 44px; }
@media (min-width: 992px) { .kc-sticky { position: sticky; top: calc(var(--kc-topbar-h) + 1rem); } }

/* ---------- Gateway ---------- */
.kc-status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.kc-status-dot.on { background: var(--ka-green); box-shadow: 0 0 0 4px rgba(11, 214, 140, .18); }
.kc-status-dot.off { background: #c0c7d4; }
.kc-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.kc-mp-logo { height: 30px; width: auto; }

/* ---------- Financeiro ---------- */
.kc-st-aberto    { background: #eaf2ff; color: #1f4fbf; }
.kc-st-hoje      { background: #fff1d6; color: #8a5a00; }
.kc-st-vencido   { background: #fdecec; color: #b42328; }
.kc-st-pago      { background: #e5faf2; color: #067a55; }
.kc-st-cancelado { background: #f1f3f7; color: #667085; }

.kc-fin-kpi { display: flex; gap: .85rem; align-items: center; padding: 1rem 1.1rem; height: 100%; text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; }
.kc-fin-kpi:hover { transform: translateY(-2px); color: inherit; border-color: #cfd7e6; }
.kc-fin-kpi-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; flex-shrink: 0; }
.kc-fin-kpi.venc .kc-fin-kpi-icon { background: #fdecec; color: #d93036; }
.kc-fin-kpi.hoje .kc-fin-kpi-icon { background: #fff1d6; color: #b07400; }
.kc-fin-kpi.sem  .kc-fin-kpi-icon { background: #eaf2ff; color: var(--ka-blue); }
.kc-fin-kpi.mes  .kc-fin-kpi-icon { background: var(--kc-green-soft); color: var(--kc-green-strong); }
.kc-fin-kpi-texto { display: flex; flex-direction: column; min-width: 0; }
.kc-fin-kpi-label { font-size: .78rem; font-weight: 700; color: var(--ka-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-fin-kpi-valor { font-size: 1.25rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
/* Celular: ícone em cima, texto embaixo — o card ganha largura útil para o valor */
@media (max-width: 575.98px) {
  .kc-fin-kpi { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .85rem .9rem; }
  .kc-fin-kpi-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; }
  .kc-fin-kpi-valor { font-size: clamp(1rem, 4.4vw, 1.15rem); }
}
.kc-fin-filtros .form-control, .kc-fin-filtros .form-select, .kc-fin-filtros .btn { min-height: 44px; }
.kc-fin-filtros input[type="date"] { min-width: 0; }
.kc-fin-valor { white-space: nowrap; }

.kc-fin-total-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-muted); }
.kc-fin-total { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kc-tile-fin.receber .kc-tile-icon { background: var(--kc-green-soft); color: var(--kc-green-strong); }
.kc-tile-fin.pagar .kc-tile-icon { background: #fdecec; color: #d93036; }
.kc-modal-icon { background: var(--kc-green-soft); color: var(--kc-green-strong); }
.kc-form fieldset:disabled .form-control, .kc-form fieldset:disabled .form-select { background-color: #f6f7fa; }

.kc-pix-qr { width: 220px; max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--ka-border); padding: 8px; background: #fff; }
.kc-mp-mini { height: 22px; width: auto; }
.kc-pix-status.pago { color: var(--kc-green-strong); }
.kc-pix-status.final { color: var(--ka-muted); }

/* ---------- Agenda do dia ---------- */
.kc-agenda-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--ka-radius); }
.kc-agenda { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 100%; }
.kc-agenda th, .kc-agenda td { border-bottom: 1px solid #eef1f6; border-right: 1px solid #eef1f6; vertical-align: top; }
.kc-agenda thead th { position: sticky; top: 0; z-index: 3; background: #fafbfd; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ka-muted); padding: .7rem .75rem; min-width: 170px; }
.kc-agenda th.hora { width: 68px; min-width: 68px; position: sticky; left: 0; z-index: 2; background: #fff; text-align: right; font-size: .78rem; color: var(--ka-muted); font-weight: 700; padding: .45rem .6rem; font-variant-numeric: tabular-nums; }
.kc-agenda thead th.hora { z-index: 4; background: #fafbfd; }
.kc-agenda tr:not(.hora-cheia) th.hora { color: #b3bac7; font-weight: 600; }
.kc-agenda td { height: 46px; padding: 3px; }
.kc-livre a { display: flex; align-items: center; gap: .3rem; height: 100%; min-height: 38px; padding: 0 .6rem; border-radius: 8px; color: #98a2b3; font-size: .8rem; font-weight: 600; text-decoration: none; }
.kc-livre a:hover, .kc-livre a:focus { background: var(--kc-green-soft); color: var(--kc-green-strong); }
.kc-livre.passou { background: repeating-linear-gradient(-45deg, #fafbfd, #fafbfd 6px, #f4f6f9 6px, #f4f6f9 12px); }
.kc-reserva-card { height: 100%; min-height: 40px; border-radius: 10px; padding: .5rem .6rem; background: #eaf2ff; border-left: 4px solid var(--ka-blue); }
.kc-reserva.st-realizado .kc-reserva-card { background: #e5faf2; border-left-color: var(--kc-green-strong); }
.kc-reserva.st-falta .kc-reserva-card { background: #fdecec; border-left-color: #d93036; }
.kc-reserva-hora { font-size: .72rem; font-weight: 700; color: var(--ka-muted); font-variant-numeric: tabular-nums; }
.kc-reserva-cliente { display: block; font-weight: 800; color: var(--ka-text); text-decoration: none; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-reserva-cliente:hover { color: var(--kc-green-strong); }
.kc-reserva-valor { font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-right: .15rem; }
.kc-reserva .ka-badge { font-size: .66rem; padding: .18rem .45rem; }
.kc-reserva-menu { padding: .1rem .35rem; color: var(--ka-muted); }
.kc-reserva-menu:hover { background: rgba(0, 0, 0, .06); }
.kc-dia-nav input[type="date"] { min-width: 150px; }
.kc-hoje li a { padding: .55rem .25rem; border-bottom: 1px solid #eef1f6; text-decoration: none; color: inherit; }
.kc-hoje li:last-child a { border-bottom: 0; }
.kc-hoje li a:hover { background: #fafbff; }

/* ---------- Calendário do mês ---------- */
.kc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kc-cal-dow { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ka-muted); padding: .35rem 0; }
.kc-cal-dow.fds { color: #b07400; }
.kc-cal-dia {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 92px; padding: .45rem .55rem; border-radius: 12px;
  border: 1px solid var(--ka-border); background: #fff; color: var(--ka-text); text-decoration: none; transition: transform .12s, border-color .12s;
}
.kc-cal-dia:hover { border-color: var(--ka-green); transform: translateY(-1px); color: var(--ka-text); }
.kc-cal-dia.passado { opacity: .72; }
.kc-cal-dia.hoje { box-shadow: 0 0 0 2px var(--ka-green); border-color: transparent; }
.kc-cal-dia.hoje .kc-cal-num { background: var(--kc-green-strong); color: #fff; }
.kc-cal-num { font-weight: 800; font-size: .9rem; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.kc-cal-qtd { font-size: .74rem; font-weight: 700; }
.kc-cal-valor { font-size: .74rem; color: var(--ka-muted); font-variant-numeric: tabular-nums; }
.kc-cal-pago { position: absolute; top: .45rem; right: .5rem; color: var(--kc-green-strong); font-size: .85rem; }
.kc-cal-dia.n1, .kc-cal-leg.n1 { background: #effcf6; }
.kc-cal-dia.n2 { background: #d8f7e9; }
.kc-cal-dia.n3 { background: #b4efd5; }
.kc-cal-dia.n4, .kc-cal-leg.n4 { background: #86e3bb; }
.kc-cal-dia.n1, .kc-cal-dia.n2, .kc-cal-dia.n3, .kc-cal-dia.n4 { border-color: rgba(6, 183, 116, .35); }
.kc-cal-leg { border: 1px solid rgba(6, 183, 116, .35); }
@media (max-width: 575.98px) {
  .kc-cal { gap: 3px; }
  .kc-cal-dia { min-height: 58px; padding: .3rem; border-radius: 9px; align-items: center; }
  .kc-cal-num { width: 24px; height: 24px; font-size: .8rem; }
  .kc-cal-qtd { font-size: .68rem; }
  .kc-cal-qtd .bi { display: none; }
}

/* ---------- Relatórios ---------- */
.kc-rel-card { align-items: center; }
.kc-rel-table tfoot th { background: #fafbfd; border-top: 2px solid var(--ka-border); padding: .8rem 1.2rem; }
.kc-rel-grupo td { background: #f6f8fb; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ka-muted); padding: .45rem 1.2rem !important; }
.kc-rel-subtotal td { font-size: .82rem; font-weight: 700; color: var(--ka-muted); background: #fcfcfd; }
.kc-rel-barras li { margin-bottom: .55rem; }
.kc-rel-barra { height: 6px; border-radius: 4px; background: #eef1f6; overflow: hidden; margin-top: .25rem; }
.kc-rel-barra span { display: block; height: 100%; background: var(--kc-gradient); border-radius: 4px; }
@media (max-width: 767.98px) {
  .kc-rel-table tfoot, .kc-rel-table tfoot tr, .kc-rel-table tfoot th { display: block; width: 100%; text-align: left !important; }
  .kc-rel-table tfoot th:empty { display: none; }
}
.kc-print-only { display: none; }

/* ---------- Impressão ---------- */
@media print {
  @page { margin: 12mm; }
  body, .kc-body { background: #fff !important; font-size: 11px; }
  .kc-aside, .kc-topbar, .kc-trial, .d-print-none, .ka-toast-area, .dropdown, .btn { display: none !important; }
  .kc-main, .kc-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .ka-card { box-shadow: none !important; border: 1px solid #d0d5dd !important; break-inside: avoid; }
  .kc-print-only { display: flex !important; }
  .kc-print-head { justify-content: space-between; align-items: flex-end; gap: 1rem; border-bottom: 2px solid #0b1530; padding-bottom: .5rem; margin-bottom: 1rem; font-size: 12px; }
  .kc-print-head strong { font-size: 15px; }
  .kc-rel-resumo > [class*="col-"] { flex: 1 0 0; }
  .table-responsive { overflow: visible !important; }
  /* A tabela volta ao formato de tabela mesmo em papel estreito */
  .ka-table { display: table !important; width: 100%; }
  .ka-table thead { display: table-header-group !important; }
  .ka-table tbody { display: table-row-group !important; }
  .ka-table tfoot { display: table-footer-group !important; }
  .ka-table tr { display: table-row !important; page-break-inside: avoid; }
  .ka-table td, .ka-table th { display: table-cell !important; padding: .35rem .5rem !important; width: auto !important; }
  .ka-table td[data-label]::before { display: none !important; }
  .ka-badge { border: 1px solid #d0d5dd; background: transparent !important; color: #111 !important; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* ---------- Dashboard ----------
   Previsto/Realizado: rampa ordinal verde validada (validate_palette.js --ordinal, superfície #fff).
   Mapa de calor: rampa sequencial do mesmo verde (o passo mais claro = "quase zero").
   Situações: paleta de status fixa, sempre com ícone + rótulo. */
.kd-root, .kc-body {
  --kd-prev: #5cc99a;
  --kd-real: #067a55;
  --kd-cap: #3a3f47;
  --kd-grade: #eceef2;
  --kd-base: #c9ced6;
  --kd-eixo: #7a8290;
  --kd-seq-0: #f1f3f6;
  --kd-seq-1: #c9f2df;
  --kd-seq-2: #9fe3c4;
  --kd-seq-3: #5cc99a;
  --kd-seq-4: #1f9e6e;
  --kd-seq-5: #067a55;
  --kd-bom: #0ca30c;
  --kd-atencao: #fab219;
  --kd-serio: #ec835a;
  --kd-critico: #d03b3b;
  --kd-neutro: #6b7280;
  --kd-apagado: #d0d5dd;
  --kd-texto-bom: #006300;
  --kd-texto-ruim: #b42328;
}

.kd-filtro-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kd-datas { display: flex; align-items: center; gap: .5rem; }
.kd-filtros input[type="date"], .kd-filtros .form-select { width: auto; min-width: 140px; min-height: 42px; }
.kd-filtros .btn { min-height: 42px; }

.kd-tile { height: 100%; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; }
.kd-tile-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; min-width: 0; }
.kd-tile-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .95rem; flex-shrink: 0; background: var(--kc-green-soft); color: var(--kc-green-strong); }
.kd-tile.cap .kd-tile-icon, .kd-tile.tick .kd-tile-icon { background: #eef1f6; color: #3a3f47; }
.kd-tile.venc .kd-tile-icon { background: #fdecec; color: var(--kd-critico); }
.kd-tile-label { font-size: .76rem; font-weight: 700; color: var(--ka-muted); line-height: 1.25; }
.kd-tile-valor { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; overflow-wrap: anywhere; }
.kd-tile-sub { font-size: .78rem; color: var(--ka-muted); }
.kd-tile-delta { margin-top: auto; padding-top: .35rem; }
.kd-delta { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; font-weight: 700; text-decoration: none; }
.kd-delta.bom { color: var(--kd-texto-bom); }
.kd-delta.ruim { color: var(--kd-texto-ruim); }
.kd-delta.neutro { color: var(--ka-muted); font-weight: 600; }

.kd-legenda { display: flex; flex-wrap: wrap; gap: .35rem 1rem; list-style: none; margin: 0; padding: 0; font-size: .8rem; color: #475467; font-weight: 600; }
.kd-legenda li { display: inline-flex; align-items: center; gap: .4rem; }
.kd-key { display: inline-block; flex-shrink: 0; }
.kd-key.rect { width: 12px; height: 12px; border-radius: 3px; }
.kd-key.line { width: 14px; height: 0; border-top: 2px solid; border-radius: 2px; }
.kd-key.rect.prev { background: var(--kd-prev); }
.kd-key.rect.real { background: var(--kd-real); }
.kd-key.line.prev { border-color: var(--kd-prev); }
.kd-key.line.real { border-color: var(--kd-real); }
.kd-key.line.cap { border-color: var(--kd-cap); }

/* Resumo em trilho: o trilho é um passo mais claro da mesma rampa */
.kd-bullet { position: relative; height: 18px; border-radius: 6px; background: var(--kd-seq-1); overflow: hidden; }
.kd-bullet span { position: absolute; left: 0; border-radius: 0 4px 4px 0; }
.kd-bullet-prev { top: 0; bottom: 0; background: var(--kd-prev); }
.kd-bullet-real { top: 5px; bottom: 5px; background: var(--kd-real); }
.kd-bullet:focus-visible, .kd-cel:focus-visible, .kd-faixa:focus-visible, [data-tip]:focus-visible { outline: 2px solid var(--kd-cap); outline-offset: 2px; }

.kd-grafico { width: 100%; min-height: 220px; }
.kd-svg { display: block; overflow: visible; }
.kd-grade { stroke: var(--kd-grade); stroke-width: 1; shape-rendering: crispEdges; }
.kd-base { stroke: var(--kd-base); stroke-width: 1; shape-rendering: crispEdges; }
.kd-eixo { fill: var(--kd-eixo); font-size: 11px; font-variant-numeric: tabular-nums; font-family: inherit; }
.kd-eixo.hoje { fill: var(--ka-text); font-weight: 800; }
.kd-prev { fill: var(--kd-prev); }
.kd-real { fill: var(--kd-real); }
.kd-cap { stroke: var(--kd-cap); stroke-width: 2; stroke-linecap: round; }
.kd-hover { fill: transparent; }
.kd-faixa { cursor: default; outline: none; }
.kd-faixa:hover .kd-hover, .kd-faixa:focus .kd-hover { fill: rgba(16, 24, 40, .045); }

.kd-tabela summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--ka-muted); }
.kd-tabela summary:hover { color: var(--ka-text); }
.kd-tabela table { font-size: .8rem; }
.kd-tabela-calor th, .kd-tabela-calor td { padding: .25rem .35rem; }

/* Mapa de calor */
.kd-escala { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; color: var(--ka-muted); }
.kd-escala i { width: 16px; height: 12px; border-radius: 3px; display: inline-block; }
.kd-escala span { margin: 0 .25rem; }
.kd-calor-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.kd-calor { display: grid; grid-template-columns: 34px repeat(var(--kd-cols), minmax(22px, 1fr)); gap: 2px; min-width: calc(34px + var(--kd-cols) * 24px); }
.kd-calor-h { font-size: .66rem; color: var(--kd-eixo); text-align: center; font-variant-numeric: tabular-nums; }
.kd-calor-d { font-size: .72rem; font-weight: 700; color: #475467; display: flex; align-items: center; }
.kd-cel { height: 26px; border-radius: 4px; }
.kd-cel:hover { box-shadow: inset 0 0 0 2px rgba(16, 24, 40, .35); }
.kd-cel.nd { background: repeating-linear-gradient(45deg, #f6f7f9, #f6f7f9 3px, #eef0f3 3px, #eef0f3 6px); }
.n0, .kd-cel.n0 { background: var(--kd-seq-0); }
.n1, .kd-cel.n1 { background: var(--kd-seq-2); }
.n2, .kd-cel.n2 { background: var(--kd-seq-3); }
.n3, .kd-cel.n3 { background: var(--kd-seq-4); }
.n4, .kd-cel.n4 { background: var(--kd-seq-5); }
.kd-escala .n0 { box-shadow: inset 0 0 0 1px #e1e4ea; }

/* Medidores por quadra: trilho = passo claro da mesma rampa */
.kd-medidores li { padding: .55rem 0; border-bottom: 1px solid #eef1f6; }
.kd-medidores li:last-child { border-bottom: 0; }
.kd-medidor { height: 10px; border-radius: 5px; background: var(--kd-seq-1); overflow: hidden; margin: .35rem 0 .2rem; }
.kd-medidor span { display: block; height: 100%; background: var(--kd-seq-4); border-radius: 0 4px 4px 0; }

/* Barras empilhadas (parte do todo) com fresta de 2px */
.kd-pilha { display: flex; gap: 2px; height: 16px; }
.kd-pilha span { min-width: 4px; }
.kd-pilha span:first-child { border-radius: 4px 0 0 4px; }
.kd-pilha span:last-child { border-radius: 0 4px 4px 0; }
.kd-pilha span:only-child { border-radius: 4px; }
.kd-pilha span:hover { filter: brightness(1.08); }
.kd-pilha .bom { background: var(--kd-bom); }
.kd-pilha .atencao { background: var(--kd-atencao); }
.kd-pilha .critico { background: var(--kd-critico); }
.kd-pilha .serio { background: var(--kd-serio); }
.kd-pilha .neutro { background: var(--kd-neutro); }
.kd-pilha .apagado { background: var(--kd-apagado); }
.kd-ic.bom { color: var(--kd-bom); }
.kd-ic.atencao { color: #c98500; }
.kd-ic.critico { color: var(--kd-critico); }
.kd-ic.serio { color: #d4622f; }
.kd-ic.neutro { color: var(--kd-neutro); }
.kd-ic.apagado { color: #98a2b3; }
.kd-lista li { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0; font-size: .86rem; border-bottom: 1px solid #f1f3f6; }
.kd-lista li:last-child { border-bottom: 0; }
.kd-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: .75rem; border-radius: 12px; background: #f7f8fa; }
.kd-mini-grid div { display: flex; flex-direction: column; gap: .1rem; }
.kd-mini-grid strong { font-size: 1rem; }

/* Top clientes: uma série, uma cor */
.kd-top li { padding: .45rem 0; }
.kd-top-trilho { height: 8px; margin-top: .3rem; }
.kd-top-trilho span { display: block; height: 100%; background: var(--kd-real); border-radius: 0 4px 4px 0; min-width: 4px; }

/* Dica */
.kd-tip {
  position: fixed; z-index: 3000; pointer-events: none; min-width: 170px; max-width: 280px;
  background: #0b1530; color: #fff; border-radius: 10px; padding: .6rem .75rem; box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .4); font-size: .8rem;
}
.kd-tip-t { font-weight: 700; color: #c9d2e3; margin-bottom: .35rem; font-size: .76rem; }
.kd-tip-r { display: flex; align-items: center; gap: .45rem; padding: .1rem 0; }
.kd-tip-r strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.kd-tip-r span { color: #c9d2e3; margin-left: auto; padding-left: .75rem; }
.kd-tip .kd-key.line.cap { border-color: #fff; }

@media (max-width: 575.98px) {
  .kd-filtro-form { width: 100%; }
  .kd-datas { width: 100%; }
  .kd-datas input[type="date"] { flex: 1 1 0; min-width: 0; }
  .kd-filtro-form .form-select { flex: 1 1 auto; min-width: 0; }
  .kd-tile { padding: .85rem .9rem; }
}
@media print {
  .kd-tip, .kd-filtros { display: none !important; }
  .kd-tabela[open] summary { display: none; }
}

/* ---------- Horário de funcionamento ---------- */
.kc-livre.fechado { background: repeating-linear-gradient(-45deg, #f6f7f9, #f6f7f9 6px, #eef0f4 6px, #eef0f4 12px); }
.kc-cal-dia.fechado:not(.n1):not(.n2):not(.n3):not(.n4) { background: repeating-linear-gradient(-45deg, #fafbfc, #fafbfc 6px, #f3f5f8 6px, #f3f5f8 12px); }
.kc-cal-fechado { font-size: .7rem; font-weight: 600; color: var(--ka-muted); max-width: 100%; }
.kc-horarios { list-style: none; margin: 0; padding: 0; }
.kc-horarios li { display: grid; grid-template-columns: minmax(120px, 1fr) auto; align-items: center; gap: .5rem 1rem; padding: .75rem 0; border-bottom: 1px solid #eef1f6; }
.kc-horarios li:last-child { border-bottom: 0; }
.kc-horarios .kc-horas { display: flex; align-items: center; gap: .5rem; }
.kc-horarios .kc-horas select { width: 108px; }
.kc-horarios li.fechado .kc-horas { opacity: .45; }
@media (max-width: 575.98px) {
  .kc-horarios li { grid-template-columns: 1fr; }
  .kc-horarios .kc-horas select { flex: 1; width: auto; }
}

/* ---------- Meu plano ---------- */
.kc-plano-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.kc-plano-nome { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.kc-plano-preco { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-plano-preco small { font-size: .8rem; font-weight: 600; color: var(--ka-muted); }
.kc-vigencia { height: 8px; border-radius: 99px; background: #eef1f6; overflow: hidden; }
.kc-vigencia span { display: block; height: 100%; border-radius: 99px; background: var(--kc-green-strong); }
.kc-vigencia.alerta span { background: #d99a00; }
.kc-vigencia.critico span { background: #d93036; }
.kc-periodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem; }
.kc-periodos .btn { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .65rem .8rem; text-align: left; border: 1px solid var(--ka-border); }
.kc-periodos .btn-check:checked + .btn { border-color: var(--kc-green-strong); background: var(--kc-green-soft); box-shadow: 0 0 0 1px var(--kc-green-strong); }
.kc-periodos .kc-periodo-valor { font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-periodos .kc-periodo-sub { font-size: .75rem; color: var(--ka-muted); }

/* ---------- DRE ---------- */
.kc-dre { font-size: .88rem; }
.kc-dre thead th { background: #fafbfd; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ka-muted); white-space: nowrap; padding: .7rem .9rem; }
.kc-dre td, .kc-dre tbody th { padding: .5rem .9rem; white-space: nowrap; border-color: #eef1f6; }
.kc-dre .kc-dre-desc { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 240px; white-space: normal; font-weight: 600; }
.kc-dre thead .kc-dre-desc { background: #fafbfd; z-index: 2; }
.kc-dre-grupo .kc-dre-desc, .kc-dre-grupo td { font-weight: 800; }
.kc-dre-item .kc-dre-desc { padding-left: 1.6rem; }
.kc-dre-detalhe .kc-dre-desc { padding-left: 2.6rem; font-weight: 500; color: var(--ka-muted); }
.kc-dre-detalhe td { color: var(--ka-muted); font-size: .82rem; }
.kc-dre-subtotal > * { background: #f6f8fb !important; font-weight: 800; border-top: 1px solid var(--ka-border); }
.kc-dre-resultado > * { background: var(--kc-green-soft) !important; font-weight: 800; font-size: .98rem; border-top: 2px solid var(--kc-green-strong); }
.kc-dre-melhor { color: #067a55; font-weight: 700; }
.kc-dre-pior { color: #b42328; font-weight: 700; }
@media (max-width: 575.98px) { .kc-dre .kc-dre-desc { min-width: 170px; } }
@media print {
  .kc-dre { font-size: 10pt; }
  .kc-dre .kc-dre-desc { position: static; }
  .kc-dre-subtotal > *, .kc-dre-resultado > * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
