/* ==========================================================================
   TelePet Design System
   Camada de estilo premium sobre Bootstrap 5 / AdminLTE 3.
   Não remove classes existentes: apenas refina a aparência global.
   ========================================================================== */

:root {
    /* Paleta */
    --tp-primary: #0f2a4a;
    --tp-primary-dark: #0a1d33;
    --tp-primary-light: #1c3f66;
    --tp-secondary: #0f6e8c;
    --tp-accent: #12a887;
    --tp-accent-dark: #0d8a6f;
    --tp-info: #3b9ef0;
    --tp-warning: #f2a93c;
    --tp-danger: #e5584f;
    --tp-success: #12a887;

    --tp-bg: #f3f6f9;
    --tp-surface: #ffffff;
    --tp-border: #e4e9ef;
    --tp-text: #1c2b3a;
    --tp-muted: #6b7d8f;

    --tp-radius-sm: 8px;
    --tp-radius: 14px;
    --tp-radius-lg: 20px;

    --tp-shadow-sm: 0 1px 2px rgba(15, 42, 74, 0.06);
    --tp-shadow: 0 6px 20px rgba(15, 42, 74, 0.08);
    --tp-shadow-lg: 0 16px 40px rgba(15, 42, 74, 0.14);

    --tp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */

html, body {
    font-family: var(--tp-font);
    background: var(--tp-bg);
    color: var(--tp-text);
    -webkit-font-smoothing: antialiased;
}

body.hold-transition.layout-fixed {
    background: var(--tp-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tp-font);
    font-weight: 700;
    color: var(--tp-text);
    letter-spacing: -0.01em;
}

a {
    color: var(--tp-secondary);
}

a:hover {
    color: var(--tp-primary);
}

::selection {
    background: var(--tp-accent);
    color: #fff;
}

.text-muted, small.text-muted {
    color: var(--tp-muted) !important;
}

/* ==========================================================================
   Content wrapper / page header / breadcrumb
   ========================================================================== */

.content-wrapper {
    background: var(--tp-bg);
}

.content-header {
    padding: 28px 0 8px;
    background: transparent;
}

.content-header .tp-page-header,
.content-header h1.m-0 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--tp-primary);
}

.tp-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
}

.tp-page-header .tp-page-subtitle {
    font-size: 0.9rem;
    color: var(--tp-muted);
    font-weight: 500;
    margin-top: 2px;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.82rem;
}

.breadcrumb-item a {
    color: var(--tp-muted);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb-item a:hover {
    color: var(--tp-secondary);
}

.breadcrumb-item.active {
    color: var(--tp-text);
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--tp-border);
    content: "›";
}

section.content {
    padding-bottom: 40px;
}

.main-footer {
    background: var(--tp-surface);
    border-top: 1px solid var(--tp-border);
    color: var(--tp-muted);
    font-size: 0.82rem;
    padding: 14px 24px;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.main-sidebar {
    background: linear-gradient(180deg, var(--tp-primary) 0%, var(--tp-primary-dark) 100%) !important;
    box-shadow: var(--tp-shadow-lg);
}

.main-sidebar, .main-sidebar .nav-sidebar > .nav-item > .nav-link {
    font-family: var(--tp-font);
}

.brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px !important;
}

.brand-link .brand-text {
    font-weight: 800 !important;
    font-size: 1.25rem;
    color: #fff !important;
    letter-spacing: -0.01em;
}

.brand-link .tp-brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--tp-accent) 0%, var(--tp-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}

.tp-brand-subtitle {
    display: block;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    margin-top: -2px;
    letter-spacing: 0.02em;
}

.main-sidebar .user-panel {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin: 0 0 8px !important;
}

.tp-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.user-panel .info a {
    font-weight: 600;
    font-size: 0.88rem;
    color: #fff !important;
}

.user-panel .info .badge {
    font-weight: 500;
    font-size: 0.68rem;
    padding: 4px 9px;
    border-radius: 20px;
    background: rgba(18, 168, 135, 0.25) !important;
    color: #a8f0dd !important;
    border: 1px solid rgba(18, 168, 135, 0.35);
}

.nav-sidebar .nav-header {
    color: rgba(255, 255, 255, 0.38) !important;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 14px 16px 6px;
}

.nav-sidebar > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.78);
    border-radius: 10px;
    margin: 2px 10px;
    padding: 9px 12px;
    font-size: 0.87rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-sidebar > .nav-item > .nav-link:hover,
.nav-sidebar > .nav-item > .nav-link:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.nav-sidebar > .nav-item > .nav-link.active {
    background: linear-gradient(135deg, var(--tp-accent) 0%, var(--tp-secondary) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(18, 168, 135, 0.3);
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.62);
    border-radius: 8px;
    margin: 1px 10px 1px 26px;
    padding: 7px 12px;
    font-size: 0.83rem;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background: rgba(18, 168, 135, 0.22);
    color: #a8f0dd;
    font-weight: 600;
}

.nav-sidebar .nav-icon {
    font-size: 0.95rem;
    width: 22px;
    text-align: center;
    opacity: 0.9;
}

.nav-sidebar .nav-link p {
    margin: 0;
}

.nav-sidebar .nav-item > .nav-link .right {
    transition: transform 0.15s ease;
    opacity: 0.6;
}

.nav-sidebar .menu-open > .nav-link .right.fa-angle-left {
    transform: rotate(-90deg);
}

/* Item de módulo ainda não disponível */
.tp-nav-disabled {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1px 10px 1px 26px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.32);
    cursor: default;
    user-select: none;
}

.tp-nav-disabled .nav-icon {
    font-size: 0.95rem;
    width: 22px;
    text-align: center;
}

.tp-soon-badge {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
}

.main-sidebar .os-scrollbar,
.main-sidebar ::-webkit-scrollbar {
    width: 6px;
}

.main-sidebar ::-webkit-scrollbar-track {
    background: transparent;
}

.main-sidebar ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

/* Sair no rodapé da sidebar */
.tp-sidebar-logout {
    margin: 6px 10px 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tp-sidebar-logout .nav-link {
    color: rgba(255, 138, 128, 0.85) !important;
}

.tp-sidebar-logout .nav-link:hover {
    background: rgba(229, 88, 79, 0.15) !important;
    color: #ffb3ac !important;
}

/* ==========================================================================
   Topbar
   ========================================================================== */

.main-header.navbar {
    background: var(--tp-surface) !important;
    border-bottom: 1px solid var(--tp-border);
    box-shadow: var(--tp-shadow-sm);
    padding: 0 20px;
    min-height: 64px;
}

.main-header .nav-link {
    color: var(--tp-text);
    font-weight: 500;
}

.main-header [data-widget="pushmenu"] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tp-bg);
    color: var(--tp-primary);
}

.main-header [data-widget="pushmenu"]:hover {
    background: var(--tp-border);
}

.tp-user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px !important;
    border-radius: 30px;
    transition: background 0.15s ease;
}

.tp-user-menu:hover {
    background: var(--tp-bg);
}

.tp-topbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tp-secondary), var(--tp-primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.tp-topbar-user-info {
    line-height: 1.15;
    text-align: left;
}

.tp-topbar-user-info .tp-user-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tp-text);
}

.tp-topbar-user-info .tp-user-role {
    display: block;
    font-size: 0.72rem;
    color: var(--tp-muted);
}

.dropdown-menu {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow-lg);
    padding: 8px;
    margin-top: 10px !important;
}

.dropdown-menu .dropdown-header {
    font-weight: 700;
    color: var(--tp-primary);
    font-size: 0.78rem;
    padding: 8px 10px 2px;
}

.dropdown-item {
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--tp-text);
}

.dropdown-item:hover, .dropdown-item:focus {
    background: var(--tp-bg);
    color: var(--tp-primary);
}

.dropdown-item.text-danger:hover {
    background: rgba(229, 88, 79, 0.08);
    color: var(--tp-danger) !important;
}

.dropdown-divider {
    border-color: var(--tp-border);
    margin: 6px 4px;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card, .tp-card {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
    margin-bottom: 24px;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--tp-border);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-top-left-radius: var(--tp-radius) !important;
    border-top-right-radius: var(--tp-radius) !important;
}

.card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tp-primary);
    margin: 0;
}

.card-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body {
    padding: 24px;
}

.card.card-outline {
    border-top: 3px solid var(--tp-secondary);
}

.tp-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tp-muted);
    margin: 0 0 14px;
}

/* Stat cards (dashboard) */
.tp-stat-card {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tp-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tp-shadow-lg);
}

.tp-stat-card .tp-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    color: #fff;
}

.tp-stat-card .tp-stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--tp-text);
    line-height: 1.1;
}

.tp-stat-card .tp-stat-label {
    font-size: 0.82rem;
    color: var(--tp-muted);
    font-weight: 500;
    margin-top: 2px;
}

.tp-stat-icon.bg-tp-primary { background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-light)); }
.tp-stat-icon.bg-tp-info { background: linear-gradient(135deg, var(--tp-info), #2b7fd1); }
.tp-stat-icon.bg-tp-accent { background: linear-gradient(135deg, var(--tp-accent), var(--tp-accent-dark)); }
.tp-stat-icon.bg-tp-warning { background: linear-gradient(135deg, var(--tp-warning), #d98d1f); }
.tp-stat-icon.bg-tp-danger { background: linear-gradient(135deg, var(--tp-danger), #c94039); }
.tp-stat-icon.bg-tp-secondary { background: linear-gradient(135deg, var(--tp-secondary), #0a4f65); }

/* Hero card do dashboard */
.tp-hero-card {
    background: linear-gradient(120deg, var(--tp-primary) 0%, var(--tp-secondary) 100%);
    border-radius: var(--tp-radius-lg);
    padding: 36px 40px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--tp-shadow-lg);
    margin-bottom: 28px;
}

.tp-hero-card::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.tp-hero-card::after {
    content: "";
    position: absolute;
    bottom: -80px;
    right: 120px;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.tp-hero-card h2 {
    color: #fff;
    font-size: 1.6rem;
    margin-bottom: 6px;
}

.tp-hero-card p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    position: relative;
    z-index: 1;
}

.tp-hero-card .tp-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
}

/* Empty state */
.tp-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--tp-muted);
}

.tp-empty-state i {
    font-size: 2.4rem;
    color: var(--tp-border);
    margin-bottom: 12px;
    display: block;
}

.tp-empty-state p {
    margin: 0;
    font-weight: 500;
}

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
    font-weight: 600;
    font-size: 0.87rem;
    border-radius: 10px;
    padding: 9px 18px;
    transition: all 0.15s ease;
    letter-spacing: 0.01em;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 8px;
}

.btn:focus, .btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(15, 110, 140, 0.25);
}

.btn-primary {
    background: var(--tp-primary);
    border-color: var(--tp-primary);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--tp-primary-light);
    border-color: var(--tp-primary-light);
}

.btn-secondary {
    background: var(--tp-secondary);
    border-color: var(--tp-secondary);
    color: #fff;
}

.btn-secondary:hover {
    background: #0a4f65;
    border-color: #0a4f65;
    color: #fff;
}

.btn-success {
    background: var(--tp-accent);
    border-color: var(--tp-accent);
}

.btn-success:hover {
    background: var(--tp-accent-dark);
    border-color: var(--tp-accent-dark);
}

.btn-danger {
    background: var(--tp-danger);
    border-color: var(--tp-danger);
}

.btn-danger:hover {
    background: #c94039;
    border-color: #c94039;
}

.btn-warning {
    background: var(--tp-warning);
    border-color: var(--tp-warning);
    color: #4a3106;
}

.btn-warning:hover {
    background: #d98d1f;
    border-color: #d98d1f;
    color: #4a3106;
}

.btn-outline-secondary {
    color: var(--tp-muted);
    border-color: var(--tp-border);
    background: var(--tp-surface);
}

.btn-outline-secondary:hover {
    background: var(--tp-bg);
    color: var(--tp-text);
    border-color: var(--tp-border);
}

.btn-block, .w-100.btn {
    width: 100%;
}

.btn.tp-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.tp-btn-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    animation: tp-spin 0.6s linear infinite;
}

@keyframes tp-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Formulários
   ========================================================================== */

.form-label, label {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--tp-text);
    margin-bottom: 6px;
}

label[for] {
    display: inline-block;
}

.form-control, .form-select {
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--tp-text);
    background-color: var(--tp-surface);
    min-height: 44px;
}

textarea.form-control {
    min-height: 90px;
}

.form-control-sm, .form-select-sm {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.83rem;
    border-radius: 8px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--tp-secondary);
    box-shadow: 0 0 0 3px rgba(15, 110, 140, 0.14);
}

.form-control::placeholder {
    color: #a7b4c2;
}

.form-group {
    margin-bottom: 18px;
}

.input-group-text {
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    color: var(--tp-muted);
}

.input-group .form-control {
    min-height: 44px;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
    background-color: var(--tp-accent);
    border-color: var(--tp-accent);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(15, 110, 140, 0.14);
}

.invalid-feedback, .text-danger.small, .form-error {
    font-size: 0.78rem;
    font-weight: 500;
}

.required-mark::after {
    content: " *";
    color: var(--tp-danger);
}

.nav-tabs {
    border-bottom: 1px solid var(--tp-border);
    gap: 4px;
}

.nav-tabs .nav-link {
    border: none;
    border-radius: 10px 10px 0 0;
    color: var(--tp-muted);
    font-weight: 600;
    font-size: 0.87rem;
    padding: 10px 18px;
}

.nav-tabs .nav-link.active {
    color: var(--tp-primary);
    background: var(--tp-bg);
    border-bottom: 2px solid var(--tp-secondary);
}

.tab-content {
    border: none !important;
    background: transparent;
    padding: 20px 0 0 !important;
}

/* ==========================================================================
   Tabelas
   ========================================================================== */

.table-responsive {
    border-radius: var(--tp-radius);
    overflow-x: auto;
}

.table {
    margin-bottom: 0;
    color: var(--tp-text);
    font-size: 0.87rem;
}

.table thead th {
    background: var(--tp-bg);
    color: var(--tp-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--tp-border);
    border-top: none;
    padding: 12px 16px;
    white-space: nowrap;
}

.table td {
    padding: 13px 16px;
    vertical-align: middle;
    border-top: 1px solid var(--tp-border);
    border-bottom: none;
}

.table.table-bordered {
    border: 1px solid var(--tp-border);
}

