/* Fiscal: separate everyday document work from setup and diagnostics. */
.fiscal-notice { padding: 18px 22px; margin-bottom: 20px; border-left: 4px solid var(--brand-primary); }
.fiscal-notice strong { color: var(--brand-dark); }
.fiscal-notice p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 900px; }
.fiscal-navigation { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.fiscal-navigation button { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--brand-surface); color: var(--brand-dark); font: inherit; font-size: 13px; cursor: pointer; }
.fiscal-navigation button.is-active { background: var(--brand-secondary); border-color: var(--brand-secondary); color: white; }
.fiscal-navigation .ui-icon { width: 18px; height: 18px; }
.fiscal-navigation button:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 3px; }
.fiscal-section { min-width: 0; }
.fiscal-section[hidden] { display: none; }
.fiscal-section .fiscal-form { margin-top: 0; gap: 18px; }
#fiscal-configuration-form { padding: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#fiscal-configuration-form > p, #fiscal-configuration-form > button, #fiscal-configuration-form > .fiscal-check { grid-column: 1 / -1; }
.fiscal-form > button { justify-self: start; }
.fiscal-check { padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--brand-background); }
.fiscal-check input[type="checkbox"] { width: 17px; height: 17px; margin: 0 9px 0 0; vertical-align: middle; accent-color: var(--brand-secondary); }
.fiscal-section .fiscal-prepare-bar { grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) auto; align-items: end; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.fiscal-form-intro { align-self: center; }
.fiscal-form-intro strong, .fiscal-form-intro small { display: block; }
.fiscal-form-intro small { margin-top: 6px; color: var(--muted); line-height: 1.5; }
.fiscal-table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 13px; }
.fiscal-table th { background: var(--brand-background); color: var(--brand-dark); text-align: left; font-size: 12px; }
.fiscal-table th, .fiscal-table td { padding: 15px 16px; border-bottom: 1px solid var(--line); }
.fiscal-table td:last-child { text-align: right; }
.fiscal-table td[colspan] { text-align: center; padding: 40px 16px; color: var(--muted); }
#fiscal-section-2 > h2 { padding: 22px 22px 0; margin: 0; color: var(--brand-dark); }
#fiscal-section-2 > p { margin: 8px 22px 22px; color: var(--muted); line-height: 1.6; font-size: 13px; }
#national-configuration-form, #national-dps-form { padding: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#national-configuration-form > h3, #national-configuration-form > p, #national-configuration-form > button, .fiscal-advanced, #national-dps-form > h3, #national-dps-form > p, #national-dps-form > button { grid-column: 1 / -1; }
.fiscal-section h3 { margin: 0; font-size: 16px; color: var(--brand-dark); }
.fiscal-section label { min-width: 0; }
.fiscal-advanced { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--brand-background); }
.fiscal-advanced summary { cursor: pointer; color: var(--brand-secondary); font-weight: 600; }
.fiscal-advanced textarea { width: 100%; font-family: monospace; }
.fiscal-diagnostics { padding: 22px; border-top: 1px solid var(--line); }
.fiscal-diagnostics .button { margin: 8px 8px 0 0; }
.fiscal-diagnostics p { font-size: 13px; line-height: 1.6; }
@media (max-width: 900px) {
  .fiscal-section .fiscal-prepare-bar { grid-template-columns: 1fr; }
  #fiscal-configuration-form, #national-configuration-form, #national-dps-form { grid-template-columns: 1fr; }
  .fiscal-navigation button { flex: 1 1 180px; justify-content: center; }
  .fiscal-form > button { width: 100%; }
  .fiscal-table { min-width: 600px; }
}

@font-face {
  font-family: "Montserrat";
  src: url("/static/branding/zoonor/fonts/Montserrat-Regular.6133d7c8d5fd.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/branding/zoonor/fonts/Montserrat-Medium.af37bf893061.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/branding/zoonor/fonts/Montserrat-SemiBold.bef57ba1c2f4.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/branding/zoonor/fonts/Montserrat-Bold.cf3a2eaec658.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --zoonor-primary: #0fb39e;
  --zoonor-secondary: #0d7a6e;
  --zoonor-navy: #0b2d4d;
  --zoonor-cyan: #6ec1e4;
  --zoonor-background: #f4f6f8;
  --brand-primary: var(--zoonor-primary);
  --brand-secondary: var(--zoonor-secondary);
  --brand-dark: var(--zoonor-navy);
  --brand-accent: var(--zoonor-cyan);
  --brand-background: var(--zoonor-background);
  --brand-surface: #ffffff;
  --brand-text: #0b2d4d;
  --brand-muted: #60758a;
  --brand-border: #dfe7ec;
  --content-canvas: #f4f6f8;
  --content-surface: #ffffff;
  --content-subtle: #f8fbfc;
  --content-muted: #f1f5f7;
  --content-border: #dfe7ec;
  --content-copy-muted: #60758a;
  --content-highlight: #edf7fb;
  --content-highlight-border: #6ec1e4;
  --ink: var(--brand-text);
  --muted: var(--brand-muted);
  --cream: var(--brand-background);
  --surface: var(--brand-surface);
  --line: var(--brand-border);
  --green: var(--brand-dark);
  --green-2: var(--brand-secondary);
  --sage: #83a7ac;
  --mint: #dcf7f3;
  --peach: #bceef0;
  --peach-2: var(--brand-accent);
  --peach-soft: #e8f8fa;
  --yellow: #f4d77a;
  --danger: #b53a48;
  --shadow: 0 18px 48px rgba(11, 45, 77, .10);
  --radius: 16px;
  --icon-badge-size: 40px;
  --icon-badge-radius: 11px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font: 14px/1.5 "Montserrat", Arial, sans-serif;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
[hidden] { display: none !important; }

.auth-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, 46%) 1fr; }
.auth-brand {
  position: relative; overflow: hidden; min-height: 100vh; padding: 48px 8%;
  color: #fff; background: var(--green);
  display: flex; flex-direction: column; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 800 24px "Montserrat"; }
.brand-light { color: #fff; position: relative; z-index: 2; }
.brand-logo {
  display: block;
  width: 172px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.brand-light {
  width: max-content;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .12);
}
.checkout-summary .brand {
  width: max-content;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
}
.auth-message { position: relative; z-index: 2; max-width: 580px; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-weight: 700; font-size: 11px; color: #b8d4c8; }
.auth-message h1 { margin: 20px 0; font: 800 clamp(42px, 5vw, 70px)/1.03 "Montserrat"; letter-spacing: -.05em; }
.auth-message h1 em { color: var(--peach); font-style: normal; }
.auth-message p { max-width: 500px; color: #c6d9d0; font-size: 17px; }
.auth-proof { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; color: #c6d9d0; }
.auth-proof p { margin: 0; }
.auth-proof strong { color: #fff; }
.proof-avatars { display: flex; }
.proof-avatars span {
  width: 36px; height: 36px; display: grid; place-items: center; margin-left: -8px;
  border: 2px solid var(--green); border-radius: 50%; background: var(--mint); color: var(--green); font-size: 10px; font-weight: 700;
}
.proof-avatars span:first-child { margin-left: 0; background: var(--peach); }
.proof-avatars span:last-child { background: var(--yellow); }
.brand-orbit { position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.orbit-one { width: 520px; height: 520px; right: -190px; top: 15%; }
.orbit-two { width: 300px; height: 300px; right: -40px; top: 28%; }
.auth-panel { min-height: 100vh; display: grid; place-items: center; padding: 40px; background: #fafaf7; }
.auth-card { width: min(440px, 100%); }
.auth-card h2 { margin: 0 0 8px; font: 800 32px/1.2 "Montserrat"; letter-spacing: -.03em; }
.muted { color: var(--muted); }
.mobile-brand { display: none; margin-bottom: 36px; }
.mobile-brand-logo { display: block; width: 176px; max-width: 100%; height: auto; }
.form-stack { display: grid; gap: 18px; margin-top: 32px; }
.form-stack.compact { gap: 14px; }
label { display: grid; gap: 8px; color: #445149; font-weight: 600; font-size: 13px; }
input, select, textarea {
  width: 100%; border: 1px solid #dfe3dc; border-radius: 12px; outline: 0;
  padding: 13px 14px; color: var(--ink); background: #fff; transition: .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(38,112,90,.1); }
textarea { min-height: 90px; resize: vertical; }
.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 48px; }
.password-wrap button { position: absolute; right: 8px; top: 7px; }
.button {
  border: 0; border-radius: 12px; padding: 13px 18px; display: inline-flex; align-items: center;
  justify-content: center; gap: 12px; font-weight: 700; transition: .2s; text-decoration: none;
}
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--green); box-shadow: 0 8px 18px rgba(23,79,61,.16); }
.button-secondary { color: var(--green); background: #e6efe9; }
.button-light { color: var(--ink); background: #fff; border: 1px solid var(--line); }
.button-danger { color: #fff; background: var(--danger); }
.button-full { width: 100%; justify-content: space-between; margin-top: 4px; }
.auth-switch { margin-top: 28px; text-align: center; color: var(--muted); }
.auth-switch button { border: 0; background: transparent; color: var(--green-2); font-weight: 700; }
.demo-hint { display: flex; gap: 12px; margin-top: 28px; padding: 14px; border-radius: 12px; background: #edf3ee; color: #57645c; font-size: 12px; }
.demo-dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #48a879; box-shadow: 0 0 0 4px rgba(72,168,121,.14); }

.checkout-screen { min-height: 100vh; display: grid; place-items: center; padding: 34px; background: radial-gradient(circle at 18% 18%, #eef6f0, transparent 32%), #fbfaf6; }
.checkout-card { width: min(1040px, 100%); display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, .65fr); overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.checkout-summary { display: grid; align-content: start; gap: 22px; padding: 42px; color: #fff; background: linear-gradient(145deg, var(--green), #1d6c55); }
.checkout-summary .brand { color: #fff; }
.checkout-summary h1 { margin: 0; font: 900 42px/1.05 "Montserrat"; }
.checkout-summary p { max-width: 520px; margin: 0; color: #dcebe3; font-size: 16px; }
.checkout-plan-box { display: grid; gap: 6px; margin-top: 8px; padding: 20px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; background: rgba(255,255,255,.08); }
.checkout-plan-box small, .checkout-plan-box span { color: #dcebe3; }
.checkout-plan-box strong { font: 900 28px "Montserrat"; }
.checkout-plan-box b { color: var(--peach); font-size: 22px; }
.checkout-benefits { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.checkout-benefits li { display: flex; gap: 10px; align-items: center; color: #eef8f2; }
.checkout-benefits li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--green); background: var(--peach); font-weight: 900; }
.checkout-form { display: grid; align-content: start; gap: 16px; padding: 42px; background: #fff; }
.checkout-form h2 { margin: 0 0 6px; font: 900 28px "Montserrat"; }
.checkout-form label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
.checkout-form input, .checkout-form select { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; font: inherit; }
.mp-field { height: 47px; min-height: 47px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.mp-field iframe { display: block; width: 100% !important; height: 45px !important; border: 0; }
.progress-bar { width: 100%; accent-color: var(--green); }
.compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.marketing-screen {
  min-height: 100vh; padding-top: 72px; background: #fbfaf6; color: var(--ink); overflow-x: clip;
}
#top, #recursos, #funcionalidades, #planos, #depoimentos, #faq, #contato { scroll-margin-top: 92px; }
.marketing-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: 72px; margin: 0 auto; padding: 0 max(34px, calc((100vw - 1500px) / 2 + 34px));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(251,250,246,.94); border-bottom: 1px solid rgba(230,232,226,.72); backdrop-filter: blur(16px);
}
.marketing-nav nav { display: flex; align-items: center; gap: 34px; font-weight: 800; font-size: 13px; }
.marketing-nav a { color: var(--ink); text-decoration: none; }
.marketing-actions { display: flex; align-items: center; gap: 14px; }
.marketing-actions .text-button { color: var(--ink); font-size: 13px; }
.marketing-screen main { max-width: 1500px; margin: 0 auto; padding: 0 34px; }
.marketing-hero {
  position: relative; min-height: 560px; display: grid; align-items: center; padding: 48px 0 36px;
}
.marketing-hero::before {
  content: ""; position: absolute; inset: 0 -34px auto -34px; height: 100%;
  background: radial-gradient(circle at 78% 18%, rgba(244,201,169,.38), transparent 34%),
    linear-gradient(180deg, #fbfaf6 0%, #f7f3ec 100%);
  z-index: 0;
}
.hero-copy { position: relative; z-index: 2; width: min(610px, 58%); }
.hero-pill {
  display: inline-flex; align-items: center; margin-bottom: 24px; padding: 8px 16px; border-radius: 999px;
  color: var(--green); background: #e8f3ec; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em;
}
.hero-copy h1 { margin: 0; font: 800 72px/1.02 "Montserrat"; letter-spacing: -.04em; color: var(--green); }
.hero-copy h1 em { display: block; color: #e0b693; font-style: normal; }
.hero-copy p { max-width: 570px; margin: 22px 0 26px; color: #21352d; font-size: 19px; line-height: 1.45; }
.hero-actions, .hero-proof { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-proof { margin-top: 26px; gap: 28px; color: #416056; font-size: 13px; font-weight: 700; }
.product-preview {
  position: absolute; z-index: 1; right: 0; top: 70px; width: min(760px, 56vw); min-height: 382px;
  overflow: hidden; display: block; padding: 10px; border: 1px solid rgba(23,79,61,.12); border-radius: 26px;
  background: rgba(255,255,255,.74); box-shadow: 0 24px 70px rgba(28,54,42,.12); backdrop-filter: blur(10px);
  text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.product-preview:hover { transform: translateY(-3px); border-color: rgba(23,79,61,.3); box-shadow: 0 30px 78px rgba(28,54,42,.18); }
.product-preview:focus-visible { outline: 3px solid rgba(23,79,61,.3); outline-offset: 4px; }
.product-preview img {
  width: 100%; height: auto; display: block; border-radius: 18px;
  image-rendering: -webkit-optimize-contrast; transform: translateZ(0);
}
.product-preview-hint {
  position: absolute; right: 24px; bottom: 24px; padding: 9px 13px; border-radius: 9px;
  color: #fff; background: rgba(15,74,56,.9); font-size: 12px; font-weight: 800;
  box-shadow: 0 8px 22px rgba(21,36,29,.2); opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease;
}
.product-preview:hover .product-preview-hint, .product-preview:focus-visible .product-preview-hint { opacity: 1; transform: translateY(0); }
.preview-lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 72px 28px 28px;
  background: rgba(11,27,21,.82); backdrop-filter: blur(10px);
}
.preview-lightbox-content { position: relative; width: min(1500px, 96vw); max-height: calc(100vh - 100px); overflow: auto; border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.preview-lightbox-content img { width: 100%; height: auto; display: block; background: #fff; }
.preview-lightbox-close {
  position: fixed; top: 20px; right: 24px; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: 10px; color: #fff; background: rgba(255,255,255,.12); font-size: 28px; line-height: 1;
}
.preview-lightbox-close:hover, .preview-lightbox-close:focus-visible { background: rgba(255,255,255,.22); outline: 2px solid rgba(255,255,255,.55); outline-offset: 2px; }
body.preview-lightbox-open { overflow: hidden; }
.marketing-section, .pricing-section, .faq-section, .marketing-cta { position: relative; z-index: 2; padding: 28px 0; }
.marketing-section h2, .pricing-section h2, .faq-section h2 { margin: 0 0 20px; text-align: center; font: 800 24px "Montserrat"; }
.feature-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.feature-grid article, .pricing-grid article, .testimonial-card {
  border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 20px; box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.feature-grid i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #e8f3ec; color: var(--green); font-style: normal; }
.feature-grid i .ui-icon { width: 21px; height: 21px; }
.feature-grid h3, .pricing-grid h3 { margin: 14px 0 6px; font: 800 16px "Montserrat"; }
.feature-grid p, .pricing-grid p { margin: 0; color: #526258; line-height: 1.35; }
.stats-band {
  margin: 12px 0 22px; padding: 24px 34px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  border: 1px solid #efe5d8; border-radius: 18px; background: linear-gradient(90deg, #fff, #f7efe5);
}
.stats-band strong { display: block; color: var(--green); font: 900 27px "Montserrat"; }
.stats-band span { color: #51615a; font-weight: 700; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.pricing-grid article { position: relative; display: grid; gap: 12px; }
.pricing-grid article.featured { border-color: var(--green); box-shadow: 0 16px 38px rgba(23,79,61,.12); }
.pricing-grid article.featured > span { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 5px 16px; border-radius: 999px; color: #fff; background: var(--green); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.pricing-grid strong { font: 900 30px "Montserrat"; color: var(--ink); }
.pricing-grid small { color: var(--muted); font-size: 14px; }
.pricing-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: #33473e; }
.pricing-grid li::before { content: "✓"; color: var(--green); font-weight: 900; margin-right: 8px; }
.pricing-details-action { margin: 22px 0 0; display: grid; justify-items: center; gap: 6px; text-align: center; }
.pricing-details-link { display: inline-flex; align-items: center; gap: 7px; padding: 4px 2px; border-bottom: 1px solid currentColor; color: var(--green); font-size: 14px; font-weight: 800; text-decoration: none; }
.pricing-details-link:hover, .pricing-details-link:focus-visible { color: var(--ink); }
.pricing-details-link:focus-visible { border-radius: 4px; outline: 2px solid rgba(23,79,61,.3); outline-offset: 4px; }
.faq-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: start; }
.faq-section h2 { text-align: left; }
.faq-section details { border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 10px; padding: 15px 18px; }
.faq-section summary { cursor: pointer; font-weight: 900; }
.faq-section p { color: #526258; }
.testimonials-column { display: grid; gap: 12px; }
.testimonials-column h2 { margin-bottom: 8px; }
.testimonial-card { display: grid; gap: 8px; }
.testimonial-card p { font: 700 16px/1.42 "Montserrat"; margin: 0; color: #304139; }
.testimonial-card strong, .testimonial-card span { display: block; }
.testimonial-card span { color: var(--muted); }
.marketing-cta {
  margin: 16px 0 34px; padding: 28px 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-radius: 18px; background: linear-gradient(90deg, #e8f3ec, #fff2df); border: 1px solid #dbeadd;
}
.marketing-cta h2 { margin: 0 0 6px; font: 900 27px "Montserrat"; }
.marketing-cta p { margin: 0; color: #526258; }
.marketing-footer {
  max-width: 1500px; margin: 0 auto; padding: 26px 34px 34px; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px;
  border-top: 1px solid var(--line); color: #53645b;
}
.marketing-footer a, .marketing-footer span { display: block; margin-top: 8px; color: #53645b; text-decoration: none; }
.marketing-footer-button { display: block; margin-top: 8px; padding: 0; border: 0; color: #53645b; background: transparent; font: inherit; text-align: left; }
.marketing-footer-button:hover, .marketing-footer-button:focus-visible { color: var(--green); text-decoration: underline; }
.marketing-footer .brand { display: inline-flex; margin-top: 0; color: var(--ink); }
.marketing-footer .marketing-whatsapp { display: inline-flex; align-items: center; justify-content: flex-start; width: 24px; height: 20px; margin-top: 9px; border-radius: 5px; }
.marketing-footer .marketing-whatsapp:hover { background: transparent; opacity: .82; }
.marketing-footer .marketing-whatsapp .whatsapp-icon { width: 16px; height: 16px; }
.marketing-footer .marketing-phone { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; }
.marketing-footer .marketing-phone > span { display: inline; margin-top: 0; }
.marketing-footer .marketing-phone .marketing-whatsapp { margin-top: 0; }
.marketing-whatsapp-float { position: fixed; z-index: 40; right: 24px; bottom: 24px; display: inline-flex; align-items: center; justify-content: center; width: 145px; min-height: 54px; padding: 7px 12px 7px 52px; border: 2px solid #2bd24f; border-radius: 32px; color: #467244; background: #fbfaf6; box-shadow: 0 8px 22px rgba(20, 40, 30, .14); font-family: "Montserrat"; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.marketing-whatsapp-mark { position: absolute; left: 7px; top: 50%; display: grid; width: 38px; height: 38px; place-items: center; transform: translateY(-50%); }
.marketing-whatsapp-mark img { width: 30px; height: 30px; object-fit: contain; }
.marketing-whatsapp-copy { display: grid; gap: 1px; line-height: 1.08; }
.marketing-whatsapp-copy strong, .marketing-whatsapp-copy > span { display: block; margin: 0; }
.marketing-whatsapp-copy strong { font-size: 13px; font-weight: 900; }
.marketing-whatsapp-copy > span { font-size: 11px; font-weight: 700; }
.marketing-whatsapp-float:hover { color: #467244; background: #fbfaf6; box-shadow: 0 13px 32px rgba(20, 40, 30, .24); transform: translateY(-2px); }
.cookie-consent-banner {
  position: fixed; z-index: 110; left: 50%; bottom: 24px; width: min(820px, calc(100vw - 48px));
  display: flex; align-items: center; gap: 24px; overflow: hidden; padding: 16px 18px 16px 22px;
  border: 1px solid rgba(15, 179, 158, .38); border-radius: 18px; color: #fff;
  background: linear-gradient(125deg, #071f36 0%, var(--brand-dark) 62%, #075b63 100%);
  box-shadow: 0 22px 62px rgba(7, 31, 54, .32), 0 8px 22px rgba(13, 122, 110, .16);
  transform: translateX(-50%); backdrop-filter: blur(16px);
}
.cookie-consent-banner::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px;}
.cookie-consent-banner::after { content: ""; position: absolute; top: -80px; right: 120px; width: 180px; height: 180px; border-radius: 50%; background: rgba(15, 179, 158, .12); filter: blur(8px); pointer-events: none; }
.cookie-consent-copy { position: relative; z-index: 1; min-width: 0; flex: 1; }
.cookie-consent-copy h2 { margin: 0 0 4px; color: #fff; font: 700 14px/1.25 "Montserrat"; letter-spacing: -.01em; }
.cookie-consent-copy p { margin: 0; color: #c7dbe5; font-size: 12px; line-height: 1.45; white-space: nowrap; }
.cookie-consent-copy a { color: var(--brand-accent); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cookie-consent-copy a:hover { color: #fff; }
.cookie-consent-actions { position: relative; z-index: 1; display: flex; flex: 0 0 auto; gap: 10px; }
.cookie-consent-button { min-width: 92px; min-height: 40px; padding: 9px 15px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.cookie-consent-button:focus-visible { outline: 3px solid rgba(110, 193, 228, .45); outline-offset: 3px; }
.cookie-consent-accept { color: #071f36; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); box-shadow: 0 8px 20px rgba(15, 179, 158, .22); }
.cookie-consent-reject { color: #fff; border-color: rgba(199, 219, 229, .5); background: rgba(255, 255, 255, .04); }
.cookie-consent-accept:hover { box-shadow: 0 11px 26px rgba(15, 179, 158, .34); transform: translateY(-1px); }
.cookie-consent-reject:hover { border-color: var(--brand-primary); background: rgba(15, 179, 158, .1); transform: translateY(-1px); }
.policy-page { min-height: 100vh; overflow-x: hidden; color: var(--ink); background: radial-gradient(circle at 82% 4%, rgba(244,201,169,.28), transparent 28%), #fbfaf6; }
.policy-header { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 max(24px, calc((100vw - 980px) / 2)); border-bottom: 1px solid var(--line); background: rgba(251,250,246,.94); }
.policy-header .brand-logo { width: 150px; }
.policy-back { color: var(--green); font-weight: 800; text-decoration: none; }
.policy-main { width: min(920px, calc(100% - 40px)); margin: 0 auto; padding: 58px 0 72px; }
.policy-hero { margin-bottom: 28px; }
.policy-kicker { color: var(--green-2); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.policy-hero h1 { margin: 8px 0 12px; color: var(--green); font: 800 clamp(34px, 6vw, 54px)/1.05 "Montserrat"; letter-spacing: -.035em; }
.policy-hero p { max-width: 720px; margin: 0; color: #526258; font-size: 16px; }
.policy-updated { display: inline-block; margin-top: 16px; color: var(--muted); font-size: 12px; font-weight: 700; }
.policy-content { display: grid; gap: 14px; }
.policy-section { padding: 26px 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.policy-section h2 { margin: 0 0 12px; color: var(--green); font: 800 20px "Montserrat"; }
.policy-section h3 { margin: 20px 0 7px; font: 800 15px "Montserrat"; }
.policy-section p { margin: 0 0 10px; color: #46584f; line-height: 1.65; }
.policy-section p:last-child { margin-bottom: 0; }
.policy-section ul { margin: 8px 0 0; padding-left: 20px; color: #46584f; }
.policy-section li { margin: 7px 0; line-height: 1.55; }
.policy-table-wrap { overflow-x: auto; }
.policy-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; }
.policy-table th, .policy-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.policy-table th { color: var(--green); background: #f3f7f4; }
.policy-contact { border-color: #cfe0d5; background: #edf5ef; }
.policy-contact a { color: var(--green); font-weight: 800; }
.policy-footer { padding: 24px 20px; color: #67766e; border-top: 1px solid var(--line); text-align: center; font-size: 12px; }
.plans-page { min-height: 100vh; overflow-x: hidden; color: var(--ink); background: radial-gradient(circle at 84% 5%, rgba(244,201,169,.25), transparent 26%), #fbfaf6; }
.plans-header { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
.plans-main { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 64px 0 80px; }
.plans-hero { max-width: 830px; margin: 0 auto 42px; text-align: center; }
.plans-hero h1 { margin: 9px 0 14px; color: var(--green); font: 800 clamp(36px, 5.2vw, 58px)/1.04 "Montserrat"; letter-spacing: -.04em; }
.plans-hero > p { max-width: 760px; margin: 0 auto; color: #526258; font-size: 17px; line-height: 1.6; }
.plans-hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 20px; }
.plans-hero-badges span { padding: 7px 11px; border: 1px solid #cfe0d5; border-radius: 999px; color: var(--green); background: #f4faf6; font-size: 12px; font-weight: 800; }
.plans-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plans-detail-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 8px 30px rgba(29,55,43,.04); }
.plans-detail-card.featured { border: 1.5px solid var(--green); background: linear-gradient(180deg, #f4faf6, #fff 42%); box-shadow: 0 18px 42px rgba(23,79,61,.11); }
.plans-popular { position: absolute; top: -14px; left: 50%; padding: 7px 15px; border-radius: 999px; color: #fff; background: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; transform: translateX(-50%); white-space: nowrap; }
.plans-audience { color: var(--green-2); font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.plans-detail-card h2 { margin: 7px 0 8px; font: 800 23px "Montserrat"; }
.plans-detail-card p { min-height: 66px; margin: 0; color: var(--muted); line-height: 1.5; }
.plans-price { display: block; margin: 18px 0 14px; color: var(--green); font: 800 31px "Montserrat"; }
.plans-price small { margin-left: 3px; color: var(--muted); font: 700 12px "Montserrat"; }
.plans-detail-card ul { display: grid; gap: 11px; margin: 0 0 24px; padding: 0; list-style: none; }
.plans-detail-card li { position: relative; padding-left: 20px; color: #405149; line-height: 1.45; }
.plans-detail-card li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-2); font-weight: 900; }
.plans-detail-card .button { width: 100%; margin-top: auto; text-align: center; text-decoration: none; }
.plans-comparison-section { margin-top: 70px; }
.plans-comparison-section > header { max-width: 760px; margin-bottom: 22px; }
.plans-comparison-section h2, .plans-multiunit h2, .plans-faq h2, .plans-cta h2 { margin: 7px 0 9px; color: var(--green); font: 800 clamp(27px, 4vw, 38px)/1.15 "Montserrat"; letter-spacing: -.025em; }
.plans-comparison-section header p, .plans-multiunit p, .plans-cta p { margin: 0; color: var(--muted); line-height: 1.6; }
.plans-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.plans-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.plans-table th, .plans-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.plans-table th { color: #fff; background: var(--green); font: 800 12px "Montserrat"; }
.plans-table th:first-child, .plans-table td:first-child { width: 42%; text-align: left; }
.plans-table tbody tr:nth-child(even) { background: #f6f8f6; }
.plans-table tbody tr:last-child td { border-bottom: 0; }
.plans-table td strong { color: var(--green); }
.plans-multiunit { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(350px, .75fr); gap: 42px; align-items: center; margin-top: 30px; padding: 38px; border: 1px solid #bfd8c8; border-radius: 20px; background: linear-gradient(135deg, #eaf4ed, #f8fbf9); }
.plans-multiunit ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plans-multiunit li { padding: 13px 15px; border: 1px solid rgba(23,79,61,.12); border-radius: 12px; background: rgba(255,255,255,.72); }
.plans-multiunit li strong, .plans-multiunit li span { display: block; }
.plans-multiunit li strong { color: var(--green); font: 800 14px "Montserrat"; }
.plans-multiunit li span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.plans-faq { display: grid; grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr); gap: 44px; margin-top: 70px; }
.plans-faq details { padding: 17px 0; border-bottom: 1px solid var(--line); }
.plans-faq details:first-child { padding-top: 0; }
.plans-faq summary { color: var(--ink); font: 800 15px "Montserrat"; cursor: pointer; }
.plans-faq details p { margin: 9px 0 0; color: var(--muted); line-height: 1.6; }
.plans-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 64px; padding: 34px 38px; border-radius: 20px; color: #fff; background: var(--green); }
.plans-cta .policy-kicker, .plans-cta h2, .plans-cta p { color: #fff; }
.plans-cta .button { flex: 0 0 auto; color: var(--green); background: #fff; text-decoration: none; }
.plans-footer { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px; }
.plans-footer a, .plans-footer button { padding: 0; border: 0; color: var(--green); background: transparent; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.service-combo-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.service-combo-field legend { margin-bottom: 9px; color: #4f5d57; font-size: 13px; font-weight: 700; }
.service-combo-empty { padding: 13px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); background: #fafcfb; font-size: 12px; text-align: center; }
.service-combo-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 210px; overflow-y: auto; padding: 2px; scrollbar-gutter: stable; }
.service-combo-option { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.service-combo-option:has(input:checked) { border-color: var(--green); background: var(--mint); box-shadow: 0 0 0 1px rgba(23, 79, 61, .08); }
.service-combo-option input[type="checkbox"],
.service-combo-option input[type="radio"] { flex: 0 0 17px; width: 17px; height: 17px; margin: 0; padding: 0; accent-color: var(--green); }
.service-combo-option input[data-package-quantity] { flex: 0 0 92px; width: 92px; min-width: 92px; height: 40px; margin-left: auto; padding: 0 10px; }
.service-combo-option span { min-width: 0; }
.service-combo-option strong, .service-combo-option small { display: block; overflow-wrap: anywhere; }
.service-combo-option strong { color: var(--ink); font-size: 13px; }
.service-combo-option small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.service-combo-summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; padding: 10px 12px; border-radius: 9px; background: #f3f6f2; color: var(--muted); font-size: 12px; }
.service-combo-summary strong { color: var(--green); }
.package-benefit-choice { display: grid; gap: 10px; margin: 2px 0; padding: 13px; border: 1px solid #b9dec9; border-radius: 12px; background: #f2faf5; color: var(--ink); }
.package-benefit-heading { display: flex; align-items: center; gap: 9px; }
.package-benefit-heading .metric-icon { width: 34px; height: 34px; border-radius: 9px; background: #dff1e6; color: var(--green); }
.package-benefit-heading strong, .package-benefit-heading small { display: block; }
.package-benefit-heading strong { color: var(--green); font-size: 13px; }
.package-benefit-heading small, .package-benefit-choice p { color: var(--muted); font-size: 12px; }
.package-benefit-choice p { margin: 0; }
.package-benefit-options { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.package-benefit-options label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); font-size: 12px; font-weight: 700; }
.package-benefit-options input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }
.service-assignment-step { margin-top: 10px; padding: 13px; border: 1px solid rgba(23, 79, 61, .12); border-radius: 12px; background: #fbfcf8; }
.service-assignment-step > strong { display: block; color: var(--green); font-size: 13px; }
.service-assignment-step > small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.service-assignment-list { display: grid; gap: 9px; margin-top: 12px; }
.service-assignment-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(180px, .9fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .18s ease, background .18s ease, opacity .18s ease; }
.service-assignment-row span { min-width: 0; }
.service-assignment-row strong, .service-assignment-row small { display: block; overflow-wrap: anywhere; }
.service-assignment-row small { color: var(--muted); font-size: 11px; }
.service-assignment-row select { min-height: 42px; padding: 9px 10px; }
.drag-handle { display: grid; width: 30px; height: 42px; place-items: center; padding: 0; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: grab; touch-action: none; }
.drag-handle:active { cursor: grabbing; }
.drag-handle .ui-icon { width: 17px; height: 17px; }
.service-order-controls { display: grid; grid-template-columns: repeat(2, 30px); gap: 3px; }
.service-order-controls .icon-button { width: 30px; height: 30px; min-height: 30px; padding: 0; }
.service-order-controls .icon-button:disabled { cursor: not-allowed; opacity: .35; }
.service-assignment-row.is-dragging { opacity: .45; }
.service-assignment-row.is-drag-target { border-color: var(--green); background: #f0f8f3; }
.span-2 { grid-column: span 2; }
.clinic-module-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 82px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfa;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.clinic-module-toggle:hover { border-color: #a9c7b6; background: #f7fbf8; }
.clinic-module-toggle:has(.clinic-module-checkbox:checked) {
  border-color: #8ebba3;
  background: #f1f8f3;
  box-shadow: inset 3px 0 0 var(--green);
}
.clinic-module-toggle-copy { min-width: 0; }
.clinic-module-toggle-copy strong,
.clinic-module-toggle-copy small { display: block; }
.clinic-module-toggle-copy strong { color: var(--ink); font: 800 14px "Montserrat"; }
.clinic-module-toggle-copy small { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; }
.clinic-module-checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.clinic-module-switch {
  position: relative;
  width: 46px;
  height: 26px;
  flex: 0 0 46px;
  border: 1px solid #cbd4ce;
  border-radius: 999px;
  background: #dfe5e1;
  transition: .2s;
}
.clinic-module-switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(26, 55, 42, .22);
  content: "";
  transition: transform .2s;
}
.clinic-module-checkbox:checked + .clinic-module-switch { border-color: var(--green); background: var(--green); }
.clinic-module-checkbox:checked + .clinic-module-switch::after { transform: translateX(20px); }
.clinic-module-checkbox:focus-visible + .clinic-module-switch { box-shadow: 0 0 0 3px rgba(38, 112, 90, .18); }
@media (max-width: 520px) {
  .clinic-module-toggle { min-height: 76px; gap: 14px; padding: 14px; }
}

/* Primeiro acesso: somente as configurações estruturais da empresa. */
.first-access-badge { display:block; width:max-content; margin-top:5px; padding:2px 8px; border-radius:999px; background:#f8d8ec; color:#ae2462; font-size:10px; font-weight:800; white-space:nowrap; }
.first-access-banner { display:flex; align-items:center; gap:20px; margin-bottom:24px; padding:20px 26px; border:1px solid #d8ebe7; border-radius:14px; background:linear-gradient(100deg,#eefaf8,#f8fffe); }
.first-access-banner > i { display:grid; place-items:center; flex:0 0 66px; width:66px; height:66px; border-radius:50%; color:#087f77; background:#d7f3ef; }
.first-access-banner svg { width:35px; height:35px; }.first-access-banner h2 { margin:0 0 4px; color:var(--brand-dark); font-size:22px; }.first-access-banner p { margin:0; color:#406677; }
.first-access-heading h1 { margin:0; color:var(--brand-dark); font-size:30px; }.first-access-heading h1 span { display:inline-block; padding:5px 13px; border-radius:999px; color:#ae2462; background:#f9e1ee; font-size:13px; vertical-align:middle; }.first-access-heading p { margin:6px 0 18px; color:#6d8292; }
.first-access-layout { display:grid; grid-template-columns:minmax(220px, .8fr) minmax(0, 1.8fr); gap:20px; align-items:start; }.first-access-steps,.first-access-card { border:1px solid rgba(11,45,77,.09); border-radius:14px; background:#fff; box-shadow:0 8px 28px rgba(11,45,77,.055); }.first-access-steps { padding:18px; }.first-access-step { display:flex; width:100%; gap:13px; padding:13px 8px; border:0; border-radius:10px; color:#5e7487; text-align:left; background:transparent; cursor:pointer; }.first-access-step:hover,.first-access-step.active { color:var(--brand-dark); background:#eaf8f6; }.first-access-step b { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:50%; color:#415d70; background:#edf2f5; }.first-access-step.active b,.first-access-step.done b { color:#fff; background:#0b9c93; }.first-access-step b svg { width:16px; }.first-access-step strong,.first-access-step small { display:block; }.first-access-step strong { font-size:14px; }.first-access-step small { margin-top:3px; font-size:12px; line-height:1.35; }.first-access-tip { display:flex; gap:10px; margin-top:35px; padding:15px; border-radius:10px; background:#eef9f7; color:#416778; }.first-access-tip i { color:#738600; }.first-access-tip strong,.first-access-tip p { display:block; margin:0; }.first-access-tip p { margin-top:4px; font-size:12px; line-height:1.45; }
.first-access-card > header { display:flex; justify-content:space-between; gap:18px; padding:25px 26px 18px; border-bottom:1px solid #edf1f3; }.first-access-card h2 { margin:0; color:var(--brand-dark); font-size:23px; }.first-access-card header p { margin:5px 0 0; color:#637a8d; }.first-access-card header > span { min-width:138px; color:#718395; font-size:12px; }.first-access-card header > span i { display:block; height:7px; margin-top:8px; border-radius:99px; background:linear-gradient(90deg,#09a79b var(--first-access-progress),#e7edf1 var(--first-access-progress)); }.first-access-card > .form-stack,.first-access-card > .first-access-profiles { padding:23px 26px; }.first-access-card > footer { display:grid; grid-template-columns:1fr auto; gap:4px 18px; align-items:center; padding:17px 26px; border-top:1px solid #edf1f3; }.first-access-card > footer small { grid-column:1; color:#77899a; }.first-access-card > footer .button { grid-column:2; grid-row:1 / span 2; }
.first-access-logo { display:flex; align-items:center; gap:13px; padding:15px; border:1px dashed #bdd0dc; border-radius:10px; background:#fbfdfe; }.first-access-logo label { color:var(--brand-dark); font-weight:700; }.first-access-logo label small { color:#718395; font-weight:400; }.first-access-logo input { display:block; max-width:220px; margin-top:6px; font-size:12px; }.first-access-logo > span { color:#708597; font-size:12px; }.first-access-fieldset { margin:4px 0 0; padding:15px 0 0; border:0; border-top:1px solid #e8eef1; }.first-access-fieldset legend { padding-right:8px; color:var(--brand-dark); font-size:13px; font-weight:800; text-transform:uppercase; }.first-access-fieldset legend small { color:#6e8394; font-weight:400; text-transform:none; }.align-end { align-self:end; }.first-access-days { display:flex; flex-wrap:wrap; gap:8px; }.first-access-days label,.first-access-24h { display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid #dce7eb; border-radius:9px; color:#456174; background:#fff; }.first-access-24h { width:max-content; color:var(--brand-dark); font-weight:600; }.profile-suggestions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.profile-suggestions article { display:flex; align-items:flex-start; gap:10px; padding:14px; border:1px solid #e0eaee; border-radius:10px; }.profile-suggestions article > i { color:#078f86; }.profile-suggestions strong,.profile-suggestions p { display:block; }.profile-suggestions p { margin:3px 0 0; color:#687e8d; font-size:12px; line-height:1.4; }.profile-suggestions article small { margin-left:auto; padding:3px 7px; border-radius:999px; color:#087e75; background:#e6f7f4; font-size:10px; }.first-access-custom-profile { display:grid; grid-template-columns:1fr 1.5fr auto; gap:10px; align-items:end; margin-top:18px; padding-top:18px; border-top:1px solid #e8eef1; }
@media (max-width: 900px) { .first-access-layout { grid-template-columns:1fr; }.first-access-steps { display:grid; grid-template-columns:repeat(2,1fr); }.first-access-tip { display:none; } }
@media (max-width: 620px) { .first-access-banner { align-items:flex-start; padding:16px; }.first-access-banner > i { flex-basis:45px; width:45px; height:45px; }.first-access-banner h2 { font-size:18px; }.first-access-card > header { display:block; }.first-access-card header > span { display:block; margin-top:12px; }.first-access-card > footer { grid-template-columns:1fr; }.first-access-card > footer .button { grid-column:1; grid-row:auto; }.first-access-card > footer small { grid-column:1; }.first-access-steps { grid-template-columns:1fr; }.profile-suggestions,.first-access-custom-profile { grid-template-columns:1fr; } }

.first-access-section + .first-access-section { margin-top:22px; padding-top:18px; border-top:1px solid #e8eef1; }
.first-access-section h3 { margin:0 0 14px; color:var(--brand-dark); font-size:16px; }
.first-access-address-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(190px,.8fr); gap:16px; align-items:stretch; }
.first-access-address-fields { align-content:start; }
.input-with-action { display:flex; overflow:hidden; border:1px solid #d7e1e6; border-radius:8px; background:#fff; }
.input-with-action input { min-width:0; border:0; border-radius:0; }
.input-with-action button { display:grid; place-items:center; width:42px; border:0; color:var(--brand-dark); background:#edf4f6; cursor:pointer; }
.input-with-action button svg { width:18px; }
.first-access-map { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:214px; padding:18px; border-radius:12px; color:#6a7f8e; text-align:center; background:linear-gradient(135deg,#f6fbfa,#edf4ef); }
.first-access-map > i { display:grid; place-items:center; width:42px; height:42px; margin-bottom:10px; border-radius:50%; color:#0a978c; background:#d9f2ec; }
.first-access-map > i svg { width:23px; }.first-access-map strong { color:var(--brand-dark); }.first-access-map p { margin:8px 0; font-size:12px; line-height:1.45; }.first-access-map a { color:#087f76; font-size:12px; font-weight:700; }
.first-access-map.located { background:linear-gradient(135deg,#e4f5f0,#eff9f6); }
.first-access-footer-navigation { display:flex; align-items:center; gap:24px; }.first-access-footer-navigation > div small { display:block; margin-top:3px; color:#77899a; }.first-access-card > footer { display:flex; justify-content:space-between; }.first-access-card > footer .button { margin-left:auto; }
@media (max-width: 700px) { .first-access-address-layout { grid-template-columns:1fr; }.first-access-map { min-height:150px; }.first-access-card > footer,.first-access-footer-navigation { align-items:stretch; flex-direction:column; gap:10px; }.first-access-card > footer .button { margin-left:0; } }

.first-access-profile-info { display:flex; gap:13px; margin-bottom:20px; padding:16px; border-radius:10px; color:#446778; background:#eef9f7; }
.first-access-profile-info > i { color:#748900; }.first-access-profile-info strong { color:var(--brand-dark); }.first-access-profile-info p { margin:4px 0 0; font-size:13px; line-height:1.45; }.first-access-profile-section + .first-access-profile-section { margin-top:20px; padding-top:18px; border-top:1px solid #e8eef1; }.first-access-profile-section h3 { margin:0; color:var(--brand-dark); font-size:16px; }.first-access-profile-section > p { margin:5px 0 13px; color:#708394; font-size:13px; }
.first-access-profile-cards { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:10px; }.first-access-profile-card { position:relative; display:flex; min-height:162px; padding:14px; border:1px solid #dfe8ed; border-radius:10px; cursor:pointer; text-align:center; align-items:center; flex-direction:column; background:#fff; }.first-access-profile-card:has(input:checked) { border-color:#89cfc7; background:#f5fcfb; }.first-access-profile-card input { position:absolute; top:11px; left:11px; width:16px; height:16px; accent-color:#079d93; }.first-access-profile-check { display:none; }.first-access-profile-card > i { display:grid; place-items:center; width:42px; height:42px; margin:7px 0 9px; border-radius:50%; color:#087f76; background:#e4f6f3; }.first-access-profile-card > i svg { width:22px; }.first-access-profile-card strong { color:var(--brand-dark); font-size:13px; }.first-access-profile-card small { margin-top:6px; color:#708394; font-size:11px; line-height:1.35; }.first-access-profile-card.required { cursor:default; }.first-access-other-profiles { margin-top:20px; }.first-access-create-profile { display:flex; width:100%; align-items:center; gap:14px; padding:16px; border:1px solid #dce6eb; border-radius:10px; color:var(--brand-dark); text-align:left; background:#fbfdfe; cursor:pointer; }.first-access-create-profile:hover { border-color:#8fcfc8; background:#f4fbfa; }.first-access-create-profile > i { display:grid; place-items:center; flex:0 0 36px; height:36px; border-radius:50%; color:#087f76; background:#e4f4f2; }.first-access-create-profile strong,.first-access-create-profile small { display:block; }.first-access-create-profile small { margin-top:3px; color:#6e8292; }.first-access-custom-list { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px; }.first-access-custom-list span { padding:5px 9px; border-radius:999px; color:#087f76; background:#e8f7f4; font-size:12px; font-weight:700; }
.first-access-profile-card > button { display:flex; width:100%; min-height:130px; align-items:center; flex-direction:column; border:0; color:inherit; background:transparent; cursor:pointer; }.first-access-profile-card > button > i { display:grid; place-items:center; width:42px; height:42px; margin:7px 0 9px; border-radius:50%; color:#087f76; background:#e4f6f3; }.first-access-profile-card > button > i svg { width:22px; }.first-access-profile-card > button em { margin-top:8px; color:#078b81; font-size:11px; font-style:normal; font-weight:700; }.first-access-profile-card > button:focus-visible { outline:2px solid #078f85; outline-offset:3px; border-radius:8px; }
.modal-card:has(.first-access-profile-modal) { width:min(980px, calc(100vw - 40px)); max-height:calc(100vh - 28px); padding:0; overflow:auto; }.first-access-profile-modal > header { display:flex; gap:16px; padding:28px 32px 22px; border-bottom:1px solid #e7edf1; }.first-access-profile-modal > header > i { display:grid; place-items:center; flex:0 0 72px; height:72px; border-radius:12px; color:#087fbc; background:#edf7ff; }.first-access-profile-modal > header > i svg { width:34px; height:34px; }.first-access-profile-modal h2,.first-access-profile-modal h3 { color:var(--brand-dark); }.first-access-profile-modal h2 { margin:0; }.first-access-profile-modal header p,.first-access-profile-modal header small,.first-access-profile-modal main > p { display:block; margin:5px 0 0; color:#667b8e; }.first-access-profile-modal-body { display:grid; grid-template-columns:190px minmax(0,1fr); }.first-access-profile-modal-body > aside { padding:22px; border-right:1px solid #e7edf1; color:#0a756d; background:#f6fbfb; }.first-access-profile-modal-body > aside > p { margin:10px 0; color:#667b8e; font-size:12px; line-height:1.45; }.first-access-modal-tip { margin-top:28px; padding:12px; border-radius:8px; color:#4a6978; background:#eaf6f3; font-size:12px; line-height:1.45; }.first-access-modal-tip i { display:block; margin-bottom:7px; color:#7a8d00; }.first-access-profile-modal-body > main { min-width:0; padding:22px; }.first-access-profile-modal-body h3 { margin:0; font-size:17px; }.first-access-permission-scroll { margin-top:16px; overflow-x:auto; border:1px solid #e2eaee; border-radius:9px; }.first-access-permission-matrix { width:100%; min-width:620px; border-collapse:collapse; font-size:12px; }.first-access-permission-matrix th { padding:11px 9px; color:#183352; text-align:left; background:#f3f8fb; }.first-access-permission-matrix td { padding:10px 9px; color:#65788a; border-top:1px solid #e8eef1; }.first-access-permission-matrix td:nth-child(n+3),.first-access-permission-matrix th:nth-child(n+3) { width:54px; text-align:center; }.first-access-permission-matrix input { width:18px; height:18px; accent-color:#078f85; }.first-access-permission-matrix input:disabled { opacity:1; }.first-access-profile-modal > footer { display:flex; justify-content:flex-end; gap:10px; padding:18px 22px; border-top:1px solid #e7edf1; }
.profile-recepcao > header > i { color:#b20872; background:#fff0fa; }.profile-veterinario > header > i { color:#4f8f2c; background:#eff9e9; }.first-access-profile-modal-body > aside > button { display:flex; width:100%; align-items:center; gap:9px; padding:10px; border:0; border-radius:7px; color:#60788d; background:transparent; font-weight:700; text-align:left; cursor:pointer; }.first-access-profile-modal-body > aside > button.active { color:#08796f; background:#def4f1; }.first-access-profile-modal-body > aside > button svg { width:18px; }.first-access-permission-groups { display:grid; gap:10px; margin-top:16px; }.first-access-permission-groups > section { overflow:hidden; border:1px solid #e2eaee; border-radius:9px; }.first-access-permission-groups > section > header { display:block; padding:10px 13px; border-bottom:1px solid #e7edf1; background:#f5f9fb; }.first-access-permission-groups > section > header strong,.first-access-permission-groups > section > header small { display:block; }.first-access-permission-groups > section > header small { margin-top:2px; color:#748596; font-size:11px; }.first-access-permission-groups > section > div { display:flex; flex-wrap:wrap; gap:8px; padding:11px 13px; }.first-access-permission-groups label { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:6px; color:#4c6579; background:#f8fbfc; font-size:12px; }.first-access-permission-groups input { width:16px; height:16px; accent-color:#078f85; }.first-access-permission-groups input:disabled { opacity:1; }.first-access-profile-summary { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:17px; }.first-access-profile-summary section { padding:14px; border-radius:9px; background:#f5fbfa; }.first-access-profile-summary section + section { background:#fff7f8; }.first-access-profile-summary h3 { margin:0 0 8px; font-size:15px; }.first-access-profile-summary ul { margin:0; padding:0; list-style:none; }.first-access-profile-summary li { margin:6px 0; color:#557084; font-size:12px; line-height:1.35; }.first-access-profile-summary p { color:#6d8190; font-size:12px; }
.modal-card:has(.custom-profile-wizard) { width:min(940px, calc(100vw - 40px)); max-height:calc(100vh - 28px); padding:0; overflow:auto; }.custom-profile-wizard > header { display:flex; gap:16px; padding:25px 30px; border-bottom:1px solid #e7edf1; }.custom-profile-wizard > header > i { display:grid; place-items:center; width:70px; height:70px; border-radius:12px; color:#087f76; background:#e8f7f4; }.custom-profile-wizard h2,.custom-profile-wizard h3 { margin:0; color:var(--brand-dark); }.custom-profile-wizard header p,.custom-profile-wizard header small { display:block; margin:5px 0 0; color:#667b8e; }.custom-profile-stepper { display:flex; justify-content:center; gap:28px; padding:16px; border-bottom:1px solid #e7edf1; }.custom-profile-stepper span { display:flex; align-items:center; gap:7px; color:#7b8d9e; font-size:12px; }.custom-profile-stepper b { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:#edf1f4; }.custom-profile-stepper .active,.custom-profile-stepper .done { color:#087d74; font-weight:700; }.custom-profile-stepper .active b,.custom-profile-stepper .done b { color:#fff; background:#078f85; }.custom-profile-content { min-height:390px; padding:24px 30px; }.custom-profile-data { grid-template-columns:1fr 1fr; }.custom-profile-base { margin-top:24px; }.custom-profile-base > p { margin:5px 0 12px; color:#708395; font-size:13px; }.custom-profile-base > div { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }.custom-profile-base button { min-height:96px; padding:10px; border:1px solid #e1e9ed; border-radius:9px; color:#345069; background:#fff; text-align:left; cursor:pointer; }.custom-profile-base button.active { border-color:#078f85; background:#f2fcfa; }.custom-profile-base i,.custom-profile-base strong,.custom-profile-base small { display:block; }.custom-profile-base i { margin-bottom:7px; color:#087f76; }.custom-profile-base small { margin-top:4px; color:#758799; font-size:11px; }.custom-profile-permissions { display:grid; grid-template-columns:200px minmax(0,1fr); gap:18px; }.custom-profile-permissions > aside { padding-right:14px; border-right:1px solid #e7edf1; }.custom-profile-search { display:flex; align-items:center; gap:6px; padding:0 8px; border:1px solid #e0e8ed; border-radius:7px; }.custom-profile-search input { width:100%; border:0; }.custom-profile-permissions aside > button { display:flex; width:100%; align-items:center; gap:8px; margin-top:6px; padding:9px; border:0; border-radius:7px; color:#35516a; background:transparent; text-align:left; cursor:pointer; }.custom-profile-permissions aside > button.active { color:#087d74; background:#e6f7f4; }.custom-profile-permissions main > header { display:flex; justify-content:space-between; gap:12px; }.custom-profile-permissions main > header p { margin:4px 0 15px; color:#718496; font-size:13px; }.custom-profile-permissions main > section { margin-top:10px; padding:12px; border:1px solid #e4ebef; border-radius:8px; }.custom-profile-permissions main > section > div { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:8px; }.custom-profile-permissions label { display:flex; align-items:center; gap:7px; color:#536b7f; font-size:12px; }.custom-profile-permissions input { width:17px; height:17px; accent-color:#078f85; }.custom-profile-dependency { margin-top:12px; padding:11px; border-radius:8px; color:#486677; background:#eaf7fd; font-size:12px; }.custom-profile-dependency button { display:block; margin-top:7px; border:0; color:#087d74; background:transparent; font-weight:700; cursor:pointer; }.custom-profile-review > strong { display:inline-block; margin:14px 0; color:#087d74; }.custom-profile-review > section { margin-top:12px; padding:12px; border-radius:8px; background:#f5faf9; }.custom-profile-review h4 { margin:0; color:#183852; }.custom-profile-review ul { margin:7px 0 0; padding:0; list-style:none; color:#547084; font-size:12px; }.custom-profile-review li { margin:4px 0; }.custom-profile-wizard > footer { display:flex; justify-content:flex-end; gap:10px; padding:17px 24px; border-top:1px solid #e7edf1; }
@media (max-width: 900px) { .first-access-profile-cards { grid-template-columns:repeat(2,minmax(130px,1fr)); }.first-access-profile-modal-body { grid-template-columns:1fr; }.first-access-profile-modal-body > aside { border-right:0; border-bottom:1px solid #e7edf1; }.first-access-modal-tip { margin-top:12px; }.custom-profile-base > div { grid-template-columns:repeat(2,1fr); }.custom-profile-permissions { grid-template-columns:1fr; }.custom-profile-permissions > aside { border-right:0; border-bottom:1px solid #e7edf1; padding:0 0 12px; } }
@media (max-width: 500px) { .first-access-profile-cards { grid-template-columns:1fr; }.first-access-profile-card { min-height:120px; } }
.package-fields {
  margin-top: -2px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcf8;
}
.form-alert {
  margin-top: 14px; padding: 12px 14px; border: 1px solid #efcf9e; border-radius: 12px;
  color: #7a5a17; background: #fff8e8;
}
.form-alert strong { display: block; margin-bottom: 4px; color: #6d4c0e; }
.form-alert ul { margin: 0; padding-left: 18px; }
.form-alert.error { border-color: #efc5bf; color: #8f3d35; background: #fff1ef; }
.form-alert.error strong { color: #7b342d; }
.form-alert.error span, .form-alert.error small { display: block; }
.form-alert.error small { margin-top: 7px; color: #a35952; font-size: 10px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: 270px; padding: 28px 20px 20px;
  display: flex; flex-direction: column; background: #fbfbf8; border-right: 1px solid var(--line);
}
.sidebar-backdrop { display: none; }
.sidebar .brand { padding: 0 10px 28px; }
.workspace-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.workspace-card > div { min-width: 0; flex: 1; }
.workspace-card strong, .workspace-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-card small { color: var(--muted); font-size: 11px; }
.workspace-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; padding: 0; border: 0; border-radius: 10px; background: var(--peach); color: var(--green); font-weight: 800; cursor: pointer; }
.workspace-avatar img { width: 100%; height: 100%; object-fit: cover; }
.workspace-avatar:hover { outline: 2px solid #9cccbc; outline-offset: 2px; }
.organization-logo-preview { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); }
.organization-logo-preview img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: #fff; }
.icon-button { border: 0; width: 34px; height: 34px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: transparent; color: var(--muted); }
.icon-button .ui-icon { width: 17px; height: 17px; }
.icon-button:hover { background: var(--cream); }
.main-nav { display: grid; gap: 4px; margin-top: 22px; }
.nav-divider { height: 1px; margin: 7px 12px; background: var(--line); }
.nav-label { margin: 15px 12px 5px; color: #a0a9a3; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 700; }
.main-nav a, .sidebar-footer a, .sidebar-footer button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 0; border-radius: 10px; color: #657169; background: transparent; text-decoration: none; text-align: left;
}
.main-nav a i, .sidebar-footer i { width: 20px; display: grid; place-items: center; flex: 0 0 auto; font-style: normal; text-align: center; }
.main-nav a i .ui-icon, .sidebar-footer i .ui-icon { width: 17px; height: 17px; }
.main-nav a span, .sidebar-footer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { color: var(--green); background: #e8f0ea; font-weight: 700; }
.main-nav a b { min-width: 20px; margin-left: auto; padding: 1px 6px; border-radius: 10px; color: #fff; background: var(--green-2); font-size: 10px; text-align: center; }
.main-nav a b.badge-warn { color: #674b11; background: var(--yellow); }
.nav-group { display: grid; gap: 3px; }
.nav-group-trigger {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 0; border-radius: 10px; color: #657169; background: transparent; text-align: left;
}
.nav-group-trigger > i { width: 20px; display: grid; place-items: center; flex: 0 0 auto; font-style: normal; }
.nav-group-trigger > i .ui-icon { width: 17px; height: 17px; }
.nav-group-trigger > span { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-trigger > b { min-width: 20px; margin-left: 0; padding: 1px 6px; border-radius: 10px; color: #fff; background: var(--green-2); font-size: 10px; text-align: center; }
.nav-group-trigger > em { width: 16px; display: grid; place-items: center; color: var(--muted); transition: transform .2s ease; }
.nav-group-trigger > em .ui-icon { width: 14px; height: 14px; }
.nav-group.active > .nav-group-trigger { color: var(--green); font-weight: 700; }
.nav-group-trigger:hover { color: var(--green); background: #f0f4f0; }
.nav-submenu { display: grid; gap: 2px; padding: 0 0 3px 32px; }
.nav-submenu a { min-height: 34px; padding: 8px 12px; font-size: 12px; }
.nav-submenu a[data-open-appointment-form]:hover { color: #657169; background: transparent; font-weight: 400; }
.nav-submenu a::before { display: none; }
.nav-submenu a > i { width: 15px; display: grid; place-items: center; flex: 0 0 auto; }
.nav-submenu a > i .ui-icon { width: 14px; height: 14px; }
.nav-group.collapsed .nav-submenu { display: none; }
.nav-group.collapsed .nav-group-trigger > em { transform: rotate(-90deg); }
.sidebar-footer { margin-top: auto; display: grid; gap: 4px; }
.main-content { grid-column: 2; min-width: 0; background: var(--content-canvas); }
.topbar {
  position: sticky; top: 0; z-index: 20; height: 78px; padding: 0 34px;
  display: flex; align-items: center; justify-content: space-between; column-gap: 18px; border-bottom: 1px solid var(--line); background: rgba(244,243,236,.9); backdrop-filter: blur(14px);
}
.search-box { flex: 1 1 680px; max-width: calc(100% - 340px); display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.search-box > span { display: grid; place-items: center; color: var(--green); }
.search-box > span .ui-icon { width: 17px; height: 17px; }
.search-box input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.search-box kbd { color: #929b95; background: var(--cream); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; font-size: 10px; white-space: nowrap; }
.topbar-actions, .user-menu { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-actions { flex: 0 0 auto; }
.notification-button {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--green);
}
.notification-button .notification-icon { display: grid; place-items: center; line-height: 0; }
.notification-button .notification-icon .ui-icon { width: 20px; height: 20px; stroke-width: 2.25; }
.notification-button:hover { background: #edf3ee; }
.notification-button .notification-count { position: absolute; right: -7px; top: -7px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: var(--danger); font-size: 10px; font-weight: 800; }
.notification-popover { position: absolute; right: 182px; top: 64px; z-index: 60; width: min(360px, calc(100vw - 32px)); padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.notification-popover h3 { margin: 4px 6px 10px; font: 800 15px "Montserrat"; }
.notification-popover button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 0; border-radius: 12px; background: transparent; text-align: left; }
.notification-popover button:hover { background: #f5f7f2; }
.notification-popover i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #edf3ee; color: var(--green); font-style: normal; }
.notification-popover i .ui-icon { width: 18px; height: 18px; }
.notification-popover strong, .notification-popover small { display: block; }
.notification-popover small { color: var(--muted); }
.notification-popover b { min-width: 24px; padding: 3px 7px; border-radius: 999px; color: #fff; background: var(--green); font-size: 11px; text-align: center; }
.user-menu { position: relative; }
.user-menu-trigger {
  border: 0; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border-radius: 14px;
  background: transparent; color: inherit;
}
.user-menu-trigger:hover { background: rgba(255,255,255,.7); }
.user-menu-trigger > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: var(--green); font-weight: 800; }
.user-menu-trigger > div { min-width: 0; max-width: 220px; }
.user-menu-trigger strong, .user-menu-trigger small { display: block; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-trigger small { color: var(--muted); font-size: 11px; }
.user-menu-trigger i { display: grid; place-items: center; font-style: normal; color: var(--muted); }
.user-menu-trigger i .ui-icon { width: 18px; height: 18px; }
.user-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; min-width: 210px; padding: 8px;
  border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow);
}
.user-menu-dropdown button {
  width: 100%; border: 0; padding: 11px 12px; border-radius: 10px; background: transparent; text-align: left;
}
.user-menu-dropdown button:hover { background: #f5f7f2; }
.menu-toggle { width: 36px; height: 36px; display: none; place-items: center; border: 0; background: transparent; color: var(--green); }
.menu-toggle .ui-icon { width: 22px; height: 22px; }
.topbar-brand { display: none; align-items: center; flex: 0 0 auto; text-decoration: none; }
.page-root { padding: 34px; max-width: 1540px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.page-heading h1 { margin: 0; font: 800 28px "Montserrat"; letter-spacing: -.035em; }
.page-heading p { margin: 7px 0 0; color: var(--muted); }
.heading-actions { display: flex; gap: 10px; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.crm-period-filter { display: flex; align-items: end; gap: 8px; }
.crm-period-filter label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.crm-period-filter input { width: 142px; min-height: 38px; padding: 8px 10px; }
.crm-period-filter > span { padding-bottom: 10px; color: var(--muted); font-size: 12px; }
.crm-period-end-label { display: none; }
.crm-period-filter .button { min-height: 38px; padding: 8px 12px; }
.crm-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.crm-metrics .metric-card { min-height: 154px; }
.crm-metrics-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.crm-metrics-six .metric-card { min-height: 180px; padding: 16px; }
.crm-metrics-six .metric-card strong { margin-top: 10px; font-size: 28px; }
.crm-metrics-six .metric-card .trend { margin-top: 7px; min-height: 72px; }
.crm-metrics-six .metric-card .trend > span { display: block; min-height: 18px; font-size: 10px; }
.crm-metric-purple { color: #7747c5; }
.crm-metric-blue { color: #2879d5; }
.crm-metric-orange { color: #bd7420; }
.crm-metric-pink { color: #d6386f; }
.crm-metric-card .metric-icon { color: currentColor; }
.crm-metric-card small, .crm-metric-card strong { color: var(--ink); }
.crm-metric-card .trend { color: var(--green-2); }
.crm-metric-purple .trend, .crm-metric-purple .crm-sparkline { color: #7747c5; }
.crm-metric-blue .trend, .crm-metric-blue .crm-sparkline { color: #2879d5; }
.crm-metric-orange .trend, .crm-metric-orange .crm-sparkline { color: #bd7420; }
.crm-metric-pink .trend, .crm-metric-pink .crm-sparkline { color: #d6386f; }
.crm-panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.crm-overview-primary-grid { display: grid; grid-template-columns: minmax(310px, .78fr) minmax(520px, 1.72fr); gap: 16px; }
.crm-overview-analytics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.crm-overview-analytics-grid .panel { min-height: 270px; }
.crm-bottom-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.crm-relationship-grid { grid-template-columns: minmax(0, 1.4fr) minmax(260px, .85fr) minmax(280px, 1fr); }
.crm-contact-metric { appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; }
.crm-contact-metric .trend { display: grid; gap: 4px; margin-top: 8px; }
.crm-contact-metric .trend b { width: max-content; max-width: 100%; padding: 3px 7px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.crm-recovery-count { color: #b44646; background: #fce9e7; }
.crm-prevention-count { color: #a06b11; background: #fff2d6; }
.crm-panel-intro { margin: 0; padding: 10px 18px 14px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.crm-contact-groups { display: grid; gap: 10px; padding: 0 18px 18px; }
.crm-contact-group { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 88px; padding: 14px; border: 1px solid var(--line); border-left: 3px solid #e5a33a; border-radius: 12px; background: #fff; }
.crm-contact-group-recover { border-left-color: #d95d58; }
.crm-contact-group-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crm-contact-group-copy > i { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: #a06b11; background: #fff2d6; font-style: normal; }
.crm-contact-group-recover .crm-contact-group-copy > i { color: #b44646; background: #fce9e7; }
.crm-contact-group-copy strong, .crm-contact-group-copy span { display: block; }
.crm-contact-group-copy strong { font-size: 12px; }
.crm-contact-group-copy strong b { margin-left: 5px; color: #a06b11; font-size: 11px; }
.crm-contact-group-recover .crm-contact-group-copy strong b { color: #b44646; }
.crm-contact-group-copy span { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.crm-contact-actions { display: grid; flex: 0 0 auto; justify-items: end; gap: 9px; }
.crm-contact-pet-stack { display: flex; align-items: center; justify-content: flex-end; min-height: 28px; padding-left: 10px; }
.crm-contact-pet { width: 29px; height: 29px; margin-left: -8px; border: 2px solid #fff; border-radius: 50%; font-size: 10px; box-shadow: 0 1px 3px rgba(22, 45, 35, .12); }
.crm-contact-pet:first-child { margin-left: 0; }
.crm-contact-pet-stack > b { display: grid; width: 29px; height: 29px; margin-left: -8px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: var(--ink); background: #edf1ef; font-size: 10px; box-shadow: 0 1px 3px rgba(22, 45, 35, .1); }
.crm-contact-group .button { flex: 0 0 auto; min-height: 34px; padding: 7px 10px; font-size: 11px; }
.crm-growth { display: grid; gap: 12px; padding: 18px; }
.crm-growth > div:first-child small, .crm-growth > div:first-child strong { display: block; }
.crm-growth > div:first-child small { color: var(--muted); font-size: 11px; }
.crm-growth > div:first-child strong { margin-top: 4px; font: 800 28px "Montserrat"; }
.crm-growth-chart { display: block; width: 100%; height: 158px; overflow: visible; }
.crm-growth-chart-dual { height: 210px; }
.crm-growth-grid { stroke: #edf0ec; stroke-width: 1; }
.crm-growth-line-clients { stroke: #16704d; }
.crm-growth-line-pets { stroke: #4189e8; }
.crm-growth-point-clients { fill: #16704d; }
.crm-growth-point-pets { fill: #4189e8; }
.crm-growth-point-clients-label, .crm-growth-point-pets-label { font: 800 10px "Montserrat"; }
.crm-growth-point-clients-label { fill: #16704d; }
.crm-growth-point-pets-label { fill: #4189e8; }
.crm-growth-wide { padding-bottom: 18px; }
.crm-growth-panel .panel-header { align-items: center; }
.crm-chart-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.crm-chart-legend i { width: 10px; height: 4px; margin-left: 7px; border-radius: 99px; background: #16704d; }
.crm-chart-legend i:nth-of-type(2) { background: #4189e8; }
.crm-growth-area { fill: #dceee5; opacity: .82; }
.crm-growth-line { fill: none; stroke: #146044; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.crm-growth-point { fill: #146044; stroke: #fff; stroke-width: 2; }
.crm-growth-value { fill: #1e2d28; font: 700 10px "Montserrat"; }
.crm-growth-label { fill: var(--muted); font: 600 10px "Montserrat"; text-transform: capitalize; }
.crm-growth-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.crm-growth-stats span { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); font-size: 10px; line-height: 1.25; }
.crm-growth-stats small, .crm-growth-stats em { display: block; color: var(--muted); font-size: 9px; font-style: normal; }
.crm-growth-stats b { display: block; margin: 5px 0 2px; color: var(--green); font-size: 17px; }
.crm-growth-stats .crm-growth-loss b { color: #c45151; }
.crm-relationship-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-relationship-filters button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font: 700 11px "Montserrat"; cursor: pointer; }
.crm-relationship-filters button.active { border-color: #bdd9ca; color: var(--green); background: #edf7f0; }
.relationship-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.relationship-summary-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; min-height: 178px; padding: 19px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.relationship-summary-card:hover, .relationship-summary-card.active { box-shadow: 0 8px 24px rgba(23, 79, 61, .08); transform: translateY(-1px); }
.relationship-summary-card > i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; font-style: normal; }
.relationship-summary-card > i .ui-icon { width: 22px; height: 22px; }
.relationship-summary-card > span small, .relationship-summary-card > span strong, .relationship-summary-card > span em { display: block; }
.relationship-summary-card > span small { color: #4e5d55; font: 800 12px "Montserrat"; }
.relationship-summary-card > span strong { margin-top: 2px; font: 900 28px/1 "Montserrat"; }
.relationship-summary-card > span em { margin-top: 7px; color: var(--muted); font-size: 11px; font-style: normal; }
.relationship-summary-card > p { grid-column: 1 / -1; min-height: 38px; margin: 0; padding: 10px; border-radius: 9px; font-size: 11px; line-height: 1.35; }
.relationship-summary-card > b { grid-column: 1 / -1; font-size: 11px; }
.relationship-summary-recover { border-color: #f1d7d3; }
.relationship-summary-recover > i { color: #b44646; background: #fce9e7; }
.relationship-summary-recover > p { color: #a74c49; background: #fff4f2; }
.relationship-summary-prevent { border-color: #f1dfbc; }
.relationship-summary-prevent > i { color: #a06b11; background: #fff2d6; }
.relationship-summary-prevent > p { color: #94631a; background: #fff9ed; }
.relationship-summary-scheduled { border-color: #cde5d8; }
.relationship-summary-scheduled > i { color: #26705a; background: #e5f4ea; }
.relationship-summary-scheduled > p { color: #39735a; background: #f0faf3; }
.relationship-list-panel { overflow: hidden; }
.relationship-list-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px 0; border-bottom: 1px solid var(--line); }
.relationship-tabs { display: flex; align-self: stretch; gap: 4px; }
.relationship-tabs button { position: relative; padding: 0 9px 13px; border: 0; color: var(--muted); background: transparent; font: 800 11px "Montserrat"; cursor: pointer; white-space: nowrap; }
.relationship-tabs button.active { color: var(--green); }
.relationship-tabs button.active::after { content: ""; position: absolute; right: 9px; bottom: -1px; left: 9px; height: 2px; border-radius: 99px; background: var(--green); }
.relationship-tabs span { color: inherit; font-size: 10px; }
.relationship-toolbar { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.relationship-search { display: flex; align-items: center; gap: 8px; width: 190px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--green); background: #fff; }
.relationship-search .ui-icon { width: 15px; height: 15px; }
.relationship-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font-size: 11px; }
.relationship-toolbar .button { min-height: 36px; padding: 7px 10px; font-size: 11px; }
.relationship-filter-panel, .segment-filter-panel { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)) auto; align-items: end; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); background: var(--content-subtle); }
.relationship-filter-panel label, .segment-filter-panel label { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 800; }
.relationship-filter-panel select, .segment-filter-panel select { min-height: 42px; }
.relationship-order { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; white-space: nowrap; }
.relationship-order select { min-height: 36px; padding: 6px 25px 6px 8px; font-size: 11px; }
.relationship-table { min-width: 1010px; }
.relationship-table td { vertical-align: middle; }
.relationship-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.relationship-client { display: flex; align-items: center; gap: 10px; }
.relationship-client .pet-avatar { width: 38px; height: 38px; border-radius: 11px; }
.relationship-client strong, .relationship-client small { display: block; }
.relationship-client strong { font-size: 12px; }
.relationship-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.relationship-badge-recover { color: #b44646; background: #fce9e7; }
.relationship-badge-prevent { color: #a06b11; background: #fff2d6; }
.relationship-badge-scheduled { color: #26705a; background: #e5f4ea; }
.relationship-time { font-size: 11px; white-space: nowrap; }
.relationship-time-recover { color: #c04c4c; }
.relationship-time-prevent { color: #a06b11; }
.relationship-time-scheduled { color: #26705a; }
.relationship-actions { display: flex; gap: 5px; }
.relationship-actions .icon-button { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.relationship-actions .whatsapp-icon { width: 15px; height: 15px; }
.segment-info { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid #d7e7db; border-radius: 12px; background: #f5faf6; }
.segment-info > i { width: 40px; height: 40px; display: grid; flex: 0 0 40px; place-items: center; border-radius: 11px; color: var(--green); background: #e1f1e6; font-style: normal; }
.segment-info > i .ui-icon { width: 21px; height: 21px; }
.segment-info strong, .segment-info span { display: block; }
.segment-info strong { font-size: 12px; }
.segment-info span { margin-top: 5px; color: var(--muted); font-size: 11px; }
.segment-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.segment-metrics article { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 13px; min-height: 124px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.segment-metrics article > i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; color: var(--green); background: #e7f4eb; font-style: normal; }
.segment-metrics article > i .ui-icon { width: 23px; height: 23px; }
.segment-metrics small, .segment-metrics strong, .segment-metrics em { display: block; }
.segment-metrics small { color: #4d5b54; font: 800 11px "Montserrat"; }
.segment-metrics strong { margin-top: 8px; font: 900 26px/1 "Montserrat"; }
.segment-metrics em { margin-top: 10px; color: var(--muted); font-size: 10px; font-style: normal; }
.segment-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; }
.segment-list-panel { overflow: hidden; }
.segment-list-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.segment-list-header > strong { font: 800 15px "Montserrat"; }
.segment-list-header > div { display: flex; align-items: center; gap: 8px; }
.segment-list-header .button { min-height: 36px; padding: 7px 10px; font-size: 11px; }
.segment-table { min-width: 890px; }
.segment-table td { vertical-align: middle; }
.segment-name { display: flex; align-items: center; gap: 10px; }
.segment-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #9b6d19; background: #fff1c9; font-style: normal; }
.segment-icon .ui-icon { width: 18px; height: 18px; }
.segment-icon-paw { color: #2673a1; background: #e5f1ff; }
.segment-icon-calendarDays { color: #b56624; background: #fff0df; }
.segment-icon-navigation { color: #315d78; background: #e6f0f5; }
.segment-icon-gift { color: #b75263; background: #fdecef; }
.segment-icon-message { color: #5754b8; background: #eeecff; }
.segment-icon-users { color: #21806a; background: #e3f5ef; }
.segment-icon-star { color: #aa7809; background: #fff4cf; }
.segment-name strong, .segment-name small { display: block; }
.segment-name strong { font-size: 12px; }
.segment-name small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.segment-audience { display: inline-flex; padding: 4px 7px; border-radius: 7px; color: #26705a; background: #e7f4eb; font-size: 10px; font-weight: 800; }
.segment-audience-pets { color: #286da1; background: #e5f1ff; }
.segment-criteria { display: block; max-width: 240px; font-size: 11px; line-height: 1.35; }
.segment-update { display: grid; grid-template-columns: 7px auto; column-gap: 6px; align-items: center; color: #26705a; font-size: 11px; font-weight: 800; }
.segment-update > i { width: 6px; height: 6px; border-radius: 50%; background: #27a26c; }
.segment-update small { grid-column: 2; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 500; }
.segment-actions { display: flex; gap: 5px; }
.segment-actions .icon-button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.segment-guide { padding: 18px; border: 1px solid #d9e4dd; border-radius: 14px; background: #f8faf8; }
.segment-guide > i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #9b6d19; background: #fff1c9; font-style: normal; }
.segment-guide > i .ui-icon { width: 17px; height: 17px; }
.segment-guide h2 { margin: 12px 0 14px; font: 800 13px "Montserrat"; }
.segment-guide > div { padding: 12px 0; border-top: 1px solid #e1e8e3; }
.segment-guide strong, .segment-guide span { display: block; }
.segment-guide strong { font-size: 11px; }
.segment-guide span { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.segment-preview { padding: 14px; border: 1px solid #cde5d8; border-radius: 10px; background: #f2faf5; }
.segment-preview strong, .segment-preview span { display: block; }
.segment-preview strong { color: var(--green); font-size: 12px; }
.segment-preview span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.segment-builder { gap: 18px; }
.segment-builder-label { display: block; margin-bottom: 9px; color: #3d4a43; font-size: 12px; }
.segment-builder-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.segment-builder-heading small { color: var(--muted); font-size: 11px; }
.segment-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.segment-choice { display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; color: #516058; background: #fff; text-align: left; cursor: pointer; }
.segment-choice:hover, .segment-choice.selected { border-color: #2b8967; color: #17634d; background: #f0faf5; }
.segment-choice > .ui-icon { width: 22px; height: 22px; }
.segment-choice strong, .segment-choice small { display: block; }
.segment-choice strong { font-size: 12px; }
.segment-choice small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.segment-rule-grid { display: grid; grid-template-columns: repeat(2, 1fr); max-height: 208px; gap: 9px; overflow-y: auto; padding-right: 5px; scrollbar-gutter: stable; }
.segment-rule-grid::-webkit-scrollbar { width: 7px; }
.segment-rule-grid::-webkit-scrollbar-thumb { border-radius: 999px; background: #bfd0c4; }
.segment-rule-option { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; color: #435149; background: #fff; font-size: 11px; font-weight: 700; text-align: left; cursor: pointer; }
.segment-rule-option:hover, .segment-rule-option.selected { border-color: #2b8967; color: #17634d; background: #f0faf5; }
.segment-rule-option i { display: grid; width: 17px; height: 17px; flex: 0 0 17px; place-items: center; border: 1px solid #b8c8be; border-radius: 50%; color: transparent; font-style: normal; }
.segment-rule-option.selected i { border-color: #20805e; color: #fff; background: #20805e; }
.segment-rule-option i .ui-icon { width: 11px; height: 11px; }
.segment-relation { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf9; }
.segment-relation > strong { display: block; margin-bottom: 9px; font-size: 12px; }
.segment-relation > div { display: flex; gap: 8px; }
.segment-relation button { flex: 1; padding: 10px; border: 1px solid var(--line); border-radius: 8px; color: #59665f; background: #fff; font-weight: 800; cursor: pointer; }
.segment-relation button.active { border-color: #2b8967; color: #17634d; background: #eaf7ef; }
.segment-relation button small { margin-left: 4px; font-size: 10px; font-weight: 500; }
.crm-contact-label { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.crm-contact-label-recover { color: #b44646; background: #fce9e7; }
.crm-contact-label-prevent { color: #a06b11; background: #fff2d6; }
.crm-panel { min-width: 0; overflow: hidden; }
.crm-panel .panel-header { padding: 16px 18px; }
.crm-panel .panel-header h2 { font-size: 14px; }
.crm-list { display: grid; padding: 4px 18px 12px; }
.crm-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid #eef0ec; }
.crm-row:last-child { border-bottom: 0; }
.crm-row .pet-avatar { width: 38px; height: 38px; border-radius: 12px; }
.crm-row > div:not(.crm-row-actions) { min-width: 0; }
.crm-row strong, .crm-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-row strong { font: 800 12px "Montserrat"; }
.crm-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.crm-row > b { max-width: 94px; color: #a3692d; font-size: 10px; line-height: 1.25; text-align: right; }
.crm-row-actions { display: flex; gap: 4px; }
.crm-row .icon-button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.crm-row .whatsapp-icon { width: 15px; height: 15px; }
.crm-contact-client-list { display: grid; padding: 4px 18px 18px; }
.crm-contact-client { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 66px; padding: 10px 0; border-bottom: 1px solid #edf0ec; }
.crm-contact-client:last-child { border-bottom: 0; }
.crm-contact-client .avatar { width: 38px; height: 38px; display: grid; place-items: center; box-sizing: border-box; overflow: hidden; border-radius: 12px; background: var(--mint); color: var(--green); font-size: 11px; font-weight: 800; line-height: 1; }
.crm-contact-client > div { min-width: 0; }
.crm-contact-client strong, .crm-contact-client small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-contact-client strong { font: 800 12px "Montserrat"; }
.crm-contact-client small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.crm-contact-client > b { color: #b44646; font-size: 11px; white-space: nowrap; }
.crm-ranking-list, .crm-species { display: grid; gap: 14px; padding: 18px; }
.crm-ranking { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(60px, 1.25fr) 26px; align-items: center; gap: 10px; font-size: 11px; }
.crm-ranking > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-ranking > i { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: #edf1ed; }
.crm-ranking > i > b { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.crm-ranking > strong { text-align: right; font-size: 11px; }
.crm-species-chart { display: grid; grid-template-columns: minmax(124px, .85fr) minmax(0, 1.15fr); align-items: center; gap: 20px; min-height: 150px; }
.crm-species-pie { position: relative; width: min(148px, 100%); aspect-ratio: 1; justify-self: center; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(18, 69, 53, .06); }
.crm-species-pie::after { content: ""; position: absolute; inset: 26%; border-radius: inherit; background: var(--surface); }
.crm-species-pie > span { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; text-align: center; }
.crm-species-pie strong { font: 800 24px "Montserrat"; color: var(--ink); line-height: 1; }
.crm-species-pie small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.crm-species-legend { display: grid; gap: 14px; min-width: 0; }
.crm-species-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.crm-species-row span { display: inline-flex; align-items: center; gap: 8px; }
.crm-species-row i { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 99px; background: var(--green); }
.crm-size-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; min-height: 194px; padding: 22px 20px 20px; }
.crm-size-bars > div { display: grid; grid-template-rows: 132px auto auto; align-items: end; gap: 6px; text-align: center; }
.crm-size-bars b { display: block; width: min(38px, 76%); min-height: 6px; justify-self: center; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #4ba779, #16704d); }
.crm-size-bars strong { color: var(--ink); font-size: 12px; }
.crm-size-bars span { color: var(--muted); font-size: 10px; font-weight: 700; }
.crm-insight-panel { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 18px; padding: 18px 20px; border: 1px solid #cce1d3; border-radius: var(--radius); background: #f0f8f2; }
.crm-insight-panel > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--green); background: #e0f0e5; font-style: normal; }
.crm-insight-panel > div { min-width: 0; }
.crm-insight-panel strong, .crm-insight-panel span { display: block; }
.crm-insight-panel span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.crm-bottom-insights .crm-insight-panel { margin-top: 12px; border-color: #cde5d8; background: #f0faf3; }
.crm-bottom-insights .crm-insight-panel > i { background: #e5f4ea; }
.crm-bottom-insights .crm-campaign-panel { border-color: #cde5d8; background: #f0faf3; }
.crm-bottom-insights .crm-campaign-panel > i { color: var(--green); background: #e5f4ea; }
.crm-campaign-panel { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 12px; padding: 18px 20px; border: 1px solid #e6d4a1; border-radius: var(--radius); background: #fffaf0; }
.crm-campaign-panel > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #9a7421; background: #fff0cb; font-style: normal; }
.crm-campaign-panel strong, .crm-campaign-panel span { display: block; }
.crm-campaign-panel span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.crm-section-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crm-sparkline { display: block; width: 100%; height: 34px; margin-top: 8px; overflow: visible; color: var(--green); }
.crm-sparkline-area { fill: color-mix(in srgb, currentColor 14%, transparent); }
.crm-sparkline-line { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.crm-sparkline-point { fill: #fff; stroke: currentColor; stroke-width: 2; }
.crm-positive { color: #197452; }
.crm-negative { color: #b44646; }
.module-breadcrumb { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--muted); font-size: 12px; font-weight: 700; }
.module-breadcrumb a { color: inherit; text-decoration: none; }
.module-breadcrumb a:hover { color: var(--green); }
.module-breadcrumb svg { width: 14px; height: 14px; }
.module-breadcrumb strong { color: var(--ink); }
.client-list-controls { display: grid; grid-template-columns: minmax(270px, 1fr) minmax(170px, .35fr) auto; align-items: end; gap: 12px; margin: 18px 0; }
.service-list-controls { display: grid; grid-template-columns: minmax(360px, 1.7fr) minmax(210px, .65fr) auto; align-items: end; gap: 14px; margin: 18px 0; }
.service-order-field { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.service-order-field select { min-height: 46px; }
.service-filter-panel { display: grid; grid-template-columns: minmax(125px, .75fr) minmax(150px, 1fr) minmax(270px, 1.65fr) minmax(140px, .9fr) minmax(120px, .7fr) auto; align-items: end; gap: 12px; margin: -6px 0 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--content-subtle); }
.service-filter-panel > label { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 800; }
.service-filter-panel select, .service-filter-panel input { min-height: 42px; }
.service-price-filter { min-width: 0; display: grid; grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr); align-items: center; gap: 7px; margin: 0; padding: 0; border: 0; }
.service-price-filter legend { margin-bottom: 6px; padding: 0; color: var(--muted); font-size: 11px; font-weight: 800; }
.service-price-filter span { color: var(--muted); font-size: 11px; }
.service-list-panel { overflow: hidden; }
.service-list-table { min-width: 900px; }
.service-list-table td { vertical-align: middle; }
.service-list-table td:nth-child(3), .service-list-table td:nth-child(5) { white-space: nowrap; }
.service-primary-cell { min-width: 215px; }
.service-primary-cell > div { min-width: 0; }
.service-primary-cell small { max-width: 390px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.service-avatar { border-radius: 11px; }
.service-avatar.inactive { color: var(--danger); background: #f9e5e3; }
.service-list-table th:last-child, .service-list-table td:last-child { text-align: right; }
.service-list-pagination { min-width: 0; }
.package-list-filter-panel { display: flex; align-items: end; gap: 12px; margin: -6px 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--content-subtle); }
.package-list-filter-panel label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.package-list-filter-panel select { min-width: 170px; min-height: 40px; }
.package-list-table { min-width: 980px; }
.package-list-table td { vertical-align: middle; }
.package-list-table th:last-child, .package-list-table td:last-child { text-align: right; }
.package-list-avatar { color: var(--green); background: var(--green-soft); }
.package-list-services { display: flex; max-width: 420px; flex-wrap: wrap; gap: 5px; }
.package-list-services span { padding: 5px 8px; border: 1px solid #dce9e0; border-radius: 8px; color: #315b48; background: #f2f8f4; font-size: 11px; white-space: nowrap; }
.package-list-services span b { font-weight: 800; }
.package-list-services small { align-self: center; color: var(--muted); font-size: 11px; }
.package-list-hint { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.subscription-list-avatar { color: #4f46a5; background: #eeecfb; }
.subscription-cycle-badge { display: inline-flex; padding: 6px 10px; border: 1px solid #dedaf4; border-radius: 999px; color: #51479a; background: #f4f2fc; font-size: 11px; font-weight: 800; }
.subscription-info-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr); gap: 18px 24px; }
.subscription-info-grid label { display: grid; align-content: start; gap: 8px; min-width: 0; font-size: 12px; font-weight: 800; }
.subscription-info-grid label > span:first-child { display: block; }
.subscription-info-grid label em { color: var(--muted); font-weight: 500; }
.subscription-info-grid input, .subscription-info-grid select, .subscription-info-grid .package-money-input { min-height: 48px; }
.subscription-form-header > i { color: #51479a; background: #f1effb; }
.catalog-period-field { display: grid; gap: 5px; min-width: 190px; color: var(--muted); font-size: 11px; font-weight: 800; }
.catalog-period-field select { min-height: 42px; background: #fff; }
.catalog-custom-period { display: flex; justify-content: flex-end; align-items: end; gap: 12px; margin: 4px 0 16px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--content-subtle); }
.catalog-custom-period label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.catalog-custom-period input { min-height: 40px; }
.catalog-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 18px 0 10px; }
.catalog-kpis article { display: grid; min-height: 162px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 4px 15px rgba(29, 55, 42, .035); }
.catalog-kpis article > .ui-icon { width: var(--icon-badge-size); height: var(--icon-badge-size); margin-bottom: 16px; padding: 9px; border-radius: var(--icon-badge-radius); color: var(--green); background: #eef6f0; }
.catalog-kpis small { min-height: 30px; color: #3e4843; font-size: 11px; font-weight: 800; }
.catalog-kpis strong { margin: 3px 0; color: var(--ink); font: 800 25px "Montserrat"; }
.catalog-kpis span { color: var(--green); font-size: 10px; font-weight: 800; }
.catalog-overview-note, .catalog-overview-footer-note { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; color: var(--muted); font-size: 10px; }
.catalog-overview-note .ui-icon, .catalog-overview-footer-note .ui-icon { width: 14px; height: 14px; }
.catalog-overview-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.catalog-overview-card { grid-column: span 2; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.catalog-overview-card > header { display: flex; min-height: 78px; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.catalog-overview-card > header h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 14px; }
.catalog-overview-card > header h2 .ui-icon { width: 14px; height: 14px; color: var(--muted); }
.catalog-overview-card > header p { margin: 0; color: var(--muted); font-size: 10px; }
.catalog-overview-card > header .button { min-height: 34px; padding: 7px 11px; flex: 0 0 auto; font-size: 10px; }
.catalog-table-scroll { overflow-x: hidden; }
.catalog-overview-card table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-size: 10px; }
.catalog-overview-card th, .catalog-overview-card td { padding: 11px 14px; border-bottom: 1px solid #edf0ed; text-align: left; vertical-align: middle; }
.catalog-overview-card th { color: var(--muted); font-size: 9px; text-transform: none; }
.catalog-overview-card tfoot td { border-bottom: 0; font-weight: 800; }
.catalog-overview-card table:not(.catalog-package-usage):not(.catalog-capacity-usage) th:nth-child(1) { width: 46%; }
.catalog-overview-card table:not(.catalog-package-usage):not(.catalog-capacity-usage) th:nth-child(2) { width: 18%; }
.catalog-overview-card table:not(.catalog-package-usage):not(.catalog-capacity-usage) th:nth-child(3) { width: 36%; }
.catalog-service-name { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.catalog-service-icon { display: inline-flex; width: 27px; height: 27px; align-items: center; justify-content: center; border-radius: 7px; }
.catalog-service-icon .ui-icon { width: 15px; height: 15px; }
.catalog-service-icon.aqua { color: #087b79; background: #e4f7f5; }
.catalog-service-icon.blue { color: #2563c9; background: #e8f0ff; }
.catalog-service-icon.purple { color: #7a4bb4; background: #f1eaff; }
.catalog-service-icon.orange { color: #b75d13; background: #fff0df; }
.catalog-service-icon.pink { color: #b34b76; background: #fceaf1; }
.catalog-usage, .catalog-occupancy { display: flex; min-width: 0; align-items: center; gap: 8px; }
.catalog-progress { display: block; width: 70px; height: 7px; overflow: hidden; border-radius: 99px; background: #edf1ee; }
.catalog-progress i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.catalog-progress.high i { background: #dc2626; }
.catalog-progress.medium i { background: #efb827; }
.catalog-progress.low i { background: #4e9a64; }
.catalog-usage b, .catalog-occupancy b { min-width: 28px; text-align: right; }
.catalog-package-usage { width: 100%; min-width: 0 !important; table-layout: fixed; }
.catalog-package-usage th, .catalog-package-usage td { padding-right: 9px; padding-left: 9px; overflow-wrap: anywhere; }
.catalog-package-usage th { white-space: normal; line-height: 1.3; }
.catalog-package-usage th:nth-child(1) { width: 25%; }
.catalog-package-usage th:nth-child(2) { width: 20%; }
.catalog-package-usage th:nth-child(3), .catalog-package-usage th:nth-child(4) { width: 27.5%; }
.catalog-package-usage td:not(:first-child), .catalog-package-usage th:not(:first-child) { text-align: center; }
.catalog-capacity-usage th:nth-child(1) { width: 36%; }
.catalog-capacity-usage th:nth-child(2) { width: 20%; }
.catalog-capacity-usage th:nth-child(3) { width: 19%; }
.catalog-capacity-usage th:nth-child(4) { width: 25%; }
.catalog-capacity-usage th, .catalog-capacity-usage td { padding-right: 9px; padding-left: 9px; overflow-wrap: anywhere; }
.catalog-capacity-usage th { line-height: 1.3; }
.catalog-empty-row { height: 96px; color: var(--muted); text-align: center !important; }
.catalog-occupancy-legend { display: flex; justify-content: center; gap: 18px; padding: 12px; color: var(--muted); font-size: 9px; }
.catalog-occupancy-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #4e9a64; }
.catalog-occupancy-legend .high::before { background: #dc2626; }
.catalog-occupancy-legend .medium::before { background: #efb827; }
.catalog-category-card { grid-column: span 2; }
.catalog-alerts-card { grid-column: span 4; }
.catalog-category-layout { display: grid; grid-template-columns: 185px minmax(0, 1fr); align-items: center; gap: 18px; padding: 24px; }
.catalog-category-donut { display: grid; width: 168px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--catalog-donut)); }
.catalog-category-donut::before { content: ""; grid-area: 1 / 1; width: 83px; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.catalog-category-donut > span { z-index: 1; grid-area: 1 / 1; display: grid; text-align: center; }
.catalog-category-donut strong { font: 800 25px "Montserrat"; }
.catalog-category-donut small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.catalog-category-legend { display: grid; gap: 13px; }
.catalog-category-legend > span { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; font-size: 10px; }
.catalog-category-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--category-color); }
.catalog-category-legend em { min-width: 30px; color: var(--muted); font-style: normal; text-align: right; }
.catalog-alerts { display: grid; gap: 8px; padding: 16px; }
.catalog-alerts > a { display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 13px; border-radius: 10px; color: var(--green); background: #f1f7f3; text-decoration: none; }
.catalog-alerts > a.yellow { color: #ad7d0b; background: #fcf7e9; }
.catalog-alerts > a.purple { color: #7642a0; background: #f6f0fa; }
.catalog-alerts > a > i, .catalog-alerts > a > .ui-icon { display: grid; place-items: center; }
.catalog-alerts > a i .ui-icon { width: 21px; height: 21px; }
.catalog-alerts > a > .ui-icon { width: 16px; height: 16px; }
.catalog-alerts > a span { display: grid; gap: 3px; }
.catalog-alerts > a strong { font-size: 11px; }
.catalog-alerts > a small { color: #56615b; font-size: 10px; }
.catalog-no-alerts { display: flex; min-height: 150px; align-items: center; justify-content: center; gap: 8px; color: var(--green); font-size: 11px; }
.catalog-no-alerts .ui-icon { width: 18px; height: 18px; }
.catalog-overview-footer-note { margin: 10px 0 0; }

/* Shared visual language for the Clients & Pets, Team and Services overviews. */
.catalog-period-field, .team-period-select, .crm-period-filter {
  border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(29,55,42,.035);
}
.catalog-period-field, .team-period-select { min-height: 46px; padding: 7px 11px; }
.catalog-period-field > span, .team-period-select { color: #65736a; font-size: 10px; font-weight: 800; }
.catalog-period-field select, .team-period-select select { min-height: 24px; color: var(--ink); font: 800 12px "Montserrat"; }
.crm-period-filter { padding: 8px 10px; }
.crm-period-filter .button { border-color: transparent; color: var(--green); background: #edf6ef; }

.catalog-kpis article, .team-kpis article, .crm-metrics-six .metric-card {
  min-height: 164px; border-radius: 14px; box-shadow: 0 4px 15px rgba(29,55,42,.035);
}
.catalog-kpis article > .ui-icon, .team-kpis article > .ui-icon, .crm-metrics-six .metric-icon {
  width: 38px; height: 38px; border-radius: 11px;
}
.catalog-kpis small, .team-kpis small, .crm-metrics-six .metric-card small {
  color: var(--muted); font-size: 10px; font-weight: 700;
}
.catalog-kpis strong, .team-kpis strong, .crm-metrics-six .metric-card strong { font-size: 26px; }

.catalog-overview-card, .team-overview-card, .crm-overview-primary-grid .panel, .crm-overview-analytics-grid .panel {
  border-radius: 14px; box-shadow: 0 3px 12px rgba(29,55,42,.025);
}
.catalog-overview-card > header h2, .team-overview-card h2, .crm-overview-primary-grid .panel h2, .crm-overview-analytics-grid .panel h2 {
  font: 800 15px "Montserrat";
}
.catalog-overview-card > header p, .team-overview-card p, .crm-overview-primary-grid .panel header p, .crm-overview-analytics-grid .panel header p {
  color: var(--muted); font-size: 10px; line-height: 1.45;
}
.catalog-overview-note, .catalog-overview-footer-note, .team-overview-note {
  min-height: 38px; padding: 10px 12px; border: 1px solid #d6e2da; border-radius: 10px; background: #f7faf8;
}
.catalog-alerts > a.red { color: #a74740; background: #fff0ee; }
.catalog-alerts > a.green { color: #2b7658; background: #edf7f0; }
.catalog-alerts > a.yellow { color: #9a7113; background: #fff7e5; }
.catalog-alerts > a.purple { color: #7250a0; background: #f4effb; }
.client-advanced-panel { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; align-items: end; gap: 12px; margin: -8px 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--content-subtle); }
.client-advanced-panel label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 800; }
.client-advanced-panel select { min-height: 38px; }
.employee-list-controls { display: grid; grid-template-columns: minmax(300px, 1fr) auto auto; align-items: center; gap: 12px; margin: 18px 0; }
.employee-filter-panel { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; align-items: end; gap: 12px; margin: -6px 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--content-subtle); }
.employee-filter-panel label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.employee-filter-panel select { width: 100%; min-width: 0; min-height: 40px; }
.employee-search-clear { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
.employee-search-clear .ui-icon { width: 14px; height: 14px; }
.employee-list-row { cursor: pointer; }
.employee-list-row:hover { background: #f5faf6; }
.employee-list-table { min-width: 900px; }
.employee-list-table td:nth-child(4) { max-width: 310px; }
.employee-services-cell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-list-controls { grid-template-columns: minmax(300px, 1.7fr) minmax(180px, .8fr) auto; }
.client-list-controls > label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.client-list-controls select { min-height: 46px; }
.client-search-field { position: relative; display: flex !important; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--green) !important; }
.client-search-field:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(20, 96, 68, .1); }
.client-search-field svg { flex: 0 0 18px; width: 18px; height: 18px; }
.client-search-field input { min-width: 0; height: 42px; padding: 0; border: 0; outline: 0; box-shadow: none; }
.client-search-field input:focus { box-shadow: none; }
.client-advanced-filter { min-height: 46px; white-space: nowrap; }
.client-list-panel { overflow: hidden; }
.pet-filter-panel { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)) auto; align-items: end; gap: 12px; margin: -6px 0 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--content-subtle); }
.pet-filter-panel label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.pet-filter-panel select { min-height: 42px; }
.pet-list-table { min-width: 1080px; }
.pet-list-avatar { overflow: hidden; }
.pet-list-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.pet-tutor-cell strong, .pet-tutor-cell small { display: block; }
.pet-tutor-cell small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.pet-sex { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.pet-sex .ui-icon { width: 15px; height: 15px; stroke-width: 2.2; }
.pet-sex-female { color: #cf5f86; }
.pet-sex-male { color: #3980bf; }
.client-table-scroll { overflow-x: auto; }
.client-list-table { min-width: 940px; }
.client-list-row { cursor: pointer; }
.client-list-row:hover { background: #f5faf6; }
.client-list-table td { vertical-align: middle; }
.client-list-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.client-contact { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.client-contact .whatsapp-icon, .client-contact svg { width: 17px; height: 17px; color: var(--green); }
.client-quick-actions { justify-content: flex-end; }
.client-list-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.client-list-pagination > div:first-child { display: flex; align-items: center; gap: 7px; }
.client-list-pagination select { width: 60px; min-height: 32px; padding: 5px 8px; }
.pagination-controls { display: inline-flex; align-items: center; gap: 7px; }
.pagination-controls .icon-button { width: 30px; height: 30px; }
.client-list-tip { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 16px; border: 1px solid #cee4d5; border-radius: 10px; background: #f3faf5; color: var(--muted); font-size: 12px; }
.client-list-tip i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--green); background: #e4f3e8; font-style: normal; }
.client-list-tip svg { width: 16px; height: 16px; }
.client-center-grid { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: 18px; margin-bottom: 18px; }
.client-center-profile { padding: 22px; }
.client-center-profile h2 { margin: 0 0 6px; font-size: 18px; }
.client-center-profile p { margin: 4px 0; color: var(--muted); font-size: 12px; }
.client-center-profile .button { margin-top: 14px; }
.client-center-avatar { width: 56px; height: 56px; font-size: 17px; }
.client-center-pets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 16px 18px; }
.client-center-pet { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: left; cursor: pointer; }
.client-center-pet:hover { border-color: #b9d9c8; background: #f5faf6; }
.client-center-pet > img, .client-center-pet > .pet-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; object-fit: cover; }
.client-center-pet strong, .client-center-pet small { display: block; }
.client-center-pet small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.relationship-history-panel { overflow: hidden; }
.relationship-history-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px; border-bottom: 1px solid var(--line); }
.relationship-history-header h2 { margin: 0; font: 800 16px "Montserrat"; }
.relationship-history-header p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.relationship-history-header .button { min-height: 36px; padding: 7px 10px; font-size: 11px; }
.relationship-history-filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #fafbf9; }
.relationship-history-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.relationship-history-filters select, .relationship-history-filters input { min-width: 150px; min-height: 34px; padding: 6px 8px; font-size: 11px; }
.relationship-history-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.relationship-history-tabs button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: #495a51; background: #fff; font: 800 11px "Montserrat"; white-space: nowrap; cursor: pointer; }
.relationship-history-tabs button.active { border-color: #bad8c7; color: var(--green); background: #edf7f0; }
.relationship-history-tabs i { display: grid; place-items: center; color: currentColor; font-style: normal; }
.relationship-history-tabs i .ui-icon { width: 15px; height: 15px; }
.relationship-history-tabs b { min-width: 18px; padding: 2px 5px; border-radius: 99px; background: #edf1ef; font-size: 10px; }
.relationship-history-table { min-width: 940px; }
.relationship-history-table td { vertical-align: middle; }
.relationship-history-table td > strong, .relationship-history-table td > small { display: block; }
.relationship-history-table td > strong { font-size: 11px; }
.relationship-history-table td > small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.relationship-history-row { cursor: pointer; }
.relationship-history-row:hover { background: #fafcf9; }
.relationship-history-row > td:nth-child(2) { position: relative; }
.relationship-history-dot { position: absolute; left: -9px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #26705a; transform: translateY(-50%); }
.relationship-history-appointment .relationship-history-dot { background: #e58a28; }
.relationship-history-contact .relationship-history-dot { background: #2a9b62; }
.relationship-history-package .relationship-history-dot { background: #d45175; }
.relationship-history-other .relationship-history-dot { background: #4c83c3; }
.relationship-history-event { display: flex; align-items: center; gap: 9px; }
.relationship-history-event > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #26705a; background: #e7f4eb; font-style: normal; }
.relationship-history-event > i .ui-icon { width: 16px; height: 16px; }
.relationship-history-event > i .whatsapp-icon { width: 16px; height: 16px; }
.relationship-history-appointment .relationship-history-event > i { color: #b66b16; background: #fff1dd; }
.relationship-history-contact .relationship-history-event > i { color: #278257; background: #e6f6ec; }
.relationship-history-package .relationship-history-event > i { color: #bd4769; background: #fbe8ef; }
.relationship-history-other .relationship-history-event > i { color: #3d74b3; background: #e9f2ff; }
.relationship-history-event strong { font-size: 11px; }
.relationship-history-status { display: inline-flex; padding: 4px 7px; border-radius: 99px; color: #26705a; background: #e7f4eb; font-size: 10px; font-weight: 800; }
.relationship-history-status-appointment { color: #a06b11; background: #fff2d6; }
.relationship-history-status-package { color: #bd4769; background: #fbe8ef; }
.relationship-history-row > td:last-child .ui-icon { width: 16px; color: var(--muted); }
.relationship-history-more { width: 100%; padding: 16px; border: 0; border-top: 1px solid var(--line); color: var(--green); background: #fff; font: 800 12px "Montserrat"; cursor: pointer; }
.relationship-history-more .ui-icon { width: 16px; vertical-align: middle; }
.client-create-page-form { display: grid; max-width: 1040px; gap: 16px; }
.client-create-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.client-create-modal-header h2 { margin: 0 0 6px; }
.client-create-modal-header p { margin: 0; color: var(--muted); font-size: 13px; }
.modal-close-inline { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 0; border-radius: 10px; color: var(--muted); background: var(--cream); cursor: pointer; }
.modal-close-inline svg { width: 19px; height: 19px; }
.client-form-section { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.client-form-section > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.client-form-section > header > i { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 11px; color: var(--green); background: #eaf4ed; font-style: normal; }
.client-form-section > header svg { width: 20px; height: 20px; }
.client-form-section h2 { margin: 1px 0 4px; font: 800 15px "Montserrat"; }
.client-form-section header p { margin: 0; color: var(--muted); font-size: 12px; }
.client-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.client-cep-action { align-self: end; }
.client-cep-action .button { width: 100%; min-height: 46px; }
.client-form-hint { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; color: var(--muted); font-size: 12px; }
.client-form-hint svg { width: 16px; height: 16px; color: var(--green); }
.client-create-footer { position: sticky; bottom: 12px; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 8px 24px rgba(30, 52, 42, .08); }
.client-create-footer .button { min-height: 46px; }
.employee-create-form { display: grid; gap: 14px; margin-top: 18px; }
.modal-card.client-create-modal-card:has(.employee-create-form) { width: min(1135px, 100%); overflow-x: hidden; }
.modal-card.client-create-modal-card:has(.employee-create-form) #modal-content,
.modal-card.client-create-modal-card:has(.employee-create-form) .employee-create-form { width: 100%; min-width: 0; }
.employee-form-section { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.employee-form-section > header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.employee-form-section > header > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--green); background: #e7f4eb; font-style: normal; }
.employee-form-section > header > i .ui-icon { width: 18px; height: 18px; }
.employee-form-section h3 { margin: 0; font: 800 14px "Montserrat"; }
.employee-form-section h3 small { color: var(--muted); font: 600 10px "Montserrat"; }
.employee-form-section header p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.employee-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.employee-create-grid label { position: relative; min-width: 0; }
.employee-create-grid .span-2 { grid-column: 1 / -1; }
.employee-services-field { display: grid; gap: 8px; }
.employee-services-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.employee-service-search { min-height: 38px; padding-left: 12px; }
.employee-service-options { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; max-height: 112px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.employee-services-field.is-open .employee-service-options { display: grid; }
.employee-service-options label { display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 6px; border-radius: 6px; color: #426653; background: #f1f7f2; font-size: 10px; font-weight: 700; cursor: pointer; }
.employee-service-options input { width: auto; margin: 0; accent-color: var(--green); }
.employee-selected-services { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.employee-selected-services > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 7px; color: #315a45; background: #e7f4eb; font-size: 10px; font-weight: 800; }
.employee-selected-services button { display: grid; width: 14px; height: 14px; place-items: center; padding: 0; border: 0; color: #315a45; background: transparent; cursor: pointer; }
.employee-selected-services button .ui-icon { width: 11px; height: 11px; }
.employee-selected-services small { align-self: center; color: var(--muted); font-size: 10px; }
.employee-form-section:first-child .employee-create-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 220px; }
.employee-form-section:first-child .employee-upload { grid-column: 3; grid-row: 1 / span 3; }
.employee-edit-form .employee-form-section:first-child .employee-upload { grid-row: 1 / span 2; min-height: 132px; max-height: 132px; }
.employee-edit-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; }
.employee-upload { display: grid; min-height: 126px; cursor: pointer; }
.employee-upload input { position: absolute; opacity: 0; pointer-events: none; }
.employee-upload > span { display: grid; place-items: center; align-content: center; gap: 5px; min-height: 100%; border: 1px dashed #b9c8be; border-radius: 9px; color: var(--ink); font-size: 11px; font-weight: 800; text-align: center; }
.employee-upload .ui-icon { width: 23px; height: 23px; color: var(--muted); }
.employee-upload small { color: var(--muted); font-size: 9px; font-weight: 500; }
.employee-form-note { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 10px; border-radius: 8px; color: #426653; background: #edf7f0; font-size: 10px; }
.employee-form-note .ui-icon { width: 15px; color: var(--green); }
.employee-form-columns { display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 14px; }
.employee-form-columns-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.employee-form-columns-three > .employee-form-section:first-child .employee-create-grid { grid-template-columns: 1fr; }
.employee-form-columns-three > .employee-form-section:first-child .span-2 { grid-column: auto; display: flex; align-items: center; gap: 8px; }
.employee-form-columns-three > .employee-form-section:first-child .span-2 input { width: auto; flex: 0 0 auto; }
.availability-options { display: grid; gap: 7px; margin-bottom: 14px; }
.availability-options label, .commission-toggle { display: flex; align-items: center; gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 10px; }
.availability-options input, .commission-toggle input { width: auto; }
.commission-toggle { justify-content: space-between; margin-bottom: 12px; font-weight: 800; }
.inline-field-action { position: absolute; right: 8px; bottom: 8px; border: 0; color: var(--green); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.employee-create-grid label:has(.inline-field-action) input { padding-right: 74px; }
.employee-form-footer { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 -6px 18px rgba(30, 52, 42, .05); }
.employee-form-footer > span { display: flex; align-items: center; gap: 7px; color: #426653; font-size: 10px; }
.employee-form-footer > span .ui-icon { width: 15px; color: var(--green); }
.employee-form-footer > div { display: flex; gap: 8px; }
@media (max-width: 820px) { .employee-form-columns, .employee-form-columns-three { grid-template-columns: 1fr; } .employee-form-section:first-child .employee-create-grid { grid-template-columns: 1fr; } .employee-form-section:first-child .employee-upload { grid-column: auto; grid-row: auto; min-height: 132px; } .employee-form-footer { align-items: flex-start; flex-direction: column; } .employee-form-footer > div { width: 100%; flex-wrap: wrap; } }
.employee-center-breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--muted); font-size: 12px; }
.employee-center-breadcrumb button { padding: 0; border: 0; color: var(--green); background: transparent; font: inherit; font-weight: 800; }
.employee-center-breadcrumb .ui-icon { width: 14px; }
.employee-center-hero, .employee-kpis, .employee-center-card { border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.employee-center-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 20px; }
.employee-center-profile { display: flex; align-items: center; gap: 18px; min-width: 0; }
.employee-center-profile .pet-avatar { width: 132px; height: 132px; flex: 0 0 132px; border-radius: 10px; font-size: 28px; }
.employee-center-title { display: flex; align-items: center; gap: 10px; }
.employee-center-title h1 { margin: 0; font: 800 27px "Montserrat"; }
.employee-center-profile p { margin: 5px 0; color: var(--muted); }
.employee-center-profile small { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #526057; }
.employee-center-profile small .ui-icon { width: 15px; color: var(--green); }
.employee-center-actions { display: flex; align-items: flex-start; gap: 10px; }
.employee-center-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; margin-left: 150px; border-top: 1px solid var(--line); padding-top: 12px; }
.employee-center-facts span { position: relative; display: grid; grid-template-columns: 24px 1fr; column-gap: 7px; }
.employee-center-facts .ui-icon { grid-row: span 2; width: 18px; color: var(--green); }
.employee-center-facts small, .employee-center-facts strong { display: block; }
.employee-center-facts small { color: var(--muted); font-size: 10px; }.employee-center-facts strong { font-size: 11px; }
.employee-kpis { display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0; overflow: hidden; }
.employee-kpis article { display: flex; gap: 12px; min-width: 0; padding: 18px; border-right: 1px solid var(--line); }.employee-kpis article:last-child { border: 0; }
.employee-kpis > article > .ui-icon { width: 32px; height: 32px; flex: 0 0 32px; padding: 7px; border-radius: 9px; color: var(--green); background: #e8f4eb; }
.employee-kpis small, .employee-kpis span { display: block; color: var(--muted); font-size: 10px; }.employee-kpis strong { display: block; margin: 3px 0; font: 800 20px "Montserrat"; }
.employee-center-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.employee-center-grid > article:nth-child(5) { grid-column: span 2; }.employee-center-bottom { display: grid; grid-template-columns: .72fr 1.28fr; gap: 14px; margin-top: 14px; }
.employee-center-card { display: grid; align-content: start; min-width: 0; min-height: 188px; padding: 16px; }.employee-center-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 13px; }.employee-center-card h2 { margin: 0; font: 800 14px "Montserrat"; }.employee-center-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }.employee-center-card header .button { padding: 8px 10px; font-size: 10px; }
.employee-service-tags { display: flex; flex-wrap: wrap; gap: 7px; min-height: 68px; }.employee-service-tags span { padding: 5px 8px; border-radius: 8px; color: #40604f; background: #f1f7f2; font-size: 10px; font-weight: 700; }
.employee-services-card { min-height: 192px; }
.employee-services-card header { align-items: center; }
.employee-center-card-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; color: var(--green); background: #e7f4eb; font-style: normal; }
.employee-center-card-icon .ui-icon { width: 18px; height: 18px; }
.employee-services-card header > div { margin-right: auto; }
.employee-services-card .employee-service-tags { align-content: start; gap: 8px; min-height: 70px; padding: 2px 0; }
.employee-services-card .employee-service-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid #e2e9e3; border-radius: 999px; color: #5a6c60; background: #fbfdfb; font-size: 10px; }
.employee-services-card .employee-service-tags span::before { width: 5px; height: 5px; border-radius: 50%; background: #158055; content: ""; }
.employee-services-card .employee-center-link { margin-top: 12px; padding-top: 14px; }
.employee-center-link { align-self: end; margin-top: 15px; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); color: var(--green); background: transparent; text-align: left; font-size: 10px; font-weight: 800; }
.employee-schedule-list { display: grid; gap: 7px; padding: 11px; border-radius: 10px; background: #f8faf8; }.employee-schedule-list div { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; }.employee-schedule-list span { color: var(--muted); }
.employee-detail-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-height: 68px; }.employee-detail-pairs small, .employee-detail-pairs strong { display: block; }.employee-detail-pairs small { color: var(--muted); font-size: 10px; }.employee-detail-pairs strong { margin-top: 3px; font-size: 11px; }.employee-document-empty { min-height: 68px; padding: 13px; border: 1px dashed #c6d2ca; border-radius: 9px; color: var(--muted); font-size: 11px; }
.employee-history { display: grid; gap: 12px; }.employee-history > div { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; }.employee-history i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--green); background: #e8f4eb; font-style: normal; }.employee-history i .ui-icon { width: 15px; }.employee-history strong, .employee-history small { display: block; }.employee-history strong { font-size: 11px; }.employee-history small, .employee-history time { color: var(--muted); font-size: 9px; }.employee-history time { text-align: right; }
.employee-performance { grid-template-columns: 150px 1fr; column-gap: 16px; }.employee-performance header { grid-column: 1 / -1; }.employee-performance-summary { display: grid; align-content: start; gap: 4px; padding: 14px; border-radius: 10px; background: #f6f9f6; }.employee-performance-summary strong { font: 800 22px "Montserrat"; }.employee-performance-summary span { color: var(--muted); font-size: 10px; }.employee-performance-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.employee-performance-form label { gap: 4px; font-size: 10px; }.employee-performance-form input, .employee-performance-form textarea { padding: 8px; border-radius: 8px; font-size: 11px; }.employee-performance-form textarea { min-height: 48px; }.employee-performance-form .span-2 { grid-column: 1 / -1; }
.team-period-select { min-width: 190px; gap: 3px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 10px; }.team-period-select select { padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 800; }
.team-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }.team-kpis article, .team-overview-card { border: 1px solid var(--line); border-radius: 15px; background: #fff; }.team-kpis article { display: flex; gap: 11px; min-height: 128px; padding: 16px; }.team-kpis article > .ui-icon { width: var(--icon-badge-size); height: var(--icon-badge-size); flex: 0 0 var(--icon-badge-size); padding: 9px; border-radius: var(--icon-badge-radius); color: var(--green); background: #e9f4ed; }.team-kpis small, .team-kpis span { display: block; color: var(--muted); font-size: 10px; }.team-kpis strong { display: block; margin: 5px 0; font: 800 25px "Montserrat"; }.team-kpis article:first-child strong { color: #2d72d8; }.team-kpis a { display: inline-block; margin-top: 5px; color: var(--green); font-size: 10px; font-weight: 800; text-decoration: none; }
.team-kpis article:nth-child(1) > .ui-icon { color: #3f7fe0; background: #e8f0ff; }
.team-kpis article:nth-child(2) > .ui-icon { color: #e2a72b; background: #fff4da; }
.team-kpis article:nth-child(3) > .ui-icon { color: #26845d; background: #e7f5eb; }
.team-kpis article:nth-child(4) > .ui-icon { color: #8768d8; background: #f0eaff; }
.team-kpis article:nth-child(5) > .ui-icon { color: #21865c; background: #e5f5ea; }
.team-overview-main { display: grid; grid-template-columns: 1.35fr .9fr 1.15fr; gap: 14px; }.team-overview-bottom { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; margin-top: 14px; }.team-overview-card { display: grid; align-content: start; min-width: 0; padding: 17px; }.team-overview-card header { margin-bottom: 14px; }.team-overview-card h2 { margin: 0; font: 800 16px "Montserrat"; }.team-overview-card p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.team-performance-head, .team-performance-row { display: grid; grid-template-columns: minmax(135px, 1.55fr) .6fr .65fr .7fr .8fr; gap: 7px; align-items: center; }.team-performance-head { padding: 0 8px 8px; color: var(--muted); font-size: 9px; font-weight: 800; }.team-performance-row { width: 100%; padding: 8px; border: 0; border-top: 1px solid var(--line); color: var(--ink); background: transparent; font-size: 10px; text-align: left; }.team-performance-row:hover { background: #f7faf8; }.team-performance-row > span:first-child { display: flex; align-items: center; gap: 8px; }.team-performance-row .pet-avatar { width: 29px; height: 29px; flex: 0 0 29px; font-size: 9px; }.team-performance-row b, .team-performance-row small { display: block; }.team-performance-row b { font-size: 10px; }.team-performance-row small { color: var(--muted); font-weight: 500; }.team-card-link { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--green); font-size: 11px; font-weight: 800; text-decoration: none; }
.team-performance-table-wrap { overflow-x: hidden; }.team-performance-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; }.team-performance-table th { padding: 0 8px 10px; color: var(--muted); font-size: 9px; text-align: left; overflow-wrap: anywhere; }.team-performance-table th:nth-child(1) { width: 38%; }.team-performance-table th:nth-child(2) { width: 15%; }.team-performance-table th:nth-child(3) { width: 14%; }.team-performance-table th:nth-child(4) { width: 16%; }.team-performance-table th:nth-child(5) { width: 17%; }.team-performance-table td { padding: 11px 8px; border-top: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; }.team-performance-table tbody tr { cursor: pointer; }.team-performance-table tbody tr:hover { background: #f7faf8; }.team-professional-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }.team-professional-cell > span:last-child { min-width: 0; }.team-professional-cell .pet-avatar { width: 32px; height: 32px; flex: 0 0 32px; font-size: 9px; }.team-professional-cell strong, .team-professional-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.team-professional-cell strong { font-size: 11px; }.team-professional-cell small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.team-distribution { display: grid; gap: 12px; min-height: 188px; }.team-distribution div { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; font-size: 11px; }.team-distribution b { font-size: 10px; }.team-distribution i { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 99px; background: #edf1ef; }.team-distribution i::after { content: ""; display: block; width: var(--value); height: 100%; border-radius: inherit; background: #44a77a; }
.team-donut-layout { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 188px; }.team-donut { display: grid; width: 128px; height: 128px; place-content: center; border-radius: 50%; background: radial-gradient(circle, #fff 0 45%, transparent 46%), conic-gradient(var(--donut)); text-align: center; }.team-donut strong { font: 800 27px "Montserrat"; }.team-donut small { color: var(--muted); font-size: 10px; }.team-donut-legend { display: grid; gap: 11px; }.team-donut-legend span { position: relative; display: flex; justify-content: space-between; gap: 8px; padding-left: 13px; font-size: 10px; }.team-donut-legend span::before { content: ""; position: absolute; left: 0; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }.team-donut-legend em { color: var(--muted); font-style: normal; }
.team-line-chart { min-height: 188px; padding-top: 8px; border-bottom: 1px solid var(--line); }.team-line-chart svg { display: block; width: 100%; height: 155px; overflow: visible; }.team-line-chart polyline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.team-line-capacity { stroke: #39a478; }.team-line-demand { stroke: #4c85df; }.team-line-chart > div { display: flex; justify-content: space-between; gap: 4px; }.team-line-chart small { color: var(--muted); font-size: 9px; }
.team-capacity-chart { display: flex; align-items: end; justify-content: space-between; gap: 9px; min-height: 188px; padding: 10px 2px 0; border-bottom: 1px solid var(--line); }.team-capacity-chart > div { display: grid; grid-template-rows: 155px auto; gap: 7px; flex: 1; text-align: center; }.team-capacity-chart i { position: relative; display: block; overflow: hidden; border-radius: 7px 7px 0 0; background: linear-gradient(to top, #e7f2eb var(--capacity), transparent var(--capacity)); }.team-capacity-chart i::after { content: ""; position: absolute; right: 20%; bottom: 0; left: 20%; height: var(--demand); border-radius: 6px 6px 0 0; background: #4c85df; }.team-capacity-chart small { color: var(--muted); font-size: 9px; }.team-chart-legend { display: flex; gap: 12px; margin: 10px 0; color: var(--muted); font-size: 9px; }.team-chart-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #44a77a; }.team-chart-legend span:last-child::before { background: #4c85df; }
.team-insights { display: grid; gap: 8px; }.team-insights a { display: flex; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 9px; color: var(--ink); background: #f8faf8; font-size: 11px; text-decoration: none; }.team-insights b { flex: 0 0 auto; color: var(--green); font-size: 10px; }.team-overview-note { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; padding: 12px; border: 1px solid #cde5d8; border-radius: 10px; color: #426653; background: #f0faf3; font-size: 10px; }.team-overview-note .ui-icon { width: 16px; }
.metric-card { position: relative; overflow: hidden; display: grid; min-width: 0; min-height: 154px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.metric-card.metric-link { cursor: pointer; }
.metric-card.metric-link:hover { border-color: #c9d8cd; box-shadow: var(--shadow); transform: translateY(-1px); }
.metric-card .metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #edf3ee; color: var(--green); }
.metric-card .metric-icon .ui-icon, .plan-summary-card .metric-icon .ui-icon { width: 20px; height: 20px; }
.metric-card small { display: block; margin-top: 18px; color: var(--muted); font-weight: 600; }
.metric-card strong { display: block; min-width: 0; margin-top: 5px; font: 800 clamp(22px, 1.9vw, 25px)/1.1 "Montserrat"; overflow-wrap: anywhere; }
.metric-card .trend { display: block; align-self: end; min-width: 0; margin-top: 10px; color: var(--green-2); font-size: 11px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.metric-card[data-risk-card="expense"] { border-color: #efc5bf; background: #fff1ef; }
.metric-card[data-risk-card="expense"] .metric-icon { color: #a74740; background: #fae6e3; }
.metric-card[data-risk-card="expense"] .trend { color: #a74740; }
.dashboard-section-title { padding: 18px 20px 0; font: 900 13px "Montserrat"; text-transform: uppercase; letter-spacing: .02em; }
.day-overview-panel { margin-bottom: 18px; }
.day-overview-grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px 20px 20px; }
.day-card {
  position: relative; display: grid; align-content: start; gap: 10px; min-width: 0; min-height: 168px; padding: 18px;
  border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; text-align: left;
}
.day-card:hover { border-color: #cbd9cf; box-shadow: var(--shadow); transform: translateY(-1px); }
.day-card .metric-icon { width: var(--icon-badge-size); height: var(--icon-badge-size); display: grid; place-items: center; border-radius: var(--icon-badge-radius); background: #edf3ee; color: var(--green); font-style: normal; }
.ui-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.whatsapp-icon { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; }
.icon-tone-green { color: #177552 !important; background: #e5f4ea !important; }
.icon-tone-orange { color: #d76a2c !important; background: #fff0e2 !important; }
.icon-tone-violet { color: #7c3bb8 !important; background: #f1e6fa !important; }
.icon-tone-red { color: #cf4c4c !important; background: #ffe7e7 !important; }
.icon-tone-pink { color: #c84d7b !important; background: #fde8f0 !important; }
.icon-tone-blue { color: #1763a6 !important; background: #e4f1ff !important; }
/* Paleta global: ícones decorativos repetem a mesma cor em todas as telas. */
:is(.metric-icon, .dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .relationship-history-event > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i) > .icon-kind-paw { color: #2673a1; }
:is(.metric-icon, .dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .relationship-history-event > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i) > :is(.icon-kind-calendar, .icon-kind-calendarDays, .icon-kind-clock) { color: #b56624; }
:is(.metric-icon, .dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .relationship-history-event > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i) > :is(.icon-kind-users, .icon-kind-user, .icon-kind-userSearch) { color: #21806a; }
:is(.metric-icon, .dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .relationship-history-event > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i) > .icon-kind-gift { color: #b75263; }
:is(.metric-icon, .dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .relationship-history-event > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i) > .icon-kind-message { color: #5754b8; }
:is(.metric-icon, .dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .relationship-history-event > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i) > .icon-kind-sparkles { color: #b66b16; }
:is(.metric-icon, .dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .relationship-history-event > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i) > .icon-kind-star { color: #aa7809; }
:is(.metric-icon, .dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .relationship-history-event > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i) > :is(.icon-kind-navigation, .icon-kind-mapPin) { color: #315d78; }
:is(.metric-icon, .dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .relationship-history-event > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i) > :is(.icon-kind-chart, .icon-kind-trendingUp, .icon-kind-target) { color: #286fc2; }
:is(.metric-icon, .dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .relationship-history-event > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i) > .icon-kind-rotateCcw { color: #6d5ab3; }
:is(.metric-icon, .dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .relationship-history-event > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i) > :is(.icon-kind-dollar, .icon-kind-receipt, .icon-kind-cart) { color: #a56a14; }
:is(.dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i):has(> .icon-kind-paw) { background: #e5f1ff; }
:is(.dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i):has(> :is(.icon-kind-calendar, .icon-kind-calendarDays, .icon-kind-clock)) { background: #fff0df; }
:is(.dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i):has(> :is(.icon-kind-users, .icon-kind-user, .icon-kind-userSearch)) { background: #e3f5ef; }
:is(.dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i):has(> .icon-kind-gift) { background: #fdecef; }
:is(.dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i):has(> .icon-kind-message) { background: #eeecff; }
:is(.dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i):has(> .icon-kind-sparkles) { background: #fff4cf; }
:is(.dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i):has(> .icon-kind-star) { background: #fff4cf; }
:is(.dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i):has(> :is(.icon-kind-navigation, .icon-kind-mapPin)) { background: #e6f0f5; }
:is(.dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i):has(> :is(.icon-kind-chart, .icon-kind-trendingUp, .icon-kind-target)) { background: #e5efff; }
:is(.dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i):has(> .icon-kind-rotateCcw) { background: #efecfa; }
:is(.dashboard-icon-badge, .employee-center-card-icon, .employee-form-section > header > i, .segment-info > i, .segment-metrics article > i, .segment-guide > i, .crm-campaign-panel > i, .crm-insight-panel > i, .agenda-insight-panel > i, .appointment-summary-person .metric-icon, .plan-summary-card .metric-icon, .empty-state > i):has(> :is(.icon-kind-dollar, .icon-kind-receipt, .icon-kind-cart)) { background: #fff1c9; }
.segment-info > i:has(> .icon-kind-users) { color: #a56a14; background: #fff1c9; }
/* Métricas reutilizadas nas demais páginas seguem a mesma paleta, exceto tons de status explícitos. */
.metric-icon:not([class*="icon-tone"]):has(> .icon-kind-paw) { color: #2673a1; background: #e5f1ff; }
.metric-icon:not([class*="icon-tone"]):has(> :is(.icon-kind-calendar, .icon-kind-calendarDays, .icon-kind-clock)) { color: #b56624; background: #fff0df; }
.metric-icon:not([class*="icon-tone"]):has(> :is(.icon-kind-users, .icon-kind-user, .icon-kind-userSearch)) { color: #21806a; background: #e3f5ef; }
.metric-icon:not([class*="icon-tone"]):has(> .icon-kind-gift) { color: #b75263; background: #fdecef; }
.metric-icon:not([class*="icon-tone"]):has(> .icon-kind-message) { color: #5754b8; background: #eeecff; }
.metric-icon:not([class*="icon-tone"]):has(> .icon-kind-sparkles) { color: #b66b16; background: #fff4cf; }
.metric-icon:not([class*="icon-tone"]):has(> .icon-kind-star) { color: #aa7809; background: #fff4cf; }
.metric-icon:not([class*="icon-tone"]):has(> :is(.icon-kind-navigation, .icon-kind-mapPin)) { color: #315d78; background: #e6f0f5; }
.metric-icon:not([class*="icon-tone"]):has(> :is(.icon-kind-chart, .icon-kind-trendingUp, .icon-kind-target)) { color: #286fc2; background: #e5efff; }
.metric-icon:not([class*="icon-tone"]):has(> .icon-kind-rotateCcw) { color: #6d5ab3; background: #efecfa; }
.metric-icon:not([class*="icon-tone"]):has(> :is(.icon-kind-dollar, .icon-kind-receipt, .icon-kind-cart)) { color: #a56a14; background: #fff1c9; }
.metric-card[data-risk-card="expense"] .metric-icon { color: #a74740; background: #fae6e3; }
.day-card small { color: var(--muted); font-weight: 800; }
.day-card strong { display: flex; align-items: baseline; gap: 6px; min-width: 0; font: 900 28px/1.05 "Montserrat"; overflow-wrap: anywhere; }
.day-card strong span { font: 800 12px "Montserrat"; }
.day-card em { align-self: end; color: var(--green-2); font-style: normal; font-size: 11px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.day-card-wide { padding-right: 132px; }
.day-card-statuses { display: flex; flex-wrap: wrap; gap: 10px 14px; color: #53645b; font-size: 11px; font-weight: 800; }
.day-card-statuses span { display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.dot-green { background: var(--green-2); }
.dot-purple { background: #8062c7; }
.dot-yellow { background: #f1ac25; }
.dot-red { background: #ef4c4c; }
.occupancy-ring {
  position: absolute; right: 20px; top: 50%; width: 88px; height: 88px; display: grid; place-items: center;
  border-radius: 50%; transform: translateY(-50%);
  background: conic-gradient(from -90deg, var(--green) 0 var(--occupancy), #e5ebe6 var(--occupancy) 100%);
  box-shadow: 0 0 0 1px rgba(16, 83, 63, .04);
}
.occupancy-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.occupancy-ring-copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; text-align: center; }
.occupancy-ring-copy b { font: 900 22px/1 "Montserrat"; }
.occupancy-ring-copy small { color: var(--muted); font-size: 9px; font-weight: 800; line-height: 1; }
.dashboard-grid-today { grid-template-columns: 1.1fr .9fr; }
.today-timeline { display: grid; padding: 8px 20px 14px; }
.today-timeline-row { position: relative; display: grid; grid-template-columns: 14px 64px 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #f0f1ed; }
.today-timeline-row:last-child { border-bottom: 0; }
.today-timeline-row::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: #dce7df; transform: translateX(-50%); }
.today-timeline-row:first-child::before { top: 50%; }
.today-timeline-row:last-child::before { bottom: 50%; }
.timeline-dot { position: relative; z-index: 1; justify-self: center; width: 10px; height: 10px; border-radius: 999px; background: var(--green-2); }
.status-line-pending .timeline-dot { background: #f1ac25; }
.status-line-cancelled .timeline-dot, .status-line-no_show .timeline-dot { background: #ef4c4c; }
.today-timeline-row > strong { font: 900 14px "Montserrat"; }
.today-timeline-row b, .today-timeline-row small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-timeline-row small { color: var(--muted); }
.action-panel { background: linear-gradient(135deg, #fff, #fff5f4); }
.action-list { display: grid; gap: 0; padding: 10px 16px 16px; }
.action-list button { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border: 0; border-bottom: 1px solid #f0e5e3; color: var(--ink); background: transparent; text-align: left; }
.action-list button:last-child { border-bottom: 0; }
.dashboard-icon-badge { width: var(--icon-badge-size); height: var(--icon-badge-size); display: grid; place-items: center; border-radius: var(--icon-badge-radius); color: var(--green); background: #e8f3ec; font-style: normal; }
.action-list strong, .action-list small { display: block; }
.action-list small { color: var(--muted); }
.action-list b { color: var(--muted); font-size: 18px; }
.dashboard-grid-bottom { grid-template-columns: 1.05fr .95fr; }
.opportunity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px 20px 20px; }
.opportunity-grid article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; min-width: 0; padding: 14px; border-radius: 14px; background: #f6fbf7; }
.opportunity-grid strong, .opportunity-grid small { display: block; }
.opportunity-grid small { margin: 5px 0 12px; color: var(--muted); }
.opportunity-grid .button { padding: 8px 12px; font-size: 12px; }
.daily-tip-panel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 18px; padding: 18px 22px;
  border: 1px solid #cfe2f5; border-radius: 16px; color: #144e86; background: #edf7ff;
}
.daily-tip-panel strong { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.daily-tip-panel strong .dashboard-icon-badge { width: 34px; height: 34px; }
.daily-tip-panel span { min-width: 0; color: #315a7d; }
.daily-tip-panel a { color: #144e86; font-weight: 900; text-decoration: none; }
.goal-panel { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 20px; }
.goal-panel strong { font: 900 18px "Montserrat"; }
.goal-panel p { margin: 6px 0 0; }
.goal-form { display: flex; align-items: end; gap: 10px; }
.goal-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.goal-form input { min-width: 190px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; }
.point-integration-panel { align-items: center; border-color: #d7e5dc; background: #fbfefc; }
.point-integration-panel > div { min-width: 0; }
.integration-status { display: inline-flex; margin-bottom: 8px; padding: 4px 8px; border-radius: 8px; color: #865f18; background: #fff2c7; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.integration-status.connected { color: var(--green); background: #dff1e5; }
.point-payment-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; border: 1px solid #cee0d4; border-radius: 14px; background: #f5fbf7; }
.point-payment-fields > div { grid-column: 1 / -1; }
.point-payment-fields strong, .point-payment-fields small { display: block; }
.point-payment-fields small { margin-top: 3px; color: var(--muted); }
.point-connection-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.point-connection-facts span { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fafbf8; }
.point-connection-facts small, .point-connection-facts strong { display: block; }
.point-connection-facts small { color: var(--muted); }
.plan-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.plan-summary-card { display: grid; gap: 9px; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.plan-summary-card .metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #edf3ee; color: var(--green); }
.plan-summary-card small { color: var(--muted); font-size: 12px; font-weight: 700; }
.plan-summary-card strong { color: var(--ink); font: 800 18px "Montserrat"; line-height: 1.15; overflow-wrap: anywhere; }
.plan-summary-card span { color: var(--green-2); font-size: 11px; font-weight: 800; line-height: 1.2; }
.plan-payment-card .plan-payment-ending { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.plan-payment-card .plan-payment-price { margin-top: 2px; color: var(--green-2); }
.plan-modal-card .plan-summary-grid { gap: 12px; margin-top: 14px; }
.plan-modal-card .plan-summary-card { gap: 7px; padding: 14px 18px; border-radius: 16px; }
.plan-benefits-panel { margin-top: 14px; }
.plan-modal-card .plan-benefits-panel .data-table td { padding: 12px 18px; }
.plan-modal-card .plan-benefits-panel .data-table td:last-child { width: 134px; padding-left: 8px; text-align: right; vertical-align: middle; }
.plan-modal-card .modal-actions { margin-top: 14px; padding-top: 14px; }
.plan-feature-status { min-width: 92px; justify-content: center; white-space: nowrap; }
.plan-feature-status.included { color: #2b7658; background: #e5f2e9; }
.plan-feature-status.excluded { color: #68746d; background: #eef0ed; }
.plan-change-notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border: 1px solid #b9dce3; border-radius: 12px; color: #315d78; background: #f1f9fb; }
.plan-change-notice > .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.plan-change-notice strong, .plan-change-notice span { display: block; }
.plan-change-notice span { font-size: 11px; }
.plan-cancellation-notice { border-color: #efcfca; color: #873d35; background: #fff5f3; }
.plan-cancellation-summary { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 16px; border: 1px solid #efcfca; border-radius: 14px; background: #fff8f6; }
.plan-cancellation-summary > .ui-icon { width: 22px; height: 22px; flex: 0 0 22px; color: #a5483e; }
.plan-cancellation-summary strong, .plan-cancellation-summary span { display: block; }
.plan-cancellation-summary strong { color: var(--ink); font-size: 13px; }
.plan-cancellation-summary span { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.account-billing-panel { margin-top: 18px; }
.account-billing-panel .panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.account-billing-content { padding: 16px 22px 18px; }
.account-billing-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.account-billing-details > span { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: #fafcfb; }
.account-billing-details small { color: var(--muted); font-size: 11px; font-weight: 700; }
.account-billing-details strong { color: var(--ink); font: 800 14px "Montserrat"; }
.account-billing-details .billing-ending { color: #a5483e; }
.account-billing-message { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 13px 14px; border-radius: 12px; }
.account-billing-message.ending { border: 1px solid #efcfca; color: #873d35; background: #fff5f3; }
.account-billing-message > .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.account-billing-message strong, .account-billing-message span { display: block; }
.account-billing-message span { font-size: 11px; }
.account-billing-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

/* Configurações: navegação local e agrupamento por contexto. */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.settings-sidebar { position: sticky; top: 98px; display: grid; gap: 14px; min-width: 0; }
.settings-nav { display: grid; gap: 4px; padding: 8px; border: 1px solid rgba(11,45,77,.09); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 28px rgba(11,45,77,.045); }
.settings-nav button { display: grid; width: 100%; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 10px; color: #5e7180; background: transparent; text-align: left; cursor: pointer; transition: color .18s, background .18s; }
.settings-nav button:hover, .settings-nav button:focus-visible { color: var(--brand-dark); background: #eaf8f6; outline: 0; }
.settings-nav button > .ui-icon { width: 18px; height: 18px; justify-self: center; color: var(--brand-secondary); }
.settings-nav button span, .settings-nav button strong, .settings-nav button small { display: block; min-width: 0; }
.settings-nav button strong { color: inherit; font-size: 12px; }
.settings-nav button small { margin-top: 2px; color: #81909b; font-size: 10px; }
.settings-plan-summary { display: grid; gap: 4px; padding: 16px; border-radius: 13px; color: #d8e9ef; background: linear-gradient(145deg, var(--brand-dark), #124a61); }
.settings-plan-summary small { color: #9fc2ce; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.settings-plan-summary strong { color: #fff; font: 800 16px "Montserrat"; }
.settings-plan-summary span { font-size: 11px; line-height: 1.4; }
.settings-content { display: grid; gap: 18px; min-width: 0; }
.settings-section, .settings-table-panel { scroll-margin-top: 98px; }
.settings-section { min-width: 0; }
.settings-section-header { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.settings-section-header > i { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 11px; color: var(--brand-secondary); background: #e7f6f4; font-style: normal; }
.settings-section-header > i .ui-icon { width: 19px; height: 19px; }
.settings-section-header h2 { margin: 0; color: var(--brand-dark); font: 800 16px "Montserrat"; }
.settings-section-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.settings-form { padding: 0 22px 22px; }
.settings-identity-card { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 13px; margin: 22px 0 4px; padding: 14px; border: 1px solid #dce8e4; border-radius: 13px; background: #f7fbf9; }
.settings-company-avatar { display: grid; width: 54px; height: 54px; place-items: center; overflow: hidden; border-radius: 14px; color: var(--green); background: var(--mint); font: 800 15px "Montserrat"; }
.settings-company-avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.settings-identity-card strong, .settings-identity-card small { display: block; }
.settings-identity-card strong { color: var(--brand-dark); font: 800 14px "Montserrat"; }
.settings-identity-card small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.settings-fieldset { min-width: 0; margin: 22px 0 0; padding: 22px 0 0; border: 0; border-top: 1px solid #e8eeeb; }
.settings-fieldset legend { padding: 0 10px 0 0; color: var(--brand-dark); font: 800 12px "Montserrat"; letter-spacing: .025em; text-transform: uppercase; }
.settings-form-grid { margin-top: 2px; }
.settings-form-grid label { min-width: 0; }
.settings-form-grid label > small { display: block; margin-top: 5px; line-height: 1.4; }
.settings-address-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-street-field { grid-column: span 2; }
.settings-three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-check-card { display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 14px; border: 1px solid #dce6e2; border-radius: 12px; background: #fafcfb; cursor: pointer; }
.settings-check-card:has(input:checked) { border-color: #91c6b1; background: #f0f8f3; }
.settings-check-card input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 17px; margin: 2px 0 0; padding: 0; accent-color: var(--green); }
.settings-check-card span, .settings-check-card strong, .settings-check-card small { display: block; min-width: 0; }
.settings-check-card strong { color: var(--ink); font-size: 12px; }
.settings-check-card small { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; }
.settings-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e8eeeb; }
.settings-form-actions > span { color: var(--muted); font-size: 11px; }
.settings-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; scroll-margin-top: 98px; }
.settings-account-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 20px 22px; }
.settings-account-card strong, .settings-account-card small { display: block; }
.settings-account-card strong { color: var(--ink); font-size: 12px; }
.settings-account-card small { margin-top: 3px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.settings-compact-form { display: grid; gap: 12px; padding: 18px 22px 20px; }
.settings-verification { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 10px; color: #785912; background: #fff7df; }
.settings-verification strong, .settings-verification small { display: block; }
.settings-verification strong { font-size: 11px; }
.settings-verification small { margin-top: 2px; font-size: 10px; }
.settings-inline-action { display: flex; justify-content: flex-end; }
.settings-section.account-billing-panel { margin-top: 0; }
.settings-users-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 20px 22px; }
.settings-user-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fafcfb; }
.settings-subsection { padding: 20px 22px 22px; border-top: 1px solid var(--line); }
.settings-subsection-heading h3 { margin: 0; color: var(--brand-dark); font: 800 14px "Montserrat"; }
.settings-subsection-heading p { margin: 4px 0 14px; color: var(--muted); font-size: 11px; }
.settings-profile-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-profile-form { margin-top: 16px; padding-top: 16px; }
.settings-agenda-form { padding: 0 22px 22px; }
.settings-agenda-form > .form-stack { gap: 14px; margin-top: 0; padding-top: 18px; }
.settings-agenda-form > .form-stack > p { margin: 0; }
.settings-table-panel { overflow-x: auto; }

@media (max-width: 1180px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-sidebar { position: static; }
  .settings-nav { display: flex; overflow-x: auto; padding: 7px; scrollbar-width: none; }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav button { width: auto; min-width: max-content; grid-template-columns: 26px auto; padding: 9px 12px; }
  .settings-nav button small { display: none; }
  .settings-plan-summary { display: none; }
}

@media (max-width: 760px) {
  .settings-card-grid, .settings-users-list, .settings-profile-list { grid-template-columns: 1fr; }
  .settings-three-columns, .settings-address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-street-field { grid-column: auto; }
  .settings-account-card { grid-template-columns: 40px minmax(0, 1fr); }
  .settings-account-card .button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 560px) {
  .settings-section-header, .settings-form, .settings-account-card, .settings-compact-form, .settings-users-list, .settings-subsection, .settings-agenda-form { padding-right: 16px; padding-left: 16px; }
  .settings-form-grid, .settings-three-columns, .settings-address-grid { grid-template-columns: 1fr; }
  .settings-form-grid > .span-2, .settings-street-field { grid-column: auto; }
  .settings-identity-card { grid-template-columns: 46px minmax(0, 1fr); }
  .settings-company-avatar { width: 46px; height: 46px; }
  .settings-identity-card .button { grid-column: 1 / -1; width: 100%; }
  .settings-form-actions, .settings-verification { align-items: stretch; flex-direction: column; }
  .settings-form-actions .button, .settings-verification .button, .settings-inline-action .button { width: 100%; }
  .settings-inline-action { display: block; }
}
.unit-row-inactive { background: #f8faf9; }
.unit-row-inactive > td:not(:last-child) { opacity: .65; }
.unit-row-actions { display: flex; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.unit-row-actions .button { min-height: 38px; padding: 8px 14px; }
@media (max-width: 620px) {
  .account-billing-details { grid-template-columns: 1fr; }
  .account-billing-actions { align-items: stretch; flex-direction: column; }
  .account-billing-actions .button { width: 100%; }
}
.plan-change-options { display: grid; gap: 10px; margin-top: 20px; }
.plan-change-option { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #fff; cursor: pointer; }
.plan-change-option:has(input:checked) { border-color: var(--brand-primary); background: #f1fbf9; box-shadow: 0 0 0 2px rgba(15,179,158,.11); }
.plan-change-option > input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--brand-primary); }
.plan-change-option > span { min-width: 0; }
.plan-change-option span > small, .plan-change-option span > strong, .plan-change-option span > em { display: block; }
.plan-change-option span > small { color: var(--green-2); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.plan-change-option span > strong { margin-top: 2px; color: var(--ink); font: 800 15px "Montserrat"; }
.plan-change-option span > em { margin-top: 2px; color: var(--muted); font-size: 10px; font-style: normal; font-weight: 500; }
.plan-change-option > b { color: var(--ink); font: 800 15px "Montserrat"; white-space: nowrap; }
.plan-change-option > b small { color: var(--muted); font-size: 9px; }
.plan-change-impact { display: grid; gap: 3px; margin-top: 12px; padding: 13px 14px; border-radius: 11px; color: #315d78; background: #f1f6f8; }
.plan-change-impact strong { font-size: 12px; }
.plan-change-impact span { color: var(--muted); font-size: 11px; }
.dashboard-grid { display: grid; grid-template-columns: 1.45fr .8fr; gap: 18px; margin-top: 18px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 0 rgba(0,0,0,.01); overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0; font: 700 16px "Montserrat"; }
.panel-header a, .text-button { color: var(--green-2); border: 0; background: transparent; text-decoration: none; font-weight: 700; font-size: 12px; }
.appointment-list { display: grid; }
.appointment-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 16px; padding: 17px 22px; border-bottom: 1px solid #f0f1ed; }
.appointment-row:last-child { border: 0; }
.appointment-time { font: 700 15px "Montserrat"; }
.appointment-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pet-avatar { width: 40px; height: 40px; aspect-ratio: 1; box-sizing: border-box; flex: 0 0 40px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: var(--mint); color: var(--green); font-weight: 800; line-height: 1; }
.pet-photo-button { padding: 0; border: 0; font-size: 18px; cursor: pointer; }
.pet-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; }
.detail-list { display: grid; margin-top: 22px; }
.detail-row {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  min-width: 0;
  padding: 17px 22px;
  border-bottom: 1px solid #f0f1ed;
}
.detail-row:last-child { border-bottom: 0; }
.detail-row > strong { color: var(--ink); font: 800 14px "Montserrat"; white-space: nowrap; }
.detail-row > small { color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.detail-row .status, .detail-meta { justify-self: end; }
.detail-row-supplier-product { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 14px; }
.detail-row-supplier-product > strong { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.detail-row-supplier-product > small { grid-column: 1; }
.detail-row-supplier-product > .icon-button { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.detail-meta { font: 800 14px "Montserrat"; }
.detail-row-profile { grid-template-columns: 64px minmax(0, 1fr) auto; }
.detail-profile-copy { min-width: 0; }
.detail-profile-copy strong, .detail-profile-copy small { display: block; }
.detail-profile-copy strong { color: var(--ink); font: 800 14px "Montserrat"; }
.detail-profile-copy small { margin-top: 4px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.filter-summary {
  margin: -8px 0 18px; padding: 10px 14px; border: 1px solid #cfe0d4; border-radius: 12px;
  color: var(--green); background: #edf5ef; font-weight: 700;
}
.appointment-main strong, .appointment-main small { display: block; }
.appointment-main small { color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 12px; font-size: 10px; font-weight: 700; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-confirmed { color: #684ba9; background: #efe9fb; }
.status-completed, .status-active, .status-enabled { color: #2b7658; background: #e5f2e9; }
.status-pending { color: #8a6618; background: #fff3cf; }
.status-cancelled, .status-failed, .status-inactive, .status-disabled { color: #a74740; background: #fae6e3; }
.status-in_progress, .status-open { color: #3971a1; background: #e5eff8; }
.status-read { color: #68746d; background: #eef0ed; }
.status-unread { color: #2b7658; background: #e5f2e9; }
.notification-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.notification-type-grid.single { grid-template-columns: minmax(0, 1fr); }
.notification-type-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.notification-type-card.internal { border-left: 5px solid var(--green); }
.notification-type-card.client { border-left: 5px solid var(--yellow); }
.notification-type-card.active { box-shadow: 0 0 0 2px rgba(16, 83, 63, .12); }
.notification-type-card h2 { margin: 0 0 8px; font: 800 18px "Montserrat"; }
.notification-type-card p { margin: 0 0 14px; color: var(--muted); }
.notification-type-card strong { font: 800 26px "Montserrat"; }
.notification-type-card small { color: var(--muted); font-size: 12px; }
.notification-toolbar-copy { display: block; margin-top: 3px; }
.notification-unread-row { background: #f7fbf8; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 20px; }
.quick-action { min-height: 106px; padding: 16px; border: 0; border-radius: 15px; color: var(--ink); text-align: left; }
.quick-action.quick-pet { background: #e9f5ee; }
.quick-action.quick-sale { background: #e9eef8; }
.quick-action.quick-product { background: #fff2c8; }
.quick-action.quick-service { background: #f4e8f7; }
.quick-action i { display: block; margin-bottom: 18px; font-style: normal; }
.quick-action i .ui-icon { width: 25px; height: 25px; }
.quick-pet i { color: #177552; }
.quick-sale i { color: #175da4; }
.quick-product i { color: #c96a16; }
.quick-service i { color: #7c3bb8; }
.quick-action strong { font-size: 12px; }
.insight-card { margin: 0 20px 20px; padding: 18px; border-radius: 15px; color: #fff; background: var(--yellow); }
.insight-card.stock-alert { color: #9a2f28; background: #ffe8e5; border: 1px solid #f2b8b1; }
.insight-card small { color: inherit; opacity: .78; }
.insight-card strong { display: block; margin: 8px 0 3px; font: 700 18px "Montserrat"; }

.table-panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.unit-metrics { margin-bottom: 18px; }
.unit-table-panel td:first-child strong, .unit-table-panel td:first-child small { display: block; }
.unit-table-panel td:first-child small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.unit-table-panel td:last-child { width: 130px; text-align: right; }
.supplier-list-controls { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(180px, 260px) auto; gap: 12px; align-items: end; margin: -6px 0 14px; }
.supplier-list-controls .client-search-field { max-width: none; }
.supplier-order-field { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.supplier-order-field select { min-height: 42px; }
.supplier-filter-panel { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)) auto; gap: 12px; align-items: end; margin: 0 0 12px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--content-subtle); }
.supplier-filter-panel label { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 800; }
.supplier-filter-panel select { min-height: 40px; }
.product-list-controls { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(180px, 260px) auto; gap: 12px; align-items: end; margin: -6px 0 14px; }
.product-list-controls .client-search-field { max-width: none; }
.product-filter-panel { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)) auto; gap: 12px; align-items: end; margin: 0 0 12px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--content-subtle); }
.product-filter-panel label { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 800; }
.product-filter-panel select { min-height: 40px; }
.product-stock strong, .product-stock small { display: block; }
.product-stock .product-in-use { margin: 3px 0; color: #2774a9; font-weight: 800; }
.product-usage { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; color: #2b7658; background: #e5f2e9; font-size: 10px; font-weight: 800; white-space: nowrap; }
.product-usage.operational { color: #3971a1; background: #e5eff8; }
.product-usage.sale_and_operational { color: #684ba9; background: #efe9fb; }
.product-usage .ui-icon { width: 14px; height: 14px; }
.movement-list-controls { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(190px, 260px) auto; gap: 12px; align-items: end; margin: -6px 0 14px; }
.movement-list-controls .client-search-field { max-width: none; }
.movement-filter-panel { display: flex; gap: 10px; align-items: end; overflow-x: auto; margin: 0 0 14px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--content-subtle); }
.movement-filter-panel label { display: grid; flex: 0 0 145px; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.movement-filter-panel label:nth-child(2) { flex-basis: 170px; }
.movement-filter-panel select { min-height: 40px; min-width: 0; }
.movement-filter-panel .button { flex: none; min-height: 40px; white-space: nowrap; }
.movement-clear { flex: none; padding: 8px 2px; border: 0; color: var(--green); background: transparent; font: 800 11px "Montserrat"; white-space: nowrap; cursor: pointer; }
.movement-table td > small, .movement-table td > strong { display: block; }
.movement-type { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.movement-type::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.movement-type.in { color: #2b7658; background: #e5f2e9; }
.movement-type.out { color: #b5443f; background: #fae6e3; }
.movement-type.operational { color: #3971a1; background: #e5eff8; }
.movement-type.adjustment { color: #9b6811; background: #fff3dc; }
.movement-quantity { white-space: nowrap; }
.movement-quantity.positive { color: #27805a; }
.movement-quantity.negative { color: #cf3931; }
.movement-user { display: flex; align-items: center; gap: 7px; min-width: 120px; font-size: 11px; font-weight: 700; }
.movement-user span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #4d5b54; background: #edf0ed; font-size: 9px; }
.movement-page-size { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.movement-page-size select { width: 66px; min-height: 34px; }
.supplier-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.supplier-filter-chips button { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 5px 10px; border: 0; border-radius: 999px; color: var(--green); background: #e8f2eb; font: 700 11px "Montserrat"; cursor: pointer; }
.supplier-filter-chips .ui-icon { width: 13px; height: 13px; }
.supplier-filter-chips .supplier-clear-all { padding: 5px 2px; color: var(--green); background: transparent; }
.supplier-avatar { color: var(--green); background: linear-gradient(135deg, #dceee4, #c5e0d1); }
.supplier-categories { display: flex; flex-wrap: wrap; gap: 6px; }
.supplier-categories span { padding: 5px 9px; border-radius: 999px; color: #466359; background: #eaf2eb; font-size: 10px; font-weight: 800; white-space: nowrap; }
.supplier-categories span:nth-child(2) { color: #38647f; background: #e6f0f8; }
.supplier-categories .supplier-category-more { color: var(--ink); background: #f3f4f2; }
.supplier-products-link { padding: 0; border: 0; color: var(--green); background: transparent; font: 800 12px "Montserrat"; cursor: pointer; }
.supplier-actions { min-width: 190px; }
.supplier-start-options { display: grid; gap: 10px; margin-top: 22px; }
.supplier-start-options button { display: grid; grid-template-columns: 36px 1fr; gap: 2px 12px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.supplier-start-options button:hover { border-color: #9cc8ad; background: #f7fbf8; }
.supplier-start-options .ui-icon { grid-row: span 2; align-self: center; width: 21px; height: 21px; color: var(--green); }
.supplier-start-options strong { font: 800 13px "Montserrat"; }
.supplier-start-options small { color: var(--muted); line-height: 1.4; }
.modal-card.client-create-modal-card:has(.supplier-form) { width: min(1120px, 100%); padding: 22px; }
.modal-card.client-create-modal-card:has(.product-create-form) { width: min(1040px, 100%); padding: 24px; overflow-x: hidden; }
.product-create-form { display: grid; gap: 14px; }
.product-form-section { padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.product-form-section h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 15px; font: 800 15px "Montserrat"; }
.product-form-section h3 .ui-icon { width: 20px; color: var(--green); }
.product-form-section h3 b { color: var(--danger); }
.product-form-section h3 small { color: var(--muted); font: 700 12px "Montserrat"; }
.product-form-section > p { margin: -7px 0 15px; color: var(--muted); font-size: 12px; }
.product-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 20px; }
.product-form-grid label { display: grid; gap: 7px; color: #435047; font-size: 12px; font-weight: 800; }
.product-form-grid label > small { color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.4; }
.product-usage-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.product-usage-option { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; min-height: 132px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.product-usage-option:hover { border-color: #8cbba0; background: #fbfdfb; }
.product-usage-option.selected { border: 2px solid var(--green); padding: 14px; background: #fcfffc; box-shadow: 0 0 0 2px rgba(31, 103, 75, .06); }
.product-usage-option i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #287351; background: #e9f4ed; }
.product-usage-option:nth-child(2) i { color: #3971a1; background: #e9f1fa; }
.product-usage-option:nth-child(3) i { color: #684ba9; background: #f1ecfb; }
.product-usage-option i .ui-icon { width: 22px; height: 22px; }
.product-usage-option span { display: grid; align-content: center; gap: 5px; }
.product-usage-option strong { font: 800 13px "Montserrat"; }
.product-usage-option small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.product-form-note, .product-form-success { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 11px 13px; border-radius: 9px; color: #396e9e; background: #eaf3fb; font-size: 11px; font-weight: 700; }
.product-form-success { color: #3f7657; background: #eef7f0; }
.product-form-note .ui-icon, .product-form-success .ui-icon { width: 18px; flex: none; }
.product-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; }
.supplier-product-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.product-form-actions { position: sticky; z-index: 2; bottom: -24px; margin: 0 -24px -24px; padding: 16px 24px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); }
.supplier-form-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.supplier-form-header h2 { margin: 0 0 5px; }
.supplier-form-header p, .supplier-form-section > p { margin: 0; color: var(--muted); font-size: 13px; }
.supplier-form { display: grid; gap: 10px; }
.supplier-form-section { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.supplier-form-section h3 { margin: 0 0 6px; font: 800 14px "Montserrat"; }
.supplier-form-section h3 small { color: var(--muted); font: 700 12px "Montserrat"; }
.supplier-form .form-grid { margin-top: 16px; }
.supplier-origin-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.supplier-origin-options button { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; min-height: 94px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.supplier-origin-options button.active { border-color: #559578; background: #f7fbf8; box-shadow: inset 0 0 0 1px rgba(54,122,88,.14); }
.supplier-origin-options i { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 9px; color: var(--green); background: #e9f4ed; }
.supplier-origin-options button:nth-child(2) i { color: #b56d16; background: #fff0df; }
.supplier-origin-options button:nth-child(3) i { color: #7253a4; background: #f0ebfa; }
.supplier-origin-options i .ui-icon { width: 21px; height: 21px; }
.supplier-origin-options span { display: grid; align-content: center; gap: 5px; }
.supplier-origin-options strong { font: 800 13px "Montserrat"; }
.supplier-origin-options small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.supplier-origin-options b { width: 18px; height: 18px; border: 1px solid #cad1cd; border-radius: 50%; }
.supplier-origin-options .active b { border: 5px solid #438a69; }
.supplier-origin-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfa; }
.supplier-origin-input label { display: grid; gap: 6px; color: #526158; font-size: 11px; font-weight: 800; }
.supplier-origin-input small { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.supplier-origin-input small .ui-icon { width: 15px; height: 15px; color: var(--green); }
.supplier-enrichment-feedback { display: grid; gap: 7px; margin-top: 10px; padding: 12px 14px; border: 1px solid #cfe2d6; border-radius: 10px; color: #315f49; background: #f0f8f3; }
.supplier-enrichment-feedback > div { display: flex; align-items: flex-start; gap: 9px; }
.supplier-enrichment-feedback .ui-icon { width: 18px; height: 18px; margin-top: 1px; }
.supplier-enrichment-feedback strong, .supplier-enrichment-feedback small { display: block; }
.supplier-enrichment-feedback strong { font: 800 11px "Montserrat"; }
.supplier-enrichment-feedback small { margin-top: 3px; color: #607269; font-size: 10px; line-height: 1.45; }
.supplier-enrichment-feedback p { margin: 0 0 0 27px; color: #8a6818; font-size: 10px; }
.supplier-enrichment-feedback.confidence-low { border-color: #ead9ad; color: #8a6818; background: #fff9e9; }
.supplier-address-grid { grid-template-columns: .7fr auto 1.45fr 1.45fr; }
.supplier-address-grid .supplier-cep-action { width: 110px; }
.supplier-address-grid .supplier-cep-action .button { min-height: 42px; padding: 8px 10px; white-space: nowrap; }
.supplier-categories-input { display: grid; gap: 8px; padding: 0; border: 0; }
.supplier-categories-input legend { margin-bottom: 7px; color: #526158; font-size: 11px; font-weight: 800; }
.supplier-categories-input > div { display: flex; flex-wrap: wrap; gap: 7px; }
.supplier-categories-input label { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font-size: 11px; }
.supplier-categories-input input { accent-color: var(--green); }
.supplier-form-footer { position: sticky; z-index: 2; bottom: -22px; display: flex; justify-content: flex-end; gap: 10px; margin: 0 -22px -22px; padding: 15px 22px; border-top: 1px solid var(--line); background: rgba(255,255,255,.97); }
.table-toolbar { padding: 15px 18px; display: flex; gap: 10px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.package-toolbar-heading { display: grid; gap: 4px; }
.package-toolbar-heading small { display: block; }
.table-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.table-toolbar-actions .button { white-space: nowrap; }
.table-toolbar input { max-width: 330px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 12px 18px; border-bottom: 1px solid var(--brand-border); color: var(--brand-muted); background: #f8fbfc; text-align: left; text-transform: uppercase; letter-spacing: .07em; font-size: 9px; }
.data-table td { padding: 15px 18px; border-top: 1px solid var(--brand-border); vertical-align: middle; }
.data-table tbody tr:hover { background: #f4fbfb; }
.clinic-index-panel { margin-top: 18px; overflow: hidden; }
.clinical-center { display: grid; gap: 16px; max-width: 1480px; margin: 0 auto; }
.clinical-center-header { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.clinical-center-title { display: flex; align-items: center; gap: 14px; min-width: 270px; }
.clinical-center-title > i { width: 48px; height: 48px; display: grid; flex: 0 0 48px; place-items: center; color: var(--green); }
.clinical-center-title > i .ui-icon { width: 42px; height: 42px; }
.clinical-center-title h1 { margin: 0; font: 800 25px "Montserrat"; }
.clinical-center-title p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.clinical-center-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.clinical-new-action { min-height: 44px; padding-inline: 14px; border-color: currentColor; background: #fff; white-space: nowrap; }
.clinical-new-action:first-child { color: #fff; border-color: var(--green); background: var(--green); }
.clinical-new-return { color: #168e84; }.clinical-new-emergency { color: #d85058; }.clinical-new-hospitalization { color: #7851bd; }.clinical-new-other { color: #40556b; }
.clinical-center-filters { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.clinical-center-search { display: flex; min-height: 46px; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; }
.clinical-center-search .ui-icon { width: 18px; color: #315678; }
.clinical-center-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; }
.clinical-center-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(145px, 1fr)) auto; align-items: end; gap: 10px; margin-top: 10px; }
.clinical-center-filter-grid label, .clinical-custom-period label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 800; }
.clinical-center-filter-grid select, .clinical-custom-period input { min-height: 40px; }
.clinical-custom-period { display: flex; gap: 10px; margin-top: 10px; }
.clinical-center-list { overflow: hidden; }
.clinical-center-list .table-toolbar strong { display: flex; align-items: center; gap: 9px; font: 800 15px "Montserrat"; }
.clinical-center-list .table-toolbar .ui-icon { width: 19px; color: var(--green); }
.clinical-center-table td > small, .clinical-center-table td > strong { display: block; }
.clinical-center-table td > small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.clinical-type-badge { width: max-content; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.clinical-type-badge .ui-icon { width: 14px; height: 14px; }
.clinical-type-consultation { color: #177660; background: #e2f5ee; }.clinical-type-return { color: #2979bf; background: #e5f2fb; }.clinical-type-emergency { color: #cb414c; background: #fde8ea; }.clinical-type-hospitalization { color: #7044ad; background: #f0e9fb; }.clinical-type-other { color: #40566c; background: #eef2f5; }
.clinical-row-actions { display: flex; justify-content: flex-end; gap: 4px; }
.clinical-record-patient { display: flex; align-items: center; gap: 11px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.clinical-record-patient > .pet-avatar { width: 44px; height: 44px; flex: 0 0 44px; }
.clinical-record-patient > span:last-child, .clinical-record-patient strong, .clinical-record-patient small, .clinical-records-table td > small, .clinical-records-table td > strong { display: block; }
.clinical-record-patient small, .clinical-records-table td > small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 500; }
.clinical-record-patient:hover > span:last-child > strong { color: var(--green); text-decoration: underline; }
.clinical-record-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.clinical-record-status > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.clinical-record-status-active { color: #177660; background: #e2f5ee; }
.clinical-record-status-no-attendance { color: #a67716; background: #fff6dc; }
.clinical-record-status-inactive { color: #c7444e; background: #fde8ea; }
.clinical-records-table td:last-child .icon-button { display: inline-flex; align-items: center; gap: 3px; color: var(--green); }
.clinical-records-table td:last-child .icon-button .ui-icon { width: 16px; }
@media (max-width: 700px) {
  .clinical-records-list .client-table-scroll { overflow: visible; }
  .clinical-records-table { min-width: 0; }
  .clinical-records-table thead { display: none; }
  .clinical-records-table tbody { display: grid; gap: 12px; padding: 12px; }
  .clinical-records-table tr { display: grid; overflow: hidden; border: 1px solid var(--brand-border); border-radius: 12px; background: #fff; }
  .clinical-records-table td { min-width: 0; display: grid; grid-template-columns: minmax(112px, 38%) minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--brand-border); }
  .clinical-records-table td:first-child { display: block; border-top: 0; background: #f8fbfc; }
  .clinical-records-table td::before { content: attr(data-label); color: var(--brand-muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
  .clinical-records-table td:first-child::before { display: none; }
  .clinical-records-table td:last-child { display: flex; justify-content: space-between; }
  .clinical-records-table td:last-child .icon-button { margin-left: auto; }
  .clinical-record-patient { width: 100%; }
  .clinical-record-patient > span:last-child { min-width: 0; }
  .clinical-record-patient strong, .clinical-record-patient small { overflow-wrap: anywhere; }
}
.clinical-exam-form-section { margin: 14px 0; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.clinical-exam-form-section h3 { margin: 0; font: 800 16px "Montserrat"; }
.clinical-exam-form-section > p { margin: 4px 0 13px; color: var(--muted); font-size: 11px; }
.clinical-exam-context { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #eef8f4; }
.clinical-exam-context strong, .clinical-exam-context small { display: block; }
.clinical-exam-context small { color: var(--muted); line-height: 1.5; }
.clinical-exam-context .text-button { margin-left: auto; white-space: nowrap; }
.clinic-overview { display: grid; gap: 16px; max-width: 1500px; margin: 0 auto; }
.clinic-overview-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.clinic-overview-header h1 { margin: 0; font: 800 25px "Montserrat"; }
.clinic-overview-header p, .clinic-overview-panel header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.clinic-overview-header label { display: grid; min-width: 180px; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 800; }
.clinic-overview-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.clinic-overview-kpi { display: grid; grid-template-columns: 46px 1fr 18px; align-items: start; gap: 12px; min-height: 125px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 8px 25px rgba(20,55,75,.04); }
.clinic-overview-kpi:hover { border-color: #a9d9cb; transform: translateY(-1px); }
.clinic-overview-kpi > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--green); background: #e6f7f1; }
.clinic-overview-kpi > i .ui-icon { width: 23px; }
.clinic-overview-kpi span > * { display: block; }.clinic-overview-kpi small { min-height: 30px; font-weight: 800; }.clinic-overview-kpi strong { margin: 7px 0 4px; font: 800 28px "Montserrat"; }.clinic-overview-kpi em { color: var(--muted); font-size: 10px; font-style: normal; }
.clinic-overview-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; }
.clinic-overview-panel { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 8px 25px rgba(20,55,75,.035); }
.clinic-overview-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }.clinic-overview-panel h2 { margin: 0; font: 800 15px "Montserrat"; }.clinic-overview-panel header select { width: auto; min-width: 110px; min-height: 35px; padding: 6px 9px; }
.clinic-overview-panel > .text-button { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.clinic-overview-wide { grid-column: span 1; }
.clinic-overview-bars { height: 185px; display: flex; align-items: end; gap: 4px; padding-top: 10px; border-bottom: 1px solid var(--line); }
.clinic-overview-bars > div { height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 5px; min-width: 0; }.clinic-overview-bars i { width: min(14px, 80%); min-height: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(#38ae89, #78ceb4); cursor: default; }.clinic-overview-bars small { min-height: 11px; color: var(--muted); font-size: 8px; line-height: 1; white-space: nowrap; }
.clinic-overview-distribution { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 16px; min-height: 185px; }.clinic-overview-donut { width: 126px; height: 126px; display: grid; place-items: center; border-radius: 50%; }.clinic-overview-donut::before { content: ""; grid-area: 1/1; width: 76px; height: 76px; border-radius: 50%; background: #fff; }.clinic-overview-donut span { z-index: 1; grid-area: 1/1; text-align: center; }.clinic-overview-donut strong, .clinic-overview-donut small { display: block; }.clinic-overview-donut strong { font: 800 22px "Montserrat"; }.clinic-overview-donut small { color: var(--muted); font-size: 9px; }
.clinic-overview-legend { display: grid; gap: 8px; }.clinic-overview-legend > div { display: grid; grid-template-columns: 8px 1fr auto auto; align-items: center; gap: 7px; font-size: 9px; }.clinic-overview-legend i { width: 8px; height: 8px; border-radius: 50%; }.clinic-overview-legend small { color: var(--muted); }
.clinic-overview-horizontal-bars { display: grid; align-content: center; gap: 13px; min-height: 185px; }.clinic-overview-horizontal-bars > div { display: grid; grid-template-columns: minmax(100px, 1fr) 1.6fr 22px; align-items: center; gap: 8px; font-size: 9px; }.clinic-overview-horizontal-bars i { height: 10px; overflow: hidden; border-radius: 4px; background: #eef3f3; }.clinic-overview-horizontal-bars b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b8e3d5, #27a67e); }
.clinic-overview-activity { grid-column: span 2; }.clinic-overview-activity > button:not(.text-button), .clinic-overview-returns > button:not(.text-button) { width: 100%; display: grid; grid-template-columns: 34px 1fr auto 16px; align-items: center; gap: 10px; padding: 9px 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }.clinic-overview-activity > button > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--green); background: #e8f6f1; }.clinic-overview-activity span > *, .clinic-overview-returns span > * { display: block; }.clinic-overview-activity small, .clinic-overview-returns small, .clinic-overview-activity time { color: var(--muted); font-size: 9px; }
.clinic-overview-returns > button:not(.text-button) { grid-template-columns: 36px 1fr auto auto; }.clinic-overview-returns .pet-avatar { width: 34px; height: 34px; font-size: 10px; }.clinic-overview-returns em { color: var(--muted); font-size: 9px; font-style: normal; }
@media (max-width: 1150px) { .clinic-overview-kpis { grid-template-columns: repeat(2, 1fr); }.clinic-overview-grid { grid-template-columns: repeat(2, 1fr); }.clinic-overview-activity { grid-column: span 1; } }
@media (max-width: 700px) { .clinic-overview-header { align-items: stretch; flex-direction: column; }.clinic-overview-kpis, .clinic-overview-grid { grid-template-columns: 1fr; }.clinic-overview-distribution { grid-template-columns: 1fr; justify-items: center; } }
.clinical-form-context { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; background: #eef8f4; }
.clinical-form-context > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.75); }
.clinical-form-context strong, .clinical-form-context small { display: block; }.clinical-form-context small { margin-top: 3px; color: var(--muted); }
@media (max-width: 1080px) {
  .clinical-center-header { align-items: flex-start; flex-direction: column; }
  .clinical-center-actions { justify-content: flex-start; }
  .clinical-center-filter-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 640px) {
  .clinical-center-actions, .clinical-center-actions .button { width: 100%; }
  .clinical-center-actions .button { justify-content: flex-start; }
  .clinical-center-filter-grid { grid-template-columns: 1fr; }
  .clinical-custom-period { display: grid; grid-template-columns: 1fr; }
  .clinical-prescription-row { align-items: flex-start; flex-direction: column; }
  .clinic-document-template-settings > div { grid-template-columns: 1fr; }
}
.clinic-table-toolbar { display: flex; align-items: end; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--brand-border); background: #f8fbfc; }
.clinic-table-toolbar .relationship-search { width: min(420px, 100%); min-height: 42px; }
.clinic-status-filter { min-width: 170px; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.clinic-status-filter select { min-height: 42px; padding: 8px 10px; }
.clinic-table-toolbar > .button { min-height: 42px; margin-left: auto; }
.clinic-list-pagination { border-top: 1px solid var(--line); }
.clinic-clickable-row { cursor: pointer; transition: background .16s, box-shadow .16s; }
.clinic-clickable-row:hover { background: #f3f8f4 !important; box-shadow: inset 3px 0 0 var(--green); }
.clinic-clickable-row:focus-visible { outline: 2px solid var(--green-2); outline-offset: -2px; background: #f3f8f4; }
.clinic-clickable-row > td:last-child { width: 54px; color: var(--green); text-align: right; }
.clinic-clickable-row > td:last-child > .ui-icon { width: 17px; }
.clinic-patient-link { display: grid; gap: 2px; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: left; }
.clinic-patient-link:hover strong { color: var(--green); text-decoration: underline; }
.clinic-patient-link small { color: var(--muted); font-weight: 500; }
.clinic-metrics .metric-card.metric-link { appearance: none; color: var(--ink); text-align: left; font: inherit; }
.clinic-metrics .metric-card.metric-link > .ui-icon { width: 38px; height: 38px; padding: 9px; border-radius: 12px; color: var(--green); background: #edf3ee; }
.clinic-metrics .metric-card.metric-link > span:last-child { align-self: end; margin-top: 10px; color: var(--green-2); font-size: 11px; font-weight: 700; }
.clinical-patient-summary { display: grid; grid-template-columns: auto minmax(220px, 1fr) repeat(3, minmax(120px, auto)); align-items: center; gap: 18px; margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.clinical-patient-summary > .pet-avatar { width: 48px; height: 48px; font-size: 14px; }
.clinical-patient-summary strong, .clinical-patient-summary span, .clinical-patient-summary small { display: block; }
.clinical-patient-summary > div:nth-child(2) > strong { font: 800 18px "Montserrat"; }
.clinical-patient-summary span, .clinical-patient-summary small { color: var(--muted); font-size: 11px; }
.clinical-patient-summary > div:not(:nth-child(2)) > strong { margin-top: 3px; font-size: 12px; }
.clinical-vitals { margin-bottom: 18px; padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.clinical-vitals header h2 { margin: 0; font: 800 16px "Montserrat"; }
.clinical-vitals header p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.clinical-vitals > div { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
.clinical-vitals > div > span { padding: 12px; border-radius: 10px; background: #f5f8f5; }
.clinical-vitals small, .clinical-vitals strong { display: block; }
.clinical-vitals small { color: var(--muted); font-size: 10px; text-transform: capitalize; }
.clinical-vitals strong { margin-top: 4px; font: 800 14px "Montserrat"; }
.clinical-detail-grid, .clinical-linked-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.clinical-detail-section { min-height: 160px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.clinical-detail-section header { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.clinical-detail-section header i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--green); background: #eaf4ed; }
.clinical-detail-section header i .ui-icon { width: 16px; }
.clinical-detail-section h2 { margin: 0; font: 800 14px "Montserrat"; }
.clinical-detail-section > div { color: #3f4d45; line-height: 1.65; white-space: pre-wrap; }
.clinical-linked-grid > .table-panel { min-width: 0; overflow: hidden; }
.clinical-linked-list { display: grid; }
.clinical-linked-list > button, .clinical-linked-list > a { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; padding: 13px 16px; border: 0; border-top: 1px solid var(--line); color: var(--ink); background: #fff; text-align: left; text-decoration: none; }
.clinical-linked-list > button:hover, .clinical-linked-list > a:hover { background: #f5faf6; }
.clinical-linked-list strong, .clinical-linked-list small { display: block; }
.clinical-linked-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.clinical-linked-list .ui-icon { width: 15px; color: var(--green); }
.clinical-attachment-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 9px; padding: 14px 16px; border-top: 1px solid var(--line); background: #fbfcfa; }
.clinical-attachment-form label { gap: 5px; font-size: 10px; }
.clinical-attachment-form input { min-height: 40px; padding: 8px 10px; }
.clinical-audit-panel { overflow: hidden; }
.clinical-audit-timeline { display: grid; padding: 8px 20px 18px; }
.clinical-audit-timeline article { display: grid; grid-template-columns: 16px 1fr; gap: 10px; padding: 11px 0; }
.clinical-audit-timeline article i { position: relative; width: 9px; height: 9px; margin-top: 5px; border: 2px solid #fff; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px #b8d3c2; }
.clinical-audit-timeline strong, .clinical-audit-timeline span, .clinical-audit-timeline small { display: block; }
.clinical-audit-timeline span, .clinical-audit-timeline small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.clinical-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.clinical-modal-grid > div { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafcf9; }
.clinical-modal-grid small, .clinical-modal-grid strong { display: block; }
.clinical-modal-grid small { color: var(--muted); font-size: 10px; text-transform: capitalize; }
.clinical-modal-grid strong { margin-top: 4px; overflow-wrap: anywhere; }
.clinical-modal-content { margin-top: 16px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; }
.clinical-modal-content h3 { margin: 0 0 9px; font: 800 13px "Montserrat"; }
.clinical-modal-content p { margin: 0; line-height: 1.65; white-space: pre-wrap; }
.clinical-exam-detail-section { margin-top: 17px; padding-top: 17px; border-top: 1px solid #e4eaed; }
.clinical-exam-detail-section h3 { margin: 0 0 10px; color: #173b57; font: 800 12px "Montserrat"; letter-spacing: .02em; text-transform: uppercase; }
.clinical-exam-detail-copy { display: grid; gap: 4px; }
.clinical-exam-detail-copy strong { color: #173b57; font-size: 14px; }
.clinical-exam-detail-copy span { color: #647a8b; font-size: 12px; }
.clinical-exam-detail-section .clinical-modal-grid { margin-top: 0; }
.clinical-exam-detail-note { margin-top: 10px; padding: 11px 13px; border-radius: 9px; background: #f4f8f9; }
.clinical-exam-detail-note small { display: block; color: #657a8b; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.clinical-exam-detail-note p, .clinical-detail-text { margin: 5px 0 0; color: #29485d; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.clinical-exam-document-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px; border: 1px solid #d9e7e7; border-radius: 10px; background: #f7fcfb; }
.clinical-exam-document-row > span { display: flex; align-items: center; gap: 9px; color: #173b57; font-size: 12px; }
.clinical-exam-document-row > span .ui-icon { width: 18px; color: #078a76; }
.clinical-exam-document-row > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.clinical-exam-document-row .text-button { padding: 0; color: #087d72; font-size: 11px; }
.clinical-exam-tracking { display: grid; gap: 12px; margin: 0; padding: 2px 0 2px 4px; list-style: none; }
.clinical-exam-tracking li { position: relative; display: flex; align-items: flex-start; gap: 11px; min-height: 27px; color: #788a96; }
.clinical-exam-tracking li:not(:last-child)::before { position: absolute; top: 14px; left: 5px; width: 1px; height: 26px; content: ""; background: #d9e2e6; }
.clinical-exam-tracking i { position: relative; z-index: 1; width: 11px; height: 11px; flex: 0 0 11px; margin-top: 3px; border: 2px solid #aab9c2; border-radius: 50%; background: #fff; }
.clinical-exam-tracking li.complete { color: #173b57; }
.clinical-exam-tracking li.complete i { border-color: #0b9a83; background: #0b9a83; box-shadow: 0 0 0 3px #e4f7f1; }
.clinical-exam-tracking strong, .clinical-exam-tracking small { display: block; }
.clinical-exam-tracking strong { font-size: 12px; }
.clinical-exam-tracking small { margin-top: 2px; color: #718392; font-size: 10px; }

.clinical-record-page { max-width: 1480px; margin: 0 auto; color: #13334d; }
.record-search-shell { position: relative; z-index: 8; max-width: 700px; margin: -4px 0 22px; }
.clinic-record-list-search { margin-bottom: 18px; }
.clinical-vitals header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.clinical-encounter-attachments { overflow: hidden; }
.clinical-encounter-prescriptions { overflow: hidden; margin-bottom: 18px; }
.clinical-prescription-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-top: 1px solid var(--line); }
.clinical-prescription-row:first-child { border-top: 0; }
.clinical-prescription-row strong, .clinical-prescription-row small { display: block; }
.clinical-prescription-row small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.clinical-prescription-row > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.clinical-administration-list { width: 100%; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); list-style: none; display: grid; gap: 8px; }
.clinical-administration-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 10px; background: var(--surface-soft); }
.clinical-administration-list span:first-child { display: grid; gap: 2px; }
.clinical-administration-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.clinical-pdf-preview { display: block; width: min(860px, 82vw); height: min(680px, 68vh); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.modal-card.clinical-pdf-modal-card { width: min(1120px, calc(100vw - 40px)); max-height: calc(100vh - 28px); padding: 24px; }
.clinical-pdf-modal-card .clinical-pdf-preview { width: 100%; height: min(730px, calc(100vh - 220px)); min-height: 520px; border-radius: 10px; }
.clinic-document-template-settings { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.clinic-document-template-settings header h3 { margin: 0; font: 800 16px "Montserrat"; }
.clinic-document-template-settings header p { max-width: 920px; margin: 7px 0 15px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.clinic-document-template-settings header code { color: var(--green); }
.clinic-document-template-settings > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.clinic-document-template-settings label { display: grid; gap: 6px; font-size: 10px; font-weight: 800; }
.clinic-document-template-settings textarea { min-height: 130px; font-family: monospace; font-size: 11px; }
@media (max-width: 640px) {
  .clinical-prescription-row { align-items: flex-start; flex-direction: column; }
  .clinic-document-template-settings > div { grid-template-columns: 1fr; }
}
.record-search-shell > label { min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 1px solid #dce5ea; border-radius: 10px; background: #fff; box-shadow: 0 4px 16px rgba(10, 49, 73, .04); }
.record-search-shell .ui-icon { width: 18px; color: #244b69; }
.record-search-shell input { flex: 1; min-width: 0; border: 0; outline: 0; color: #26455d; background: transparent; font-size: 13px; }
.record-search-shell kbd { padding: 4px 7px; border: 1px solid #dde5e9; border-radius: 6px; color: #7b8c99; background: #f6f8f9; font: 600 10px "Montserrat"; }
.record-search-results { position: absolute; top: calc(100% + 8px); right: 0; left: 0; overflow: hidden; border: 1px solid #dce5ea; border-radius: 11px; background: #fff; box-shadow: 0 18px 45px rgba(9, 40, 63, .16); }
.record-search-results > button { width: 100%; display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; gap: 11px; padding: 10px 13px; border: 0; border-bottom: 1px solid #edf1f3; color: #16364f; background: #fff; text-align: left; cursor: pointer; }
.record-search-results > button:hover { background: #f1faf8; }
.record-search-results .pet-avatar { width: 38px; height: 38px; overflow: hidden; border-radius: 10px; }
.record-search-results .pet-avatar img { width: 100%; height: 100%; object-fit: cover; }
.record-search-results strong, .record-search-results small { display: block; }
.record-search-results small { margin-top: 3px; color: #708392; font-size: 10px; }
.record-search-results > p { margin: 0; padding: 18px; color: #718391; text-align: center; }
.record-topline { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.record-topline .module-breadcrumb { margin: 0; }
.record-topline > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.record-topline .button { min-height: 38px; padding: 0 12px; font-size: 10px; }
.record-patient-hero, .record-section, .record-accordions > details { border: 1px solid #dce5e9; background: #fff; box-shadow: 0 5px 18px rgba(14, 45, 68, .025); }
.record-patient-hero { display: grid; grid-template-columns: 176px minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: 206px; margin-bottom: 18px; padding: 20px; border-radius: 14px; }
.record-patient-photo { width: 176px; height: 166px; display: grid; overflow: hidden; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #48b59e, #0b766c); font: 800 34px "Montserrat"; }
.record-patient-photo img { width: 100%; height: 100%; object-fit: cover; }
.record-patient-copy > div { display: flex; align-items: center; gap: 10px; }
.record-patient-copy h1 { margin: 0; color: #0b3055; font: 800 clamp(27px, 3vw, 38px)/1.1 "Montserrat"; letter-spacing: -.035em; }
.record-sex { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #d95977; background: #fff0f4; }
.record-sex .ui-icon { width: 18px; }
.record-patient-copy > p { margin: 10px 0 18px; color: #5e7689; font-size: 14px; }
.record-patient-copy dl { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; }
.record-patient-copy dl > div { display: grid; grid-template-columns: auto auto; gap: 5px 8px; }
.record-patient-copy dt { display: inline-flex; align-items: center; gap: 6px; color: #708394; font-size: 11px; }
.record-patient-copy dt .ui-icon { width: 14px; color: #244b69; }
.record-patient-copy dd { margin: 0; color: #23465f; font-size: 12px; font-weight: 700; }
.record-patient-actions { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 2px 0; }
.record-patient-actions > div { display: flex; gap: 10px; }
.record-patient-actions code, .record-active-badge { padding: 9px 13px; border-radius: 8px; font: 800 12px "Montserrat"; }
.record-patient-actions code { color: #173f60; background: #edf4fa; }
.record-active-badge { color: #12816d; background: #e8f7f1; }
.record-patient-actions .button { min-height: 51px; padding: 0 22px; border-radius: 9px; box-shadow: 0 8px 18px rgba(18, 140, 117, .14); }
.record-section { margin-bottom: 18px; padding: 20px; border-radius: 14px; scroll-margin-top: 24px; }
.record-section > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.record-section > header > div:first-child, .record-accordions summary > span { display: flex; align-items: center; gap: 10px; }
.record-section > header i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #078877; background: #e8f7f4; }
.record-important > header i { color: #ef4a53; background: #fff0f1; }
.record-section > header i .ui-icon { width: 17px; }
.record-section h2 { margin: 0; color: #123653; font: 800 17px "Montserrat"; }
.record-section .text-button { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; text-decoration: none; }
.record-section .text-button .ui-icon { width: 14px; height: 14px; background: transparent; }
.record-alert-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; }
.record-alert-grid article { min-height: 118px; display: flex; align-items: flex-start; gap: 10px; padding: 15px 13px; border: 1px solid currentColor; border-radius: 10px; }
.record-alert-grid article > i { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 50%; color: inherit; background: rgba(255,255,255,.72); }
.record-alert-grid article > i .ui-icon { width: 17px; }
.record-alert-grid small, .record-alert-grid strong, .record-alert-grid em { display: block; }
.record-alert-grid small { min-height: 30px; color: #36536a; font-size: 10px; font-weight: 800; line-height: 1.35; }
.record-alert-grid strong { margin-top: 8px; color: #183a55; font: 800 12px/1.35 "Montserrat"; }
.record-alert-grid em { margin-top: 4px; color: #688092; font-size: 9px; font-style: normal; }
.record-alert-grid .tone-red { color: #d93647; background: #fff1f2; }
.record-alert-grid .tone-blue { color: #2576b8; background: #f0f7fd; }
.record-alert-grid .tone-orange { color: #dc9226; background: #fff8ed; }
.record-alert-grid .tone-purple { color: #8259bd; background: #f6f1fc; }
.record-alert-grid .tone-green { color: #12927c; background: #edf9f5; }
.record-alert-grid .tone-neutral { color: #315476; background: #f6f9fb; }
.record-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.record-summary-card { position: relative; min-height: 150px; padding: 15px 36px 15px 15px; border: 1px solid #dfe7eb; border-radius: 10px; background: linear-gradient(140deg, #fff, #fbfdfd); }
.record-summary-card header { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.record-summary-card header i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #078a76; background: #e9f7f3; }
.record-summary-card header .ui-icon { width: 16px; }
.record-summary-card header strong { color: #173b57; font-size: 11px; }
.record-summary-card ul { margin: 0; padding-left: 17px; color: #677b8c; font-size: 10px; line-height: 1.7; }
.record-summary-card p { margin: 4px 0; color: #657b8c; font-size: 10px; line-height: 1.5; }
.record-summary-card .record-ok { display: flex; align-items: center; gap: 5px; color: #109177; font-weight: 800; }
.record-summary-card .record-ok .ui-icon { width: 13px; }
.record-summary-card > small { position: absolute; right: 12px; bottom: 12px; left: 15px; color: #109177; font-size: 9px; font-weight: 800; }
.record-summary-card > button { position: absolute; right: 9px; bottom: 9px; width: 25px; height: 25px; display: grid; place-items: center; border: 0; color: #078a76; background: transparent; cursor: pointer; }
.record-summary-card > button .ui-icon { width: 15px; }
.record-history > header { align-items: center; }
.record-history-tools { display: flex; align-items: center; gap: 8px; }
.record-history-tools label { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #dce5e9; border-radius: 8px; }
.record-history-tools label .ui-icon { width: 14px; }
.record-history-tools input { width: 190px; border: 0; outline: 0; background: transparent; font-size: 11px; }
.record-history-tools select { min-height: 38px; padding: 0 30px 0 10px; border-color: #dce5e9; border-radius: 8px; font-size: 11px; }
.record-history-list { display: grid; gap: 8px; }
.record-history-list > article { min-height: 80px; display: grid; grid-template-columns: 60px 10px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 9px 13px 9px 8px; border: 1px solid #e1e8ec; border-radius: 10px; }
.record-history-list time { min-height: 61px; display: grid; place-content: center; border-radius: 8px; color: #173b5d; background: #f2f6f9; text-align: center; }
.record-history-list time strong, .record-history-list time span, .record-history-list time small { display: block; }
.record-history-list time strong { font: 800 18px/1 "Montserrat"; }
.record-history-list time span { margin-top: 3px; font: 800 9px "Montserrat"; }
.record-history-list time small { margin-top: 2px; color: #738493; font-size: 8px; }
.record-history-list > article > i { width: 9px; height: 9px; border-radius: 50%; background: #0daf8f; }
.record-history-list > article > div > strong { color: #143b5d; font: 800 12px "Montserrat"; }
.record-history-list p, .record-history-list > article > div > small { margin: 3px 0 0; color: #667e90; font-size: 10px; }
.record-history-list .button { min-height: 36px; padding: 0 11px; font-size: 9px; }
.record-history-list .button .ui-icon { width: 13px; }
.record-accordions { display: grid; gap: 9px; }
.record-accordions > details { overflow: hidden; border-radius: 11px; scroll-margin-top: 24px; }
.record-accordions summary { min-height: 58px; display: grid; grid-template-columns: 1fr auto 20px; align-items: center; gap: 12px; padding: 0 18px; list-style: none; cursor: pointer; }
.record-accordions summary::-webkit-details-marker { display: none; }
.record-accordions summary i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #078a76; background: #e9f7f4; }
.record-accordions summary i .ui-icon { width: 16px; }
.record-accordions summary strong { color: #153956; font: 800 14px "Montserrat"; }
.record-accordions summary em { color: #768896; font-size: 10px; font-style: normal; }
.record-accordions summary > .ui-icon { width: 15px; transition: transform .2s; }
.record-accordions details[open] summary > .ui-icon { transform: rotate(180deg); }
.record-accordions details[open] summary { border-bottom: 1px solid #e4eaed; }
.record-encounter-modal { margin-top: 18px; }
.record-patient-primary-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.record-alert-grid .record-important-card { position: relative; width: 100%; min-height: 126px; display: flex; align-items: flex-start; gap: 10px; padding: 15px 30px 15px 13px; border: 1px solid currentColor; border-radius: 10px; font: inherit; text-align: left; }
button.record-important-card { cursor: pointer; }
button.record-important-card:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(16, 53, 75, .08); }
.record-important-card > i:first-child { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 50%; color: inherit; background: rgba(255,255,255,.72); }
.record-important-card > i:first-child .ui-icon { width: 17px; }
.record-important-card > .ui-icon:last-child { position: absolute; right: 10px; top: 50%; width: 14px; transform: translateY(-50%); }
.record-timeline-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 0 14px; border: 1px solid #dce5e9; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(14,45,68,.025); }
.record-timeline-tabs { min-width: 0; display: flex; overflow-x: auto; gap: 20px; }
.record-timeline-tabs button { min-height: 56px; flex: 0 0 auto; padding: 0 2px; border: 0; border-bottom: 3px solid transparent; color: #4d6578; background: transparent; font: 700 10px "Montserrat"; cursor: pointer; }
.record-timeline-tabs button.active { color: #078a76; border-bottom-color: #10a58c; }
.record-timeline-search { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.record-timeline-search label { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #dce5e9; border-radius: 8px; }
.record-timeline-search label .ui-icon { width: 14px; }
.record-timeline-search input { width: 170px; border: 0; outline: 0; background: transparent; font-size: 11px; }
.record-timeline-search select { min-height: 38px; padding: 0 30px 0 10px; border-color: #dce5e9; border-radius: 8px; font-size: 10px; }
.record-history > header > div:first-child > span > p { margin: 4px 0 0; color: #718493; font-size: 10px; }
.record-history > header > small { color: #708391; font-size: 10px; font-weight: 700; }
.record-history-list > article { grid-template-columns: 64px 40px minmax(0, 1fr) auto 32px; }
.record-history-list > article > .record-event-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; }
.record-event-icon .ui-icon { width: 19px; }
.record-event-icon.tone-green { color: #078a76; background: #e6f7f2; }
.record-event-icon.tone-purple { color: #7750b4; background: #f2ecfb; }
.record-event-icon.tone-blue { color: #2878b7; background: #eaf4fc; }
.record-event-icon.tone-neutral { color: #4a657a; background: #eef3f6; }
.record-event-source { padding: 6px 9px; border-radius: 999px; color: #547085; background: #f0f5f7; font-size: 8px; font-weight: 800; white-space: nowrap; }
.record-history-list .icon-button { width: 30px; height: 30px; border: 0; background: transparent; }
.record-history-empty { padding: 10px 0; }

@media (max-width: 1280px) {
  .record-alert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .record-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .record-patient-hero { grid-template-columns: 120px 1fr; }
  .record-patient-photo { width: 120px; height: 120px; }
  .record-patient-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .record-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-timeline-controls { align-items: stretch; flex-direction: column; padding: 0 12px 12px; }
  .record-timeline-search { justify-content: flex-end; }
  .record-history-list > article { grid-template-columns: 52px 38px minmax(0, 1fr) 30px; }
  .record-history-list .record-event-source { grid-column: 3; justify-self: start; }
  .record-history-list .icon-button { grid-column: 4; grid-row: 1 / span 2; }
}
@media (max-width: 640px) {
  .record-topline, .record-section > header { align-items: stretch; flex-direction: column; }
  .record-topline > div { justify-content: flex-start; }
  .record-patient-hero { grid-template-columns: 88px 1fr; gap: 14px; padding: 14px; }
  .record-patient-photo { width: 88px; height: 88px; }
  .record-patient-copy h1 { font-size: 25px; }
  .record-patient-copy dl { display: grid; }
  .record-patient-actions { align-items: stretch; flex-direction: column; }
  .record-patient-primary-actions { display: grid; width: 100%; }
  .record-patient-actions .button { width: 100%; }
  .record-alert-grid, .record-summary-grid { grid-template-columns: 1fr; }
  .record-history-tools { align-items: stretch; flex-direction: column; }
  .record-history-tools input { width: 100%; }
  .record-timeline-search { align-items: stretch; flex-direction: column; }
  .record-timeline-search input { width: 100%; }
  .record-history-list > article { grid-template-columns: 50px 34px minmax(0, 1fr) 28px; gap: 9px; padding: 8px; }
  .record-event-source { white-space: normal; }
  .record-accordions summary { padding: 0 13px; }
}

/* Novo atendimento clínico: página dedicada */
.new-clinical-page { max-width: 1480px; margin: 0 auto; color: #112e46; }
.new-clinical-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.new-clinical-header h1 { margin: 0 0 8px; color: var(--brand-dark); font: 700 clamp(24px, 2.2vw, 32px)/1.2 "Montserrat"; letter-spacing: -.025em; }
.new-clinical-header p { margin: 0; color: #647789; font-size: 13px; }
.new-clinical-close { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 0; border-radius: 11px; color: #18364d; background: #f1f4f7; cursor: pointer; }
.new-clinical-close:hover { color: var(--brand-secondary); background: #e6f7f4; }
.new-clinical-close .ui-icon { width: 18px; }
.new-clinical-section { margin-bottom: 18px; padding: 21px 23px 22px; border: 1px solid #dce4e8; border-radius: 13px; background: #fff; box-shadow: 0 5px 18px rgba(11, 45, 77, .025); }
.new-clinical-section > header { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.new-clinical-section > header i { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 8px; color: #087d72; background: #e6f6f3; }
.new-clinical-section > header i .ui-icon { width: 16px; height: 16px; }
.new-clinical-section > header h2 { margin: 0; color: #17354d; font: 700 15px/1.3 "Montserrat"; }
.clinical-field { display: grid; align-content: start; gap: 8px; min-width: 0; color: #29465d; font-size: 11px; font-weight: 650; }
.clinical-field input, .clinical-field select, .clinical-field textarea { width: 100%; border-color: #d8e0e5; color: #263d4e; background: #fff; font-size: 13px; font-weight: 500; }
.clinical-field input, .clinical-field select { min-height: 48px; }
.clinical-field > small { min-height: 16px; padding-left: 2px; color: #708292; font-size: 11px; font-weight: 500; }
.new-clinical-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px 28px; }
.clinical-summary-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: -10px 0 17px; }
.clinical-summary-heading p { margin: 0; color: #738494; font-size: 11px; }
.clinical-summary-heading .button { min-height: 40px; padding: 0 14px; font-size: 11px; }
.clinical-summary-heading .ui-icon { width: 14px; }
.clinical-record-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.clinical-record-summary article { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; border: 1px solid #e0e6e9; border-radius: 10px; background: linear-gradient(110deg, #fff, #fbfcfc); }
.clinical-record-summary article > i { display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; border-radius: 50%; }
.clinical-record-summary article > i .ui-icon { width: 19px; }
.clinical-record-summary strong, .clinical-record-summary small { display: block; }
.clinical-record-summary strong { color: #263e52; font-size: 11px; }
.clinical-record-summary small { margin-top: 5px; color: #168272; font-size: 10px; line-height: 1.25; }
.clinical-record-summary .tone-green > i { color: #168272; background: #eaf7f2; }
.clinical-record-summary .tone-blue > i { color: #356f9d; background: #eef4fa; }
.clinical-record-summary .tone-purple > i { color: #6554a5; background: #f1effa; }
.clinical-record-summary .tone-orange > i { color: #9a681f; background: #fcf5e9; }
.clinical-anamnesis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 34px; }
.clinical-anamnesis-grid > div { display: grid; align-content: start; gap: 17px; }
.clinical-textarea-wrap { position: relative; display: block; }
.clinical-textarea-wrap textarea { display: block; min-height: 90px; padding: 13px 14px 27px; resize: vertical; line-height: 1.5; }
.clinical-char-count { position: absolute; right: 10px; bottom: 8px; color: #6f7e89; font-size: 10px; font-weight: 500; pointer-events: none; }
.clinical-change-field { display: flex; flex-wrap: wrap; gap: 18px; min-height: 58px; margin: 0; padding: 0; border: 0; }
.clinical-change-field legend { width: 100%; margin-bottom: 3px; color: #29465d; font-size: 11px; font-weight: 650; }
.clinical-change-field label { display: flex; align-items: center; gap: 8px; color: #425a6d; font-size: 12px; font-weight: 500; }
.clinical-change-field input { width: 17px; height: 17px; accent-color: var(--brand-secondary); }
.clinical-exam-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px 32px; }
.clinical-exam-grid h3 { margin: 0 0 15px; color: #40576a; font-size: 11px; }
.clinical-vital-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 22px; }
.clinical-assessment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 18px; }
.clinical-bottom-grid { display: grid; grid-template-columns: minmax(290px, .72fr) minmax(500px, 1.48fr); gap: 18px; }
.clinical-bottom-grid > .new-clinical-section { min-width: 0; }
.clinical-evaluation-section > .clinical-field + .clinical-field, .clinical-plan-grid .clinical-field + .clinical-field { margin-top: 15px; }
.clinical-plan-grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: 24px 32px; }
.clinical-evaluation-section .clinical-textarea-wrap textarea, .clinical-plan-section .clinical-textarea-wrap textarea { min-height: 85px; }
.clinical-inline-exam-request { margin-top: 22px; padding-top: 19px; border-top: 1px solid #e0e8ea; }
.clinical-exam-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.clinical-exam-toggle input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand-secondary); }
.clinical-exam-toggle span { display: grid; gap: 4px; }
.clinical-exam-toggle strong { color: #17354d; font-size: 13px; }
.clinical-exam-toggle small { color: #6b7d8c; font-size: 11px; line-height: 1.45; }
#clinical-inline-exams { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: end; gap: 12px; margin-top: 16px; }
.clinical-add-exam { min-height: 48px; white-space: nowrap; }
.clinical-inline-exam-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; min-height: 23px; }
.clinical-inline-exam-chips > small { color: #708292; font-size: 11px; }
.clinical-inline-exam-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px 7px 11px; border-radius: 999px; color: #126e63; background: #e5f6f2; font-size: 11px; font-weight: 650; }
.clinical-inline-exam-chip button { display: grid; width: 17px; height: 17px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: #126e63; background: #ccece5; cursor: pointer; }
.clinical-inline-exam-chip .ui-icon { width: 11px; }
.clinical-exam-request-confirmation { display: flex; gap: 15px; align-items: flex-start; padding: 18px; border-radius: 12px; color: #17354d; background: #edf9f6; }
.clinical-exam-request-confirmation > i { display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; border-radius: 50%; color: #087d72; background: #d4f1e9; }
.clinical-exam-request-confirmation .ui-icon { width: 20px; }
.clinical-exam-request-confirmation strong { display: block; font-size: 14px; }
.clinical-exam-request-confirmation p { margin: 6px 0 0; color: #587182; font-size: 12px; }
.clinical-exam-request-documents article { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid #e5ebed; }
.clinical-exam-request-documents article:last-child { border-bottom: 0; }
.clinical-exam-request-documents strong, .clinical-exam-request-documents small { display: block; }
.clinical-exam-request-documents small { margin-top: 4px; color: #708292; font-size: 11px; }
.clinical-exam-request-documents article > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.new-clinical-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 4px 0 0; }
.new-clinical-footer > p { display: flex; align-items: center; gap: 10px; margin: 0; color: #5c7182; font-size: 10px; line-height: 1.5; }
.new-clinical-footer > p .ui-icon { width: 20px; flex: 0 0 20px; color: #4d6c82; }
.new-clinical-footer > div { display: flex; justify-content: flex-end; gap: 18px; }
.new-clinical-footer .button { min-width: 150px; min-height: 44px; font-size: 11px; }
.new-clinical-footer .button-primary { min-width: 190px; }

@media (max-width: 1180px) {
  .clinical-record-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clinical-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .clinic-table-toolbar { align-items: stretch; flex-direction: column; }
  .clinic-table-toolbar .relationship-search, .clinic-status-filter { width: 100%; }
  .clinic-table-toolbar .relationship-search { flex: 0 0 auto; }
  .clinic-table-toolbar > .button { margin-left: 0; }
  .clinical-patient-summary { grid-template-columns: auto 1fr; }
  .clinical-patient-summary > div:nth-child(n+3) { padding-top: 10px; border-top: 1px solid var(--line); }
  .clinical-vitals > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clinical-detail-grid, .clinical-linked-grid { grid-template-columns: 1fr; }
  .clinical-attachment-form { grid-template-columns: 1fr; }
  .new-clinical-context-grid, .clinical-anamnesis-grid, .clinical-exam-grid, .clinical-plan-grid { grid-template-columns: 1fr; }
  #clinical-inline-exams { grid-template-columns: 1fr; }
  .clinical-record-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clinical-assessment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .new-clinical-footer { align-items: stretch; flex-direction: column; }
  .new-clinical-footer > div { width: 100%; flex-wrap: wrap; }
  .new-clinical-footer .button { flex: 1 1 160px; }
}
@media (max-width: 520px) {
  .clinical-patient-summary { gap: 12px; padding: 15px; }
  .clinical-vitals > div, .clinical-modal-grid { grid-template-columns: 1fr; }
  .clinical-exam-document-row { align-items: flex-start; flex-direction: column; }
  .clinical-exam-document-row > div { justify-content: flex-start; }
  .clinical-detail-section { min-height: 0; }
  .new-clinical-page { margin: -4px; }
  .new-clinical-header { margin-bottom: 17px; }
  .new-clinical-header h1 { font-size: 22px; }
  .new-clinical-section { padding: 17px 15px; }
  .clinical-record-summary, .clinical-vital-grid, .clinical-assessment-grid { grid-template-columns: 1fr; }
  .clinical-summary-heading { align-items: stretch; flex-direction: column; }
  .clinical-anamnesis-grid .span-2, .clinical-exam-grid .span-2 { grid-column: auto; }
  .new-clinical-footer > div { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .new-clinical-footer .button, .new-clinical-footer .button-primary { width: 100%; }
}
.primary-cell { display: flex; align-items: center; gap: 11px; }
.primary-cell strong, .primary-cell small { display: block; }
.primary-cell small { color: var(--muted); }
.cell-actions { display: flex; justify-content: flex-end; gap: 5px; }
.empty-state { padding: 64px 24px; text-align: center; color: var(--muted); }
.empty-state i { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 18px; background: var(--mint); color: var(--green); font-style: normal; font-size: 24px; }
.empty-state i .ui-icon { width: 25px; height: 25px; }
.empty-state h3 { margin: 0 0 6px; color: var(--ink); }
.filter-tabs { display: flex; gap: 6px; }
.filter-tabs button { border: 0; padding: 7px 11px; border-radius: 9px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }
.filter-tabs button.active { color: var(--green); background: #e8f0ea; }
.schedule-panel { margin-top: 18px; }
.agenda-period-control { display: flex; align-items: center; gap: 8px; }
.agenda-period-control strong { min-width: 150px; color: var(--ink); font-size: 13px; text-align: center; }
.agenda-overview-metrics { display: grid; grid-template-columns: 1.35fr 1.45fr repeat(3, minmax(150px, .72fr)); gap: 14px; margin-bottom: 16px; }
.agenda-overview-metrics > article { min-width: 0; min-height: 166px; padding: 18px; }
.agenda-overview-metrics .metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; }
.agenda-overview-metrics small, .agenda-overview-metrics em { display: block; }
.agenda-overview-metrics small { color: var(--ink); font-weight: 800; }
.agenda-overview-metrics em { margin-top: 2px; color: var(--muted); font-size: 10px; font-style: normal; }
.agenda-occupancy-card { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-content: start; gap: 10px; padding-right: 114px !important; }
.agenda-ring { right: 17px; width: 84px; height: 84px; }
.agenda-metric-delta { grid-column: 1 / -1; align-self: end; margin-top: auto; color: var(--green-2); font-size: 10px; }
.agenda-metric-delta.negative { color: var(--danger); }
.agenda-capacity-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-content: start; gap: 10px; }
.agenda-capacity-card > strong { grid-column: 1 / -1; font: 900 28px "Montserrat"; }
.capacity-track { grid-column: 1 / -1; height: 9px; display: flex; overflow: hidden; border-radius: 999px; background: #edf0ed; }
.capacity-track > * { display: block; flex: 0 0 var(--segment); height: 100%; }
.capacity-track > i { background: var(--green-2); }
.capacity-track > b { background: #a9d5b4; }
.capacity-track > em { background: #aeb7b1; }
.agenda-capacity-card p { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 0; color: var(--muted); font-size: 9px; font-weight: 700; }
.agenda-capacity-card p span { align-self: center; }
.dot-light-green { background: #a9d5b4; }
.dot-gray { background: #aeb7b1; }
.agenda-quality-card { display: grid; align-content: start; }
.agenda-quality-card > small { margin-top: 13px; }
.agenda-quality-card > strong { margin-top: 12px; font: 900 28px "Montserrat"; }
.agenda-quality-card > p { align-self: end; margin: 8px 0 0; color: var(--muted); font-size: 10px; }
.agenda-chart-grid { display: grid; grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.agenda-chart-card { min-width: 0; min-height: 250px; }
.agenda-chart-card .panel-header { padding: 17px 18px 10px; border-bottom: 0; }
.agenda-chart-card .panel-header small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.agenda-week-bars { height: 176px; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 9px; padding: 12px 18px 18px; }
.agenda-week-bars > div { height: 100%; display: grid; grid-template-rows: 18px minmax(70px, 1fr) 18px; align-items: end; gap: 5px; text-align: center; }
.agenda-week-bars b { color: var(--muted); font-size: 9px; }
.agenda-week-bars span { height: 100%; display: flex; align-items: end; overflow: hidden; border-radius: 5px 5px 2px 2px; background: #edf4ef; }
.agenda-week-bars i { width: 100%; height: var(--bar); min-height: 3px; border-radius: 5px 5px 2px 2px; background: var(--green-2); }
.agenda-week-bars small { color: var(--muted); font-size: 9px; font-weight: 800; }
.agenda-horizontal-bars { display: grid; gap: 13px; padding: 12px 18px 20px; }
.agenda-horizontal-row { display: grid; grid-template-columns: minmax(74px, 1fr) 1.6fr 34px; align-items: center; gap: 8px; min-width: 0; }
.agenda-horizontal-row > span { overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.agenda-horizontal-row > div { height: 7px; overflow: hidden; border-radius: 999px; background: #eef1ee; }
.agenda-horizontal-row i { display: block; width: var(--bar); height: 100%; border-radius: inherit; background: #8f6fc4; }
.agenda-horizontal-row b { color: var(--muted); font-size: 9px; text-align: right; }
.agenda-chart-empty { margin: 30px 18px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.agenda-management-grid { display: grid; grid-template-columns: 1.05fr 1.35fr 1fr; gap: 14px; }
.agenda-pending-list { display: grid; padding: 6px 16px 14px; }
.agenda-pending-list button { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.agenda-pending-list button:last-child { border-bottom: 0; }
.agenda-pending-list i, .agenda-opportunity-list i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; }
.agenda-pending-list strong, .agenda-pending-list small, .agenda-opportunity-list strong, .agenda-opportunity-list small { display: block; }
.agenda-pending-list small, .agenda-opportunity-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.agenda-pending-list > button > .ui-icon { width: 14px; height: 14px; color: var(--muted); }
.agenda-free-days-panel { display: flex; flex-direction: column; }
.agenda-free-days { display: flex; flex: 1; flex-wrap: wrap; align-content: stretch; gap: 8px; padding: 18px; }
.agenda-free-days a { display: grid; flex: 1 1 110px; align-content: center; gap: 5px; min-width: 0; padding: 13px 8px; border-radius: 10px; color: var(--ink); background: #f5f9f5; text-align: center; text-decoration: none; }
.agenda-free-days a:hover { background: #e7f2ea; }
.agenda-free-days strong { font-size: 10px; }
.agenda-free-days b { font: 900 18px "Montserrat"; }
.agenda-free-days small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.agenda-opportunity-list { display: grid; padding: 6px 17px 14px; }
.agenda-opportunity-list > div { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.agenda-opportunity-list > div:last-child { border-bottom: 0; }
.agenda-insight-panel { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 16px; padding: 16px 18px; border: 1px solid #cde5d8; border-radius: var(--radius); color: var(--green); background: #f0faf3; }
.agenda-insight-panel > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #e5f4ea; }
.agenda-insight-panel strong, .agenda-insight-panel span { display: block; }
.agenda-insight-panel span { margin-top: 3px; color: #557064; font-size: 11px; }
.agenda-insight-panel a { color: var(--green); font-size: 11px; font-weight: 800; text-decoration: none; }
.agenda-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin: 18px 18px 20px; padding: 0 4px; }
.agenda-legend-item { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.agenda-legend-filters { margin-left: auto; }
.legend-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--line); }
.legend-dot.available { box-sizing: border-box; background: #fff; border: 2px solid #c4cbc7; }
.legend-dot.confirmed { background: #8062c7; }
.legend-dot.in-progress { background: #8fc3ef; }
.legend-dot.pending { background: #f5bb2d; }
.legend-dot.cancelled { background: #efb0ab; }
.legend-dot.blocked { background: #9aa39e; }
.legend-dot.completed { background: #56ad7f; }
.schedule-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.schedule-toolbar.schedule-toolbar-filters { justify-content: flex-end; }
.schedule-toolbar h2 { margin: 0; font: 800 20px "Montserrat"; letter-spacing: -.03em; }
.schedule-toolbar p { margin: 6px 0 0; color: var(--muted); }
.schedule-filters { display: grid; grid-template-columns: 150px 230px 220px; gap: 10px; align-items: end; }
.schedule-filters label { gap: 6px; }
.schedule-filters input, .schedule-filters select { padding: 10px 11px; }
.schedule-multiselect { position: relative; display: grid; gap: 6px; min-width: 0; color: var(--ink); font-size: 12px; font-weight: 800; }
.schedule-multiselect details { position: relative; }
.schedule-multiselect summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; list-style: none; }
.schedule-multiselect summary::-webkit-details-marker { display: none; }
.schedule-multiselect summary svg { width: 16px; height: 16px; color: var(--muted); transition: transform .15s ease; }
.schedule-multiselect details[open] summary { border-color: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 14%, transparent); }
.schedule-multiselect details[open] summary svg { transform: rotate(180deg); }
.schedule-multiselect-options { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 260px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 10px 24px rgba(23, 48, 37, .14); }
.schedule-multiselect-options label { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border-radius: 7px; color: var(--ink); cursor: pointer; font-weight: 700; }
.schedule-multiselect-options label:hover { background: #eff7f1; }
.schedule-multiselect-options input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.schedule-board { padding: 18px; overflow-x: auto; }
.appointment-list-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 300px); gap: 16px; width: 100%; min-width: 0; align-items: start; }
.appointment-list-bulkbar, .appointment-list-table-wrap { grid-column: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.appointment-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; }
.appointment-list-period-summary { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.appointment-list-toolbar > div > strong, .appointment-list-toolbar > div > span { display: block; }
.appointment-list-toolbar > div > strong { font: 800 14px "Montserrat"; }
.appointment-list-toolbar > div > span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.appointment-list-bulkbar { display: flex; align-items: center; min-height: 68px; gap: 8px; margin-top: 0; padding: 10px 14px; }
.appointment-list-bulkbar label { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 12px; }
.appointment-list-bulkbar input, .list-selection-checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.appointment-list-bulkbar .button { min-height: 36px; padding: 7px 10px; font-size: 12px; }
.appointment-list-bulkbar .button .ui-icon { width: 15px; height: 15px; }
.appointment-list-table-wrap { overflow-x: auto; }
.appointment-list-table { min-width: 860px; }
.appointment-list-table td { vertical-align: middle; }
.appointment-list-table td > strong, .appointment-list-table td > small { display: block; }
.appointment-list-table td > small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.list-pet-cell { display: flex; align-items: center; gap: 9px; min-width: 190px; }
.list-pet-photo { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 11px; color: var(--green); background: #e1f0e5; font-size: 12px; font-weight: 800; }
.list-pet-photo img { width: 100%; height: 100%; object-fit: cover; }
.list-pet-cell > span:last-child { min-width: 0; }
.list-pet-cell > span:last-child strong, .list-pet-cell > span:last-child small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-pet-cell > span:last-child small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.table-empty { padding: 36px; color: var(--muted); text-align: center; }
.appointment-list-sidebar { grid-column: 2; grid-row: 1 / span 3; display: grid; min-width: 0; gap: 16px; }
.appointment-list-summary, .appointment-list-filters { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.appointment-list-summary h3 { margin: 0 0 2px; font: 800 15px "Montserrat"; }
.appointment-list-summary div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: #53645b; font-size: 12px; }
.appointment-list-summary b { color: var(--ink); }
.appointment-list-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.appointment-list-filter-heading h3 { margin: 0; font: 800 15px "Montserrat"; }
.appointment-list-filter-heading button { padding: 0; border: 0; color: var(--green); background: transparent; font: 700 11px "Montserrat"; cursor: pointer; }
.appointment-list-filters label { display: grid; gap: 6px; color: #53645b; font-size: 11px; font-weight: 700; }
.appointment-list-filters input, .appointment-list-filters select { min-height: 38px; padding: 8px 10px; font-size: 12px; }
.appointment-list-date-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.appointment-list-date-range input { width: 100%; min-width: 0; }
.schedule-column { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.schedule-column header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #fafaf7; border-bottom: 1px solid var(--line); }
.schedule-column header strong { font: 800 15px "Montserrat"; }
.schedule-column header small { color: var(--muted); white-space: nowrap; }
.schedule-lane { display: grid; gap: 8px; padding: 14px; }
.schedule-section-title { margin-top: 4px; color: #8b958f; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 800; }
.schedule-slot { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; }
.schedule-slot.occupied { color: #8a3d35; background: #fff0ee; border: 1px solid #efc5bf; }
.schedule-slot strong { font-size: 13px; }
.schedule-slot span, .schedule-empty { color: var(--muted); font-size: 12px; }
.available-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.available-grid button { border: 1px solid #cfe0d4; border-radius: 10px; padding: 9px 6px; color: var(--green); background: #f4faf5; font-weight: 800; }
.available-grid button:hover { color: #fff; background: var(--green); border-color: var(--green); }
.calendar-commandbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--content-border); background: var(--content-subtle); }
.calendar-nav { display: flex; align-items: center; gap: 10px; }
.calendar-nav strong { margin-left: 6px; font: 800 16px "Montserrat"; }
.calendar-view-toggle { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.calendar-view-toggle button { border: 0; padding: 8px 14px; border-radius: 10px; color: var(--muted); background: transparent; font-weight: 800; }
.calendar-view-toggle button.active { color: #fff; background: var(--green); box-shadow: 0 8px 20px rgba(47,93,74,.18); }
.teams-calendar { min-width: 1060px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.week-view { display: grid; grid-template-columns: 70px repeat(7, minmax(140px, 1fr)); overflow: visible; isolation: isolate; }
.month-view { display: grid; grid-template-columns: repeat(7, minmax(132px, 1fr)); }
.calendar-head { min-height: 64px; padding: 13px 14px; border-right: 1px solid var(--content-border); border-bottom: 1px solid var(--content-border); background: var(--content-subtle); }
.calendar-head:last-child { border-right: 0; }
.calendar-head strong, .calendar-head small { display: block; }
.calendar-head strong { font: 800 13px "Montserrat"; text-transform: capitalize; }
.calendar-head small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.calendar-head-title { display: flex; align-items: center; gap: 7px; }
.calendar-today-badge { display: inline-flex; align-items: center; min-height: 18px; padding: 1px 7px; border-radius: 999px; color: #fff; background: var(--green); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.calendar-head.today { position: relative; z-index: 1; padding: 11px 12px; color: var(--brand-dark); background: var(--content-highlight); border-top: 2px solid var(--content-highlight-border); border-right: 2px solid var(--content-highlight-border); border-left: 2px solid var(--content-highlight-border); box-shadow: none; }
.time-head { background: #fff; }
.calendar-time { display: flex; justify-content: center; padding-top: 18px; color: var(--content-copy-muted); border-right: 1px solid var(--content-border); border-bottom: 1px solid var(--content-border); background: var(--content-subtle); font: 800 11px "Montserrat"; }
.calendar-cell { min-height: 78px; padding: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: 6px; }
.calendar-cell:nth-child(8n) { border-right: 0; }
.calendar-cell.today { box-shadow: inset 0 0 0 2px rgba(110, 193, 228, .42); background: #f8fcfe; }
.calendar-cell.empty { background: #fbfdfe; }
.week-calendar-cell { position: relative; height: 184px; min-height: 184px; overflow: visible; }
.week-calendar-cell.week-overflow-open { z-index: 100; }
.week-calendar-cell.today { position: relative; z-index: 1; border-right: 2px solid rgba(110, 193, 228, .7); border-left: 2px solid rgba(110, 193, 228, .7); box-shadow: none; }
.week-calendar-cell.today.week-calendar-last { border-bottom: 2px solid rgba(110, 193, 228, .7); }
.week-card-stack { min-height: 0; display: grid; align-content: start; gap: 6px; }
.week-calendar-cell.free .week-card-stack { display: none; }
.calendar-pill.available.week-add-appointment strong { font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: 0; }
.week-appointment-card {
  width: 100%; min-width: 0; height: var(--week-appointment-height, 58px); min-height: 58px; padding: 7px 8px; border-radius: 8px;
}
.week-appointment-card:hover { filter: brightness(.98); box-shadow: 0 4px 12px rgba(25, 54, 41, .08); }
.calendar-pill.week-appointment-card > .week-card-main { display: grid !important; grid-template-columns: 28px minmax(0, 1fr) auto 18px; grid-template-areas: "photo info timing status" "photo info count status"; align-items: center; column-gap: 7px; row-gap: 4px; height: 100%; min-width: 0; margin: 0; overflow: visible; white-space: normal; }
.week-card-main .calendar-pet-photo { grid-area: photo; }
.week-card-main .calendar-pet-photo { width: 28px; height: 28px; border-radius: 50%; font-size: 9px; }
.week-card-info { grid-area: info; min-width: 0; }
.week-card-info strong, .week-card-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-card-info strong { font-size: 10px; line-height: 1.2; }
.week-card-info small { margin-top: 2px; font-size: 8px; line-height: 1; opacity: .78; }
.week-card-timing { grid-area: timing; min-width: 0; text-align: right; white-space: nowrap; }
.week-card-timing strong, .week-card-timing small { display: block; }
.week-card-timing strong { font-size: 9px; line-height: 1.1; }
.week-card-timing small { margin-top: 2px; font-size: 8px; opacity: .75; }
.week-card-service-count { grid-area: count; justify-self: end; padding: 3px 5px; border-radius: 999px; color: currentColor; background: rgba(255,255,255,.62); font-size: 8px; font-weight: 800; white-space: nowrap; }
.week-appointment-card .calendar-pill-status { grid-area: status; width: 18px; height: 18px; border-width: 1px; }
.week-appointment-card .calendar-pill-status .ui-icon { width: 10px; height: 10px; }
.week-cell-actions { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; gap: 6px; }
.week-add-appointment, .week-overflow-trigger {
  font-size: 10px; font-weight: 800;
}
.week-add-appointment { width: 100%; min-height: 0; height: 100%; display: grid; place-items: center; }
.week-overflow-trigger {
  width: 100%; min-height: 46px; display: grid; place-items: center; border: 1px solid transparent;
  border-radius: 10px; text-align: center;
}
.week-capacity-action {
  color: #77817c;
  background:
    repeating-linear-gradient(135deg, rgba(145, 156, 150, .14) 0 4px, rgba(145, 156, 150, .04) 4px 8px),
    #f5f7f6;
  border-color: #dce2df;
}
.week-capacity-action:hover,
.week-overflow-trigger[aria-expanded="true"] {
  color: #fff; border-color: #77817c; background: #77817c;
}
.week-overflow { position: relative; width: 100%; }
.week-overflow-popover {
  position: absolute; z-index: 1000; left: 50%; bottom: calc(100% + 8px); width: 310px; max-height: 360px;
  box-sizing: border-box; overflow-x: hidden; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  box-shadow: 0 18px 45px rgba(22, 45, 34, .18); transform: translateX(-50%);
}
.week-overflow-popover header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.week-overflow-popover header strong { font: 800 12px "Montserrat"; }
.week-overflow-popover header small { color: var(--muted); }
.week-overflow-list { display: grid; gap: 3px; }
.week-overflow-list > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: #f8faf7; }
.week-card-avatar { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--mint); color: var(--green); font-size: 10px; font-weight: 800; }
.week-card-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.week-overflow-list > div > span:last-child { min-width: 0; }
.week-overflow-list strong, .week-overflow-list small { display: block; }
.week-overflow-list strong { font-size: 11px; }
.week-overflow-list small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.week-open-day { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--green); background: #fff; font-size: 10px; font-weight: 800; }
.week-open-day .ui-icon { width: 13px; height: 13px; }
.calendar-pill { width: 100%; min-width: 0; min-height: 48px; border: 1px solid transparent; border-radius: 10px; padding: 7px 8px; text-align: left; line-height: 1.2; cursor: pointer; }
.calendar-pill > strong, .calendar-pill > span:not(.calendar-pill-heading):not(.calendar-pill-detail) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-pill > strong { font-size: 11px; }
.calendar-pill > span:not(.calendar-pill-heading):not(.calendar-pill-detail) { margin-top: 2px; font-size: 10px; }
.calendar-pill.occupied { color: #7c4e10; background: #fff8df; border-color: #efd485; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.calendar-pill.appointment-confirmed { color: #684ba9; background: #f4efff; border-color: #d4c5f2; }
.calendar-pill.appointment-in_progress { color: #245b83; background: #edf7ff; border-color: #a8d2f2; }
.calendar-pill.appointment-pending { color: #8a6618; background: #fff8df; border-color: #efd485; }
.calendar-pill.appointment-no_show { color: #95453d; background: #fff0ee; border-color: #efb7b0; }
.calendar-pill.appointment-completed { color: #2b7658; background: #eff9f1; border-color: #b9dec4; }
.calendar-pill-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-width: 0; }
.calendar-pill-time { min-width: 0; overflow: hidden; color: currentColor; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; opacity: .86; }
.calendar-pill-status { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border: 2px solid currentColor; border-radius: 50%; color: currentColor; font-size: 8px; opacity: .72; }
.calendar-pill-status .ui-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.week-appointment-card .calendar-pill-status .ui-icon { width: 10px; height: 10px; }
.calendar-pill-detail { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; margin-top: 5px; }
.calendar-pet-photo { width: 30px; height: 30px; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(28,54,42,.14); border-radius: 50%; color: currentColor; background: #fff; font-size: 11px; font-weight: 800; }
.calendar-pet-photo img { width: 100%; height: 100%; object-fit: cover; }
.calendar-pill-copy { min-width: 0; overflow: hidden; }
.calendar-pill-copy strong, .calendar-service { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-pill-copy strong { color: currentColor; font-size: 11px; }
.calendar-service { margin-top: 2px; color: currentColor; font-size: 9px; opacity: .78; }
.calendar-pill.available {
  min-height: 46px; display: grid; place-items: center; color: #9aa39e; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(156, 166, 160, .10) 0 4px, rgba(156, 166, 160, .025) 4px 8px),
    #fcfdfc;
  border: 1px dashed #e0e5e1;
}
.calendar-pill.available strong { color: currentColor; font-size: 10px; letter-spacing: .08em; }
.calendar-pill.available:hover { color: var(--green); background: #fff; border-color: #82bd97; }
.calendar-pill.available:active { background: #edf8f0; border-style: solid; }
.month-calendar-layout { display: grid; grid-template-columns: minmax(760px, 1fr) minmax(260px, 300px); gap: 16px; align-items: start; }
.month-heatmap { min-width: 0; }
.month-cell {
  min-height: 126px; padding: 12px; border: 0; border-right: 1px solid rgba(224, 229, 224, .85); border-bottom: 1px solid rgba(224, 229, 224, .85);
  display: flex; flex-direction: column; gap: 14px; color: #26352e; background: #fff; text-align: left; transition: transform .16s ease, box-shadow .16s ease;
}
.month-cell:nth-child(7n) { border-right: 0; }
.month-cell:not(:disabled) { cursor: pointer; }
.month-cell:not(:disabled):hover { position: relative; z-index: 1; box-shadow: inset 0 0 0 1px var(--green), 0 8px 18px rgba(26, 69, 49, .11); transform: translateY(-1px); }
.month-cell.today { box-shadow: inset 0 0 0 2px var(--content-highlight-border); background: var(--content-highlight); }
.month-cell.today:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--green), 0 8px 18px rgba(26, 69, 49, .11); }
.month-cell.muted-month { color: #aeb6b0; background: #fafaf7; opacity: .72; }
.month-heat-low { background: #fff1f0; }
.month-heat-medium { background: #fff8df; }
.month-heat-high { color: #fff; background: #277850; }
.month-day { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.month-day strong { font: 900 18px "Montserrat"; line-height: 1; }
.month-day small { max-width: 76px; color: currentColor; font-size: 10px; font-weight: 700; line-height: 1.25; text-align: right; opacity: .8; }
.month-heat-stats { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 12px; }
.month-heat-stats > i, .month-reading-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #e85c64; }
.month-heat-medium .month-heat-stats > i { background: #f1aa19; }
.month-heat-high .month-heat-stats > i { background: #d8f5e4; }
.month-heat-stats b { font: 800 16px "Montserrat"; }
.month-heat-stats em { margin-left: auto; font-size: 11px; font-style: normal; font-weight: 800; }
.month-occupancy-track { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(59, 78, 66, .16); }
.month-occupancy-track i { display: block; width: var(--occupancy); height: 100%; border-radius: inherit; background: #e85c64; }
.month-heat-medium .month-occupancy-track i { background: #f1aa19; }
.month-heat-high .month-occupancy-track { background: rgba(255, 255, 255, .3); }
.month-heat-high .month-occupancy-track i { background: #fff; }
.month-calendar-sidebar { display: grid; gap: 16px; }
.month-calendar-sidebar .panel { padding: 18px; }
.month-calendar-sidebar h3, .month-calendar-sidebar h4 { margin: 0; font: 800 15px "Montserrat"; }
.month-legend-list { display: grid; gap: 13px; margin-top: 18px; }
.month-legend-list > div { display: flex; align-items: center; gap: 10px; }
.month-legend-list span { display: grid; gap: 2px; }
.month-legend-list strong { font-size: 12px; }
.month-legend-list small { color: var(--muted); font-size: 11px; }
.month-legend-swatch { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 5px; background: #eee; }
.month-legend-swatch.high { background: #2e8258; }
.month-legend-swatch.medium { background: #ffd26e; }
.month-legend-swatch.low { background: #ef8586; }
.month-legend-swatch.outside { background: #e5e8e5; }
.month-reading-guide { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.month-reading-guide p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.month-reading-guide p:last-child { display: flex; align-items: center; gap: 7px; color: #536058; font-size: 11px; }
.month-reading-dot { background: var(--green); }
.month-reading-bar { width: 24px; height: 4px; margin-left: 4px; border-radius: 999px; background: #9aa39e; }
.month-summary-card dl { display: grid; gap: 12px; margin: 18px 0 0; }
.month-summary-card dl > div { display: flex; justify-content: space-between; gap: 10px; }
.month-summary-card dt { color: var(--muted); font-size: 12px; }
.month-summary-card dd { margin: 0; color: var(--green); font-weight: 800; text-align: right; }
.month-calendar-tip { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid #dce8df; border-radius: 10px; color: #5e6d64; background: #f7fbf7; font-size: 12px; }
.month-calendar-tip i { color: var(--green); }
.day-calendar-layout { display: grid; grid-template-columns: minmax(620px, 1fr) minmax(280px, 330px); gap: 16px; align-items: start; }
.teams-calendar.day-view { min-width: 0; }
.day-calendar-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--content-border); background: var(--content-subtle); }
.day-calendar-head strong, .day-calendar-head small { display: block; }
.day-calendar-head strong { font: 800 15px "Montserrat"; }
.day-calendar-head small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.day-calendar-timeline { display: grid; }
.day-calendar-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); min-height: 88px; border-bottom: 1px solid var(--line); }
.day-calendar-row.is-collapsed { min-height: 0; }
.day-calendar-row.is-collapsed .day-calendar-events { display: flex; align-items: center; padding-block: 0; }
.day-calendar-row.is-collapsed .day-slot-group { width: 100%; }
.day-calendar-row:last-child { border-bottom: 0; }
.day-calendar-row > time { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 12px 6px; color: var(--content-copy-muted); background: var(--content-subtle); border-right: 1px solid var(--content-border); font: 800 11px "Montserrat"; text-align: center; }
.day-calendar-events { display: grid; gap: 7px; min-width: 0; padding: 8px; background: #fff; }
.day-calendar-events.empty { background: #fbfdfe; }
.day-slot-group { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.day-slot-group-header { min-height: 42px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid var(--content-border); background: var(--content-subtle); }
.day-slot-group.is-collapsed { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.day-slot-group.is-collapsed .day-slot-group-header { padding-inline: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.day-time-toggle { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 6px; color: var(--green); background: var(--mint); }
.day-time-toggle .ui-icon { width: 14px; height: 14px; }
.day-slot-group-header > strong { color: var(--ink); font: 800 12px "Montserrat"; white-space: nowrap; }
.day-slot-statuses { display: flex; justify-content: flex-end; gap: 8px; min-width: 0; color: var(--muted); font-size: 11px; }
.day-slot-statuses span { display: inline-flex; align-items: center; gap: 4px; }
.day-slot-statuses .legend-dot { width: 8px; height: 8px; }
.day-slot-more { width: 28px; height: 28px; justify-self: end; padding: 0; }
.day-slot-appointments { display: grid; gap: 7px; padding: 8px; }
.day-appointment { display: grid; grid-template-columns: minmax(0, 1fr) 38px; overflow: hidden; border: 1px solid #efd485; border-radius: 9px; color: #8a6618; background: #fff8df; }
.day-appointment.appointment-confirmed { color: #684ba9; border-color: #d4c5f2; background: #f4efff; }
.day-appointment.appointment-in_progress { color: #245b83; border-color: #a8d2f2; background: #edf7ff; }
.day-appointment.appointment-pending { color: #8a6618; border-color: #efd485; background: #fff8df; }
.day-appointment.appointment-no_show { color: #95453d; border-color: #efb7b0; background: #fff0ee; }
.day-appointment.appointment-completed { color: #2b7658; border-color: #b9dec4; background: #eff9f1; }
.day-appointment-main { min-width: 0; display: grid; grid-template-columns: 38px minmax(120px, 1fr) minmax(98px, auto) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 0; color: inherit; background: transparent; text-align: left; }
.day-appointment-main:hover { background: rgba(255,255,255,.38); }
.day-appointment-photo { width: 38px; height: 38px; overflow: hidden; display: grid; place-items: center; border-radius: 50%; color: currentColor; background: rgba(255,255,255,.7); font: 800 12px "Montserrat"; }
.day-appointment-photo img { width: 100%; height: 100%; object-fit: cover; }
.day-appointment-copy, .day-appointment-timing { min-width: 0; }
.day-appointment-copy strong, .day-appointment-copy small, .day-appointment-timing strong, .day-appointment-timing small { display: block; }
.day-appointment-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.day-appointment-copy small, .day-appointment-timing small { margin-top: 2px; color: currentColor; opacity: .78; font-size: 10px; }
.day-appointment-timing { text-align: right; white-space: nowrap; }
.day-appointment-timing strong { font-size: 11px; }
.day-appointment-service-count { padding: 5px 8px; border-radius: 999px; color: currentColor; background: rgba(255,255,255,.62); font-size: 10px; font-weight: 800; white-space: nowrap; }
.day-appointment-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.day-appointment-status .legend-dot { width: 8px; height: 8px; }
.day-appointment-toggle { width: 38px; display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid rgba(94, 96, 88, .16); color: currentColor; background: transparent; }
.day-appointment-toggle:hover { background: rgba(255,255,255,.38); }
.day-appointment-toggle .ui-icon { width: 17px; height: 17px; }
.day-appointment-external-navigation { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 6px 10px; border-top: 1px solid rgba(94, 96, 88, .16); background: rgba(255,255,255,.34); }
.day-appointment-external-navigation > span { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; color: currentColor; font-size: 10px; font-weight: 800; }
.day-appointment-external-navigation > span .ui-icon { width: 14px; height: 14px; }
.day-appointment-external-navigation a { width: 46px; height: 28px; display: grid; place-items: center; padding: 3px; border-radius: 7px; line-height: 0; text-decoration: none; }
.day-appointment-external-navigation a:hover { background: rgba(255,255,255,.58); }
.day-appointment-external-navigation img { display: block; object-fit: contain; }
.day-appointment-external-navigation img[alt="Google Maps"] { width: 39px; height: 20px; }
.day-appointment-external-navigation img[alt="Waze"] { width: 40px; height: 18px; transform: translateY(1px); }
.day-appointment-services { grid-column: 1 / -1; display: grid; gap: 7px; padding: 11px; border-top: 1px solid rgba(94, 96, 88, .16); background: rgba(255,255,255,.4); }
.day-appointment-services > strong { margin: 1px 4px 5px; color: currentColor; font-size: 11px; }
.day-service-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 104px auto; align-items: center; gap: 10px; padding: 0 9px 0 0; border: 1px solid rgba(94, 96, 88, .14); border-radius: 8px; color: var(--ink); background: rgba(255,255,255,.78); }
.day-service-main { min-width: 0; min-height: 52px; display: grid; grid-template-columns: minmax(180px, 52%) minmax(118px, 1fr); align-items: center; gap: 14px; padding: 10px 12px; border: 0; border-radius: 8px; color: inherit; background: transparent; text-align: left; }
.day-service-main:hover { background: #fff; }
.day-service-name { min-width: 0; }
.day-service-name strong, .day-service-name small { display: block; }
.day-service-name strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.day-service-name small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.day-service-employee { overflow: hidden; color: #59665f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.day-service-row > .status { margin-right: 2px; font-size: 9px; white-space: nowrap; }
.day-service-navigation { width: 104px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; padding-right: 2px; }
.day-service-navigation a { width: 46px; height: 32px; display: grid; place-items: center; padding: 3px; border-radius: 7px; line-height: 0; text-decoration: none; }
.day-service-navigation a:hover { background: var(--mint); }
.day-service-navigation img, .day-navigation-link img { display: block; object-fit: contain; object-position: center; }
.day-service-navigation img[alt="Google Maps"] { width: 39px; height: 20px; }
.day-service-navigation img[alt="Waze"] { width: 40px; height: 18px; transform: translateY(1px); }
.day-view .calendar-pill { min-height: 72px; padding: 9px 12px; }
.day-view .calendar-pill-heading { align-items: flex-start; }
.day-view .calendar-pill-time { font-size: 12px; }
.day-view .calendar-pill-detail { grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 7px; }
.day-view .calendar-pet-photo { width: 38px; height: 38px; }
.day-view .calendar-pill-copy strong { font-size: 13px; }
.day-view .calendar-service { margin-top: 1px; font-size: 10px; }
.day-appointment-card-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: stretch; min-width: 0; overflow: hidden; border: 1px solid #efd485; border-radius: 10px; color: #7c4e10; background: #fff8df; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.day-appointment-card-wrap.appointment-confirmed { color: #684ba9; background: #f4efff; border-color: #d4c5f2; }
.day-appointment-card-wrap.appointment-in_progress { color: #245b83; background: #edf7ff; border-color: #a8d2f2; }
.day-appointment-card-wrap.appointment-pending { color: #8a6618; background: #fff8df; border-color: #efd485; }
.day-appointment-card-wrap.appointment-no_show { color: #95453d; background: #fff0ee; border-color: #efb7b0; }
.day-appointment-card-wrap.appointment-completed { color: #2b7658; background: #eff9f1; border-color: #b9dec4; }
.day-appointment-card-wrap .calendar-pill { width: 100%; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.day-navigation-actions { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px; }
.day-navigation-link { width: 62px; min-width: 62px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 3px; border: 0; border-radius: 6px; color: currentColor; background: transparent; text-decoration: none; }
.day-navigation-link:hover { background: rgba(255,255,255,.48); }
.day-navigation-link img[alt="Google Maps"] { width: 48px; height: 24px; }
.day-navigation-link img[alt="Waze"] { width: 52px; height: 20px; transform: translateY(1px); }
.day-navigation-link.disabled { color: #8a9690; border-color: var(--line); background: #f5f6f4; cursor: not-allowed; }
.day-navigation-status { align-self: center; margin: 0 12px 0 0; }
.day-free-slot { width: 100%; min-height: 54px; display: grid; place-items: center; padding: 8px 14px; border: 1px dashed #d9dfdb; border-radius: 9px; color: #5b6962; background: #fbfcfb; font: inherit; text-align: center; cursor: pointer; }
.day-free-slot:hover { border-color: #7eb899; color: #287052; background: #f4fbf6; }
.day-free-slot strong { color: #758279; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.day-free-slot small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.day-blocked-slot { min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 1px solid #d8ddda; border-radius: 9px; color: #68736d; background: #f1f3f2; }
.day-blocked-slot i { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px; background: #e3e7e5; }
.day-blocked-slot i .ui-icon { width: 17px; height: 17px; }
.day-blocked-slot strong, .day-blocked-slot small { display: block; }
.day-blocked-slot small { margin-top: 2px; color: #78847e; }
.day-calendar-sidebar { display: grid; gap: 16px; }
.day-calendar-sidebar .panel { padding: 18px; border-radius: 10px; }
.day-side-title { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.day-side-title i { display: grid; place-items: center; width: 30px; height: 30px; color: var(--green); background: var(--mint); border-radius: 8px; }
.day-side-title i .ui-icon { width: 16px; height: 16px; }
.day-side-title strong { font: 800 14px "Montserrat"; }
.day-availability-facts { display: grid; grid-template-columns: .8fr 1.2fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.day-availability-facts > div { min-height: 74px; display: grid; align-content: center; justify-items: center; gap: 4px; padding: 10px; text-align: center; }
.day-availability-facts > div + div { border-left: 1px solid var(--line); }
.day-availability-facts b { color: var(--green); font: 800 15px "Montserrat"; }
.day-availability-facts span { color: var(--muted); font-size: 10px; }
.day-side-subtitle { display: block; margin: 18px 0 10px; font-size: 12px; }
.day-free-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.day-free-grid > span { min-height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--green); background: #fff; font-size: 12px; font-weight: 800; }
.day-no-slots { grid-column: 1 / -1; padding: 14px; color: var(--muted); background: #fafaf7; border-radius: 7px; font-size: 11px; text-align: center; }
.day-summary-content { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 16px; }
.day-summary-ring { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) 0 var(--occupancy), #e4eee8 var(--occupancy) 100%); }
.day-summary-ring::before { content: ""; grid-area: 1 / 1; width: 76px; height: 76px; border-radius: 50%; background: #fff; }
.day-summary-ring span { position: relative; grid-area: 1 / 1; text-align: center; }
.day-summary-ring b, .day-summary-ring small { display: block; }
.day-summary-ring b { font: 800 20px "Montserrat"; }
.day-summary-ring small { color: var(--muted); font-size: 9px; }
.day-summary-list { display: grid; gap: 7px; }
.day-summary-list > div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: #59665f; font-size: 10px; }
.day-summary-list .legend-dot { width: 7px; height: 7px; }
.day-summary-list b { color: var(--ink); }
.day-calendar-tip { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px; border: 1px solid #d8e7ee; border-radius: 9px; color: #506b7f; background: #f3f9fc; font-size: 12px; }
.day-calendar-tip i { display: grid; place-items: center; color: var(--green); }
.day-calendar-tip i .ui-icon { width: 18px; height: 18px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 22px; display: grid; place-items: center; background: rgba(21,36,29,.48); backdrop-filter: blur(5px); }
.modal-card { position: relative; width: min(600px, 100%); max-height: calc(100vh - 44px); overflow: auto; padding: 28px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.modal-card.plan-modal-card { max-height: calc(100vh - 28px); padding: 24px 28px; }
.modal-card.client-create-modal-card { width: min(980px, 100%); padding: 24px; }
.modal-card.client-create-modal-card .modal-close { display: none; }
.modal-close { position: absolute; right: 18px; top: 17px; width: 34px; height: 34px; border: 0; border-radius: 10px; color: var(--muted); background: var(--cream); font-size: 20px; }
.modal-close .ui-icon, .preview-lightbox-close .ui-icon { width: 19px; height: 19px; }
.modal-card h2 { margin: 0 0 7px; font: 800 22px "Montserrat"; }
.modal-card .form-grid { margin-top: 24px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.modal-card.client-create-modal-card:has(.package-create-form) { width: min(1120px, 100%); padding: 24px; overflow-x: hidden; }
.package-form-header { display: grid; grid-template-columns: 54px minmax(0, 1fr) 42px; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.package-form-header > i { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; color: var(--green); background: #edf7f0; font-style: normal; }
.package-form-header > i .ui-icon { width: 26px; height: 26px; }
.package-form-header h2 { margin: 0 0 3px; font-size: 26px; }
.package-form-header p { margin: 0; color: var(--muted); }
.package-pet-header p { margin-top: 4px; color: var(--ink); }
.package-pet-header p strong { color: var(--green); }
.package-pet-header small { display: block; margin-top: 5px; color: var(--muted); }
.package-form-header .modal-close-inline { align-self: start; }
.package-create-form { display: grid; gap: 16px; margin-top: 18px; }
.package-form-section { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.package-form-section > header { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; }
.package-form-section > header > i { width: 30px; height: 30px; display: grid; flex: 0 0 30px; place-items: center; border-radius: 8px; color: var(--green); background: #eaf5ed; font-style: normal; }
.package-form-section > header > i .ui-icon { width: 17px; height: 17px; }
.package-form-section h3, .package-form-section h4 { margin: 0; font: 800 16px "Montserrat"; }
.package-form-section header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.package-info-grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-areas: "name validity" "price description"; align-items: start; gap: 20px 24px; }
.package-info-grid label { min-width: 0; align-self: start; align-content: start; }
.package-info-grid label:nth-child(1) { grid-area: name; }
.package-info-grid label:nth-child(2) { grid-area: validity; }
.package-info-grid label:nth-child(3) { grid-area: price; }
.package-info-grid label:nth-child(4) { grid-area: description; }
.package-info-grid label > small { margin-top: -3px; color: var(--muted); font-weight: 500; }
.package-info-grid label > em { color: var(--muted); font-style: normal; font-weight: 500; }
.package-info-grid input { min-height: 50px; }
.package-money-input { position: relative; display: block; }
.package-money-input b { position: absolute; left: 14px; top: 13px; z-index: 1; font-weight: 700; }
.package-money-input input { padding-left: 42px; }
.package-service-search { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--green); background: #fff; }
.package-service-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(20, 96, 68, .1); }
.package-service-search .ui-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.package-service-search input { min-width: 0; height: 42px; padding: 0; border: 0; outline: 0; box-shadow: none; }
.package-service-table, .package-pet-table { margin-top: 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
.package-service-table { max-height: 390px; overflow: auto; scrollbar-gutter: stable; }
.package-service-head, .package-service-row { min-width: 810px; display: grid; grid-template-columns: minmax(290px, 1.65fr) .65fr .75fr minmax(145px, .8fr); align-items: center; gap: 12px; }
.package-service-head { position: sticky; top: 0; z-index: 2; padding: 10px 14px 10px 54px; color: var(--muted); background: #fafbf9; box-shadow: 0 1px 0 var(--line); text-transform: uppercase; letter-spacing: .06em; font-size: 9px; font-weight: 800; }
.package-service-row { position: relative; grid-template-columns: 28px minmax(240px, 1.65fr) .65fr .75fr minmax(145px, .8fr); min-width: 850px; padding: 12px 14px; border-top: 1px solid var(--line); color: #4d5a53; }
.package-service-row:first-child { border-top: 0; }
.package-service-row.selected { background: #fdfefd; }
.package-service-row > input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.package-service-name, .package-pet-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.package-service-name .pet-avatar, .package-pet-name .pet-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; }
.package-service-name strong, .package-service-name small, .package-pet-name strong, .package-pet-name small { display: block; }
.package-service-name strong, .package-pet-name strong { color: var(--ink); }
.package-service-name small, .package-pet-name small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.package-quantity-control { display: grid; grid-template-columns: 38px 52px 38px; overflow: hidden; width: max-content; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.package-quantity-control button { width: 38px; height: 40px; border: 0; color: var(--ink); background: #fff; font-size: 18px; }
.package-quantity-control input { width: 52px; height: 40px; padding: 0; border-width: 0 1px; border-radius: 0; text-align: center; appearance: textfield; }
.package-quantity-control input::-webkit-inner-spin-button { appearance: none; }
.package-no-services { padding: 30px; color: var(--muted); text-align: center; }
.package-financial-summary { margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.package-financial-summary > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; }
.package-financial-summary h4 { font-size: 14px; }
.package-financial-summary > header > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; color: var(--green); background: #edf7f0; font-size: 10px; font-weight: 700; }
.package-financial-summary > header > span .ui-icon { width: 14px; height: 14px; }
.package-financial-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 14px; padding: 0 16px 16px; }
.package-financial-equation > article { display: grid; align-content: center; min-height: 118px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.package-financial-equation > b { color: var(--muted); font-size: 21px; font-weight: 500; }
.package-financial-equation small { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--ink); font-size: 10px; }
.package-financial-equation small .ui-icon { width: 13px; height: 13px; }
.package-financial-equation strong { margin: 8px 0 2px; font: 800 20px "Montserrat"; }
.package-financial-equation em { color: var(--muted); font-size: 10px; font-style: normal; }
.package-financial-equation .package-savings { border-color: #badbca; color: var(--green); background: #f2faf5; }
.package-financial-summary details { border-top: 1px solid var(--line); }
.package-financial-summary summary { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; cursor: pointer; font-size: 11px; font-weight: 700; list-style: none; }
.package-financial-summary summary .ui-icon { width: 15px; height: 15px; }
#package-calculation-details, #subscription-calculation-details { display: grid; gap: 6px; padding: 0 16px 14px; }
#package-calculation-details > span, #subscription-calculation-details > span { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; color: var(--muted); font-size: 11px; }
#package-calculation-details b, #subscription-calculation-details b { color: var(--ink); }
#package-calculation-details em, #subscription-calculation-details em { font-style: normal; }
.package-availability { padding-block: 16px; }
.package-availability > header { margin-bottom: 8px; }
.package-availability > label { display: flex; align-items: flex-start; gap: 10px; }
.package-availability input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); }
.package-availability strong, .package-availability small { display: block; }
.package-availability small { margin-top: 3px; color: var(--muted); font-weight: 500; }
.package-form-footer { position: sticky; bottom: -24px; z-index: 3; display: flex; align-items: flex-start; justify-content: flex-end; gap: 12px; margin: 0 -24px -24px; padding: 16px 24px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); }
.package-link-action { display: grid; justify-items: center; gap: 4px; }
.package-link-action small { color: var(--muted); font-size: 9px; }
.package-pet-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.package-pet-link-body { min-width: 0; }
.package-pet-filters { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf9; }
.package-pet-filters label { max-width: 240px; }
.package-pet-head, .package-pet-row { min-width: 780px; display: grid; grid-template-columns: 28px minmax(220px, 1.2fr) minmax(190px, 1fr) minmax(210px, 1fr); align-items: center; gap: 12px; }
.package-pet-head { padding: 10px 14px; color: var(--muted); background: #fafbf9; text-transform: uppercase; letter-spacing: .06em; font-size: 9px; font-weight: 800; }
.package-pet-head > input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.package-pet-row { padding: 12px 14px; border-top: 1px solid var(--line); cursor: pointer; }
.package-pet-row:hover, .package-pet-row:has(input:checked) { background: #f4faf6; }
.package-pet-row > input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.package-pet-row > span > strong, .package-pet-row > span > small { display: block; }
.package-pet-row > span > small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.package-active-badge { display: inline-grid; gap: 2px; min-width: 150px; padding: 8px 10px; border: 1px solid #cde5d8; border-radius: 8px; color: var(--green); background: #edf7f0; }
.package-active-badge small { color: #53645b !important; }
.package-pet-pagination { min-width: 780px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.package-pet-pagination > label { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.package-pet-pagination select { width: 68px; min-height: 34px; padding: 6px 9px; }
.package-pet-pagination > span { white-space: nowrap; }
.package-pet-pagination nav { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.package-pet-pagination nav button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; color: var(--ink); background: transparent; font-size: 11px; font-weight: 700; }
.package-pet-pagination nav button.active { border-color: #9ccbb4; color: var(--green); background: #f4faf6; }
.package-pet-pagination nav button .ui-icon { width: 15px; height: 15px; }
.package-pet-footer { align-items: center; }
.package-pet-footer > span { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.package-pet-footer > span button { border: 0; color: var(--green); background: transparent; font-size: 11px; font-weight: 700; }
.appointment-create-page { max-width: 1320px; margin: 0 auto; }
.appointment-create-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.appointment-create-heading h1 { margin: 0; font: 800 30px "Montserrat"; }
.appointment-create-heading p { margin: 6px 0 0; color: var(--muted); }
.appointment-create-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .72fr); align-items: start; gap: 22px; }
.appointment-create-main, .appointment-summary-panel { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.appointment-create-main .form-grid { margin: 0; }
.appointment-create-form .form-grid > label { align-content: start; }
#appointment-form .form-grid > label { align-content: start; }
.appointment-client-field { position: relative; align-content: start; }
.appointment-client-search { min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.appointment-client-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(16, 145, 117, .1); }
.appointment-client-search .ui-icon { width: 17px; color: var(--muted); }
.appointment-client-search input { min-width: 0; padding: 0; border: 0; outline: 0; box-shadow: none; }
.appointment-client-native { display: none; }
.appointment-client-results { position: absolute; top: 70px; right: 0; left: 0; z-index: 5; overflow: auto; max-height: 220px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 12px 28px rgba(11, 43, 61, .15); }
.appointment-client-results > button { width: 100%; display: grid; gap: 3px; padding: 10px 12px; border: 0; border-bottom: 1px solid #edf1ef; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.appointment-client-results > button:last-child { border-bottom: 0; }
.appointment-client-results > button:hover { background: #f3faf7; }
.appointment-client-results strong, .appointment-client-results small { display: block; }
.appointment-client-results small { color: var(--muted); font-size: 11px; }
.appointment-client-empty { color: #a14957; font-size: 11px; }
.appointment-new-client-link { width: fit-content; padding: 0; border: 0; color: var(--green); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.appointment-new-client-link .ui-icon { width: 15px; vertical-align: -3px; }
.appointment-journey-note { margin: 0 24px 14px; padding: 11px 13px; border: 1px solid #b9dec9; border-radius: 10px; color: #176e58; background: #f2faf5; font-size: 12px; }
.appointment-journey-note .ui-icon { width: 16px; margin-right: 6px; vertical-align: -3px; }
.appointment-create-main .modal-actions { position: sticky; bottom: 0; z-index: 2; margin: 22px -24px -24px; padding: 16px 24px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); }
.appointment-summary-panel { position: sticky; top: 94px; display: grid; gap: 15px; }
.appointment-summary-panel h2 { margin: 0; font: 800 17px "Montserrat"; }
.appointment-summary-person { display: flex; align-items: center; gap: 10px; }
.appointment-summary-person .metric-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: 10px; }
.appointment-summary-person small, .appointment-summary-person strong { display: block; }
.appointment-summary-person small { color: var(--muted); font-size: 11px; }
.appointment-summary-person strong { margin-top: 2px; font-size: 13px; }
.appointment-summary-services { padding-top: 15px; border-top: 1px solid var(--line); }
.appointment-summary-services h3 { margin: 0 0 10px; font: 800 14px "Montserrat"; }
.appointment-summary-empty { color: var(--muted); font-size: 12px; }
.appointment-summary-service { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid #f0f1ed; }
.appointment-summary-service:first-of-type { border-top: 0; }
.appointment-summary-service .metric-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #6d4b9f; background: #f0e9fb; }
.appointment-summary-service .metric-icon .ui-icon { width: 18px; height: 18px; }
.appointment-summary-service strong, .appointment-summary-service small { display: block; }
.appointment-summary-service strong { font-size: 12px; }
.appointment-summary-service small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.appointment-summary-service b { font-size: 12px; white-space: nowrap; }
.appointment-summary-totals { display: grid; gap: 10px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.appointment-summary-totals span { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.appointment-summary-totals .ui-icon { width: 17px; color: var(--green); }
.appointment-summary-totals strong { color: var(--ink); }
.appointment-summary-benefit { display: grid; gap: 5px; padding: 13px; border: 1px solid #b9dec9; border-radius: 10px; background: #f2faf5; color: var(--green); }
.appointment-summary-benefit strong { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.appointment-summary-benefit strong .ui-icon { width: 17px; }
.appointment-summary-benefit span { color: #53645b; font-size: 12px; }
.treatment-drawer-backdrop { position: fixed; inset: 0; z-index: 120; background: rgba(21, 36, 29, .34); backdrop-filter: blur(2px); }
.treatment-drawer {
  position: fixed; z-index: 121; top: 0; right: 0; width: min(520px, 100vw); height: 100vh; overflow-y: auto;
  background: #fff; box-shadow: -18px 0 50px rgba(18, 40, 30, .18);
}
.treatment-drawer-header { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.treatment-drawer-header > div { min-width: 0; }
.treatment-drawer-header h2 { margin: 0; font: 800 21px "Montserrat"; }
.treatment-drawer-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.treatment-drawer-body { display: grid; gap: 16px; padding: 20px 22px 32px; }
.treatment-pet-summary { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; align-items: center; }
.treatment-pet-photo { width: 70px; height: 70px; overflow: hidden; display: grid; place-items: center; border-radius: 14px; color: var(--green); background: var(--mint); font: 800 20px "Montserrat"; }
.treatment-pet-photo img { width: 100%; height: 100%; object-fit: cover; }
.treatment-pet-summary h3 { margin: 0 0 4px; font: 800 19px "Montserrat"; }
.treatment-pet-summary p { margin: 2px 0; color: var(--muted); font-size: 12px; }
.treatment-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.treatment-facts > div { padding: 12px; }
.treatment-facts > div:nth-child(even) { border-left: 1px solid var(--line); }
.treatment-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.treatment-facts small, .treatment-facts strong { display: block; }
.treatment-facts small { color: var(--muted); font-size: 10px; }
.treatment-facts strong { margin-top: 4px; font-size: 12px; }
.treatment-section { padding: 15px; border: 1px solid var(--line); border-radius: 9px; }
.treatment-section > h3 { margin: 0 0 11px; font: 800 13px "Montserrat"; }
.treatment-alert { padding: 12px 14px; border: 1px solid #f0d49f; border-radius: 9px; color: #815b1f; background: #fff8e9; font-size: 12px; }
.treatment-action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.treatment-action-row .button { flex: 1 1 150px; }
.treatment-management-actions .treatment-action-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.treatment-management-actions .treatment-action-row .button { min-height: 50px; margin: 0; padding: 10px 12px; flex: none; justify-content: center; }
.treatment-management-actions .treatment-execution-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.treatment-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.treatment-inline-form.product-form { grid-template-columns: minmax(0, 1fr) 90px auto; }
.treatment-inline-form label { min-width: 0; font-size: 10px; }
.treatment-inline-form select, .treatment-inline-form input { min-width: 0; padding: 9px; }
.treatment-list { display: grid; gap: 7px; }
.treatment-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 8px; background: #f7f9f6; }
.treatment-list strong, .treatment-list small { display: block; }
.treatment-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.treatment-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }
.treatment-photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.treatment-notes { width: 100%; min-height: 96px; }
body.treatment-drawer-open { overflow: hidden; }
.toast-root { position: fixed; z-index: 200; right: 20px; top: 20px; display: grid; gap: 10px; }
.toast { min-width: 280px; padding: 14px 16px; border-radius: 12px; color: #fff; background: var(--green); box-shadow: var(--shadow); animation: slide-in .25s ease; }
.toast.error { background: var(--danger); }
.skeleton { min-height: 90px; border-radius: var(--radius); background: linear-gradient(100deg, #e2f1f1 20%, #f8fbfc 40%, #e2f1f1 60%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.client-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; min-height: 300px; margin-bottom: 18px; padding: 42px; border-radius: 24px; color: #fff; background: var(--green); }
.client-hero h1 { margin: 12px 0; font: 800 clamp(32px, 4vw, 52px)/1.05 "Montserrat"; letter-spacing: -.045em; }
.client-hero p { max-width: 600px; margin: 0 0 24px; color: #c6d9d0; font-size: 16px; }
.client-hero .button-primary { color: var(--green); background: var(--peach); }
.client-hero-mark { width: 160px; height: 160px; flex: 0 0 auto; display: grid; place-items: center; margin-right: 5%; border: 1px solid rgba(255,255,255,.16); border-radius: 45% 55% 56% 44%; color: var(--peach); background: rgba(255,255,255,.06); font: 800 70px "Montserrat"; transform: rotate(-8deg); }
.client-pet-list { display: grid; gap: 2px; padding: 12px 20px 20px; }
.client-pet-card { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.client-pet-card:last-child { border-bottom: 0; }
.client-pet-card strong, .client-pet-card small { display: block; }
.client-pet-card small { color: var(--muted); }
.booking-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .55fr); gap: 18px; }
.booking-panel { padding: 28px; }
.booking-steps { display: flex; align-items: center; max-width: 330px; margin-bottom: 28px; }
.booking-steps span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: var(--cream); font-weight: 800; }
.booking-steps span.active { color: #fff; background: var(--green); }
.booking-steps i { height: 2px; flex: 1; background: var(--line); }
.booking-help .help-list { padding: 20px; }
.booking-help .help-list p { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.booking-help b { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 8px; border-radius: 8px; color: var(--green); background: var(--mint); }
.slot-picker { margin-top: 22px; padding: 18px; border-radius: 14px; background: #f8f9f5; }
.appointment-slots { max-height: 190px; overflow-y: auto; scrollbar-gutter: stable; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 12px; }
.slot-grid button { padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--green); background: #fff; font-weight: 700; }
.slot-grid button:hover, .slot-grid button.active { color: #fff; border-color: var(--green); background: var(--green); }
.client-pets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.client-pet-profile { padding: 24px; text-align: center; }
.pet-avatar.large { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 22px; font-size: 22px; }
.client-pet-profile h2 { margin: 0; font: 800 21px "Montserrat"; }
.client-pet-profile > p { margin: 5px 0 18px; color: var(--muted); }
.pet-facts { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; }
.pet-facts span { padding: 12px; }
.pet-facts span + span { border-left: 1px solid var(--line); }
.pet-facts small, .pet-facts strong { display: block; }
.pet-facts small { color: var(--muted); }
.pet-alert { margin-bottom: 16px; padding: 10px; border-radius: 10px; color: #8a6618; background: #fff3cf; font-size: 12px; }
@keyframes shimmer { to { background-position-x: -200%; } }
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 1280px) {
  .crm-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crm-metrics-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crm-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-relationship-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-relationship-grid > :first-child { grid-column: 1 / -1; }
  .crm-overview-primary-grid { grid-template-columns: 1fr; }
  .crm-overview-analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .relationship-list-header { align-items: flex-start; flex-direction: column; }
  .relationship-toolbar { width: 100%; justify-content: flex-end; }
  .segment-workspace { grid-template-columns: 1fr; }
  .segment-guide { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
  .segment-guide h2 { margin: 8px 0 14px; }
  .segment-guide > div { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .crm-period-filter { width: 100%; flex-wrap: wrap; }
  .crm-period-filter label { flex: 1 1 130px; }
  .crm-period-filter input { width: 100%; }
  .crm-metrics, .crm-panel-grid { grid-template-columns: 1fr; }
  .crm-metrics-six, .crm-overview-analytics-grid, .crm-bottom-insights { grid-template-columns: 1fr; }
  .crm-relationship-grid > :first-child { grid-column: auto; }
  .crm-contact-group { align-items: flex-start; flex-direction: column; }
  .crm-contact-actions { width: 100%; }
  .crm-contact-group .button { width: 100%; }
  .crm-growth-stats { grid-template-columns: 1fr; }
  .crm-contact-client { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .crm-contact-client > b { grid-column: 2 / -1; text-align: left; }
  .crm-growth-chart-dual { height: 176px; }
  .crm-size-bars { min-height: 170px; }
  .crm-insight-panel { grid-template-columns: 40px minmax(0, 1fr); }
  .crm-insight-panel .button { grid-column: 1 / -1; width: 100%; }
  .crm-campaign-panel { grid-template-columns: 40px minmax(0, 1fr); }
  .crm-campaign-panel .button { grid-column: 1 / -1; width: 100%; }
  .treatment-drawer { width: 100vw; }
  .treatment-drawer-header, .treatment-drawer-body { padding-left: 16px; padding-right: 16px; }
  .treatment-inline-form, .treatment-inline-form.product-form { grid-template-columns: 1fr; }
  .treatment-inline-form .button { width: 100%; }
  .week-overflow-popover { position: fixed; left: 12px; right: 12px; bottom: 18px; width: auto; max-height: 65vh; transform: none; }
}

@media (max-width: 1280px) {
  .catalog-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-overview-card, .catalog-category-card, .catalog-alerts-card { grid-column: span 3; }
  .marketing-hero {
    grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
    gap: 34px;
    min-height: auto;
    padding-top: 48px;
  }
  .hero-copy { width: 100%; }
  .hero-copy h1 { font-size: 58px; }
  .hero-copy p { font-size: 17px; }
  .product-preview {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    align-self: center;
  }
}

@media (max-width: 1100px) {
  .appointment-create-layout { grid-template-columns: 1fr; }
  .appointment-summary-panel { position: static; }
  .appointment-list-view { grid-template-columns: 1fr; }
  .appointment-list-sidebar { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-list-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-list-summary h3 { grid-column: 1 / -1; }
  .marketing-nav nav { display: none; }
  .marketing-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 34px; }
  .hero-copy { width: 100%; max-width: 650px; }
  .product-preview { position: relative; right: auto; top: auto; width: 100%; margin-top: 30px; }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .day-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day-card-wide { grid-column: span 2; }
  .plan-summary-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .schedule-toolbar { align-items: stretch; flex-direction: column; }
  .schedule-filters { grid-template-columns: 1fr 1fr 1fr; }
  .calendar-commandbar { align-items: flex-end; flex-wrap: wrap; }
  .agenda-legend-filters { width: 100%; margin-left: 0; }
  .day-calendar-layout { grid-template-columns: 1fr; }
  .day-calendar-sidebar { grid-template-columns: 1fr 1fr; }
  .month-calendar-layout { grid-template-columns: 1fr; }
  .month-calendar-sidebar { grid-template-columns: 1fr 1fr; }
  .agenda-overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agenda-occupancy-card, .agenda-capacity-card { grid-column: span 1; }
  .agenda-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-management-grid { grid-template-columns: 1fr 1fr; }
  .agenda-management-grid > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 820px) {
  .product-form-grid, .product-usage-options, .product-prices, .supplier-product-grid { grid-template-columns: 1fr; }
  .product-usage-option { min-height: 0; }
  .product-form-actions { bottom: -16px; margin: 0 -16px -16px; padding: 14px 16px; }
  .employee-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-list-controls { grid-template-columns: 1fr 210px; }
  .supplier-list-controls > .button { grid-column: span 2; }
  .supplier-filter-panel { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .supplier-address-grid { grid-template-columns: 1fr 110px 1fr; }
  .employee-filter-panel > .button { width: 100%; }
  .catalog-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-overview-card, .catalog-category-card, .catalog-alerts-card { grid-column: 1 / -1; }
  .catalog-custom-period { align-items: stretch; flex-direction: column; }
  .catalog-category-layout { grid-template-columns: 1fr; justify-items: center; }
  .catalog-category-legend { width: 100%; }
  .client-list-controls { grid-template-columns: 1fr 1fr; }
  .service-list-controls { grid-template-columns: 1fr 1fr; }
  .service-list-controls .client-search-field { grid-column: 1 / -1; }
  .service-filter-panel { grid-template-columns: 1fr 1fr; }
  .relationship-summary-grid { grid-template-columns: 1fr; }
  .segment-metrics { grid-template-columns: 1fr; }
  .segment-list-header { align-items: flex-start; flex-direction: column; }
  .segment-list-header > div { width: 100%; flex-wrap: wrap; }
  .relationship-list-header { padding: 13px 12px 0; }
  .relationship-tabs { width: 100%; overflow-x: auto; }
  .relationship-toolbar { align-items: stretch; flex-wrap: wrap; }
  .relationship-filter-panel, .segment-filter-panel { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .relationship-search { flex: 1 1 180px; }
  .relationship-order { flex: 1 1 160px; }
  .relationship-order select { flex: 1; }
  .pet-filter-panel { grid-template-columns: 1fr 1fr; }
  .client-search-field { grid-column: 1 / -1; }
  .client-center-grid { grid-template-columns: 1fr; }
  .marketing-screen { padding-top: 96px; }
  #top, #recursos, #funcionalidades, #planos, #depoimentos, #faq, #contato { scroll-margin-top: 124px; }
  .marketing-nav { height: auto; padding: 18px; align-items: flex-start; }
  .marketing-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .marketing-screen main { padding: 0 18px; }
  .hero-copy h1 { font-size: 48px; }
  .product-preview { min-height: 0; }
  .product-preview img { min-height: 0; }
  .feature-grid, .pricing-grid, .faq-section, .marketing-footer { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .marketing-cta { align-items: flex-start; flex-direction: column; }
  .cookie-consent-banner { left: 50%; bottom: 16px; width: calc(100vw - 32px); align-items: stretch; flex-direction: column; gap: 14px; padding: 18px; }
  .cookie-consent-copy p { white-space: normal; }
  .cookie-consent-actions { width: 100%; }
  .cookie-consent-button { flex: 1; }
  .policy-header { height: 64px; gap: 14px; padding: 0 18px; }
  .policy-header .brand-logo { width: min(130px, 42vw); }
  .policy-back { flex: 0 0 auto; font-size: 13px; }
  .policy-main { width: min(920px, calc(100% - 28px)); padding: 38px 0 52px; }
  .policy-hero h1 { font-size: clamp(34px, 9vw, 44px); }
  .policy-hero p { font-size: 15px; line-height: 1.55; }
  .policy-section { padding: 20px; }
  .policy-section h2 { font-size: 18px; line-height: 1.3; }
  .policy-section p, .policy-section li { font-size: 14px; }
  .policy-table-wrap { overflow: visible; }
  .policy-table, .policy-table tbody, .policy-table tr, .policy-table td { display: block; width: 100%; }
  .policy-table thead { display: none; }
  .policy-table { margin-top: 0; }
  .policy-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .policy-table tr:last-child { border-bottom: 0; }
  .policy-table td { display: grid; grid-template-columns: minmax(108px, .72fr) minmax(0, 1.28fr); gap: 10px; padding: 8px 0; border: 0; line-height: 1.45; }
  .policy-table td::before { content: attr(data-label); color: var(--green); font-weight: 800; }
  .plans-main { width: min(100% - 28px, 1160px); padding: 42px 0 56px; }
  .plans-hero { margin-bottom: 34px; text-align: left; }
  .plans-hero h1 { font-size: clamp(34px, 10vw, 46px); }
  .plans-hero > p { font-size: 15px; }
  .plans-hero-badges { justify-content: flex-start; }
  .plans-detail-grid { grid-template-columns: 1fr; gap: 20px; }
  .plans-detail-card { padding: 24px; }
  .plans-detail-card p { min-height: 0; }
  .plans-comparison-section { margin-top: 52px; }
  .plans-table-wrap { overflow: visible; border: 0; background: transparent; }
  .plans-table, .plans-table tbody, .plans-table tr, .plans-table td { display: block; width: 100%; }
  .plans-table thead { display: none; }
  .plans-table tbody { display: grid; gap: 12px; }
  .plans-table tr { padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff !important; }
  .plans-table td, .plans-table td:first-child { display: grid; width: 100%; grid-template-columns: minmax(115px, .8fr) minmax(0, 1.2fr); gap: 12px; padding: 8px 0; border: 0; text-align: right; }
  .plans-table td:first-child { padding-bottom: 11px; border-bottom: 1px solid var(--line); color: var(--green); font-weight: 800; text-align: left; }
  .plans-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 800; text-align: left; text-transform: uppercase; }
  .plans-table td:first-child::before { display: none; }
  .plans-multiunit { grid-template-columns: 1fr; gap: 24px; padding: 25px; }
  .plans-faq { grid-template-columns: 1fr; gap: 18px; margin-top: 52px; }
  .plans-cta { align-items: flex-start; flex-direction: column; margin-top: 50px; padding: 26px; }
  .auth-screen { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .checkout-card { grid-template-columns: 1fr; }
  .checkout-summary, .checkout-form { padding: 30px; }
  .goal-panel, .goal-form { align-items: stretch; flex-direction: column; }
  .goal-form input { min-width: 0; }
  .point-payment-fields, .point-connection-facts { grid-template-columns: 1fr; }
  .point-payment-fields > div { grid-column: auto; }
  .opportunity-grid { grid-template-columns: 1fr; }
  .daily-tip-panel { grid-template-columns: 1fr; align-items: start; }
  .mobile-brand { display: block; }
  .sidebar { transform: translateX(-100%); transition: .25s; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: block;
    border: 0;
    background: rgba(30, 41, 36, .18);
    backdrop-filter: blur(1px);
  }
  .app-shell { display: block; }
  .main-content { grid-column: 1; }
  .menu-toggle { display: grid; }
  .topbar { padding: 0 18px; }
  .search-box { width: auto; flex: 1; margin: 0 12px; }
  .search-box kbd, .user-menu-trigger > div { display: none; }
  .page-root { padding: 24px 18px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { width: 100%; flex-wrap: wrap; }
  .heading-actions .button { flex: 1 1 calc(50% - 5px); min-width: 150px; }
  .booking-layout { grid-template-columns: 1fr; }
  .client-hero-mark { display: none; }
  .schedule-filters { grid-template-columns: 1fr; }
  .day-calendar-sidebar { grid-template-columns: 1fr; }
  .month-calendar-sidebar { grid-template-columns: 1fr; }
  .agenda-overview-metrics { grid-template-columns: 1fr 1fr; }
  .agenda-occupancy-card, .agenda-capacity-card { grid-column: span 1; }
  .agenda-chart-grid, .agenda-management-grid { grid-template-columns: 1fr; }
  .agenda-management-grid > :nth-child(2) { grid-column: auto; grid-row: auto; }
  .agenda-insight-panel { grid-template-columns: 38px minmax(0, 1fr); }
  .agenda-insight-panel a { grid-column: 2; }
}
@media (max-width: 620px) {
  .catalog-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .catalog-kpis article { min-height: 142px; padding: 13px; }
  .catalog-overview-card > header { min-height: 0; align-items: flex-start; flex-direction: row; padding: 14px; }
  .catalog-overview-card > header > div { min-width: 0; }
  .catalog-overview-card > header .button { width: auto; min-height: 32px; padding: 7px 10px; }
  .catalog-overview-card th, .catalog-overview-card td { padding: 9px 10px; }
  .catalog-service-name { gap: 6px; }
  .catalog-service-icon { width: 24px; height: 24px; }
  .catalog-service-icon .ui-icon { width: 14px; height: 14px; }
  .catalog-progress { width: 48px; }
  .catalog-usage, .catalog-occupancy { gap: 5px; }
  .catalog-capacity-usage th, .catalog-capacity-usage td { padding-right: 6px; padding-left: 6px; }
  .catalog-occupancy-legend { align-items: flex-start; flex-direction: column; }
  .team-performance-table { font-size: 10px; }
  .team-performance-table th, .team-performance-table td { padding-right: 5px; padding-left: 5px; }
  .team-performance-table th:nth-child(1) { width: 54%; }
  .team-performance-table th:nth-child(2), .team-performance-table th:nth-child(3) { width: 23%; }
  .team-performance-table th:nth-child(4), .team-performance-table th:nth-child(5), .team-performance-table td:nth-child(4), .team-performance-table td:nth-child(5) { display: none; }
  .team-professional-cell { gap: 7px; }
  .team-professional-cell .pet-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .client-advanced-panel { grid-template-columns: 1fr; }
  .service-list-controls, .service-filter-panel { grid-template-columns: 1fr; }
  .service-list-controls .client-search-field { grid-column: auto; }
  .service-list-controls > .button, .service-filter-panel > .button { width: 100%; }
  .service-price-filter { grid-template-columns: 1fr auto 1fr; }
  .relationship-filter-panel, .segment-filter-panel { grid-template-columns: 1fr; }
  .relationship-filter-panel label, .relationship-filter-panel select, .relationship-filter-panel .button, .segment-filter-panel label, .segment-filter-panel select, .segment-filter-panel .button { width: 100%; min-width: 0; }
  .employee-center-hero { grid-template-columns: 1fr; }.employee-center-actions { flex-wrap: wrap; }.employee-center-facts { grid-template-columns: repeat(2, 1fr); margin-left: 0; }.employee-center-grid, .employee-center-bottom { grid-template-columns: 1fr; }.employee-center-grid > article:nth-child(5) { grid-column: auto; }.employee-performance { grid-template-columns: 1fr; }.employee-performance header { grid-column: auto; }
  .employee-center-profile { align-items: flex-start; }
  .employee-center-profile > div { min-width: 0; }
  .employee-kpis { grid-template-columns: 1fr; }
  .employee-kpis article { border-right: 0; border-bottom: 1px solid var(--line); }
  .employee-kpis article:last-child { border-bottom: 0; }
  .employee-list-controls { grid-template-columns: 1fr; gap: 10px; }
  .employee-list-controls > .button { width: 100%; min-height: 46px; }
  .employee-list-controls .relationship-order { display: grid; grid-template-columns: 1fr; gap: 6px; width: 100%; white-space: normal; }
  .employee-list-controls .relationship-order select { width: 100%; min-width: 0; min-height: 46px; }
  .employee-filter-panel { grid-template-columns: 1fr; align-items: stretch; }
  .supplier-list-controls, .supplier-filter-panel { grid-template-columns: 1fr; }
  .supplier-list-controls > .button { grid-column: auto; }
  .supplier-origin-options, .supplier-origin-input, .supplier-address-grid { grid-template-columns: 1fr; }
  .supplier-origin-input small { grid-column: auto; }
  .supplier-address-grid .supplier-cep-action { width: 100%; }
  .employee-filter-panel select { width: 100%; min-width: 0; }
  .crm-period-filter { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 10px; }
  .crm-period-filter label, .crm-period-filter input, .crm-period-filter .button { width: 100%; min-width: 0; }
  .crm-period-filter > span:not(.crm-period-end-label) { display: none; }
  .crm-period-end-label { display: block; }
  .crm-period-filter .button { min-height: 52px; }
  .team-kpis, .team-overview-main, .team-overview-bottom { grid-template-columns: 1fr; }
  .team-performance-card { overflow: hidden; }.team-performance-head, .team-performance-row { min-width: 0; }
  .pet-filter-panel { grid-template-columns: 1fr; }
  .marketing-whatsapp-float { right: 14px; bottom: 14px; width: 145px; min-height: 54px; padding-left: 52px; }
  .marketing-whatsapp-mark { left: 7px; width: 38px; height: 38px; }
  .marketing-whatsapp-mark img { width: 30px; height: 30px; }
  .marketing-whatsapp-copy strong { font-size: 14px; }
  .marketing-whatsapp-copy > span { font-size: 12px; }
  .modal-card.client-create-modal-card { width: 100%; max-height: calc(100vh - 24px); padding: 16px; border-radius: 16px; }
  .modal-card.clinical-pdf-modal-card { width: calc(100vw - 24px); padding: 16px; border-radius: 16px; }
  .clinical-pdf-modal-card .clinical-pdf-preview { height: calc(100vh - 220px); min-height: 380px; }
  .modal-card.client-create-modal-card:has(.package-create-form) { padding: 16px; }
  .package-form-header { grid-template-columns: 44px minmax(0, 1fr) 36px; gap: 10px; }
  .package-form-header > i { width: 44px; height: 44px; border-radius: 12px; }
  .package-form-header h2 { font-size: 21px; }
  .package-form-header p { font-size: 11px; }
  .package-form-section { padding: 14px; }
  .package-info-grid { grid-template-columns: 1fr; grid-template-areas: "name" "validity" "price" "description"; gap: 14px; }
  .subscription-info-grid { grid-template-columns: 1fr; gap: 14px; }
  .package-service-table { max-height: 340px; }
  .package-financial-summary > header { align-items: flex-start; flex-direction: column; }
  .package-financial-equation { grid-template-columns: 1fr; }
  .package-financial-equation > b { line-height: 1; text-align: center; }
  .package-form-footer { bottom: -16px; display: grid; grid-template-columns: 1fr 1fr; margin: 0 -16px -16px; padding: 12px 16px; }
  .package-form-footer .button, .package-link-action { width: 100%; }
  .package-link-action { grid-column: 1 / -1; }
  .package-link-action .button { width: 100%; }
  .package-pet-toolbar { grid-template-columns: 1fr; }
  .package-pet-footer > span { grid-column: 1 / -1; display: grid; justify-items: start; margin: 0 0 4px; }
  .client-create-modal-header { margin-bottom: 12px; }
  .client-create-grid { grid-template-columns: 1fr; }
  .client-cep-action { align-self: auto; }
  .client-create-footer { position: static; display: grid; grid-template-columns: 1fr; }
  .client-create-footer .button { width: 100%; }
  .client-list-controls { grid-template-columns: 1fr; }
  .client-list-controls > * { grid-column: auto; }
  .client-advanced-filter { width: 100%; }
  .client-list-pagination { align-items: flex-start; flex-direction: column; }
  .client-list-pagination .pagination-controls { align-self: center; }
  .client-list-tip { align-items: flex-start; }
  .appointment-create-heading h1 { font-size: 25px; }
  .appointment-create-main, .appointment-summary-panel { padding: 16px; border-radius: 12px; }
  .appointment-create-main .modal-actions { margin: 20px -16px -16px; padding: 14px 16px; }
  .appointment-create-main .modal-actions .button { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
  .table-toolbar { align-items: flex-start; flex-direction: column; }
  .table-toolbar-actions { width: 100%; align-items: flex-start; flex-direction: column; }
  .table-toolbar-actions .button { width: 100%; }
  .marketing-screen { padding-top: 148px; }
  #top, #recursos, #funcionalidades, #planos, #depoimentos, #faq, #contato { scroll-margin-top: 176px; }
  .marketing-nav { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
  .marketing-nav .brand { width: 100%; }
  .marketing-nav .brand-logo { width: min(188px, 58vw); }
  .marketing-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
    gap: 10px;
    justify-content: stretch;
  }
  .marketing-actions .button,
  .marketing-actions .text-button {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 14px;
    justify-content: center;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  .marketing-actions .text-button {
    border: 1px solid var(--line);
    background: #fff;
  }
  .hero-copy h1 { font-size: 40px; }
  .checkout-screen { padding: 18px; }
  .checkout-summary h1 { font-size: 34px; }
  .compact-grid { grid-template-columns: 1fr; }
  .hero-copy p { font-size: 16px; }
  .hero-actions .button { width: 100%; }
  .hero-proof { display: grid; gap: 10px; }
  .stats-band { grid-template-columns: 1fr; }
  .auth-panel { padding: 28px 22px; }
  .topbar {
    height: auto;
    min-height: 96px;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 18px 14px;
  }
  .menu-toggle { order: 1; width: 44px; height: 44px; }
  .topbar-actions { order: 1; margin-left: auto; gap: 8px; }
  .search-box {
    order: 2;
    flex: 0 0 100%;
    max-width: none;
    min-height: 46px;
    margin: 0;
    padding: 0 14px;
    border-radius: 14px;
  }
  .search-box > span .ui-icon { width: 20px; height: 20px; }
  .user-menu-trigger { gap: 8px; padding: 4px 0 4px 4px; }
  .user-menu-trigger > span { width: 42px; height: 42px; }
  .user-menu-trigger i { width: 36px; height: 42px; }
  .user-menu-dropdown { right: 0; top: calc(100% + 8px); z-index: 90; }
  .notification-popover { right: 18px; top: 64px; z-index: 90; }
  .heading-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .heading-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 12px 10px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  .calendar-commandbar { align-items: stretch; flex-direction: column; }
  .calendar-nav { flex-wrap: wrap; }
  .calendar-nav strong { width: 100%; margin: 4px 0 0; }
  .calendar-view-toggle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .calendar-view-toggle button { padding-inline: 8px; }
  .schedule-board { padding: 10px; }
  /* Keep the weekly planner readable on phones instead of squeezing seven days into tiny cards. */
  .schedule-board:has(.week-view) {
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    -webkit-overflow-scrolling: touch;
  }
  .schedule-board:has(.week-view) .teams-calendar {
    min-width: calc((100vw - 36px) * 7);
    margin: 0;
  }
  /* Cada dia ocupa toda a largura útil do telefone. O horário segue visível
     dentro do cartão do atendimento, evitando uma grade comprimida ou cortada. */
  .week-view { grid-template-columns: repeat(7, minmax(calc(100vw - 36px), 1fr)); }
  .week-view .time-head,
  .week-view .calendar-time { display: none; }
  .week-view > .calendar-head,
  .week-view > .calendar-cell { scroll-snap-align: start; }
  .week-view .calendar-head { min-height: 70px; padding: 12px 14px; }
  .week-view .calendar-time { padding-top: 14px; font-size: 10px; }
  .week-view .week-calendar-cell { height: auto; min-height: 88px; padding: 6px; gap: 5px; }
  .week-view .week-card-stack { gap: 5px; }
  .week-view .week-appointment-card {
    height: var(--week-appointment-height, 66px);
    min-height: 66px;
    padding: 8px 9px;
  }
  .week-view .calendar-pill.week-appointment-card > .week-card-main {
    grid-template-columns: 32px minmax(0, 1fr) auto 20px;
    grid-template-areas: "photo info timing status" "photo info count status";
    column-gap: 8px;
    row-gap: 5px;
  }
  .week-view .week-card-main .calendar-pet-photo { width: 32px; height: 32px; font-size: 10px; }
  .week-view .week-card-info strong { font-size: 11px; }
  .week-view .week-card-info small { font-size: 9px; }
  .week-view .week-card-timing strong { font-size: 10px; }
  .week-view .week-card-timing small { font-size: 9px; }
  .week-view .week-card-service-count { padding: 3px 6px; font-size: 9px; }
  .week-view .week-appointment-card .calendar-pill-status { width: 20px; height: 20px; }
  .week-view .week-appointment-card .calendar-pill-status .ui-icon { width: 11px; height: 11px; }
  .week-view .week-cell-actions { flex: 0 0 44px; min-height: 44px; align-self: stretch; }
  .week-view .week-add-appointment,
  .week-view .week-overflow-trigger { min-height: 44px; height: 44px; }
  .week-view .calendar-pill.available.week-add-appointment strong { font-size: 22px; }
  .week-view .week-overflow-popover { width: 280px; max-height: 320px; }
  .appointment-list-toolbar { align-items: stretch; flex-direction: column; }
  .appointment-list-bulkbar { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; }
  .appointment-list-bulkbar label { grid-column: 1 / -1; margin: 0; }
  .appointment-list-bulkbar .button { width: 100%; }
  .appointment-list-sidebar { grid-template-columns: 1fr; }
  .appointment-list-date-range { grid-template-columns: 1fr; }
  .appointment-list-date-range > label { min-width: 0; }
  .appointment-list-filters { padding: 16px; }
  .agenda-legend-filters.schedule-filters { gap: 14px; }
  .schedule-filters > label,
  .schedule-filters > .schedule-multiselect { min-width: 0; }
  .agenda-legend-filters.schedule-filters {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    max-width: 100%;
  }
  .agenda-legend-filters.schedule-filters > label {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .agenda-legend-filters.schedule-filters #schedule-date {
    display: block;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
  }
  .schedule-multiselect summary { min-height: 48px; }
  .day-calendar-row { grid-template-columns: 52px minmax(0, 1fr); }
  .day-calendar-row > time { padding-inline: 5px; }
  .day-appointment-card-wrap { grid-template-columns: minmax(0, 1fr) auto; }
  .day-appointment-card-wrap .calendar-pill { grid-column: 1 / -1; }
  .day-navigation-actions { grid-column: 1; flex-direction: row; justify-content: flex-end; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
  .day-navigation-status { grid-column: 2; grid-row: 2; margin: 0 12px 0 0; }
  .day-navigation-link { min-width: 0; flex: 1 1 0; }
  .day-free-slot { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding-inline: 10px; }
  .day-free-slot small { display: none; }
  .day-slot-group-header { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 6px; }
  .day-slot-statuses { grid-column: 1 / -1; justify-content: flex-start; padding-left: 34px; }
  .day-slot-more { grid-column: 3; grid-row: 1; }
  .day-appointment-main { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
  .day-appointment-photo { width: 34px; height: 34px; }
  .day-appointment-timing { grid-column: 2; grid-row: 2; text-align: left; }
  .day-appointment-service-count { grid-column: 3; grid-row: 1 / span 2; }
  .day-appointment-status { display: none; }
  .day-service-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main status"
      "navigation navigation";
    gap: 0;
    padding: 0;
  }
  .day-service-main {
    grid-area: main;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 10px 12px;
  }
  .day-service-employee {
    grid-column: auto;
    overflow: visible;
    white-space: normal;
  }
  .day-service-navigation {
    grid-area: navigation;
    width: auto;
    justify-self: start;
    padding: 0 10px 10px;
  }
  .day-service-navigation:empty { display: none; }
  .day-service-row > .status {
    grid-area: status;
    align-self: center;
    margin: 0 10px 0 0;
  }
  .day-summary-content { grid-template-columns: 94px minmax(0, 1fr); gap: 12px; }
  .day-summary-ring { width: 90px; height: 90px; }
  .day-summary-ring::before { width: 66px; height: 66px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .agenda-period-control { width: 100%; flex-wrap: wrap; }
  .agenda-period-control strong { order: -1; width: 100%; text-align: left; }
  .agenda-overview-metrics { grid-template-columns: 1fr; }
  .agenda-occupancy-card, .agenda-capacity-card { grid-column: auto; }
  .agenda-week-bars { gap: 5px; padding-inline: 12px; }
  .agenda-free-days a { flex-basis: calc(50% - 4px); }
  .day-overview-grid { grid-template-columns: 1fr; padding: 14px; }
  .day-card-wide { grid-column: auto; padding-right: 18px; }
  .occupancy-ring { position: relative; right: auto; top: auto; width: 76px; height: 76px; margin-top: 4px; transform: none; }
  .today-timeline-row { grid-template-columns: 14px 52px 40px minmax(0, 1fr); }
  .today-timeline-row .status { grid-column: 4; justify-self: start; }
  .form-grid { grid-template-columns: 1fr; }
  .segment-choice-grid, .segment-rule-grid { grid-template-columns: 1fr; }
  .segment-builder-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .segment-relation > div { flex-direction: column; }
  .service-combo-options { grid-template-columns: 1fr; max-height: 230px; }
  .service-combo-summary { align-items: flex-start; flex-direction: column; gap: 2px; }
  .package-benefit-options { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .service-assignment-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .service-assignment-row select { grid-column: 1 / -1; }
  .span-2 { grid-column: span 1; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .data-table { min-width: 700px; }
  .table-panel { overflow-x: auto; }
  .appointment-row { grid-template-columns: 56px 1fr; }
  .appointment-row .status { display: none; }
  .detail-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 0;
  }
  .detail-row-profile { grid-template-columns: 56px minmax(0, 1fr); }
  .detail-row > strong { white-space: normal; }
  .detail-row-supplier-product { grid-template-columns: minmax(0, 1fr) auto; }
  .detail-row .status, .detail-meta { justify-self: start; }
}

@media (max-width: 820px) {
  .team-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-overview-main, .team-overview-bottom { grid-template-columns: 1fr; }
  .team-performance-card { overflow: hidden; }
  .team-performance-head, .team-performance-row { min-width: 0; }
  .team-period-select { width: 100%; }
}

/* Sistema visual compartilhado das Visões Gerais. O escopo por rota evita
   interferência nos cadastros e listas dos mesmos módulos. */
.overview-page {
  --overview-gap: 16px;
  --overview-radius: 14px;
  --overview-border: #e2e7e3;
  --overview-shadow: 0 5px 18px rgba(29, 55, 42, .045);
  --overview-green: #26705a;
  --overview-blue: #4189e8;
  --overview-purple: #7657b5;
  --overview-amber: #b97a18;
  --overview-red: #bd4f4a;
  --overview-pink: #bd5277;
}

.overview-page .page-heading {
  min-height: 64px;
  align-items: center;
  margin-bottom: 22px;
}
.overview-page .page-heading h1 { font-size: 28px; line-height: 1.15; }
.overview-page .page-heading p { max-width: 720px; margin-top: 6px; font-size: 12px; }
.overview-page .heading-actions { align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.overview-page :is(.catalog-period-field, .team-period-select, .crm-period-filter) {
  min-height: 48px;
  border: 1px solid var(--overview-border);
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
}
.overview-page :is(.catalog-period-field, .team-period-select) {
  min-width: 194px;
  padding: 6px 11px;
}
.overview-page :is(.catalog-period-field, .team-period-select) select {
  min-height: 24px;
  padding: 0 24px 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  font: 800 12px "Montserrat";
}
.overview-page .crm-period-filter { align-items: end; padding: 6px 8px; }
.overview-page .crm-period-filter label { gap: 2px; font-size: 9px; }
.overview-page .crm-period-filter input {
  width: 132px;
  min-height: 26px;
  padding: 2px 5px;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  font-size: 11px;
}
.overview-page .crm-period-filter > span { padding-bottom: 6px; }
.overview-page .crm-period-filter .button,
.overview-page[data-overview-route="employees-overview"] .heading-actions > .button {
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 11px;
}
.overview-page .crm-period-filter .button { min-height: 34px; color: var(--overview-green); background: #edf6ef; }

.overview-page[data-overview-route="inventory-overview"] .page-heading { margin-bottom: 16px; }
.inventory-overview-period { display: flex; align-items: end; gap: 8px; padding: 7px 9px; border: 1px solid var(--overview-border); border-radius: 11px; background: #fff; }
.inventory-overview-period label { display: grid; gap: 3px; color: var(--muted); font-size: 9px; font-weight: 800; }
.inventory-overview-period input { width: 122px; min-height: 27px; padding: 2px 4px; border: 0; border-radius: 5px; box-shadow: none; font-size: 11px; }
.inventory-overview-period > span { padding-bottom: 6px; color: var(--muted); font-size: 10px; }
.inventory-overview-period .button { min-height: 34px; padding: 7px 10px; color: var(--overview-green); background: #edf6ef; font-size: 10px; }
.inventory-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--overview-gap); margin-bottom: var(--overview-gap); }
.inventory-metric { display: grid; grid-template-columns: var(--icon-badge-size) minmax(0, 1fr); gap: 11px; min-height: 144px; padding: 16px; border: 1px solid var(--overview-border); border-radius: var(--overview-radius); background: #fff; box-shadow: var(--overview-shadow); }
.inventory-metric > i { display: grid; width: var(--icon-badge-size); height: var(--icon-badge-size); place-items: center; border-radius: var(--icon-badge-radius); color: var(--overview-green); background: #eaf5ed; }
.inventory-metric > i .ui-icon { width: 20px; }
.inventory-metric > div { min-width: 0; }.inventory-metric small, .inventory-metric span, .inventory-metric a { display: block; }.inventory-metric small { color: var(--ink); font-size: 10px; font-weight: 800; }.inventory-metric strong { display: block; margin: 5px 0 3px; font: 800 26px/1 "Montserrat"; }.inventory-metric span { color: var(--muted); font-size: 9px; line-height: 1.35; }.inventory-metric a { margin-top: 8px; color: var(--overview-green); font-size: 9px; font-weight: 800; text-decoration: none; }.inventory-metric a .ui-icon { width: 12px; vertical-align: middle; }.inventory-metric.amber > i { color: var(--overview-amber); background: #fff4e2; }.inventory-metric.red > i { color: var(--overview-red); background: #fff0ef; }.inventory-metric.blue > i { color: var(--overview-blue); background: #edf5fe; }.inventory-metric.purple > i { color: var(--overview-purple); background: #f2effa; }
.inventory-overview-top { display: grid; grid-template-columns: 1.1fr 1.15fr 1fr; gap: var(--overview-gap); margin-bottom: var(--overview-gap); }
.inventory-overview-bottom { display: grid; grid-template-columns: 1.15fr .7fr 1.2fr; gap: var(--overview-gap); margin-bottom: var(--overview-gap); }
.inventory-card { min-width: 0; overflow: hidden; border: 1px solid var(--overview-border); border-radius: var(--overview-radius); background: #fff; box-shadow: var(--overview-shadow); }.inventory-card > header { padding: 16px 17px 13px; border-bottom: 1px solid #edf0ed; }.inventory-card > header h2 { margin: 0; color: var(--ink); font: 800 14px "Montserrat"; }.inventory-card > header h2 .ui-icon { width: 16px; color: var(--overview-amber); vertical-align: -3px; }.inventory-card > header p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.inventory-attention-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 13px 16px; border-bottom: 1px solid #edf0ed; }.inventory-attention-row > i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; }.inventory-attention-row > i .ui-icon { width: 17px; }.inventory-attention-row strong, .inventory-attention-row small { display: block; }.inventory-attention-row strong { font-size: 11px; }.inventory-attention-row small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.3; }.inventory-attention-row > b { grid-column: 3; grid-row: 1; font-size: 10px; }.inventory-attention-row > a { grid-column: 3; grid-row: 2; color: var(--overview-green); font-size: 9px; font-weight: 800; text-decoration: none; white-space: nowrap; }.inventory-attention-row > a .ui-icon { width: 11px; vertical-align: middle; }.inventory-attention-row.red > i { color: var(--overview-red); background: #fff0ef; }.inventory-attention-row.red > b { color: var(--overview-red); }.inventory-attention-row.amber > i { color: var(--overview-amber); background: #fff4e2; }.inventory-attention-row.amber > b { color: var(--overview-amber); }.inventory-attention-row.blue > i { color: var(--overview-blue); background: #edf5fe; }.inventory-attention-row.blue > b { color: var(--overview-blue); }
.inventory-category-content { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 15px; align-items: center; padding: 18px 16px; }.inventory-donut { display: grid; width: 130px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--donut)); }.inventory-donut::before { content: ""; position: absolute; width: 76px; aspect-ratio: 1; border-radius: 50%; background: #fff; }.inventory-donut span { position: relative; z-index: 1; display: grid; place-items: center; }.inventory-donut small { color: var(--muted); font-size: 9px; }.inventory-donut strong { margin: 2px 0; font: 800 23px/1 "Montserrat"; }.inventory-category-list { display: grid; gap: 8px; }.inventory-category-list > div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; font-size: 9px; }.inventory-category-list i { width: 7px; height: 7px; border-radius: 50%; }.inventory-category-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.inventory-category-list b { font-size: 9px; white-space: nowrap; }.inventory-category-list em { color: var(--muted); font-style: normal; }.inventory-card footer { display: flex; align-items: center; gap: 5px; min-height: 39px; padding: 10px 16px; border-top: 1px solid #edf0ed; color: var(--muted); font-size: 9px; }.inventory-card footer a { margin-left: auto; color: var(--overview-green); font-weight: 800; text-decoration: none; white-space: nowrap; }.inventory-card footer a .ui-icon { width: 12px; vertical-align: middle; }
.inventory-donut { position: relative; }
.inventory-suppliers ol { margin: 0; padding: 4px 16px 7px; list-style: none; }.inventory-suppliers li { display: grid; grid-template-columns: 19px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f2f0; }.inventory-suppliers li:last-child { border-bottom: 0; }.inventory-suppliers li > span { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: var(--muted); background: #f1f3f1; font-size: 9px; font-weight: 800; }.inventory-suppliers li strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.inventory-suppliers li b { font-size: 9px; }
.inventory-movement-summary > div { display: grid; grid-template-columns: repeat(4, 1fr); padding: 21px 15px; }.inventory-movement-summary section { display: grid; justify-items: center; gap: 5px; text-align: center; }.inventory-movement-summary section > i { display: grid; width: var(--icon-badge-size); height: var(--icon-badge-size); place-items: center; border-radius: var(--icon-badge-radius); }.inventory-movement-summary section > i .ui-icon { width: 18px; }.inventory-movement-summary small { color: var(--muted); font-size: 9px; }.inventory-movement-summary strong { font: 800 21px/1 "Montserrat"; }.inventory-movement-summary b { font-size: 9px; }
.inventory-last-inventory { display: grid; grid-template-rows: auto 1fr auto; }.inventory-last-inventory-date { display: flex; gap: 11px; align-items: center; padding: 20px 16px; }.inventory-last-inventory-date > i { display: grid; width: var(--icon-badge-size); height: var(--icon-badge-size); place-items: center; border-radius: var(--icon-badge-radius); color: var(--overview-green); background: #eaf5ed; }.inventory-last-inventory-date > i .ui-icon { width: 20px; }.inventory-last-inventory-date strong, .inventory-last-inventory-date small { display: block; }.inventory-last-inventory-date strong { font: 800 16px "Montserrat"; }.inventory-last-inventory-date small { margin-top: 4px; color: var(--muted); font-size: 9px; }.inventory-divergence { display: flex; align-items: center; gap: 7px; margin: 0 16px 16px; padding: 10px; border-radius: 8px; color: #3e7857; background: #edf7f0; font-size: 10px; font-weight: 800; }.inventory-divergence .ui-icon { width: 17px; }
.inventory-recent-movements > div { padding: 2px 16px 4px; }.inventory-recent-movements section { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f2f0; }.inventory-recent-movements section:last-child { border-bottom: 0; }.inventory-recent-movements .pet-avatar { width: 28px; height: 28px; font-size: 9px; }.inventory-recent-movements section > div strong, .inventory-recent-movements section > div small { display: block; }.inventory-recent-movements section > div strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.inventory-recent-movements section > div small { color: var(--muted); font-size: 8px; }.inventory-recent-movements .movement-type { padding: 4px 6px; font-size: 8px; }.inventory-recent-movements .movement-type::before { width: 4px; height: 4px; }.inventory-recent-movements section > b { font-size: 9px; white-space: nowrap; }.inventory-recent-movements section > b.positive { color: #287a58; }.inventory-recent-movements section > b.negative { color: #c34d48; }.inventory-recent-movements time { grid-column: 2 / -1; color: var(--muted); font-size: 8px; }
.inventory-overview-footer { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--overview-gap); }.inventory-overview-footer article { display: flex; align-items: center; gap: 11px; min-height: 74px; padding: 14px 16px; border: 1px solid var(--overview-border); border-radius: var(--overview-radius); background: #f8fbf8; }.inventory-overview-footer article > .ui-icon { width: 25px; height: 25px; flex: none; color: #cb9c21; }.inventory-overview-footer article:nth-child(2) > .ui-icon { color: var(--overview-green); }.inventory-overview-footer strong { display: block; font: 800 11px "Montserrat"; }.inventory-overview-footer p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.4; }.inventory-overview-footer .button { min-height: 34px; margin-left: auto; padding: 7px 10px; white-space: nowrap; font-size: 10px; }

.overview-page :is(.catalog-kpis, .team-kpis, .crm-metrics-six) {
  gap: var(--overview-gap);
  margin: 0 0 var(--overview-gap);
}
.overview-page :is(.catalog-kpis article, .team-kpis article, .crm-metrics-six .metric-card) {
  min-height: 176px;
  padding: 18px;
  border: 1px solid var(--overview-border);
  border-radius: var(--overview-radius);
  background: #fff;
  box-shadow: var(--overview-shadow);
}
.overview-page .team-kpis article {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-content: start;
}
.overview-page .team-kpis article > div { min-width: 0; }
.overview-page :is(.catalog-kpis article > .ui-icon, .team-kpis article > .ui-icon, .crm-metrics-six .metric-icon) {
  width: var(--icon-badge-size);
  height: var(--icon-badge-size);
  margin: 0 0 16px;
  padding: 9px;
  border-radius: var(--icon-badge-radius);
}
.overview-page .crm-metrics-six .metric-icon { padding: 0; }
.overview-page :is(.catalog-kpis small, .team-kpis small, .crm-metrics-six .metric-card > small) {
  min-height: 0;
  margin: 0;
  color: #526058;
  font: 700 11px/1.35 "Montserrat";
}
.overview-page :is(.catalog-kpis strong, .team-kpis strong, .crm-metrics-six .metric-card > strong) {
  display: block;
  margin: 6px 0 5px;
  color: var(--ink);
  font: 800 27px/1.08 "Montserrat";
}
.overview-page :is(.catalog-kpis span, .team-kpis span, .crm-metrics-six .trend) {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}
.overview-page .crm-metrics-six .metric-card .trend {
  min-height: 52px;
  margin-top: 0;
  color: currentColor;
}
.overview-page .crm-metrics-six .crm-sparkline { margin-top: 6px; }
.overview-page .team-kpis a { margin-top: 6px; }
.overview-page .team-kpis article:first-child strong { color: var(--ink); }

.overview-page :is(.catalog-overview-grid, .team-overview-main, .team-overview-bottom, .crm-overview-primary-grid, .crm-overview-analytics-grid, .crm-bottom-insights) {
  gap: var(--overview-gap);
}
.overview-page :is(.team-overview-bottom, .crm-overview-analytics-grid) { margin-top: var(--overview-gap); }
.overview-page .crm-bottom-insights { margin-top: var(--overview-gap); }
.overview-page :is(.catalog-overview-card, .team-overview-card, .crm-panel) {
  border: 1px solid var(--overview-border);
  border-radius: var(--overview-radius);
  background: #fff;
  box-shadow: var(--overview-shadow);
}
.overview-page :is(.catalog-overview-card > header, .crm-panel .panel-header) {
  min-height: 78px;
  padding: 17px 18px;
  border-bottom: 1px solid #edf0ed;
}
.overview-page .team-overview-card { padding: 18px; }
.overview-page .team-overview-card header { min-height: 43px; margin-bottom: 15px; }
.overview-page :is(.catalog-overview-card > header h2, .team-overview-card h2, .crm-panel .panel-header h2) {
  margin: 0;
  color: var(--ink);
  font: 800 15px/1.3 "Montserrat";
}
.overview-page :is(.catalog-overview-card > header p, .team-overview-card header p) {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.overview-page .catalog-overview-card > header .button {
  min-height: 30px;
  padding: 4px 0;
  border: 0;
  color: var(--overview-green);
  background: transparent;
  font-size: 11px;
  box-shadow: none;
}
.overview-page .catalog-overview-card > header .button::after { content: "\2192"; }
.overview-page :is(.catalog-overview-card > header .button, .team-card-link, .crm-panel .panel-header a, .crm-panel .text-button) {
  color: var(--overview-green);
  font-weight: 800;
}

.overview-page :is(.catalog-category-donut, .team-donut, .crm-donut) {
  filter: drop-shadow(0 5px 10px rgba(29, 55, 42, .06));
}
.overview-page .team-line-capacity { stroke: var(--overview-green); }
.overview-page .team-line-demand { stroke: var(--overview-blue); }
.overview-page .team-chart-legend span::before { background: var(--overview-green); }
.overview-page .team-chart-legend span:last-child::before { background: var(--overview-blue); }

.overview-page :is(.catalog-overview-footer-note, .team-overview-note) {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 100px;
  margin: var(--overview-gap) 0 0;
  padding: 18px;
  border: 1px solid var(--overview-border);
  border-radius: var(--overview-radius);
  color: #52675b;
  background: #f7faf8;
  box-shadow: var(--overview-shadow);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}
.overview-page :is(.catalog-overview-footer-note, .team-overview-note) .ui-icon {
  width: 40px;
  height: 40px;
  padding: 11px;
  border-radius: 11px;
  color: var(--overview-green);
  background: #e5f4ea;
}
.overview-page .crm-bottom-insights > :is(.crm-campaign-panel, .crm-insight-panel) {
  min-height: 112px;
  border: 1px solid var(--overview-border);
  border-radius: var(--overview-radius);
  box-shadow: var(--overview-shadow);
}

@media (max-width: 1280px) {
  .overview-page .catalog-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .overview-page .team-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .overview-page .page-heading { align-items: flex-start; flex-direction: column; }
  .overview-page .heading-actions { width: 100%; justify-content: stretch; }
  .overview-page :is(.catalog-period-field, .team-period-select, .crm-period-filter) { width: 100%; }
  .overview-page[data-overview-route="employees-overview"] .heading-actions > .button { width: 100%; }
  .overview-page :is(.catalog-kpis, .team-kpis, .crm-metrics-six) { grid-template-columns: 1fr; }
  .overview-page :is(.catalog-kpis article, .team-kpis article, .crm-metrics-six .metric-card) { min-height: 164px; }
}

/* Agenda adota o mesmo sistema sem perder os componentes operacionais próprios. */
.overview-page[data-overview-route="appointments-overview"] .heading-actions { gap: 10px; }
.overview-page .agenda-period-control {
  min-height: 48px;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--overview-border);
  border-radius: 11px;
  background: #fff;
}
.overview-page .agenda-period-control .icon-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: #f6f8f6;
}
.overview-page .agenda-period-control .button {
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--overview-green);
  background: #edf6ef;
  font-size: 10px;
}
.overview-page .agenda-period-control strong {
  min-width: 144px;
  padding: 0 8px;
  font: 800 11px "Montserrat";
}
.overview-page[data-overview-route="appointments-overview"] .heading-actions > .button-primary {
  min-height: 48px;
  padding: 10px 15px;
  border-radius: 11px;
  font-size: 11px;
}

.overview-page .agenda-overview-metrics {
  gap: var(--overview-gap);
  margin-bottom: var(--overview-gap);
}
.overview-page .agenda-overview-metrics > article {
  min-height: 176px;
  padding: 18px;
  border: 1px solid var(--overview-border);
  border-radius: var(--overview-radius);
  background: #fff;
  box-shadow: var(--overview-shadow);
}
.overview-page .agenda-overview-metrics .metric-icon {
  width: var(--icon-badge-size);
  height: var(--icon-badge-size);
  border-radius: var(--icon-badge-radius);
}
.overview-page .agenda-overview-metrics small {
  color: #526058;
  font: 700 11px/1.35 "Montserrat";
}
.overview-page .agenda-overview-metrics em { margin-top: 2px; font-size: 10px; }
.overview-page .agenda-quality-card > small { margin-top: 16px; }
.overview-page .agenda-quality-card > strong,
.overview-page .agenda-capacity-card > strong {
  margin-top: 6px;
  color: var(--ink);
  font: 800 27px/1.08 "Montserrat";
}
.overview-page .agenda-quality-card > p { color: var(--muted); font-size: 10px; font-weight: 700; }
.overview-page .agenda-metric-delta { color: var(--overview-green); font-weight: 800; }

.overview-page :is(.agenda-chart-grid, .agenda-management-grid) { gap: var(--overview-gap); }
.overview-page .agenda-chart-grid { margin-bottom: var(--overview-gap); }
.overview-page :is(.agenda-chart-grid > .panel, .agenda-management-grid > .panel) {
  border: 1px solid var(--overview-border);
  border-radius: var(--overview-radius);
  background: #fff;
  box-shadow: var(--overview-shadow);
}
.overview-page :is(.agenda-chart-grid, .agenda-management-grid) .panel-header {
  min-height: 72px;
  padding: 17px 18px;
  border-bottom: 1px solid #edf0ed;
}
.overview-page :is(.agenda-chart-grid, .agenda-management-grid) .panel-header h2 {
  margin: 0;
  color: var(--ink);
  font: 800 15px/1.3 "Montserrat";
}
.overview-page .agenda-chart-card .panel-header small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}
.overview-page .agenda-management-grid .panel-header a {
  color: var(--overview-green);
  font-size: 11px;
  font-weight: 800;
}
.overview-page .agenda-week-bars i { background: var(--overview-green); }
.overview-page .agenda-horizontal-row i { background: var(--overview-purple); }
.overview-page :is(.agenda-week-bars, .agenda-horizontal-row) i.occupancy-low { background: #4e9a64; }
.overview-page :is(.agenda-week-bars, .agenda-horizontal-row) i.occupancy-medium { background: #dfaa25; }
.overview-page :is(.agenda-week-bars, .agenda-horizontal-row) i.occupancy-high { background: #cc554f; }
.overview-page .agenda-ring {
  --agenda-occupancy-tone: #4e9a64;
  background: conic-gradient(from -90deg, var(--agenda-occupancy-tone) 0 var(--occupancy), #e5ebe6 var(--occupancy) 100%);
}
.overview-page .agenda-ring.occupancy-medium { --agenda-occupancy-tone: #dfaa25; }
.overview-page .agenda-ring.occupancy-high { --agenda-occupancy-tone: #cc554f; }

.overview-page .agenda-insight-panel {
  min-height: 112px;
  margin-top: var(--overview-gap);
  padding: 18px;
  border: 1px solid var(--overview-border);
  border-radius: var(--overview-radius);
  color: var(--overview-green);
  background: #f7faf8;
  box-shadow: var(--overview-shadow);
}
.overview-page .agenda-insight-panel > i { width: 40px; height: 40px; border-radius: 11px; }
.overview-page .agenda-insight-panel a { color: var(--overview-green); font-weight: 800; }

@media (max-width: 1280px) {
  .overview-page .agenda-overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inventory-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inventory-overview-top, .inventory-overview-bottom { grid-template-columns: 1fr 1fr; }
  .inventory-suppliers { grid-column: span 2; }
  .inventory-recent-movements { grid-column: span 2; }
}

@media (max-width: 820px) {
  .overview-page[data-overview-route="appointments-overview"] .heading-actions,
  .overview-page .agenda-period-control { width: 100%; }
  .overview-page .agenda-period-control { flex-wrap: wrap; }
  .overview-page .agenda-period-control strong { order: -1; width: 100%; min-height: 28px; text-align: left; }
  .overview-page[data-overview-route="appointments-overview"] .heading-actions > .button-primary { width: 100%; }
  .overview-page .agenda-overview-metrics { grid-template-columns: 1fr; }
  .inventory-overview-period { width: 100%; flex-wrap: wrap; }
  .inventory-overview-period label { flex: 1 1 120px; }
  .inventory-overview-period input { width: 100%; }
  .inventory-metrics, .inventory-overview-top, .inventory-overview-bottom, .inventory-overview-footer { grid-template-columns: 1fr; }
  .inventory-suppliers, .inventory-recent-movements { grid-column: auto; }
  .inventory-category-content { grid-template-columns: 110px minmax(0, 1fr); }
  .inventory-donut { width: 110px; }
  .inventory-movement-summary > div { gap: 12px; grid-template-columns: 1fr 1fr; }
}

/* Zoonor 2026 brand system ------------------------------------------------ */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(15, 179, 158, .38);
  outline-offset: 3px;
}
.zoonor-logo-picture { display: block; max-width: 100%; line-height: 0; }
.brand-logo { width: 220px; }
.brand-logo--horizontal,
.brand-logo--horizontal-tagline,
.brand-logo--negative,
.brand-logo--white,
.brand-logo--monochrome,
.brand-logo--primary,
.brand-logo--tagline,
.brand-logo--symbol {
  display: block;
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.brand-logo--horizontal, .brand-logo--negative, .brand-logo--white, .brand-logo--monochrome { width: 202px; }
.brand-logo--primary { width: 132px; }
.brand-logo--tagline { width: 150px; }
.brand-logo--symbol { width: 54px; }
.auth-brand .brand-logo--negative { width: min(290px, 72%); }
.checkout-summary .brand { padding: 0; background: transparent; }
.checkout-summary .brand-logo--negative { width: 220px; }
.sidebar .brand-logo--negative { width: 150px; }
.auth-card-brand { display: flex; justify-content: center; margin: -12px 0 26px; }
.auth-card-logo.brand-logo--tagline { width: 154px; max-height: 175px; }
.marketing-footer .brand-logo--horizontal { width: 180px; }
.policy-header .brand-logo--horizontal { width: 150px; }
.marketing-screen { padding-top: 100px; color: var(--brand-text); background: #fff; }
.marketing-nav { height: 100px; padding-inline: max(40px, calc((100vw - 1440px) / 2 + 40px)); border-color: transparent; background: rgba(255, 255, 255, .97); }
.marketing-nav .brand-logo--horizontal { width: 150px; }
.marketing-nav nav { gap: clamp(20px, 2vw, 34px); font-size: 14px; font-weight: 600; }
.marketing-nav nav a { position: relative; }
.marketing-nav nav a::after { content: ""; position: absolute; right: 0; bottom: -9px; left: 0; height: 2px; border-radius: 2px; background: var(--brand-primary); transform: scaleX(0); transition: transform .2s ease; }
.marketing-nav nav a:hover::after { transform: scaleX(1); }
.marketing-demo-button { min-height: 54px; padding-inline: 28px; font-size: 15px; white-space: nowrap; }
.button { border-radius: 11px; font-weight: 600; }
.button-primary { background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); box-shadow: 0 10px 24px rgba(13, 122, 110, .2); }
.button-primary:hover { box-shadow: 0 14px 30px rgba(13, 122, 110, .28); }
.button-secondary { color: var(--brand-secondary); background: #e5f8f5; }
.button-light { color: var(--brand-secondary); border-color: #9bdcd4; background: #fff; }
.button-light:hover { border-color: var(--brand-primary); background: #f4fffd; }
.marketing-screen main { max-width: 1440px; padding-inline: 40px; }
.marketing-hero { min-height: 560px; padding: 48px 0 18px; overflow: visible; }
.marketing-hero::before {
  inset-inline: -40px;
  background:
    radial-gradient(circle, rgba(15, 179, 158, .45) 1.4px, transparent 1.6px) calc(100% - 8px) 68px / 17px 17px no-repeat,
    linear-gradient(180deg, #fff 0%, #fff 82%, #fbfdfe 100%);
}
.hero-copy { position: relative; z-index: 7; width: min(480px, 38%); }
.hero-copy h1 { color: var(--brand-dark); font-size: clamp(42px, 3.5vw, 54px); font-weight: 700; line-height: 1.06; letter-spacing: -.045em; }
.hero-copy h1 em { display: inline; color: var(--brand-secondary); }
.hero-copy h2 { margin: 22px 0 0; color: var(--brand-dark); font: 600 clamp(21px, 1.65vw, 27px)/1.34 "Montserrat"; letter-spacing: -.025em; }
.hero-copy h2 em { color: var(--brand-secondary); font-style: normal; }
.hero-copy p { max-width: 470px; margin: 22px 0 27px; color: #36536c; font-size: 17px; line-height: 1.55; }
.hero-actions { gap: 16px; }
.hero-actions .button { min-height: 52px; padding-inline: 23px; font-size: 14px; text-decoration: none; }
.hero-actions .button span, .marketing-demo-button span { margin-left: 6px; font-size: 22px; line-height: 0; }
.hero-visual { position: absolute; z-index: 2; top: 10px; right: -42px; width: 67%; height: 550px; pointer-events: none; }
.hero-pets { position: absolute; z-index: 3; top: 124px; left: -10%; width: 360px; height: auto; mix-blend-mode: normal; pointer-events: none; }
.hero-visual .product-preview {
  position: absolute; z-index: 2; top: 132px; right: -3%; width: min(650px, 69%); min-height: 0;
  overflow: visible; padding: 11px 11px 27px; border: 5px solid #111; border-radius: 21px 21px 12px 12px;
  background: #111; box-shadow: 0 22px 48px rgba(11, 45, 77, .22); pointer-events: auto;
}
.hero-visual .product-preview::after { content: ""; position: absolute; right: -7%; bottom: -19px; left: -7%; height: 19px; border-radius: 2px 2px 55% 55%; background: linear-gradient(180deg, #dfe2e4, #7f858a 65%, #34383b); box-shadow: 0 8px 12px rgba(11,45,77,.2); }
.product-preview-screen { position: relative; display: block; overflow: hidden; border-radius: 9px; background: #fff; }
.hero-visual .product-preview-screen > img { width: 100%; height: auto; display: block; border-radius: 0; }
.hero-visual .product-preview:hover { transform: translateY(-3px); }
.product-preview-hint { background: rgba(11, 45, 77, .92); }
.hero-benefits { position: relative; z-index: 8; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 12px; padding: 18px 24px; border: 1px solid rgba(11,45,77,.07); border-radius: 17px; background: rgba(255,255,255,.98); box-shadow: 0 12px 34px rgba(11,45,77,.10); }
.hero-benefits article { display: flex; align-items: center; gap: 15px; min-width: 0; padding: 0 20px; border-right: 1px solid rgba(11,45,77,.1); }
.hero-benefits article:last-child { border-right: 0; }
.hero-benefits i { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--brand-secondary); background: #eaf8f6; font-style: normal; }
.hero-benefits i .ui-icon { width: 26px; height: 26px; }
.hero-benefits i.hero-benefit-infinity { font: 600 29px/1 "Montserrat"; }
.hero-benefits strong, .hero-benefits span { display: block; }
.hero-benefits strong { color: var(--brand-dark); font-size: 14px; }
.hero-benefits span { margin-top: 5px; color: #506b7f; font-size: 13px; }
.marketing-section, .pricing-section, .faq-section, .marketing-cta { padding-block: 42px; }
.marketing-section h2, .pricing-section h2, .faq-section h2 { color: var(--brand-dark); font-size: 30px; }
.marketing-features { padding-top: 24px; }
.section-kicker { display: block; margin-bottom: 10px; color: var(--brand-secondary); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-align: center; text-transform: uppercase; }
.marketing-features h2 { margin-bottom: 28px; font-size: clamp(26px, 2.25vw, 34px); line-height: 1.18; }
.marketing-features h2 em { color: var(--brand-secondary); font-style: normal; }
.marketing-features .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.feature-grid article, .pricing-grid article, .testimonial-card, .policy-section, .plans-detail-card { border-color: rgba(11, 45, 77, .1); border-radius: 16px; box-shadow: 0 10px 34px rgba(11, 45, 77, .055); }
.feature-grid article { position: relative; padding: 22px 20px; transition: transform .2s ease, box-shadow .2s ease; }
.feature-grid article:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(11, 45, 77, .1); }
.feature-grid i { width: 46px; height: 46px; color: var(--brand-secondary); background: #e5f8f5; }
.feature-grid i .ui-icon { width: 26px; height: 26px; }
.feature-grid h3 { margin-top: 14px; color: var(--brand-dark); font-size: 15px; }
.feature-grid p { font-size: 12px; line-height: 1.55; }
.feature-new > span { position: absolute; top: 16px; right: 16px; padding: 5px 8px; border-radius: 6px; color: #fff; background: var(--brand-secondary); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.feature-grid p, .pricing-grid p, .faq-section p { color: #506b7f; }
.stats-band { border-color: rgba(13, 122, 110, .14); background: linear-gradient(110deg, #f3fffd, #f2f8fc); }
.stats-band strong { color: var(--brand-secondary); }
.pricing-grid article.featured, .plans-detail-card.featured { border-color: var(--brand-primary); }
.pricing-grid article.featured > span, .plans-popular { background: var(--brand-secondary); }
.marketing-cta { color: #fff; border: 0; background: linear-gradient(125deg, var(--brand-dark), var(--brand-secondary)); box-shadow: 0 20px 48px rgba(11, 45, 77, .18); }
.marketing-cta h2, .marketing-cta p { color: #fff; }
.marketing-cta p { opacity: .78; }
.marketing-cta .button-primary { color: var(--brand-dark); background: #fff; box-shadow: none; }
.marketing-footer { color: #587083; border-color: rgba(11, 45, 77, .1); }
.auth-brand { background: radial-gradient(circle at 86% 20%, rgba(15, 179, 158, .28), transparent 31%), linear-gradient(145deg, #081f36, var(--brand-dark) 58%, #075b63); }
.auth-brand::after { content: ""; position: absolute; right: -70px; bottom: 2%; width: 470px; height: 430px; background: url("/static/branding/zoonor/zoonor-simbolo-colorido.228e371d4b7a.png") center / contain no-repeat; opacity: .1; }
.brand-light { padding: 0; background: transparent; box-shadow: none; }
.auth-brand .brand-logo { width: min(290px, 72%); }
.auth-message h1 { font-weight: 700; }
.auth-message h1 em { color: var(--brand-primary); }
.auth-message p, .auth-proof { color: #c7dbe5; }
.eyebrow { color: var(--brand-accent); }
.proof-avatars span { color: var(--brand-dark); border-color: var(--brand-dark); background: var(--brand-primary); }
.auth-panel { background: linear-gradient(145deg, #f4f8fa, #fff); }
.auth-card { padding: 44px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.auth-card h2 { color: var(--brand-dark); font-weight: 700; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(15, 179, 158, .13); }
.app-shell { grid-template-columns: 270px minmax(0, 1fr); background: var(--brand-background); }
.sidebar { color: #fff; border-right: 0; background: linear-gradient(180deg, #081f36, var(--brand-dark)); box-shadow: 12px 0 34px rgba(11, 45, 77, .08); }
.sidebar .brand { padding-bottom: 22px; }
.sidebar .brand-logo { width: 150px; }
.workspace-card { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .07); }
.workspace-card strong { color: #fff; }
.workspace-card small, .nav-label { color: #89a7b9; }
.workspace-avatar { color: var(--brand-dark); background: var(--brand-primary); }
.main-nav a, .sidebar-footer a, .sidebar-footer button, .nav-group-trigger { color: #b9cfda; }
.main-nav a:hover, .main-nav a.active, .nav-group-trigger:hover, .nav-group.active > .nav-group-trigger { color: #fff; background: rgba(15, 179, 158, .15); }
.main-nav a.active { box-shadow: inset 3px 0 var(--brand-primary); }
.nav-group-trigger > em { color: #89a7b9; }
.nav-group-trigger > b, .main-nav a b { background: var(--brand-secondary); }
.nav-submenu a[data-open-appointment-form]:hover { color: #fff; }
.topbar { border-color: rgba(11, 45, 77, .09); background: rgba(255, 255, 255, .92); }
.search-box, .notification-button { border-color: #dbe5ea; }
.search-box > span, .notification-button, .menu-toggle { color: var(--brand-secondary); }
.user-menu-trigger > span { color: var(--brand-dark); background: #d8f5f1; }
.page-heading h1, .panel-header h2, .metric-card strong { color: var(--brand-dark); }
.metric-card, .panel, .table-panel, .calendar-panel, .empty-state { border-color: rgba(11, 45, 77, .09); box-shadow: 0 8px 28px rgba(11, 45, 77, .055); }
.badge, .status-badge { font-weight: 600; }
.toast, .modal { border-color: rgba(11, 45, 77, .1); box-shadow: 0 22px 64px rgba(11, 45, 77, .2); }
.policy-page, .plans-page { background: radial-gradient(circle at 84% 5%, rgba(15, 179, 158, .1), transparent 28%), #f8fbfc; }
.policy-header { background: rgba(255, 255, 255, .94); }
.policy-hero h1, .plans-hero h1 { color: var(--brand-dark); }
.policy-kicker, .policy-back { color: var(--brand-secondary); }
@media (max-width: 1100px) {
  .marketing-screen { padding-top: 84px; }
  .marketing-nav { height: 84px; }
  .marketing-nav .brand-logo--horizontal { width: 150px; }
  .marketing-hero { display: block; min-height: auto; padding-top: 44px; }
  .hero-copy { width: 100%; max-width: 690px; }
  .hero-visual { position: relative; top: auto; right: auto; width: 100%; height: clamp(390px, 52vw, 530px); margin-top: 16px; }
  .hero-pets { display: none; }
  .hero-visual .product-preview { position: absolute; top: 24px; right: 5%; left: 5%; width: auto; margin-top: 0; }
  .hero-benefits { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .hero-benefits article:nth-child(2) { border-right: 0; }
  .marketing-features .feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .marketing-screen { padding-top: 72px; }
  .marketing-nav { height: 72px; padding-inline: 20px; }
  .marketing-nav .brand-logo { width: min(190px, 50vw); }
  .marketing-screen main { padding-inline: 20px; }
  .marketing-hero { padding-top: 38px; }
  .hero-copy h1 { font-size: clamp(42px, 8vw, 54px); }
  .hero-copy h2 { font-size: 22px; }
  .hero-visual { height: clamp(340px, 55vw, 420px); }
  .hero-visual .product-preview { top: 20px; right: 0; left: 0; width: auto; }
  .hero-benefits { padding: 18px 12px; }
  .hero-benefits article { padding-inline: 14px; }
  .auth-card { padding: 30px 24px; }
  .sidebar { background: linear-gradient(180deg, #081f36, var(--brand-dark)); }
  .topbar { padding-inline: 18px; }
  .topbar-brand { display: flex; order: 2; }
  .topbar-brand .brand-logo--symbol { width: 42px; max-height: 38px; }
  .topbar .search-box { order: 4; }
  .topbar .topbar-actions { order: 3; margin-left: auto; }
  .page-root { padding: 24px 18px; }
}
@media (max-width: 520px) {
  .marketing-nav { display: flex; grid-template-columns: none; align-items: center; gap: 12px; padding: 12px 18px; }
  .marketing-nav .brand { width: auto; min-width: 0; }
  .marketing-nav .zoonor-logo-picture--responsive .brand-logo { width: 52px; max-height: 48px; }
  .policy-header .zoonor-logo-picture--responsive .brand-logo { width: 48px; max-height: 44px; }
  .marketing-actions { width: auto; display: flex; grid-template-columns: none; flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto; }
  .marketing-demo-button { display: none; }
  .marketing-actions .text-button { width: auto; min-height: 42px; padding: 0 18px; border: 1px solid #b7ddd8; border-radius: 10px; color: var(--brand-secondary); background: #fff; }
  .hero-copy h1 { font-size: clamp(40px, 12vw, 54px); }
  .hero-copy h2 { font-size: 20px; }
  .hero-copy p { font-size: 16px; }
  .hero-actions > * { width: 100%; }
  .hero-visual { height: 235px; margin-top: 24px; }
  .hero-pets { display: none; }
  .hero-visual .product-preview { top: 16px; right: 0; width: 100%; padding: 7px 7px 20px; border-width: 4px; }
  .hero-visual .product-preview::after { bottom: -15px; height: 15px; }
  .hero-benefits { grid-template-columns: 1fr; gap: 0; }
  .hero-benefits article { padding-block: 14px; border-right: 0; border-bottom: 1px solid rgba(11,45,77,.1); }
  .hero-benefits article:last-child { border-bottom: 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .marketing-features .feature-grid { grid-template-columns: 1fr; }
  .marketing-cta { align-items: stretch; flex-direction: column; }
  .auth-card { padding: 26px 20px; border-radius: 18px; }
}