/* ================================================================
   SIVOE — CENTRAL DE AJUDA — global.css
   Design system SIVOE (fonte da verdade: docs/assets/tokens.css)
   + estilos globais (navbar, footer, toast, modal, avatares, cards).
   Os aliases --hc-* mapeiam para os tokens SIVOE para compatibilidade
   com as telas existentes.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* ---- Cores de marca SIVOE ---- */
    --blue-action: #1C6EF2;
    --blue-action-hover: #1559C7;
    --blue-action-press: #1149A8;
    --blue-brand: #15539E;
    --blue-soft: #7FB1E8;
    --blue-wash: #EEF4FE;
    --blue-tint-12: rgba(28, 110, 242, 0.12);
    --blue-tint-08: rgba(28, 110, 242, 0.08);

    /* ---- Neutros ---- */
    --page-bg: #F5F7FA;
    --surface: #FFFFFF;
    --border: #E4E9F0;
    --border-strong: #D2DAE6;
    --text-strong: #1B2A41;
    --text-body: #41506A;
    --text-muted: #7A8699;
    --text-faint: #A6B0C0;

    /* ---- Feedback ---- */
    --success: #1F9D6B;  --success-wash: #E8F6F0;
    --warning: #C8861B;  --warning-wash: #FBF2E2;
    --danger:  #D8453B;  --danger-wash:  #FCEDEC;

    /* ---- Tipografia ---- */
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* ---- Raios ---- */
    --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;  --r-pill: 999px;

    /* ---- Sombras suaves ---- */
    --shadow-sm: 0 1px 2px rgba(27, 42, 65, 0.05);
    --shadow-md: 0 4px 16px rgba(27, 42, 65, 0.07);
    --shadow-lg: 0 12px 32px rgba(27, 42, 65, 0.10);
    --shadow-blue: 0 8px 22px rgba(28, 110, 242, 0.22);

    /* ---- Aliases legados (--hc-*) → tokens SIVOE ---- */
    --hc-primary: var(--blue-action);
    --hc-primary-dark: var(--blue-action-hover);
    --hc-secondary: var(--text-muted);
    --hc-success: var(--success);
    --hc-danger: var(--danger);
    --hc-warning: var(--warning);
    --hc-info: var(--blue-action);
    --hc-bg: var(--page-bg);
    --hc-card-bg: var(--surface);
    --hc-border: var(--border);
    --hc-shadow: var(--shadow-sm);
    --hc-shadow-lg: var(--shadow-lg);
    --hc-radius: var(--r-md);
    --hc-radius-sm: var(--r-sm);
    --hc-navbar-height: 68px;
}

* { box-sizing: border-box; }

body {
    background: var(--page-bg);
    font-family: var(--font);
    color: var(--text-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[v-cloak] { display: none !important; }

/* ---------- Navbar ---------- */
.hc-navbar {
    height: var(--hc-navbar-height);
    background: var(--hc-card-bg);
    box-shadow: var(--hc-shadow);
    border-bottom: 1px solid var(--hc-border);
}
.hc-brand { font-weight: 800; color: var(--blue-brand) !important; font-size: 1.15rem; letter-spacing: -0.01em; }
.hc-navbar .nav-link { color: var(--text-body); font-weight: 500; border-radius: var(--hc-radius-sm); padding: 0.4rem 0.8rem !important; }
.hc-navbar .nav-link:hover, .hc-navbar .nav-link.active { color: var(--blue-action); background: var(--blue-tint-08); }
.hc-icon-btn { background: transparent; border: none; color: var(--text-body); font-size: 1.2rem; padding: 0.3rem 0.5rem; border-radius: var(--hc-radius-sm); }
.hc-icon-btn:hover { color: var(--blue-action); background: var(--blue-tint-08); }

/* ---------- Footer ---------- */
.hc-footer {
    position: fixed; bottom: 0; left: 0; right: 0; height: 45px;
    background: var(--hc-card-bg); border-top: 1px solid var(--hc-border);
    display: flex; align-items: center; font-size: 0.8rem; color: var(--hc-secondary); z-index: 1020;
}

/* ---------- Card padrão ---------- */
.hc-card {
    background: var(--hc-card-bg);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow);
}

/* ---------- Avatares ---------- */
.hc-avatar-circle {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #fff; vertical-align: middle;
}
.hc-avatar-grid, #perfilAvatarGrid { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-avatar-option {
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border: 2px solid transparent; border-radius: 50%; cursor: pointer; transition: 0.15s;
}
.hc-avatar-option:hover { background: var(--blue-tint-08); }
.hc-avatar-option.selected { border-color: var(--blue-action); }