.table.table-bordered td, .table.table-bordered th {
    border: 1px solid var(--tp-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(15, 110, 140, 0.02);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(15, 110, 140, 0.05);
}

.table td .btn-sm {
    padding: 5px 9px;
}

/* Paginação */
.pagination {
    gap: 4px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.page-link {
    border: 1px solid var(--tp-border);
    color: var(--tp-text);
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 0.83rem;
    margin: 0;
}

.page-link:hover {
    background: var(--tp-bg);
    color: var(--tp-primary);
}

.page-item.active .page-link {
    background: var(--tp-primary);
    border-color: var(--tp-primary);
}

.page-item.disabled .page-link {
    color: #c3cdd7;
    background: var(--tp-surface);
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
    font-weight: 600;
    font-size: 0.72rem;
    padding: 5px 11px;
    border-radius: 20px;
    letter-spacing: 0.01em;
}

.badge-primary, .bg-primary { background-color: rgba(15, 42, 74, 0.1) !important; color: var(--tp-primary) !important; }
.badge-info, .bg-info { background-color: rgba(59, 158, 240, 0.12) !important; color: #1f6fb8 !important; }
.badge-success, .bg-success { background-color: rgba(18, 168, 135, 0.12) !important; color: var(--tp-accent-dark) !important; }
.badge-warning, .bg-warning { background-color: rgba(242, 169, 60, 0.16) !important; color: #8a5a0f !important; }
.badge-danger, .bg-danger { background-color: rgba(229, 88, 79, 0.12) !important; color: #b6362e !important; }
.badge-secondary, .bg-secondary { background-color: rgba(107, 125, 143, 0.12) !important; color: var(--tp-muted) !important; }
.badge-light { background-color: var(--tp-bg) !important; color: var(--tp-muted) !important; }

/* Small-box (AdminLTE) usados no dashboard antigo - reforço visual leve */
.small-box {
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
}

/* ==========================================================================
   Alertas
   ========================================================================== */

.alert {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 0.87rem;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.alert .tp-alert-icon {
    font-size: 1.05rem;
    margin-top: 1px;
}

.alert-success {
    background: rgba(18, 168, 135, 0.08);
    border-color: rgba(18, 168, 135, 0.2);
    color: #0d7a63;
}

.alert-danger {
    background: rgba(229, 88, 79, 0.08);
    border-color: rgba(229, 88, 79, 0.2);
    color: #b6362e;
}

.alert-warning {
    background: rgba(242, 169, 60, 0.1);
    border-color: rgba(242, 169, 60, 0.25);
    color: #8a5a0f;
}

.alert-info {
    background: rgba(59, 158, 240, 0.08);
    border-color: rgba(59, 158, 240, 0.2);
    color: #1f6fb8;
}

.alert .btn-close {
    margin-left: auto;
    font-size: 0.7rem;
}

.alert ul {
    padding-left: 18px;
    margin: 4px 0 0;
}

/* ==========================================================================
   Modais
   ========================================================================== */

.modal-content {
    border: none;
    border-radius: var(--tp-radius-lg);
    box-shadow: var(--tp-shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--tp-border);
    padding: 20px 24px;
}

.modal-title {
    font-weight: 700;
    color: var(--tp-primary);
    font-size: 1.05rem;
}

.modal-body {
    padding: 24px;
    font-size: 0.9rem;
}

.modal-footer {
    border-top: 1px solid var(--tp-border);
    padding: 16px 24px;
}

.tp-modal-icon-danger {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(229, 88, 79, 0.1);
    color: var(--tp-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 16px;
}

/* ==========================================================================
   Login premium
   ========================================================================== */

body.tp-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 15% 20%, #17466b 0%, transparent 45%),
                radial-gradient(circle at 85% 85%, #0d5a52 0%, transparent 50%),
                linear-gradient(135deg, var(--tp-primary-dark) 0%, var(--tp-primary) 55%, var(--tp-secondary) 100%);
    padding: 24px;
    position: relative;
    overflow: hidden;
}

body.tp-login-page::before,
body.tp-login-page::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

body.tp-login-page::before {
    width: 420px;
    height: 420px;
    top: -140px;
    left: -120px;
}

body.tp-login-page::after {
    width: 320px;
    height: 320px;
    bottom: -120px;
    right: -80px;
    background: rgba(18, 168, 135, 0.12);
}

.tp-login-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
}

.tp-login-brand {
    text-align: center;
    margin-bottom: 26px;
}

.tp-login-brand .tp-login-logo {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #fff;
    font-size: 1.6rem;
    backdrop-filter: blur(4px);
}

.tp-login-brand h1 {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.01em;
}

.tp-login-brand p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
    margin: 4px 0 0;
}

.tp-login-card {
    background: var(--tp-surface);
    border-radius: var(--tp-radius-lg);
    box-shadow: var(--tp-shadow-lg);
    padding: 36px 32px;
}

.tp-login-card .tp-login-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tp-text);
    margin-bottom: 4px;
    text-align: center;
}

.tp-login-card .tp-login-subtitle {
    font-size: 0.85rem;
    color: var(--tp-muted);
    text-align: center;
    margin-bottom: 26px;
}

.tp-login-card .input-group {
    margin-bottom: 16px;
}

.tp-login-card .input-group-text {
    background: var(--tp-surface);
    border-right: none;
    color: var(--tp-muted);
}

.tp-login-card .form-control {
    border-left: none;
    padding-left: 4px;
}

.tp-login-card .input-group:focus-within .input-group-text,
.tp-login-card .input-group:focus-within .form-control {
    border-color: var(--tp-secondary);
}

.tp-login-card .input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(15, 110, 140, 0.14);
    border-radius: 10px;
}

.tp-password-toggle {
    background: var(--tp-surface);
    border-left: none;
    color: var(--tp-muted);
    cursor: pointer;
}

.tp-password-toggle:hover {
    color: var(--tp-secondary);
}

.tp-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 0.83rem;
}

.tp-login-options .form-check-label {
    color: var(--tp-muted);
    font-weight: 500;
}

.tp-login-options a {
    font-weight: 600;
    text-decoration: none;
}

.tp-login-card .btn-primary {
    background: linear-gradient(135deg, var(--tp-secondary), var(--tp-primary));
    border: none;
    padding: 11px;
    font-size: 0.92rem;
}

.tp-login-footer {
    text-align: center;
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.76rem;
}

@media (max-width: 480px) {
    .tp-login-card {
        padding: 28px 22px;
    }
}

/* ==========================================================================
   Timeline (perfil do paciente)
   ========================================================================== */

.tp-timeline {
    position: relative;
    padding-left: 6px;
}

.tp-timeline-item {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
    padding-left: 8px;
}

.tp-timeline-item::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 34px;
    bottom: 0;
    width: 2px;
    background: var(--tp-border);
}

.tp-timeline-item:last-child::before {
    display: none;
}

.tp-timeline-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tp-bg);
    color: var(--tp-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    border: 1px solid var(--tp-border);
    z-index: 1;
}

.tp-timeline-body {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 10px 14px;
    flex: 1;
    font-size: 0.87rem;
}

/* ==========================================================================
   Responsividade geral
   ========================================================================== */

@media (max-width: 991px) {
    .content-header {
        padding: 20px 0 6px;
    }

    .card-body {
        padding: 18px;
    }
}

@media (max-width: 767px) {
    .tp-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-header {
        padding: 16px 18px;
    }

    .tp-stat-card {
        padding: 18px;
    }

    .tp-hero-card {
        padding: 26px 22px;
    }
}

/* ==========================================================================
   Workspace Clínico (Atendimento)
   ========================================================================== */

html.tp-clinical-html, body.tp-clinical-body-tag {
    height: 100%;
    overflow: hidden;
    background: var(--tp-bg);
}

.tp-clinical-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--tp-bg);
}

/* ---------- Header ---------- */

.tp-clinical-header {
    flex: 0 0 auto;
    background: var(--tp-surface);
    border-bottom: 1px solid var(--tp-border);
    box-shadow: var(--tp-shadow-sm);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 20;
}

.tp-clinical-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.tp-clinical-breadcrumb {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tp-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 2px;
}

.tp-clinical-breadcrumb a {
    color: var(--tp-muted);
    text-decoration: none;
}

.tp-clinical-breadcrumb a:hover {
    color: var(--tp-secondary);
}

.tp-clinical-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tp-clinical-title h1 {
    font-size: 1.15rem;
    margin: 0;
    color: var(--tp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.tp-clinical-header-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 0.8rem;
    color: var(--tp-muted);
    flex-wrap: wrap;
}

.tp-clinical-header-meta strong {
    color: var(--tp-text);
    font-weight: 600;
}

.tp-clinical-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.tp-clinical-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--tp-border);
    background: var(--tp-surface);
    color: var(--tp-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.tp-clinical-icon-btn:hover {
    background: var(--tp-bg);
    color: var(--tp-primary);
}

.tp-clinical-icon-btn.tp-icon-btn-danger:hover {
    background: rgba(229, 88, 79, 0.1);
    color: var(--tp-danger);
    border-color: rgba(229, 88, 79, 0.3);
}

.tp-clinical-drawer-toggle {
    display: none;
}

/* ---------- Body (sidebar + workspace + actions) ---------- */

.tp-clinical-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    position: relative;
}

.tp-clinical-sidebar,
.tp-clinical-actions {
    flex: 0 0 auto;
    overflow-y: auto;
    background: var(--tp-surface);
    padding: 18px;
}

.tp-clinical-sidebar {
    width: 300px;
    border-right: 1px solid var(--tp-border);
}

.tp-clinical-actions {
    width: 260px;
    border-left: 1px solid var(--tp-border);
}

.tp-clinical-workspace {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--tp-bg);
}

.tp-clinical-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    background: var(--tp-surface);
    border-bottom: 1px solid var(--tp-border);
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.tp-clinical-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--tp-muted);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 14px 16px;
    white-space: nowrap;
}

.tp-clinical-tabs .nav-link:hover {
    color: var(--tp-primary);
    background: var(--tp-bg);
}

.tp-clinical-tabs .nav-link.active {
    color: var(--tp-primary);
    background: transparent;
    border-bottom-color: var(--tp-secondary);
}

.tp-clinical-workspace-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 22px;
}

.tp-clinical-placeholder {
    text-align: center;
    padding: 70px 20px;
    color: var(--tp-muted);
}

.tp-clinical-placeholder i {
    font-size: 2.6rem;
    color: var(--tp-border);
    display: block;
    margin-bottom: 16px;
}

.tp-clinical-placeholder h5 {
    color: var(--tp-text);
    margin-bottom: 6px;
}

.tp-clinical-placeholder .badge {
    margin-top: 10px;
}

/* ---------- Patient / Alert cards (sidebar) ---------- */

.tp-patient-card {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--tp-border);
    margin-bottom: 16px;
}

.tp-patient-card .tp-patient-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--tp-bg);
    box-shadow: var(--tp-shadow);
    margin-bottom: 10px;
}

.tp-patient-card .tp-patient-avatar-fallback {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--tp-bg);
    color: var(--tp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 auto 10px;
}

.tp-patient-card h5 {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.tp-patient-card .tp-patient-meta {
    font-size: 0.78rem;
    color: var(--tp-muted);
}

.tp-clinical-info-block {
    padding: 14px 0;
    border-bottom: 1px solid var(--tp-border);
}

.tp-clinical-info-block:last-child {
    border-bottom: none;
}

.tp-clinical-info-block .tp-section-title {
    margin-bottom: 10px;
}

.tp-clinical-info-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--tp-text);
    margin-bottom: 6px;
}

.tp-clinical-info-row i {
    color: var(--tp-muted);
    width: 16px;
    text-align: center;
    margin-top: 2px;
}

.tp-clinical-info-row .label {
    color: var(--tp-muted);
    margin-right: 4px;
}

.tp-alert-card {
    border-radius: var(--tp-radius-sm);
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 0.78rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid transparent;
}

.tp-alert-card.tp-alert-active {
    background: rgba(229, 88, 79, 0.08);
    border-color: rgba(229, 88, 79, 0.2);
    color: #b6362e;
}

.tp-alert-card.tp-alert-info {
    background: rgba(59, 158, 240, 0.08);
    border-color: rgba(59, 158, 240, 0.2);
    color: #1f6fb8;
}

.tp-alert-card.tp-alert-muted {
    background: var(--tp-bg);
    border-color: var(--tp-border);
    color: var(--tp-muted);
}

.tp-resumo-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8rem;
    padding: 7px 0;
    border-bottom: 1px dashed var(--tp-border);
}

.tp-resumo-item:last-child {
    border-bottom: none;
}

.tp-resumo-item .label {
    color: var(--tp-muted);
}

.tp-resumo-item .value {
    font-weight: 600;
    color: var(--tp-text);
    text-align: right;
}

/* ---------- Action panel ---------- */

.tp-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    margin-bottom: 10px;
    border-radius: 12px;
    border: 1px solid var(--tp-border);
    background: var(--tp-surface);
    color: var(--tp-text);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    transition: all 0.15s ease;
}

.tp-action-btn i {
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.tp-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--tp-shadow);
}

.tp-action-btn.tp-action-primary {
    background: linear-gradient(135deg, var(--tp-secondary), var(--tp-primary));
    border-color: transparent;
    color: #fff;
}

.tp-action-btn.tp-action-success {
    background: linear-gradient(135deg, var(--tp-accent), var(--tp-accent-dark));
    border-color: transparent;
    color: #fff;
}

.tp-action-btn.tp-action-outline {
    background: var(--tp-surface);
}

.tp-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tp-action-divider {
    border: none;
    border-top: 1px solid var(--tp-border);
    margin: 14px 0;
}

/* ---------- Footer ---------- */

.tp-clinical-footer {
    flex: 0 0 auto;
    background: var(--tp-surface);
    border-top: 1px solid var(--tp-border);
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.76rem;
    color: var(--tp-muted);
    flex-wrap: wrap;
    z-index: 20;
}

.tp-clinical-footer-group {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.tp-clinical-footer-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tp-clinical-footer-item i {
    font-size: 0.8rem;
}

.tp-sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tp-accent);
    display: inline-block;
    animation: tp-sync-pulse 2s infinite ease-in-out;
}

.tp-sync-dot.tp-sync-pending {
    background: var(--tp-warning);
}

.tp-sync-dot.tp-sync-error {
    background: var(--tp-danger);
}

@keyframes tp-sync-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ---------- Timeline (workspace tab) ---------- */

.tp-clinical-workspace .tp-timeline-item::before {
    left: 19px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1300px) {
    .tp-clinical-actions {
        width: 230px;
    }

    .tp-clinical-sidebar {
        width: 270px;
    }
}

@media (max-width: 1100px) {
    .tp-clinical-drawer-toggle {
        display: inline-flex;
    }

    .tp-clinical-sidebar,
    .tp-clinical-actions {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 40;
        box-shadow: var(--tp-shadow-lg);
        transition: transform 0.2s ease;
    }

    .tp-clinical-sidebar {
        left: 0;
        transform: translateX(-100%);
    }

    .tp-clinical-actions {
        right: 0;
        transform: translateX(100%);
    }

    .tp-clinical-sidebar.tp-drawer-open,
    .tp-clinical-actions.tp-drawer-open {
        transform: translateX(0);
    }

    .tp-clinical-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 32, 0.4);
        z-index: 30;
    }

    .tp-clinical-backdrop.tp-drawer-open {
        display: block;
    }
}

@media (max-width: 767px) {
    .tp-clinical-header {
        padding: 10px 14px;
    }

    .tp-clinical-title h1 {
        max-width: 160px;
        font-size: 1rem;
    }

    .tp-clinical-header-meta {
        display: none;
    }

    .tp-clinical-workspace-content {
        padding: 14px;
    }

    .tp-clinical-footer {
        font-size: 0.7rem;
        padding: 8px 12px;
    }

    .tp-clinical-footer-group {
        gap: 10px;
    }
}

/* ---------- Fluxo clínico (progress bar) ---------- */

.tp-clinical-progress {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: var(--tp-surface);
    border-bottom: 1px solid var(--tp-border);
    overflow-x: auto;
    scrollbar-width: thin;
}

.tp-clinical-progress-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--tp-muted);
    white-space: nowrap;
}

.tp-clinical-progress-dot {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--tp-bg);
    border: 2px solid var(--tp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    color: var(--tp-muted);
}

.tp-clinical-progress-step.is-active {
    color: var(--tp-primary);
}

.tp-clinical-progress-step.is-active .tp-clinical-progress-dot {
    background: var(--tp-primary);
    border-color: var(--tp-primary);
    color: #fff;
}

.tp-clinical-progress-step.is-done .tp-clinical-progress-dot {
    background: var(--tp-success);
    border-color: var(--tp-success);
    color: #fff;
}

.tp-clinical-progress-connector {
    width: 22px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--tp-border);
}

.tp-clinical-progress-connector.is-done {
    background: var(--tp-success);
}

@media (max-width: 991.98px) {
    .tp-clinical-progress-step span:last-child {
        display: none;
    }
}

/* ---------- Cards clínicos (Consulta / Anamnese / Exame Clínico) ---------- */

.tp-clinical-card {
    margin-bottom: 20px;
}

.tp-clinical-card:last-child {
    margin-bottom: 0;
}

.tp-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px 20px;
}

.tp-field-grid .form-group {
    margin-bottom: 0;
}

.tp-field-grid .tp-field-full {
    grid-column: 1 / -1;
}

.tp-required-marker {
    color: var(--tp-danger);
    margin-left: 3px;
}

/* Segmented control (tipo da consulta) */

.tp-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-segmented input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.tp-segmented label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--tp-border);
    background: var(--tp-surface);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tp-muted);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    margin-bottom: 0;
}

.tp-segmented input[type="radio"]:checked + label {
    background: var(--tp-primary);
    border-color: var(--tp-primary);
    color: #fff;
}

.tp-segmented input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--tp-secondary);
    outline-offset: 2px;
}

/* ---------- Listas dinâmicas (Hipóteses / Diferenciais) ---------- */

.tp-repeatable-row {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--tp-bg);
}

.tp-repeatable-row:last-child {
    margin-bottom: 0;
}

.tp-repeatable-remove {
    margin-top: 10px;
    border: none;
    background: none;
    color: var(--tp-danger);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 0;
}

.tp-repeatable-remove:hover {
    text-decoration: underline;
}

.tp-repeatable-empty {
    padding: 6px 0;
}

.tp-repeatable-template {
    display: none;
}

/* ---------- Evolução clínica (timeline + entradas) ---------- */

.tp-evolution-entry {
    border-left: 3px solid var(--tp-secondary);
    background: var(--tp-bg);
    border-radius: var(--tp-radius-sm);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.tp-evolution-entry:last-child {
    margin-bottom: 0;
}

.tp-evolution-entry-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tp-muted);
}

.tp-evolution-entry-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.tp-evolution-entry-text {
    margin: 0;
    color: var(--tp-text);
}

.tp-evolution-entry-observations {
    margin: 6px 0 0;
}

.tp-evolution-entry-edit {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--tp-border);
}

/* ---------- Resumo da Consulta ---------- */

.tp-consult-summary .tp-resumo-item .value {
    max-width: 60%;
    text-align: right;
}

