@font-face {
    font-family: Roboto;
    src: url("assets/Roboto.ttf") format("truetype");
    font-weight: 100 900;
    font-display: swap;
}
* { box-sizing: border-box; }
:root {
    color: #252932;
    background: #f2f4f7;
    font: 16px Roboto, Arial, sans-serif;
}
body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(ellipse at 7% 0%, #ffd4c6, transparent 52%),
        radial-gradient(ellipse at 100% 43%, #cee6ef, transparent 61%), #f2f4f7;
}
main {
    width: 100%;
    max-width: 788px;
    margin: auto;
    padding: max(1.5rem, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
        max(2.5rem, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
[hidden] { display: none !important; }
header { display: flex; align-items: center; gap: 14px; margin: .5rem 0 1rem; }
header img { width: 62px; height: 62px; object-fit: contain; }
.brand { margin: 0; font-size: clamp(23px, 5vw, 32px); font-weight: 700; line-height: 1.1; }
.eyebrow { margin: 0 0 4px; color: #4b5869; font-size: .82rem; }
main > section {
    padding: clamp(16px, 4vw, 30px);
    background: #ffffffc9;
    border: 1px solid white;
    border-radius: 22px;
}
h1 { margin: 0 0 .55rem; font-size: clamp(23px, 5vw, 32px); overflow-wrap: anywhere; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.intro, #count, .meta { color: #4b5869; line-height: 1.5; }
.intro { margin: 0 0 1.15rem; }
label { display: block; margin: 1.15rem 0 .4rem; font-weight: 600; }
input, textarea, button { font: inherit; border-radius: 12px; }
input, textarea {
    width: 100%;
    min-height: 44px;
    background: white;
    color: inherit;
    border: 1px solid #b9c0c8;
    padding: 11px;
}
textarea { resize: vertical; }
button { min-height: 44px; padding: 11px 16px; border: 0; cursor: pointer; font-weight: 700; }
.primary { background: #ff634c; color: #231c1b; }
.secondary, .danger { color: #723224; background: #ffe7e4; }
#add, form .primary { width: 100%; }
#editor h1 { margin-top: 1rem; }
form .primary, .actions { margin-top: 1.25rem; }
.actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.card, article section {
    width: 100%;
    text-align: left;
    padding: 1rem;
    margin: 0 0 .65rem;
    background: white;
    border: 1px solid #dfe5ea;
    border-radius: 14px;
    color: inherit;
    overflow-wrap: anywhere;
}
.card:last-child, article section:last-child { margin-bottom: 0; }
.card strong, .card span { display: block; }
.card span { margin-top: .25rem; font-size: .9rem; }
article { margin-top: 1.1rem; }
article section p { margin: 0; white-space: pre-wrap; line-height: 1.55; }
article ul { margin: 0; padding-left: 1.4rem; line-height: 1.55; }
#error { padding: .85rem; background: #ffe7e4; color: #723224; border-radius: 12px; }
:focus-visible { outline: 3px solid #316980; outline-offset: 2px; }


.sheet-overview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; }
.sheet-overview label:first-child { margin-top: 0; }
.photo-frame {
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f2f4f7;
    border: 1px solid #dfe5ea;
    border-radius: 14px;
    color: #4b5869;
    text-align: center;
}
.photo-frame span { padding: .75rem; }
.photo-frame img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }

#photo-status { margin: .4rem 0 0; color: #723224; }
#photo-status:empty { display: none; }
.measurement {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .5rem;
    border: 0;
    padding: 0;
    margin: 1.15rem 0 0;
}
.measurement legend { font-weight: 600; padding: 0 0 .4rem; }
.sheet-section { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid #dfe5ea; }
.sheet-section > label { margin-top: 0; }
.ingredient-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: .5rem;
    padding: .65rem;
    margin: 0 0 .6rem;
    border: 1px solid #dfe5ea;
    border-radius: 14px;
    background: white;
    min-width: 0;
}
.ingredient-row legend { font-weight: 700; }
.ingredient-row label { margin: 0; font-size: .85rem; }
.ingredient-row input { display: block; margin-top: .25rem; min-width: 0; font-size: 16px; }
.ingredient-row button { padding-inline: .75rem; }
.sheet-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: .8rem 1rem;
    background: #ffe7e4;
    border-radius: 12px;
    font-weight: 700;
}
.recipe-photo { display: block; width: min(100%, 20rem); max-height: 15rem; object-fit: contain; border-radius: 14px; margin: 0 0 1rem; background: white; }
@media (max-width: 600px) {
    .sheet-overview { grid-template-columns: minmax(0, 1fr); }
    .ingredient-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ingredient-row label:first-of-type { grid-column: 1 / -1; }
    .ingredient-row button { grid-column: 1 / -1; justify-self: end; }
}


/* Recipe entry */
.photo-frame { position: relative; }
.photo-picker {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    cursor: pointer;
}
.photo-picker span {
    border-radius: 999px;
    padding: .55rem .8rem;
    background: #ffffffdc;
    color: #4b5869;
    font-size: .85rem;
}
.photo-frame:has(img:not([hidden])) .photo-picker { align-items: end; padding: .55rem; }
.file-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.photo-frame:focus-within { outline: 3px solid #316980; outline-offset: 2px; }
select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    border: 1px solid #b9c0c8;
    border-radius: 12px;
    font: inherit;
    color: #252932;
    background: #f2f4f7;
}
.ingredient-entry { display: flex; align-items: end; gap: .5rem; margin-bottom: .85rem; }
.ingredient-entry label { flex: 1; margin: 0; min-width: 0; }
.ingredient-entry input { margin-top: .35rem; }
.ingredient-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, .8fr) minmax(0, .85fr) minmax(0, .9fr) auto;
    align-items: end;
    gap: .45rem;
    box-shadow: 0 2px 5px #2529320d;
}
.ingredient-row select { display: block; margin-top: .25rem; }
.row-actions { display: flex; gap: .2rem; }
.row-actions button {
    min-width: 44px;
    padding: .35rem;
    background: #f2f4f7;
    color: #252932;
}
.row-actions button:disabled { opacity: .35; cursor: default; }
.sheet-total { flex-wrap: wrap; }
.sheet-total > div { display: grid; gap: .2rem; }
.sheet-total small { color: #4b5869; font-weight: 500; }
.prep-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; margin-bottom: .65rem; align-items: start; }
.step-number { display: grid; place-items: center; border-radius: 50%; width: 1.8rem; height: 1.8rem; background: #f2f4f7; margin-top: .25rem; }
.prep-step textarea { min-height: 76px; }
#add-step { display: block; margin: .9rem auto 0; }
@media (max-width: 680px) {
    .ingredient-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ingredient-row .row-actions { grid-column: 1 / -1; justify-self: end; }
    .prep-step { grid-template-columns: auto minmax(0, 1fr); }
    .prep-step .row-actions { grid-column: 2; justify-self: end; }
}


.home-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: 1.15rem; }
.home-menu button { min-height: 64px; }
#catalog > h1, #library > h1 { margin-top: 1rem; }
#catalog-form { margin-top: 1rem; padding: 1rem; border: 1px solid #dfe5ea; background: white; border-radius: 14px; }
#catalog-form .primary { width: auto; margin: 0; }
.catalog-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.catalog-fields label { min-height: 2.35rem; align-content: end; }
@media (max-width: 540px) {
    .home-menu { grid-template-columns: 1fr; }
    .catalog-fields { grid-template-columns: 1fr 1fr; }
    .catalog-fields label { min-height: 0; }
    .catalog-fields > :first-child { grid-column: 1 / -1; }
}


.catalog-scroll { overflow: auto; border: 1px solid #dfe5ea; border-radius: 14px; background: white; }
.catalog-table { width: 100%; min-width: 400px; border-collapse: collapse; text-align: left; font-size: .9rem; }
.catalog-table th { background: #f2f4f7; }
.catalog-table th button { display: flex; align-items: center; justify-content: space-between; gap: .3rem; width: 100%; background: transparent; color: inherit; white-space: nowrap; }
.catalog-table th[aria-sort] button { background: #ffe7e4; color: #723224; }
.catalog-table td { padding: 8px 10px; border-top: 1px solid #e6e9ed; }
.catalog-table tbody tr:nth-child(even) { background: #fafbfc; }
.catalog-table .catalog-photo { width: 52px; padding: 6px; text-align: center; }
.catalog-photo img, .catalog-photo-placeholder { display: grid; place-items: center; width: 36px; height: 36px; margin: auto; border-radius: 9px; object-fit: contain; }
.catalog-photo-placeholder { background: #f2f4f7; color: #687584; font-size: 1rem; }
.catalog-name-button { padding: .35rem .2rem; background: transparent; color: #252932; text-align: left; text-decoration: underline; text-decoration-color: #b9c0c8; text-underline-offset: 3px; }
.catalog-table td:nth-child(4) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.catalog-table td:last-child { text-align: center; }
.catalog-photo-feedback { display: flex; align-items: center; gap: .65rem; margin: .5rem 0 0; }
.catalog-photo-feedback img { width: 44px; height: 44px; object-fit: contain; border-radius: 9px; border: 1px solid #dfe5ea; }
.catalog-photo-feedback p { margin: 0; }
@media (max-width: 540px) {
    .catalog-table th button, .catalog-table td { padding-inline: 6px; }
}


.ingredient-entry-field { position: relative; flex: 1; min-width: 0; }
.ingredient-options {
    position: absolute;
    z-index: 2;
    inset: calc(100% + 4px) 0 auto;
    max-height: 240px;
    overflow: auto;
    padding: 4px;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    background: white;
    box-shadow: 0 6px 16px #25293226;
}
.ingredient-options button {
    display: block;
    width: 100%;
    text-align: left;
    background: white;
    color: #252932;
    font-weight: 500;
}
.ingredient-options button:hover, .ingredient-options button:focus-visible { background: #ffe7e4; }


.ingredient-options button { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sub-recipe-badge { flex: 0 0 auto; font-size: .75rem; color: #24536a; background: #e1f1f8; border-radius: 999px; padding: .24rem .48rem; }
.ingredient-row .sub-recipe-badge { margin-inline-start: .4rem; }
.ingredient-row .sub-recipe-help { grid-column: 1 / -1; color: #4b5869; margin: 0; font-size: .83rem; }


/* Ficha gerencial */
#detail { padding: 0; border: 0; background: transparent; }
#detail > .actions { margin-bottom: 1rem; }
.a4-sheet {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 210mm;
    min-height: min(297mm, 133vw);
    margin: 1rem auto 0;
    padding: clamp(20px, 5vw, 48px);
    color: #202a39;
    background: white;
    border: 1px solid #e1e5eb;
    box-shadow: 0 10px 34px #202a3912;
    font-size: .9rem;
}
.a4-title { display: flex; align-items: flex-start; justify-content: space-between; gap: .65rem; margin-bottom: 1rem; }
.a4-title h1 { margin: 0; font-size: clamp(22px, 4vw, 31px); line-height: 1.12; text-transform: uppercase; }
.a4-category {
    max-width: 45%;
    padding: .35rem .7rem;
    border-radius: 5px;
    background: linear-gradient(110deg, #ff805e, #ff4e70);
    color: #231c1b;
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.a4-overview { display: grid; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.a4-overview-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.a4-photo { display: block; width: 100%; max-width: 360px; aspect-ratio: 16 / 9; object-fit: contain; object-position: center; background: white; border-radius: 8px; }
.a4-description h2 { margin: 0 0 .35rem; font-size: .9rem; }
.a4-description p { color: #4b5869; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; line-height: 1.55; }
.a4-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: .45rem; margin: 0 0 1rem; }
.a4-metrics div { padding: .55rem .65rem; border: 1px solid #dfe5ea; border-radius: 8px; background: #f6f7f9; overflow-wrap: anywhere; }
.a4-metrics dt, .a4-cost-card > span { color: #9b3544; font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.a4-metrics dd { margin: .25rem 0 0; font-size: 1.04rem; font-weight: 700; }
.a4-sheet .a4-section { border: 0; padding: 0; margin: 0 0 .95rem; background: none; }
.a4-section h2 { padding-bottom: .35rem; border-bottom: 2px solid #ff805e; margin: 0 0 .4rem; font-size: 1rem; }
.a4-ingredients { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; }
.a4-ingredients :is(th, td) { border-bottom: 1px solid #e8ebef; padding: .48rem .32rem; overflow-wrap: anywhere; }
.a4-ingredients th { color: #4b5869; font-size: .68rem; text-transform: uppercase; }
.a4-ingredients th:first-child { width: 46%; }
.a4-ingredients th:nth-child(2), .a4-ingredients th:nth-child(3) { width: 16%; }
.a4-ingredients tr:last-child td { border-bottom: 0; }
.a4-ingredients .sub-recipe-badge { display: inline-block; margin: .2rem 0 .1rem .3rem; }
.a4-share > div { display: flex; gap: .35rem; align-items: center; justify-content: space-between; font-size: .75rem; }
.a4-share > div > :last-child { flex: 0 0 auto; white-space: nowrap; }
.a4-share-track { display: block; width: 100%; min-width: 0; height: 5px; border-radius: 5px; background: #ffede9; overflow: hidden; }
.a4-share-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(110deg, #ff805e, #ff4e70); }
.a4-section ol { margin: .5rem 0 0; padding-left: 1.35rem; line-height: 1.5; }
.a4-section li { margin-bottom: .25rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.a4-cost-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: .75rem; margin-bottom: 1.2rem; }
.a4-cost-card { display: grid; text-align: center; gap: .35rem; padding: .75rem; border: 1px solid #dfe5ea; border-radius: 8px; }
.a4-cost-card strong { font-size: 1.35rem; }
.a4-cost-card small { color: #4b5869; }
.a4-cost-unit { border-color: #ff805e; background: #fff7f4; }
.a4-footer { margin-top: auto; border-top: 1px solid #dfe5ea; padding-top: .55rem; color: #4b5869; text-align: right; font-size: .7rem; }
@media (max-width: 540px) {
    .a4-sheet { min-height: 0; padding: 16px 12px; }
    .a4-overview-split { grid-template-columns: 1fr; }
    .a4-metrics { grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); }
    .a4-share-track { display: none; }
    .a4-title { flex-wrap: wrap; }
    .a4-category { max-width: 100%; }
    .a4-ingredients { font-size: .77rem; }
    .a4-ingredients th { font-size: .61rem; }
    .a4-ingredients th:first-child { width: 42%; }
    .a4-ingredients th:nth-child(2), .a4-ingredients th:nth-child(3) { width: 19%; }
}
@page { size: A4 portrait; margin: 13mm; }
@media print {
    :root, body { background: white; }
    body { min-height: 0; }
    main { width: auto; max-width: none; margin: 0; padding: 0; }
    main > :not(#detail), #detail > :not(.a4-sheet) { display: none !important; }
    .a4-sheet {
        display: block;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .a4-overview-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
    .a4-share-track { display: block; }
    .a4-overview, .a4-title, .a4-metrics, .a4-cost-summary, .a4-footer, .a4-ingredients tr, .a4-section li { break-inside: avoid; }
    .a4-section h2 { break-after: avoid; }
    .a4-footer { margin-top: 8mm; }
}


.ingredient-badge {
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 999px;
    padding: .24rem .48rem;
    background: #e5f4e9;
    color: #215438;
    font-size: .75rem;
    font-weight: 600;
}
.ingredient-identity { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.ingredient-identity-text { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .4rem; min-width: 0; }
.ingredient-thumb {
    display: block;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    background: #f2f4f7;
}
.ingredient-thumb-empty { display: grid; place-items: center; color: #687584; }
.ingredient-row legend .ingredient-thumb { width: 28px; height: 28px; flex-basis: 28px; }
.ingredient-row legend .ingredient-identity-text > span:first-child { white-space: nowrap; }
.ingredient-row legend .sub-recipe-badge, .a4-ingredients .sub-recipe-badge { margin: 0; }
.a4-ingredients .ingredient-badge, .a4-ingredients .sub-recipe-badge { font-size: .63rem; }
.a4-ingredients .ingredient-thumb { width: 32px; height: 32px; flex-basis: 32px; }
@media (max-width: 540px) {
    .a4-ingredients .ingredient-thumb { width: 25px; height: 25px; flex-basis: 25px; }
    .a4-ingredients .ingredient-identity { gap: .28rem; }
}




/* Lista compacta de itens da ficha */
.ingredient-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.compact-item-head, .ingredient-row.compact-ingredient-row {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(122px, .95fr) minmax(82px, .55fr) auto;
    gap: .5rem;
    align-items: center;
}
.compact-item-head { padding: 0 10px .4rem; color: #4b5869; font-size: .76rem; font-weight: 600; }
.compact-item-head > :nth-child(3) { text-align: right; }
.compact-item-head::after { content: ""; width: 76px; }
#ingredient-rows:empty { display: none; }
.compact-item-head:has(+ #ingredient-rows:empty) { display: none; }
.ingredient-row.compact-ingredient-row { position: relative; padding: .55rem .6rem; margin: 0 0 .5rem; min-height: 65px; }
.compact-item-identity { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.compact-item-identity .ingredient-thumb { border-radius: 50%; background: white; border: 1px solid #eceef1; box-shadow: 0 2px 4px #25293215; }
.compact-item-info { flex: 1; min-width: 0; }
.compact-item-name { display: flex; align-items: center; gap: .3rem; }
.compact-item-name input, .compact-item-cost input {
    min-height: 28px; margin: 0; padding: .15rem 0; border: 0; border-radius: 4px; background: transparent; font-weight: 700;
}
.compact-item-name input {
    width: min(100%, calc(var(--name-length, 12) * .56em));
    max-width: 100%; min-width: 0; flex: 0 1 auto; field-sizing: content;
}
.compact-item-name input[readonly] { cursor: default; }
.compact-item-name input:focus:not([readonly]) { background: #fff7f4; }
.compact-item-name :is(.ingredient-badge, .sub-recipe-badge) { font-size: .66rem; padding: .18rem .38rem; }
.ingredient-rate { display: block; color: #4b5869; font-size: .72rem; }
.ingredient-rate:empty { display: none; }
.compact-item-measure { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: .38rem; }
.compact-item-measure :is(input, select) { margin: 0; border-radius: 13px; font-weight: 700; }
.compact-item-measure input { padding-inline: .35rem; text-align: center; }
.compact-item-measure select { padding-inline: .35rem; background: #5c606e; color: white; border-color: #5c606e; }
.compact-item-cost { display: flex; align-items: center; justify-content: flex-end; gap: .22rem; font-weight: 700; white-space: nowrap; }
.compact-item-cost input { min-width: 0; width: 5.4ch; field-sizing: content; max-width: 100%; text-align: right; }
.compact-item-actions { display: flex; align-items: center; gap: 0; }
.compact-item-actions button { display: grid; place-items: center; min-width: 38px; min-height: 44px; padding: .35rem; color: #252932; background: transparent; }
.compact-item-actions svg { width: 18px; height: 18px; pointer-events: none; }
.compact-item-actions .item-grip { color: #5c606e; cursor: grab; touch-action: none; }
.item-dragging { outline: 2px solid #316980; }
.item-dragging .item-grip { cursor: grabbing; }
@media (max-width: 615px) {
    .compact-item-head { display: none; }
    .ingredient-row.compact-ingredient-row { grid-template-columns: minmax(0, 1fr) minmax(76px, auto) auto; }
    .compact-item-identity { grid-column: 1 / -1; }
    .compact-item-name input { min-height: 32px; }
    .compact-item-measure { grid-column: 1; }
    .compact-item-cost { grid-column: 2; }
    .compact-item-actions { grid-column: 3; }
    .compact-item-actions button { min-width: 32px; }
}


.photo-frame #clear-photo {
    position: absolute;
    z-index: 1;
    top: .45rem;
    right: .45rem;
    min-height: 40px;
    margin: 0;
    padding: .45rem .65rem;
    border-radius: 999px;
    background: #ffffffc9;
    color: #723224;
    font-size: .8rem;
}
.photo-frame #clear-photo:hover { background: #fff; }
.prep-step .compact-item-actions { align-self: start; }
.prep-step.item-dragging { border-radius: 10px; }
@media (max-width: 680px) {
    .prep-step { grid-template-columns: auto minmax(0, 1fr) auto; gap: .35rem; }
}

.catalog-photo-feedback { flex-wrap: wrap; }
.catalog-photo-feedback .catalog-upload-button {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    margin: 0; min-height: 44px; padding: .5rem .8rem; border-radius: 12px;
    background: #ffe7e4; color: #723224; cursor: pointer; font-size: .9rem;
}
.catalog-upload-button input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.catalog-upload-button:focus-within { outline: 3px solid #316980; outline-offset: 2px; }
.catalog-photo-feedback > p { flex-basis: 100%; }
button.catalog-photo-placeholder { padding: 0; min-height: 36px; font-size: 1.4rem; }
#catalog-delete-message { padding: .75rem 1rem; margin-top: .85rem; background: #fff2eb; border: 1px solid #e6c4b4; border-radius: 12px; color: #723224; }
#catalog-delete-message p { margin: 0; }
#catalog-delete-message ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.recipe-table td:last-child { text-align: right; }
.recipe-table td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.recipe-weight-note { color: #4b5869; font-size: .82rem; margin: .7rem 0 0; }
.recipe-table { min-width: 770px; }
.recipe-table .recipe-cost-cell { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }/* Menu inicial com os ícones STF. */
.brand { font-size: clamp(21px, 4vw, 29px); line-height: 1.18; }
.brand-company { display: block; font-size: .68em; font-weight: 500; margin-top: 5px; }
header .eyebrow { display: none; }
#home { padding: clamp(20px, 4vw, 32px); }
#home h1 { font-size: 25px; margin-bottom: 7px; }
.home-intro { margin: 0; color: #657180; font-size: 15px; line-height: 1.5; }
.home-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.home-menu .menu-icon { display: flex; flex-direction: column; align-items: center; gap: 16px; background: transparent; color: #252932; padding: 10px 0 8px; min-width: 0; font-size: 16px; font-weight: 600; }
.menu-icon img { display: block; width: min(100%, 154px); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 10px #25303918); transition: transform .18s ease; }
.menu-icon:hover img { transform: translateY(-4px); }
.menu-icon span { line-height: 1.3; }
@media (max-width: 540px) {
    .home-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
    .home-menu .menu-icon { font-size: 13px; gap: 12px; }
    header { gap: 11px; }
    header img { width: 52px; height: 52px; }
    .brand { font-size: 21px; }
    .home-intro { font-size: 14px; }
}
/* Acesso flutuante e escolha de impressão. */
main { padding-bottom: max(110px, env(safe-area-inset-bottom)); }
.home-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 500px; margin: 24px auto 0; }
.new-recipe-fab { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 8px; padding: 15px 22px; border-radius: 999px; color: white; background: #c35438; box-shadow: 0 6px 22px #77372535; }
.new-recipe-fab span { font-size: 25px; line-height: 1; }
.new-recipe-fab:hover { background: #ab422a; }
.print-choice { display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; }
.print-choice label { margin: 0; font-size: .88rem; }
.print-choice select { width: min(100%, 320px); background: white; }
.a4-sheet.operational .a4-ingredients th:nth-child(n+3),
.a4-sheet.operational .a4-ingredients td:nth-child(n+3),
.a4-sheet.operational .a4-cost-summary { display: none !important; }
.a4-sheet.operational .a4-ingredients th:first-child { width: 75%; }
.a4-sheet.operational .a4-ingredients th:nth-child(2) { width: 25%; }
@media (max-width: 540px) {
    .new-recipe-fab { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); padding: 13px 18px; font-size: 14px; }
    .home-menu .menu-icon { font-size: 15px; }
}
@media print { .new-recipe-fab { display: none !important; } }
.home-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
#print-dialog { width: min(420px, calc(100% - 32px)); padding: 26px; border: 1px solid #dfe5ea; border-radius: 20px; color: #252932; box-shadow: 0 18px 65px #25293230; }
#print-dialog::backdrop { background: #25293265; }
#print-dialog h2 { margin-bottom: 20px; }
#print-dialog .print-choice select { width: 100%; }
#print-dialog .actions { justify-content: flex-end; }
#print-dialog .primary { width: auto; margin: 0; }
@media (max-width: 540px) { .home-menu .menu-icon { font-size: 13px; } }
@media print { #print-dialog { display: none !important; } }
.recipe-category-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 28px; }
#recipe-categories h1 { margin-top: 20px; }
.recipe-category-menu .menu-icon { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0; min-width: 0; color: #252932; background: transparent; }
.recipe-category-menu .menu-icon img { width: min(100%, 150px); }
.recipe-category-menu .menu-icon span { font-size: 15px; }
.recipe-category-menu .menu-icon small { font-size: 13px; color: #657180; font-weight: 400; margin-top: -7px; }
@media (max-width: 600px) { .recipe-category-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; } }
.cloud-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; font-size:12px; color:#4b5869; }
.cloud-toolbar button { min-height:32px; padding:6px 10px; font-size:12px; background:#ffffffb0; color:inherit; }
.cloud-toolbar a { color:#723224; }
#cloud-status { margin-right:auto; }
#cloud-loading { max-width:600px; margin:15vh auto; padding:30px; background:white; border-radius:20px; }
#cloud-loading h1 { font-size:24px; }
@media print { .cloud-toolbar,#cloud-loading { display:none !important; } }
.home-menu { grid-template-columns:repeat(4,minmax(0,1fr)); }
#users h1 { margin-top:20px; }
#user-form { margin:20px 0;padding:20px;border:1px solid #dfe5ea;border-radius:16px;background:white; }
.user-active { display:flex;gap:10px;align-items:center; }
.user-active input { width:20px;min-height:20px; }
#user-form .actions .primary { width:auto; margin:0; }
@media(max-width:600px){.home-menu {grid-template-columns:repeat(2,minmax(0,1fr));}}
#auth-screen { width:calc(100% - 32px); max-width:430px; margin:7vh auto; padding:30px; border:1px solid white; border-radius:24px; background:#ffffffed; box-shadow:0 12px 45px #25293212; }
.auth-logo { width:75px; height:75px; object-fit:contain; margin-bottom:15px; }
#auth-screen h1 { font-size:26px; }
#auth-screen h2 { font-size:21px; margin-top:20px; }
#auth-screen form .primary { margin-top:22px; }
#auth-screen a { font-size:13px; color:#723224; }
#auth-message,#profile-message { line-height:1.5; color:#723224; }
#profile h1 { margin-top:20px; }
@media print { #auth-screen { display:none !important; } }
/* Taxas comerciais: somente produtos vendidos. */
.recipe-pricing-editor { scroll-margin-top:20px; }
.fee-help { font-size:12px; color:#657180; line-height:1.5; margin:8px 0 16px; }
.fee-quick-add { padding:14px; margin:16px 0; border:1px solid #e4e7ec; border-radius:18px; background:white; }
.fee-quick-add h3 { margin:0 0 12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#727681; }
.fee-quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.fee-quick-grid button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:76px; padding:12px 6px; border:1px solid #edf0f3; border-radius:15px; background:white; color:#252932; font-size:12px; font-weight:500; }
.fee-quick-grid button:hover { border-color:#dba08f; background:#fff8f5; }
.fee-icon { display:inline-flex; align-items:center; justify-content:center; }
.fee-row { display:grid; grid-template-columns:minmax(0,2fr) minmax(80px,1fr) 70px 100px 36px; gap:10px; align-items:end; padding:13px 0; border-bottom:1px solid #edf0f3; }
.fee-row label { min-width:0; margin:0; font-size:11px; color:#657180; }
.fee-row label span { display:block; margin-bottom:5px; }
.fee-row input { min-width:0; font-size:14px; }
.fee-row output { padding-bottom:13px; font-weight:600; font-size:14px; text-align:right; white-space:nowrap; }
.fee-delete { padding:8px; min-width:36px; min-height:44px; background:transparent; color:#657180; }
.fee-custom { margin:16px 0; font-size:13px; }
.fee-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:15px; margin:16px 0 10px; background:#f6f7f9; border-radius:15px; }
.fee-summary div { padding:6px; min-width:0; }
.fee-summary small { display:block; font-size:11px; color:#657180; margin-bottom:7px; }
.fee-summary strong { font-size:18px; font-variant-numeric:tabular-nums; }
.fee-summary .fee-profit { border-radius:10px; background:#e7f3ea; color:#21593c; }
.fee-summary .fee-loss { background:#ffe7e4; color:#9a3024; }
.fee-warning { grid-column:1/-1; font-size:12px; color:#9a3024; margin:7px 0 0; }
.a4-fees { width:100%; border-collapse:collapse; margin:12px 0; font-size:12px; }
.a4-fees th,.a4-fees td { padding:9px 5px; border-bottom:1px solid #e4e7ec; text-align:left; }
.a4-fees td:last-child,.a4-fees th:last-child { text-align:right; }
.a4-sheet.operational .recipe-sales { display:none !important; }
@media(max-width:600px) {
 .fee-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .fee-row { grid-template-columns:minmax(0,1fr) 70px 36px; gap:8px; }
 .fee-row label:first-child { grid-column:1/-1; }
 .fee-row output { grid-column:1/3; grid-row:3; padding:0; text-align:left; }
 .fee-row .fee-delete { grid-column:3; grid-row:2; }
 .fee-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .fee-summary strong { font-size:16px; }
}
@media print { .recipe-sales .no-print { display:none !important; } .recipe-sales .fee-summary { break-inside:avoid; } }

@media print { .recipe-sales.pricing-empty { display:none !important; } }
.expected-profit-editor{margin-top:24px;padding:20px;border:1px solid #d4e5da;border-radius:16px;background:#f5faf7}
.expected-profit-editor h3{margin:0 0 16px}.expected-profit-inputs{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:12px;max-width:420px}
.expected-profit-result{padding:16px 0;display:flex;flex-direction:column;gap:6px}.expected-profit-result small,.expected-profit-view small{color:#536775}.expected-profit-result strong{font-size:30px;color:#21593c}
.expected-profit-editor button:disabled{opacity:.5;cursor:default}.expected-profit-view{margin-top:16px;padding:14px;background:#f5faf7;border-radius:10px;display:grid;grid-template-columns:1fr auto;gap:10px}.expected-profit-view .fee-warning{grid-column:1/-1}