:root {
    --green: #2A9D8F;
    --background: #F4F6F6;
    --ink: #2B2D42;
    --orange: #E76F51;
    --blue: #1D3557;
    --white: #FFFFFF;
    --line: rgba(43, 45, 66, .14);
    --display: Georgia, 'Times New Roman', serif;
    --body: 'Trebuchet MS', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--background); font-family: var(--body); line-height: 1.5; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.site-header { display: flex; align-items: center; gap: 2rem; max-width: 1180px; margin: auto; padding: 1.2rem 2rem; }
.brand img { width: 180px; height: auto; display: block; }
.desktop-nav { display: flex; gap: 1.5rem; margin-left: auto; color: var(--blue); font-size: .92rem; }
.desktop-nav a, footer a { text-decoration: none; }
.nav-login { text-decoration: none; color: var(--blue); font-weight: bold; font-size: .92rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 46px; padding: .7rem 1.15rem; border: 1px solid transparent; font-weight: bold; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--white); background: var(--orange); }
.button-primary:hover { background: #d85f43; }
.button-secondary { color: var(--blue); border-color: var(--blue); }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); align-items: end; gap: 4rem; min-height: 570px; padding: 7rem max(2rem, calc((100vw - 1080px) / 2)) 5rem; overflow: hidden; background: var(--white); }
.hero::after { content: ''; position: absolute; right: -8rem; bottom: -12rem; width: 39rem; height: 39rem; border: 1px solid rgba(42, 157, 143, .25); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(42, 157, 143, .05), 0 0 0 8rem rgba(42, 157, 143, .04); }
.hero-copy, .hero-note { position: relative; z-index: 1; animation: rise .7s ease both; }
.eyebrow { margin: 0 0 1rem; color: var(--green); font-size: .78rem; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 720px; margin: 0; font-family: var(--display); font-size: clamp(3rem, 7vw, 6.2rem); font-weight: normal; line-height: .98; letter-spacing: 0; }
.hero-text { max-width: 500px; margin: 1.6rem 0 2rem; font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-note { max-width: 260px; margin-bottom: 1rem; padding-top: 1.2rem; border-top: 3px solid var(--green); animation-delay: .15s; }
.note-mark { display: block; color: var(--green); font-size: 2.5rem; line-height: 1; }
h2 { margin: .6rem 0 .3rem; font-family: var(--display); font-size: 1.7rem; font-weight: normal; }
.info-section { max-width: 1080px; margin: 0 auto; padding: 3.5rem 2rem; border-top: 1px solid var(--line); }
.info-empty { margin: 0; color: rgba(43, 45, 66, .76); }
.pill-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.pill-list li { padding: .5rem 1rem; background: var(--white); border: 1px solid var(--line); border-radius: 999px; font-size: .92rem; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
.team-card { padding: 1.4rem 1.4rem 1.2rem; background: var(--white); border: 1px solid var(--line); border-radius: 4px; text-align: center; }
.team-photo { width: 92px; height: 92px; margin: 0 auto .9rem; border-radius: 50%; object-fit: cover; background: #EAF3F2; display: block; }
.team-card h3 { margin: 0 0 .3rem; font-size: 1.1rem; font-weight: bold; }
.team-card p { margin: 0; color: rgba(43, 45, 66, .7); font-size: .88rem; }
footer { display: flex; justify-content: space-between; max-width: 1080px; margin: auto; padding: 1.5rem 2rem 3rem; border-top: 1px solid var(--line); color: var(--blue); font-size: .9rem; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) { .site-header { flex-wrap: wrap; padding: 1rem 1.2rem; gap: 1rem; } .brand img { width: 155px; } .desktop-nav { order: 3; width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: .5rem 1.1rem; margin: 0; } .nav-login { margin-left: auto; font-size: .8rem; } .site-header > .button { font-size: .8rem; } .hero { display: block; min-height: 0; padding: 5rem 1.2rem 4rem; } h1 { font-size: clamp(2.9rem, 15vw, 4.5rem); } .hero-note { margin-top: 4rem; } .info-section { padding: 2.5rem 1.2rem; } footer { flex-wrap: wrap; gap: .6rem; padding: 1.2rem; } }
@media (max-width: 360px) { .desktop-nav { font-size: .82rem; gap: .4rem .8rem; } }

.auth-back { position: fixed; top: 1.4rem; left: 1.4rem; z-index: 5; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.05rem; background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: 999px; color: var(--blue); font-weight: bold; font-size: .85rem; text-decoration: none; box-shadow: 0 6px 16px -8px rgba(29, 53, 87, .3); transition: transform .2s ease, background .2s ease; }
.auth-back:hover { transform: translateY(-2px); background: var(--white); }
.auth-shell { display: flex; min-height: 100vh; background: var(--background); }
.auth-visual { position: relative; flex: 0 0 44%; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2.6rem 3rem; overflow: hidden; background: linear-gradient(160deg, var(--blue) 0%, #131f36 100%); color: var(--white); animation: rise .7s ease both; }
.auth-visual::after { content: ''; position: absolute; left: -9rem; bottom: -11rem; width: 30rem; height: 30rem; border: 1px solid rgba(42, 157, 143, .35); border-radius: 50%; box-shadow: 0 0 0 3.4rem rgba(42, 157, 143, .09), 0 0 0 6.8rem rgba(42, 157, 143, .05); }
.auth-visual-brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-size: 1.3rem; text-decoration: none; color: var(--white); }
.auth-visual-brand::before { content: '+'; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--green); color: var(--white); font-size: 1.1rem; }
.auth-visual-copy { position: relative; z-index: 1; max-width: 320px; }
.auth-eyebrow { margin: 0 0 .9rem; color: var(--green); font-size: .78rem; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; }
.auth-visual-copy h2 { margin: 0 0 .9rem; font-family: var(--display); font-weight: normal; font-size: 2.1rem; line-height: 1.18; color: var(--white); }
.auth-visual-copy p { margin: 0; font-size: .95rem; line-height: 1.6; color: rgba(255, 255, 255, .76); }
.auth-form-wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 2.4rem 1.5rem; }
.auth-card { width: 100%; max-width: 380px; padding: 2.6rem; background: var(--white); border-radius: 8px; box-shadow: 0 24px 48px -30px rgba(29, 53, 87, .35); animation: rise .7s ease .1s both; }
.auth-card .brand { display: none; }
.auth-card h1 { font-size: 1.9rem; }
.auth-subtitle { margin: .3rem 0 1.4rem; color: rgba(43, 45, 66, .76); font-size: .95rem; }
.auth-card form { display: flex; flex-direction: column; gap: .3rem; }
.auth-card label { margin-top: .8rem; font-size: .85rem; font-weight: bold; color: var(--blue); }
.auth-card input, .auth-card select { padding: .68rem .85rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; }
.auth-card input:hover, .auth-card select:hover { border-color: rgba(43, 45, 66, .28); }
.auth-card input:focus-visible, .auth-card select:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(42, 157, 143, .18); }
.auth-card .button { margin-top: 1.5rem; }
.alert-error { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 1rem; padding: .7rem .9rem; border: 1px solid rgba(231, 111, 81, .4); border-radius: 4px; background: rgba(231, 111, 81, .08); color: #b1441f; font-size: .9rem; }
.alert-success { margin: 0 0 1.4rem; padding: .8rem 1rem; border: 1px solid rgba(42, 157, 143, .4); border-radius: 4px; background: rgba(42, 157, 143, .08); color: #1f6f63; font-size: .9rem; }
@media (max-width: 900px) {
    .auth-visual { display: none; }
    .auth-form-wrap { padding: 2.4rem 1.2rem; }
    .auth-card .brand { display: block; margin-bottom: 1.6rem; }
    .auth-card .brand img { width: 150px; }
}
@media (max-width: 400px) {
    .auth-card { padding: 2rem 1.5rem; }
    .auth-card .brand img { width: 140px; }
    .auth-back { top: 1rem; left: 1rem; padding: .5rem .9rem; font-size: .8rem; }
}

/* =====================================================================
   Design System da Clinica Hayim — area logada (painel)
   Tokens -> componentes -> layout. Classes ja usadas nas views foram mantidas.
   ===================================================================== */
:root {
    --color-primary: #1F7F74;
    --color-primary-hover: #186A61;
    --color-primary-soft: #E6F3F1;
    --color-secondary: #1D3557;
    --color-accent: #E76F51;
    --color-success: #1F7F74;
    --color-success-soft: #E3F2EF;
    --color-warning: #B7791F;
    --color-warning-soft: #FBF1DC;
    --color-danger: #B83A22;
    --color-danger-soft: #FBE8E3;
    --color-info: #2C5282;
    --color-info-soft: #E6EEF7;
    --color-neutral-soft: #EEF1F2;
    --color-bg: #F5F7F7;
    --color-surface: #FFFFFF;
    --color-surface-hover: #F8FAFA;
    --color-border: #E2E7E8;
    --color-border-strong: #CBD3D5;
    --color-text: #1E2A32;
    --color-text-secondary: #4A5860;
    --color-text-muted: #6B7880;
    --sidebar-bg: #14263F;
    --sidebar-text: #B9C6D6;
    --sidebar-active: rgba(255, 255, 255, .10);
    --sidebar-w: 248px;
    --sidebar-w-collapsed: 68px;
    --topbar-h: 60px;
    --font-ui: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --fs-h1: 1.6rem; --fs-h2: 1.2rem; --fs-h3: 1rem; --fs-body: .94rem; --fs-small: .84rem; --fs-caption: .75rem;
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
    --radius: 8px; --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(20, 38, 63, .06);
    --shadow-md: 0 8px 24px -8px rgba(20, 38, 63, .18);
    --ease: .18s ease;
}

.panel-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: var(--topbar-h) 1fr; background: var(--color-bg); font-family: var(--font-ui); font-size: var(--fs-body); color: var(--color-text); transition: grid-template-columns .2s ease; }
.panel-shell h1, .panel-shell h2, .panel-shell h3 { font-family: var(--font-ui); font-weight: 600; color: var(--color-text); letter-spacing: -.01em; }
.panel-shell h1 { font-size: var(--fs-h1); line-height: 1.25; margin: 0; }
.panel-shell h2 { font-size: var(--fs-h2); margin: var(--sp-6) 0 var(--sp-3); }
.panel-shell h3 { font-size: var(--fs-h3); margin: var(--sp-4) 0 var(--sp-2); }
.panel-shell.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
.panel-header { display: contents; }
.icon { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 16px; height: 16px; }

/* Sidebar */
.sidebar { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--sidebar-bg); color: var(--sidebar-text); overflow: hidden; z-index: 30; }
.sidebar-brand { display: flex; align-items: center; gap: var(--sp-3); height: var(--topbar-h); padding: 0 var(--sp-5); flex-shrink: 0; color: #fff; text-decoration: none; font-weight: 600; font-size: 1.02rem; white-space: nowrap; }
.sidebar-logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--color-primary); color: #fff; flex-shrink: 0; }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-3) var(--sp-4); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.nav-group { margin-top: var(--sp-4); }
.sidebar-area { margin: 0 var(--sp-3) var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.is-collapsed .sidebar-area { display: none; }
.nav-group-title { padding: 0 var(--sp-3) var(--sp-1); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(185, 198, 214, .55); white-space: nowrap; }
.nav-link { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; padding: 0 var(--sp-3); margin-top: 2px; border-radius: var(--radius-sm); color: var(--sidebar-text); text-decoration: none; font-size: .9rem; white-space: nowrap; transition: background var(--ease), color var(--ease); }
.nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-link.is-active { background: var(--sidebar-active); color: #fff; }
.nav-link.is-active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #5FD1C3; }
.nav-link .status-badge { margin-left: auto; }
.sidebar-toggle { flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-3); height: 44px; padding: 0 var(--sp-6); border: 0; border-top: 1px solid rgba(255,255,255,.08); background: transparent; color: var(--sidebar-text); font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.sidebar-toggle:hover { color: #fff; }
.is-collapsed .nav-label, .is-collapsed .sidebar-brand span:last-child, .is-collapsed .sidebar-toggle span, .is-collapsed .nav-link .status-badge { display: none; }
.is-collapsed .nav-link { justify-content: center; padding: 0; }
.is-collapsed .nav-group-title { display: block; height: 1px; padding: 0; margin: var(--sp-3) var(--sp-2) 0; background: rgba(255,255,255,.08); font-size: 0; }
.is-collapsed .sidebar-brand, .is-collapsed .sidebar-toggle { justify-content: center; padding: 0; }
.is-collapsed .sidebar-toggle .icon { transform: rotate(180deg); }
.is-collapsed .nav-link:hover::after { content: attr(data-tip); position: fixed; left: calc(var(--sidebar-w-collapsed) + 6px); padding: 6px 10px; border-radius: 6px; background: #0C1828; color: #fff; font-size: .8rem; box-shadow: var(--shadow-md); pointer-events: none; z-index: 60; }

/* Topbar */
.topbar { grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-8); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.topbar-menu { display: none; border: 0; background: transparent; padding: var(--sp-2); color: var(--color-text); cursor: pointer; border-radius: var(--radius-sm); }
.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); margin-right: auto; font-size: var(--fs-small); color: var(--color-text-muted); min-width: 0; }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb [aria-current] { color: var(--color-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); cursor: pointer; text-decoration: none; transition: background var(--ease); }
.icon-btn:hover { background: var(--color-neutral-soft); }
.icon-btn .status-badge { position: absolute; top: 2px; right: 0; padding: 0 5px; min-width: 18px; text-align: center; border-radius: 999px; background: var(--color-accent); color: #fff; font-size: .68rem; line-height: 18px; }
.user-menu { position: relative; }
.user-trigger { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 8px 4px 4px; border: 0; border-radius: 999px; background: transparent; font: inherit; color: var(--color-text); cursor: pointer; }
.user-trigger:hover { background: var(--color-neutral-soft); }
.user-trigger .user-name { font-size: var(--fs-small); font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-size: .78rem; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; padding: var(--sp-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-md); animation: pop .14s ease; z-index: 40; }
.dropdown[hidden] { display: none; }
.dropdown a, .dropdown button { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: var(--fs-small); color: var(--color-text); text-decoration: none; cursor: pointer; text-align: left; }
.dropdown a:hover, .dropdown button:hover { background: var(--color-neutral-soft); }
.dropdown form { margin: 0; }
.dropdown-head { padding: 10px 12px; border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-1); font-size: var(--fs-caption); color: var(--color-text-muted); }
.dropdown-head strong { display: block; font-size: var(--fs-small); color: var(--color-text); }
.sidebar-scrim { display: none; }

/* Bottom nav (mobile) */
.bottom-nav { display: none; }

/* Conteudo */
.panel-main { grid-column: 2; grid-row: 2; width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--sp-8) var(--sp-8) var(--sp-16); min-width: 0; }
.panel-main .auth-subtitle { margin: var(--sp-1) 0 var(--sp-4); color: var(--color-text-secondary); font-size: var(--fs-body); }
.panel-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); }
.panel-toolbar-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.panel-toolbar-actions form { margin: 0; }
.panel-toolbar input[type="search"] { min-width: 260px; }
.panel-main a { color: var(--color-primary); }
.panel-main a.button-primary { color: #fff; }
.panel-main a.button-secondary { color: var(--color-text); }

/* Botoes */
.panel-shell .button { min-height: 40px; padding: 0 var(--sp-4); gap: var(--sp-2); border-radius: var(--radius-sm); font-size: var(--fs-small); font-weight: 600; cursor: pointer; font-family: inherit; transition: background var(--ease), border-color var(--ease), box-shadow var(--ease); }
.panel-shell .button:hover { transform: none; }
.panel-shell .button-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.panel-shell .button-primary:hover { background: var(--color-primary-hover); }
.panel-shell .button-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.panel-shell .button-secondary:hover { background: var(--color-surface-hover); border-color: var(--color-text-muted); }
.panel-shell .button-danger { background: var(--color-danger); color: #fff; }
.panel-shell .button-sm { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-caption); }
.panel-shell .button:disabled { opacity: .55; cursor: not-allowed; }
.panel-shell :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Cards e indicadores */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); margin: var(--sp-6) 0; }
.stat { display: block; padding: var(--sp-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: var(--color-text); transition: border-color var(--ease), box-shadow var(--ease); }
a.stat:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.panel-main a.stat { color: var(--color-text); }
.stat-label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--color-text-secondary); }
.stat-value { margin-top: var(--sp-2); font-size: 2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.stat-note { margin-top: var(--sp-1); font-size: var(--fs-caption); color: var(--color-text-muted); }
/* Painel do profissional: cards HOJE / MES e alerta de prontuario/evolucao pendentes */
.dash-bloco { margin: 0 0 var(--sp-6); }
.panel-shell .dash-bloco-titulo { margin: 0 0 var(--sp-3); font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); }
.dash-card { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 128px; padding: var(--sp-5); border-radius: 16px; overflow: hidden; text-decoration: none; background: linear-gradient(135deg, var(--dc-de), var(--dc-ate)); box-shadow: 0 10px 24px -14px var(--dc-ate); transition: transform var(--ease), box-shadow var(--ease); }
.dash-card, .panel-main a.dash-card { color: #fff; }
.dash-card::after { content: ''; position: absolute; right: -34px; bottom: -44px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none; }
a.dash-card:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px var(--dc-ate); }
.dash-card-icone { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: var(--sp-2); border-radius: 10px; background: rgba(255, 255, 255, .2); }
.dash-card-icone .icon { width: 18px; height: 18px; stroke: #fff; }
.dash-card-rotulo { font-size: var(--fs-small); font-weight: 600; opacity: .92; }
.dash-card-valor { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.dash-card-nota { position: relative; z-index: 1; font-size: var(--fs-caption); opacity: .9; }
.dash-azul { --dc-de: #3B6FB6; --dc-ate: #23467F; }
.dash-verde { --dc-de: #2A9D8F; --dc-ate: #176A60; }
.dash-roxo { --dc-de: #7C5CD6; --dc-ate: #4E35A3; }
.dash-ambar { --dc-de: #D98A1F; --dc-ate: #A85F0B; }
.dash-alerta { margin: 0 0 var(--sp-6); padding: 14px 18px; border: 1px solid #E8C36A; border-left: 6px solid #D98A1F; border-radius: var(--radius); background: #FFF8EA; color: #6B4700; font-size: var(--fs-small); }
.dash-alerta summary { cursor: pointer; list-style: none; }
.dash-alerta summary::-webkit-details-marker { display: none; }
.dash-alerta-acao { display: inline-block; margin-left: var(--sp-2); padding: 2px 10px; border-radius: 999px; background: #D98A1F; color: #fff; font-weight: 600; white-space: nowrap; }
.dash-alerta[open] .dash-alerta-acao { display: none; }
.dash-alerta ul { margin: var(--sp-3) 0 var(--sp-2); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px var(--sp-4); }
.dash-alerta li a { display: block; padding: 6px 10px; border-radius: var(--radius-sm); background: #fff; border: 1px solid #F0DDB0; color: #6B4700; text-decoration: none; }
.dash-alerta li a:hover { border-color: #D98A1F; }
.quick-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-6); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: var(--sp-8) 0 var(--sp-3); }
.section-title h2 { margin: 0; }
.page-head { margin-bottom: var(--sp-6); }
.page-head p { margin: var(--sp-1) 0 0; color: var(--color-text-secondary); }

/* Tabelas */
.table-scroll { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.data-table { width: 100%; border-collapse: collapse; background: transparent; border: 0; }
.data-table th, .data-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border); text-align: left; font-size: var(--fs-small); vertical-align: middle; }
.data-table th { background: var(--color-surface-hover); font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); white-space: nowrap; }
.data-table tbody tr { transition: background var(--ease); }
.data-table tbody tr:hover { background: var(--color-surface-hover); }
.data-table tr:last-child td { border-bottom: none; }
.data-table a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.data-table a:hover { text-decoration: underline; }
.empty-state { padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--color-text-secondary); background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius); }
.pagination { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-4); }
.pagination a, .pagination span { min-width: 36px; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); text-align: center; text-decoration: none; color: var(--color-text-secondary); font-size: var(--fs-small); }
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination .is-current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Formularios */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
.form-grid .field-full { grid-column: 1 / -1; }
.form-grid .form-linha-3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
.form-grid .form-linha { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--colunas, 3), minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
.field label { display: block; margin-bottom: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--color-text); }
.panel-shell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .panel-shell select, .panel-shell textarea { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--fs-body); transition: border-color var(--ease), box-shadow var(--ease); }
.panel-shell textarea { min-height: 96px; resize: vertical; }
.panel-shell input:hover, .panel-shell select:hover, .panel-shell textarea:hover { border-color: var(--color-text-muted); }
.panel-shell input:focus, .panel-shell select:focus, .panel-shell textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(31, 127, 116, .18); }
.panel-shell input[type="checkbox"], .panel-shell input[type="radio"] { accent-color: var(--color-primary); width: 16px; height: 16px; }
.field-error { margin: 6px 0 0; color: var(--color-danger); font-size: var(--fs-caption); }
.field-hint { margin: 6px 0 0; color: var(--color-text-muted); font-size: var(--fs-caption); }
.form-actions { grid-column: 1 / -1; display: flex; gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--color-border); }
.paciente-busca { position: relative; }
.pb-lista { position: absolute; z-index: 30; left: 0; right: 0; margin: 4px 0 0; padding: var(--sp-1); list-style: none; max-height: 320px; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.pb-lista[hidden] { display: none; }
.pb-lista li[role="option"] { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); cursor: pointer; }
.pb-lista li[role="option"] span { color: var(--color-text-muted); font-size: var(--fs-caption); }
.pb-lista li[role="option"]:hover, .pb-lista li[aria-selected="true"] { background: var(--color-primary-soft); }
.pb-aviso { padding: var(--sp-2) var(--sp-3); color: var(--color-text-muted); font-size: var(--fs-small); }
.form-aba { grid-column: 1 / -1; }
.form-aba[hidden] { display: none; }
.form-abas-nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-1); border-bottom: 1px solid var(--color-border); }
.form-abas-nav button { min-height: 40px; padding: 0 var(--sp-4); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--color-text-muted); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.form-abas-nav button:hover { color: var(--color-text); }
.form-abas-nav button[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.form-abas-nav button.tem-erro::after { content: " •"; color: var(--color-danger); }
.form-aba-passos { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--sp-2); }
.convenio-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.convenio-row { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1.8fr; gap: var(--sp-2); }
.lgpd-notice { grid-column: 1 / -1; display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); background: var(--color-primary-soft); border-radius: var(--radius-sm); font-size: var(--fs-small); }
.foto-preview { display: flex; gap: var(--sp-5); align-items: center; }
.foto-preview img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--color-primary-soft); flex-shrink: 0; }
.foto-preview-controls { display: flex; flex-direction: column; gap: var(--sp-2); }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-2) var(--sp-4); padding: var(--sp-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.checkbox-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); font-weight: 400; margin: 0; }
.checkbox-item input { width: auto; }
.checkbox-item[hidden] { display: none; }

