:root{
  --turquoise:var(--raspberry); --muted:var(--cacao-soft);
  /* Tokens base consolidados con la identidad visual P6 */
  --cream:#FBF5EC; --cream-2:#F3E7D5; --cacao:#3B2314; --cacao-soft:#765A48;
  --raspberry:#37A7A7; --raspberry-deep:#278C8C; --caramel:#A65A1E; --line:#E5CFB4; --white:#FFFDF9;
  --header-bg:#FBF5EC; --header-fg:#3B2314; --header-fg-2:#765A48;
  font-size:16px;
}
html[data-theme="dark"]{
  --cream:#1A0F0A; --cream-2:#2A170F; --cacao:#F8EAD7; --cacao-soft:#D6B894;
  --raspberry:#43B3B3; --raspberry-deep:#57C5C5; --caramel:#D17B35; --line:#5B3C2B; --white:#26150E;
  --header-bg:#1A0F0A; --header-fg:#F8EAD7; --header-fg-2:#D6B894;
}
*{box-sizing:border-box;}
html{ transition:background-color .2s; }
body{ margin:0; background:var(--cream); color:var(--cacao); font-family:'Poppins',sans-serif; line-height:1.5; padding-bottom:80px; transition:background-color .2s, color .2s; }
h1,h2,h3{ font-family:'Playfair Display',serif; font-weight:600; margin:0; }
.mono{ font-family:'Space Mono',monospace; }

