/* ── Modal overlay ───────────────────────────────────────── */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(26,46,45,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal.active { display: flex; }

#profileModal {
    z-index: 2000;
}

#logoCropModal {
    z-index: 3000;
}

.modal-content {
    background: var(--card);
    border-radius: var(--radius);
    width: 90%;
    max-width: 500px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}

.modal-content.modal-large { max-width: 760px; }

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--cpod-primary);
    border-radius: var(--radius) var(--radius) 0 0;
}

.modal-title { font-size: 1.1rem; font-weight: 600; color: #FFFFFF; }

.modal-close {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    padding: 0.375rem 0.5rem;
    color: #FFFFFF;
    transition: all 0.15s;
    line-height: 1;
}

.modal-close:hover { background: rgba(255,255,255,0.2); }

.modal-body { padding: 1.25rem 1.5rem; }

.modal-info {
    background: var(--muted);
    padding: 0.75rem 1rem;
    border-radius: calc(var(--radius) - 2px);
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    border-left: 3px solid var(--cpod-primary);
}

.modal-info p { margin-bottom: 0.2rem; color: var(--foreground); }
.modal-info p:last-child { margin-bottom: 0; }
.modal-info strong { color: var(--cpod-primary); }

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    background: var(--muted);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Modal tabs ──────────────────────────────────────────── */
.modal-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    background: var(--muted);
}

.modal-tab {
    flex: 1;
    padding: 0.875rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted-foreground);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: inherit;
}

.modal-tab:hover { color: var(--cpod-primary); background: var(--accent); }
.modal-tab.active {
    color: var(--cpod-primary);
    border-bottom-color: var(--cpod-primary);
    background: var(--card);
    font-weight: 600;
}

.modal-tab-content { display: none; }
.modal-tab-content.active { display: block; }

/* ── Procedures in modal ─────────────────────────────────── */
.modal-procedures-list { max-height: 380px; overflow-y: auto; }

.modal-procedure-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    padding: 0.875rem;
    margin-bottom: 0.625rem;
    transition: border-color 0.15s;
}

.modal-procedure-item:hover { border-color: var(--cpod-primary); }

.procedure-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.4rem;
}

.procedure-name { font-weight: 600; color: var(--foreground); font-size: 0.875rem; margin: 0; }

