/* ===========================================================
   DREVER · SISTEMA VISUAL (Grupo 3)
   Los tokens y componentes de admin.html ("Dirección A"), en un solo archivo
   para las demás pantallas: mismos colores, misma tipografía, mismas tarjetas y
   botones. REGLA: aquí no entra ningún color que no exista en admin.html.
   =========================================================== */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/static/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --bg:#F4F6F8; --surface:#fff; --surface-2:#EEF2F5; --surface-3:#E4EAEF;
  --ink:#1E2831; --ink-2:#28333D;
  --text:#182530; --text-2:#5B6B76; --text-3:#8A99A3;
  --border:#E4EAEF; --border-2:#D3DCE3;
  --teal:#0FA39F; --teal-d:#0B7C79; --teal-soft:#E2F3F2;
  --amber:#C4830F; --amber-soft:#FBF0DC;
  --red:#D0483C; --red-soft:#FBE7E5; --red-d:#B23A30;
  --green:#1E9E64; --green-soft:#E3F3EB;
  --violet:#6B4CA8; --violet-soft:#EAE3F7;
  --r-sm:8px; --r:11px; --r-lg:15px;
  --sh:0 1px 2px rgba(24,37,48,.05),0 1px 3px rgba(24,37,48,.04);
  --sh-2:0 4px 16px rgba(24,37,48,.09);
  --sh-3:0 18px 50px rgba(24,37,48,.22);
  --f:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sp:.16s;
}
*{box-sizing:border-box;margin:0}
body{font-family:var(--f);background:var(--bg);color:var(--text);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.25}
.num{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(15,163,159,.32);border-radius:var(--r-sm)}
.hidden{display:none!important}

/* ---------- TOPBAR ---------- */
.topbar{background:var(--ink);color:#E9EFF2;height:60px;display:flex;align-items:center;gap:18px;padding:0 24px;position:sticky;top:0;z-index:30}
.tb-brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:16.5px;letter-spacing:-.02em}
.tb-logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--teal),var(--teal-d));display:grid;place-items:center;font-weight:800;color:#fff;font-size:14px;box-shadow:0 2px 9px rgba(15,163,159,.42)}
.tb-brand small{display:block;font-size:11px;font-weight:500;color:#94A5AF;letter-spacing:0}
.tb-sp{flex:1}
.tb-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:#A9B7C0;padding:8px 13px;border-radius:9px;transition:var(--sp);cursor:pointer;background:none;border:none;font-family:inherit}
.tb-link:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---------- SHELL ---------- */
.shell{max-width:1080px;margin:0 auto;padding:26px 24px 60px}
.page-head{margin-bottom:20px}
.page-head h1{font-size:26px}
.page-head p{color:var(--text-2);font-size:14.5px;margin-top:4px}

/* ---------- TABS ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:24px;overflow-x:auto}
.tab{font-family:inherit;font-size:14.5px;font-weight:600;color:var(--text-2);background:none;border:none;padding:12px 18px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:var(--sp);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.on{color:var(--teal-d);border-bottom-color:var(--teal)}
.tab .cnt{font-size:11.5px;font-weight:700;background:var(--surface-3);color:var(--text-2);padding:1px 7px;border-radius:999px}
.tab.on .cnt{background:var(--teal-soft);color:var(--teal-d)}

/* ---------- BOTONES ---------- */
.btn{font-family:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:var(--r);border:1px solid transparent;background:var(--teal);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:var(--sp);white-space:nowrap}
.btn:hover{background:var(--teal-d)}
.btn:active{transform:translateY(1px)}
.btn--sec{background:var(--surface);color:var(--text);border-color:var(--border-2)}
.btn--sec:hover{background:var(--surface-2)}
.btn--ghost{background:transparent;color:var(--text-2);border-color:transparent}
.btn--ghost:hover{background:var(--surface-2);color:var(--text)}
.btn--danger{background:transparent;color:var(--red);border-color:#EFC9C5}
.btn--danger:hover{background:var(--red-soft)}
.btn--lg{padding:12px 20px;font-size:14.5px}
.btn--sm{padding:7px 12px;font-size:12.5px}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn--on{background:var(--teal-soft);color:var(--teal-d);border-color:var(--teal)}
.btn--on:hover{background:var(--teal-soft)}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}

/* ---------- SECCIÓN Y TARJETAS ---------- */
.sec-lbl{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:11px}
.sec-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);margin-bottom:16px;overflow:hidden}
.card-head{padding:15px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-head h3{font-size:15.5px}
.card-body{padding:18px}
.muted{color:var(--text-2);font-size:13.5px}
.muted-3{color:var(--text-3);font-size:12.5px}

/* ---------- INPUTS ---------- */
.inp,input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  font-family:inherit;font-size:14px;color:var(--text);background:var(--surface);
  border:1px solid var(--border-2);border-radius:var(--r);padding:9px 12px;width:100%;transition:var(--sp)}
