.table-form{grid-template-columns:repeat(6,minmax(0,1fr))}.table-form>label{grid-column:1/-1}.table-form>label:has([name="table_number"]){grid-column:span 2;order:10}.table-form>label:has([name="sale_total"]){grid-column:span 2;order:20}.table-form>label:has([name="served_at"]){grid-column:span 2;order:30}.table-form>label:has([name="cash_tip"]){grid-column:span 3;order:40}.table-form>label:has([name="card_tip"]){grid-column:span 3;order:50}.table-form>#preview{grid-column:1/-1;order:60}.table-form>button{grid-column:1/-1;order:70}@media(max-width:700px){.table-form{grid-template-columns:1fr}.table-form>label,.table-form>label:has([name]){grid-column:1}.table-form>#preview,.table-form>button{grid-column:1}}

/* Resumen centrado y semántico de propina, reparto y saldo libre. */
.table-form>#preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;text-align:center;align-items:stretch}
.preview-value{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px;border-radius:9px;font-weight:750}
.preview-value strong{display:block;font-size:17px}.preview-tip{background:color-mix(in srgb,#13a174 12%,var(--surface));color:#098364}.preview-distributed{background:color-mix(in srgb,#e18a18 14%,var(--surface));color:#c66f00}.preview-free.positive{background:color-mix(in srgb,#13a174 12%,var(--surface));color:#098364}.preview-free.negative{background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--danger)}
@media(max-width:600px){.table-form>#preview{grid-template-columns:1fr}}
.preview-percentage{background:color-mix(in srgb,#3478f6 12%,var(--surface));color:#2667d8}

/* Escala visual de Libre según cobertura y porcentaje de propina. */
.preview-free{transition:background .28s ease,color .28s ease,box-shadow .28s ease,transform .28s ease}.preview-free.negative{background:linear-gradient(135deg,#ffe4e6,#ef4444);color:#8f1420;box-shadow:inset 0 0 0 1px #dc2638}.preview-free.neutral{background:linear-gradient(135deg,#fff4a8,#f4cf18);color:#5f4b00;box-shadow:inset 0 0 0 1px #d6ae00}.preview-free.ten{background:linear-gradient(135deg,#ffd59a,#f28c18);color:#753900;box-shadow:inset 0 0 0 1px #dc7200}.preview-free.green-low{background:linear-gradient(135deg,#e0f8e9,#9cdeb5);color:#17683a;box-shadow:inset 0 0 0 1px #62bf85}.preview-free.green-medium{background:linear-gradient(135deg,#b9efcc,#39bd70);color:#075e2e;box-shadow:inset 0 0 0 1px #209d55}.preview-free.green-high{background:linear-gradient(135deg,#65df91,#078b45);color:#fff;box-shadow:inset 0 0 0 1px #047438,0 7px 20px #078b4540;transform:translateY(-1px)}
body.dark .preview-free.negative{background:linear-gradient(135deg,#56121a,#a91f2e);color:#ffd6da}body.dark .preview-free.neutral{background:linear-gradient(135deg,#665311,#9a7b06);color:#fff1a1}body.dark .preview-free.ten{background:linear-gradient(135deg,#66380d,#a8550a);color:#ffe1ba}body.dark .preview-free.green-low{background:linear-gradient(135deg,#173e29,#236b42);color:#c9f5da}body.dark .preview-free.green-medium{background:linear-gradient(135deg,#0d4d2b,#128449);color:#dcffe9}body.dark .preview-free.green-high{background:linear-gradient(135deg,#086336,#06a653);color:#fff}
/* Campo de fecha bloqueado y claramente identificado. */
.table-form input[name="served_at"][readonly]{cursor:not-allowed;background:color-mix(in srgb,var(--muted) 10%,var(--surface));border-style:dashed;color:var(--muted);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--muted) 12%,transparent)}
/* Libre usa un color sólido que evoluciona suavemente con el porcentaje. */
.preview-free{background-image:none!important;transition:background-color .7s ease-in-out,color .4s ease,box-shadow .4s ease,transform .4s ease}.preview-free.negative{background-color:#ef4444}.preview-free.neutral{background-color:#f4cf18}.preview-free.ten{background-color:#f28c18}.preview-free.green-low{background-color:#9cdeb5}.preview-free.green-medium{background-color:#39bd70}.preview-free.green-high{background-color:#047438}
body.dark .preview-free{background-image:none!important}
/* Contraste legible del texto sobre cada nivel sólido de Libre. */
.preview-free,.preview-free strong{color:inherit}.preview-free.negative{color:#fff}.preview-free.neutral,.preview-free.ten,.preview-free.green-low{color:#172033}.preview-free.green-medium,.preview-free.green-high{color:#fff}
body.dark .preview-free.negative{color:#fff}body.dark .preview-free.neutral,body.dark .preview-free.ten,body.dark .preview-free.green-low{color:#172033}body.dark .preview-free.green-medium,body.dark .preview-free.green-high{color:#fff}