header.hero{ background:radial-gradient(circle at 15% 20%, rgba(21,155,149,.24) 0, transparent 40%), radial-gradient(circle at 85% 0%, rgba(255,255,255,.16) 0, transparent 45%), var(--header-bg); color:var(--header-fg); padding:44px 24px 34px; position:relative; overflow:hidden; }
header.hero .sprinkles{ position:absolute; inset:0; opacity:.5; pointer-events:none; background-image: radial-gradient(circle, rgba(251,244,233,.35) 1.5px, transparent 1.6px); background-size: 22px 22px; }
.hero-inner{ max-width:1080px; margin:0 auto; position:relative; }
.eyebrow{ font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#FFFFFF; margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.eyebrow .brand-name{ color:#1AA6C9; background:#FFFFFF; padding:3px 10px; border-radius:99px; font-weight:700; }
.eyebrow::before{ content:''; width:22px; height:1px; background:#1AA6C9; display:inline-block; }
header.hero h1{ font-size:clamp(1.7rem,4vw,2.5rem); letter-spacing:-.01em; }
header.hero p{ color:var(--header-fg-2); max-width:600px; margin-top:10px; font-size:.95rem; }

nav.tabs{ max-width:1080px; margin:-22px auto 0; position:relative; z-index:5; display:flex; gap:2px; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:5px; box-shadow:0 8px 24px rgba(59,36,26,.08); flex-wrap:wrap; }
nav.tabs button{ flex:1; min-width:140px; border:none; background:transparent; color:var(--cacao-soft); font-family:'Poppins',sans-serif; font-weight:600; font-size:.82rem; padding:11px 10px; border-radius:10px; cursor:pointer; transition:.15s; }
nav.tabs button:hover{ background:var(--cream-2); }
nav.tabs button.active{ background:var(--cacao); color:var(--cream); }

main{ max-width:1080px; margin:0 auto; padding:28px 24px 0; }
.panel{ display:none; animation:fade .25s ease; }
.panel.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

/* ---- Sub-navegación "Crear" dentro de Proyecto ---- */
nav.subtabs{ display:flex; gap:2px; background:var(--cream-2); border:1px solid var(--line); border-radius:12px; padding:4px; box-shadow:none; flex-wrap:wrap; margin-bottom:20px; }
nav.subtabs button{ flex:1; min-width:120px; border:none; background:transparent; color:var(--cacao-soft); font-family:'Poppins',sans-serif; font-weight:600; font-size:.78rem; padding:9px 8px; border-radius:8px; cursor:pointer; transition:.15s; }
nav.subtabs button:hover{ background:var(--white); }
nav.subtabs button.active{ background:var(--raspberry); color:#fff; }
.subpanel{ display:none; animation:fade .2s ease; }
.subpanel.active{ display:block; }
.inv-subpanel{ display:none; animation:fade .2s ease; }
.inv-subpanel.active{ display:block; }


/* ---- Punto 4 · Jerarquía del resultado económico ---- */
.result-hero{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:12px;margin-bottom:14px;align-items:stretch;}
.result-hero-main{grid-row:span 2;border:2px solid var(--raspberry);border-radius:16px;padding:20px;background:linear-gradient(135deg,rgba(224,57,158,.10),rgba(21,155,149,.08));display:flex;flex-direction:column;justify-content:center;text-align:center;min-width:0;}
.result-hero-main .rh-kicker{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--raspberry-deep);}
.result-hero-main .rh-value{font-size:clamp(1.9rem,6vw,3rem);line-height:1.05;font-weight:900;color:var(--cacao);margin:7px 0;}
.result-hero-main .rh-note{font-size:.8rem;color:var(--cacao-soft);line-height:1.45;}
.result-metric{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--cream-2);min-width:0;}
.result-metric .rh-label{display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;color:var(--cacao-soft);margin-bottom:5px;}
.result-metric .rh-small-value{font-size:1.15rem;font-weight:850;color:var(--cacao);overflow-wrap:anywhere;}
.result-profit-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 14px;}
.result-profit-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--white);}
.result-profit-item span{display:block;font-size:.72rem;color:var(--cacao-soft);font-weight:650;}
.result-profit-item b{display:block;font-size:1.05rem;margin-top:4px;color:var(--cacao);}
.result-explain{margin:0 0 14px;}
.result-breakdown-toggle{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white);}
.result-breakdown-toggle>summary{padding:12px 14px;background:var(--cream-2);cursor:pointer;font-weight:750;color:var(--cacao);list-style:none;}
.result-breakdown-toggle>summary::-webkit-details-marker{display:none;}
.result-breakdown-body{padding:14px;}
@media(max-width:720px){.result-hero{grid-template-columns:1fr 1fr}.result-hero-main{grid-column:1/-1;grid-row:auto}.result-profit-row{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.result-hero{grid-template-columns:1fr}.result-profit-row{grid-template-columns:1fr}.result-metric{text-align:center}}
/* ---- Resultado plegable dentro de Costos y margen ---- */
.result-toggle{ border:2px solid var(--raspberry); border-radius:16px; overflow:hidden; margin-top:20px; margin-bottom:20px; background:var(--white); }
.result-toggle summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 22px; cursor:pointer; list-style:none; background:linear-gradient(135deg, rgba(224,57,158,.12), rgba(21,155,149,.10)); }
.result-toggle summary::-webkit-details-marker{ display:none; }
.result-toggle summary::marker{ content:''; }
.result-toggle summary h2{ margin:0; font-size:1.15rem; }
.result-toggle summary .chev{ font-size:1.1rem; color:var(--raspberry); transition:transform .15s; flex-shrink:0; }
.result-toggle[open] summary .chev{ transform:rotate(90deg); }
.result-toggle-body{ padding:22px; }

.card{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:24px 24px 22px; margin-bottom:20px; }
.card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px; flex-wrap:wrap;}
.card-head h2{ font-size:1.2rem; }
.card-sub{ color:var(--cacao-soft); font-size:.84rem; margin-bottom:16px; }
.num-badge{ font-family:'Space Mono',monospace; font-size:.72rem; background:var(--cream-2); color:var(--raspberry-deep); border-radius:99px; padding:3px 10px; white-space:nowrap; }

