/* Base compartida; cada vista define sus regiones y densidad. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Syne:wght@700;800&display=swap');
html, body { margin:0; min-height:100dvh; }
body { font-family:var(--font-body,'Manrope',sans-serif); color:var(--text-primary); background:var(--surface-bg); font-size:.875rem; line-height:1.45; font-variant-numeric:tabular-nums; }
*, *::before, *::after { box-sizing:border-box; }
button, input, select, textarea { font:inherit; }
button { min-height:44px; min-width:44px; cursor:pointer; }
button:disabled { cursor:not-allowed; }
a { text-underline-offset:.2em; }
::selection { background:var(--color-volt); color:#0a0a0a; }
:where(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--text-primary); outline-offset:2px; box-shadow:0 0 0 2px var(--surface-bg); }
.k-button { min-height:44px; min-width:44px; }
.k-button--primary:focus-visible { outline-color:var(--text-primary); box-shadow:0 0 0 2px var(--surface-bg); }
/* Cocina se lee a distancia y con luz variable: anillo Volt con filete interior oscuro para que contraste sobre claro y oscuro. */
.cocina-shell :where(button,a,input,select,textarea,summary):focus-visible, .cocina-shell .k-button--primary:focus-visible { outline:3px solid var(--color-volt); outline-offset:2px; box-shadow:0 0 0 2px var(--text-primary); }
.serve-shell { display:flex; flex-direction:column; height:100dvh; min-height:0; min-width:0; gap:12px; padding:12px 20px; }
.serve-shell > * { min-width:0; }
/* Preserve readable labels while native disabled semantics prevent interaction. */
.serve-shell, .item-add-dialog, .salon-close-dialog, .serve-reconnect { --text-disabled:var(--text-secondary); }
:where(.serve-shell, .item-add-dialog, .salon-close-dialog, .serve-reconnect) :is(input,select,textarea):disabled { color:var(--text-secondary); opacity:1; -webkit-text-fill-color:var(--text-secondary); }
.work-header { display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; gap:16px; padding-bottom:8px; border-bottom:1px solid var(--surface-border); }
.work-header > div:first-child { display:flex; align-items:center; flex-wrap:wrap; min-width:0; gap:8px 16px; }
.brand { padding:0; border:0; background:transparent; color:var(--text-primary); font-family:var(--font-display,'Syne',sans-serif); font-size:1.2rem; font-weight:800; text-decoration:none; white-space:nowrap; }
.work-header h1 { margin:0; font-size:1.25rem; font-weight:700; }
.work-header p { margin:0; color:var(--text-secondary); overflow-wrap:anywhere; }
.header-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.header-actions form { margin:0; }
.work-header .brand { display:inline-flex; align-items:center; min-height:44px; line-height:1; }
.work-header :is(h1,p,.operator-name) { display:flex; align-items:center; min-height:44px; line-height:1.2; }
.work-header p { display:block; align-content:center; }
.work-header .header-actions { min-width:0; }
.work-header .header-actions form { display:flex; align-items:center; }
.work-header .header-actions .k-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding-block:10px; line-height:1.2; }
.access-header .access-brand { display:inline-flex; align-items:center; flex-wrap:wrap; min-height:44px; gap:8px 16px; line-height:1; }
.access-header .access-brand > span { margin-left:0; line-height:1.2; }
:is(.work-header,.access-header) .theme-selector { align-items:center; align-self:center; padding:0; border:0; min-height:44px; }
.operator-name { font-weight:700; overflow-wrap:anywhere; }
h1, h2, h3 { font-family:var(--font-body,'Manrope',sans-serif); line-height:1.25; }
h2 { margin:0 0 8px; font-size:1.125rem; font-weight:700; }
h3 { margin:12px 0 8px; font-size:1rem; font-weight:600; }
p { margin:8px 0; }
.muted { color:var(--text-secondary); line-height:1.5; }
.status-label { color:var(--text-secondary); font-weight:700; }
label { display:block; margin:4px 0; font-size:.8125rem; font-weight:600; }
input, select, textarea { width:100%; min-width:0; min-height:44px; padding:8px 10px; border:1px solid var(--text-secondary); border-radius:var(--radius-sm,4px); color:var(--text-primary); background:var(--surface-card); caret-color:var(--text-primary); }
input::placeholder, textarea::placeholder { color:var(--text-secondary); opacity:1; }
input:disabled, select:disabled, textarea:disabled { cursor:not-allowed; background:var(--surface-raised); }
textarea { min-height:80px; resize:vertical; }
input[type=checkbox], input[type=radio] { width:20px; height:20px; min-height:20px; accent-color:var(--color-volt); }
fieldset { min-width:0; margin:0; padding:0; border:0; }
legend { font-weight:700; }
.validation-summary-errors, .validation-message { color:var(--text-primary); }
.validation-summary-errors { padding:8px 12px; border:1px solid var(--color-error); border-radius:var(--radius-sm,4px); }
.validation-summary-errors ul { margin:0; padding-left:20px; }
input.invalid, select.invalid, textarea.invalid, [aria-invalid=true] { border-color:var(--color-error); }
.section-heading, .pedido-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; min-width:0; gap:8px 16px; }
.section-heading h2, .pedido-heading h2 { margin:0; }
.editor-navigation, .item-types { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
.form-grid > * { min-width:0; }
.pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin:8px 0; }
.pagination span { font-size:.8125rem; font-variant-numeric:tabular-nums; }
.dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:16px; }
.feedback { flex:0 0 auto; max-height:min(24dvh,9rem); overflow:auto; overflow-wrap:anywhere; margin:0; padding:8px 12px; border:1px solid var(--color-success); border-radius:var(--radius-sm,4px); color:var(--text-primary); background:var(--surface-card); line-height:1.5; }
.feedback-error { border-color:var(--color-error); }
.empty-state { padding:24px 16px; color:var(--text-secondary); line-height:1.5; overflow-wrap:anywhere; }
.empty-state h2, .empty-state h3 { color:var(--text-primary); }
.empty-state p { max-width:65ch; }
@media (min-width:1200px) and (min-height:850px) { .serve-shell { gap:16px; padding:20px 28px; } }
@media (max-width:800px) { .serve-shell { height:auto; min-height:100dvh; padding:12px; } .work-header { flex-direction:column; align-items:stretch; gap:8px; } }
@media (max-width:600px) { .form-grid { grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:0s !important; animation-duration:0s !important; } }