.inp:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,163,159,.16)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
.f-lbl{font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:5px;display:block}
.f-hint{font-size:12px;color:var(--text-3);margin-top:5px;line-height:1.45}
.field{margin-bottom:15px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.chk-line{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text);cursor:pointer;padding:6px 0}
.chk-line input{width:16px;height:16px;accent-color:var(--teal);cursor:pointer;flex:none}

/* ---------- BADGES Y MENSAJES ---------- */
.badge{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;letter-spacing:.01em;white-space:nowrap}
.badge-ok{background:var(--green-soft);color:var(--green)}
.badge-warn{background:var(--amber-soft);color:var(--amber)}
.badge-err{background:var(--red-soft);color:var(--red)}
.badge-info{background:var(--teal-soft);color:var(--teal-d)}
.badge-violet{background:var(--violet-soft);color:var(--violet)}
.badge-neutral{background:var(--surface-3);color:var(--text-2)}
.msg{font-size:13px;font-weight:500;padding:10px 13px;border-radius:var(--r);margin-top:13px;display:none}
.msg.msg-ok{display:block;background:var(--green-soft);color:var(--green)}
.msg.msg-err{display:block;background:var(--red-soft);color:var(--red)}
.note{font-size:12.5px;color:var(--text-2);background:var(--amber-soft);border-left:3px solid var(--amber);padding:11px 13px;border-radius:0 var(--r) var(--r) 0;margin-bottom:14px}

/* ---------- "¿QUÉ PUEDE HACER?" ---------- */
.que-puede{margin-top:8px}
.que-puede summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--teal-d)}
.que-puede ul{margin:8px 0 0;padding-left:18px;font-size:12.5px;color:var(--text-2);line-height:1.55}