/* ---------- Autosave: 4º estado (sincronizando) ---------- */

.tp-sync-dot.tp-sync-syncing {
    background: var(--tp-info);
}

/* ---------- Clinical Activity Stream (Timeline Notion-style) ---------- */

.tp-atl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.tp-atl-toolbar .form-select,
.tp-atl-toolbar .form-control {
    max-width: 220px;
}

.tp-atl-period .btn {
    font-weight: 600;
}

.tp-atl {
    position: relative;
    padding-left: 26px;
}

.tp-atl::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--tp-border);
}

.tp-atl-item {
    position: relative;
    margin-bottom: 20px;
}

.tp-atl-item:last-child {
    margin-bottom: 0;
}

.tp-atl-marker {
    position: absolute;
    left: -26px;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.65rem;
    box-shadow: 0 0 0 4px var(--tp-surface);
}

.tp-atl-card {
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 12px 14px;
}

.tp-atl-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.tp-atl-card-body {
    font-size: 0.85rem;
    color: var(--tp-text);
    margin-bottom: 6px;
}

.tp-atl-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.74rem;
    color: var(--tp-muted);
}

.tp-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* ---------- Anexos (uploader + grid) ---------- */

.tp-uploader {
    position: relative;
    border: 2px dashed var(--tp-border);
    border-radius: var(--tp-radius);
    padding: 26px 16px;
    text-align: center;
    background: var(--tp-bg);
    transition: border-color .15s ease, background .15s ease;
    cursor: pointer;
}

.tp-uploader:hover,
.tp-uploader.tp-uploader-dragging {
    border-color: var(--tp-secondary);
    background: rgba(15, 110, 140, 0.06);
}

.tp-uploader-hint i {
    font-size: 1.8rem;
    color: var(--tp-secondary);
    margin-bottom: 8px;
    display: block;
}

.tp-uploader-hint p {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--tp-text);
}

.tp-uploader-browse {
    color: var(--tp-secondary);
    text-decoration: underline;
}

.tp-uploader-progress {
    color: var(--tp-muted);
    font-size: 0.85rem;
}

.tp-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.tp-attachment-empty {
    grid-column: 1 / -1;
}

.tp-attachment-card {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    background: var(--tp-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease;
}

.tp-attachment-card:hover {
    box-shadow: var(--tp-shadow);
}

.tp-attachment-thumb {
    height: 100px;
    background: var(--tp-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-border);
    font-size: 2rem;
    cursor: pointer;
}

.tp-attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-attachment-info {
    padding: 8px 10px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tp-attachment-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-attachment-meta {
    font-size: 0.7rem;
    color: var(--tp-muted);
}

.tp-attachment-actions {
    padding: 8px 10px 10px;
    display: flex;
    gap: 6px;
}

/* ---------- HistoryViewer ---------- */

.tp-history-item {
    border-bottom: 1px dashed var(--tp-border);
    padding: 10px 0;
}

.tp-history-item:last-child {
    border-bottom: none;
}

.tp-history-item-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}

/* ---------- NotificationToast (global) ---------- */

.tp-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}

.tp-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-left: 4px solid var(--tp-muted);
    border-radius: var(--tp-radius-sm);
    box-shadow: var(--tp-shadow-lg);
    padding: 12px 14px;
    font-size: 0.85rem;
    color: var(--tp-text);
    opacity: 0;
    transform: translateX(12px);
    transition: opacity .2s ease, transform .2s ease;
}

.tp-toast.tp-toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.tp-toast i:first-child {
    margin-top: 1px;
}

.tp-toast-message {
    flex: 1 1 auto;
}

.tp-toast-close {
    background: none;
    border: none;
    color: var(--tp-muted);
    padding: 0;
    line-height: 1;
}

.tp-toast-success { border-left-color: var(--tp-success); }
.tp-toast-success i:first-child { color: var(--tp-success); }
.tp-toast-error, .tp-toast-danger { border-left-color: var(--tp-danger); }
.tp-toast-error i:first-child, .tp-toast-danger i:first-child { color: var(--tp-danger); }
.tp-toast-warning { border-left-color: var(--tp-warning); }
.tp-toast-warning i:first-child { color: var(--tp-warning); }
.tp-toast-info { border-left-color: var(--tp-info); }
.tp-toast-info i:first-child { color: var(--tp-info); }
.tp-toast-sync { border-left-color: var(--tp-secondary); }
.tp-toast-sync i:first-child { color: var(--tp-secondary); }
.tp-toast-upload { border-left-color: var(--tp-primary); }
.tp-toast-upload i:first-child { color: var(--tp-primary); }
.tp-toast-download { border-left-color: var(--tp-muted); }
.tp-toast-download i:first-child { color: var(--tp-muted); }

@media (max-width: 575.98px) {
    .tp-toast-container {
        left: 16px;
        right: 16px;
        max-width: none;
    }
}

/* ---------- EmptyState (premium) ---------- */

.tp-empty-state-premium {
    text-align: center;
    padding: 46px 20px;
    color: var(--tp-muted);
}

.tp-empty-state-premium .tp-empty-state-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--tp-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--tp-border);
}

.tp-empty-state-premium h5 {
    color: var(--tp-text);
    margin-bottom: 6px;
}

.tp-empty-state-premium p {
    max-width: 360px;
    margin: 0 auto 16px;
    font-size: 0.85rem;
}

/* ---------- Skeleton loading ---------- */

.tp-skeleton {
    background: linear-gradient(90deg, var(--tp-bg) 25%, var(--tp-border) 37%, var(--tp-bg) 63%);
    background-size: 400% 100%;
    animation: tp-skeleton-shimmer 1.4s ease infinite;
    border-radius: 6px;
    height: 12px;
    margin-bottom: 8px;
}

.tp-skeleton-title {
    height: 16px;
    width: 45%;
    margin-bottom: 12px;
}

.tp-skeleton-line:last-child {
    margin-bottom: 0;
    width: 80%;
}

.tp-skeleton-marker {
    position: absolute;
    left: -26px;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 0;
}

.tp-skeleton-card {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 12px 14px;
    margin-bottom: 10px;
}

.tp-skeleton-card:last-child {
    margin-bottom: 0;
}

.tp-skeleton-atl .tp-atl-card {
    background: var(--tp-surface);
}

/* ==========================================================
   Prontuário Eletrônico (Medical Record workspace)
   ========================================================== */

.tp-clinical-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tp-clinical-icon-btn:disabled:hover {
    background: var(--tp-surface);
    color: var(--tp-muted);
}

.tp-record-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--tp-border);
    flex-shrink: 0;
}

.tp-record-header-avatar-fallback {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tp-bg);
    color: var(--tp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tp-record-indicator-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.tp-record-indicator {
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 10px;
    text-align: center;
}

.tp-record-indicator i {
    color: var(--tp-secondary);
    font-size: 0.95rem;
}

.tp-record-indicator-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--tp-text);
    line-height: 1.4;
}

.tp-record-indicator-label {
    display: block;
    font-size: 0.68rem;
    color: var(--tp-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tp-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.tp-summary-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
    padding: 18px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.tp-summary-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tp-shadow-lg);
}

.tp-summary-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--tp-bg);
    color: var(--tp-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tp-summary-card-body h6 {
    margin: 0 0 4px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tp-text);
}

.tp-summary-card-count {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tp-secondary);
}

.tp-summary-card-meta {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: var(--tp-muted);
}

.tp-summary-card-empty {
    margin: 0;
    font-size: 0.78rem;
    color: var(--tp-muted);
}

/* ==========================================================
   Clinical Timeline Engine (Timeline Widget) — Sprint 07.2
   ========================================================== */

.tp-timeline-widget .card-body {
    padding-bottom: 8px;
}

.tp-timeline-scroll {
    max-height: 640px;
    overflow-y: auto;
    padding-right: 4px;
}

.tp-timeline-sentinel {
    height: 1px;
}

.tp-timeline-group {
    margin-bottom: 22px;
}

.tp-timeline-group:last-child {
    margin-bottom: 0;
}

.tp-timeline-group-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tp-secondary);
    margin: 0 0 10px 26px;
}

.tp-timeline-thread {
    position: relative;
    margin: 0 0 20px 18px;
    padding: 10px 0 2px 18px;
    border-left: 2px dashed var(--tp-border);
}

.tp-timeline-thread-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tp-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.tp-timeline-thread-items .tp-atl-item {
    margin-bottom: 12px;
}

.tp-timeline-thread-items .tp-atl-marker {
    box-shadow: 0 0 0 4px var(--tp-bg);
}

.tp-timeline-details {
    font-size: 0.82rem;
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 8px 10px;
    margin: 4px 0 8px;
    white-space: pre-line;
}

.tp-timeline-preview img {
    max-width: 220px;
    max-height: 140px;
    border-radius: var(--tp-radius-sm);
    border: 1px solid var(--tp-border);
    margin: 6px 0;
    display: block;
    object-fit: cover;
}

.tp-timeline-attachment {
    font-size: 0.8rem;
    margin: 6px 0;
}

.tp-timeline-attachment a {
    color: var(--tp-secondary);
    text-decoration: none;
}

.tp-timeline-attachment a:hover {
    text-decoration: underline;
}

.tp-timeline-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.tp-timeline-actions .btn-link {
    font-size: 0.74rem;
    color: var(--tp-muted);
    text-decoration: none;
}

.tp-timeline-actions .btn-link:hover {
    color: var(--tp-secondary);
}

.tp-timeline-action-hint {
    font-size: 0.72rem;
    color: var(--tp-muted);
    opacity: 0.7;
    cursor: not-allowed;
}

.tp-atl-priority-high .tp-atl-card {
    border-color: rgba(242, 169, 60, 0.4);
    background: rgba(242, 169, 60, 0.05);
}

.tp-atl-priority-critical .tp-atl-card {
    border-color: rgba(229, 88, 79, 0.45);
    background: rgba(229, 88, 79, 0.06);
}

/* ==========================================================
   Prontuário — Impressão / Relatórios (Sprint 07.3)
   ========================================================== */

.tp-print-body {
    background: #fff;
    color: #1a1a1a;
    font-size: 0.92rem;
}

.tp-print-page {
    max-width: 900px;
    margin: 24px auto;
    padding: 0 20px 40px;
}

.tp-print-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 10px 14px;
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
}

.tp-print-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 2px solid var(--tp-primary);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.tp-print-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tp-print-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.tp-print-header-brand h1 {
    font-size: 1.15rem;
    margin: 0;
    color: var(--tp-primary);
}

.tp-print-header-doc {
    text-align: right;
    font-size: 0.8rem;
    color: var(--tp-muted);
}

.tp-print-header-doc h2 {
    font-size: 1rem;
    margin: 0 0 4px;
    color: var(--tp-text);
}

.tp-print-patient-strip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    background: var(--tp-bg);
    border-radius: var(--tp-radius-sm);
    padding: 10px 14px;
    margin-bottom: 18px;
}

.tp-print-section {
    margin-bottom: 22px;
    page-break-inside: avoid;
}

.tp-print-section h3 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--tp-primary);
    border-bottom: 1px solid var(--tp-border);
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.tp-print-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    font-size: 0.85rem;
}

.tp-print-grid p {
    margin: 0 0 6px;
}

.tp-print-alert-box {
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(229, 88, 79, 0.3);
    background: rgba(229, 88, 79, 0.06);
    border-radius: var(--tp-radius-sm);
    font-size: 0.82rem;
}

.tp-print-consultation {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    page-break-inside: avoid;
}

.tp-print-consultation header {
    font-size: 0.8rem;
    color: var(--tp-muted);
    margin-bottom: 6px;
}

.tp-print-consultation p {
    margin: 0 0 4px;
}

.tp-print-table {
    font-size: 0.8rem;
}

.tp-print-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.72rem;
    color: var(--tp-muted);
    border-top: 1px solid var(--tp-border);
    padding-top: 8px;
    margin-top: 24px;
}

@media print {
    .tp-print-toolbar,
    .d-print-none {
        display: none !important;
    }

    .tp-print-page {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .tp-print-section,
    .tp-print-consultation {
        page-break-inside: avoid;
    }

    @page {
        margin: 16mm 14mm;
    }

    .tp-print-page-counter::after {
        content: counter(page);
    }
}

/* ---------- Report builder screen ---------- */

.tp-report-preview-card {
    height: calc(100vh - 220px);
    min-height: 520px;
    display: flex;
    flex-direction: column;
}

.tp-report-preview-card .card-body {
    flex: 1 1 auto;
    min-height: 0;
}

.tp-report-preview-frame {
    width: 100%;
    height: 100%;
    border: none;
}

.tp-report-loading {
    font-size: 0.8rem;
    color: var(--tp-muted);
}

/* ==========================================================
   Clinical Search Engine — Sprint 07.4
   ========================================================== */

.tp-search-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-permission-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.tp-permission-granted {
    background: rgba(18, 168, 135, 0.1);
    border-color: rgba(18, 168, 135, 0.25);
    color: #0d7d64;
}

.tp-permission-denied {
    background: var(--tp-bg);
    border-color: var(--tp-border);
    color: var(--tp-muted);
}

.tp-security-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--tp-radius-sm);
    font-size: 0.82rem;
    margin-bottom: 14px;
    border: 1px solid transparent;
}

.tp-security-alert-info {
    background: rgba(59, 158, 240, 0.08);
    border-color: rgba(59, 158, 240, 0.25);
    color: #1f6fb8;
}

.tp-security-alert-warning {
    background: rgba(242, 169, 60, 0.1);
    border-color: rgba(242, 169, 60, 0.3);
    color: #8a5b0d;
}

.tp-security-alert-danger {
    background: rgba(229, 88, 79, 0.08);
    border-color: rgba(229, 88, 79, 0.25);
    color: #b6362e;
}

.tp-search-card .card-body {
    padding: 18px 20px;
}

.tp-search-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tp-search-input-wrap {
    position: relative;
    flex: 1 1 320px;
    min-width: 240px;
}

.tp-search-input-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tp-muted);
}

.tp-search-input-wrap input {
    padding-left: 38px;
    border-radius: 999px;
}

.tp-search-sort {
    max-width: 200px;
}

.tp-search-quick-period {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.tp-search-quick-period button.active {
    background: var(--tp-secondary);
    border-color: var(--tp-secondary);
    color: #fff;
}

.tp-search-advanced {
    border-top: 1px dashed var(--tp-border);
    margin-top: 14px;
    padding-top: 14px;
}

.tp-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.tp-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.74rem;
    color: var(--tp-text);
}

.tp-filter-tag i {
    cursor: pointer;
    color: var(--tp-muted);
}

.tp-filter-tag i:hover {
    color: var(--tp-danger);
}

.tp-saved-filters-menu {
    width: 280px;
    padding: 10px;
}

.tp-saved-filters-title {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tp-muted);
    margin: 6px 8px 4px;
}

.tp-saved-filter-item {
    white-space: normal;
    font-size: 0.82rem;
}

.tp-search-results {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.tp-search-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tp-secondary);
    margin-bottom: 10px;
}

.tp-search-group-count {
    background: var(--tp-bg);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.7rem;
    color: var(--tp-muted);
}

.tp-search-group-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.tp-search-result-card {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tp-search-result-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tp-shadow-lg);
}

.tp-search-result-body strong {
    font-size: 0.88rem;
    color: var(--tp-text);
}

.tp-search-result-body p {
    font-size: 0.8rem;
    color: var(--tp-text);
}

.tp-search-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.72rem;
    color: var(--tp-muted);
}

.tp-search-result-card .btn {
    align-self: flex-start;
}

/* ---------- Auditoria ---------- */

.tp-audit-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tp-audit-card {
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 10px 14px;
}

.tp-audit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.tp-audit-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.72rem;
    color: var(--tp-muted);
    margin-top: 4px;
}

/* ==========================================================
   Clinical Experience Premium — Sprint 07.5
   ========================================================== */

/* ---------- Modo Foco ---------- */

.tp-clinical-body.tp-focus-mode .tp-clinical-sidebar,
.tp-clinical-body.tp-focus-mode .tp-clinical-actions {
    display: none;
}

.tp-clinical-body.tp-focus-mode .tp-clinical-workspace {
    max-width: 980px;
    margin: 0 auto;
}

.tp-clinical-icon-btn.tp-icon-btn-active {
    background: var(--tp-secondary);
    border-color: var(--tp-secondary);
    color: #fff;
}

.tp-clinical-icon-btn.tp-icon-btn-active:hover {
    background: var(--tp-secondary);
    color: #fff;
}

/* ---------- LoadingOverlay ---------- */

.tp-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    border-radius: inherit;
    animation: tp-fade-in 0.15s ease;
}

.tp-loading-overlay-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--tp-secondary);
    font-weight: 600;
}