/* Alertas e toasts */
.alert-error, .alert-success { display: flex; gap: var(--sp-2); align-items: flex-start; margin: 0 0 var(--sp-4); padding: 12px 16px; border-radius: var(--radius-sm); font-size: var(--fs-small); border: 1px solid transparent; }
.alert-error { background: var(--color-danger-soft); border-color: rgba(184, 58, 34, .25); color: var(--color-danger); }
.alert-success { background: var(--color-success-soft); border-color: rgba(31, 127, 116, .25); color: var(--color-primary-hover); }
.toast-stack { position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 80; display: flex; flex-direction: column; gap: var(--sp-2); }
.toast { display: flex; align-items: center; gap: var(--sp-3); min-width: 260px; max-width: 380px; padding: 12px 16px; background: var(--color-text); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md); font-size: var(--fs-small); animation: toast-in .22s ease; }
.toast.is-error { background: var(--color-danger); }

/* Status: padrao global */
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-caption); font-weight: 600; text-transform: capitalize; background: var(--color-neutral-soft); color: var(--color-text-secondary); white-space: nowrap; }
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Senha preferencial (migration 188): fila, Atendimento hoje e agendamento. */
.badge-preferencial { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #7A3E00; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; vertical-align: middle; }
.status-agendado, .status-aguardando, .status-em_analise, .status-aberto { background: var(--color-info-soft); color: var(--color-info); }
.status-confirmado, .status-autorizado, .status-pago, .status-realizado, .status-atendida, .status-concluida, .status-aprovado, .status-ativo { background: var(--color-success-soft); color: var(--color-primary-hover); }
.status-pendente, .status-chamada, .status-parcial, .status-em_andamento { background: var(--color-warning-soft); color: var(--color-warning); }
.status-cancelado, .status-cancelada, .status-ausente, .status-negado, .status-glosa, .status-inativo { background: var(--color-danger-soft); color: var(--color-danger); }
.status-aguardando { background: var(--color-warning-soft); color: var(--color-warning); border: 1px dashed var(--color-warning); }
.status-nao_aplicavel { background: var(--color-neutral-soft); color: var(--color-text-muted); }
.panel-shell .status-badge[data-badge] { background: var(--color-accent); color: #fff; }
.panel-shell .status-badge[data-badge]::before { display: none; }

/* Skeleton, modal e drawer */
.skeleton { display: block; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-neutral-soft) 25%, #F7F9F9 50%, var(--color-neutral-soft) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; min-height: 1em; }
.overlay { position: fixed; inset: 0; z-index: 70; background: rgba(15, 27, 44, .45); animation: fade .16s ease; }
.overlay[hidden] { display: none; }
.modal, .drawer { position: fixed; z-index: 71; background: var(--color-surface); box-shadow: var(--shadow-md); }
.modal { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 32px)); padding: var(--sp-6); border-radius: var(--radius); animation: pop .16s ease; }
.drawer { right: 0; top: 0; bottom: 0; width: min(440px, 100vw); padding: var(--sp-6); overflow-y: auto; animation: slide-in .2s ease; }