/* ---------- Toast ---------- */
.hc-toast-container .toast { box-shadow: var(--hc-shadow-lg); border-radius: var(--hc-radius); }

/* ---------- Modal de confirmação custom ---------- */
.hc-confirm-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center; z-index: 10000;
    opacity: 0; transition: opacity 0.2s;
}
.hc-confirm-backdrop.ativo { opacity: 1; }
.hc-confirm-modal {
    background: #fff; border-radius: var(--hc-radius); padding: 24px; max-width: 380px; width: 90%;
    text-align: center; box-shadow: var(--hc-shadow-lg); transform: scale(0.95); transition: transform 0.2s;
}
.hc-confirm-backdrop.ativo .hc-confirm-modal { transform: scale(1); }
.hc-confirm-icon { font-size: 2.5rem; margin-bottom: 8px; }
.hc-confirm-titulo { font-weight: 600; font-size: 1.1rem; margin-bottom: 6px; }
.hc-confirm-mensagem { color: var(--hc-secondary); margin-bottom: 18px; }
.hc-confirm-acoes { display: flex; gap: 8px; justify-content: center; }

/* ---------- Wrapper principal ---------- */
.hc-main-wrapper { min-height: calc(100vh - var(--hc-navbar-height)); }

/* ---------- Drag & drop feedback ---------- */
.dragging { opacity: 0.4; }
.drag-over { border-top: 2px dashed var(--hc-primary); }

/* ================================================================
   HEADER COMPARTILHADO SIVOE (telas end-user)
   ================================================================ */
.sv-hdr {
    position: fixed; top: 0; left: 0; right: 0; height: 68px; z-index: 1030;
    background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}
.sv-hdr-in { max-width: 1120px; margin: 0 auto; height: 68px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.sv-hdr-spacer { height: 68px; }

.sv-hdr-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.sv-hdr-logo { height: 26px; display: block; }
.sv-hdr-sep { width: 1px; height: 22px; background: var(--border-strong); }
.sv-hdr-label { font-size: 15px; font-weight: 600; color: var(--text-muted); }

.sv-hdr-right { display: flex; align-items: center; gap: 14px; }
.sv-hdr-clinica {
    display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600;
    color: var(--blue-brand); background: var(--blue-wash); border: 1px solid var(--blue-soft);
    padding: 7px 14px; border-radius: var(--r-pill);
}
.sv-hdr-acc { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: var(--r-md); }
.sv-hdr-acc:hover { background: var(--blue-tint-08); }
.sv-hdr-avatar {
    width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--blue-action), var(--blue-brand)); color: #fff; font-weight: 700; font-size: 14px;
}
.sv-hdr-acc-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.sv-hdr-acc-nome { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.sv-hdr-acc-papel { font-size: 12px; color: var(--text-muted); }
.sv-hdr-chev { color: var(--text-faint); font-size: 13px; }

.sv-hdr-menu { border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; min-width: 230px; }
.sv-hdr-menu-head { padding: 8px 12px; }
.sv-hdr-menu-head > div:first-child { font-weight: 700; color: var(--text-strong); }
.sv-hdr-menu-email { font-size: 12.5px; color: var(--text-muted); }
.sv-hdr-menu .dropdown-item { border-radius: var(--r-sm); padding: 9px 12px; font-size: 14px; color: var(--text-body); }
.sv-hdr-menu .dropdown-item:hover { background: var(--blue-wash); color: var(--blue-brand); }
.sv-hdr-menu .sv-hdr-sair { color: var(--danger); }
.sv-hdr-menu .sv-hdr-sair:hover { background: var(--danger-wash); color: var(--danger); }

.sv-page { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

@media (max-width: 640px) {
    .sv-hdr-clinica span, .sv-hdr-acc-info { display: none; }
    .sv-hdr-in { padding: 0 16px; }
    .sv-page { padding: 0 16px; }
}