.tp-loading-overlay-content i {
    font-size: 1.3rem;
}

@keyframes tp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- SkeletonPrescription (Sprint 08.5) ----------
   tp-skeleton-shimmer é a única @keyframes com este nome (Sprint 10.6
   removeu uma segunda definição duplicada que existia antes de
   `.tp-skeleton`, ~linha 2495 — nomes de @keyframes não são escopados
   por seletor, então a última declaração sempre vencia silenciosamente;
   esta é a que já estava em uso). Compartilhada por `.tp-skeleton` e
   `.tp-skeleton-line`. */

.tp-skeleton-line {
    height: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, var(--tp-border) 25%, var(--tp-bg) 37%, var(--tp-border) 63%);
    background-size: 400% 100%;
    animation: tp-skeleton-shimmer 1.4s ease infinite;
}

.tp-skeleton-line:last-child {
    margin-bottom: 0;
}

.tp-skeleton-line.w-75 { width: 75%; }
.tp-skeleton-line.w-50 { width: 50%; }
.tp-skeleton-line.w-25 { width: 25%; }

@keyframes tp-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-skeleton-line {
        animation: none;
        background: var(--tp-border);
    }
}

/* ---------- Empty states compactos (modais) — Sprint 08.5 ---------- */

.tp-empty-state-inline {
    text-align: center;
    padding: 24px 16px;
    color: var(--tp-muted);
}

.tp-empty-state-inline i {
    font-size: 1.8rem;
    color: var(--tp-border);
    margin-bottom: 8px;
    display: block;
}

.tp-empty-state-inline p {
    margin: 0 0 10px;
    font-size: 0.85rem;
}

.tp-empty-state-inline .btn {
    margin-top: 4px;
}

/* ---------- Microinterações: cards que ainda eram estáticos ---------- */

.tp-record-indicator,
.tp-atl-card,
.tp-audit-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tp-record-indicator:hover {
    transform: translateY(-2px);
    border-color: var(--tp-secondary);
    box-shadow: var(--tp-shadow);
}

.tp-atl-card:hover,
.tp-audit-card:hover {
    border-color: var(--tp-secondary);
    box-shadow: var(--tp-shadow);
}

.tp-clinical-tabs .nav-link {
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.tp-clinical-icon-btn,
.tp-permission-badge,
.tp-filter-tag {
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* ---------- Foco visível (acessibilidade / navegação por teclado) ---------- */

.tp-clinical-icon-btn:focus-visible,
.tp-search-result-card:focus-visible,
.tp-summary-card:focus-visible,
.tp-stat-card:focus-visible,
.tp-atl-card:focus-visible,
.tp-audit-card:focus-visible,
.tp-record-indicator:focus-visible {
    outline: 2px solid var(--tp-secondary);
    outline-offset: 2px;
}

.tp-clinical-tabs .nav-link:focus-visible {
    outline: 2px solid var(--tp-secondary);
    outline-offset: -2px;
}

/* Nunca exagerar: respeita a preferência do usuário por menos movimento */
@media (prefers-reduced-motion: reduce) {
    .tp-record-indicator,
    .tp-atl-card,
    .tp-audit-card,
    .tp-summary-card,
    .tp-stat-card,
    .tp-search-result-card,
    .tp-clinical-icon-btn,
    .tp-toast {
        transition: none !important;
        animation: none !important;
    }

    .tp-record-indicator:hover,
    .tp-summary-card:hover,
    .tp-stat-card:hover,
    .tp-search-result-card:hover {
        transform: none !important;
    }
}

/* ---------- Preparação para IA (estrutura, sem chamada real) ---------- */

.tp-ai-ready-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(15, 110, 140, 0.1);
    border: 1px solid rgba(15, 110, 140, 0.25);
    color: var(--tp-secondary);
}

.tp-insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.tp-insight-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 12px 14px;
    font-size: 0.82rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tp-insight-card:hover {
    border-color: var(--tp-secondary);
    box-shadow: var(--tp-shadow);
}

.tp-insight-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--tp-surface);
    color: var(--tp-secondary);
}

.tp-insight-warning .tp-insight-icon { color: var(--tp-warning); }
.tp-insight-critical .tp-insight-icon { color: var(--tp-danger); }

.tp-insight-unavailable {
    opacity: 0.7;
}

.tp-recommendation-placeholder {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--tp-bg);
    border: 1px dashed var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 12px 14px;
    font-size: 0.82rem;
    color: var(--tp-muted);
}

.tp-recommendation-placeholder i {
    color: var(--tp-warning);
    margin-top: 2px;
}

/* =====================================================================
   Workspace do Receituário — Sprint 08.1
   ===================================================================== */

.tp-prescription-shell .tp-clinical-workspace {
    gap: 16px;
    padding: 22px;
    overflow-y: auto;
}

/* No Receituário as ações ficam nos ícones do header — o painel de ações
   reaproveitado (`tp-clinical-actions`) só existe como gaveta no mobile. */
.tp-prescription-shell .tp-clinical-actions {
    display: none;
}

.tp-prescription-editor {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tp-autosave-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--tp-muted);
    margin-right: 6px;
}

/* ---------- Preview panel ---------- */

.tp-prescription-preview {
    flex: 0 0 auto;
    width: 340px;
    overflow-y: auto;
    background: var(--tp-surface);
    border-left: 1px solid var(--tp-border);
    padding: 18px;
}

.tp-preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.tp-preview-sheet {
    background: #fff;
    color: #1c2733;
    border-radius: var(--tp-radius-sm);
    box-shadow: var(--tp-shadow);
    padding: 20px;
    font-size: 0.85rem;
}

.tp-preview-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 2px solid #1c2733;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.tp-preview-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tp-preview-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.tp-preview-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    color: var(--tp-primary);
}

.tp-preview-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.tp-preview-parties .label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7d8f;
}

.tp-preview-parties strong {
    display: block;
    font-size: 0.88rem;
}

.tp-preview-doc-title {
    font-size: 0.95rem;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #d8dee5;
}

.tp-preview-item-list {
    list-style: decimal;
    padding-left: 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tp-preview-item-list li {
    padding-bottom: 8px;
    border-bottom: 1px dashed #eef1f4;
}

.tp-preview-item-list li:last-child {
    border-bottom: none;
}

.tp-preview-instructions {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed #d8dee5;
}

.tp-preview-instructions .label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7d8f;
    margin-bottom: 4px;
}

.tp-preview-instructions p {
    margin: 0;
    white-space: pre-line;
}

.tp-preview-footer {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}

.tp-preview-date {
    font-size: 0.75rem;
    color: #6b7d8f;
}

.tp-preview-signature {
    text-align: center;
    min-width: 160px;
}

.tp-preview-signature-line {
    border-top: 1px solid #1c2733;
    margin-bottom: 4px;
    width: 100%;
}

.tp-preview-signature-img {
    max-height: 46px;
    max-width: 160px;
    display: block;
    margin: 0 auto 4px;
}

.tp-preview-signature strong {
    display: block;
    font-size: 0.8rem;
}

.tp-preview-signature span {
    font-size: 0.72rem;
    color: #6b7d8f;
}

/* ---------- Item cards (medicamentos) ---------- */

.tp-item-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tp-item-card {
    display: flex;
    gap: 10px;
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 14px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tp-item-card:hover {
    border-color: var(--tp-secondary);
    box-shadow: var(--tp-shadow);
}

.tp-item-card.tp-item-dragging {
    opacity: 0.5;
}

.tp-item-card-handle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding-top: 6px;
    color: var(--tp-muted);
    cursor: grab;
}

.tp-item-card-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--tp-border);
}

.tp-item-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tp-muted);
    margin-bottom: 3px;
}

.tp-item-field-full,
.tp-item-field-name {
    grid-column: 1 / -1;
}

.tp-medication-search {
    position: relative;
}

.tp-medication-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    box-shadow: var(--tp-shadow-lg);
    max-height: 280px;
    overflow-y: auto;
    animation: tp-fade-in 0.12s ease-out;
}

.tp-medication-search-group + .tp-medication-search-group {
    border-top: 1px solid var(--tp-border);
}

.tp-medication-search-group-title {
    margin: 0;
    padding: 6px 12px 2px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tp-muted);
}

.tp-medication-search-result {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.12s ease-out;
}

.tp-medication-search-result:hover,
.tp-medication-search-result.is-active {
    background: var(--tp-bg);
}

.tp-medication-search-result small {
    display: block;
    color: var(--tp-muted);
}

@media (prefers-reduced-motion: reduce) {
    .tp-medication-search-results,
    .tp-medication-search-result {
        animation: none;
        transition: none;
    }
}

.tp-item-card-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tp-icon-btn-sm {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--tp-border);
    background: var(--tp-surface);
    color: var(--tp-muted);
    transition: all 0.15s ease;
}

.tp-icon-btn-sm:hover {
    border-color: var(--tp-primary);
    color: var(--tp-primary);
}

.tp-icon-btn-sm.tp-icon-btn-danger:hover {
    border-color: var(--tp-danger);
    color: var(--tp-danger);
}

.tp-prescription-empty {
    margin-top: 10px;
}

template#tpItemTemplate {
    display: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 1300px) {
    .tp-prescription-preview {
        width: 300px;
    }
}

@media (max-width: 1100px) {
    .tp-prescription-preview {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 40;
        box-shadow: var(--tp-shadow-lg);
        transition: transform 0.2s ease;
        transform: translateX(100%);
        width: 340px;
    }

    .tp-prescription-preview.tp-drawer-open {
        transform: translateX(0);
    }

    .tp-prescription-shell .tp-clinical-actions {
        display: none;
    }

    .tp-prescription-shell .tp-clinical-actions.tp-drawer-open {
        display: block;
    }
}

@media (max-width: 767px) {
    .tp-item-card-body {
        grid-template-columns: 1fr 1fr;
    }

    .tp-prescription-preview {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .tp-item-card-body {
        grid-template-columns: 1fr;
    }

    .tp-item-card {
        flex-direction: column;
    }

    .tp-item-card-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* =====================================================================
   Prescrição Inteligente — Sprint 08.2
   ===================================================================== */

/* ---------- Item card: summary/collapse, badges, toggles ---------- */

.tp-item-card-main {
    flex: 1 1 auto;
    min-width: 0;
}

.tp-item-card-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    cursor: default;
}

.tp-item-summary-text {
    flex: 1 1 auto;
    min-width: 0;
}

.tp-item-summary-name {
    margin-right: 8px;
}

.tp-item-summary-meta {
    margin-top: 2px;
}

.tp-item-toggle-collapse {
    flex: 0 0 auto;
}

.tp-item-card.is-collapsed .tp-item-card-body {
    display: none;
}

.tp-badge-continuous,
.tp-badge-controlled {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    margin-right: 6px;
    vertical-align: middle;
}

.tp-badge-continuous {
    background: rgba(15, 110, 140, 0.12);
    color: var(--tp-primary);
}

.tp-badge-controlled {
    background: rgba(229, 88, 79, 0.12);
    color: var(--tp-danger);
}

.tp-item-field-toggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

/* ---------- Switch (Uso contínuo / Uso controlado) ---------- */

.tp-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.tp-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tp-switch-track {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--tp-border);
    transition: background 0.15s ease;
    flex: 0 0 auto;
}

.tp-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.tp-switch input:checked + .tp-switch-track {
    background: var(--tp-primary);
}

.tp-switch input:checked + .tp-switch-track::after {
    transform: translateX(16px);
}

.tp-switch-label {
    font-size: 0.82rem;
    color: var(--tp-text);
}

/* ---------- SelectWithCustom ---------- */

.tp-select-with-custom select {
    width: 100%;
}

/* ---------- Validation banner (prontidão para emissão) ---------- */

.tp-validation-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--tp-radius-sm);
    padding: 12px 14px;
    font-size: 0.85rem;
}

.tp-validation-banner.tp-validation-ok {
    background: rgba(18, 168, 135, 0.1);
    color: #0d7a63;
}

.tp-validation-banner.tp-validation-pending {
    background: rgba(242, 169, 60, 0.12);
    color: #8a5a12;
    flex-direction: column;
    align-items: stretch;
}

.tp-validation-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tp-validation-header button {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
}

.tp-validation-list {
    margin: 8px 0 0;
    padding-left: 22px;
    font-size: 0.82rem;
}

/* ---------- Clinical alerts (editor) ---------- */

.tp-clinical-alerts-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-inline-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: var(--tp-radius-sm);
    padding: 10px 12px;
    font-size: 0.85rem;
}

.tp-inline-alert i {
    margin-top: 2px;
}

.tp-inline-alert-info {
    background: rgba(59, 158, 240, 0.1);
    color: #0f6e8c;
}

.tp-inline-alert-warning {
    background: rgba(242, 169, 60, 0.12);
    color: #8a5a12;
}

.tp-inline-alert-critical {
    background: rgba(229, 88, 79, 0.12);
    color: var(--tp-danger);
}

/* ---------- Templates (TemplatePicker) ---------- */

.tp-template-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
}

.tp-template-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 10px 12px;
}

.tp-template-row-info strong {
    margin-right: 6px;
}

.tp-template-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* ---------- Preview badges (uso contínuo / controlado) ---------- */

.tp-preview-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(15, 110, 140, 0.12);
    color: #0f6e8c;
    margin-left: 6px;
}

.tp-preview-badge-warning {
    background: rgba(229, 88, 79, 0.12);
    color: #b03a32;
}

/* ---------- Medication quick-create trigger (dentro do autocomplete) ---------- */

.tp-medication-quick-create-trigger {
    color: var(--tp-primary);
    font-weight: 600;
    border-top: 1px solid var(--tp-border);
}

/* ---------- Shortcuts help modal ---------- */

.tp-shortcut-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-shortcut-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tp-shortcut-row kbd {
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.78rem;
    min-width: 90px;
    text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
    .tp-item-card-body {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .tp-item-card-body {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Document Engine — Sprint 08.3 (impressão, PDF, assinatura, versionamento)
   ===================================================================== */

.tp-doc-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 210mm;
    margin: 0 auto 16px;
    padding: 10px 14px;
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
}

.tp-doc-toolbar-spacer {
    flex: 1 1 auto;
}

.tp-doc-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--tp-radius-sm);
    border: 1px solid var(--tp-border);
    background: var(--tp-surface);
    color: var(--tp-text);
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.tp-doc-toolbar-btn:hover {
    border-color: var(--tp-primary);
    color: var(--tp-primary);
}

/* ---------- Página A4 ---------- */

.tp-doc-page {
    position: relative;
    background: #fff;
    color: #1a1a1a;
    font-size: 0.88rem;
}

.tp-doc-a4 {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto 32px;
    padding: 16mm 14mm;
    box-shadow: var(--tp-shadow-lg);
}

.tp-doc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 2px solid var(--tp-primary);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.tp-doc-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tp-doc-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.tp-doc-header-identity h1 {
    font-size: 1.15rem;
    margin: 0;
    color: var(--tp-primary);
}

.tp-doc-fantasy-name {
    margin: 0;
    font-size: 0.82rem;
    color: var(--tp-muted);
}

.tp-doc-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 4px 0 0;
    font-size: 0.72rem;
    color: var(--tp-muted);
}

.tp-doc-header-doc {
    text-align: right;
    font-size: 0.8rem;
    color: var(--tp-muted);
}

.tp-doc-header-doc h2 {
    font-size: 1rem;
    margin: 0 0 4px;
    color: var(--tp-text);
}

.tp-doc-number {
    font-weight: 700;
    letter-spacing: 0.03em;
    margin: 0 0 4px;
}

.tp-doc-status-badge {
    display: inline-block;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
}

/* ---------- Partes (paciente/tutor/veterinário) ---------- */

.tp-doc-parties {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    background: var(--tp-bg);
    border-radius: var(--tp-radius-sm);
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 0.82rem;
}

.tp-doc-parties .label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tp-muted);
}

.tp-doc-parties strong {
    display: block;
    margin: 2px 0;
}

.tp-doc-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: 0.8rem;
    margin-bottom: 14px;
    color: var(--tp-muted);
}

.tp-doc-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--tp-border);
}

/* ---------- Seções e medicamentos ---------- */

.tp-doc-section {
    margin-bottom: 20px;
    page-break-inside: avoid;
}

.tp-doc-section h3 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--tp-primary);
    border-bottom: 1px solid var(--tp-border);
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.tp-doc-medication {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 10px 14px;
    margin-bottom: 10px;
    page-break-inside: avoid;
}

.tp-doc-medication-title {
    font-size: 0.92rem;
}

.tp-doc-medication-meta {
    font-size: 0.8rem;
    color: var(--tp-muted);
    margin-top: 2px;
}

.tp-doc-medication-notes {
    font-size: 0.8rem;
    margin: 4px 0 0;
}

