:root { --ink:#18302d; --muted:#637571; --line:#dce7e3; --paper:#fff; --ground:#f4f8f6; --brand:#0d6b62; --brand-dark:#075047; --mint:#dff3eb; --orange:#e6893f; --danger:#bb3e42; --shadow:0 10px 30px rgba(21,57,50,.08); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--ground); }
/* Safari puede conservar una pantalla vacía si el inicio tarda: mostramos siempre el acceso. */
body.auth-loading #auth-screen { visibility:visible; }
.auth-screen { position:fixed; inset:0; z-index:100; min-height:100dvh; display:grid; place-items:center; padding:22px; overflow-y:auto; background:linear-gradient(145deg,#e6f1ed,#f7faf8); }
.auth-card { width:min(420px,100%); background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:var(--shadow); }
.auth-brand { font-size:22px; font-weight:850; color:var(--brand); letter-spacing:-.7px; }.auth-brand span { color:#e6893f; }
.auth-card h1 { font-size:25px; margin:22px 0 7px; letter-spacing:-.8px; }.auth-card > p { color:var(--muted); margin:0 0 20px; }
.auth-form { display:grid; gap:13px; }.auth-form label { display:grid; gap:6px; font-size:13px; font-weight:750; }.auth-form input { min-height:44px; border:1px solid #cbdad5; border-radius:8px; padding:10px 11px; }
.auth-form .button,.auth-passkey,.passkey-setup .button { width:100%; margin-top:4px; }.auth-passkey { margin-top:13px; }.passkey-setup { margin-top:18px; padding:16px; border-radius:11px; background:var(--mint); }.passkey-setup p { color:var(--muted); font-size:13px; margin:5px 0 12px; }.passkey-setup .button + .button { margin-top:9px; }.auth-message { min-height:20px; color:var(--danger)!important; font-size:13px; margin:14px 0 0!important; }.auth-message.success { color:#147044!important; }
button, input, select { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:244px minmax(0,1fr); }
.sidebar { background:#103c37; color:#d9ebe6; padding:25px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand { color:#fff; text-decoration:none; font-size:24px; font-weight:800; padding:5px 11px 33px; letter-spacing:-1px; }
.brand span { color:#8ee0c7; margin-right:4px; }
.sidebar nav { display:grid; gap:5px; }
.nav-link { border:0; background:transparent; color:inherit; text-align:left; border-radius:9px; padding:11px 12px; font-weight:650; font-size:14px; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background:rgba(255,255,255,.13); color:#fff; }
.sidebar-foot { font-size:12px; color:#a8c8c0; margin-top:auto; padding:12px; }
.main-content { max-width:none; width:100%; margin:0; padding:31px clamp(32px,4vw,76px) 70px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.topbar h1 { margin:3px 0 0; font-size:29px; letter-spacing:-.8px; }
.eyebrow { color:var(--muted); text-transform:capitalize; margin:0; font-size:13px; }
.icon-button { border:1px solid var(--line); background:white; width:39px; height:39px; border-radius:50%; }
.section-head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin:0 0 18px; }
.section-head h2 { margin:0; font-size:21px; letter-spacing:-.4px; }
.section-head p { margin:5px 0 0; color:var(--muted); font-size:14px; }
.button { border:0; background:var(--brand); color:#fff; padding:11px 15px; border-radius:9px; font-weight:750; box-shadow:0 2px 4px rgba(0,0,0,.08); }
.button:hover { background:var(--brand-dark); }
.button.secondary { background:#fff; color:var(--brand); border:1px solid #a4cdc2; box-shadow:none; }
.button.ghost { background:transparent; color:var(--brand); padding:8px; box-shadow:none; }
.button.danger { background:var(--danger); }
.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:29px; }
.quick-action { border:0; padding:19px; border-radius:13px; text-align:left; background:var(--brand); color:#fff; box-shadow:var(--shadow); }
.quick-action.alt { background:#e57f30; }
.quick-action strong { display:block; font-size:16px; }.quick-action span { display:block; margin-top:3px; opacity:.86; font-size:13px; }
.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:30px; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:19px; box-shadow:0 2px 8px rgba(27,51,47,.025); }
.summary-stack { min-width:0; }.summary-card { width:100%; color:var(--ink); text-align:left; cursor:pointer; }.summary-card:hover { border-color:#9ecdc0; transform:translateY(-1px); }.dashboard-detail { margin:8px 4px 0; padding:0 12px; border-left:3px solid #a4cdc2; }.dashboard-detail .compact-list li { padding:8px 0; }
.card .card-title { color:var(--muted); font-size:13px; margin:0 0 12px; }.card .amount { font-size:27px; font-weight:780; letter-spacing:-1px; margin:0; }.card .hint { color:var(--muted); font-size:12px; margin:8px 0 0; }
.split { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; }.panel { background:#fff; border:1px solid var(--line); border-radius:13px; padding:21px; }.panel h3 { font-size:16px; margin:0 0 14px; }.compact-list { margin:0; padding:0; list-style:none; }.compact-list li { display:flex; gap:9px; justify-content:space-between; padding:12px 0; border-bottom:1px solid #edf2f0; font-size:14px; }.compact-list li:last-child { border-bottom:0; }.muted { color:var(--muted); }
.table-tools { display:flex; justify-content:flex-end; margin:0 0 10px; }.booking-filter { justify-content:flex-start; }.switch-control { display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-size:13px; font-weight:750; cursor:pointer; user-select:none; }.switch-control input { position:absolute; inline-size:1px; block-size:1px; opacity:0; }.switch-track { position:relative; width:44px; height:25px; flex:0 0 44px; border-radius:999px; background:#cbdad5; box-shadow:inset 0 0 0 1px #b4c8c1; transition:background .18s ease; }.switch-track::after { content:''; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(18,61,55,.25); transition:transform .18s ease; }.switch-control input:checked + .switch-track { background:var(--brand); box-shadow:none; }.switch-control input:checked + .switch-track::after { transform:translateX(19px); }.switch-control input:focus-visible + .switch-track { outline:3px solid rgba(15,118,110,.28); outline-offset:3px; }.table-wrap { overflow-x:auto; background:white; border:1px solid var(--line); border-radius:13px; }.data-table { width:100%; border-collapse:collapse; min-width:700px; }.data-table th { color:var(--muted); background:#fbfcfc; font-size:12px; text-transform:uppercase; letter-spacing:.04em; text-align:left; }.data-table th, .data-table td { padding:14px 16px; border-bottom:1px solid #edf2f0; }.data-table th:last-child, .data-table td:last-child { width:1%; white-space:nowrap; }.data-table td { font-size:14px; }.data-table tr:last-child td { border:0; }.table-total-row td { background:#f3faf7; border-top:2px solid #9ecdc0; border-bottom:0; color:var(--brand-dark); font-size:13px; font-weight:850; white-space:nowrap; }.filter-row th { padding:7px 10px 10px; background:#fbfcfc; }.filter-row input { width:100%; min-width:70px; border:1px solid #d5e1dd; padding:7px; border-radius:6px; font-size:12px; font-weight:500; text-transform:none; letter-spacing:0; }.row-check { width:15px; height:15px; accent-color:var(--brand); }.row-actions { display:flex; flex-direction:row; align-items:center; gap:7px; width:max-content; }.row-action { min-height:35px; width:max-content; border-radius:8px; border:1px solid transparent; padding:7px 10px; font-size:12px; font-weight:800; line-height:1.1; box-shadow:0 2px 5px rgba(18,61,55,.08); }.row-action.primary { background:var(--brand); color:#fff; }.row-action.primary:hover { background:var(--brand-dark); }.row-action.secondary { background:#fff; color:var(--brand); border-color:#9ecdc0; }.row-action.secondary:hover { background:#eff9f5; }.tag { border-radius:999px; padding:5px 8px; font-size:11px; font-weight:760; display:inline-block; }.tag.pending { background:#fff1df; color:#9b5417; }.tag.prepared { background:#e8eafe; color:#4455a7; }.tag.done { background:#e1f4e9; color:#147044; }.action-link { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:7px 10px; border:1px solid #9ecdc0; border-radius:7px; background:#fff; color:var(--brand); font-size:12px; font-weight:800; box-shadow:0 1px 3px rgba(18,61,55,.06); }.action-link:hover { background:#eff9f5; }.empty { color:var(--muted); padding:30px; text-align:center; }
dialog { border:0; padding:0; border-radius:16px; width:min(680px, calc(100% - 26px)); max-height:91vh; box-shadow:0 20px 60px rgba(0,0,0,.25); }.modal-box { padding:26px; }.modal-box h2 { margin:0; font-size:22px; letter-spacing:-.5px; }.modal-box > p { color:var(--muted); margin:7px 0 20px; font-size:14px; }.modal-close { float:right; border:0; background:transparent; font-size:24px; color:var(--muted); }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.field { display:grid; gap:6px; }.field.full { grid-column:1/-1; }.field label { font-size:12px; font-weight:750; }.field input,.field select { border:1px solid #cbdad5; border-radius:8px; background:#fff; padding:10px 11px; min-height:42px; }.modal-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; margin-top:22px; }
.settlement-intro { background:var(--mint); padding:14px; border-radius:9px; font-size:13px; margin:17px 0; }.settlement-lines { border:1px solid var(--line); border-radius:10px; overflow:hidden; }.settlement-line { display:grid; grid-template-columns:25px 1fr auto; gap:9px; padding:12px; align-items:center; border-bottom:1px solid #edf2f0; }.settlement-line:last-child { border-bottom:0; }.settlement-line label { cursor:pointer; display:contents; }.settlement-line small { color:var(--muted); display:block; margin-top:2px; }.settlement-total { display:flex; align-items:end; justify-content:space-between; padding:15px 3px 0; }.settlement-total span { font-size:13px; color:var(--muted); }.settlement-total strong { font-size:24px; letter-spacing:-.8px; }.signature-area { margin-top:20px; }.signature-area h3 { font-size:14px; margin:0 0 5px; }.signature-area p { font-size:12px; margin:0 0 8px; color:var(--muted); }.signature-canvas { width:100%; height:150px; border:2px dashed #a7c6bd; border-radius:9px; touch-action:none; background:#fcfefd; }.receipt { background:#fff; }.receipt-head { border-bottom:2px solid var(--brand); padding-bottom:12px; display:flex; justify-content:space-between; }.receipt h3 { margin:0; }.receipt .receipt-line { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #edf2f0; font-size:13px; }.receipt-total { padding:14px 0; font-size:20px; font-weight:800; display:flex; justify-content:space-between; }.receipt-signature { max-width:180px; width:100%; height:80px; object-fit:contain; border-bottom:1px solid var(--ink); margin-top:8px; }
.settlement-help { margin:-7px 0 12px; font-size:12px; }.settlement-list-item { align-items:center; }.settlement-list-actions { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }.settlement-list-actions > span { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }.danger-link { color:var(--danger); border-color:#e2b6b8; }.danger-link:hover { background:#fff1f1; }.action-link.danger { color:var(--danger); border-color:#e2b6b8; }.action-link.danger:hover { background:#fff1f1; }.owner-paid-check { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; font-weight:750; white-space:nowrap; }.owner-paid-check .row-check { opacity:1; cursor:default; }.owner-paid-check input:checked + span { color:#147044; }
.calendar-panel { background:#fff; border:1px solid var(--line); border-radius:13px; padding:20px; }.calendar-controls { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:15px; }.calendar-apartment { width:min(330px,100%); }.calendar-month-controls { display:flex; align-items:center; gap:10px; }.calendar-month-controls h3 { min-width:190px; text-align:center; margin:0; text-transform:capitalize; font-size:17px; }.calendar-legend { display:flex; gap:16px; margin:0 0 14px; color:var(--muted); font-size:12px; font-weight:650; }.legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:4px; }.legend-dot.available { background:#f2f6f4; border:1px solid #d6e3de; }.legend-dot.reserved { background:#bdeadd; border:1px solid #81c7b5; }.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(90px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); overflow:auto; }.calendar-weekdays { border:0; overflow:visible; margin-bottom:0; }.calendar-weekdays span { padding:7px 9px; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; text-align:center; }.calendar-day { min-height:104px; padding:9px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; display:flex; flex-direction:column; gap:7px; }.calendar-day.reserved { background:#e8f7f0; }.calendar-day.today { box-shadow:inset 0 0 0 2px var(--brand); }.calendar-day-number { font-size:13px; font-weight:800; }.calendar-event { display:block; width:100%; padding:5px 6px; border-radius:6px; background:#a6ddcd; color:#084a42; font-size:11px; font-weight:750; line-height:1.25; overflow:hidden; text-overflow:ellipsis; }.calendar-available { color:#a7b5b1; font-size:11px; margin-top:auto; }.empty-day { background:#fafcfb; }
#toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(100px); transition:transform .2s; background:#173c37; color:white; padding:11px 16px; border-radius:8px; font-size:13px; box-shadow:var(--shadow); z-index:9; } #toast.show { transform:translateX(-50%) translateY(0); }#pull-refresh { position:fixed; top:10px; left:50%; transform:translate(-50%,-70px); transition:transform .2s; background:#173c37; color:#fff; padding:9px 13px; border-radius:999px; box-shadow:var(--shadow); font-size:12px; font-weight:700; z-index:12; pointer-events:none; }#pull-refresh.show { transform:translate(-50%,0); }.mobile-nav,.mobile-menu-toggle { display:none; }.mobile-menu-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; }.mobile-menu-list .button { justify-content:flex-start; }
@media (max-width:760px) { .app-shell { display:block; }.sidebar { display:none; }.main-content { padding:20px 16px 92px; }.topbar { margin-bottom:20px; }.topbar h1 { font-size:25px; }.topbar #open-settings { display:none; }.mobile-menu-toggle { display:inline-flex; }.cards { grid-template-columns:1fr; gap:10px; }.card { padding:16px; }.quick-actions { gap:10px; }.quick-action { padding:15px; }.split { grid-template-columns:1fr; }.mobile-nav { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; bottom:0; left:0; right:0; background:#103c37; z-index:3; padding:7px 6px max(7px, env(safe-area-inset-bottom)); color:#d9ebe6; }.mobile-nav .nav-link { text-align:center; padding:9px 3px; font-size:11px; }.mobile-nav .nav-link.active { color:#fff; background:rgba(255,255,255,.13); }.section-head { align-items:flex-start; }.section-head .button { white-space:nowrap; }.form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.modal-box { padding:20px; }.settlement-line { grid-template-columns:23px 1fr; }.settlement-line > strong { grid-column:2; }.data-table th,.data-table td { padding:12px; }.calendar-panel { padding:13px; }.calendar-controls { align-items:stretch; flex-direction:column; gap:13px; }.calendar-apartment { width:100%; }.calendar-month-controls { justify-content:space-between; }.calendar-month-controls h3 { min-width:0; flex:1; font-size:15px; }.calendar-grid { grid-template-columns:repeat(7,minmax(76px,1fr)); }.calendar-day { min-height:88px; padding:7px; }.calendar-event { font-size:10px; }.calendar-available { font-size:10px; }.settlement-list-item { align-items:flex-start; flex-direction:column; }.settlement-list-actions { align-items:flex-start; width:100%; }.settlement-list-actions > span { justify-content:flex-start; } }
@media (max-width:760px) { body.auth-required, body.auth-loading { min-width:0; } body.auth-required #pull-refresh, body.auth-loading #pull-refresh { display:none!important; }.auth-screen { display:block; min-height:100dvh; padding:122px 20px 32px; }.auth-card { width:100%; max-width:430px; margin:0 auto; padding:0; border:0; background:transparent; box-shadow:none; }.auth-card h1 { font-size:31px; line-height:1.08; margin:24px 0 13px; }.auth-card > p { font-size:16px; line-height:1.35; margin-bottom:25px; }.auth-form { display:flex!important; flex-direction:column; gap:17px; width:100%; }.auth-form label { display:flex!important; flex-direction:column; align-items:stretch; gap:7px; width:100%; font-size:15px; }.auth-form input { display:block; width:100%!important; min-width:0; min-height:50px; font-size:17px; }.auth-form .button { display:block; width:100%!important; min-height:52px; font-size:18px; margin-top:3px; }.auth-passkey,.passkey-setup .button { min-height:52px; font-size:17px; }.auth-message { font-size:14px!important; } }
@page { margin:14mm; }
@media print { html,body { background:#fff; }.app-shell,.mobile-nav,#toast,.modal-actions,.modal-close { display:none!important; } dialog { display:block!important; position:static; width:100%; max-height:none; box-shadow:none; }.modal-box { padding:0; }.receipt { display:block!important; } }

/* Los importes de las tablas se leen mejor alineados por la derecha. */
.data-table .money-heading,.data-table [data-money-column],.data-table .table-total-row [data-table-total] { text-align:right; font-variant-numeric:tabular-nums; }

/* Hace visibles las columnas que tienen un filtro aplicado. */
.filter-row input.filter-active { color:#075047; background:#f0fbf6; border-color:#188575; box-shadow:0 0 0 2px rgba(24,133,117,.14); font-weight:750; }

/* Un calendario por vivienda permite comparar la ocupación de un vistazo. */
.calendar-apartment-list { display:grid; gap:22px; }
.calendar-apartment-card { border:1px solid #d8e6e1; border-radius:11px; overflow:hidden; background:#fff; }
.calendar-apartment-card h3 { margin:0; padding:13px 15px; border-bottom:1px solid var(--line); font-size:16px; color:var(--ink); }
.calendar-apartment-card .calendar-weekdays { padding:0 2px; }
.calendar-event + .calendar-event { margin-top:-3px; }
@media (max-width:760px) { .calendar-apartment-list { gap:16px; }.calendar-apartment-card h3 { padding:11px 12px; font-size:15px; } }

/* Barras de estancia: llegan a media tarde y liberan el alojamiento a media mañana. */
.calendar-day { position:relative; min-height:calc(72px + var(--calendar-lanes, 1) * 28px); overflow:visible; }
.calendar-day.reserved { background:#fff; }
.calendar-reservation { position:absolute; z-index:1; top:calc(31px + var(--lane) * 28px); height:22px; display:block; background:#91d4c0; color:#06483f; font-size:10px; font-weight:800; line-height:22px; white-space:nowrap; overflow:hidden; }
.calendar-reservation span { display:block; padding:0 7px; overflow:hidden; text-overflow:ellipsis; }
.calendar-reservation.start { left:50%; right:-1px; border-radius:8px 0 0 8px; }
.calendar-reservation.middle { left:-1px; right:-1px; border-radius:0; }
.calendar-reservation.end { left:-1px; width:calc(50% + 1px); border-radius:0 8px 8px 0; }
.calendar-reservation.single { left:0; right:0; border-radius:8px; }
@media (max-width:760px) { .calendar-day { min-height:calc(66px + var(--calendar-lanes, 1) * 26px); }.calendar-reservation { top:calc(28px + var(--lane) * 26px); height:20px; line-height:20px; font-size:9px; } }

.calendar-mode-tabs { display:flex; gap:8px; margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.calendar-mode-tab { border:1px solid #a4cdc2; border-radius:8px; padding:8px 13px; background:#fff; color:var(--brand); font-size:13px; font-weight:800; }
.calendar-mode-tab.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.calendar-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.calendar-cleaner { width:min(260px,100%); }
.legend-dot.cleaning { background:#f5a9c1; border:1px solid #df779b; }
.calendar-day.cleaning-day { min-height:calc(90px + var(--calendar-cleaning-lines, 1) * 24px); }
.calendar-day.cleaning-day.has-cleaning { background:#fff1f5; }
.calendar-cleaning-total { display:flex; justify-content:space-between; gap:8px; margin-top:4px; color:#9e2855; font-size:12px; font-weight:800; }
.calendar-cleaning-total strong { margin-left:auto; text-align:right; white-space:nowrap; }
.calendar-cleaning-details { display:grid; gap:4px; margin-top:4px; font-size:11px; line-height:1.25; color:#7c2350; }
.calendar-cleaning-details span { display:flex; align-items:center; gap:6px; padding:4px 5px; border-radius:5px; background:#ffd4e2; overflow:hidden; }
.calendar-cleaning-details strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calendar-cleaning-details em { margin-left:auto; flex:0 0 auto; color:#9e2855; font-style:normal; font-weight:800; text-align:right; white-space:nowrap; }
@media (max-width:760px) { .calendar-mode-tabs { margin-bottom:14px; }.calendar-mode-tab { flex:1; padding:9px 10px; }.calendar-filters { display:grid; grid-template-columns:1fr; }.calendar-cleaner { width:100%; }.calendar-day.cleaning-day { min-height:calc(76px + var(--calendar-cleaning-lines, 1) * 23px); }.calendar-cleaning-total { font-size:10px; }.calendar-cleaning-details { font-size:9px; gap:3px; }.calendar-cleaning-details span { padding:3px 4px; } }