/* Tema de CD Residentes (Diwilo Residential AI) sobre Bootstrap 5: esmeralda, Inter y JetBrains Mono. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root, [data-bs-theme="light"] {
  --cdr-accent: #047857;
  --cdr-accent-dark: #065F46;
  --cdr-accent-soft: #D1FAE5;
  --cdr-ai: #6D28D9;
  --cdr-ai-soft: #EDE9FE;
  --cdr-bg: #F4F6F5;
  --cdr-surface: #FFFFFF;
  --cdr-surface-2: #EEF2F0;
  --cdr-line: #DCE3E0;
  --cdr-ink: #0F1F1A;
  --cdr-muted: #5B6B66;
  --cdr-side: #0B1A16;
  --cdr-side-ink: #C9D8D2;
  --cdr-mono: 'JetBrains Mono', ui-monospace, monospace;

  --bs-body-font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --bs-body-bg: var(--cdr-bg);
  --bs-body-color: var(--cdr-ink);
  --bs-secondary-color: var(--cdr-muted);
  --bs-border-color: var(--cdr-line);
  --bs-tertiary-bg: var(--cdr-surface-2);
  --bs-primary: var(--cdr-accent);
  --bs-primary-rgb: 4, 120, 87;
  --bs-primary-bg-subtle: var(--cdr-accent-soft);
  --bs-primary-text-emphasis: var(--cdr-accent-dark);
  --bs-link-color: var(--cdr-accent);
  --bs-link-color-rgb: 4, 120, 87;
  --bs-link-hover-color: var(--cdr-accent-dark);
  --bs-success: #059669; --bs-success-rgb: 5, 150, 105;
  --bs-warning: #D97706; --bs-warning-rgb: 217, 119, 6;
  --bs-danger: #DC2626; --bs-danger-rgb: 220, 38, 38;
  --bs-border-radius: .65rem;
}
[data-bs-theme="dark"] {
  --cdr-accent: #34D399;
  --cdr-accent-dark: #6EE7B7;
  --cdr-accent-soft: #0D3B2E;
  --cdr-ai: #A78BFA;
  --cdr-ai-soft: #2A2144;
  --cdr-bg: #07110E;
  --cdr-surface: #0E1B17;
  --cdr-surface-2: #142520;
  --cdr-line: #1F3530;
  --cdr-ink: #E3EFEA;
  --cdr-muted: #8FA59D;
  --cdr-side: #050C0A;
  --bs-body-bg: var(--cdr-bg);
  --bs-body-color: var(--cdr-ink);
  --bs-secondary-color: var(--cdr-muted);
  --bs-border-color: var(--cdr-line);
  --bs-tertiary-bg: var(--cdr-surface-2);
  --bs-primary-rgb: 52, 211, 153;
  --bs-link-color: var(--cdr-accent);
  --bs-link-color-rgb: 52, 211, 153;
  --bs-success-rgb: 52, 211, 153;
  --bs-danger-rgb: 248, 113, 113;
  --bs-body-bg-rgb: 7, 17, 14;
}

body { background: var(--cdr-bg); min-height: 100vh; }
h1, h2, h3, h4, h5, .page-title, .modal-title { letter-spacing: -.015em; font-weight: 800; }
.mono, .kpi-value, .num { font-family: var(--cdr-mono); }

.btn-primary {
  --bs-btn-bg: var(--cdr-accent); --bs-btn-border-color: var(--cdr-accent);
  --bs-btn-hover-bg: var(--cdr-accent-dark); --bs-btn-hover-border-color: var(--cdr-accent-dark);
  --bs-btn-active-bg: var(--cdr-accent-dark); --bs-btn-active-border-color: var(--cdr-accent-dark);
  --bs-btn-disabled-bg: var(--cdr-accent); --bs-btn-disabled-border-color: var(--cdr-accent);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; font-weight: 600;
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #04120D; --bs-btn-hover-color: #04120D; --bs-btn-active-color: #04120D; }
.btn-outline-primary {
  --bs-btn-color: var(--cdr-accent); --bs-btn-border-color: var(--cdr-accent);
  --bs-btn-hover-bg: var(--cdr-accent); --bs-btn-hover-border-color: var(--cdr-accent); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--cdr-accent-dark); --bs-btn-active-border-color: var(--cdr-accent-dark); font-weight: 600;
}
.btn-outline-secondary { --bs-btn-color: var(--cdr-ink); --bs-btn-border-color: var(--cdr-line); --bs-btn-hover-bg: var(--cdr-surface-2); --bs-btn-hover-color: var(--cdr-ink); --bs-btn-hover-border-color: var(--cdr-line); font-weight: 600; }
.btn-ai { background: var(--cdr-ai-soft); color: var(--cdr-ai); border: 1px solid color-mix(in srgb, var(--cdr-ai) 30%, transparent); font-weight: 600; }
.btn-ai:hover, .btn-ai:focus { background: var(--cdr-ai); color: #fff; }
.btn-icon { border: 0; background: transparent; color: var(--cdr-ink); font-size: 1.35rem; padding: .25rem .45rem; }
.no-caret::after { display: none; }
.text-primary { color: var(--cdr-accent) !important; }
.text-ai { color: var(--cdr-ai) !important; }
.bg-primary-subtle { background: var(--cdr-accent-soft) !important; }
.form-control, .form-select { background-color: var(--cdr-surface); border-color: var(--cdr-line); }
.form-control:focus, .form-select:focus { border-color: var(--cdr-accent); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18); }
.form-check-input:checked { background-color: var(--cdr-accent); border-color: var(--cdr-accent); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--cdr-accent); --bs-nav-link-color: var(--cdr-muted); --bs-nav-link-hover-color: var(--cdr-ink); }
.list-group { --bs-list-group-bg: var(--cdr-surface); --bs-list-group-border-color: var(--cdr-line); }
.table { --bs-table-bg: transparent; }
.modal-content { background: var(--cdr-surface); border: 1px solid var(--cdr-line); border-radius: 1rem; }
.dropdown-menu { background: var(--cdr-surface); border-color: var(--cdr-line); }

/* ---------- barra lateral ---------- */
.side {
  position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 1035; flex-direction: column; overflow-y: auto;
  padding: 18px 12px; background: var(--cdr-side); color: var(--cdr-side-ink);
}
.side-off { --bs-offcanvas-width: 260px; background: var(--cdr-side); }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; color: #fff; text-decoration: none; }
.side-brand:hover { color: #fff; }
.side-logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(135deg, #047857, #10B981); box-shadow: 0 6px 18px -6px #10B981; }
.side-logo svg { width: 22px; height: 22px; }
.side-logo img { width: 100%; height: 100%; object-fit: cover; }
.side-sub { font: 600 10px/1 var(--cdr-mono); text-transform: uppercase; letter-spacing: .12em; color: #6EE7B7; }
.side-label { margin: 16px 10px 6px; font: 700 10px/1 var(--cdr-mono); text-transform: uppercase; letter-spacing: .12em; color: #5E7A71; }
.side-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; margin-bottom: 2px;
  color: var(--cdr-side-ink); text-decoration: none; font-size: .9rem; font-weight: 500; transition: background .15s, color .15s;
}
.side-link i { font-size: 1.05rem; opacity: .85; }
.side-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-link.active { background: rgba(16,185,129,.16); color: #fff; box-shadow: inset 3px 0 0 #10B981; }
.ai-dot { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; background: #A78BFA; box-shadow: 0 0 8px #A78BFA; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.side-foot { margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid rgba(255,255,255,.08); color: #fff; }
.side-foot .text-body-secondary { color: #7D958D !important; }

/* ---------- barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .6rem;
  padding: .55rem 1rem; background: color-mix(in srgb, var(--cdr-bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cdr-line);
}
.top-title { font-weight: 800; font-size: 1.05rem; }
.prop-pick { display: flex; align-items: center; margin: 0 0 0 auto; min-width: 0; }
.prop-pick .form-select { max-width: 15rem; font-weight: 600; }
@media (min-width: 992px) { body.has-side { padding-left: 248px; } }
.readonly-bar { position: sticky; top: 53px; z-index: 1019; }

/* ---------- navegación inferior (celular) ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; justify-content: space-around; gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--cdr-surface) 94%, transparent); backdrop-filter: blur(12px);
  border-top: 1px solid var(--cdr-line);
}
.bottom-nav a, .bottom-nav button {
  flex: 1; min-width: 0; border: 0; background: transparent; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; border-radius: .8rem; color: var(--cdr-muted); font-size: .7rem; font-weight: 600;
}
.bottom-nav i { font-size: 1.2rem; line-height: 1; }
.bottom-nav span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bottom-nav .active { color: var(--cdr-accent); background: var(--cdr-accent-soft); }
@media (max-width: 991.98px) { body.has-bottom-nav { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 992px) { .bottom-nav { display: none; } }

@keyframes cdr-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cdr-enter { animation: cdr-enter .3s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .cdr-enter { animation: none; } .ai-dot { animation: none; } }

/* ---------- componentes ---------- */
.page-title { font-size: 1.5rem; margin: 0; }
.page-sub { color: var(--cdr-muted); font-size: .9rem; margin: .15rem 0 0; }
.eyebrow { font: 700 10.5px/1 var(--cdr-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--cdr-muted); }
.card { border: 1px solid var(--cdr-line); border-radius: .9rem; background: var(--cdr-surface); }
.card-header { background: transparent; font-weight: 700; border-bottom-color: var(--cdr-line); padding: .8rem 1rem; }

.kpi { padding: 1rem 1.1rem; height: 100%; }
.kpi .kpi-label { font: 600 10.5px/1.2 var(--cdr-mono); color: var(--cdr-muted); text-transform: uppercase; letter-spacing: .08em; }
.kpi .kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.15; margin-top: .35rem; }
.kpi .kpi-icon { font-size: 1.15rem; color: var(--cdr-accent); background: var(--cdr-accent-soft); width: 2.1rem; height: 2.1rem; border-radius: .65rem; display: grid; place-items: center; flex: none; }
.kpi .kpi-icon.red { color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .12); }
.kpi .kpi-icon.amber { color: var(--bs-warning); background: rgba(var(--bs-warning-rgb), .14); }
.kpi .kpi-icon.violet { color: var(--cdr-ai); background: var(--cdr-ai-soft); }
.stat-strip { padding: .55rem .8rem; border-left: 4px solid var(--cdr-accent); border-radius: .45rem; background: var(--cdr-surface-2); }
.stat-strip.red { border-left-color: var(--bs-danger); }
.stat-strip.violet { border-left-color: var(--cdr-ai); }
.stat-strip .lbl { font: 700 10px/1.2 var(--cdr-mono); text-transform: uppercase; color: var(--cdr-muted); }
.stat-strip .val { font: 700 .95rem/1.3 var(--cdr-mono); margin-top: 2px; }

.avatar {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cdr-accent-soft); color: var(--cdr-accent); font-weight: 700; font-size: .8rem;
}
.avatar-sm { width: 2rem; height: 2rem; font-size: .72rem; }

.table td, .table th { vertical-align: middle; }
.table thead th { font: 600 10.5px/1.2 var(--cdr-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cdr-muted); }
.table-clickable tbody tr { cursor: pointer; }
.num { font-variant-numeric: tabular-nums; text-align: end; }
.empty { padding: 2rem 1rem; text-align: center; color: var(--bs-secondary-color); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--cdr-line); }
.filters .form-select, .filters .form-control { width: auto; min-width: 9rem; }
.filters .grow { flex: 1 1 14rem; }

.prop-card { cursor: pointer; transition: border-color .15s, transform .15s; }
.prop-card:hover { border-color: var(--cdr-accent); transform: translateY(-2px); }
.prop-logo { width: 3rem; height: 3rem; border-radius: .8rem; background: var(--cdr-accent-soft); color: var(--cdr-accent); display: grid; place-items: center; font-size: 1.4rem; overflow: hidden; flex: none; }
.prop-logo img { width: 100%; height: 100%; object-fit: cover; }

.ai-insight { border: 1px solid color-mix(in srgb, var(--cdr-ai) 35%, var(--cdr-line)); background: linear-gradient(135deg, var(--cdr-ai-soft), var(--cdr-surface) 70%); }
.ai-insight .ai-ico { width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7C3AED, #10B981); flex: none; }

.file-chip { display: inline-flex; align-items: center; padding: .2rem .55rem; border: 1px solid var(--cdr-line); border-radius: 999px; font-size: .8rem; background: var(--cdr-surface-2); max-width: 100%; }
.file-chip a { text-decoration: none; color: var(--cdr-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }

/* calendario de reservas */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .dow { font: 700 10px/1 var(--cdr-mono); text-align: center; color: var(--cdr-muted); padding: 4px 0; }
.cal .day { min-height: 5.2rem; border: 1px solid var(--cdr-line); border-radius: .5rem; padding: 4px; background: var(--cdr-surface); cursor: pointer; overflow: hidden; }
.cal .day.out { opacity: .35; cursor: default; }
.cal .day.today { border-color: var(--cdr-accent); box-shadow: inset 0 0 0 1px var(--cdr-accent); }
.cal .day .n { font: 700 11px/1 var(--cdr-mono); color: var(--cdr-muted); }
.cal .ev { display: block; margin-top: 3px; padding: 1px 4px; border-radius: 4px; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--cdr-accent-soft); color: var(--cdr-accent-dark); }
[data-bs-theme="dark"] .cal .ev { color: var(--cdr-accent); }
.cal .ev.pending { background: rgba(var(--bs-warning-rgb), .16); color: var(--bs-warning); }
@media (max-width: 575.98px) { .cal .day { min-height: 3.2rem; } .cal .ev { font-size: 0; height: 6px; padding: 0; } }

/* ---------- chat Diwilo AI ---------- */
.chat-wrap { display: flex; height: calc(100vh - 140px); min-height: 480px; border: 1px solid var(--cdr-line); border-radius: 1rem; overflow: hidden; background: var(--cdr-surface); }
@media (max-width: 991.98px) { .chat-wrap { height: calc(100vh - 190px); } }
.chat-history { width: 240px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--cdr-line); background: var(--cdr-surface-2); }
.chat-history .h-item { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; font-size: .83rem; color: var(--cdr-ink); text-decoration: none; cursor: pointer; border-left: 3px solid transparent; }
.chat-history .h-item:hover { background: rgba(var(--bs-primary-rgb), .06); }
.chat-history .h-item.active { background: rgba(var(--bs-primary-rgb), .12); border-left-color: var(--cdr-accent); font-weight: 700; }
.chat-history .h-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 1.2rem; display: flex; flex-direction: column; gap: .9rem; }
.msg { display: flex; gap: .6rem; max-width: 52rem; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg .bubble { padding: .7rem .95rem; border-radius: 1rem; font-size: .92rem; line-height: 1.55; min-width: 0; overflow-wrap: anywhere; }
.msg.user .bubble { background: var(--cdr-accent); color: #fff; border-bottom-right-radius: .3rem; }
[data-bs-theme="dark"] .msg.user .bubble { color: #04120D; }
.msg.ai .bubble { background: var(--cdr-surface-2); border: 1px solid var(--cdr-line); border-bottom-left-radius: .3rem; }
.msg .bubble p { margin: 0 0 .5rem; } .msg .bubble p:last-child { margin: 0; }
.msg .bubble ul, .msg .bubble ol { margin: 0 0 .5rem; padding-left: 1.2rem; }
.msg .m-ico { width: 2rem; height: 2rem; border-radius: .65rem; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, #7C3AED, #10B981); font-size: .95rem; }
.msg.user .m-ico { background: var(--cdr-accent-soft); color: var(--cdr-accent); font-size: .72rem; font-weight: 700; }
.draft-box { margin: .5rem 0; padding: .7rem .8rem; border: 1px dashed var(--cdr-ai); border-radius: .7rem; background: var(--cdr-surface); white-space: pre-wrap; font-size: .88rem; }
.chat-welcome { text-align: center; margin: auto; max-width: 40rem; padding: 1rem; }
.chat-welcome .badge-ai { display: inline-flex; align-items: center; gap: .7rem; padding: .5rem 1rem; border-radius: 999px; background: var(--cdr-accent-soft); }
.suggest { text-align: left; border: 1px solid var(--cdr-line); border-radius: .8rem; padding: .75rem; background: var(--cdr-surface); cursor: pointer; transition: border-color .15s, transform .15s; height: 100%; width: 100%; color: var(--cdr-ink); }
.suggest:hover { border-color: var(--cdr-ai); transform: translateY(-2px); }
.suggest i { color: var(--cdr-ai); }
.chat-input { border-top: 1px solid var(--cdr-line); padding: .75rem; display: flex; gap: .5rem; align-items: flex-end; background: var(--cdr-surface); }
.chat-input textarea { resize: none; max-height: 10rem; }
.typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: var(--cdr-muted); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

#toasts { z-index: 1090; }
@media (max-width: 991.98px) { #toasts { bottom: 70px !important; } }
@media (max-width: 575.98px) {
  .kpi .kpi-value { font-size: 1.25rem; }
  .hide-xs { display: none; }
  .filters .form-select, .filters .form-control { min-width: 0; flex: 1 1 45%; }
}
.min-w-0 { min-width: 0; }