.tp-doc-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(15, 110, 140, 0.12);
    color: #0f6e8c;
    margin-left: 6px;
}

.tp-doc-badge-warning {
    background: rgba(229, 88, 79, 0.12);
    color: #b03a32;
}

.tp-doc-instructions p {
    font-size: 0.85rem;
}

/* ---------- Assinatura + QR ---------- */

.tp-doc-signoff {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-top: 32px;
}

.tp-doc-signature {
    text-align: center;
    min-width: 200px;
    font-size: 0.8rem;
}

.tp-doc-signature-line {
    border-top: 1px solid #1c2733;
    margin-bottom: 4px;
    width: 100%;
}

.tp-doc-signature-img {
    max-height: 50px;
    max-width: 180px;
    display: block;
    margin: 0 auto 4px;
}

.tp-doc-signature strong {
    display: block;
    font-size: 0.85rem;
}

.tp-doc-signature span {
    display: block;
    color: var(--tp-muted);
    font-size: 0.72rem;
}

.tp-doc-signature-note {
    font-style: italic;
    opacity: 0.7;
}

.tp-doc-qrcode {
    text-align: center;
    font-size: 0.65rem;
    color: var(--tp-muted);
}

.tp-doc-qrcode-placeholder {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--tp-border);
    border-radius: var(--tp-radius-sm);
    font-size: 1.6rem;
    color: var(--tp-border);
    margin: 0 auto 4px;
}

.tp-doc-qrcode-code {
    display: block;
    letter-spacing: 0.05em;
}

/* ---------- Rodapé ---------- */

.tp-doc-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    font-size: 0.68rem;
    color: var(--tp-muted);
    border-top: 1px solid var(--tp-border);
    padding-top: 8px;
    margin-top: 24px;
}

/* ---------- Marca d'água ---------- */

.tp-doc-watermark {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(229, 88, 79, 0.12);
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
    text-transform: uppercase;
}

/* ---------- Version badge ---------- */

.tp-version-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    color: var(--tp-muted);
    vertical-align: middle;
}

/* ---------- DocumentHistory ---------- */

.tp-doc-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
}

.tp-doc-history-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 8px 12px;
    font-size: 0.82rem;
}

.tp-doc-history-item i {
    margin-top: 2px;
    color: var(--tp-muted);
}

.tp-doc-history-item .tp-doc-history-meta {
    color: var(--tp-muted);
    font-size: 0.72rem;
}

/* ---------- Impressão ---------- */

@media print {
    .tp-doc-toolbar,
    .d-print-none {
        display: none !important;
    }

    .tp-doc-a4 {
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    .tp-doc-section,
    .tp-doc-medication {
        page-break-inside: avoid;
    }

    @page {
        size: A4;
        margin: 16mm 14mm;
    }

    .tp-doc-page-counter::after {
        content: counter(page);
    }
}

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
    .tp-doc-a4 {
        width: 100%;
        min-height: 0;
        padding: 8mm;
    }

    .tp-doc-parties {
        grid-template-columns: 1fr;
    }

    .tp-doc-watermark {
        font-size: 3rem;
    }
}

@media (max-width: 575px) {
    .tp-doc-header {
        flex-direction: column;
    }

    .tp-doc-header-doc {
        text-align: left;
    }

    .tp-doc-signoff {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
}

/* =====================================================================
   Prescription Library — Sprint 08.4
   ===================================================================== */

.tp-favorite-star {
    background: none;
    border: none;
    color: var(--tp-border);
    font-size: 1rem;
    line-height: 1;
    padding: 4px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.tp-favorite-star:hover {
    color: #f2a93c;
    transform: scale(1.15);
}

.tp-favorite-star.is-favorite {
    color: #f2a93c;
}

.tp-prescription-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- PrescriptionLibrary modal rows ---------- */

.tp-library-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
}

.tp-library-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 10px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tp-library-row:hover {
    border-color: var(--tp-secondary);
    box-shadow: var(--tp-shadow);
}

.tp-library-row-info strong {
    margin-right: 6px;
}

.tp-library-row-actions {
    flex: 0 0 auto;
}

/* =====================================================================
   Diagnostic Orders — Sprint 09.2 (Solicitação de Exames). Especialização
   do Clinical Orders Workspace: reaproveita .tp-item-card/.tp-item-field/
   --tp-* na íntegra, apenas com os pequenos ajustes abaixo para os blocos
   de Resultado/Anexos/Histórico dentro do ExamRequestCard.
   ===================================================================== */

.tp-exam-result-block {
    border-top: 1px dashed var(--tp-border);
    padding-top: 12px;
    margin-top: 4px;
}

.tp-exam-result-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 767px) {
    .tp-exam-result-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .tp-exam-result-grid {
        grid-template-columns: 1fr;
    }
}

.tp-exam-attachments-toggle-wrapper {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.tp-exam-attachments-wrapper,
.tp-exam-history-wrapper {
    grid-column: 1 / -1;
    margin-top: 10px;
}

.tp-exam-history-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    margin-bottom: 6px;
}

.tp-search-group-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tp-muted);
    padding: 6px 10px 2px;
}

/* =====================================================================
   Procedure Workspace — Sprint 09.3 (Procedimentos Clínicos).
   Especialização do Clinical Orders Workspace: reaproveita
   .tp-item-card/.tp-item-field/--tp-*/.tp-exam-* na íntegra, apenas com
   os pequenos ajustes abaixo para Preparação/Execução/Checklist/
   Materiais/Custos/Conclusão dentro do ProcedureCard.
   ===================================================================== */

.tp-procedure-preparation-block,
.tp-procedure-execution-block,
.tp-procedure-checklist-block,
.tp-procedure-materials-block,
.tp-procedure-cost-block,
.tp-procedure-summary-block {
    border-top: 1px dashed var(--tp-border);
    padding-top: 12px;
    margin-top: 4px;
}

.tp-procedure-preparation-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.tp-procedure-execution-grid,
.tp-procedure-cost-grid,
.tp-procedure-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 767px) {
    .tp-procedure-execution-grid,
    .tp-procedure-cost-grid,
    .tp-procedure-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .tp-procedure-execution-grid,
    .tp-procedure-cost-grid,
    .tp-procedure-summary-grid {
        grid-template-columns: 1fr;
    }
}

.tp-procedure-execution-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tp-procedure-step-pill {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    color: var(--tp-muted);
}

.tp-procedure-step-pill.is-active {
    background: var(--tp-primary);
    border-color: var(--tp-primary);
    color: #fff;
}

.tp-procedure-checklist-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--tp-border);
}

.tp-procedure-checklist-item:last-child {
    border-bottom: 0;
}

.tp-checklist-check {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 200px;
    cursor: pointer;
}

.tp-checklist-required-badge {
    font-size: 0.62rem;
}

.tp-procedure-checklist-notes {
    flex: 1 1 100%;
}

.tp-procedure-material-row td {
    vertical-align: middle;
}

/* =====================================================================
   Diagnostic Results Engine — Sprint 09.4 (Resultados/Laudos de Exames).
   Workspace dedicado, reaproveita .tp-clinical-*/.tp-preview-*/
   .tp-doc-*/.tp-attachment-*/.tp-exam-history-card na íntegra; apenas os
   ajustes abaixo (badge de status próprio do laudo e o lightbox da
   galeria de anexos) são novos.
   ===================================================================== */

.tp-exam-result-status-badge {
    font-size: 0.72rem;
    padding: 0.32em 0.6em;
}

.tp-history-icon {
    width: 26px;
    text-align: center;
    flex-shrink: 0;
    padding-top: 2px;
}

.tp-exam-history-list {
    max-height: 480px;
    overflow-y: auto;
}

.tp-version-entry {
    cursor: pointer;
    transition: background-color .15s ease;
}

.tp-version-entry:hover {
    background-color: var(--tp-surface-hover, rgba(15, 110, 140, 0.06));
}

.tp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tp-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 32, 0.85);
}

.tp-lightbox-content {
    position: relative;
    z-index: 1;
    max-width: min(90vw, 960px);
    max-height: 90vh;
    background: #fff;
    border-radius: var(--tp-radius-md, 10px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-lightbox-body img,
.tp-lightbox-body iframe {
    max-width: 100%;
    max-height: 75vh;
    display: block;
    margin: 0 auto;
    border: 0;
}

.tp-lightbox-body iframe {
    width: min(85vw, 900px);
    height: 75vh;
}

.tp-lightbox-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.tp-lightbox-caption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--tp-muted);
}

/* =====================================================================
   Clinical Orders Premium — Sprint 09.5 (UX, Produtividade, Preparação
   para IA). Reaproveita .tp-clinical-*/.tp-item-*/.tp-action-btn/
   .tp-empty-state-premium/.tp-skeleton-* na íntegra; os blocos abaixo
   cobrem apenas o que é novo: Toolbar, busca inteligente unificada,
   Biblioteca de Protocolos/Templates, Sugestões, Indicadores e
   microinterações/responsividade/acessibilidade do Workspace.
   ===================================================================== */

/* --- Toolbar / busca inteligente unificada -------------------------- */
.tp-clinical-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    background: var(--tp-surface);
    border-bottom: 1px solid var(--tp-border);
    flex-wrap: wrap;
}

.tp-clinical-toolbar-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 320px;
    min-width: 220px;
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 6px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tp-clinical-toolbar-search:focus-within {
    border-color: var(--tp-secondary);
    box-shadow: 0 0 0 3px rgba(15, 110, 140, 0.12);
}

.tp-clinical-toolbar-search i {
    color: var(--tp-muted);
    font-size: 0.85rem;
}

.tp-clinical-toolbar-search input {
    border: 0;
    background: transparent;
    flex: 1 1 auto;
    font-size: 0.85rem;
    padding: 2px 0;
    outline: none;
}

.tp-toolbar-kbd {
    font-size: 0.65rem;
    color: var(--tp-muted);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}

.tp-clinical-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tp-orders-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 360px;
    overflow-y: auto;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    box-shadow: var(--tp-shadow-lg);
    z-index: 40;
    padding: 6px;
    animation: tp-fade-in .12s ease;
}

.tp-orders-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--tp-radius-sm);
    cursor: pointer;
    transition: background-color .12s ease;
}

.tp-orders-autocomplete-item:hover,
.tp-orders-autocomplete-item:focus-visible {
    background: var(--tp-bg);
    outline: none;
}

.tp-orders-autocomplete-item i {
    color: var(--tp-secondary);
    width: 18px;
    text-align: center;
}

.tp-orders-autocomplete-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tp-orders-autocomplete-item-body strong {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Biblioteca de Protocolos / Templates ---------------------------- */
.tp-protocol-tabs {
    border-bottom: 1px solid var(--tp-border);
}

.tp-protocol-tabs .nav-link {
    font-size: 0.82rem;
    color: var(--tp-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    transition: color .15s ease, border-color .15s ease;
}

.tp-protocol-tabs .nav-link i {
    margin-right: 4px;
}

.tp-protocol-tabs .nav-link.active {
    color: var(--tp-secondary);
    border-bottom-color: var(--tp-secondary);
    background: transparent;
}

.tp-protocol-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 55vh;
    overflow-y: auto;
}

.tp-protocol-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    background: var(--tp-surface);
    transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}

.tp-protocol-card:hover {
    box-shadow: var(--tp-shadow-sm);
    border-color: var(--tp-secondary);
}

.tp-protocol-card-main {
    min-width: 0;
    flex: 1 1 auto;
}

.tp-protocol-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
}

.tp-protocol-card-description {
    font-size: 0.8rem;
    color: var(--tp-muted);
    margin: 6px 0 0;
}

.tp-protocol-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.tp-protocol-item-row,
.tp-protocol-checklist-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.tp-protocol-item-row .tp-protocol-item-type {
    flex: 0 0 130px;
}

.tp-protocol-item-row .tp-protocol-item-name {
    flex: 1 1 auto;
}

.tp-protocol-item-row .tp-protocol-item-category {
    flex: 0 0 160px;
}

.tp-protocol-item-required-wrap {
    flex: 0 0 auto;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.tp-protocol-checklist-row .tp-protocol-checklist-text {
    flex: 1 1 auto;
}

/* --- Sugestões (ClinicalOrdersSuggestionCard) ------------------------ */
.tp-suggestion-card .card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.tp-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    margin-bottom: 6px;
    transition: background-color .12s ease, border-color .12s ease;
}

.tp-suggestion-item:hover {
    background: var(--tp-bg);
    border-color: var(--tp-secondary);
}

.tp-suggestion-item i {
    color: var(--tp-secondary);
    width: 18px;
    text-align: center;
}

.tp-suggestion-item-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.tp-suggestion-badge {
    background: var(--tp-bg);
    color: var(--tp-muted);
    border: 1px solid var(--tp-border);
    font-weight: 500;
    font-size: 0.65rem;
}

.tp-suggestion-use-btn {
    flex-shrink: 0;
    border: 1px solid var(--tp-border);
    background: var(--tp-surface);
    border-radius: 999px;
    width: 26px;
    height: 26px;
    color: var(--tp-secondary);
    transition: background-color .12s ease, color .12s ease;
}

.tp-suggestion-use-btn:hover {
    background: var(--tp-secondary);
    color: #fff;
}

/* --- Indicadores ------------------------------------------------------ */
.tp-clinical-orders-indicators {
    margin-top: 16px;
}

/* --- Atalhos de teclado ------------------------------------------------ */
.tp-shortcut-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}

.tp-shortcut-list kbd {
    background: var(--tp-bg);
    color: var(--tp-text);
    border: 1px solid var(--tp-border);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.75rem;
    box-shadow: 0 1px 0 var(--tp-border);
}

/* --- Loading states (LoadingOverlay / LoadingButton) ------------------ */
.tp-loading-overlay .fa-spinner {
    color: var(--tp-secondary);
    font-size: 1.4rem;
}

.tp-btn-loading {
    pointer-events: none;
    opacity: 0.75;
}

/* --- Microinterações genéricas ---------------------------------------- */
@keyframes tp-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tp-clinical-icon-btn,
.tp-action-btn,
.tp-icon-btn-sm {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}

.tp-action-btn:active,
.tp-clinical-icon-btn:active,
.tp-icon-btn-sm:active {
    transform: scale(0.96);
}

.tp-protocol-card,
.tp-suggestion-item,
.tp-record-indicator {
    animation: tp-fade-in .18s ease;
}

/* --- Acessibilidade: foco visível consistente -------------------------- */
.tp-clinical-toolbar-search input:focus-visible,
.tp-protocol-search-input:focus-visible,
.tp-action-btn:focus-visible,
.tp-clinical-icon-btn:focus-visible,
.tp-icon-btn-sm:focus-visible,
.tp-protocol-card-actions button:focus-visible,
.tp-suggestion-use-btn:focus-visible {
    outline: 2px solid var(--tp-secondary);
    outline-offset: 2px;
}

/* --- Responsividade ----------------------------------------------------- */
@media (max-width: 991.98px) {
    .tp-clinical-toolbar {
        padding: 8px 14px;
    }

    .tp-clinical-toolbar-search {
        flex: 1 1 100%;
        order: 2;
    }

    .tp-clinical-toolbar-actions {
        order: 1;
        width: 100%;
        justify-content: space-between;
    }

    .tp-toolbar-kbd {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .tp-clinical-toolbar-actions span {
        display: none;
    }

    .tp-clinical-toolbar-actions .tp-action-btn {
        padding: 6px 10px;
    }

    .tp-protocol-card {
        flex-direction: column;
    }

    .tp-protocol-card-actions {
        align-self: flex-end;
    }

    .tp-protocol-item-row {
        flex-wrap: wrap;
    }

    .tp-protocol-item-row .tp-protocol-item-type,
    .tp-protocol-item-row .tp-protocol-item-category {
        flex: 1 1 45%;
    }
}

/* =====================================================================
   Teleconsultation Workspace — Sprint 10.1. Modo do Atendimento Clínico
   existente (não é módulo separado): reaproveita .tp-clinical-*/
   .tp-item-card/.tp-action-btn/.tp-empty-state-premium na íntegra. Os
   blocos abaixo cobrem apenas a aba "Videochamada" — elegante, muito
   espaço em branco, sem aparência de videoconferência genérica.
   ===================================================================== */

.tp-action-btn.tp-action-danger {
    background: linear-gradient(135deg, var(--tp-danger), #b8342c);
    border-color: transparent;
    color: #fff;
}

.tp-teleconsultation-workspace {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tp-tc-skeleton {
    padding: 24px 0;
}

/* --- Header ------------------------------------------------------------ */
.tp-tc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(15, 110, 140, 0.06), rgba(18, 168, 135, 0.04));
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
}

.tp-tc-header-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.tp-tc-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--tp-text);
    font-size: 0.9rem;
}

