:root { font-family: "Segoe UI", Inter, Arial, sans-serif; color: #26332f; background: #f8f3ec; color-scheme: light; --brand: #496858; --brand-dark: #263f36; --accent: #c48a4a; --accent-soft: #f3e4d0; --soft: #edf4ef; --surface: #fffdf9; --surface-2: #fbf6ef; --line: #eadfce; --muted: #756f66; --shadow: 0 18px 55px #4d372414; --radius: 20px; }
:root[data-theme="dark"] { color: #e8f1ef; background: #0f1719; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background:
  radial-gradient(circle at top left, #fff8ee 0, transparent 34%),
  linear-gradient(180deg, #f5eadb 0, #fbf7f1 310px, #f8f3ec 100%); color: #26332f; }
:root:not([data-theme="dark"]) body { background:
  radial-gradient(circle at 10% 0%, #fff7e8 0, transparent 36%),
  radial-gradient(circle at 92% 6%, #eaf4ec 0, transparent 30%),
  linear-gradient(180deg, #fff3df 0, #fffdf8 320px, #f7efe5 100%); color: #26332f; }
:root:not([data-theme="dark"]) .app-header,
:root:not([data-theme="dark"]) .tabbar { background: #fffdf2f2; border-color: #ead8bd; }
:root:not([data-theme="dark"]) .item,
:root:not([data-theme="dark"]) input,
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) textarea { color: #26332f; background-color: #fffefb; border-color: #d9c8ae; }
:root:not([data-theme="dark"]) .calendar-day,
:root:not([data-theme="dark"]) .property-selector-card,
:root:not([data-theme="dark"]) .property-tile { background-color: #fffaf1; border-color: #e5d6bd; }
main { max-width: 1120px; margin: auto; padding: 22px; }
.app-shell, .tenant-shell { max-width: 1240px; }
header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.app-header { position: sticky; top: 0; z-index: 5; margin: 0 0 14px; padding: 16px 18px; border: 1px solid #ffffffd8; border-radius: 22px; background: #fffdf2dc; box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 16px; color: white; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); font-size: .9rem; font-weight: 900; letter-spacing: .04em; box-shadow: 0 12px 26px #263f362b; }
.app-kicker { display: block; margin-bottom: 3px; color: #7c6a52; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
h1, h2, h3, p { margin-top: 0; }
h1 { color: var(--brand-dark); margin-bottom: 3px; }
h2 { font-size: 1.22rem; }
small { color: var(--muted); }
.hidden { display: none !important; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background:
  radial-gradient(circle at 15% 15%, #fff7ed 0 18%, transparent 34%),
  radial-gradient(circle at 82% 12%, #edf4ef 0 16%, transparent 33%),
  linear-gradient(135deg, #f4e4d2 0%, #fffaf3 50%, #e7f0e8 100%); overflow: hidden; }
.login-screen::before,
.login-screen::after { content: ""; position: fixed; width: 260px; height: 260px; border-radius: 999px; background: #c48a4a1f; filter: blur(3px); animation: floaty 8s ease-in-out infinite; pointer-events: none; }
.login-screen::before { left: -80px; bottom: 8%; }
.login-screen::after { right: -70px; top: 10%; animation-delay: -3s; background: #49685822; }
.login-shell { position: relative; z-index: 1; width: min(100%, 980px); display: grid; grid-template-columns: minmax(280px, .95fr) minmax(310px, .75fr); gap: 22px; align-items: center; }
.login-hero { padding: 32px; animation: rise-in .65s ease both; }
.login-hero h1 { font-size: clamp(2.15rem, 5.4vw, 4.1rem); line-height: 1; margin: 10px 0 16px; letter-spacing: -0.045em; }
.login-hero p { max-width: 560px; color: #5a5f55; font-size: 1.06rem; line-height: 1.6; }
.login-kicker { display: inline-flex; width: fit-content; border-radius: 999px; padding: 6px 10px; color: var(--brand-dark); background: var(--soft); font-size: .76rem; font-weight: bold; text-transform: uppercase; letter-spacing: .04em; }
.login-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.login-highlights span { border-radius: 999px; padding: 8px 11px; color: var(--brand-dark); background: #fffdf9c9; border: 1px solid var(--line); font-size: .86rem; font-weight: bold; box-shadow: 0 8px 24px #4d372412; }
.login-panel { display: grid; gap: 12px; animation: rise-in .7s ease .08s both; }
.login-card { width: min(100%, 390px); }
.login-panel .login-card { width: 100%; }
.primary-login { border: 1px solid #ffffffd8; padding: 22px; box-shadow: 0 22px 70px #174f4824; backdrop-filter: blur(12px); }
.primary-login h2 { font-size: 1.55rem; margin: 10px 0 5px; }
.landlord-login { border: 1px solid var(--line); border-radius: 16px; padding: 0; background: #fffdf990; box-shadow: 0 12px 38px #4d372414; overflow: hidden; }
.landlord-login summary { padding: 13px 15px; color: var(--brand-dark); list-style: none; }
.landlord-login summary::-webkit-details-marker { display: none; }
.landlord-login summary::after { content: "Mostrar acceso privado"; float: right; color: #60706e; font-size: .76rem; font-weight: normal; }
.landlord-login[open] summary::after { content: "Ocultar"; }
.admin-login-card { border-radius: 0; box-shadow: none; border-top: 1px solid #e0e8e6; }
.tenant-shell { max-width: 1120px; }
.card { background: var(--surface); padding: 20px; border: 1px solid #f0e6d7; border-radius: var(--radius); box-shadow: 0 10px 30px #4d37240f; animation: fade-up .34s ease both; }
nav { display: flex; gap: 8px; margin: 18px 0; overflow-x: auto; padding-bottom: 4px; }
.tabbar { position: sticky; top: 88px; z-index: 4; margin: 0 0 20px; padding: 8px; border: 1px solid #eadfce; border-radius: 20px; background: #fffaf1d8; box-shadow: 0 12px 32px #4d37240d; backdrop-filter: blur(14px); }
button { border: 0; border-radius: 12px; padding: 11px 15px; color: white; background: var(--brand); cursor: pointer; font-weight: bold; }
button.secondary, nav button { color: var(--brand-dark); background: #efe5d6; }
nav button { white-space: nowrap; }
nav button.active { color: white; background: var(--brand); box-shadow: 0 10px 22px #4968582b; }
button.danger { background: #ad5a4e; }
button.ghost { color: var(--brand-dark); background: transparent; border: 1px solid #d9c8ae; }
.compact { padding: 8px 12px; }
.grid { display: grid; gap: 16px; }
.stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 20px; }
.stat strong { display: block; color: var(--brand-dark); font-size: 1.7rem; }
.dashboard-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .45fr); gap: 18px; align-items: stretch; margin-bottom: 12px; padding: 22px; background:
  linear-gradient(135deg, #fffdf9 0%, #faf0e2 52%, #edf4ef 100%); }
.dashboard-hero h2 { margin: 6px 0 10px; color: var(--brand-dark); font-size: clamp(1.75rem, 3.5vw, 2.55rem); line-height: 1.08; letter-spacing: -0.025em; }
.dashboard-hero p { max-width: 660px; color: #5f635a; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.next-action { display: grid; align-content: center; gap: 8px; padding: 18px; border: 1px solid #e2d1b7; border-radius: 18px; background: #fffaf1c7; }
.next-action strong { color: var(--brand-dark); font-size: 1.08rem; }
.next-action p { margin: 0; color: var(--muted); font-size: .94rem; }
.signal-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: 14px; }
.signal-card { display: grid; align-content: start; gap: 10px; min-height: 138px; }
.signal-card.attention { border-color: #e9c6bf; background: linear-gradient(180deg, #fffdf9, #fff4ef); }
.signal-card .item-row strong { font-size: 1.25rem; }
.progress-line { height: 10px; overflow: hidden; border-radius: 999px; background: #efe4d4; }
.progress-line span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #9fbd8f); }
.property-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 12px; margin-top: 14px; }
.property-tile { display: grid; gap: 11px; padding: 15px; border: 1px solid #eadfce; border-radius: 16px; background: var(--surface-2); }
.property-money { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.property-money span { display: grid; gap: 2px; padding: 9px; border-radius: 12px; background: #f3eadc; }
.property-money strong { color: var(--brand-dark); }
.property-room-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr); gap: 18px; align-items: center; margin-bottom: 16px; background: linear-gradient(135deg, #fffdf9 0%, #fbf2e5 55%, #edf4ef 100%); }
.property-room-hero h2 { margin: 6px 0 8px; color: var(--brand-dark); font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.025em; }
.property-room-hero p { max-width: 660px; color: #5f635a; line-height: 1.55; }
.property-room-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.property-room-stats span { display: grid; gap: 4px; padding: 12px; border: 1px solid #eadfce; border-radius: 14px; background: #fffaf1c7; }
.property-room-stats strong { color: var(--brand-dark); font-size: 1.45rem; }
.property-room-layout { display: grid; grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.property-room-sidebar { position: sticky; top: 160px; align-self: start; }
.property-selector-list { display: grid; gap: 10px; margin-top: 12px; }
.property-selector-card { display: grid; gap: 9px; padding: 12px; border: 1px solid #eadfce; border-radius: 16px; background: var(--surface-2); }
.property-selector-card.active { border-color: #9bb58d; box-shadow: inset 0 0 0 2px #edf4ef; }
.property-selector-main { display: grid; gap: 4px; width: 100%; padding: 0; color: inherit; background: transparent; text-align: left; box-shadow: none !important; }
.property-selector-main:hover { transform: none; box-shadow: none; }
.property-selector-main strong { color: var(--brand-dark); }
.property-selector-main span { color: #5c665b; font-size: .86rem; font-weight: 800; }
.property-selector-main small { line-height: 1.35; }
.property-room-main { min-width: 0; }
.property-focus-card { border-color: #d9e4d2; }
.room-quick-form details { background: #fffaf1; }
.compact-filter { min-width: 220px; }
.room-management-card { display: grid; gap: 12px; }
.room-price-status { display: grid; justify-items: end; gap: 4px; min-width: 110px; }
.room-price-status > span:first-child { color: var(--brand-dark); font-weight: 900; }
.report-actions { display: flex; align-items: end; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.two-columns { grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr); align-items: start; }
.report-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.report-toolbar label { min-width: 190px; }
.report-property h2 { margin-bottom: 4px; }
.report-mini-stats,
.report-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.report-mini-stats span,
.report-facts span { display: grid; gap: 4px; padding: 11px; border: 1px solid #eadfce; border-radius: 12px; background: var(--surface-2); }
.report-mini-stats strong,
.report-facts strong { color: var(--brand-dark); }
.report-room-list { margin-top: 12px; }
.report-room.occupied { border-left: 4px solid var(--brand); }
.report-room.available { border-left: 4px solid #ad5a4e; }
.statement { display: grid; gap: 8px; margin-top: 10px; }
.statement div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #eadfce; }
.statement-total { margin-top: 4px; padding-top: 14px !important; border-top: 2px solid var(--brand); border-bottom: 0 !important; font-size: 1.05rem; }
.compact-notice { margin-top: 9px; padding: 8px; font-size: .82rem; }
form { display: grid; gap: 10px; }
label { display: grid; gap: 6px; color: #5c665b; font-size: .88rem; font-weight: bold; }
input, select, textarea { width: 100%; border: 1px solid #d9cbb7; border-radius: 10px; padding: 11px; background: #fffdf9; font: inherit; }
textarea { min-height: 72px; resize: vertical; }
.list { display: grid; gap: 11px; }
.item { padding: 14px; border: 1px solid #eadfce; border-radius: 14px; background: #fffdf9; }
.item-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.item strong { color: var(--brand-dark); }
.meta { margin-top: 5px; color: var(--muted); font-size: .86rem; line-height: 1.42; }
.empty { padding: 18px; color: #71807e; text-align: center; }
.error { color: #b23939; }
.badge { display: inline-block; margin-top: 6px; border-radius: 99px; padding: 4px 9px; color: var(--brand-dark); background: var(--soft); font-size: .77rem; font-weight: bold; }
.badge.pending { color: #984747; background: #fae4dc; }
.actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.actions.no-margin { margin-top: 0; }
.tenant-access { margin-top: 9px; padding-top: 9px; border-top: 1px solid #e0e8e6; }
.tenant-qr-card { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 10px; padding: 12px; border: 1px solid #eadfce; border-radius: 14px; background: #fffaf1; }
.tenant-qr-card img,
.tenant-self-qr img { width: 100%; max-width: 260px; border: 1px solid #eadfce; border-radius: 14px; background: white; padding: 8px; }
.qr-url { overflow-wrap: anywhere; margin-top: 7px; padding: 8px 10px; border-radius: 10px; color: #5c665b; background: #fbf6ef; font-size: .78rem; }
.tenant-panel-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; overflow: visible; margin: 0 0 14px; padding: 8px; border: 1px solid #eadfce; border-radius: 18px; background: #fffaf1d8; box-shadow: 0 10px 26px #4d37240d; }
.tenant-panel-nav button { color: var(--brand-dark); background: transparent; }
.tenant-panel-nav button.active { color: white; background: var(--brand); box-shadow: 0 10px 22px #4968582b; }
.tenant-panel { display: grid; gap: 16px; }
.tenant-focus-card { min-height: 260px; }
.tenant-self-qr { display: grid; justify-items: start; align-content: start; gap: 10px; }
.payment-cta { display: grid; gap: 9px; margin-top: 12px; padding: 14px; border: 1px solid #d9e4d2; border-radius: 16px; background: linear-gradient(135deg, #edf4ef, #fffaf1); }
.payment-cta span { color: var(--brand-dark); font-weight: 800; }
.payment-cta .button-link { width: fit-content; font-size: .92rem; }
.payment-cta small { color: var(--muted); line-height: 1.4; }
.file-button { display: inline-block; border-radius: 10px; padding: 8px 10px; color: var(--brand-dark); background: #efe5d6; cursor: pointer; font-size: .78rem; }
.file-button input { display: none; }
.view-link { border-radius: 10px; padding: 8px 10px; color: var(--brand-dark); border: 1px solid #d9c8ae; font-size: .78rem; text-decoration: none; }
.button-link { display: inline-block; border-radius: 10px; padding: 10px 12px; color: white; background: var(--brand); font-size: .82rem; font-weight: bold; text-decoration: none; }
details { border: 1px solid #eadfce; border-radius: 12px; padding: 10px; }
summary { color: var(--brand-dark); cursor: pointer; font-size: .88rem; font-weight: bold; }
.details-grid { display: grid; gap: 10px; margin-top: 10px; }
.collapsible-form { padding: 0; overflow: hidden; }
.collapsible-form > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; list-style: none; font-size: 1rem; }
.collapsible-form > summary::-webkit-details-marker { display: none; }
.collapsible-form > summary::after { content: "Abrir"; border-radius: 999px; padding: 6px 10px; color: var(--brand-dark); background: #efe5d6; font-size: .76rem; }
.collapsible-form[open] > summary { border-bottom: 1px solid #eadfce; }
.collapsible-form[open] > summary::after { content: "Ocultar"; }
.collapsible-form > form { padding: 18px; }
.template-upload { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e0e8e6; }
.contract-wizard { border: 2px solid var(--brand); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 4px 0 8px; }
.steps span { padding: 9px; border-radius: 10px; color: var(--brand-dark); background: var(--soft); font-size: .82rem; font-weight: bold; text-align: center; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; }
.large-action { padding: 14px 16px; font-size: 1rem; }
.property-summary { margin: 10px 0 12px; padding: 12px; border: 1px solid #eadfce; border-radius: 12px; background: var(--surface-2); }
.room-photo-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eadfce; }
.room-photo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.room-photo-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.room-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 14px; }
.room-photo-card { display: grid; gap: 10px; margin: 0; padding: 10px; border: 1px solid #eadfce; border-radius: 16px; background: #fffaf1; box-shadow: 0 8px 20px #4d37240d; }
.photo-thumb { display: block; width: 100%; padding: 0; border-radius: 12px; background: transparent; overflow: hidden; }
.room-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid #eadfce; border-radius: 12px; background: #f5ede0; }
.room-photos figcaption { margin-top: 0; text-align: center; }
.photo-empty { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #fbf6ef; }
.photo-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.photo-actions > * { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; line-height: 1.1; }
.photo-actions .danger { grid-column: 1 / -1; }
.compact-link { display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; font-weight: bold; text-align: center; }
.photo-viewer { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 18px; background: #081312cc; }
.photo-viewer-card { width: min(100%, 900px); max-height: 94vh; display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: white; box-shadow: 0 12px 42px #0008; }
.photo-viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.photo-viewer img { max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: 10px; background: #0f1719; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 20; max-width: min(420px, calc(100vw - 36px)); padding: 13px 15px; border-radius: 14px; color: white; background: var(--brand-dark); box-shadow: 0 16px 40px #4d372440; animation: fade-up .22s ease both; }
.calendar-layout { grid-template-columns: minmax(300px, .8fr) minmax(520px, 1.4fr); align-items: start; }
.calendar-layout > article:last-child { grid-column: 1 / -1; }
.calendar-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
.calendar-head h2 { margin: 0; }
.calendar-list-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.calendar-list-head h2,
.calendar-list-head p { margin-bottom: 0; }
.calendar-list-head button { flex: 0 0 auto; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.calendar-weekday { color: var(--muted); font-size: .78rem; font-weight: bold; text-align: center; }
.calendar-day { min-height: 104px; padding: 8px; border: 1px solid #eadfce; border-radius: 12px; background: var(--surface-2); }
.calendar-day.muted { opacity: .35; }
.calendar-day.today { border: 2px solid var(--accent); box-shadow: inset 0 0 0 2px #fff8ed; }
.calendar-day-head { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-bottom: 4px; }
.day-number { display: block; margin-bottom: 4px; color: var(--muted); font-size: .78rem; font-weight: bold; }
.calendar-day-head .day-number { margin-bottom: 0; }
.calendar-add { width: 24px; height: 24px; padding: 0; border-radius: 999px; color: var(--brand-dark); background: #efe5d6; font-size: .8rem; line-height: 1; }
.calendar-event { display: block; width: 100%; margin-top: 4px; padding: 6px; border-radius: 8px; color: #8f4141; background: #fae4dc; font-size: .7rem; line-height: 1.25; text-align: left; }
.calendar-event small { display: block; margin-top: 2px; color: inherit; opacity: .82; font-weight: normal; }
.calendar-event.custom { color: #59448e; background: #ece5ff; }
.calendar-event.contract { color: #2e5b78; background: #e0edf5; }
.calendar-event.expense { color: #76572d; background: #fff0d1; }
.calendar-event.due { color: #8f4141; background: #fae4dc; }
.calendar-event.paid { color: var(--brand-dark); background: var(--soft); }
.notice { padding: 13px; border-radius: 12px; color: #76572d; background: #fff0d1; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floaty {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -16px, 0) scale(1.06); }
}
:is(button, .button-link, .view-link, .file-button) { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
:is(button, .button-link, .view-link, .file-button):hover { transform: translateY(-1px); box-shadow: 0 8px 18px #4d372420; }
input:focus, select:focus, textarea:focus { outline: 2px solid #d6a96e; border-color: var(--accent); box-shadow: 0 0 0 4px #c48a4a20; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition: none !important; }
}
:root[data-theme="dark"] body { background:
  radial-gradient(circle at top left, #2b241c 0, transparent 32%),
  linear-gradient(180deg, #111715 0, #151d19 45%, #101513 100%); color: #eee7dc; }
:root[data-theme="dark"] h1 { color: #d9c5a6; }
:root[data-theme="dark"] small,
:root[data-theme="dark"] .meta,
:root[data-theme="dark"] .calendar-weekday,
:root[data-theme="dark"] .day-number { color: #9fb4b0; }
:root[data-theme="dark"] .login-screen { background:
  radial-gradient(circle at 15% 15%, #2b241c 0 18%, transparent 34%),
  radial-gradient(circle at 82% 12%, #20322a 0 16%, transparent 33%),
  linear-gradient(135deg, #111715 0%, #151d19 50%, #1d261f 100%); }
:root[data-theme="dark"] .login-hero p { color: #bdd0cd; }
:root[data-theme="dark"] .login-kicker { color: #bdebe5; background: #1f4a45; }
:root[data-theme="dark"] .login-highlights span,
:root[data-theme="dark"] .landlord-login { color: #c9f2ed; background: #172225cc; border-color: #2d4347; }
:root[data-theme="dark"] .app-header,
:root[data-theme="dark"] .tabbar { background: #181f1bd9; border-color: #3c3328; box-shadow: 0 12px 34px #0008; }
:root[data-theme="dark"] .app-kicker { color: #d9c5a6; }
:root[data-theme="dark"] .dashboard-hero { background: linear-gradient(135deg, #181f1b 0%, #1e241e 55%, #2c2a1e 100%); }
:root[data-theme="dark"] .property-room-hero { background: linear-gradient(135deg, #181f1b 0%, #1e241e 55%, #2c2a1e 100%); }
:root[data-theme="dark"] .dashboard-hero h2,
:root[data-theme="dark"] .property-room-hero h2,
:root[data-theme="dark"] .next-action strong,
:root[data-theme="dark"] .property-money strong { color: #ead8bd; }
:root[data-theme="dark"] .dashboard-hero p,
:root[data-theme="dark"] .property-room-hero p,
:root[data-theme="dark"] .next-action p { color: #bdd0cd; }
:root[data-theme="dark"] .next-action,
:root[data-theme="dark"] .property-tile,
:root[data-theme="dark"] .property-money span,
:root[data-theme="dark"] .property-room-stats span,
:root[data-theme="dark"] .property-selector-card { background: #111715; border-color: #3c3328; }
:root[data-theme="dark"] .property-selector-card.active { border-color: #6f8a70; box-shadow: inset 0 0 0 2px #243126; }
:root[data-theme="dark"] .property-selector-main strong,
:root[data-theme="dark"] .room-price-status > span:first-child,
:root[data-theme="dark"] .property-room-stats strong { color: #ead8bd; }
:root[data-theme="dark"] .progress-line { background: #302b24; }
:root[data-theme="dark"] .signal-card.attention { border-color: #593c34; background: linear-gradient(180deg, #181f1b, #241b17); }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .item,
:root[data-theme="dark"] .report-mini-stats span,
:root[data-theme="dark"] .report-facts span,
:root[data-theme="dark"] .property-summary,
:root[data-theme="dark"] .calendar-day { background: #181f1b; border-color: #3c3328; box-shadow: 0 3px 14px #0006; }
:root[data-theme="dark"] .contract-wizard { border-color: #6f8a70; }
:root[data-theme="dark"] .room-quick-form details { background: #111715; }
:root[data-theme="dark"] .steps span { color: #ead8bd; background: #2d332a; }
:root[data-theme="dark"] .item strong,
:root[data-theme="dark"] .stat strong,
:root[data-theme="dark"] summary,
:root[data-theme="dark"] label { color: #ead8bd; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { color: #edf7f5; background: #0f1719; border-color: #3a565b; }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #7f9691; }
:root[data-theme="dark"] button.secondary,
:root[data-theme="dark"] nav button,
:root[data-theme="dark"] .file-button { color: #ead8bd; background: #2d332a; }
:root[data-theme="dark"] nav button.active,
:root[data-theme="dark"] button { color: #ffffff; background: #6f8a70; }
:root[data-theme="dark"] button.danger { background: #9d4545; }
:root[data-theme="dark"] .view-link,
:root[data-theme="dark"] button.ghost { color: #ead8bd; border-color: #4e4234; }
:root[data-theme="dark"] details,
:root[data-theme="dark"] .template-upload,
:root[data-theme="dark"] .room-photo-block,
:root[data-theme="dark"] .tenant-access,
:root[data-theme="dark"] .statement div { border-color: #2d4347; }
:root[data-theme="dark"] .tenant-qr-card,
:root[data-theme="dark"] .tenant-panel-nav,
:root[data-theme="dark"] .qr-url { color: #bdd0cd; background: #111715; border-color: #3c3328; }
:root[data-theme="dark"] .payment-cta { background: linear-gradient(135deg, #111715, #1f231a); border-color: #3c3328; }
:root[data-theme="dark"] .payment-cta span { color: #ead8bd; }
:root[data-theme="dark"] .payment-cta small { color: #bdd0cd; }
:root[data-theme="dark"] .tenant-panel-nav button { color: #ead8bd; }
:root[data-theme="dark"] .tenant-panel-nav button.active { color: #ffffff; background: #6f8a70; }
:root[data-theme="dark"] .tenant-qr-card img,
:root[data-theme="dark"] .tenant-self-qr img { border-color: #3a565b; }
:root[data-theme="dark"] .collapsible-form > summary::after { color: #ead8bd; background: #2d332a; }
:root[data-theme="dark"] .collapsible-form[open] > summary { border-bottom-color: #3c3328; }
:root[data-theme="dark"] .statement-total { border-top-color: #6f8a70; }
:root[data-theme="dark"] .badge { color: #ead8bd; background: #2d332a; }
:root[data-theme="dark"] .badge.pending,
:root[data-theme="dark"] .calendar-event,
:root[data-theme="dark"] .calendar-event.due { color: #ffd7d7; background: #4b2428; }
:root[data-theme="dark"] .calendar-event.paid { color: #ead8bd; background: #2d332a; }
:root[data-theme="dark"] .calendar-event.custom { color: #dfd3ff; background: #332756; }
:root[data-theme="dark"] .calendar-event.contract { color: #cce8ff; background: #1d3b54; }
:root[data-theme="dark"] .calendar-event.expense { color: #f7dda5; background: #3d3216; }
:root[data-theme="dark"] .calendar-add { color: #ead8bd; background: #2d332a; }
:root[data-theme="dark"] .calendar-day.today { box-shadow: inset 0 0 0 2px #3a2b16; }
:root[data-theme="dark"] .notice { color: #f7dda5; background: #3d3216; }
:root[data-theme="dark"] .room-photo-card { background: #111715; border-color: #3c3328; box-shadow: 0 8px 20px #0006; }
:root[data-theme="dark"] .photo-empty { background: #111715; }
:root[data-theme="dark"] .room-photos img { border-color: #3a565b; background: #0f1719; }
:root[data-theme="dark"] .photo-viewer-card { background: #172225; }
@media (max-width: 750px) {
  main { padding: 14px; }
  header { align-items: flex-start; }
  .app-header { position: static; display: grid; border-radius: 16px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .tabbar { position: static; border-radius: 14px; }
  .dashboard-hero { grid-template-columns: 1fr; padding: 17px; }
  .dashboard-hero h2 { font-size: 2rem; }
  .property-room-hero { grid-template-columns: 1fr; }
  .property-room-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .property-room-layout { grid-template-columns: 1fr; }
  .property-room-sidebar { position: static; }
  .compact-filter { width: 100%; min-width: 0; }
  .report-actions { justify-content: stretch; }
  .report-actions label { width: 100%; }
  .login-screen { padding: 14px; place-items: start center; overflow: auto; }
  .login-shell { grid-template-columns: 1fr; gap: 8px; }
  .login-hero { padding: 20px 8px 8px; }
  .login-hero h1 { font-size: 2.7rem; }
  .login-panel { gap: 10px; }
  .two-columns { grid-template-columns: 1fr; }
  .tenant-panel-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tenant-qr-card { grid-template-columns: 92px minmax(0, 1fr); padding: 10px; }
  .tenant-self-qr img { justify-self: center; }
  .report-toolbar { display: grid; align-items: start; }
  .report-toolbar label { min-width: 0; }
  .calendar-layout { grid-template-columns: 1fr; }
  .calendar-layout > article:last-child { grid-column: auto; }
  .calendar-month-card { order: 1; }
  .calendar-event-form { order: 2; }
  .calendar-list-card { order: 3; }
  .calendar-head { align-items: flex-start; }
  .calendar-list-head { display: grid; gap: 10px; }
  .calendar-list-head button { width: 100%; }
  nav { margin-inline: -14px; padding-inline: 14px; }
  .calendar-grid { grid-template-columns: 1fr; gap: 8px; }
  .calendar-weekday,
  .calendar-day.muted { display: none; }
  .calendar-day { min-height: auto; padding: 11px; border-radius: 14px; }
  .calendar-day-head { margin-bottom: 6px; }
  .day-number { color: var(--brand-dark); font-size: .9rem; }
  .day-number::before { content: "Dia "; }
  .calendar-add { width: auto; height: auto; padding: 6px 10px; }
  .calendar-event { font-size: .82rem; padding: 8px 10px; margin-top: 6px; }
  .room-photo-tools { width: 100%; justify-content: stretch; }
  .room-photo-tools > * { flex: 1 1 150px; text-align: center; }
  .room-photos { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
  .photo-actions { grid-template-columns: 1fr; }
  .photo-actions .danger { grid-column: auto; }
  .photo-viewer { padding: 8px; }
  .photo-viewer img { max-height: 68vh; }
  :root:not([data-theme="dark"]) .app-header,
  :root:not([data-theme="dark"]) .tabbar,
  :root:not([data-theme="dark"]) .card:not(.dashboard-hero):not(.property-room-hero) { background: #fffdf7; }
  :root:not([data-theme="dark"]) .calendar-day { background: #fff9ed; border-color: #e2ceb0; }
  :root[data-theme="dark"] .day-number { color: #ead8bd; }
}

/* Estilo app moderno: limpio, directo y pensado para celular. */
:root {
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  color: #111111;
  background: #f4f5f2;
  --brand: #111111;
  --brand-dark: #050505;
  --accent: #16b86a;
  --accent-soft: #e8f7ee;
  --soft: #f1f3f1;
  --surface: #ffffff;
  --surface-2: #f6f7f5;
  --line: #e5e7e3;
  --muted: #69706b;
  --shadow: 0 22px 55px rgba(15, 18, 16, .08);
  --radius: 24px;
}

body,
:root:not([data-theme="dark"]) body {
  color: #111111;
  background:
    radial-gradient(circle at 12% 0%, rgba(22, 184, 106, .12) 0, transparent 28%),
    linear-gradient(180deg, #f7f8f5 0, #f4f5f2 44%, #eef0ec 100%);
}

main { max-width: 1180px; }
h1, h2, h3 { color: #111111; letter-spacing: -.025em; }
h1 { font-size: clamp(1.8rem, 3vw, 2.35rem); }
h2 { font-size: 1.28rem; }
small, .meta { color: #6d746f; }

.app-header {
  top: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(17, 17, 17, .08);
  border-radius: 30px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 18px 45px rgba(17, 17, 17, .08);
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: #ffffff;
  background: #111111;
  box-shadow: none;
}

.app-kicker {
  color: #6d746f;
  letter-spacing: .12em;
}

.login-screen,
:root:not([data-theme="dark"]) .login-screen {
  color: #ffffff;
  background:
    radial-gradient(circle at 20% 12%, rgba(22, 184, 106, .34) 0, transparent 26%),
    radial-gradient(circle at 86% 0%, rgba(255, 255, 255, .12) 0, transparent 24%),
    linear-gradient(135deg, #050505 0%, #111111 48%, #171a16 100%);
}

.login-screen::before,
.login-screen::after {
  background: rgba(22, 184, 106, .18);
  filter: blur(8px);
}

.login-hero h1 {
  color: #ffffff;
  font-size: clamp(2.6rem, 6vw, 5rem);
}

.login-hero p { color: #d8ddd9; }
.login-hero .login-kicker,
.login-highlights span {
  color: #ffffff;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}

.login-panel .login-kicker,
.primary-login .login-kicker {
  color: #111111;
  background: #eef2ee;
}

.primary-login,
.landlord-login {
  border-color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .26);
}

.primary-login h2,
.landlord-login h2,
.primary-login p,
.landlord-login p { color: #111111; }

.card,
:root:not([data-theme="dark"]) .card:not(.dashboard-hero):not(.property-room-hero),
.item,
.property-selector-card,
.property-tile,
.report-mini-stats span,
.report-facts span,
.property-summary,
.calendar-day,
.room-photo-card,
.tenant-qr-card,
.tenant-panel-nav {
  color: #111111;
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, .08);
  box-shadow: 0 10px 28px rgba(17, 17, 17, .05);
}

.card { border-radius: 28px; }
.item { border-radius: 22px; }
.item strong,
.stat strong,
.property-money strong,
.property-room-stats strong,
.property-selector-main strong,
.room-price-status > span:first-child {
  color: #111111;
}

button,
.button-link {
  min-height: 42px;
  border-radius: 999px;
  color: #ffffff;
  background: #111111;
  box-shadow: none;
}

button.secondary,
nav button,
.file-button,
.view-link,
button.ghost {
  color: #111111;
  background: #eef0ed;
  border: 1px solid transparent;
}

button.danger { background: #d23939; }
button:disabled { opacity: .5; cursor: not-allowed; }

:is(button, .button-link, .view-link, .file-button):hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(17, 17, 17, .1);
}

.tabbar {
  top: 96px;
  padding: 6px;
  border: 1px solid rgba(17, 17, 17, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 38px rgba(17, 17, 17, .08);
}

nav button,
.tenant-panel-nav button {
  border-radius: 999px;
  padding: 10px 14px;
}

nav button.active,
.tenant-panel-nav button.active {
  color: #ffffff;
  background: #111111;
  box-shadow: none;
}

.dashboard-hero,
.property-room-hero {
  overflow: hidden;
  border: 0;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 14%, rgba(22, 184, 106, .42) 0, transparent 24%),
    linear-gradient(135deg, #050505 0%, #111111 62%, #1b221d 100%);
  box-shadow: 0 28px 70px rgba(17, 17, 17, .22);
}

.dashboard-hero h2,
.property-room-hero h2 {
  color: #ffffff;
}

.dashboard-hero p,
.property-room-hero p {
  color: #d7ddd8;
}

.next-action {
  border-color: rgba(255, 255, 255, .16);
  color: #ffffff;
  background: rgba(255, 255, 255, .1);
}

.next-action strong,
.next-action p { color: #ffffff; }

.signal-card.attention,
.notice,
.payment-cta {
  border-color: rgba(22, 184, 106, .18);
  color: #19231d;
  background: #eaf8ef;
}

.payment-cta span { color: #111111; }
.progress-line { background: #e8ece7; }
.progress-line span { background: linear-gradient(90deg, #111111, #16b86a); }

.badge {
  color: #111111;
  background: #eef0ed;
}

.badge.pending {
  color: #9f2525;
  background: #ffe5e5;
}

input, select, textarea,
:root:not([data-theme="dark"]) input,
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) textarea {
  color: #111111;
  background: #f4f5f3;
  border: 1px solid transparent;
  border-radius: 16px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid #111111;
  border-color: transparent;
  box-shadow: 0 0 0 5px rgba(22, 184, 106, .16);
}

label, summary { color: #222824; }
details { border-color: rgba(17, 17, 17, .08); }
.collapsible-form > summary::after,
.calendar-add {
  color: #111111;
  background: #eef0ed;
}

.property-money span,
.property-room-stats span,
.steps span,
.room-quick-form details,
.qr-url,
.photo-empty {
  color: #111111;
  background: #f4f5f3;
  border-color: rgba(17, 17, 17, .08);
}

.property-selector-card.active,
.property-focus-card,
.contract-wizard {
  border-color: #111111;
  box-shadow: inset 0 0 0 1px #111111;
}

.calendar-event {
  color: #7a2222;
  background: #ffe5e5;
}
.calendar-event.paid { color: #113f2a; background: #ddf5e8; }
.calendar-event.custom { color: #3f2a77; background: #ebe6ff; }
.calendar-event.contract { color: #123a5a; background: #e1eff8; }
.calendar-event.expense { color: #6e4a12; background: #fff1d4; }

.toast {
  color: #ffffff;
  background: #111111;
  border-radius: 18px;
}

:root[data-theme="dark"] {
  color: #f5f5f2;
  background: #050505;
  --brand: #ffffff;
  --brand-dark: #ffffff;
  --surface: #111111;
  --surface-2: #171717;
  --line: #272727;
  --soft: #1d1d1d;
  --muted: #a2aaa4;
}

:root[data-theme="dark"] body {
  color: #f5f5f2;
  background:
    radial-gradient(circle at 16% 0%, rgba(22, 184, 106, .18) 0, transparent 30%),
    linear-gradient(180deg, #050505 0%, #0b0b0b 48%, #050505 100%);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] .item strong,
:root[data-theme="dark"] .stat strong,
:root[data-theme="dark"] summary,
:root[data-theme="dark"] label,
:root[data-theme="dark"] .property-selector-main strong,
:root[data-theme="dark"] .property-money strong,
:root[data-theme="dark"] .property-room-stats strong,
:root[data-theme="dark"] .room-price-status > span:first-child {
  color: #f5f5f2;
}

:root[data-theme="dark"] small,
:root[data-theme="dark"] .meta,
:root[data-theme="dark"] .calendar-weekday,
:root[data-theme="dark"] .day-number {
  color: #a2aaa4;
}

:root[data-theme="dark"] .app-header,
:root[data-theme="dark"] .tabbar,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .item,
:root[data-theme="dark"] .report-mini-stats span,
:root[data-theme="dark"] .report-facts span,
:root[data-theme="dark"] .property-summary,
:root[data-theme="dark"] .calendar-day,
:root[data-theme="dark"] .property-selector-card,
:root[data-theme="dark"] .property-tile,
:root[data-theme="dark"] .room-photo-card,
:root[data-theme="dark"] .tenant-qr-card,
:root[data-theme="dark"] .tenant-panel-nav,
:root[data-theme="dark"] .qr-url {
  color: #f5f5f2;
  background: #111111;
  border-color: #272727;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

:root[data-theme="dark"] .dashboard-hero,
:root[data-theme="dark"] .property-room-hero {
  background:
    radial-gradient(circle at 88% 14%, rgba(22, 184, 106, .34) 0, transparent 26%),
    linear-gradient(135deg, #000000 0%, #0b0b0b 62%, #101611 100%);
}

:root[data-theme="dark"] button,
:root[data-theme="dark"] .button-link,
:root[data-theme="dark"] nav button.active,
:root[data-theme="dark"] .tenant-panel-nav button.active {
  color: #111111;
  background: #ffffff;
}

:root[data-theme="dark"] button.secondary,
:root[data-theme="dark"] nav button,
:root[data-theme="dark"] .tenant-panel-nav button,
:root[data-theme="dark"] .file-button,
:root[data-theme="dark"] .view-link,
:root[data-theme="dark"] button.ghost,
:root[data-theme="dark"] .calendar-add,
:root[data-theme="dark"] .collapsible-form > summary::after {
  color: #f5f5f2;
  background: #222222;
  border-color: #2d2d2d;
}

:root[data-theme="dark"] button.danger { color: #ffffff; background: #d23939; }

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .property-money span,
:root[data-theme="dark"] .property-room-stats span,
:root[data-theme="dark"] .steps span,
:root[data-theme="dark"] .room-quick-form details,
:root[data-theme="dark"] .photo-empty {
  color: #f5f5f2;
  background: #1b1b1b;
  border-color: #2d2d2d;
}

:root[data-theme="dark"] .notice,
:root[data-theme="dark"] .payment-cta,
:root[data-theme="dark"] .signal-card.attention {
  color: #dff8e9;
  background: #0f2117;
  border-color: #1d5d39;
}

:root[data-theme="dark"] .payment-cta span,
:root[data-theme="dark"] .payment-cta small { color: #dff8e9; }

:root[data-theme="dark"] .badge { color: #f5f5f2; background: #222222; }
:root[data-theme="dark"] .badge.pending { color: #ffdada; background: #4a1f1f; }

@media (max-width: 750px) {
  main.app-shell,
  main.tenant-shell {
    padding: 12px 12px 92px;
  }

  .app-header {
    position: sticky;
    top: 10px;
    display: grid;
    border-radius: 26px;
  }

  .tabbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;
    z-index: 30;
    overflow-x: auto;
    margin: 0;
    padding: 6px;
    border-radius: 999px;
  }

  .tabbar button {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: .82rem;
  }

  nav { margin-inline: 0; padding-inline: 0; }
  .login-shell { min-height: calc(100vh - 28px); align-content: center; }
  .login-hero h1 { font-size: 3.15rem; }
  .card { border-radius: 24px; }
  .dashboard-hero h2 { font-size: 2.2rem; }
  .tenant-panel-nav { border-radius: 24px; }
  .payment-cta .button-link { width: 100%; text-align: center; }
}