.procedure-status {
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.procedure-status.status-planejado    { background: rgba(51,195,243,0.15); color: #0891b2; }
.procedure-status.status-em_andamento { background: rgba(195,51,243,0.12); color: #9333ea; }
.procedure-status.status-concluido    { background: rgba(51,243,195,0.2);  color: #0e7a5e; }

.procedure-details { margin-bottom: 0.625rem; }
.procedure-details p { margin: 0.2rem 0; font-size: 0.8rem; color: var(--muted-foreground); }

.procedure-actions { display: flex; gap: 0.4rem; }

.modal-procedure-btn {
    padding: 0.3rem 0.65rem;
    border: 1.5px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    background: var(--card);
    color: var(--foreground);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.modal-procedure-btn.btn-edit   { color: var(--cpod-primary); border-color: rgba(31,92,89,0.3); }
.modal-procedure-btn.btn-edit:hover   { background: rgba(31,92,89,0.08); border-color: var(--cpod-primary); }
.modal-procedure-btn.btn-delete { color: #EF4444; border-color: rgba(239,68,68,0.3); }
.modal-procedure-btn.btn-delete:hover { background: rgba(239,68,68,0.08); border-color: #EF4444; }

.subscription-showcase { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:6px; margin-bottom:12px; }
.subscription-showcase-copy { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:6px; max-width:100%; }
.subscription-showcase-kicker { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--cpod-primary); }
.subscription-showcase-copy h3 { margin:0; font-size:20px; line-height:1.2; color:var(--foreground); }
.subscription-showcase-copy p { margin:0; color:var(--cpod-text-muted); font-size:12.5px; line-height:1.45; }
.subscription-billing-switch-wrapper { display:flex; justify-content:flex-end; width:100%; margin-bottom:12px; }
.subscription-billing-switch { display:inline-flex; padding:3px; border-radius:999px; background:rgba(31,92,89,.06); gap:2px; }
.subscription-billing-switch button { border:none; background:transparent; color:var(--cpod-text-muted); padding:5px 10px; border-radius:999px; font-weight:700; font-size:11.5px; cursor:pointer; transition:all 0.15s ease; white-space:nowrap; width:auto; }
.subscription-billing-switch button span { font-size:9px; background:var(--cpod-primary); color:#fff; padding:1px 5px; border-radius:4px; margin-left:4px; font-weight:800; text-transform:uppercase; }
.subscription-billing-switch button.active { background:#fff; color:var(--cpod-primary); box-shadow:0 2px 6px rgba(15,23,42,.08); }
.subscription-free-card { border:1px solid rgba(31,92,89,.12); border-radius:18px; padding:16px; margin-bottom:14px; display:flex; justify-content:space-between; gap:16px; align-items:center; background:linear-gradient(135deg, rgba(31,92,89,.05), rgba(255,255,255,.95)); }
.subscription-free-card p { margin:6px 0 0; font-size:12px; color:var(--cpod-text-muted); }
.subscription-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.subscription-plan-grid--3 .subscription-plan-card { min-height:100%; }
.subscription-plan-card { border:1px solid var(--border); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:10px; background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%); box-shadow:0 16px 30px rgba(15,23,42,.06); }
.subscription-plan-card-highlight { border-color:rgba(31,92,89,.30); background:linear-gradient(180deg, rgba(31,92,89,.07) 0%, #fff 68%); }
.subscription-plan-card-clinic { border-color:rgba(20,184,166,.35); background:linear-gradient(180deg, rgba(20,184,166,.09) 0%, #fff 68%); }
.subscription-plan-card-free { background:linear-gradient(180deg, rgba(148,163,184,.08) 0%, #fff 68%); }
.subscription-plan-kind { text-transform:uppercase; letter-spacing:.08em; color:var(--cpod-text-muted); font-size:10px; font-weight:800; }
.subscription-plan-price { font-size:30px; font-weight:850; color:var(--foreground); letter-spacing:-.04em; }
.subscription-plan-price small { font-size:12px; font-weight:600; color:var(--cpod-text-muted); letter-spacing:0; }
.subscription-plan-subprice { color:var(--cpod-primary); font-size:12px; font-weight:700; }
.subscription-plan-card p { color:var(--cpod-text-muted); font-size:12px; line-height:1.5; margin:0; }
.subscription-bullets { display:grid; gap:8px; list-style:none; padding:0; margin:0 0 auto; font-size:12px; color:var(--foreground); text-align:left; }
.subscription-bullets li::before { content:'✓'; color:#059669; font-weight:900; margin-right:8px; }
.subscription-seat-picker { display:grid; gap:8px; padding:12px; border-radius:14px; background:rgba(15,23,42,.03); }
.subscription-seat-picker > span { font-size:12px; font-weight:700; color:var(--foreground); }
.subscription-seat-picker small { color:var(--cpod-text-muted); font-size:11px; line-height:1.45; }
.subscription-seat-control { display:flex; align-items:center; gap:8px; width:100%; margin:4px 0; }
.subscription-seat-slider { -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:999px; background:rgba(31,92,89,.12); outline:none; margin:0; cursor:pointer; }
.subscription-seat-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--cpod-primary); border:2px solid #fff; box-shadow:0 2px 6px rgba(31,92,89,.3); transition:transform .12s; }
.subscription-seat-slider::-webkit-slider-thumb:hover { transform:scale(1.2); }
.subscription-seat-slider::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:var(--cpod-primary); border:2px solid #fff; box-shadow:0 2px 6px rgba(31,92,89,.3); transition:transform .12s; cursor:pointer; }
.subscription-seat-slider::-moz-range-thumb:hover { transform:scale(1.2); }
.btn-seat-step { border:none; background:transparent; font-size:18px; font-weight:700; color:var(--cpod-primary); cursor:pointer; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; transition:background .15s; user-select:none; }
.btn-seat-step:hover { background:rgba(31,92,89,.08); }
.subscription-current-card,.subscription-notice { border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:12px; display:grid; gap:8px; background:var(--card); }
.subscription-current-card > div { display:flex; flex-wrap:wrap; gap:8px; }
.subscription-current-card span,.subscription-notice span { color:var(--cpod-text-muted); font-size:12px; }
.subscription-notice { border-color:#f59e0b; background:rgba(245,158,11,.08); }
.subscription-integration-note { margin:14px 0 0; color:var(--cpod-text-muted); text-align:center; font-size:12px; }
.team-member-inactive { opacity:.62; background:var(--muted); }

@media (max-width:880px) { .subscription-showcase { grid-template-columns:1fr; } .subscription-plan-grid { grid-template-columns:1fr; } .subscription-free-card { flex-direction:column; align-items:flex-start; } }
@media (max-width:640px) { .subscription-seat-control { grid-template-columns:auto 1fr auto; } .subscription-billing-switch { width:100%; } .subscription-billing-switch button { padding:10px 8px; } }

.subscription-plan-badge-annual {
    background: linear-gradient(90deg, var(--cpod-mint), var(--cpod-blue));
    color: #042f2c;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 5px rgba(16,185,129,0.15);
}