.tp-tc-connection-quality {
    font-size: 0.8rem;
    color: var(--tp-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tp-tc-connection-quality i {
    color: var(--tp-accent);
}

.tp-tc-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tp-teleconsultation-status-badge {
    font-size: 0.72rem;
    padding: 0.32em 0.6em;
}

/* --- Waiting Room -------------------------------------------------------- */
.tp-tc-waiting-room {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 24px;
    text-align: center;
    background: var(--tp-surface);
    border: 1px dashed var(--tp-border);
    border-radius: var(--tp-radius);
}

.tp-tc-waiting-room-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 158, 240, 0.12);
    color: var(--tp-info);
    font-size: 1.6rem;
    animation: tp-tc-pulse 2s ease-in-out infinite;
}

@keyframes tp-tc-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.8; }
}

.tp-tc-waiting-room-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--tp-text);
    margin: 0;
}

.tp-tc-waiting-room-indicators {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.82rem;
    color: var(--tp-muted);
}

.tp-tc-waiting-room-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* --- Layout principal --------------------------------------------------- */
.tp-tc-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.tp-tc-center-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* --- Painel de Vídeo ------------------------------------------------------ */
.tp-tc-video-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    background: var(--tp-primary-dark);
    border-radius: var(--tp-radius);
    padding: 12px;
    position: relative;
}

.tp-tc-video-tile {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--tp-radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, #16324f, #0a1d33);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow .2s ease;
}

.tp-tc-video-tile-online {
    box-shadow: 0 0 0 2px var(--tp-accent);
}

.tp-tc-video-placeholder {
    color: rgba(255, 255, 255, 0.25);
    font-size: 3rem;
}

.tp-tc-video-tile-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent);
}

.tp-tc-video-name {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.tp-tc-video-indicators {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
}

.tp-tc-connection-dot {
    font-size: 0.5rem;
    color: var(--tp-muted);
}

.tp-tc-connection-dot[data-status="online"] {
    color: var(--tp-accent);
}

.tp-tc-pet-tile {
    background: linear-gradient(135deg, #1c3f66, #0f2a4a);
    grid-column: span 2;
}

.tp-tc-pet-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.6rem;
}

.tp-tc-pet-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 992px) {
    .tp-tc-pet-tile {
        grid-column: auto;
    }
}

/* --- Toolbar -------------------------------------------------------------- */
.tp-tc-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 999px;
    width: fit-content;
    margin: 0 auto;
}

.tp-tc-toolbar-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--tp-border);
    background: var(--tp-bg);
    color: var(--tp-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
}

.tp-tc-toolbar-btn:hover:not(:disabled) {
    background: var(--tp-secondary);
    color: #fff;
    transform: translateY(-1px);
}

.tp-tc-toolbar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tp-tc-toolbar-btn-off {
    background: var(--tp-danger);
    color: #fff;
    border-color: transparent;
}

.tp-tc-toolbar-btn-danger {
    background: var(--tp-danger);
    color: #fff;
    border-color: transparent;
}

.tp-tc-toolbar-btn-danger:hover {
    background: #b8342c;
    color: #fff;
}

/* --- Painéis genéricos (Participantes/Chat/Ações) -------------------------- */
.tp-tc-panel-block {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    padding: 16px;
}

.tp-tc-panel-collapsed .tp-tc-participants-list,
.tp-tc-panel-collapsed .tp-tc-chat-messages,
.tp-tc-panel-collapsed .tp-tc-chat-quick-replies,
.tp-tc-panel-collapsed .tp-tc-chat-form {
    display: none;
}

.tp-tc-participants-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.tp-tc-participant-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    font-size: 0.82rem;
}

.tp-tc-participant-row i {
    color: var(--tp-secondary);
    width: 16px;
    text-align: center;
}

.tp-tc-participant-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Chat ------------------------------------------------------------------ */
.tp-tc-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 10px;
}

.tp-tc-chat-message {
    background: var(--tp-bg);
    border-radius: var(--tp-radius-sm);
    padding: 8px 10px;
    font-size: 0.82rem;
}

.tp-tc-chat-message strong {
    display: block;
    font-size: 0.72rem;
    color: var(--tp-secondary);
    margin-bottom: 2px;
}

.tp-tc-chat-message p {
    margin: 0;
    color: var(--tp-text);
}

.tp-tc-chat-message span {
    display: block;
    font-size: 0.65rem;
    margin-top: 4px;
}

.tp-tc-chat-message[data-sender-type="veterinarian"] {
    background: rgba(15, 110, 140, 0.08);
}

.tp-tc-chat-message[data-sender-type="tutor"] {
    background: rgba(18, 168, 135, 0.08);
}

.tp-tc-chat-system-message {
    text-align: center;
    font-size: 0.72rem;
    color: var(--tp-muted);
    font-style: italic;
    padding: 4px 0;
}

.tp-tc-chat-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.tp-tc-quick-reply-btn {
    border: 1px solid var(--tp-border);
    background: var(--tp-bg);
    color: var(--tp-muted);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    transition: background-color .15s ease, color .15s ease;
}

.tp-tc-quick-reply-btn:hover {
    background: var(--tp-secondary);
    color: #fff;
    border-color: transparent;
}

.tp-tc-chat-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tp-tc-chat-form input {
    flex: 1 1 auto;
}

/* --- Ações Rápidas ---------------------------------------------------------- */
.tp-tc-clinical-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.tp-tc-clinical-actions-grid .tp-action-btn {
    width: 100%;
    justify-content: flex-start;
}

/* --- Responsividade --------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .tp-tc-main-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

@media (max-width: 991.98px) {
    .tp-tc-main-grid {
        grid-template-columns: 1fr;
    }

    .tp-tc-side-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

@media (max-width: 767.98px) {
    .tp-tc-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tp-tc-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .tp-tc-video-panel {
        grid-template-columns: 1fr;
    }

    .tp-tc-pet-tile {
        grid-column: auto;
    }

    .tp-tc-side-panel {
        grid-template-columns: 1fr;
    }

    .tp-tc-side-panel:not(.tp-tc-side-panel-open) {
        display: none;
    }

    .tp-tc-clinical-actions-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Acessibilidade ---------------------------------------------------------- */
.tp-tc-toolbar-btn:focus-visible,
.tp-tc-quick-reply-btn:focus-visible,
.tp-tc-chat-form input:focus-visible {
    outline: 2px solid var(--tp-secondary);
    outline-offset: 2px;
}

/* =====================================================================
   Video Engine — Sprint 10.2 (WebRTC preparado, MediaDevices API real).
   Integrado ao MESMO Teleconsultation Workspace (Sprint 10.1): reaproveita
   .tp-tc-video-panel/.tp-tc-video-tile/.tp-tc-toolbar-btn na íntegra. Os
   blocos abaixo cobrem apenas o que é novo — vídeo local real, medidor de
   áudio, indicadores de rede/conexão, compartilhamento de tela e o
   VideoSettingsModal.
   ===================================================================== */

/* --- ParticipantGrid: layout automático por quantidade -------------------- */
.tp-tc-video-panel[data-participant-count="1"] {
    grid-template-columns: 1fr;
}

.tp-tc-video-panel[data-participant-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-tc-video-panel[data-participant-count="3"],
.tp-tc-video-panel[data-participant-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 992px) {
    .tp-tc-video-panel[data-participant-count="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* --- LocalVideoCard / RemoteVideoCard -------------------------------------- */
.tp-tc-video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    animation: tp-fade-in .25s ease;
}

.tp-tc-video-el.tp-tc-mirrored {
    transform: scaleX(-1);
}

.tp-tc-video-tile:has(.tp-tc-video-el:not(.d-none)) .tp-tc-video-placeholder {
    display: none;
}

/* --- Loading states: Skeleton Video / Loading Camera ----------------------- */
.tp-tc-video-skeleton {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(10, 29, 51, 0.6);
    color: rgba(255, 255, 255, 0.7);
}

.tp-tc-skeleton-block {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

/* --- AudioMeter -------------------------------------------------------------- */
.tp-tc-audio-meter {
    position: absolute;
    left: 10px;
    bottom: 34px;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}

.tp-tc-audio-meter span {
    width: 4px;
    height: 20%;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    transition: height .1s ease, background-color .1s ease;
}

.tp-tc-audio-meter span:nth-child(1) { height: 30%; }
.tp-tc-audio-meter span:nth-child(2) { height: 50%; }
.tp-tc-audio-meter span:nth-child(3) { height: 75%; }
.tp-tc-audio-meter span:nth-child(4) { height: 50%; }
.tp-tc-audio-meter span:nth-child(5) { height: 30%; }

.tp-tc-audio-meter span.tp-tc-audio-meter-active {
    background: var(--tp-accent);
}

.tp-tc-audio-meter-lg {
    position: static;
    height: 28px;
    gap: 4px;
}

.tp-tc-audio-meter-lg span {
    width: 6px;
    background: var(--tp-border);
}

.tp-tc-audio-meter-lg span.tp-tc-audio-meter-active {
    background: var(--tp-accent);
}

/* --- Compartilhamento de tela ------------------------------------------------ */
.tp-tc-screen-share-tile {
    grid-column: 1 / -1;
    position: relative;
    aspect-ratio: 16 / 8;
    border-radius: var(--tp-radius-sm);
    overflow: hidden;
    background: #000;
}

.tp-tc-screen-share-tile .tp-tc-video-el {
    object-fit: contain;
    background: #000;
}

/* --- Fallback WebRTC não suportado (Sprint 10.8) ---------------------------- */
.tp-tc-webrtc-fallback {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 20px;
    text-align: center;
    background: var(--tp-surface);
    border: 1px dashed var(--tp-border);
    border-radius: var(--tp-radius);
}

.tp-tc-webrtc-fallback i {
    font-size: 2rem;
    color: var(--tp-danger);
}

.tp-tc-webrtc-fallback p {
    color: var(--tp-muted);
    font-size: 0.88rem;
    max-width: 420px;
    margin: 0;
}

/* --- ConnectionStatus / NetworkIndicator ------------------------------------ */
.tp-tc-status-bar {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.tp-tc-connection-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--tp-muted);
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
}

.tp-tc-connection-status i {
    font-size: 0.5rem;
    color: var(--tp-muted);
}

.tp-tc-connection-status[data-state="conectado"] i { color: var(--tp-accent); }
.tp-tc-connection-status[data-state="conectando"] i { color: var(--tp-info); animation: tp-tc-blink 1s ease-in-out infinite; }
.tp-tc-connection-status[data-state="reconectando"] i { color: var(--tp-warning); animation: tp-tc-blink 1s ease-in-out infinite; }
.tp-tc-connection-status[data-state="sem_conexao"] i,
.tp-tc-connection-status[data-state="desconectado"] i { color: var(--tp-danger); }

@keyframes tp-tc-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.tp-tc-connection-quality[data-level="excelente"] i,
.tp-tc-connection-quality[data-level="boa"] i { color: var(--tp-accent); }
.tp-tc-connection-quality[data-level="regular"] i { color: var(--tp-warning); }
.tp-tc-connection-quality[data-level="ruim"] i,
.tp-tc-connection-quality[data-level="sem_conexao"] i { color: var(--tp-danger); }

/* --- Toolbar: estados ativo/inativo (mic/câmera/compartilhar) -------------- */
.tp-tc-toolbar-btn[data-active="0"] {
    background: var(--tp-danger);
    color: #fff;
    border-color: transparent;
}

.tp-tc-toolbar-btn[data-active="1"] {
    background: var(--tp-bg);
}

#tpTcShareBtn[data-active="1"] {
    background: var(--tp-secondary);
    color: #fff;
    border-color: transparent;
}

/* --- Microinterações ---------------------------------------------------------- */
.tp-tc-video-tile,
.tp-tc-connection-status,
.tp-tc-connection-quality {
    transition: box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

/* --- Responsividade ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .tp-tc-audio-meter-lg span {
        width: 5px;
    }
}

/* --- Pré-visualização (Sprint 10.6) — VideoSettingsModal ------------------- */
.tp-video-settings-preview-wrap {
    position: relative;
    background: var(--tp-primary-dark);
    border-radius: var(--tp-radius-sm);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 14px;
}

.tp-video-settings-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-video-settings-preview.tp-tc-mirrored {
    transform: scaleX(-1);
}

.tp-video-settings-preview-empty {
    position: absolute;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 991.98px) {
    .tp-tc-video-panel[data-participant-count] {
        grid-template-columns: 1fr;
    }

    .tp-tc-toolbar {
        flex-wrap: wrap;
        border-radius: var(--tp-radius);
    }
}

@media (max-width: 767.98px) {
    .tp-tc-audio-meter {
        display: none;
    }

    .tp-tc-status-bar {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* --- Acessibilidade ------------------------------------------------------------ */
.tp-tc-video-el:focus-visible {
    outline: 2px solid var(--tp-secondary);
    outline-offset: 2px;
}

/* =====================================================================
   Clinical Collaboration Workspace — Sprint 10.3 (chat/arquivos/imagens/
   anotações/quadro clínico). Reaproveita as variáveis e o vocabulário
   visual já usados pelo Teleconsultation Workspace (tp-tc-*), com o
   prefixo próprio tp-cc- (Clinical Collaboration).
   ===================================================================== */

.tp-cc-workspace {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tp-cc-skeleton {
    padding: 24px 0;
}

.tp-cc-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.tp-cc-center-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.tp-cc-side-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tp-cc-panel-block {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    padding: 16px;
}

.tp-cc-panel-collapsed .tp-cc-gallery-grid,
.tp-cc-panel-collapsed .tp-cc-annotation-list,
.tp-cc-panel-collapsed .tp-cc-annotation-form,
.tp-cc-panel-collapsed .tp-cc-board-categories,
.tp-cc-panel-collapsed .tp-cc-board-form {
    display: none;
}

/* --- Chat -------------------------------------------------------------- */
.tp-cc-chat {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.tp-cc-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 480px;
    min-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 10px;
}

.tp-cc-chat-message {
    position: relative;
    background: var(--tp-bg);
    border-radius: var(--tp-radius-sm);
    padding: 8px 10px;
    font-size: 0.82rem;
}

.tp-cc-chat-message[data-sender-type="veterinarian"] {
    background: rgba(15, 110, 140, 0.08);
}

.tp-cc-chat-message[data-sender-type="tutor"] {
    background: rgba(18, 168, 135, 0.08);
}

.tp-cc-chat-message-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.tp-cc-chat-message-header strong {
    font-size: 0.72rem;
    color: var(--tp-secondary);
}

.tp-cc-chat-message-header span {
    margin-left: auto;
    font-size: 0.65rem;
    color: var(--tp-muted);
}

.tp-cc-chat-message p {
    margin: 0;
    color: var(--tp-text);
    word-break: break-word;
}

.tp-cc-chat-pin-indicator {
    color: var(--tp-accent);
    font-size: 0.7rem;
}

.tp-cc-chat-edited-tag {
    display: block;
    font-size: 0.62rem;
    color: var(--tp-muted);
    font-style: italic;
    margin-top: 2px;
}

.tp-cc-chat-reply-quote {
    border-left: 2px solid var(--tp-secondary);
    padding: 2px 8px;
    margin: 4px 0;
    font-size: 0.72rem;
    color: var(--tp-muted);
    background: rgba(0, 0, 0, 0.03);
    border-radius: 0 4px 4px 0;
}

.tp-cc-chat-reply-quote strong {
    display: block;
    color: var(--tp-secondary);
}

.tp-cc-chat-system-message {
    text-align: center;
    font-size: 0.72rem;
    color: var(--tp-muted);
    font-style: italic;
    padding: 4px 0;
}

.tp-cc-chat-message-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    opacity: 0;
    transition: opacity .15s ease;
}

.tp-cc-chat-message:hover .tp-cc-chat-message-actions {
    opacity: 1;
}

.tp-icon-btn-xs {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--tp-border);
    background: var(--tp-bg);
    color: var(--tp-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    transition: background-color .15s ease, color .15s ease;
}

.tp-icon-btn-xs:hover {
    background: var(--tp-secondary);
    color: #fff;
}

.tp-cc-chat-attachment-image {
    max-width: 220px;
    max-height: 220px;
    border-radius: var(--tp-radius-sm);
    margin-top: 4px;
    display: block;
}

.tp-cc-chat-attachment-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--tp-secondary);
}

.tp-cc-chat-pinned {
    background: rgba(242, 169, 60, 0.08);
    border: 1px solid rgba(242, 169, 60, 0.35);
    border-radius: var(--tp-radius-sm);
    padding: 8px 10px;
    margin-bottom: 10px;
}

.tp-cc-chat-pinned-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.76rem;
    padding: 2px 0;
}

.tp-cc-chat-reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--tp-bg);
    border-left: 3px solid var(--tp-secondary);
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 8px;
}

