/* Real-estate screens. The shell, panels, tables, forms and states come from Koozco.UI (koozco-ui.css);
   the tokens below re-brand it (slate blue and terracotta) without forking components. */
/* Identity of this app: the tokens below are the app's own look ("koozco" theme). They are scoped so a catalog theme (css/koozco-themes.css, ADR 0065)
   replaces them instead of fighting them from a later stylesheet; the dark form restores the dark values of Koozco.UI that the light block would override. */
:root:not([data-koozco-theme]), :root[data-koozco-theme="koozco"] {
  --rz-primary: #2f5d7c;
  --rz-primary-dark: #234862;
  --rz-primary-light: #e8eff5;
  --rz-success: #2c7356;
  --rz-info: #3f6f96;
  --rz-warning: #a35f22;
  --brand: #2f5d7c;
  --ink: #1f2f3a;
  --muted: #5a6670;
  --line: #e6e9ec;
  --surface: #f6f5f2;
  --accent: #b5562f;
  /* The business name in the header speaks with the serif voice of this app (ADR 0049). */
  --header-title-font: Georgia, "Times New Roman", serif;
  --header-title-weight: 600;
  --header-title-tracking: -.3px;
  --anchor: #2a5574;
  --id-nav-ink: #234862; --id-nav-bg: #e8eff5;
  --id-avatar-bg: #e9eef2; --id-avatar-ink: #2f4d63;
  --hero-bg: #ece6dc; --hero-line: #e2dacd; --hero-label: #5b4a3a; --hero-ink: #54483c; --hero-fg: #1f2d2a; --hero-font: Georgia, serif;
  --metric-label: #55606a; --metric-icon: #4f6f86; --component-ink: #4f5d68;
  --row-line: #eef0f2; --time-ink: #2f4d63; --time-line: #e3e8ec;
  --art-ink: #2f4d63; --art-shadow: #5b4a3a14; --art-paper: #fbf8f3; --art-chimney: #8f4224; --art-glass-a: #dce8f099; --art-glass-b: #a9c2d455; --art-sign: #fff; --art-sign-ink: var(--accent);
}
:root:not([data-koozco-theme])[data-theme="dark"], :root[data-koozco-theme="koozco"][data-theme="dark"] {
  --rz-primary: var(--brand-text);
  --rz-primary-dark: color-mix(in srgb, var(--brand-text) 85%, #000);
  --rz-primary-light: color-mix(in srgb, var(--brand) 35%, #0f1613);
  --ink: #e4ede9;
  --muted: #a7b5ae;
  --line: #2e3d38;
  --surface: #0f1613;
  --anchor: var(--link);
  --id-nav-ink: var(--nav-active-ink);
  --id-nav-bg: var(--nav-active-bg);
  --id-avatar-bg: var(--avatar-bg);
  --id-avatar-ink: var(--avatar-ink);
}
.sidebar nav a.active { color: var(--id-nav-ink, var(--nav-active-ink)); background: var(--id-nav-bg, var(--nav-active-bg)); }
.avatar { background: var(--id-avatar-bg, var(--avatar-bg)); color: var(--id-avatar-ink, var(--avatar-ink)); }
.avatar .rzi { font-size: 18px; }
.avatar.large .rzi { font-size: 28px; }
.cell-sub { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.loading-progress circle:last-child { stroke: var(--brand); }
.loading-progress-text:after { content: 'Preparando tu inmobiliaria…'; }

.hero { display: flex; align-items: center; justify-content: space-between; background: var(--hero-bg, var(--card-alt)); border: var(--border-width) solid var(--hero-line, var(--line)); border-radius: 14px; padding: 28px 36px; position: relative; overflow: hidden; min-height: 260px; margin-bottom: 24px; }
.hero-label { font-size: 10px; letter-spacing: 2px; color: var(--hero-label, var(--muted)); }
.hero h2 { font-family: var(--hero-font, var(--font-display)); font-size: 40px; font-weight: 400; letter-spacing: -1px; line-height: 1.12; margin: 12px 0; }
.hero p { font-size: 13px; color: var(--hero-ink, var(--muted)); margin-bottom: 15px; }
.hero a { display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 650; }
.hero a .rzi { font-size: 17px; }

/* CSS-only house: roof, chimney, walls with windows and door, and a "for sale" sign. */
.house-art { width: 320px; height: 210px; position: relative; margin-right: 30px; flex-shrink: 0; }
.house-art .roof { position: absolute; left: 40px; top: 18px; width: 200px; height: 78px; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.house-art .chimney { position: absolute; left: 172px; top: 26px; width: 22px; height: 44px; background: var(--art-chimney, var(--accent)); }
.house-art .walls { position: absolute; left: 58px; top: 94px; width: 164px; height: 96px; background: var(--art-paper, var(--card)); border: 7px solid var(--art-ink, var(--brand)); border-top: 0; border-radius: 0 0 6px 6px; box-shadow: 6px 10px 0 var(--art-shadow, transparent); }
.house-art .window { position: absolute; top: 16px; width: 34px; height: 30px; background: linear-gradient(135deg, var(--art-glass-a, transparent), var(--art-glass-b, transparent)); border: 5px solid var(--art-ink, var(--brand)); border-radius: 3px; }
.house-art .window.left { left: 14px; }
.house-art .window.right { right: 14px; }
.house-art .door { position: absolute; left: 60px; bottom: 0; width: 32px; height: 50px; background: var(--art-ink, var(--brand)); border-radius: 16px 16px 0 0; }
.house-art .sign { position: absolute; right: 0; top: 112px; width: 74px; height: 78px; }
.house-art .sign:before { content: ''; position: absolute; left: 8px; top: 0; width: 6px; height: 78px; background: var(--hero-label, var(--muted)); }
.house-art .sign span { position: absolute; left: 14px; top: 8px; padding: 7px 8px; background: var(--art-sign, var(--card)); border: 2px solid var(--accent); border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--art-sign-ink, var(--brand-text)); white-space: nowrap; }
.art-caption { position: absolute; bottom: -6px; width: 100%; text-align: center; letter-spacing: 4px; font-size: 9px; color: var(--hero-label, var(--muted)); }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.metric { background: var(--card); border: var(--border-width) solid var(--line); border-radius: 11px; padding: 20px; }
.metric > div { display: flex; justify-content: space-between; align-items: center; color: var(--metric-label, var(--muted)); font-size: 12px; }
.metric .rzi { font-size: 19px; color: var(--metric-icon, var(--brand-text)); }
.metric > strong { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.8px; margin: 18px 0 10px; }
.metric > strong small { font-weight: 400; color: var(--muted); letter-spacing: 0; }
.metric > small { font-size: 11px; color: var(--muted); }
.metric .positive { color: var(--rz-success); }
.positive span { color: var(--muted); }
.dashboard-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; margin-bottom: 24px; }
.dashboard-grid .panel, .component-grid .panel { margin-bottom: 0; }
.appointment-row { display: flex; align-items: center; gap: 18px; padding: 15px 0; border-bottom: var(--border-width) solid var(--row-line, var(--line)); }
.appointment-row:last-child { border-bottom: 0; }
.appointment-row .time { font-size: 12px; color: var(--time-ink, var(--brand-text)); font-weight: 600; border: var(--border-width) solid var(--time-line, var(--line)); border-radius: 6px; padding: 7px; }
.appointment-row strong { font-size: 13px; }
.appointment-row small { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.appointment-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: auto; flex-shrink: 0; }
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--hero-bg, var(--card-alt)); border: var(--border-width) solid var(--hero-line, var(--line)); border-radius: 12px; padding: 24px; margin-bottom: 24px; gap: 18px; }
.summary-strip strong { display: block; font-size: 23px; font-weight: 600; letter-spacing: -.6px; }
.summary-strip span { display: block; font-size: 12px; color: var(--hero-ink, var(--muted)); margin-top: 7px; }
.capability-note { display: flex; align-items: flex-start; gap: 15px; color: var(--hero-ink, var(--muted)); padding: 18px 4px; }
.capability-note strong { font-size: 13px; }
.capability-note p { font-size: 13px; margin: 5px 0; }
.component-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.component-number { display: block; font-size: 10px; letter-spacing: 1.5px; color: var(--component-ink, var(--eyebrow)); margin-bottom: 10px; }
.detail-title { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.detail-title h2 { font-size: 20px; margin-bottom: 4px; }
.detail-title p { color: var(--muted); margin: 0; }
.detail-title > .rz-badge { margin-left: auto; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0 30px; }
.detail-grid small { display: block; color: var(--muted); margin-bottom: 8px; }
.workflow { padding-left: 28px; line-height: 2.5; color: var(--muted); }
.workflow .current { color: var(--nav-active-ink); font-weight: 700; }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.switch-row strong { font-size: 13px; }
.switch-row small { display: block; color: var(--muted); margin-top: 6px; }
.button-row, .badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
.divider { border-top: 1px solid var(--line); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; padding: 0; margin: 4px 0 12px; font-size: 12px; }
.chart-legend li { display: flex; align-items: center; gap: 6px; }
.chart-legend .swatch { width: 10px; height: 10px; border-radius: 2px; }
.scheduler-panel { padding: 20px; }
.rz-scheduler { font-size: 12px; }
.rz-scheduler-appointment { background: var(--brand) !important; border-radius: 5px !important; }

@media (min-width: 1600px) {
  .hero { min-height: 290px; }
  .hero h2 { font-size: 46px; }
}

@media (max-width: 1200px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .house-art { transform: scale(.85); margin-right: -10px; }
  .hero { padding: 26px; }
  .summary-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .hero h2 { font-size: 34px; }
  .hero p br { display: none; }
  .house-art { transform: scale(.7); margin: 0 -45px; }
  .component-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero { min-height: 230px; }
  .hero h2 { font-size: 34px; }
  .hero > div:first-child { position: relative; z-index: 1; }
  .house-art { position: absolute; right: -90px; opacity: .15; }
  .metrics { gap: 10px; }
  .metric { padding: 15px; }
  .metric > strong { font-size: 21px; }
  .summary-strip { padding: 18px; }
  .summary-strip strong { font-size: 20px; }
  .scheduler-panel { padding: 8px; overflow: auto; }
  .rz-scheduler { min-width: 600px; }
  /* Radzen hides the view button labels (display: none) on narrow screens, which leaves the buttons without a name;
     keep the label for assistive technology while it stays visually hidden. */
  .rz-scheduler .rz-button-text { display: inline-block !important; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .detail-title { flex-wrap: wrap; }
  .detail-title > .rz-badge { margin-left: 0; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* Dark theme (ADR 0038): the light values above are the prototype's own; these keep text and surfaces readable on the dark tokens of Koozco.UI. */
:root:not([data-koozco-theme])[data-theme="dark"] a, :root[data-koozco-theme="koozco"][data-theme="dark"] a { color: var(--link); } /* the identity of this app colors every link in the dark scheme; a catalog theme does not */
:root[data-theme="dark"] .metric > div, :root[data-theme="dark"] .metric > small, :root[data-theme="dark"] .metric > strong small,
:root[data-theme="dark"] .positive span, :root[data-theme="dark"] .workflow { color: var(--muted); }
:root[data-theme="dark"] .metric .rzi, :root[data-theme="dark"] .appointment-row .time, :root[data-theme="dark"] .workflow .current { color: var(--brand-text); }
:root[data-theme="dark"] .metric .positive { color: var(--ok-ink); }
:root[data-theme="dark"] .component-number { color: var(--eyebrow); }
:root[data-theme="dark"] .appointment-row { border-bottom-color: var(--line); }
:root[data-theme="dark"] .appointment-row .time { border-color: var(--line); }
:root[data-theme="dark"] .hero a { color: inherit; text-decoration: underline; }
:root[data-theme="dark"] .capability-note, :root[data-theme="dark"] .capability-note strong { color: var(--muted); }
:root[data-theme="dark"] .hero, :root[data-theme="dark"] .summary-strip { color: var(--hero-fg, var(--ink)); }