/* Controles compactos con área táctil de al menos 44 px. */
button{font-size:14px;line-height:1.35;padding:9px 13px;min-height:44px;border-radius:11px;font-weight:650}
.sidebar .nav button{font-size:13px;min-height:44px;padding:8px 11px;gap:9px}
.welcome-step{padding:18px;min-height:185px;gap:12px;border-radius:19px}
.welcome-step strong{font-size:19px;line-height:1.25;letter-spacing:-.35px}.welcome-step small{font-size:13px;line-height:1.5}.welcome-step .step-link{font-size:13px;padding-top:0}.welcome-step .step-number{width:32px;height:32px;min-width:32px;font-size:14px}
.home-shortcuts .home-tile{padding:13px 15px;min-height:72px;gap:11px}.home-shortcuts .home-tile strong,.home-tile strong{font-size:15px;line-height:1.3}.home-tile small{font-size:12px}.home-tile{padding:18px;min-height:128px}.mini-tile{padding:15px;font-size:13px}.account-tabs button{font-size:13px;padding:8px 11px;min-height:44px}
.journey-controls button{padding:0}.dialog-head button{padding:6px;min-width:44px}.bottom-nav button{padding:7px 6px}.bottom-nav small{font-size:11px}.rr{padding:0;font-size:26px}
.area{padding:19px;min-height:108px;gap:12px}.area strong{font-size:18px}.area .number{width:38px;height:38px;font-size:17px}.area small{font-size:13px}
/* Finanzas: tarjetas de resumen, gráficos de datos reales y movimientos. */
.finance-dashboard{--finance-purple:#7956d8;--finance-green:#237f6c;--finance-red:#a94d59}
.finance-heading{align-items:center;margin-bottom:20px}.finance-heading h1{font-size:29px;letter-spacing:-1px;margin:4px 0 0}.finance-heading p{font-size:14px;margin:7px 0 0}.finance-heading .eyebrow{font-size:10px;letter-spacing:1.5px;margin:0;color:#64748b}.finance-heading button{margin-right:auto}
.finance-filters{padding:16px 20px;background:#fafbff;box-shadow:none;margin-bottom:20px;gap:14px}.finance-filters label{font-size:12px}.finance-filters input{min-height:44px;padding:8px 11px;font-size:14px;border-color:#d0d8e6;background:white}
.finance-overview{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}
.finance-wallet{position:relative;overflow:hidden;background:linear-gradient(125deg,#6447bb,#8865e4);border-radius:22px;padding:25px 27px;color:#fff;box-shadow:0 10px 26px #7956d824;display:flex;flex-direction:column;justify-content:center;min-width:0}
.finance-wallet:before{content:"";position:absolute;right:-60px;top:-100px;width:230px;height:230px;border:35px solid #ffffff09;border-radius:50%;pointer-events:none}.finance-wallet .finance-kicker{color:#f2ecff}.finance-kicker{font-size:10px;letter-spacing:1.5px;font-weight:750;color:#718097}.finance-currency{font-size:11px;font-weight:700;border:1px solid #ffffff45;background:#ffffff15;border-radius:8px;padding:5px 8px}.finance-amount{font-size:clamp(27px,3vw,39px);font-weight:750;letter-spacing:-1.3px;line-height:1.2;margin:17px 0 7px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.finance-wallet-date{font-size:12px;color:#f0e9ff}.finance-wallet-bottom{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px;padding-top:18px;border-top:1px solid #ffffff30}.finance-wallet-bottom span{display:block;font-size:11px;color:#eee6ff}.finance-wallet-bottom strong{display:block;font-size:16px;margin-top:5px;overflow-wrap:anywhere}.finance-wallet.is-negative{background:linear-gradient(125deg,#834668,#a35c86)}
.finance-period-cards{display:grid;grid-template-columns:1fr 1fr;gap:13px}.finance-stat{background:#fff;border:1px solid #d9e2ed;border-radius:18px;padding:19px;display:flex;align-items:flex-start;gap:12px;min-width:0;box-shadow:0 3px 12px #27344905}.finance-stat>div{min-width:0}.finance-stat span:not(.finance-stat-icon){display:block;font-size:12px;color:#627086}.finance-stat strong{display:block;font-size:22px;letter-spacing:-.6px;line-height:1.25;margin-top:9px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.finance-stat-icon{display:grid;place-items:center;width:32px;height:32px;min-width:32px;border-radius:11px;font-size:22px;background:#e4f4ee;color:#237f6c}.finance-expense .finance-stat-icon{background:#fae8e9;color:#a94d59}.finance-result{grid-column:1/-1;justify-content:space-between;align-items:center;background:#f5f2fc;border-color:#e5def4}.finance-result strong{font-size:24px;color:#6246ac;margin-top:4px}.finance-result .finance-result-label{font-size:11px;max-width:90px;text-align:right}.finance-result .finance-negative{color:#a94d59}.finance-disclaimer{font-size:12px;color:#64748b;line-height:1.6;margin:14px 2px 22px;max-width:100%}
.finance-charts{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px}.finance-dashboard .card{border-color:#d9e2ed;box-shadow:0 3px 14px #27344905;background:white}.finance-chart-card{padding:21px;min-width:0}.finance-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}.finance-card-heading h2{font-size:17px;letter-spacing:-.35px;margin:6px 0 0}.finance-chart-key{display:flex;align-items:center;gap:6px;font-size:11px;color:#64748b}.finance-chart-key i{width:7px;height:7px;border-radius:50%;background:#7956d8}.finance-line{display:block;width:100%;height:auto;min-height:130px;max-height:210px}.finance-range{display:flex;justify-content:space-between;gap:12px;margin:6px 0 12px;flex-wrap:wrap}.finance-range span{font-size:11px;color:#64748b}.finance-range strong{display:block;font-size:13px;font-weight:650;color:#334155}.finance-chart-card>small{font-size:11px;display:block}.finance-chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:190px;padding:20px;color:#64748b}.finance-chart-empty>span{font-size:38px;color:#b6a1e5;line-height:1.2}.finance-chart-empty p{font-size:14px;font-weight:650;color:#526178;margin:10px 0 4px}.finance-chart-empty small{font-size:12px;max-width:230px}
.finance-category-layout{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px;padding:10px 0}.finance-donut{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.finance-donut>div{width:109px;height:109px;background:white;border-radius:50%;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:8px;overflow-wrap:anywhere}.finance-donut span{font-size:10px;color:#64748b}.finance-donut strong{font-size:16px;color:#334155;margin-top:6px;line-height:1.2}.finance-legend{list-style:none;padding:0;margin:0;display:grid;gap:13px;flex:1;min-width:150px}.finance-legend li{display:flex;align-items:center;gap:9px;font-size:12px}.finance-legend i{width:8px;height:8px;border-radius:3px;flex-shrink:0}.finance-legend li>span{flex:1;min-width:0;overflow-wrap:anywhere;color:#46556b}.finance-legend small{display:block;font-size:11px;margin-top:1px}.finance-legend strong{font-size:12px;color:#46556b}
.finance-actions{margin:22px 0 18px;gap:9px}.finance-actions button{font-size:12px;padding:8px 12px;box-shadow:none}.finance-detail-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px}.finance-history,.finance-bills{padding:21px;min-width:0}.finance-movement-list{display:grid;gap:0}.finance-movement{display:flex;align-items:center;gap:12px;padding:16px 0;border-top:1px solid #edf0f6;flex-wrap:wrap}.finance-movement-icon{width:36px;height:36px;flex-shrink:0;background:#eef1f7;color:#64748b;display:grid;place-items:center;border-radius:12px;font-size:22px}.finance-movement-icon.is-income{background:#e4f4ee;color:#237f6c}.finance-movement-icon.is-expense{background:#fae8e9;color:#a94d59}.finance-movement-copy{flex:1;min-width:100px}.finance-movement-copy h3{font-size:14px;margin:0 0 4px;letter-spacing:-.1px;overflow-wrap:anywhere}.finance-movement-copy small{font-size:11px;line-height:1.4;display:block}.finance-movement-amount{font-size:14px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.finance-movement-amount.is-income{color:#237f6c}.finance-movement-amount.is-expense{color:#a94d59}.finance-movement button{font-size:11px;padding:8px;min-width:44px}.finance-bill{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 0;border-top:1px solid #edf0f6}.finance-bill>div{flex:1;min-width:100px}.finance-bill h3{font-size:14px;margin:0 0 3px}.finance-bill small,.finance-bills>small{font-size:11px}.finance-bill>strong{font-size:14px}.finance-bill button{font-size:12px}.finance-bills>small{display:block;margin-top:15px}
@media(max-width:1100px){.finance-overview,.finance-charts,.finance-detail-grid{gap:15px}.finance-stat{padding:16px;gap:9px;flex-wrap:wrap}.finance-stat strong{font-size:20px}.finance-chart-card,.finance-history,.finance-bills{padding:18px}}
@media(max-width:760px){.finance-overview,.finance-charts,.finance-detail-grid{grid-template-columns:1fr}.finance-wallet{padding:23px}.finance-period-cards{grid-template-columns:1fr 1fr}.finance-stat{flex-wrap:nowrap;padding:17px}.finance-result{grid-column:1/-1}.finance-category-layout{gap:26px}.finance-heading{align-items:flex-start}.finance-heading h1{font-size:26px}.finance-filters{padding:14px}.finance-filters input{font-size:16px}.finance-heading button{font-size:13px}.finance-amount{font-size:34px}}
@media(max-width:390px){.finance-period-cards{gap:9px}.finance-stat{padding:13px;gap:7px;flex-wrap:wrap}.finance-stat strong{font-size:19px}.finance-wallet-bottom{gap:12px}.finance-wallet-bottom strong{font-size:14px}.finance-movement-amount{font-size:13px}.finance-heading h1{font-size:25px}}
@media print{.finance-wallet{background:#f1edfa!important;color:#273449}.finance-wallet span,.finance-wallet .finance-kicker{color:#46556b}.finance-actions,.finance-heading button{display:none}.finance-charts,.finance-detail-grid{break-inside:avoid}}
.finance-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.finance-filters label,.finance-filters input{min-width:0;max-width:100%}.finance-filters input{width:100%}
@media(max-width:600px){.finance-filters{grid-template-columns:1fr}}
.finance-detail-grid{align-items:start}.finance-stat-icon svg,.finance-movement-icon svg{display:block;flex-shrink:0}
/* Acabado inspirado en la referencia: superficies suaves y acentos violeta/menta. */
.main-area:has(.finance-dashboard){background:linear-gradient(155deg,#f6f4fc 0%,#f4f8fc 55%,#f1faf7 100%)}
.finance-dashboard .finance-filters{background:#ffffffd9;border-color:#e1e5f1;border-radius:20px;box-shadow:0 6px 24px #4c438008}
.finance-dashboard .finance-chart-card,.finance-dashboard .finance-history,.finance-dashboard .finance-bills{border:1px solid #e1e5f1;border-radius:22px;box-shadow:0 8px 26px #4c43800a}
.finance-wallet{background:linear-gradient(130deg,#6840d5 0%,#8158e8 70%,#9b7aee 100%);box-shadow:0 12px 30px #7956d826;border:1px solid #ffffff65}
.finance-wallet.is-negative{background:linear-gradient(130deg,#834668,#a35c86)}
.finance-wallet:before{border-width:25px;right:-75px;top:-105px;width:270px;height:270px}
.finance-wallet-bottom{background:#ffffff0a;border-radius:0 0 12px 12px;padding-bottom:4px}
.finance-income{background:linear-gradient(145deg,#fff,#f1faf6);border-color:#d8eae2}.finance-expense{background:linear-gradient(145deg,#fff,#fff6f3);border-color:#eedfdb}.finance-stat-icon{border-radius:50%;width:34px;height:34px;min-width:34px}
.finance-result{background:linear-gradient(110deg,#f4efff,#faf8ff);border-color:#e2d8f5}.finance-result strong{color:#6b46bc}
.finance-card-heading .finance-kicker{color:#817399;font-size:9px;letter-spacing:1.7px}.finance-card-heading h2{font-size:16px;color:#37435c}
.finance-line{margin:6px 0}.finance-legend li{padding:2px 0}.finance-donut{box-shadow:0 4px 16px #7956d810}.finance-movement{padding:14px 0}.finance-movement-icon{border-radius:12px}.finance-movement-copy h3{font-weight:650}.finance-movement button{color:#778198;font-weight:550}
.finance-actions button{background:#fff;border-color:#dce1ef;color:#65518c;border-radius:10px}.finance-heading .primary{box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 18%,transparent)}
@media(max-width:600px){.finance-wallet{border-radius:21px}.finance-card-heading{margin-bottom:12px}.finance-movement-list .empty{padding:28px 16px}}
@media print{.main-area:has(.finance-dashboard){background:#fff}.finance-dashboard .card,.finance-donut{box-shadow:none}}

/* Ingredient name gets space; quantities and unit selectors remain compact. */
#recipeForm .ingredient-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 12px;align-items:start}
#recipeForm .ingredient-fields>label{min-width:0;gap:4px;font-size:13px}
#recipeForm .ingredient-field-name{grid-column:1 / 4;grid-row:1}
#recipeForm .ingredient-field-buyUnit{grid-column:4;grid-row:1}
#recipeForm .ingredient-field-bought{grid-column:1;grid-row:2}
#recipeForm .ingredient-field-price{grid-column:2;grid-row:2}
#recipeForm .ingredient-field-used{grid-column:3;grid-row:2}
#recipeForm .ingredient-field-useUnit{grid-column:4;grid-row:2}
#recipeForm .ingredient-fields input,#recipeForm .ingredient-fields select,#recipeForm .ingredient-density input,#recipeForm .ingredient-density select{box-sizing:border-box;min-width:0;max-width:100%;width:100%;min-height:42px;padding:7px 9px;font-size:15px}
#recipeForm input[type=number],#recipeForm .ingredient-density input{max-width:15ch}
#recipeForm .ingredient-density{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:8px 12px;margin-top:12px;padding:10px;border:1px solid var(--line,#cbd5e1);border-radius:10px}
#recipeForm .ingredient-density[hidden]{display:none!important}
#recipeForm .ingredient-density label{min-width:0;font-size:13px}
#recipeForm .ingredient-density small{grid-column:1 / -1;line-height:1.45}
#recipeForm .ingredient-body{padding:12px}
#recipeForm .ingredient summary{padding:9px 12px;min-height:42px;font-size:15px}
#recipeForm button[data-act=addIngredient]{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;max-width:100%;min-height:42px;height:auto;padding:8px 12px;font-size:14px!important;line-height:1.3}
#recipeForm button[data-act=addIngredient] span{font-size:14px!important}
#recipeForm button[data-act=addIngredient] span:first-child{font-size:20px!important}
.recipe-errors{margin:8px 0;padding-left:21px;color:var(--danger,#9e332a);font-size:14px}
.recipe-errors li{margin:5px 0;line-height:1.4}
#recipeError,#formerror,#toast,.error{white-space:pre-line;overflow-wrap:anywhere}
@media(max-width:600px){
 #recipeForm .ingredient-fields{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:8px 10px}
 #recipeForm .ingredient-field-name{grid-column:1;grid-row:1}
 #recipeForm .ingredient-field-buyUnit{grid-column:2;grid-row:1}
 #recipeForm .ingredient-field-bought{grid-column:1;grid-row:2}
 #recipeForm .ingredient-field-price{grid-column:2;grid-row:2}
 #recipeForm .ingredient-field-used{grid-column:1;grid-row:3}
 #recipeForm .ingredient-field-useUnit{grid-column:2;grid-row:3}
}


.ingredient-cost{margin-left:auto;font-size:13px;font-variant-numeric:tabular-nums}.ingredient-cost-line{display:flex;justify-content:space-between;gap:12px;margin-top:12px}#recipeForm .ingredient-fields input,#recipeForm .ingredient-fields select,#recipeForm .ingredient-density input,#recipeForm .ingredient-density select{min-height:44px} @media(max-width:600px){#recipeForm .ingredient-fields input,#recipeForm .ingredient-fields select,#recipeForm .ingredient-density input,#recipeForm .ingredient-density select{font-size:16px}}

/* Recipe costs remain readable while ingredient rows are open or collapsed. */
#recipeForm .ingredient>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px;align-items:center}
#recipeForm .ingredient>summary .rr-ingredient-icon{margin:0}
#recipeForm .rr-ingredient-title{font-size:clamp(16px,1.5vw,19px);font-weight:800;line-height:1.25;min-width:0}
#recipeForm .ingredient>summary .ingredient-cost{font-size:clamp(15px,1.4vw,18px);font-weight:800;color:#215b45;text-align:right;white-space:normal;overflow-wrap:anywhere}
#recipeForm .recipe-percent-value{display:block;font-size:clamp(28px,3.5vw,42px);font-weight:850;line-height:1.1;color:var(--accent)}
#recipeForm .recipe-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#recipeForm .recipe-result{min-width:0;padding:16px;border:1.5px solid #dce5db;border-radius:16px;background:#f7faf5}
#recipeForm .recipe-result span{display:block;font-size:13px;font-weight:750;line-height:1.35;text-transform:uppercase;letter-spacing:.03em;color:#455c4c}
#recipeForm .recipe-result strong{display:block;margin-top:8px;font-size:clamp(23px,2.5vw,33px);font-weight:850;line-height:1.2;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;color:#163c2e}
#recipeForm .recipe-result.percent strong{color:var(--accent)}
#recipeForm .recipe-result.loss{background:#fff1ed;border-color:#efc9c1}
#recipeForm .recipe-result.loss strong{color:#a13f38}
#recipeForm .recipe-result-hint{grid-column:1/-1;font-size:13px;color:var(--muted);margin:0}
@media(max-width:600px){#recipeForm .recipe-results{grid-template-columns:1fr}#recipeForm .ingredient>summary{grid-template-columns:auto minmax(0,1fr) auto}#recipeForm .ingredient>summary>small{display:none}}