.tp-cc-chat-reply-content {
    min-width: 0;
}

.tp-cc-chat-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tp-cc-chat-form input[type="text"] {
    flex: 1 1 auto;
}

.tp-cc-chat-actions {
    display: flex;
    gap: 4px;
}

/* --- Galeria -------------------------------------------------------------- */
.tp-cc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.tp-cc-gallery-thumb {
    display: block;
    aspect-ratio: 1;
    border-radius: var(--tp-radius-sm);
    overflow: hidden;
    background: var(--tp-bg);
}

.tp-cc-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .15s ease;
}

.tp-cc-gallery-thumb:hover img {
    transform: scale(1.06);
}

/* --- Anotações -------------------------------------------------------------- */
.tp-cc-annotation-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.tp-cc-annotation-item {
    position: relative;
    background: var(--tp-bg);
    border-radius: var(--tp-radius-sm);
    padding: 8px 10px;
    font-size: 0.8rem;
}

.tp-cc-annotation-item .tp-icon-btn-xs {
    position: absolute;
    top: 6px;
    right: 6px;
}

.tp-cc-annotation-badge {
    background: var(--tp-secondary);
    color: #fff;
    font-size: 0.6rem;
    margin-bottom: 4px;
}

.tp-cc-annotation-badge[data-type="important_point"] {
    background: var(--tp-danger);
}

.tp-cc-annotation-badge[data-type="hypothesis"] {
    background: #7a5cc7;
}

.tp-cc-annotation-badge[data-type="pending"] {
    background: #f2a93c;
    color: #2a2205;
}

.tp-cc-annotation-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* --- Quadro Clínico (Whiteboard) --------------------------------------------- */
.tp-cc-board-categories {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 360px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.tp-cc-board-category-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tp-secondary);
    text-transform: uppercase;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.tp-cc-board-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tp-cc-board-card {
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 6px 8px;
    font-size: 0.78rem;
}

.tp-cc-board-card[data-status="concluido"] {
    opacity: 0.55;
    text-decoration: line-through;
}

.tp-cc-board-card-title {
    margin: 0;
}

.tp-cc-board-card-desc {
    margin: 2px 0 0;
    font-size: 0.72rem;
    color: var(--tp-muted);
}

.tp-cc-board-card-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.tp-cc-board-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* --- Responsividade ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .tp-cc-main-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

@media (max-width: 991.98px) {
    .tp-cc-main-grid {
        grid-template-columns: 1fr;
    }

    .tp-cc-side-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .tp-cc-side-panel {
        grid-template-columns: 1fr;
    }

    .tp-cc-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Acessibilidade ---------------------------------------------------------- */
.tp-icon-btn-xs:focus-visible,
.tp-cc-chat-form input:focus-visible {
    outline: 2px solid var(--tp-secondary);
    outline-offset: 2px;
}

/* =====================================================================
   Clinical Conversation Engine — Sprint 10.4 (gravação/transcrição/
   marcadores/resumos/versões). Painel adicionado ao Teleconsultation
   Workspace (tp-tc-*), prefixo próprio tp-conv- (Clinical Conversation).
   ===================================================================== */

.tp-conv-panel-block {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    padding: 16px;
    margin-top: 16px;
}

.tp-conv-nav {
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.tp-conv-nav .nav-link {
    font-size: 0.8rem;
    border-radius: 999px;
    padding: 6px 14px;
    color: var(--tp-muted);
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
}

.tp-conv-nav .nav-link.active {
    background: var(--tp-secondary);
    color: #fff;
    border-color: transparent;
}

.tp-conv-tab-content {
    min-height: 120px;
}

/* --- Gravação ------------------------------------------------------------- */
.tp-conv-recording-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--tp-bg);
    border-radius: var(--tp-radius-sm);
    margin-bottom: 14px;
}

.tp-conv-recording-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--tp-muted);
}

.tp-conv-recording-status[data-status="gravando"] .tp-conv-recording-dot {
    background: var(--tp-danger);
    animation: tp-conv-pulse 1.4s ease-in-out infinite;
}

.tp-conv-recording-status[data-status="pausada"] .tp-conv-recording-dot {
    background: #f2a93c;
}

.tp-conv-recording-status[data-status="finalizada"] .tp-conv-recording-dot {
    background: var(--tp-accent);
}

.tp-conv-recording-status[data-status="erro"] .tp-conv-recording-dot,
.tp-conv-recording-status[data-status="cancelada"] .tp-conv-recording-dot {
    background: var(--tp-danger);
}

@keyframes tp-conv-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.tp-conv-recording-label {
    font-weight: 600;
    font-size: 0.85rem;
}

.tp-conv-recording-timer {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--tp-secondary);
}

.tp-conv-recording-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.tp-conv-recording-hint {
    margin-bottom: 0;
}

.tp-conv-recording-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.78rem;
}

/* --- Transcrição ------------------------------------------------------------ */
.tp-conv-transcript-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tp-conv-transcript-toolbar input {
    flex: 1 1 220px;
}

.tp-conv-transcript-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 14px;
}

.tp-conv-transcript-item {
    background: var(--tp-bg);
    border-radius: var(--tp-radius-sm);
    padding: 10px 12px;
}

.tp-conv-transcript-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tp-conv-segment {
    margin: 0 0 4px;
    font-size: 0.82rem;
}

.tp-conv-segment[data-participant="veterinarian"] strong { color: var(--tp-secondary); }
.tp-conv-segment[data-participant="tutor"] strong { color: var(--tp-accent); }
.tp-conv-segment[data-participant="system"] strong { color: var(--tp-muted); }

.tp-conv-transcript-form textarea {
    resize: vertical;
}

.tp-conv-autosave-status {
    font-size: 0.68rem;
    color: var(--tp-muted);
    font-style: italic;
}

.tp-conv-autosave-status[data-state="syncing"] { color: var(--tp-muted); }
.tp-conv-autosave-status[data-state="saving"] { color: #f2a93c; }
.tp-conv-autosave-status[data-state="saved"] { color: var(--tp-accent); }

/* --- Resumo ------------------------------------------------------------------ */
.tp-conv-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tp-conv-summary-card {
    position: relative;
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 12px 14px;
}

.tp-conv-summary-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tp-secondary);
    margin-bottom: 6px;
}

.tp-conv-summary-card-body {
    font-size: 0.82rem;
    min-height: 40px;
}

.tp-conv-summary-generate-btn {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* --- Marcadores ---------------------------------------------------------- */
.tp-conv-marker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.tp-conv-marker-item {
    position: relative;
    background: var(--tp-bg);
    border-radius: var(--tp-radius-sm);
    padding: 8px 10px;
    font-size: 0.8rem;
}

.tp-conv-marker-item .tp-icon-btn-xs {
    position: absolute;
    top: 6px;
    right: 6px;
}

.tp-conv-marker-badge {
    background: var(--tp-secondary);
    color: #fff;
    font-size: 0.6rem;
    margin-bottom: 4px;
}

.tp-conv-marker-badge[data-type="hipotese_diagnostica"] { background: #7a5cc7; }
.tp-conv-marker-badge[data-type="exame_solicitado"] { background: #3b9ef0; }
.tp-conv-marker-badge[data-type="receita_emitida"] { background: #12a887; }
.tp-conv-marker-badge[data-type="procedimento_registrado"] { background: #0f6e8c; }
.tp-conv-marker-badge[data-type="retorno_recomendado"] { background: #f2a93c; color: #2a2205; }
.tp-conv-marker-badge[data-type="outro"] { background: #6b7d8f; }

.tp-conv-marker-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* --- Atividade (Timeline + Histórico + Versões) --------------------------- */
.tp-conv-search {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tp-conv-search input {
    flex: 1 1 200px;
}

.tp-conv-search-results {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--tp-bg);
    border-radius: var(--tp-radius-sm);
}

.tp-conv-version-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.tp-conv-version-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    padding: 4px 0;
    border-bottom: 1px dashed var(--tp-border);
}

.tp-conv-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- Responsividade --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .tp-conv-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
}

@media (max-width: 767.98px) {
    .tp-conv-summary-grid {
        grid-template-columns: 1fr;
    }

    .tp-conv-recording-actions {
        flex-direction: column;
    }

    .tp-conv-recording-actions .tp-action-btn {
        width: 100%;
    }
}

/* --- Acessibilidade ---------------------------------------------------------- */
.tp-conv-nav .nav-link:focus-visible,
.tp-conv-transcript-toolbar input:focus-visible,
.tp-conv-search input:focus-visible {
    outline: 2px solid var(--tp-secondary);
    outline-offset: 2px;
}

/* =====================================================================
   AI Ready — Sprint 10.5 (consolida os provedores/contextos de IA já
   preparados pelas Sprints 10.1/10.3/10.4). Mesmo prefixo tp-conv- do
   painel Conversa Clínica em que este pill vive.
   ===================================================================== */

.tp-conv-ai-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.tp-conv-ai-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 10px 12px;
}

.tp-conv-ai-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    background: var(--tp-muted);
}

.tp-conv-ai-card[data-available="1"] .tp-conv-ai-dot {
    background: var(--tp-accent);
}

.tp-conv-ai-card-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0;
}

.tp-conv-ai-card-provider {
    word-break: break-all;
}

.tp-conv-ai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tp-conv-ai-result {
    background: var(--tp-primary-dark);
    color: #d7e6f0;
    border-radius: var(--tp-radius-sm);
    padding: 12px;
    font-size: 0.72rem;
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Responsividade --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .tp-conv-ai-actions {
        flex-direction: column;
    }

    .tp-conv-ai-actions .tp-action-btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .tp-conv-ai-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Clinical Intelligence Platform — Sprint 10.5 (camada central de IA,
   pets/{id}/intelligence + ai-intelligence/configuration). Reaproveita
   as variáveis do Design System Premium e o vocabulário visual já usado
   pelo AI Ready da Teleconsulta (tp-conv-ai-*).
   ===================================================================== */

.tp-ai-config-readiness {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tp-ai-config-readiness-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
}

.tp-ai-config-readiness-item .tp-conv-ai-dot[data-available="1"] {
    background: var(--tp-accent);
}

/* --- Responsividade --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .tp-ai-config-readiness {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }
}

/* =====================================================================
   Telemedicine Experience Platform — Sprint 10.6 (UX premium/produtividade
   /performance do Teleconsultation Workspace). Reaproveita integralmente
   os tokens do Design System (--tp-*) e os padrões já existentes
   (.tp-empty-state-premium, .tp-shortcut-list, .tp-icon-btn-sm,
   .tp-action-btn, .tp-skeleton) — nenhum valor novo de cor/raio é criado
   à parte.
   ===================================================================== */

/* --- Microinterações genéricas ------------------------------------------ */
.tp-teleconsultation-workspace button,
.tp-teleconsultation-workspace a.tp-action-btn {
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.tp-tc-toolbar-btn:hover,
.tp-tc-floating-btn:hover,
.tp-tc-productivity-btn:hover,
.tp-icon-btn-sm:hover {
    transform: translateY(-1px);
}

.tp-tc-toolbar-btn:focus-visible,
.tp-tc-floating-btn:focus-visible,
.tp-tc-productivity-item:focus-visible,
.tp-icon-btn-sm:focus-visible,
.tp-action-btn:focus-visible {
    outline: 2px solid var(--tp-info);
    outline-offset: 2px;
}

.tp-tc-toolbar-btn:active,
.tp-tc-floating-btn:active {
    transform: scale(0.94);
}

@keyframes tp-tc-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tp-tc-scale-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes tp-tc-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.tp-tc-fade-in { animation: tp-tc-fade-in 0.18s ease both; }
.tp-tc-scale-in { animation: tp-tc-scale-in 0.16s ease both; }
.tp-tc-slide-up { animation: tp-tc-slide-up 0.2s ease both; }

/* Ripple discreto — aplicado via JS (workspace-empty-states.js/toolbar) a
   qualquer botão com .tp-tc-rippleable, nunca chamativo. */
.tp-tc-rippleable { position: relative; overflow: hidden; }
.tp-tc-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: tp-tc-ripple-anim 0.5s ease-out;
    pointer-events: none;
}
@keyframes tp-tc-ripple-anim {
    to { transform: scale(2.6); opacity: 0; }
}

.tp-tc-flash-highlight {
    animation: tp-tc-flash 1s ease;
}
@keyframes tp-tc-flash {
    0%, 100% { box-shadow: none; }
    30% { box-shadow: 0 0 0 3px rgba(59, 158, 240, 0.35); }
}

/* --- Connection Panel (banner crítico) ----------------------------------- */
.tp-tc-connection-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--tp-radius);
    background: rgba(229, 88, 79, 0.08);
    border: 1px solid rgba(229, 88, 79, 0.3);
    color: var(--tp-danger);
    animation: tp-tc-slide-up 0.2s ease both;
}

.tp-tc-connection-panel[data-state="reconnecting"] {
    background: rgba(242, 169, 60, 0.1);
    border-color: rgba(242, 169, 60, 0.35);
    color: #a06a12;
}

.tp-tc-connection-panel > i {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.tp-tc-connection-panel-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.tp-tc-connection-panel-text strong {
    font-size: 0.88rem;
}

.tp-tc-connection-panel-text span {
    font-size: 0.78rem;
    opacity: 0.85;
}

/* --- Barra de Produtividade ------------------------------------------------ */
.tp-tc-productivity-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow-sm);
}

.tp-tc-productivity-toggle {
    border: none;
    background: transparent;
    color: var(--tp-muted);
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.tp-tc-productivity-bar[data-collapsed="1"] .tp-tc-productivity-toggle i {
    transform: rotate(180deg);
}

.tp-tc-productivity-toggle i {
    transition: transform 0.15s ease;
}

.tp-tc-productivity-items {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    overflow: hidden;
    max-height: 40px;
    transition: max-height 0.2s ease, opacity 0.2s ease;
}

.tp-tc-productivity-bar[data-collapsed="1"] .tp-tc-productivity-items {
    max-height: 0;
    opacity: 0;
}

.tp-tc-productivity-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--tp-muted);
    white-space: nowrap;
    border: none;
    background: transparent;
    padding: 2px 4px;
    border-radius: 6px;
    position: relative;
}

.tp-tc-productivity-item i { color: var(--tp-accent); }
.tp-tc-productivity-item[data-state="offline"] i,
.tp-tc-productivity-item[data-state="reconnecting"] i { color: var(--tp-warning); }
.tp-tc-productivity-item[data-state="ended"] i { color: var(--tp-info); }

.tp-tc-productivity-btn:hover { background: var(--tp-hover, rgba(18, 168, 135, 0.08)); }

.tp-tc-productivity-badge {
    background: var(--tp-danger);
    color: #fff;
    font-size: 0.65rem;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 999px;
    font-weight: 700;
}

/* --- Floating Actions ------------------------------------------------------ */
.tp-tc-floating-actions {
    position: sticky;
    bottom: 16px;
    float: right;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 6;
    margin-left: auto;
    width: fit-content;
}

.tp-tc-floating-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--tp-border);
    background: var(--tp-surface);
    color: var(--tp-text);
    box-shadow: var(--tp-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tp-tc-floating-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--tp-danger);
    color: #fff;
    font-size: 0.62rem;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 999px;
    font-weight: 700;
}

.tp-tc-notification-panel {
    position: absolute;
    bottom: 52px;
    right: 0;
    width: 300px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow-lg);
    padding: 12px;
    animation: tp-tc-scale-in 0.15s ease both;
    transform-origin: bottom right;
}

.tp-tc-notification-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-tc-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8rem;
    padding: 8px;
    border-radius: 8px;
    background: var(--tp-bg, #f5f8fa);
}

.tp-tc-notification-item i { color: var(--tp-accent); margin-top: 2px; }
.tp-tc-notification-item[data-type="error"] i { color: var(--tp-danger); }
.tp-tc-notification-item[data-type="reconnect"] i { color: var(--tp-warning); }

.tp-tc-notification-item-time {
    display: block;
    color: var(--tp-muted);
    font-size: 0.7rem;
    margin-top: 2px;
}

/* --- Preview Panel ---------------------------------------------------------- */
.tp-tc-preview-panel { position: relative; }

.tp-tc-preview-actions { display: flex; align-items: center; gap: 4px; }

.tp-tc-preview-nav {
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.tp-tc-preview-nav .nav-link {
    font-size: 0.76rem;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--tp-muted);
}

.tp-tc-preview-nav .nav-link.active {
    background: var(--tp-accent);
    color: #fff;
}

.tp-tc-preview-tab-content { min-height: 60px; }

.tp-tc-preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    font-size: 0.8rem;
    margin-bottom: 6px;
    animation: tp-tc-fade-in 0.15s ease both;
}

.tp-tc-preview-item-title { font-weight: 600; color: var(--tp-text); }
.tp-tc-preview-item-meta { color: var(--tp-muted); font-size: 0.72rem; }