label{ font-size:.72rem; font-weight:600; color:var(--cacao-soft); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.02em;}
input[type=text], input[type=number], input[type=email], input[type=password], select{ width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:var(--cream); font-family:'Poppins',sans-serif; font-size:.87rem; color:var(--cacao); }
select optgroup{ color:var(--raspberry-deep); font-weight:800; font-style:normal; background:var(--cream-2); }
select option{ color:var(--cacao); font-weight:400; background:var(--white); }
.shape-picker-btn{ width:100%; text-align:left; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--cream); font-family:'Poppins',sans-serif; font-size:.87rem; color:var(--cacao); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.shape-picker-btn:active{ background:var(--cream-2); }
.shape-picker-group{ margin-bottom:16px; }
.shape-picker-group-title{ font-family:'Space Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--raspberry-deep); font-weight:800; padding:4px 4px 8px; border-bottom:2px solid var(--raspberry); margin-bottom:6px; }
.shape-picker-option{ display:block; width:100%; text-align:left; padding:11px 12px; border:none; background:none; border-radius:8px; font-size:.88rem; color:var(--cacao); cursor:pointer; font-family:'Poppins',sans-serif; }
.shape-picker-option:active{ background:var(--cream-2); }
.shape-picker-option.active{ background:var(--raspberry); color:#fff; font-weight:700; }
input:focus, select:focus{ outline:2px solid var(--raspberry); outline-offset:1px; background:var(--white); }
select optgroup{ color:var(--raspberry-deep); font-weight:700; font-style:normal; }
select optgroup option{ color:var(--cacao); font-weight:400; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media(max-width:640px){ .grid2,.grid3{ grid-template-columns:1fr; } }

.field{ margin-bottom:12px; }
.unit-pair{ display:grid; grid-template-columns:1fr .8fr; gap:6px; }

.pill-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
.pill{ background:var(--cream-2); border-radius:10px; padding:10px 14px; font-size:.8rem; flex:1; min-width:150px;}
.pill b{ display:block; font-family:'Space Mono',monospace; font-size:1rem; color:var(--raspberry-deep); margin-top:2px;}

.btn{ border:none; cursor:pointer; font-family:'Poppins',sans-serif; font-weight:600; font-size:.85rem; padding:10px 16px; border-radius:10px; transition:.15s; }
.btn-primary{ background:var(--raspberry); color:var(--white); }
.btn-primary:hover{ background:var(--raspberry-deep); }
.btn-ghost{ background:var(--cream); color:var(--cacao); border:1px solid var(--line); }
.btn-ghost:hover{ background:var(--cream-2); }
.btn-add{ background:none; border:1.5px dashed var(--line); color:var(--cacao-soft); width:100%; padding:9px; border-radius:9px; margin-top:6px; font-size:.82rem; font-weight:600;}
.btn-add:hover{ border-color:var(--raspberry); color:var(--raspberry-deep); }
.btn-del{ background:none; border:none; color:var(--cacao-soft); cursor:pointer; font-size:1rem; padding:5px 9px; border-radius:6px;}
.btn-del:hover{ background:#F6E1E1; color:var(--raspberry-deep); }

/* ---- ingredient card ---- */
.ing-card{ border:1px solid var(--line); border-radius:12px; padding:14px 14px 12px; margin-bottom:12px; background:var(--cream); }
.unit-mismatch-warning{ background:#fdecea; border:1px solid #e8a5a0; color:#8a2c22; border-radius:10px; padding:10px 12px; margin:10px 0; font-size:.82rem; line-height:1.4; font-weight:600; }
.price-age-warning{ background:#fff6e0; border:1px solid #f0d68a; color:#7a5c00; border-radius:10px; padding:10px 12px; margin:10px 0; font-size:.8rem; line-height:1.4; font-weight:600; }
.ing-top{ display:flex; gap:10px; align-items:flex-end; margin-bottom:10px; }
.ing-top .field{ flex:1; margin-bottom:0; }
.ing-grid{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; align-items:end; }
@media(max-width:800px){ .ing-grid{ grid-template-columns:1fr 1fr; } }
.ing-block{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:9px 10px; }
.ing-block.readonly{ background:linear-gradient(135deg, rgba(224,57,158,.07), rgba(21,155,149,.07)); }
.ing-block .lab{ font-family:'Space Mono',monospace; font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; color:var(--cacao-soft); margin-bottom:5px; }
.ing-block .val{ font-family:'Space Mono',monospace; font-size:1rem; color:var(--raspberry-deep); font-weight:700; }
.ing-block .val small{ font-size:.65rem; color:var(--cacao-soft); font-weight:400; }
.arrow-sep{ text-align:center; color:var(--caramel); font-size:1.1rem; align-self:center; }

table.rows{ width:100%; border-collapse:collapse; margin-top:6px; }
table.rows th{ text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--cacao-soft); padding:6px 8px; border-bottom:1px solid var(--line); }
table.rows td{ padding:6px 8px; vertical-align:middle; }
table.rows tr+tr td{ border-top:1px solid var(--cream-2); }
.row-total{ font-family:'Space Mono',monospace; font-size:.85rem; color:var(--raspberry-deep); white-space:nowrap; }
.cost-input{ max-width:150px; }

.summary{ background:#DCF1EE; color:#234B48; border-radius:16px; padding:26px; border:1px solid #C5E6E1; }
.summary h2{ color:#1B3B39; }
.sum-line{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(35,75,72,.12); font-size:.88rem;}
.sum-line span:first-child{ color:#4F726E; }
.sum-line span:last-child{ font-family:'Space Mono',monospace; color:#234B48; }
.sum-line.total{ border-bottom:none; padding-top:16px; font-size:1.1rem; font-weight:700; }
.sum-line.total span:last-child{ color:#E0399E; font-size:1.3rem; }
.sum-line.portion{ color:#B32E85; }

.formula-note{ font-size:.74rem; color:var(--cacao-soft); background:var(--cream-2); border-radius:9px; padding:9px 12px; margin-top:6px; }

.shape-btns{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.shape-btns button{ border:1px solid var(--line); background:var(--cream); border-radius:9px; padding:8px 14px; font-size:.8rem; font-weight:600; color:var(--cacao-soft); cursor:pointer; }
.shape-btns button.active{ background:var(--raspberry); border-color:var(--raspberry); color:#fff; }
.vol-result{ background:var(--cream-2); border-radius:12px; padding:14px 16px; margin-top:10px; font-size:.88rem; }
.vol-result b{ font-family:'Space Mono',monospace; color:var(--raspberry-deep); }
.scale-box{ background:linear-gradient(135deg, rgba(224,57,158,.09), rgba(21,155,149,.09)); border:1px solid var(--line); border-radius:14px; padding:18px; margin-top:18px; }

/* ---- Recetas guardadas ---- */
.recipe-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:var(--cream); flex-wrap:wrap; }
.recipe-name{ font-weight:700; font-size:.88rem; }
.recipe-date{ font-size:.72rem; color:var(--cacao-soft); margin-top:2px; }
.recipe-actions{ display:flex; gap:6px; align-items:center; flex-shrink:0; flex-wrap:wrap; }
.recipe-cat-select{ font-size:.76rem; padding:6px 8px; max-width:170px; }
.recipe-actions .btn{ padding:7px 12px; font-size:.78rem; }
.recipe-empty{ color:var(--cacao-soft); font-size:.84rem; }

/* ---- Catálogo ---- */
.inv-category-title{ font-family:'Space Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--raspberry-deep); margin:16px 0 8px; }

/* ---- Grupos plegables de catálogo (por categoría) ---- */
.inv-cat-group{ border:1px solid var(--line); border-radius:12px; margin-bottom:10px; overflow:hidden; background:var(--white); }
.inv-cat-group + .inv-cat-group{ margin-top:0; }
.step-accordion{ border:2px solid var(--raspberry); border-radius:14px; margin-bottom:16px; overflow:hidden; background:var(--white); }
.step-accordion-summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; cursor:pointer; list-style:none; background:var(--cream-2); }
.step-accordion-summary::-webkit-details-marker{ display:none; }
.step-accordion-title{ font-weight:800; font-size:1rem; color:var(--raspberry-deep); }
.step-accordion-status{ font-size:.74rem; font-weight:700; color:var(--cacao-soft); background:var(--white); padding:4px 10px; border-radius:99px; white-space:nowrap; }
.step-accordion-status.done{ color:#2e7d32; background:#e8f5e9; }
.step-accordion-body{ padding:14px; }
.advanced-analysis-toggle{ margin-bottom:16px; }
.advanced-analysis-toggle > summary{ cursor:pointer; font-weight:700; font-size:.85rem; color:var(--raspberry-deep); padding:8px 4px; list-style:none; }
.advanced-analysis-toggle > summary::-webkit-details-marker{ display:none; }
.auditor-collapse{ margin-top:20px; }
.auditor-collapse-summary{ cursor:pointer; list-style:none; padding:12px 16px; border-radius:12px; background:var(--raspberry); color:var(--white); font-weight:700; text-align:center; }
.auditor-collapse-summary::-webkit-details-marker{ display:none; }
.auditor-collapse[open] .auditor-collapse-summary{ background:var(--cream-2); color:var(--raspberry-deep); border-radius:12px 12px 0 0; }
#costingViewModeToggle .theme-opt{ line-height:1.3; padding:12px 10px; }
.project-step-accordion{ border:2px solid var(--raspberry); border-radius:14px; margin-bottom:16px; overflow:hidden; background:var(--white); }
.project-step-accordion-summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; cursor:pointer; list-style:none; background:var(--cream-2); }
.project-step-accordion-summary::-webkit-details-marker{ display:none; }
.project-step-accordion-title{ font-weight:800; font-size:1rem; color:var(--raspberry-deep); }
.project-step-accordion-status{ font-size:.74rem; font-weight:700; color:var(--cacao-soft); background:var(--white); padding:4px 10px; border-radius:99px; white-space:nowrap; }
.project-step-accordion-status.done{ color:#2e7d32; background:#e8f5e9; }
.project-step-accordion-body{ padding:14px; }
.inv-cat-summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; cursor:pointer; list-style:none; background:var(--cream-2); user-select:none; }
.inv-cat-summary::-webkit-details-marker{ display:none; }
.inv-cat-summary::marker{ content:''; }
.mold-mode-toggle{ border:2px solid var(--line); border-radius:14px; margin-bottom:14px; overflow:hidden; background:var(--white); }
.mold-mode-toggle summary{ cursor:pointer; padding:16px 18px; background:var(--cream-2); font-weight:700; font-size:1.02rem; color:var(--raspberry-deep); list-style:none; user-select:none; }
.mold-mode-toggle summary::-webkit-details-marker{ display:none; }
.mold-mode-toggle summary::marker{ content:''; }
.mold-mode-toggle summary::before{ content:'▸ '; }
.mold-mode-toggle[open] summary::before{ content:'▾ '; }
.mold-mode-toggle[open] summary{ border-bottom:1px solid var(--line); }
.mold-mode-toggle .mold-mode-body{ padding:16px; }
.mold-mode-toggle .mold-mode-body .card{ margin-bottom:16px; }
.mold-mode-toggle .mold-mode-body .card:last-child, .mold-mode-toggle .mold-mode-body .scale-box:last-child{ margin-bottom:0; }
.inv-cat-left{ font-family:'Space Mono',monospace; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--raspberry-deep); font-weight:700; display:flex; align-items:center; }
.inv-cat-chevron{ display:inline-block; margin-right:9px; font-size:.7rem; transition:transform .15s; color:var(--raspberry); }
.inv-cat-group[open] .inv-cat-chevron{ transform:rotate(90deg); }
.inv-cat-count{ background:var(--white); color:var(--cacao-soft); border-radius:99px; padding:3px 10px; font-size:.68rem; font-weight:600; white-space:nowrap; }
.inv-cat-body{ padding:12px 14px 14px; }
.inv-cat-body .inv-row:last-child{ margin-bottom:0; }

/* ---- Divisores de sección ---- */
.divider{ display:flex; align-items:center; gap:10px; margin:26px 0 18px; }
.divider .dots{ display:flex; gap:5px; }
.divider .dots span{ width:5px; height:5px; border-radius:50%; background:#1AA6C9; display:block; }
.divider hr{ flex:1; border:none; border-top:1px solid var(--line); }
.divider small{ font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#1AA6C9; font-weight:700; white-space:nowrap; }
.inv-category-title:first-child{ margin-top:0; }
.inv-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:var(--cream); flex-wrap:wrap; }
.inv-row .inv-info{ flex:1; min-width:120px; }
.inv-row .inv-name{ font-weight:700; font-size:.88rem; }
.inv-row .inv-meta{ font-size:.72rem; color:var(--cacao-soft); margin-top:2px; }
.inv-row .inv-price-field{ display:flex; align-items:center; gap:6px; }
.inv-row .inv-edit-field{ display:flex; flex-direction:column; gap:3px; }
.inv-row .inv-edit-field .lab{ font-size:.66rem; color:var(--cacao-soft); text-transform:uppercase; letter-spacing:.03em; }
.inv-row .inv-edit-field input{ width:80px; }
.inv-row .inv-edit-field select{ width:80px; }
.inv-row .inv-price-field input{ width:110px; }
.inv-pick-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:var(--cream-2); flex-wrap:wrap; }
.inv-pick-row .inv-name{ font-weight:700; font-size:.85rem; }
.inv-pick-row .inv-meta{ font-size:.72rem; color:var(--cacao-soft); }
.inv-pick-row-compact{ padding:7px 10px; margin-bottom:6px; }
.inv-pick-row-info{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0; }
.inv-pick-row-info .inv-name{ font-size:.82rem; }
.inv-pick-row-info .inv-meta{ font-size:.72rem; }
.inv-pick-row-actions{ display:flex; gap:5px; flex-shrink:0; align-items:center; }
.inv-pick-row-actions .btn-del{ padding:4px 7px; font-size:.85rem; }
.inv-pick-row-actions .btn-ghost{ padding:5px 10px; font-size:.76rem; }

footer.note{ max-width:1080px; margin:10px auto 0; padding:0 24px; color:var(--cacao-soft); font-size:.76rem; }

/* ---- Chip de plan (a pedido y confirmado por el usuario, 2026-09-16):
   indicador del plan actual, siempre visible (position:fixed, igual
   criterio que los .settings-fab de abajo, en la esquina opuesta libre)
   -- no vive dentro de .hero porque .hero scrollea con el contenido y el
   pedido es que quede visible SIEMPRE, no solo al tope de la página. ---- */
.plan-badge{
  position:fixed; top:16px; left:16px; z-index:60;
  display:inline-flex; align-items:center; gap:6px;
  background:#FFFFFF; color:var(--raspberry-deep); border:1px solid var(--line);
  border-radius:999px; padding:8px 14px; font-size:.85rem; font-weight:700;
  text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.15); cursor:pointer;
  transition:transform .15s;
}
.plan-badge:hover{ transform:scale(1.04); }

/* ---- Settings FAB + modal ---- */
.settings-fab{
  position:fixed; top:16px; right:16px; z-index:60; width:44px; height:44px; border-radius:50%;
  background:#1AA6C9; color:#FFFFFF; border:none; font-size:1.15rem; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25); transition:transform .15s, top .15s;
  /* A pedido y confirmado por el usuario (2026-09-17): flex para centrar
     bien el SVG del ícono de #settingsFab -- sin esto quedaba ~2px
     desviado verticalmente por el vertical-align:baseline por defecto de
     un <svg> inline. No afecta a los demás FAB (emoji/texto), que ya
     quedaban centrados igual con flex. */
  display:flex; align-items:center; justify-content:center;
}
.settings-fab:hover{ transform:scale(1.06); }
.timers-fab{ top:70px; background:#FFFFFF; color:var(--raspberry); border:1px solid var(--line); font-size:1.5rem; font-weight:900; text-shadow:0 0 1px currentColor, 0 0 1px currentColor, 0 0 1px currentColor; }
/* A pedido y confirmado por el usuario (2026-09-17): se eliminaron los
   botones de "Volver"/"Avanzar" del flujo guiado (.back-fab/.forward-fab,
   ver app.html) -- help-fab y save-recipe-fab suben 2 posiciones (108px,
   2×54px) para no dejar un hueco vacío en la pila. */
.help-fab{ top:124px; background:#F2A900; color:#3A2A00; border:none; font-size:1.25rem; font-weight:900; }
.save-recipe-fab{ top:178px; background:#0F6B4A; color:#FFFFFF; border:none; font-size:1.15rem; }
.help-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; min-width:20px; border-radius:50%;
  background:#F2A900; color:#3A2A00; border:none; cursor:pointer;
  font-size:.72rem; font-weight:900; line-height:1; margin-left:5px; vertical-align:middle;
  padding:0;
}
.help-icon:hover{ background:#D89600; }
.help-modal-box{ max-width:480px; width:100%; max-height:82vh; display:flex; flex-direction:column; }
.help-body{ overflow-y:auto; flex:1; padding-right:2px; }
.help-search-input{ width:100%; margin-bottom:12px; }
.help-list-item{
  display:block; width:100%; text-align:left; background:var(--cream); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; margin-bottom:8px; cursor:pointer; font-size:.85rem; font-weight:600; color:var(--cacao);
}
.help-list-item:hover{ background:var(--cream-2); border-color:var(--raspberry); }
.help-list-section{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--cacao-soft); font-weight:700; margin:14px 0 8px; }
.help-list-section:first-child{ margin-top:0; }
.help-detail-title{ font-size:1.05rem; font-weight:800; color:var(--raspberry-deep); margin-bottom:10px; }
.help-detail-block{ margin-bottom:12px; }
.help-detail-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--cacao-soft); font-weight:700; margin-bottom:3px; }
.help-detail-text{ font-size:.88rem; color:var(--cacao); line-height:1.5; }
.help-detail-warning{ background:#FFF6E0; border:1px solid #F0D68A; border-radius:10px; padding:10px 12px; font-size:.85rem; color:#7A5C00; line-height:1.45; }
.help-back-btn{ margin-bottom:12px; }
#globalToast{
  position:fixed; left:16px; right:16px; bottom:22px; z-index:200;
  display:none; background:var(--raspberry-deep); color:#fff; padding:14px 18px;
  border-radius:12px; font-size:.88rem; font-weight:600; text-align:center;
  box-shadow:0 8px 24px rgba(20,12,8,.35); line-height:1.4;
}
.modal-overlay{ position:fixed; inset:0; background:rgba(20,12,8,.5); z-index:70; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.hidden{ display:none; }
.modal-box{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px; max-width:360px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.modal-box-wide{ max-width:480px; max-height:88vh; overflow-y:auto; }
.timer-choice-panel.hidden{ display:none; }
#timersMenu{ flex-direction:column; }
#timersMenu .btn{ padding:16px; font-size:.95rem; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.theme-toggle{ display:flex; gap:8px; }
.theme-toggle button{ flex:1; border:1px solid var(--line); background:var(--cream); color:var(--cacao-soft); border-radius:9px; padding:9px; font-weight:600; font-size:.85rem; cursor:pointer; }
.theme-toggle button.active{ background:var(--raspberry); border-color:var(--raspberry); color:#fff; }

/* ---- Timers ---- */
.timer-display{ font-family:'Space Mono',monospace; font-size:2.3rem; text-align:center; background:var(--cream-2); border-radius:12px; padding:18px 10px; margin:14px 0; color:var(--raspberry-deep); letter-spacing:.03em; }
.timer-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.timer-btns .btn{ flex:1; min-width:110px; }
.timer-alert{ margin-top:14px; background:#F6E1E1; color:var(--raspberry-deep); border-radius:10px; padding:16px; text-align:center; font-weight:700; display:flex; flex-direction:column; gap:10px; align-items:center; }
.timer-alert.hidden{ display:none; }
.hidden{ display:none !important; }
.reveal-animated{ max-height:0; opacity:0; overflow:hidden; transition:max-height .5s ease, opacity .4s ease; }
.reveal-animated.revealed{ max-height:4000px; opacity:1; }
.dimmed{ opacity:.55; transition:opacity .3s ease; }
html[data-theme="dark"] .timer-alert{ background:#3A1E24; color:#F1AFC0; }

#printArea, #printAreaClient, #printAreaEvent, #printAreaEventClient, #printAreaCombo, #printAreaComboClient, #printAreaShoppingList{ display:none; }
@media print{
  body *{ visibility:hidden; }
  #printArea.active-print, #printArea.active-print *,
  #printAreaClient.active-print, #printAreaClient.active-print *,
  #printAreaEvent.active-print, #printAreaEvent.active-print *,
  #printAreaEventClient.active-print, #printAreaEventClient.active-print *,
  #printAreaCombo.active-print, #printAreaCombo.active-print *,
  #printAreaComboClient.active-print, #printAreaComboClient.active-print *,
  #printAreaShoppingList.active-print, #printAreaShoppingList.active-print *{ visibility:visible; }
  #printArea.active-print, #printAreaClient.active-print, #printAreaEvent.active-print, #printAreaEventClient.active-print, #printAreaCombo.active-print, #printAreaComboClient.active-print, #printAreaShoppingList.active-print{ display:block; position:absolute; top:0; left:0; width:100%; padding:20px; background:#fff; color:#1a1a1a; }
  .p-head{ display:flex; justify-content:space-between; border-bottom:2px solid #1a1a1a; padding-bottom:10px; margin-bottom:16px;}
  .p-head h1{ font-family:Georgia, serif; font-size:1.5rem; margin:0;}
  .p-head p{ margin:2px 0 0; font-size:.8rem; }
  #printArea table, #printAreaEvent table, #printAreaCombo table, #printAreaShoppingList table{ width:100%; border-collapse:collapse; margin-bottom:14px; font-size:.82rem;}
  #printArea th, #printAreaEvent th, #printAreaCombo th, #printAreaShoppingList th{ text-align:left; border-bottom:1px solid #999; padding:5px 4px; font-size:.72rem; text-transform:uppercase;}
  #printArea td, #printAreaEvent td, #printAreaCombo td, #printAreaShoppingList td{ padding:5px 4px; border-bottom:1px solid #eee;}
  #printArea h3, #printAreaEvent h3, #printAreaCombo h3, #printAreaShoppingList h3{ font-family:Georgia,serif; margin:18px 0 6px; font-size:1rem; border-left:3px solid #E0399E; padding-left:8px;}
  .p-total{ display:flex; justify-content:space-between; padding:8px 0; font-size:.85rem;}
  .p-total.final{ font-size:1.2rem; font-weight:bold; border-top:2px solid #1a1a1a; margin-top:6px; padding-top:10px;}
  .p-foot{ margin-top:24px; font-size:.7rem; color:#666; }
  .pc-badge{ font-family:'Space Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#B4308E; margin-bottom:4px; }
  .pc-summary{ background:#FBEFF8; border:2px solid #E0399E; border-radius:14px; padding:22px; margin:26px 0; }
  .pc-line{ display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px solid #EAD3E6; font-size:1rem; }
  .pc-line:last-child{ border-bottom:none; }
  .pc-line.pc-main{ font-size:1.5rem; font-weight:bold; color:#B4308E; padding-bottom:14px; margin-bottom:6px; border-bottom:2px solid #E0399E; }
  .pc-note{ font-size:.8rem; color:#555; margin-top:18px; line-height:1.5; }
  .pc-includes{ margin-top:20px; border:1px solid #EAD3E6; border-radius:12px; padding:16px 18px; }
  .pc-includes-title{ font-family:Georgia,serif; font-size:1rem; font-weight:bold; color:#B4308E; margin-bottom:8px; }
  .pc-includes ul{ margin:0; padding-left:18px; }
  .pc-includes li{ font-size:.88rem; margin-bottom:5px; line-height:1.4; }
  .pc-includes li b{ color:#7E2B3D; }
}

/* ============================================================
   PÁGINAS DE AUTENTICACIÓN (Fase 1 — a pedido y confirmado por el
   usuario) — layout propio y liviano para signup/login/verify-email/
   reset-password/update-password. Reutiliza .card/.field/.btn/.btn-primary
   ya existentes para quedar visualmente consistente; NO reutiliza
   .brand-lockup/.brand-slogan de header.hero porque esas clases están
   pensadas para el fondo oscuro del hero (el texto queda casi invisible
   fuera de ese contexto) — acá van variantes propias con los mismos tokens.
   ============================================================ */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; box-sizing:border-box; }
.auth-card{ width:100%; max-width:400px; }
.auth-logo{ text-align:center; margin-bottom:22px; }
.auth-logo .auth-lockup{ font-family:'Playfair Display',Georgia,serif; font-weight:800; font-size:1.6rem; color:var(--cacao); }
.auth-logo .auth-lockup strong{ font-family:'Pacifico','Playfair Display',serif; font-weight:400; color:var(--caramel); }
.auth-logo .auth-slogan{ font-size:.65rem; letter-spacing:.2em; font-weight:800; color:var(--raspberry); margin-top:6px; }
.auth-links{ margin-top:16px; text-align:center; font-size:.82rem; color:var(--cacao-soft); }
.auth-links a{ color:var(--raspberry-deep); font-weight:600; text-decoration:none; }
.auth-links a:hover{ text-decoration:underline; }
.auth-message{ border-radius:9px; padding:10px 12px; font-size:.82rem; margin-bottom:12px; display:none; }
.auth-message.error{ background:#F6E1E1; color:#8a2c22; }
.auth-message.success{ background:#e8f5e9; color:#2e7d32; }