/* ---------- MODALES ---------- */
.ov{position:fixed;inset:0;background:rgba(20,30,40,.55);display:none;align-items:flex-start;justify-content:center;padding:36px 18px;z-index:60;overflow-y:auto}
.ov.abierto{display:flex}
.modal-box{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-3);width:100%;max-width:440px;overflow:hidden;margin:auto}
.modal-head{padding:17px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-head h3{font-size:17px}
.modal-body{padding:20px 22px}
.modal-foot{padding:15px 22px;border-top:1px solid var(--border);background:var(--surface-2);display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}

/* ---------- TABLAS ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text-3);font-weight:700;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}
td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:top}
tr:last-child td{border-bottom:none}

/* ---------- AVISO FLOTANTE ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--r);font-size:13.5px;font-weight:600;box-shadow:var(--sh-3);z-index:90;max-width:92vw;text-align:center;display:none}
.toast.visible{display:block}
.toast.err{background:var(--red)}

@media(max-width:760px){
  .grid-2{grid-template-columns:1fr}
  .shell{padding:18px 16px 50px}
  .topbar{padding:0 16px;gap:10px}
}

/* ---------- BARRA COMÚN Y TEMA POR PANTALLA ---------- */
body[data-drever-page="caja"]{
  --bg-main:var(--bg);--bg-card:var(--surface);--bg-card-hover:var(--surface-2);
  --accent:var(--teal-d);--accent-soft:var(--teal);--accent-bright:var(--teal-d);
  --text-main:var(--text);--text-muted:var(--text-2);--danger:var(--red);--ok:var(--green)
}
body[data-drever-page="facturacion"],body[data-drever-page="perfil"]{
  --bg-main:var(--bg);--bg-card:var(--surface);--accent:var(--teal-d);--accent-soft:var(--teal);
  --text-main:var(--text);--text-muted:var(--text-2);--danger:var(--red);--ok:var(--green)
}
body[data-drever-page="finanzas"]{
  --bg-page:var(--bg);--card:var(--surface);--tinta:var(--text);--text-muted:var(--text-2);
  --accent:var(--teal-d);--ok:var(--green);--accent-bright:var(--amber);--danger:var(--red)
}
body[data-drever-page]:not([data-drever-page="cocina"]){
  min-height:100vh;background:var(--bg)!important;color:var(--text)!important;
  font-family:var(--f)!important
}
.dbar-header{position:sticky;top:0;z-index:50;box-sizing:border-box;width:100%;min-height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;
  background:var(--ink);color:#E9EFF2;box-shadow:0 2px 8px rgba(16,24,32,.12)}
body[data-drever-page="caja"] .dbar-header{width:100vw;margin-left:calc(50% - 50vw)}
.dbar-header-left{display:flex;align-items:center;gap:14px;min-width:0}
.dbar-menu-toggle{width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);
  border-radius:11px;background:transparent;color:#fff;cursor:pointer}
.dbar-menu-toggle:hover{background:rgba(255,255,255,.1)}
.dbar-menu-toggle svg{width:23px;height:23px}
.dbar-business{font-size:15px;font-weight:700;line-height:1.25;max-width:min(62vw,560px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#F5F8FA}
.dbar-profile{position:relative;flex:none}
.dbar-avatar{width:38px;height:38px;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:var(--teal);color:#fff;
  font:700 13px var(--f);cursor:pointer;display:grid;place-items:center}
.dbar-avatar:hover{background:var(--teal-d)}
.dbar-account-menu{position:absolute;right:0;top:calc(100% + 9px);z-index:120;min-width:180px;padding:6px;
  background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.dbar-account-menu[hidden]{display:none}
.dbar-account-menu a,.dbar-account-menu button{display:block;width:100%;padding:10px 12px;border:0;border-radius:8px;background:transparent;
  color:var(--text);font:600 13px var(--f);text-align:left;text-decoration:none;cursor:pointer}
.dbar-account-menu a:hover,.dbar-account-menu button:hover{background:var(--surface-2)}
.dbar-overlay{position:fixed;inset:0;z-index:99;display:none;border:0;background:rgba(10,17,23,.48);cursor:pointer}
.dbar-overlay.dbar-open{display:block}
.dbar-sidebar{position:fixed;inset:0 auto 0 0;z-index:100;width:min(320px,88vw);height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 14px 24px;background:var(--surface);color:var(--text);border-right:1px solid var(--border);
  box-shadow:var(--sh-3);transform:translateX(-105%);transition:transform .2s ease;visibility:hidden}
.dbar-sidebar.dbar-open{transform:translateX(0);visibility:visible}
.dbar-logo{display:block;width:146px;max-width:70%;height:auto;max-height:64px;object-fit:contain;margin:10px auto 23px}
.dbar-nav{display:flex;flex-direction:column;gap:4px}
.dbar-nav-group{display:flex;flex-direction:column;gap:2px}
.dbar-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 12px;border-radius:10px;color:var(--text-2);font-size:14px;font-weight:600;text-decoration:none;transition:background var(--sp),color var(--sp)}
.dbar-link svg{width:19px;height:19px;flex:none}
.dbar-link:hover{background:var(--surface-2);color:var(--text)}
.dbar-link.dbar-current{background:var(--teal-soft);color:var(--teal-d)}
.dbar-group-current>.dbar-link:not(.dbar-current){color:var(--teal-d)}
.dbar-subnav{margin:0 0 4px 29px;padding-left:9px;border-left:1px solid var(--border-2)}
.dbar-sublink{min-height:38px;padding:7px 10px;font-size:13px}
.dbar-sublink svg{width:16px;height:16px}
.dbar-open{overflow:hidden!important}
.dbar-legacy-hooks{display:none!important}
.dbar-page-meta{max-width:1080px;margin:18px auto 8px;padding:0 24px;color:var(--text-2)}
.dbar-page-meta h1{font-size:22px;color:var(--text);margin:0 0 3px}
.dbar-page-meta p{margin:0}
.dbar-kitchen-header{justify-content:flex-start;background:#111820;color:#F3F6F8}
.dbar-station-title{font-size:17px;font-weight:700;letter-spacing:.01em}

/* Formularios y componentes de las páginas migradas a la paleta común. */
body[data-drever-page] input:not([type=checkbox]):not([type=radio]),
body[data-drever-page] select,body[data-drever-page] textarea{
  font-family:var(--f);color:var(--text);background:var(--surface);border-color:var(--border-2);border-radius:var(--r)
}
body[data-drever-page] label,body[data-drever-page] .campo,body[data-drever-page] .field{color:var(--text-2)}
body[data-drever-page] .card,body[data-drever-page] .full-card,body[data-drever-page] .stat-card,
body[data-drever-page] .modal,body[data-drever-page] .modal-res,body[data-drever-page] .login-card,
body[data-drever-page] #card,body[data-drever-page] .confirm-box{
  background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:var(--sh)
}
body[data-drever-page] .modal-overlay,body[data-drever-page] .overlay{background:rgba(20,30,40,.58)}
body[data-drever-page] .btn-guardar,body[data-drever-page] .btn-check,body[data-drever-page] .btn-mesa,
body[data-drever-page] .btn-login,body[data-drever-page] .btn-confirm-ok,body[data-drever-page] .btn.prim{
  background:var(--teal);color:#fff;border-color:var(--teal);font-family:var(--f)
}
body[data-drever-page] .btn-guardar:hover,body[data-drever-page] .btn-check:hover,
body[data-drever-page] .btn-mesa:hover,body[data-drever-page] .btn-login:hover{background:var(--teal-d);border-color:var(--teal-d)}
body[data-drever-page] .btn-del,body[data-drever-page] .btn-confirm-cancel,
body[data-drever-page] .btn-cancelar-platillo{color:var(--red);border-color:#EFC9C5}
body[data-drever-page] .tab-btn,body[data-drever-page] .tab,body[data-drever-page] .tab-caja,
body[data-drever-page] .tabs-caja .tab-caja{font-family:var(--f);color:var(--text-2)}
body[data-drever-page] .tab-btn.active,body[data-drever-page] .tab.on,body[data-drever-page] .tab-caja.on,
body[data-drever-page] .tab-caja.active{color:var(--teal-d);border-bottom-color:var(--teal)}
body[data-drever-page] .msg,body[data-drever-page] .estado,body[data-drever-page] .cfg-error,
body[data-drever-page] .error-msg,body[data-drever-page] .error,body[data-drever-page] .aviso,
body[data-drever-page] .cuenta-caja-aviso,body[data-drever-page] .fc-alerta,body[data-drever-page] .alerta-box,
body[data-drever-page] .merma-aviso,body[data-drever-page] .tq-alerta-aviso,body[data-drever-page] .tq-aviso{
  border-radius:var(--r);font-family:var(--f)
}
body[data-drever-page] .estado-completo,body[data-drever-page] .msg-ok,body[data-drever-page] .msg.msg-ok,
body[data-drever-page] .toast.ok{background:var(--green-soft);color:var(--green)}
body[data-drever-page] .estado-incompleto,body[data-drever-page] .msg-err,body[data-drever-page] .msg.error,
body[data-drever-page] .error,body[data-drever-page] .error-msg,body[data-drever-page] .toast.err{background:var(--red-soft);color:var(--red)}
body[data-drever-page] .estado-ausente,body[data-drever-page] .aviso,body[data-drever-page] .merma-aviso,
body[data-drever-page] .tq-alerta-aviso,body[data-drever-page] .tq-aviso{background:var(--amber-soft);color:var(--amber)}
body[data-drever-page="facturacion"] .wrap,body[data-drever-page="perfil"] .wrap{max-width:900px;margin:0 auto;padding:24px}
body[data-drever-page="finanzas"] .content,body[data-drever-page="inventario"] .content{background:transparent;color:var(--text)}
body[data-drever-page="finanzas"] .full-card,body[data-drever-page="inventario"] .card{border:1px solid var(--border);border-radius:var(--r-lg)}
body[data-drever-page="finanzas"] .tabs,body[data-drever-page="inventario"] .tabs,
body[data-drever-page="mesero"] .tab-nav{background:var(--surface);border-color:var(--border)}
body[data-drever-page="finanzas"] .tab-btn,body[data-drever-page="inventario"] .tab,
body[data-drever-page="mesero"] .tab-btn{background:transparent;color:var(--text-2);border-bottom-color:transparent}
body[data-drever-page="finanzas"] .tab-btn.active,body[data-drever-page="inventario"] .tab.active,
body[data-drever-page="mesero"] .tab-btn.active{color:var(--teal-d);border-bottom-color:var(--teal)}
body[data-drever-page="mesero"] .mesa-bar{background:var(--surface);border-color:var(--border)}
body[data-drever-page="mesero"] .mesa-chip{background:var(--surface-2);border-color:var(--border-2);color:var(--text-2)}
body[data-drever-page="mesero"] .mesa-chip.activa{background:var(--teal);border-color:var(--teal);color:#fff}
body[data-drever-page="mesero"] .cuenta-mesa-card,body[data-drever-page="mesero"] .carrito,
body[data-drever-page="mesero"] .cuenta-cliente{background:var(--surface);color:var(--text);border-color:var(--border)}
body[data-drever-page="login"]{background:var(--bg)!important;color:var(--text)!important}
body[data-drever-page="login"] #card{border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;box-shadow:var(--sh-2)}
body[data-drever-page="login"] .login-logo{display:block;width:min(190px,70%);height:auto;object-fit:contain;margin:0 auto 22px}
body[data-drever-page="login"] button{background:var(--teal);border-radius:var(--r);font-family:var(--f)}
body[data-drever-page="denegado"]{background:var(--bg)!important;color:var(--text)!important}
body[data-drever-page="denegado"] .card{border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-2)}

/* Cocina/barra: oscuro local a esta pantalla; nunca altera el fondo global. */
body[data-drever-page="cocina"]{min-height:100vh;background:#0B0E12!important;color:#F2F5F7!important;font-family:var(--f)!important}
body[data-drever-page="cocina"] .shell{background:transparent;color:#F2F5F7}
body[data-drever-page="cocina"] .pedido,body[data-drever-page="cocina"] .aceptado-card,
body[data-drever-page="cocina"] .modal-box,body[data-drever-page="cocina"] .modal,
body[data-drever-page="cocina"] #cocinaOverlay>div,body[data-drever-page="cocina"] #eliminarOverlay>div{
  background:#1B222A!important;color:#F2F5F7!important;border-color:#39434D!important
}
body[data-drever-page="cocina"] .pedido-header,body[data-drever-page="cocina"] .aceptado-header,
body[data-drever-page="cocina"] .estado-linea{color:#F2F5F7}
body[data-drever-page="cocina"] .item-linea,body[data-drever-page="cocina"] .aceptado-linea{border-color:#39434D}
body[data-drever-page="cocina"] input,body[data-drever-page="cocina"] select,
body[data-drever-page="cocina"] textarea{background:#111820!important;color:#F2F5F7!important;border-color:#56616C!important}
body[data-drever-page="cocina"] .tab{color:#C9D2D9}
body[data-drever-page="cocina"] .tab.on,body[data-drever-page="cocina"] .tab.active{color:#8BE0D8;border-color:#0FA39F}
body[data-drever-page="cocina"] .alerta-limite,body[data-drever-page="cocina"] .cancelar-error{background:#402521;color:#FFC1B9}

@media(max-width:760px){
  .dbar-header{min-height:56px;padding:0 12px;gap:10px}
  .dbar-header-left{gap:10px}
  .dbar-menu-toggle{width:38px;height:38px}
  .dbar-business{font-size:14px;max-width:65vw}
  .dbar-sidebar{width:min(330px,88vw);padding-top:14px}
  .dbar-page-meta{padding:0 16px}
  body[data-drever-page="caja"] .dbar-header{margin-left:calc(50% - 50vw)}
}
body[data-drever-page="cocina"] .pedido p,body[data-drever-page="cocina"] .pedido span,
body[data-drever-page="cocina"] .pedido small,body[data-drever-page="cocina"] .pedido strong,
body[data-drever-page="cocina"] .aceptado-card p,body[data-drever-page="cocina"] .aceptado-card span,
body[data-drever-page="cocina"] .aceptado-card small,body[data-drever-page="cocina"] .aceptado-card strong{
  color:#fff!important
}
body[data-drever-page="cocina"] .pedido .estado-linea,body[data-drever-page="cocina"] .aceptado-card .estado-linea{color:#8BE0D8!important}
body[data-drever-page="cocina"] .btn--danger{color:#FFAAA1;border-color:#874740;background:transparent}
body[data-drever-page="cocina"] .toast.err{background:#842F2B!important;color:#fff!important}
body[data-drever-page="cocina"] .alerta-limite{background:#453713!important;color:#FFE08A!important}
body[data-drever-page="cocina"] .cancelar-error{background:#402521!important;color:#FFC1B9!important}

/* Etapa 3: peligro visible en Plano; la .btn compartida imponía fondo teal. */
body[data-drever-page="plano"] .btn.peligro{
  background:var(--red-d);color:#fff;border-color:var(--red-d)
}
body[data-drever-page="plano"] .btn.peligro:hover:not(:disabled){
  background:#922F27;color:#fff;border-color:#922F27
}
body[data-drever-page="plano"] .btn.peligro:disabled{
  background:#686868;color:#fff;border-color:#686868;opacity:1
}

/* La regla puente de Mesero (arriba) no debe tapar los tres bordes de estado. */
body[data-drever-page="mesero"] .cuenta-mesa-card.urgencia-roja{border-color:#fecaca;border-left-color:#dc2626}
body[data-drever-page="mesero"] .cuenta-mesa-card.urgencia-amarilla{border-color:#fde68a;border-left-color:#d97706}
body[data-drever-page="mesero"] .cuenta-mesa-card.urgencia-verde{border-color:#bbf7d0;border-left-color:#16a34a}

/* Cocina y barra: grises neutros y controles legibles en estación y persona. */
body[data-drever-page="cocina"]{background:#000!important;color:#fff!important}
body[data-drever-page="cocina"] .shell{color:#fff}
body[data-drever-page="cocina"] .dbar-kitchen-header{background:#1C1C1C;color:#fff}
body[data-drever-page="cocina"] .card,body[data-drever-page="cocina"] .pedido,
body[data-drever-page="cocina"] .aceptado-card,body[data-drever-page="cocina"] .modal-box,
body[data-drever-page="cocina"] .modal,body[data-drever-page="cocina"] #cocinaOverlay>div,
body[data-drever-page="cocina"] #eliminarOverlay>div{
  background:#1C1C1C!important;color:#fff!important;border-color:#686868!important
}
body[data-drever-page="cocina"] .pedido{border-left-color:#9B6200!important}
body[data-drever-page="cocina"] .pedido.preparando{border-left-color:#0B7C79!important}
body[data-drever-page="cocina"] .aceptado-card{border-left-color:#70C99B!important}
body[data-drever-page="cocina"] .modal-foot{background:#242424;border-top-color:#686868}
body[data-drever-page="cocina"] .ov-cocina{background:rgba(0,0,0,.74)}
body[data-drever-page="cocina"] .card-head,body[data-drever-page="cocina"] .modal-head,
body[data-drever-page="cocina"] .item-linea,body[data-drever-page="cocina"] .aceptado-linea,
body[data-drever-page="cocina"] .pedido-item{border-color:#555}
body[data-drever-page="cocina"] .page-head h1,body[data-drever-page="cocina"] .pedido-header,
body[data-drever-page="cocina"] .aceptado-header,body[data-drever-page="cocina"] .item-linea,
body[data-drever-page="cocina"] .card-head h3,body[data-drever-page="cocina"] .modal-head h3,
body[data-drever-page="cocina"] .codigo-emparejar{color:#fff}
body[data-drever-page="cocina"] .pedido .item-nota,
body[data-drever-page="cocina"] .aceptado-card .item-nota{color:#D0D0D0!important}
body[data-drever-page="cocina"] .item-mod,body[data-drever-page="cocina"] .hora,
body[data-drever-page="cocina"] .aceptado-hora,body[data-drever-page="cocina"] .muted,
body[data-drever-page="cocina"] .muted-3,body[data-drever-page="cocina"] .f-lbl,
body[data-drever-page="cocina"] .f-hint,body[data-drever-page="cocina"] .tipo-ayuda,
body[data-drever-page="cocina"] .sin-pedidos,body[data-drever-page="cocina"] .sin-aceptados{
  color:#D0D0D0
}
body[data-drever-page="cocina"] .pedido-item.estado-aceptado .pedido-item-contenido,
body[data-drever-page="cocina"] .pedido-item.estado-eliminado .pedido-item-contenido{opacity:1}
body[data-drever-page="cocina"] .estado-linea{color:#8BE0D8!important}
body[data-drever-page="cocina"] .tipo-opcion{color:#fff}
body[data-drever-page="cocina"] .field{color:#D0D0D0}
body[data-drever-page="cocina"] .teclear summary,
body[data-drever-page="cocina"] #lnkConContrasena{color:#8BE0D8!important}
body[data-drever-page="cocina"] input,body[data-drever-page="cocina"] select,
body[data-drever-page="cocina"] textarea{
  background:#242424!important;color:#fff!important;border-color:#8A8A8A!important
}
body[data-drever-page="cocina"] input::placeholder,
body[data-drever-page="cocina"] textarea::placeholder{color:#D0D0D0}
body[data-drever-page="cocina"] .btn{
  background:#0B7C79;color:#fff;border:1px solid #0B7C79
}
body[data-drever-page="cocina"] .btn:hover:not(:disabled){background:#096966;border-color:#0B7C79}
body[data-drever-page="cocina"] .btn-listo,body[data-drever-page="cocina"] .btn-listo-linea,
body[data-drever-page="cocina"] .btn--on{
  background:#0B7C79!important;color:#fff!important;border-color:#0B7C79!important
}
body[data-drever-page="cocina"] .btn-listo:hover:not(:disabled),
body[data-drever-page="cocina"] .btn-listo-linea:hover:not(:disabled),
body[data-drever-page="cocina"] .btn--on:hover:not(:disabled){background:#096966!important;border-color:#0B7C79!important}
body[data-drever-page="cocina"] .btn-preparar{
  background:#9B6200!important;color:#fff!important;border-color:#9B6200!important
}
body[data-drever-page="cocina"] .btn-preparar:hover:not(:disabled){background:#805100!important;border-color:#9B6200!important}
body[data-drever-page="cocina"] .btn--sec:not(.btn-preparar){
  background:#333!important;color:#fff!important;border-color:#8A8A8A!important
}
body[data-drever-page="cocina"] .btn--sec:not(.btn-preparar):hover:not(:disabled){background:#444!important}
body[data-drever-page="cocina"] .btn--danger{
  background:#C44439!important;color:#fff!important;border-color:#C44439!important
}
body[data-drever-page="cocina"] .btn--danger:hover:not(:disabled){background:#A9382F!important;border-color:#C44439!important}
body[data-drever-page="cocina"] .btn:disabled{
  background:#686868!important;color:#fff!important;border-color:#8A8A8A!important;opacity:1!important
}
body[data-drever-page="cocina"] .note,body[data-drever-page="cocina"] .alerta-limite,
body[data-drever-page="cocina"] .cancelar-error,body[data-drever-page="cocina"] .msg.msg-err,
body[data-drever-page="cocina"] .toast.err{
  background:#2B2B2B!important;color:#fff!important;border-left:3px solid #8A8A8A
}
body[data-drever-page="cocina"] .alerta-limite{color:#FFD589!important;border-left-color:#9B6200}
body[data-drever-page="cocina"] .cancelar-error,
body[data-drever-page="cocina"] .msg.msg-err,
body[data-drever-page="cocina"] .toast.err{color:#FFB4A8!important;border-left-color:#C44439}

/* Etapa 3B: las pestañas siguen visibles y son una segunda vía de navegación.
   Administración, Dashboard, Mesas y Plano ya usan el patrón de Administración;
   Cocina conserva sus botones de acción sobre fondo negro. */
body[data-drever-page="caja"] #cajaTabs,
body[data-drever-page="finanzas"] .content>.tabs,
body[data-drever-page="inventario"]>.tabs,
body[data-drever-page="mesero"] #app>.tab-nav{
  display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;align-items:stretch;
  border-bottom:1px solid var(--border);background:transparent;margin-bottom:24px
}
body[data-drever-page="inventario"]>.tabs{
  width:calc(100% - 3rem);max-width:912px;margin:0 auto 24px;padding:0
}
body[data-drever-page="caja"] #cajaTabs .tab-caja,
body[data-drever-page="finanzas"] .content>.tabs .tab-btn,
body[data-drever-page="inventario"]>.tabs .tab,
body[data-drever-page="mesero"] #app>.tab-nav .tab-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  padding:12px 18px;margin:0 0 -1px;border:0;border-bottom:2.5px solid transparent;
  border-radius:0;background:transparent;color:var(--text-2);
  font:600 14.5px var(--f);line-height:1.5;white-space:nowrap;cursor:pointer;
  transition:color var(--sp),border-color var(--sp)
}
body[data-drever-page="caja"] #cajaTabs .tab-caja:hover,
body[data-drever-page="finanzas"] .content>.tabs .tab-btn:hover,
body[data-drever-page="inventario"]>.tabs .tab:hover,
body[data-drever-page="mesero"] #app>.tab-nav .tab-btn:hover{color:var(--text)}
body[data-drever-page="caja"] #cajaTabs .tab-caja.on,
body[data-drever-page="finanzas"] .content>.tabs .tab-btn.activa,
body[data-drever-page="inventario"]>.tabs .tab.active,
body[data-drever-page="mesero"] #app>.tab-nav .tab-btn.active{
  background:transparent;color:var(--teal-d);border-bottom-color:var(--teal)
}
@media(max-width:600px){
  body[data-drever-page="inventario"]>.tabs{width:calc(100% - 2rem)}
}

.dbar-sidebar{display:flex;flex-direction:column;overflow:hidden;padding:22px 14px 18px}
.dbar-sidebar.dbar-open{overflow:hidden!important}
.dbar-brand{padding:3px 12px 18px;border-bottom:1px solid var(--border);margin-bottom:17px;min-height:64px}
.dbar-brand-name{font-size:17px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;color:var(--text)}
.dbar-brand-name[hidden]{display:none}
.dbar-brand-subtitle{font-size:11.5px;color:var(--text-2);margin-top:3px}
.dbar-nav-label{padding:0 12px 8px;color:var(--text-3);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.dbar-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-right:3px}
.dbar-module-row{display:flex;align-items:center;gap:2px;min-width:0}
.dbar-module-link{flex:1;min-width:0}
.dbar-expandir{display:grid;place-items:center;flex:none;width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:var(--text-2);font:700 20px var(--f);cursor:pointer;transition:transform var(--sp),background var(--sp)}
.dbar-expandir:hover{background:var(--surface-2);color:var(--text)}
.dbar-expandir[aria-expanded="true"]{transform:rotate(180deg)}
.dbar-subnav[hidden]{display:none}
.dbar-subnav .dbar-sublink{padding-left:12px}
.dbar-group-current>.dbar-module-row .dbar-module-link{color:var(--teal-d)}
.dbar-footer{flex:none;padding:12px 3px 0;border-top:1px solid var(--border);margin-top:12px}
.dbar-footer .dbar-logo{width:82px;max-width:40%;max-height:36px;margin:0 auto 12px}
.dbar-profile{width:100%}
.dbar-persona{display:flex;align-items:center;gap:10px;width:100%;padding:9px;border:0;border-radius:11px;background:transparent;color:var(--text);text-align:left;cursor:pointer;font-family:var(--f)}
.dbar-persona:hover{background:var(--surface-2)}
.dbar-persona .dbar-avatar{flex:none;width:38px;height:38px}
.dbar-identidad{display:flex;flex-direction:column;min-width:0}
.dbar-identidad strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbar-identidad small{font-size:11px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbar-profile .dbar-account-menu{left:0;right:auto;top:auto;bottom:calc(100% + 6px);width:100%}
body[data-drever-page="cocina"] #cocinaSeccionActual,
body[data-drever-page="cocina"] .pedido .item-mod,
body[data-drever-page="cocina"] .pedido .hora,
body[data-drever-page="cocina"] .aceptado-card .aceptado-hora{color:#D0D0D0!important}