.tp-tc-preview-floating {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1050;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow-lg);
    padding: 14px;
    animation: tp-tc-scale-in 0.15s ease both;
}

.tp-tc-preview-floating .tp-tc-preview-actions .fa-up-right-from-square { display: none; }

/* --- Empty state compacto (dentro de painéis pequenos) --------------------- */
.tp-tc-empty-state.tp-empty-state-premium {
    padding: 20px 12px;
}

.tp-tc-empty-state .tp-empty-state-icon {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
}

/* --- Estados / Indicator Card / Status Badge -------------------------------- */
.tp-tc-indicator-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--tp-radius);
    border: 1px solid var(--tp-border);
    background: var(--tp-surface);
}

.tp-tc-indicator-card i { font-size: 1.1rem; }

.tp-tc-indicator-card-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tp-tc-indicator-card-text strong { font-size: 0.84rem; color: var(--tp-text); }
.tp-tc-indicator-card-text span { font-size: 0.72rem; color: var(--tp-muted); }

.tp-tc-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.32em 0.65em;
    border-radius: 999px;
    color: #fff;
}

/* --- Skeleton loading adicional (Sprint 10.6) ------------------------------- */
.tp-tc-skeleton-chat,
.tp-tc-skeleton-timeline,
.tp-tc-skeleton-preview,
.tp-tc-skeleton-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
}

.tp-tc-skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef2f5 25%, #e4e9ef 37%, #eef2f5 63%);
    background-size: 400% 100%;
    animation: tp-skeleton-shimmer 1.4s ease infinite;
}

.tp-tc-skeleton-line.tp-tc-skeleton-line-sm { width: 60%; }
.tp-tc-skeleton-line.tp-tc-skeleton-line-lg { width: 92%; }

/* --- Loading button (LoadingButton) ----------------------------------------- */
.tp-tc-btn-loading { pointer-events: none; opacity: 0.75; position: relative; }
.tp-tc-btn-loading .tp-tc-btn-loading-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tp-tc-spin 0.6s linear infinite;
    margin-right: 6px;
}
@keyframes tp-tc-spin {
    to { transform: rotate(360deg); }
}

/* --- Fullscreen (multi-target) ---------------------------------------------- */
.tp-teleconsultation-workspace:fullscreen,
.tp-tc-video-panel:fullscreen,
#tab-consulta:fullscreen,
.tp-tc-preview-panel:fullscreen,
#tab-timeline:fullscreen,
.tp-conv-workspace:fullscreen {
    background: var(--tp-surface);
    padding: 20px;
    overflow-y: auto;
}

.tp-tc-video-panel:fullscreen { padding: 12px; background: var(--tp-primary-dark); }

/* --- Fallback elegante quando PiP não é suportado --------------------------- */
.tp-tc-pip-unsupported-hint {
    font-size: 0.72rem;
    color: var(--tp-muted);
}

/* --- Responsividade ---------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .tp-tc-productivity-items { gap: 12px; }
}

@media (max-width: 991.98px) {
    .tp-tc-floating-actions {
        position: fixed;
        right: 14px;
        bottom: 14px;
    }

    .tp-tc-notification-panel { width: 260px; }

    .tp-tc-preview-floating { width: 280px; right: 12px; bottom: 12px; }
}

@media (max-width: 767.98px) {
    .tp-tc-productivity-bar { flex-wrap: wrap; }
    .tp-tc-productivity-items { max-height: none; gap: 10px; }
    .tp-tc-productivity-item span { display: none; }
    .tp-tc-productivity-item[data-state] span { display: inline; }

    .tp-tc-floating-btn { width: 38px; height: 38px; }

    .tp-tc-preview-nav .nav-link { font-size: 0.7rem; padding: 3px 8px; }
}

@media (max-width: 575.98px) {
    .tp-tc-connection-panel { flex-wrap: wrap; }
    .tp-tc-preview-floating { width: calc(100vw - 24px); }
}

/* =====================================================================
   Telemedicine Core Infrastructure — Sprint 10.7 (Tela de Acesso do
   Tutor / Sala de Espera / Teste de Dispositivos, todas públicas, sem
   login). Reaproveita o mesmo gradiente/branding de `.tp-login-page` e
   os tokens do Design System — nenhum valor novo de cor/raio.
   ===================================================================== */

.tp-meeting-public-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at 15% 20%, #17466b 0%, transparent 45%),
                radial-gradient(circle at 85% 85%, #0d5a52 0%, transparent 50%),
                linear-gradient(135deg, var(--tp-primary-dark) 0%, var(--tp-primary) 55%, var(--tp-secondary) 100%);
}

.tp-meeting-public-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 24px;
}

/* Chamada de vídeo pública (Sprint 10.8) — grid precisa de mais espaço
   que o card estreito das demais telas públicas (Acesso/Espera/Teste). */
.tp-meeting-public-shell-wide {
    max-width: 1100px;
}

.tp-meeting-call-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--tp-surface);
    border-radius: var(--tp-radius-lg, var(--tp-radius));
    box-shadow: var(--tp-shadow-lg);
    padding: 20px;
}

@media (max-width: 767.98px) {
    .tp-meeting-call-shell { padding: 14px; }
}

.tp-meeting-public-header {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.tp-meeting-public-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.tp-meeting-public-brand .tp-login-logo {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    margin: 0;
}

.tp-meeting-public-brand strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
}

.tp-meeting-public-brand span {
    display: block;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.75);
}

.tp-meeting-public-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tp-meeting-public-footer {
    text-align: center;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.72rem;
    padding-top: 16px;
}

.tp-meeting-card {
    background: var(--tp-surface);
    border-radius: var(--tp-radius-lg, var(--tp-radius));
    box-shadow: var(--tp-shadow-lg);
    padding: 32px;
    width: 100%;
    animation: tp-tc-fade-in 0.2s ease both;
}

.tp-meeting-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--tp-accent);
    margin-bottom: 6px;
}

.tp-meeting-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--tp-text);
    margin-bottom: 20px;
}

.tp-meeting-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
    background: var(--tp-bg, #f5f8fa);
    border-radius: var(--tp-radius);
    margin-bottom: 22px;
}

.tp-meeting-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tp-meeting-summary-label {
    font-size: 0.7rem;
    color: var(--tp-muted);
}

.tp-meeting-summary-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tp-text);
}

.tp-meeting-access-form .form-group {
    margin-bottom: 18px;
}

.tp-meeting-access-form label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tp-text);
    margin-bottom: 6px;
    display: block;
}

.tp-meeting-access-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tp-meeting-access-actions .tp-action-btn {
    flex: 1;
    justify-content: center;
}

.tp-meeting-footnote {
    margin: 18px 0 0;
    font-size: 0.72rem;
    color: var(--tp-muted);
    text-align: center;
}

/* --- Sala de Espera pública -------------------------------------------- */
.tp-meeting-waiting-card {
    text-align: center;
}

.tp-meeting-waiting-card .tp-tc-waiting-room-icon {
    margin: 0 auto 16px;
}

.tp-meeting-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 20px;
}

.tp-meeting-countdown-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--tp-accent);
    font-variant-numeric: tabular-nums;
}

.tp-meeting-countdown-label {
    font-size: 0.72rem;
    color: var(--tp-muted);
}

.tp-meeting-waiting-card .tp-meeting-summary {
    text-align: left;
}

/* --- Teste de Dispositivos ---------------------------------------------- */
.tp-meeting-device-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--tp-primary-dark);
    border-radius: var(--tp-radius);
    overflow: hidden;
    margin-bottom: 20px;
}

.tp-meeting-device-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-meeting-device-preview p {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
}

.tp-meeting-device-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.tp-meeting-device-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    font-size: 0.85rem;
}

.tp-meeting-device-check-row i:first-child {
    color: var(--tp-muted);
    width: 18px;
}

.tp-meeting-device-check-row span:nth-child(2) {
    flex: 1;
    color: var(--tp-text);
}

.tp-meeting-device-status {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--tp-muted);
}

.tp-meeting-device-status[data-status="ok"] { color: var(--tp-success); }
.tp-meeting-device-status[data-status="error"] { color: var(--tp-danger); }
.tp-meeting-device-status[data-status="pending"] { color: var(--tp-warning); }

#tpDeviceCheckAudioMeter {
    margin-bottom: 20px;
}

/* --- Estado inválido/expirado/cancelado --------------------------------- */
.tp-meeting-invalid-card {
    text-align: center;
}

.tp-meeting-invalid-icon {
    margin: 0 auto 16px;
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
    color: var(--tp-danger);
    background: rgba(229, 88, 79, 0.1);
}

.tp-meeting-invalid-message {
    color: var(--tp-muted);
    font-size: 0.9rem;
}

.tp-meeting-invalid-reasons {
    text-align: left;
    margin: 16px auto 0;
    max-width: 360px;
    padding-left: 20px;
    font-size: 0.82rem;
    color: var(--tp-muted);
}

/* --- Responsividade ------------------------------------------------------ */
@media (max-width: 575.98px) {
    .tp-meeting-card { padding: 22px; }
    .tp-meeting-summary { grid-template-columns: 1fr; }
    .tp-meeting-access-actions { flex-direction: column; }
    .tp-meeting-access-actions .tp-action-btn { width: 100%; }
}

/* =====================================================================
   Telemedicine Patient Gateway — Sprint 10.10 (jornada do Tutor: teste
   de equipamentos em wizard, consentimento, painel de ajuda, logo da
   clínica na Sala de Espera). Reaproveita as mesmas variáveis de tema
   (--tp-*) e o padrão .tp-meeting-card já existente — nenhum token novo.
   ===================================================================== */

.tp-meeting-clinic-logo {
    display: block;
    max-height: 40px;
    margin: 0 auto 10px;
}

.tp-meeting-call-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border-radius: var(--tp-radius);
    margin-bottom: 10px;
}

.tp-meeting-call-header-logo {
    max-height: 28px;
}

.tp-meeting-call-header-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.tp-meeting-call-header-info span {
    font-size: 0.72rem;
    opacity: 0.8;
}

/* --- Wizard de Teste de Dispositivos (Boas-vindas/Câmera/Microfone/Áudio/Conexão/Confirmação) */
.tp-meeting-device-wizard-steps {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.tp-meeting-device-wizard-step {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--tp-bg, #f5f8fa);
    color: var(--tp-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.tp-meeting-device-wizard-step.is-active {
    background: var(--tp-primary);
    color: #fff;
}

.tp-meeting-device-wizard-step.is-done {
    background: rgba(18, 168, 135, 0.15);
    color: var(--tp-success);
}

/* --- Consentimento ------------------------------------------------------- */
.tp-meeting-consent-text {
    max-height: 220px;
    overflow-y: auto;
    padding: 14px;
    background: var(--tp-bg, #f5f8fa);
    border-radius: var(--tp-radius);
    font-size: 0.82rem;
    color: var(--tp-text);
    margin-bottom: 14px;
    text-align: left;
}

.tp-meeting-consent-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    font-size: 0.82rem;
    color: var(--tp-text);
    margin-bottom: 18px;
}

/* --- Painel de Ajuda (FAB flutuante) -------------------------------------- */
.tp-meeting-help-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--tp-primary);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    z-index: 1050;
    cursor: pointer;
}

.tp-meeting-help-panel {
    position: fixed;
    right: 20px;
    bottom: 78px;
    width: min(340px, calc(100vw - 40px));
    max-height: 60vh;
    background: var(--tp-surface, #fff);
    border-radius: var(--tp-radius);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tp-meeting-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--tp-border, #e5e9ec);
}

.tp-meeting-help-close {
    border: none;
    background: transparent;
    color: var(--tp-muted);
    cursor: pointer;
}

.tp-meeting-help-body {
    padding: 10px 14px;
    overflow-y: auto;
}

.tp-meeting-help-item {
    margin-bottom: 10px;
    font-size: 0.82rem;
}

.tp-meeting-help-item summary {
    font-weight: 700;
    cursor: pointer;
    color: var(--tp-text);
}

.tp-meeting-help-item p {
    margin: 6px 0 0;
    color: var(--tp-muted);
}

/* --- Painel de Reconexão --------------------------------------------------- */
.tp-meeting-reconnect-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 32, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    text-align: center;
    color: #fff;
}

.tp-meeting-reconnect-overlay .tp-meeting-reconnect-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    margin: 0 auto 14px;
    animation: tp-meeting-reconnect-spin 0.9s linear infinite;
}

@keyframes tp-meeting-reconnect-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 575.98px) {
    .tp-meeting-help-panel { right: 10px; bottom: 74px; }
    .tp-meeting-help-fab { right: 14px; bottom: 14px; }
}

/* =====================================================================
   Teleconsultation Lifecycle Manager — Sprint 10.9 (ciclo de vida
   completo, 16 estados). Reaproveita os mesmos tokens/padrões dos
   painéis colapsáveis já existentes (.tp-tc-panel-block,
   .tp-conv-panel-block) — nenhum valor novo de cor/raio criado à parte.
   ===================================================================== */

.tp-lc-panel .tp-lc-body { margin-top: 10px; }

.tp-lc-body-skeleton { padding: 10px 0; }

/* --- TeleconsultationStatusCard ------------------------------------------ */
.tp-lc-status-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--tp-radius);
    background: var(--tp-bg, #f5f8fa);
    border: 1px solid var(--tp-border);
    margin-bottom: 14px;
    --tp-lc-color: var(--tp-accent);
}

.tp-lc-status-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tp-lc-color) 16%, transparent);
    color: var(--tp-lc-color);
    flex-shrink: 0;
    font-size: 1rem;
}

.tp-lc-status-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.tp-lc-status-text strong { font-size: 0.92rem; color: var(--tp-text); }

.tp-lc-status-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tp-lc-status-actions .tp-action-btn {
    padding: 6px 10px;
    font-size: 0.76rem;
}

/* --- TeleconsultationWorkflow (stepper) ----------------------------------- */
.tp-lc-workflow {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    overflow-x: auto;
    padding: 4px 2px;
}

.tp-lc-step {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.6rem;
    background: var(--tp-border);
    color: var(--tp-muted);
}

.tp-lc-step[data-status="done"] { background: var(--tp-accent); color: #fff; }
.tp-lc-step[data-status="current"] {
    background: var(--tp-info);
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-info) 25%, transparent);
}

.tp-lc-step-line {
    flex: 1;
    min-width: 10px;
    height: 2px;
    background: var(--tp-border);
}

/* --- TeleconsultationRecoveryPanel ---------------------------------------- */
.tp-lc-recovery {
    padding: 10px 12px;
    border-radius: var(--tp-radius);
    border: 1px dashed var(--tp-warning);
    background: rgba(242, 169, 60, 0.08);
    margin-bottom: 14px;
}

.tp-lc-recovery-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- TeleconsultationTimeline / AuditPanel -------------------------------- */
.tp-lc-timeline-title { margin-top: 4px; }

.tp-lc-timeline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
}

.tp-lc-timeline-item {
    display: flex;
    gap: 10px;
    padding: 8px 4px;
    border-left: 2px solid var(--tp-border);
    padding-left: 14px;
    position: relative;
}

.tp-lc-timeline-dot {
    position: absolute;
    left: -5px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tp-accent);
}

.tp-lc-timeline-content { font-size: 0.8rem; color: var(--tp-text); }

/* --- Responsividade -------------------------------------------------------- */
@media (max-width: 575.98px) {
    .tp-lc-status-card { flex-wrap: wrap; }
    .tp-lc-status-actions { width: 100%; }
    .tp-lc-status-actions .tp-action-btn { flex: 1; justify-content: center; }
}

/* =====================================================================
   Telemedicine Security & Compliance — Sprint 10.11 (painel de
   segurança/auditoria/LGPD). Reaproveita .tp-tc-panel-block/.tp-section-title/
   .tp-stat-card/.tp-hero-card já existentes — só as tabelas de log e a
   checklist de conformidade são novas.
   ===================================================================== */

.tp-security-log-table-wrap {
    overflow-x: auto;
}

.tp-security-log-table {
    margin-bottom: 0;
    font-size: 0.8rem;
}

.tp-security-log-table th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tp-muted);
    border-bottom-width: 1px;
    white-space: nowrap;
}

.tp-security-log-table td {
    vertical-align: middle;
}

.tp-security-log-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tp-security-log-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--tp-border, #eef1f3);
    font-size: 0.82rem;
}

.tp-security-log-list li:last-child {
    border-bottom: none;
}

.tp-security-log-type {
    font-weight: 600;
    color: var(--tp-text);
}

.tp-compliance-checklist li i {
    width: 16px;
    text-align: center;
}

@media (max-width: 575.98px) {
    .tp-security-log-table { font-size: 0.72rem; }
}