/* La cabecera conserva una sola fila; el menú reúne los controles antes de que compitan con la tarea. */
.serve-work-header{display:flex;align-items:center;justify-content:space-between;flex:0 0 52px;height:52px;min-width:0;gap:12px;border-bottom:1px solid var(--surface-border)}
.serve-header-identity,.serve-header-actions,.serve-header-primary,.serve-header-secondary{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;min-width:0}
.serve-header-identity{flex:1 1 auto;overflow:hidden}
.serve-header-identity .brand{display:flex;align-items:center;flex:0 0 auto;min-height:44px;padding:0;border:0;background:transparent;color:var(--text-primary);cursor:pointer}
.serve-header-identity h1{flex:0 0 auto;font-size:1.125rem;line-height:1.2;margin:0;white-space:nowrap}
.serve-header-location,.serve-header-operator{font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:22ch}
.serve-header-location{color:var(--text-secondary)}
.serve-header-actions{flex:0 0 auto}
.serve-work-header .k-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;white-space:nowrap;padding:8px 12px}
.serve-work-header form{margin:0;display:flex;align-items:center}
.serve-work-header .theme-selector{padding:0;border:0;min-height:44px;align-items:center}
.serve-header-menu{display:none;position:relative}
.serve-header-menu>summary{list-style:none;width:44px;height:44px;padding:0;cursor:pointer}
.serve-header-menu>summary::-webkit-details-marker{display:none}
.serve-header-menu>summary svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.serve-header-menu-panel{position:absolute;z-index:1050;right:0;top:calc(100% + 4px);display:grid;gap:8px;width:min(280px,calc(100vw - 24px));padding:12px;background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--radius-md,6px);box-shadow:0 12px 32px rgb(0 0 0 / .2)}
.serve-header-menu-panel>span{font-size:.8125rem;overflow-wrap:anywhere}
.serve-header-menu-panel form .k-button{width:100%}
.serve-header-menu-panel form{display:block}
.serve-help-button{width:44px;min-height:44px;padding:0;font-size:1.125rem;font-weight:800;flex:0 0 auto}
.serve-help-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;color:var(--text-primary);background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--radius-md,6px)}
.serve-help-dialog::backdrop{background:rgb(0 0 0 / .5)}
.serve-help-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.serve-help-heading h2{margin:0;font-size:1.25rem}
.serve-help-dialog p{margin:20px 0 0;line-height:1.65}
.access-header-actions{display:flex;align-items:center;gap:8px}
/* El cursor comunica la espera incluso en diálogos del top layer, sin capturar clics.
   Blazor puede minimizar aria-busy booleano verdadero a un atributo vacío; falso lo omite. */
body:has([aria-busy="true" i],[aria-busy=""]),body:has([aria-busy="true" i],[aria-busy=""]) *,body[data-serve-submitting="true"],body[data-serve-submitting="true"] *{cursor:wait!important}
@media(max-width:1450px){.serve-header-location{display:none}}
@media(max-width:1200px){.serve-header-operator{display:none}}
@media(max-width:1100px){.serve-header-secondary{display:none}.serve-header-menu{display:block}}
@media(max-width:640px){.serve-header-primary{display:none}.serve-work-header{gap:8px}.serve-header-identity .brand-mark>span{display:none}.serve-header-identity h1{font-size:1rem}.serve-header-actions{gap:4px}}

.serve-menu-primary{display:none}.serve-menu-secondary{display:grid;gap:8px}.serve-menu-secondary .theme-selector{justify-self:start}
@media(max-width:640px){.serve-menu-primary{display:grid;gap:8px}}