/* Interfaz del hogar. La demostración conserva su hoja de estilos independiente. */
body.product{--bg:#151918;--surface:#202724;--raised:#29332e;--mint:#a8f5c4;--mint-hover:#c0ffd8;--ink:#f2f5ef;--muted:#b2beb5;--line:#3a4740;--blue:var(--mint);background:var(--bg);color:var(--ink);color-scheme:dark;font-family:"Segoe UI",Arial,sans-serif;font-size:15px;min-height:100dvh}
.product *{scroll-margin-top:100px}
.product [hidden]{display:none!important}
.product svg{width:22px;height:22px;flex-shrink:0}
.product button,.product a,.product input,.product select{touch-action:manipulation}
.product button:focus-visible,.product a:focus-visible,.product input:focus-visible,.product select:focus-visible,.product textarea:focus-visible,.product summary:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
.product .product-header{max-width:1060px;margin:0 auto;padding:22px 30px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:12;background:#151918ed;backdrop-filter:blur(14px)}
.product-brand{display:inline-flex;align-items:center;font-size:32px;font-weight:800;letter-spacing:-1.5px;gap:9px;color:var(--ink)}
.product-brand>span:first-child{background:var(--mint);color:#193222;border-radius:14px;width:39px;height:39px;display:grid;place-items:center}
.product-brand>span:first-child svg{width:24px;height:24px}
.brand-period{color:var(--mint);margin-left:-9px}
.profile-wrap{position:relative}
.profile-button{width:45px;height:45px;display:grid;place-items:center;border:1px solid #526359;background:var(--surface);color:var(--mint);border-radius:50%;padding:0;cursor:pointer}
.profile-button:hover,.profile-button[aria-expanded=true]{background:var(--raised);border-color:var(--mint)}
.profile-menu{position:absolute;right:0;top:57px;width:min(300px,calc(100vw - 40px));border:1px solid #506257;background:#26302a;border-radius:18px;padding:20px;box-shadow:0 20px 60px #0007;z-index:30;overflow-wrap:anywhere}
.profile-caption{display:block;color:var(--muted);font-size:10px;letter-spacing:1.5px;margin-bottom:14px;font-weight:700}
.profile-menu strong{font-size:15px;display:block}
.profile-menu p{font-size:12px;color:var(--muted);margin:6px 0 18px}
.profile-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:12px 0 0;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);font-size:13px;font-weight:650;text-align:left}
.product.real-workspace main,.product.entry-screen main{margin:0 auto;max-width:1060px;padding:8px 30px 125px}
.product .current-date{margin:4px 0 26px;padding:0 0 22px;border-bottom:1px solid var(--line)}
.product .current-date-label{color:var(--muted);font-size:9px;letter-spacing:1.5px;margin-bottom:6px}
.product .current-date time{font-size:clamp(19px,2.2vw,25px);color:#e1e9df;font-weight:550;letter-spacing:-.5px}
.product .page-head{margin:0 0 23px;align-items:center}
.product .page-head h1{font-size:clamp(29px,3vw,38px);letter-spacing:-1.4px;margin:4px 0 8px;line-height:1.15}
.product .eyebrow{color:var(--muted);font-size:10px;font-weight:650;letter-spacing:1.5px;margin:0 0 10px;display:block}
.product .subtitle{font-size:13px;color:var(--muted)}
.product .card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;margin-bottom:22px;box-shadow:none}
.product .card h2{font-size:17px;font-weight:650;letter-spacing:-.3px;color:var(--ink)}
.product .card h3{font-size:15px}
.product .section-header{margin:0 0 18px;align-items:center;gap:12px}
.product .muted,.product .small.muted,.product .tiny.muted{color:var(--muted)}
.product .small{font-size:12px}
.product .personal-balance{background:var(--mint);color:#173021;border:0;border-radius:26px;padding:28px 32px;min-height:0;margin-bottom:16px}
.product .personal-balance:after{width:250px;height:250px;border:35px solid #17302108;right:-120px;top:-95px}
.balance-label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#274834;font-size:10px;font-weight:750;letter-spacing:1.5px;position:relative;z-index:1}
.balance-badge{border:1px solid #244e373d;border-radius:30px;letter-spacing:0;font-size:11px;padding:6px 11px;font-weight:650}
.product .personal-balance .balance-number{font-size:clamp(43px,6vw,66px);line-height:1.1;letter-spacing:-2.5px;margin:16px 0 11px;color:#152f1f;font-weight:750}
.product .personal-balance .balance-caption{color:#1c3a28;font-size:16px;font-weight:600;margin:0;line-height:1.6}
.product .personal-balance .balance-foot{color:#355641;font-size:11px;border-color:#33594138;margin-top:22px;padding-top:16px;line-height:1.6}
.product .quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 20px}
.product .btn{border:1px solid #53665a;background:#2a352e;color:#eef6ed;border-radius:13px;min-height:45px;font-size:12px;font-weight:650;padding:12px 16px;transition:background .15s,border-color .15s;line-height:1.3}
.product .btn svg{width:19px;height:19px}
.product .btn:hover{background:#34453b;border-color:#91b09d}
.product .btn.primary{background:var(--mint);border-color:var(--mint);color:#173021}
.product .btn.primary:hover{background:var(--mint-hover)}
.product .btn.secondary{background:var(--surface);color:var(--mint);border-color:#587364}
.product .btn.danger{background:#3b272b;color:#ffc3bc;border-color:#93615e}
.product .btn:disabled{opacity:.5;cursor:not-allowed}
.product .quick-actions .btn{min-height:53px;font-size:13px}
.product .text-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mint);font-weight:600}
.product .text-link svg{width:15px;height:15px}
.product .sync-status{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:22px;padding:0 2px;background:transparent;border:0}
.sync-copy{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;flex-wrap:wrap}
.sync-dot{width:6px;height:6px;background:var(--mint);border-radius:50%;flex-shrink:0}
.product .sync-copy strong{font-size:11px;font-weight:500}
.product #sync-detail{font-size:10px;margin:0;color:var(--muted)}
.product #sync{padding:8px;min-height:34px;width:34px;background:transparent;border:1px solid var(--line);border-radius:10px;color:var(--muted)}
.movement-row{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);padding:18px 0}
.movement-row:first-child{border-top:0}
.movement-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#c8e6bb;background:#394a33;flex-shrink:0}
.movement-icon.payment{color:#dcc8f2;background:#45394c}
.movement-copy{min-width:0;flex:1}
.movement-copy>strong{font-size:13px;font-weight:600;overflow-wrap:anywhere;display:block}
.movement-copy p{font-size:11px;color:var(--muted);margin:5px 0 2px}
.movement-state{font-size:10px;color:#b6c5bb}
.movement-amount{font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.row-details{background:transparent;border:1px solid transparent;display:grid;place-items:center;width:32px;height:36px;border-radius:10px;color:var(--muted);flex-shrink:0}
.row-details:hover{background:var(--raised);color:var(--mint)}
.row-details svg{width:18px;height:18px}
.product .empty-state{text-align:center;padding:28px 12px;color:var(--muted)}
.empty-state>span{display:grid;place-items:center;border-radius:20px;background:var(--raised);width:60px;height:60px;margin:0 auto 18px;color:var(--mint)}
.empty-state p{font-size:13px;margin:8px 0 0}
.product .empty-state h3{color:#e0e9de;font-size:15px}
.product .page-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-actions>p{font-size:13px;margin:0}
.page-actions>label{max-width:225px}
.product label,.product .field-label{font-size:12px;color:#d3ded2;font-weight:550;line-height:1.6}
.product input,.product select,.product textarea{background:#171f1b;color:#eef5eb;border:1px solid #5a6d60;border-radius:11px;padding:12px;min-height:45px;font-size:13px}
.product input::placeholder,.product textarea::placeholder{color:#a4b1a7}
.product input[type=checkbox]{width:18px;min-height:18px;accent-color:var(--mint);vertical-align:middle;margin-right:6px}
.product select option{background:#202724;color:#eef5eb}
.product input[type=month],.product input[type=date]{max-width:100%;min-width:0}
.movement-filters{display:flex;align-items:end;gap:13px;flex-wrap:wrap;margin-bottom:16px}
.movement-filters label:first-child{flex:1;min-width:180px}
.movement-filters label{display:grid;gap:6px}
.movement-filters label:nth-child(2){max-width:210px}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.summary-grid .card>strong{font-size:28px;display:block;letter-spacing:-1px;margin:16px 0 8px;color:var(--mint)}
.summary-grid .card>p{font-size:12px;color:var(--muted);margin:0}
.household-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.household-name-card h2{font-size:26px!important;margin:18px 0 12px!important;letter-spacing:-.8px!important}
.household-name-card p{font-size:13px;margin:0 0 18px}
.person-row{display:flex;align-items:center;gap:12px;padding:15px 0;border-top:1px solid var(--line)}
.person-row:first-of-type{border-top:0}
.person-avatar{height:41px;width:41px;border-radius:50%;display:grid;place-items:center;background:#384e3f;color:#c3ebcd;font-weight:650;flex-shrink:0}
.person-row strong{font-size:13px;font-weight:550}
.person-row small,.invitation-row small{display:block;color:var(--muted);font-size:11px;margin-top:5px}
.count-badge{font-size:12px;border:1px solid #596e60;border-radius:20px;padding:3px 9px;color:var(--mint)}
.product .invite-button{width:100%;margin-top:14px}
.invitation-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.invitation-row>div{min-width:0}
.invitation-row strong{font-size:13px;font-weight:550}
.invitation-row .btn{flex-shrink:0}
.product .progress{background:#3a493e}
.product .progress>span{background:#a8edbd}
.product .category-row .between{font-size:12px}
.product .review-line{font-size:13px;border-color:var(--line);padding:17px 0}
.product .category-row strong{font-weight:550}
.product .bottom-navigation{display:flex;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 40px));z-index:15;background:#27312beF;border:1px solid #506357;border-radius:24px;padding:10px 8px;box-shadow:0 10px 35px #0005;backdrop-filter:blur(16px);justify-content:space-around}
.bottom-navigation a{display:grid;justify-items:center;align-content:center;gap:6px;padding:7px 10px;border-radius:15px;min-width:75px;color:#b9c6bc;font-size:10px;font-weight:550;line-height:1.2}
.bottom-navigation a svg{width:23px;height:23px}
.bottom-navigation a[aria-current=page]{color:var(--mint);background:#3a4d40}
.product dialog{background:var(--surface);color:var(--ink);border:1px solid #647969;border-radius:24px;box-shadow:0 20px 70px #0006;max-height:90dvh}
.product dialog::backdrop{background:#060b08bb;backdrop-filter:blur(6px)}
.product #dialog-content{padding:25px}
.product .modal-head{align-items:center;margin-bottom:25px}
.product .modal-head h2{font-size:21px}
.product .form-grid{gap:0 16px}
.product .field{margin-bottom:18px}
.product .real-part{background:#19221c;border:1px solid #526557;border-radius:16px;padding:18px}
.product .real-part legend{font-size:12px;color:#b6d9bf;padding:0 8px}
.product .record-detail,.product .conflict-comparison pre{background:#17211b;color:#d4e2d3;font-family:inherit;font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.product .error{background:#3e292d;color:#ffd4cd;border:1px solid #a06c69;font-size:13px;line-height:1.6;padding:15px;border-radius:14px}
.product .conflict-card{border-color:#a58d56}
.product .conflict-comparison>div{background:#17211b;border-radius:12px;padding:16px;min-width:0}
.product .conflict-comparison p{font-size:13px;overflow-wrap:anywhere}
.product details{padding:12px 0;border-top:1px solid var(--line)}
.product summary{cursor:pointer;font-size:13px;color:#c7ddca;line-height:1.6}
.product footer{font-size:11px;color:#acb9ae;margin-top:10px;padding:18px 0}
.product .product-toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);z-index:40;background:#a8f5c4;color:#173021;border:1px solid #d4ffdf;border-radius:14px;padding:15px 22px;box-shadow:0 12px 40px #0006;font-size:13px;max-width:min(520px,90%);text-align:center}
.entry-screen #entry-welcome{max-width:490px;margin:30px auto 0}
.entry-screen .sidebar,.entry-screen .mobile-nav,.entry-screen .local-notice,.entry-screen .current-date{display:none}
.entry-screen .welcome-icon{height:72px;width:72px;border-radius:24px;display:grid;place-items:center;color:var(--mint);background:#304938;margin-bottom:24px}
.entry-screen .welcome-icon svg{width:35px;height:35px}
.entry-screen h1{font-size:38px;line-height:1.1;letter-spacing:-1.4px}
.entry-screen p{font-size:14px;color:var(--muted);margin:20px 0 26px;line-height:1.8}
.entry-screen .btn{width:100%;min-height:50px;font-size:14px}
@media(max-width:720px){
 .product .product-header{padding:18px 19px}
 .product.real-workspace main,.product.entry-screen main{padding:6px 18px 120px}
 .product-brand{font-size:30px}
 .product .current-date{margin-bottom:22px;padding-bottom:17px}
 .product .current-date-label{font-size:8px}
 .product .current-date time{font-size:19px;letter-spacing:-.5px}
 .product .page-head{display:block;margin-bottom:21px}
 .product .page-head h1{font-size:29px;letter-spacing:-1px}
 .product .card{padding:20px;border-radius:20px;margin-bottom:17px}
 .product .section-header{gap:8px}
 .product .card h2{font-size:16px}
 .product .personal-balance{padding:24px;border-radius:23px}
 .product .personal-balance .balance-number{font-size:49px;letter-spacing:-2px}
 .product .personal-balance .balance-caption{font-size:14px}
 .product .personal-balance .balance-foot{font-size:10px;margin-top:18px}
 .product .quick-actions{gap:10px;margin-bottom:18px}
 .product .quick-actions .btn{padding:12px 9px;font-size:12px;gap:7px;min-height:49px}
 .product .sync-status{gap:8px;margin-bottom:20px}
 .product #sync-detail{font-size:10px}
 .movement-row{gap:9px;padding:16px 0;flex-wrap:nowrap}
 .movement-copy>strong{font-size:12px}
 .movement-copy p{font-size:10px;line-height:1.5}
 .movement-state{font-size:9px}
 .movement-icon{width:34px;height:37px;border-radius:11px}
 .movement-icon svg{width:19px;height:19px}
 .movement-amount{font-size:12px}
 .row-details{width:23px;padding:0}
 .product .text-link{font-size:11px}
 .summary-grid,.household-grid{grid-template-columns:1fr;gap:0}
 .summary-grid{grid-template-columns:1fr 1fr;gap:0 12px}
 .summary-grid .card:first-child{grid-column:1/-1}
 .summary-grid .card>strong{font-size:25px}
 .summary-grid .card>p{font-size:11px}
 .product .bottom-navigation{bottom:0;left:0;transform:none;width:100%;padding:10px 10px max(11px,env(safe-area-inset-bottom));border-radius:21px 21px 0 0;border:1px solid #4c6053;border-bottom:0;box-shadow:0 -8px 24px #0003}
 .bottom-navigation a{font-size:9px;padding:7px 7px;min-width:65px;gap:6px}
 .bottom-navigation a svg{width:22px;height:22px}
 .movement-filters label:first-child{min-width:100%;flex-basis:100%}
 .movement-filters label:nth-child(2){max-width:190px;flex:1;min-width:0}
 .movement-filters .btn{font-size:11px;padding:10px}
 .product .form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
 .product .form-grid>*{min-width:0}
 .product #dialog-content{padding:20px}
 .product .real-part{padding:14px}
 .product .profile-menu{right:0}
 .invitation-row{gap:10px}
 .invitation-row .btn{font-size:11px;padding:10px}
 .product .conflict-comparison{grid-template-columns:1fr}
}
@media(min-width:721px){.product .product-header{padding-top:17px;padding-bottom:17px}.product .current-date{margin-bottom:20px;padding-bottom:16px}.product .page-head{margin-bottom:20px}.product .page-head h1{font-size:33px}.product .personal-balance{padding:24px 29px}.product .personal-balance .balance-number{font-size:57px;margin:12px 0 9px}.product .personal-balance .balance-foot{margin-top:16px;padding-top:13px}}
@media(prefers-reduced-motion:reduce){.product *{scroll-behavior:auto;transition:none!important}}