/* Agenda */
.agenda-week { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: var(--sp-2); min-width: 900px; }
.agenda-week-day { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); min-height: 140px; }
.agenda-week-day-header { display: flex; justify-content: space-between; font-size: var(--fs-caption); font-weight: 600; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); padding-bottom: 6px; }
.agenda-week-vazio { margin: 0; font-size: var(--fs-caption); color: var(--color-text-muted); }
.agenda-week-add { margin-top: auto; font-size: var(--fs-caption); color: var(--color-text-muted); text-decoration: none; }
.agenda-week-add:hover { color: var(--color-primary); }
.agenda-mini-item { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--fs-caption); color: var(--color-text); text-decoration: none; background: var(--color-primary-soft); }
.agenda-mini-item:hover { background: #D3EAE6; }
.agenda-day-hoje { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.agenda-month { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 6px; min-width: 900px; }
.agenda-month-cabecalho { font-size: var(--fs-caption); font-weight: 600; color: var(--color-text-muted); text-align: center; padding: 4px 0; text-transform: uppercase; letter-spacing: .06em; }
.agenda-month-cell { display: flex; flex-direction: column; gap: 4px; padding: 6px; min-height: 92px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.agenda-month-cell-fora { opacity: .45; }
.agenda-month-day-num { font-size: var(--fs-caption); font-weight: 600; color: var(--color-text); text-decoration: none; }
.agenda-month-day-num:hover { text-decoration: underline; }
/* Agenda: uma cor por status do agendamento + destaque do paciente em atendimento (chamado por ultimo) */
/* Confirmado em azul (pedido do usuario em 07/10/2026); o agendado, que era azul, ficou com o
   verde-agua que era do confirmado, para os dois continuarem diferentes. */
.agenda-st-agendado { --st-cor: #1F7F74; --st-fundo: #E3F2EF; }
.agenda-st-confirmado { --st-cor: #1D4ED8; --st-fundo: #E0EAFF; }
.agenda-st-realizado { --st-cor: #5A6870; --st-fundo: #EEF1F2; }
.agenda-st-ausente { --st-cor: #A8620B; --st-fundo: #FBF1DC; }
.agenda-st-cancelado { --st-cor: #B83A22; --st-fundo: #FBE8E3; }
.agenda-st-em-atendimento { --st-cor: #6D28D9; --st-fundo: #EFE7FD; }
.agenda-mini-item[class*="agenda-st-"] { background: var(--st-fundo); border-left: 4px solid var(--st-cor); }
.agenda-mini-item[class*="agenda-st-"]:hover { filter: brightness(.96); }
.agenda-mini-item.agenda-st-cancelado { text-decoration: line-through; color: var(--color-text-muted); }
.agenda-mini-item.agenda-st-em-atendimento { font-weight: 700; box-shadow: 0 0 0 2px var(--st-cor); }
.data-table tr[class*="agenda-st-"] > td:first-child { box-shadow: inset 4px 0 0 var(--st-cor); }
.data-table tr.agenda-st-em-atendimento > td { background: var(--st-fundo); }
.status-badge[class*="agenda-st-"] { background: var(--st-fundo); color: var(--st-cor); }
.status-badge.agenda-st-em-atendimento { background: var(--st-cor); color: #fff; }
.status-badge.agenda-st-em-atendimento::before { animation: agenda-pulso 1.2s ease-in-out infinite; }
@keyframes agenda-pulso { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .status-badge.agenda-st-em-atendimento::before { animation: none; } }
/* Tela do agendamento: autorizacao do convenio, status e check-in na mesma linha */
.agenda-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); align-items: stretch; margin: var(--sp-4) 0; }
.agenda-acoes > .card { padding: var(--sp-4); min-width: 0; }
.agenda-acoes > .card > h2 { margin: 0 0 var(--sp-3); font-size: 1rem; }
/* Agenda em largura total (sem o limite de 1280px) para caber um botao por profissional numa linha;
   em tela estreita os botoes quebram para a linha de baixo em vez de ficarem escondidos na rolagem. */
.panel-main.panel-main-largo { max-width: none; }
.agenda-profissionais { margin-bottom: .8rem; }
.panel-shell .agenda-profissionais .button { flex: 0 0 auto; white-space: nowrap; padding: 0 var(--sp-3); }
.agenda-legenda { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .8rem; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-6); }
.detail-grid dt { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.detail-grid dd { margin: 2px 0 0; font-size: var(--fs-body); }

@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Tablet */
@media (max-width: 1024px) {
    .panel-shell, .panel-shell.is-collapsed { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-md); }
    .sidebar.is-open { transform: none; }
    .sidebar-scrim.is-open { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(15, 27, 44, .45); }
    .is-collapsed .nav-label, .is-collapsed .sidebar-brand span:last-child { display: initial; }
    .is-collapsed .nav-link { justify-content: flex-start; padding: 0 var(--sp-3); }
    .is-collapsed .nav-link:hover::after { display: none; }
    .sidebar-toggle { display: none; }
    .topbar, .panel-main { grid-column: 1; }
    .topbar { padding: 0 var(--sp-4); }
    .topbar-menu { display: grid; }
    .panel-main { padding: var(--sp-6) var(--sp-4) 96px; }
}

/* Mobile */
@media (max-width: 700px) {
    .user-trigger .user-name { display: none; }
    .form-grid, .form-grid .form-linha-3, .detail-grid, .convenio-row { grid-template-columns: 1fr; }
    .form-grid .form-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid .form-linha-texto { grid-template-columns: 1fr; }
    .panel-toolbar input[type="search"] { min-width: 0; width: 100%; }
    .panel-toolbar-actions { width: 100%; }
    .foto-preview { flex-direction: column; align-items: flex-start; }
    .card { padding: var(--sp-4); }
    .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--color-surface); border-top: 1px solid var(--color-border); padding-bottom: env(safe-area-inset-bottom); }
    .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 0; background: transparent; color: var(--color-text-muted); font: inherit; font-size: .68rem; text-decoration: none; cursor: pointer; }
    .bottom-nav .is-active { color: var(--color-primary); font-weight: 600; }
    .toast-stack { left: var(--sp-4); right: var(--sp-4); bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-copy, .hero-note { animation: none; }
    .button, .button:hover { transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) { .panel-shell *, .panel-shell *::before, .panel-shell *::after { animation: none !important; transition: none !important; } }

/* Chat flutuante (canto inferior direito) */
.chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; box-shadow: var(--shadow-md); cursor: pointer; transition: background var(--ease), transform var(--ease); }
.chat-fab:hover { background: var(--color-primary-hover); transform: translateY(-2px); }
.chat-fab .icon { width: 24px; height: 24px; }
.chat-fab .status-badge { position: absolute; top: -2px; right: -2px; padding: 0 6px; min-width: 20px; line-height: 20px; text-align: center; background: var(--color-accent); color: #fff; font-size: .7rem; border: 2px solid var(--color-bg); }
.chat-fab .status-badge::before { display: none; }
.chat-widget { position: fixed; right: 24px; bottom: 92px; z-index: 50; display: flex; flex-direction: column; width: 380px; height: min(560px, calc(100vh - 120px)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-md); overflow: hidden; animation: pop .16s ease; }
.chat-widget[hidden] { display: none; }
.chat-widget-head { display: flex; align-items: center; gap: var(--sp-1); padding: 6px 8px 6px 16px; background: var(--sidebar-bg); color: #fff; }
.chat-widget-head strong { margin-right: auto; font-size: var(--fs-small); }
.chat-widget-head .icon-btn { color: #fff; width: 32px; height: 32px; }
.chat-widget-head .icon-btn:hover { background: rgba(255, 255, 255, .12); }
.chat-widget iframe { flex: 1; width: 100%; border: 0; background: var(--color-bg); }
.toast-stack { bottom: 92px; }
@media (max-width: 700px) {
    .chat-fab { right: 16px; bottom: 72px; width: 52px; height: 52px; }
    .chat-widget { right: 0; left: 0; bottom: 0; width: auto; height: calc(100vh - 56px); border-radius: 12px 12px 0 0; }
    .toast-stack { bottom: 136px; }
}

/* Pagina carregada dentro do chat flutuante (iframe): mostra so o conteudo */
html.is-embed .sidebar, html.is-embed .sidebar-scrim, html.is-embed .topbar, html.is-embed .bottom-nav, html.is-embed .chat-fab, html.is-embed .chat-widget, html.is-embed .toast-stack { display: none !important; }
html.is-embed .panel-shell { display: block; min-height: 0; }
html.is-embed .panel-main { padding: 12px; max-width: none; }
html.is-embed .panel-toolbar { margin-bottom: 12px; }
html.is-embed .panel-toolbar h1 { font-size: 1.05rem; }
html.is-embed .panel-main > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
html.is-embed #chat-mensagens { max-height: 48vh !important; }
html.is-embed #chat-sair { display: none; }

/* Grade de horarios da agenda (formulario de agendamento, portal, totem) */
.grade-horarios { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.grade-horario { min-width: 4.4rem; padding: .45rem .7rem; border: 1px solid var(--color-primary); border-radius: 8px; background: #fff; color: var(--color-primary); font: inherit; font-weight: 700; cursor: pointer; }
.grade-horario:hover:not([disabled]) { background: var(--color-primary-soft); }
.grade-horario.is-selecionado { background: var(--color-primary); color: #fff; }
.grade-horario[disabled] { border-color: #cfd6d5; color: #8a9594; background: #f3f5f5; cursor: not-allowed; text-decoration: line-through; font-weight: 400; }
.badge-encaixe { display: inline-block; padding: .05rem .4rem; border-radius: 999px; background: #FFF1D6; color: #8A5A00; font-size: .7rem; font-weight: 700; vertical-align: middle; }
/* Duracao diferente da padrao (migration 131) */
.badge-duracao { display: inline-block; padding: .05rem .4rem; border-radius: 999px; background: #E8E4FA; color: #4B3A9E; font-size: .7rem; font-weight: 700; vertical-align: middle; }
.grade-sobras-rotulo { flex-basis: 100%; margin-top: .35rem; font-size: .8rem; font-weight: 700; color: #8A5A00; }
.grade-horario.grade-sobra { border-style: dashed; border-color: #C98A00; color: #8A5A00; background: #FFF8EA; }
.grade-horario.grade-sobra.is-selecionado { background: #C98A00; color: #fff; }

/* Bloqueios x agendamentos / lista "A remarcar" */
.alert-warning { display: block; margin: 0 0 1rem; padding: 12px 16px; border-radius: 6px; border: 1px solid #E8C36A; background: #FFF8EA; color: #6B4700; font-size: .9rem; }
.badge-bloqueio { display: inline-block; padding: .05rem .4rem; border-radius: 999px; background: #FDE2DC; color: #9E2A10; font-size: .7rem; font-weight: 700; vertical-align: middle; }
.linha-em-bloqueio td { background: #FFF1EE; }
.agenda-mini-item.em-bloqueio { outline: 2px solid #D9534F; outline-offset: -2px; background: #FFF1EE; }
.botao-whatsapp { background: #1FA855; border-color: #1FA855; color: #fff !important; }

/* Buscar horario: profissional, data e duracao numa linha (quebra em telas estreitas) */
.busca-horario { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; }
.busca-horario .field { flex: 1 1 9rem; margin: 0; }
.busca-horario .busca-horario-profissional { flex: 3 1 16rem; }
.busca-horario .button { flex: 0 0 auto; }
/* horario da grade indisponivel exibido so para leitura (Buscar horario) */
.grade-horario.grade-horario-leitura { display: inline-flex; flex-direction: column; align-items: center; border-color: #cfd6d5; color: #6f7b7a; background: #f3f5f5; cursor: default; font-weight: 700; line-height: 1.15; }
.grade-horario.grade-horario-leitura small { font-size: .68rem; font-weight: 400; text-transform: lowercase; }
/* dia sem vaga: atalho para o proximo dia/horario disponivel */
.grade-horario.grade-proximo { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.grade-horario.grade-proximo:hover { background: var(--color-primary-hover); }
/* Campo de arquivo com arrastar e soltar (public/assets/js/arquivo-arrastar.js): o input fica
   transparente por cima da area, entao clicar abre o seletor e soltar o arquivo preenche o campo. */
.arquivo-drop { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1); min-height: 84px; padding: var(--sp-3) var(--sp-4); border: 2px dashed var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface-hover); color: var(--color-text-secondary); font-size: var(--fs-small); text-align: center; transition: border-color var(--ease), background var(--ease); }
.arquivo-drop:hover, .arquivo-drop:focus-within { border-color: var(--color-primary); }
.arquivo-drop.arrastando { border-color: var(--color-primary); background: var(--color-primary-soft); }
.arquivo-drop.tem-arquivo { border-style: solid; border-color: var(--color-primary); }
.arquivo-drop > input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; z-index: 1; }
.arquivo-drop-texto { display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.arquivo-drop-texto strong { color: var(--color-primary); font-weight: 600; }
.arquivo-drop-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); color: var(--color-text); font-weight: 600; pointer-events: none; }
.arquivo-drop-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); max-width: 160px; }
.arquivo-drop-nome { font-size: var(--fs-caption); line-height: 1.3; word-break: break-all; }
.arquivo-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 96px; height: 120px; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.arquivo-thumb img, .arquivo-thumb canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.arquivo-thumb-icone { color: var(--color-primary); font-size: .9rem; font-weight: 700; letter-spacing: .04em; background: var(--color-primary-soft); }
.arquivo-thumb[data-paginas]::after { content: attr(data-paginas); position: absolute; right: 3px; bottom: 3px; padding: 0 4px; border-radius: 3px; background: rgba(20, 38, 63, .75); color: #fff; font-size: .65rem; font-weight: 600; }
.arquivo-drop-lista:empty, .arquivo-drop-aviso:empty { display: none; }
.arquivo-drop-aviso { color: var(--color-danger); pointer-events: none; }
.foto-preview-controls .arquivo-drop { min-width: min(240px, 100%); }
.texto-clinico { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.texto-clinico p { margin: 0 0 .4rem; }
.texto-clinico p:last-child { margin-bottom: 0; }
/* Formulario que abre so ao clicar (public/assets/js/abrir-formulario.js) */
.button[hidden], .bloco-formulario[hidden] { display: none; }
.bloco-formulario { margin-bottom: var(--sp-6); scroll-margin-top: calc(var(--topbar-h) + var(--sp-4)); }
.bloco-formulario > h2:first-child { margin-top: 0; }

/* Chat interno (/chat): lista de profissionais ao lado da conversa; no celular, uma embaixo da outra */
.chat-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.chat-layout.chat-com-lista { grid-template-columns: minmax(180px, 240px) 1fr; }

/* Celular: o topo mostra so o nome da tela (o "Clinica Hayim" quebrava em duas linhas) */
@media (max-width: 700px) {
    .chat-layout.chat-com-lista { grid-template-columns: 1fr; }
    .breadcrumb > a:first-child:not(:last-child), .breadcrumb > a:first-child:not(:last-child) + span[aria-hidden] { display: none; }
    .breadcrumb [aria-current] { font-size: .95rem; }
    /* selos com frase longa (ex.: "datas de nascimento diferentes — confira...") quebram linha em vez de alargar a pagina */
    .status-badge { white-space: normal; max-width: 100%; }
}

/* Tabelas do painel no celular: cada linha vira um cartao com "rotulo: valor" (rotulos copiados
   do cabecalho por painel.js -> .tabela-cartoes / data-label). A primeira coluna vira o titulo. */
@media (max-width: 640px) {
    .table-scroll:has(> .tabela-cartoes) { overflow-x: visible; }
    .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: 100%; }
    .tabela-cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tabela-cartoes tbody tr { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border); }
    .tabela-cartoes tbody tr:last-child { border-bottom: 0; }
    /* rotulo posicionado a esquerda; o conteudo da celula segue em fluxo normal (pode ter varios elementos) */
    .tabela-cartoes td { position: relative; padding: 3px 0 3px min(38%, 140px); border: 0; font-size: var(--fs-small); overflow-wrap: anywhere; }
    .tabela-cartoes td::before { content: attr(data-label); position: absolute; left: 0; top: 3px; width: calc(min(38%, 140px) - var(--sp-2)); color: var(--color-text-muted); font-size: var(--fs-caption); font-weight: 600; line-height: 1.7; }
    .tabela-cartoes td[data-label=""], .tabela-cartoes td.cel-inteira { padding-left: 0; }
    .tabela-cartoes td[data-label=""]::before, .tabela-cartoes td.cel-inteira::before { display: none; }
    .tabela-cartoes td:empty { display: none; }
    .tabela-cartoes td:first-child:not(.cel-inteira) { padding-left: 0; padding-bottom: var(--sp-1); font-size: var(--fs-body); font-weight: 600; }
    .tabela-cartoes td:first-child:not(.cel-inteira)::before { display: none; }
    .data-table.tabela-cartoes tr[class*="agenda-st-"] { box-shadow: inset 4px 0 0 var(--st-cor); padding-left: calc(var(--sp-4) + 4px); }
    .data-table.tabela-cartoes tr[class*="agenda-st-"] > td:first-child { box-shadow: none; }
}

/* Telas de login (equipe e portal): o painel lateral mostra a fachada da clinica
   (public/assets/img/clinica/fachada.jpg, gerada por ferramentas/tratar_fotos_site.php).
   Um veu escuro em degrade (--auth-veu, em R, G, B) garante a leitura do texto branco: mais forte
   embaixo, onde fica o texto, e leve em cima, onde aparece a placa. No celular o painel vira uma
   faixa com a foto no topo da tela. */
/* A foto fica ancorada no topo, com pelo menos 62% da altura do painel: a placa aparece inteira em
   qualquer proporcao de janela; abaixo dela o veu fecha na cor solida, onde entra o texto. */
.auth-visual { --auth-veu: 20, 38, 63; background:
    linear-gradient(180deg, rgba(var(--auth-veu), .34) 0%, rgba(var(--auth-veu), .04) 16%, rgba(var(--auth-veu), .10) 38%, rgba(var(--auth-veu), .96) 61%, rgb(var(--auth-veu)) 100%),
    url('../img/clinica/fachada.jpg') 61% top / max(100%, 93vh) auto no-repeat rgb(var(--auth-veu)); }
.auth-visual::after, .auth-visual-brand { display: none; }
.auth-visual { justify-content: flex-end; }
.auth-visual-brand, .auth-visual-copy h2, .auth-visual-copy p { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.auth-visual-copy p { color: rgba(255, 255, 255, .88); }
@media (max-width: 900px) {
    .auth-shell { flex-direction: column; }
    .auth-visual { display: block; flex: 0 0 auto; height: 168px; padding: 0; animation: none; background:
        linear-gradient(180deg, rgba(var(--auth-veu), .30) 0%, rgba(var(--auth-veu), 0) 45%, rgba(var(--auth-veu), .18) 100%),
        url('../img/clinica/fachada.jpg') 0% 20% / 118% auto no-repeat #14263F; } /* deslocada: a placa fica a direita do botao "Voltar" */
    .auth-visual > * { display: none; }
    .auth-form-wrap { align-items: flex-start; padding-top: 1.6rem; }
}

/* Login da equipe: deixa claro que a tela e so para profissionais e funcionarios, e aponta o
   paciente para o portal */
.auth-restrito { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .7rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(29, 53, 87, .08); color: var(--blue); font-size: .8rem; font-weight: bold; }
.auth-restrito::before { content: ''; width: .8rem; height: .8rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7A5 5 0 007 7v2H5v13h14V9zm-8 0V7a3 3 0 016 0v2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7A5 5 0 007 7v2H5v13h14V9zm-8 0V7a3 3 0 016 0v2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.auth-restrito ~ h1 + .auth-subtitle { margin-bottom: .8rem; }
.auth-paciente { margin: 0 0 1.2rem; padding: .6rem .8rem; border-left: 3px solid var(--green); background: rgba(42, 157, 143, .08); font-size: .9rem; color: var(--ink); }
.auth-paciente a { color: var(--blue); font-weight: bold; }

/* ---------- E-mails (/emails): caixa da clinica dentro do sistema ---------- */
.email-busca { display: flex; gap: var(--sp-2); margin: 0; }
.email-pastas { margin-bottom: var(--sp-4); }
.email-lista tr.is-nao-lida td { background: var(--color-primary-soft); }
.email-lista tr.is-nao-lida .email-quem, .email-lista tr.is-nao-lida a { font-weight: 700; color: var(--color-text); }
.email-lista a { font-weight: 500; }
.email-quem { display: block; }
.email-endereco { display: block; color: var(--color-text-muted); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.email-data { white-space: nowrap; color: var(--color-text-secondary); }
.email-lista .status-badge { margin-left: var(--sp-1); text-transform: none; }
.email-mensagem { margin-bottom: var(--sp-6); }
.panel-shell h1.email-assunto { font-size: 1.3rem; margin-bottom: var(--sp-4); overflow-wrap: anywhere; }
.email-cabecalho { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--color-border); }
.email-cabecalho > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-3); }
.email-cabecalho dt { color: var(--color-text-muted); font-size: var(--fs-small); }
.email-cabecalho dd { margin: 0; overflow-wrap: anywhere; }
.email-cabecalho .status-badge { margin-left: var(--sp-2); text-decoration: none; text-transform: none; }
.email-anexos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-2); padding: 0; list-style: none; }
.email-anexos a { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 12px; border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-text); font-size: var(--fs-small); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.email-anexos a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.email-anexos a span { color: var(--color-text-muted); font-weight: 400; }
.email-corpo { margin-top: var(--sp-4); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; max-width: 80ch; }
.email-original { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--color-border); }
.email-original summary, .email-citacao summary { cursor: pointer; color: var(--color-primary); font-weight: 600; font-size: var(--fs-small); }
.email-original iframe { width: 100%; height: 520px; margin-top: var(--sp-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; }
.email-texto { width: 100%; padding: .6rem .75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; line-height: 1.5; resize: vertical; }
.email-texto:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(31, 127, 116, .18); }
.email-citacao { margin-top: var(--sp-2); }
.email-citacao pre { max-height: 220px; overflow: auto; margin: var(--sp-2) 0 0; padding: var(--sp-3); background: var(--color-neutral-soft); border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-small); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-text-secondary); }
@media (max-width: 700px) {
    .email-busca { width: 100%; }
    /* lista em cartoes: o destaque de nao lida vai no cartao inteiro */
    .email-lista tr.is-nao-lida { background: var(--color-primary-soft); }
    .email-lista tr.is-nao-lida td { background: transparent; }
    .email-busca input { flex: 1; min-width: 0; }
    .email-cabecalho > div { grid-template-columns: 48px minmax(0, 1fr); }
    .email-original iframe { height: 420px; }
}

/* ===== Editor de documento (laudo com texto livre, migration 230; js/editor-documento.js) ===== */
.ed-doc { border: 1px solid var(--color-border-strong, #CBD3D5); border-radius: 4px; background: #eef1ec; }
.ed-barra { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: .35rem .6rem; padding: .45rem .5rem; background: #fff; border-bottom: 1px solid var(--color-border, #E2E7E8); border-radius: 4px 4px 0 0; }
.ed-grupo { display: inline-flex; flex-wrap: wrap; gap: .2rem; align-items: center; }
.ed-botao { min-width: 2rem; height: 2rem; padding: 0 .5rem; border: 1px solid var(--color-border, #E2E7E8); border-radius: 3px; background: #fff; color: var(--color-text, #1E2A32); font: inherit; font-size: .85rem; line-height: 1; cursor: pointer; }
.ed-botao:hover { background: var(--color-surface-hover, #F8FAFA); border-color: var(--color-border-strong, #CBD3D5); }
.ed-botao:focus-visible, .ed-tamanho:focus-visible, .ed-cor:focus-visible { outline: 2px solid var(--color-primary, #1F7F74); outline-offset: 1px; }
.ed-botao.ativo { background: var(--color-primary-soft, #E6F3F1); border-color: var(--color-primary, #1F7F74); color: var(--color-primary, #1F7F74); }
.ed-tamanho { width: auto; min-height: 0; height: 2rem; padding: 0 .3rem; border: 1px solid var(--color-border, #E2E7E8); border-radius: 3px; font: inherit; font-size: .85rem; background: #fff; }
.ed-cor { flex: none; min-height: 0; width: 2.2rem; height: 2rem; padding: 2px; border: 1px solid var(--color-border, #E2E7E8); border-radius: 3px; background: #fff; cursor: pointer; }
/* Area com a largura do texto na folha A4 (170 mm) e a letra da impressao: cresce com o texto, sem rolagem interna. */
.ed-area { box-sizing: border-box; width: 100%; max-width: calc(170mm + 3rem); min-height: 320px; margin: .8rem auto; padding: 1.2rem 1.5rem; background: #fff; color: #1a1a1a; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; font-size: 12pt; line-height: 1.5; text-align: justify; overflow-wrap: break-word; outline: none; }
.ed-area:focus { box-shadow: 0 0 0 2px var(--color-primary, #1F7F74); }
.ed-area p, .ed-area div { margin: 0 0 .55em; }
.ed-area ul, .ed-area ol { margin: 0 0 .55em; padding-left: 1.6em; }
.ed-area table { border-collapse: collapse; }
.ed-area td, .ed-area th { padding: .15em .5em; vertical-align: top; border: 1px dashed #ccc; }
.ed-area .al-centro { text-align: center; }
.ed-area .al-direita { text-align: right; }
.ed-area .titulo { font-weight: bold; }
.ed-area .dm-fecho { margin-top: 2.2rem; }
.ed-area .dm-local { margin-right: 4mm; text-align: right; }
.ed-area .dm-assinatura { margin-top: 3rem; text-align: center; line-height: 1.35; }
.ed-area .dm-assinatura p { margin: 0; }
.ed-area .dm-ass-linha { font-size: 11pt; }
.ed-area hr.dm-ass-regua { width: 64mm; max-width: 80%; height: 0; margin: 0 auto 1.5mm; border: 0; border-top: 2pt solid #7ba23f; }
.ed-codigo { box-sizing: border-box; display: block; width: calc(100% - 1.6rem); margin: .8rem; padding: .8rem; border: 1px solid var(--color-border-strong, #CBD3D5); border-radius: 3px; font-family: Consolas, 'Courier New', monospace; font-size: .85rem; line-height: 1.45; resize: vertical; }
.ed-tela-cheia { position: fixed; inset: 0; z-index: 1000; overflow: auto; border: 0; border-radius: 0; }
.ed-tela-cheia .ed-barra { border-radius: 0; }
.ed-tela-cheia .ed-area { margin: 1.5rem auto; min-height: calc(100vh - 8rem); }
html.ed-sem-rolagem, html.ed-sem-rolagem body { overflow: hidden; }
.ed-doc [hidden], textarea[data-editor-documento][hidden] { display: none !important; }
@media (max-width: 640px) {
    .ed-area { padding: .9rem; font-size: 11pt; }
}