body { background:#252525 url(../img/bkg.jpg) no-repeat center 20px; background-size:cover; }
body, table td { padding: 0; margin: 0; font-size:0.9em; font-family: 'Monda', Helvetica, sans-serif; line-height:19px; color:#eee; }
p { font-size: 0.9em; }
a { text-decoration: none; color:#6ecc43; }
/*img, video, object { max-width: 100%; }*/
.vaM { vertical-align: middle; }
.vaT { vertical-align: top; }
.B { font-weight: bold; }
.L { text-align:left;}
.R { text-align:right; }
.Red { color: #900; }
.C { text-align: center; }
.Blue, #divName { color: #97BE13;}
.Blue2 { background:#008; }
.T8 { font-size:0.8em;}
.T12 { font-size:0.8em;}
.T16  { font-size:1.4em;}
.MB10 { margin-bottom:10px;}
.ML10 { margin-left:10px; margin-right:10px; }
.Water { font-style:italic; color:#666;}

/* Starting styles for smartphones */
input, select { font: 0.9em Monda, Helvetica, sans-serif; }
select {padding:5px; border:solid 2px #666; background:#333; width:95%; color:#fff; margin-top:10px;}
input[type="text"], input[type="password"], input[type="number"]{ padding: 5px; border:none; border-bottom: solid 2px #666; background:#333; color:#fff; }
input[type="button"], input[type="submit"] {padding: 10px;  color: #fff; border: solid 1px #050; font-size:0.9em; background:#030; }
input[type="file"] { background: #ccc; padding: 10px 5px; margin-bottom: 20px; }
input[type="button"]:hover, input[type="submit"]:hover { background: #0a0; }
input[type="button"]:disabled, input[type="submit"]:disabled { background: #666; }
.val { display: inline-block; background: #900; color: #fff; min-width: 10px; border-radius: 10px; padding: 2px; font-size: 0.8em; }
.fR { float:right; }

#secTitle {padding:5px; width:98%; background:#000; height:40px; margin:0 auto; color:#fff; }
#divHome { width:8%;}
#divTitle { width:82%; font-weight:bold; overflow:hidden; }
#mainMenu { width:10%; text-align:right; }
#divHome, #divTitle, #mainMenu {float:left; height:40px;}
#mainMenu a { color:#060; float:none; font-size:0.9em; }

#secMsg { }
.dBody { border-bottom:solid 1px #666; padding-bottom:10px;}
#secBody { padding:5px; }
#secBodyL, #secBodyR { float:none; }
.Footer { text-align:center; font-size:0.8em; color:#999;  padding:5px; }

#busyMainImage { border-style: none;
	border-color: inherit;
	border-width: medium;
	width: 32px; height: 32px; background: url(''); }
.dAd { margin:0 auto; text-align:center; }
.dAd img { max-width:96%;}
#dLogin { text-align: center; width: 230px; margin: 0 auto; border:solid 1px #333; padding: 10px 50px; }
	#dLogin input[type="text"], #dLogin input[type="password"] { width: 200px; }
	.lfLogoWrap { text-align:center; }
	.lfLogo { display:block; max-width:200px; margin:10px auto; }
	.lfLabel::after { content: ":"; }
	.lfBrand, .lfTitle { display: none; }
	.lfEye { display: none; }
.dtgQ, .tabFull { width:100%; background:url('');
				  border-bottom:solid 1px #777; border-left:solid 1px #777; border-right:solid 1px #777;
}
	.dtgQ td { padding:3px;}
.ListHeader { background: #333; color: #fff; height: 25px; font-size: 0.9em; }
.ListItem { padding: 5px 2px; font-size: 1em;}
.pnlButtons { margin-bottom: 10px; }
.tabForm { text-align: left; }
.tdL { text-align: right; background: #333; width:30%; padding: 5px; }
.ctlP, .ctlN, .ctlG{text-transform:uppercase;}
.ctl50 { width: 50px; }
.ctlP { width: 100px; }
.ctlN { width: 180px; }
.ctlG { width: 300px; }
.sqItem { display:inline-table; width:180px; height:235px; padding:10px; margin:5px; background:#222; }
	.sqItem .title { height:40px; }
	.sqItem table { width:200px;}
	.sqItem img { display:block; height:120px; border: solid 1px #ccc; margin: 5px auto;}
	.sqItem input[type="submit"] { width: 100px; height:50px; white-space:normal; word-wrap: break-word; }
#divName { font-weight: bold; }
.divTotal { border: solid 1px #777; margin: 10px 0; padding:5px; }
/*.dTitleBar { background:#00468C; color:#fff; padding:5px 10px; font-size:0.9em; margin-bottom:5px; margin-top:5px; }*/
.dTitleBar { background: #000; color:#fff; padding:5px 10px; font-size:0.9em; margin-top:10px;
	border-top:solid 1px #777; border-left:solid 1px #777; border-right:solid 1px #777; }
.btn { width: 175px; background: #080; }
.btnP { width: 100px; margin: 5px; background: #080; }
.btnAct { width: 95%; height: 100px; margin: 50px 10px; background: #080; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; /* Firefox */ }
.chkSel input[type=checkbox] { -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); padding: 5px; }

.radiowrap input { float: none; margin-left:0; }
.radiowrap label { margin-right: 15px; display: block; text-align:center; }


/* =====================================================================
   IDENTIDAD VISUAL — guía de estilos reutilizable (tokens oficiales)
   Mantiene: tema oscuro, verde #97BE13 (#6ecc43 hover), botones verdes
   oscuros, texto blanco, bordes discretos, aspecto POS minimalista.
   ===================================================================== */
:root{
	--bg:#161616;
	--panel:#0f0f0f;
	--card:#242424;
	--card-hi:#2b2b2b;
	--border:#3a3a3a;
	--border-strong:#555;
	--ink:#f2f2f2;
	--ink-dim:#a6a6a6;
	--ink-soft:#8f8f8f;
	--accent:#97BE13;      /* verde identidad (clase "Blue") */
	--accent-hi:#6ecc43;   /* verde hover */
	--btn-bg:#0b5b00;      /* botón verde oscuro (histórico #080) */
	--btn-bg-hi:#0d7a00;
	--btn-bg-active:#085700;
	--danger:#c0392b;
	--warn:#e8a23a;
	--radius:8px;
	--font:'Segoe UI', Tahoma, 'Monda', sans-serif;
	--font-h:14px;
	--font-title:13px;
	--ctrl-h:34px;
	--gap-sec:16px;
	--gap-ctl:8px;
}

/* Tipografía y animaciones base */
body{ font-family:var(--font); }
input, select, textarea{ font-family:var(--font); }
button, input[type="button"], input[type="submit"], .btn{ font-family:var(--font); }

/* Barras de desplazamiento personalizadas (tema oscuro) */
html { scrollbar-color:#3a3a3a #111; scrollbar-width:thin; }
*::-webkit-scrollbar{ width:12px; height:12px; }
*::-webkit-scrollbar-track{ background:#131313; }
*::-webkit-scrollbar-thumb{ background:var(--border); border:2px solid #131313; border-radius:8px; }
*::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* Scrollbars dentro de las pestañas Ajax */
.ajax__tab_body *::-webkit-scrollbar{ width:10px; height:10px; }

/* Encabezado: más aire y mejor alineación */
#secTitle{ height:54px; padding:0 14px; display:flex; align-items:center; }
#divHome, #divTitle, #mainMenu{ float:none; height:auto; display:flex; align-items:center; }
#divHome{ width:8%; justify-content:flex-start; }
#divHome a{ display:inline-flex; align-items:center; }
#divHome img{ width:22px; height:22px; }
#divTitle{ width:68%; flex:1; }
#divTitle .T12{ font-size:12px; color:var(--ink-dim); }
#divTitle .T8{ font-size:13px; color:var(--ink); font-weight:700; letter-spacing:.4px; }
#mainMenu{ width:24%; justify-content:flex-end; }
#mainMenu a{ font-size:1em; color:var(--accent-hi); display:inline-flex; align-items:center; }

/* Modo lectura de orden: ocultar pestañas, solo ver items agregados */
.hideTabs .ajax__tab_header{ display:none; }

/* TOTAL de la orden: primer elemento y muy visible */
.divTotal{ background:#0f0f0f; border:1px solid var(--border); border-left:4px solid var(--accent);
	padding:16px 20px; margin:14px 0; text-align:center; font-size:1.0em; color:var(--ink-dim);
	border-radius:6px; }
.divTotal .Blue{ font-size:25px; font-weight:800; color:var(--accent); }

/* Barra de búsqueda: una sola fila, controles uniformes */
.searchRow{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--gap-ctl);
	background:var(--card); border:1px solid var(--border); padding:10px 12px; border-radius:var(--radius); margin-bottom:14px; }
.searchRow label{ color:var(--ink-dim); text-transform:uppercase; font-size:11px; letter-spacing:.4px; }
.searchRow input[type="text"], .searchRow input[type="number"], .searchRow select{ height:var(--ctrl-h); box-sizing:border-box; }

/* Tarjetas de producto: cuadrícula responsive + tarjeta cohesionada */
.prodGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.sqItem{ display:flex; flex-direction:column; width:auto; height:auto; margin:0; padding:12px; background:var(--card);
	border:1px solid var(--border); border-radius:var(--radius); box-sizing:border-box; text-align:center;
	transition:border-color .15s ease, transform .12s ease; overflow:hidden; position:relative; }
.sqItem .catStripe{ position:absolute; top:0; left:0; right:0; height:5px; background:transparent; }
.sqItem:hover{ border-color:var(--accent); transform:translateY(-2px); }
.sqItem .title{ height:auto; min-height:34px; margin-bottom:8px; font-weight:600; font-size:12.5px; color:var(--ink);
	display:flex; align-items:center; justify-content:center; }
.sqItem img{ height:120px; width:100%; max-width:120px; object-fit:contain; border:1px solid var(--border);
	background:#0c0c0c; border-radius:6px; margin:0 auto 8px auto; }
.sqItem table{ width:100%; border-collapse:collapse; }
.sqItem table td{ text-align:center; vertical-align:middle; }
.sqItem .Blue{ }
.sqItem .Blue.B{ font-size:1.25em; color:var(--accent); font-weight:700; }
.sqItem td .b-self { }
/* Botón AGREGAR */
.sqItem input[type="submit"]{ width:100%; height:38px; white-space:normal; word-wrap:break-word; margin-top:8px;
	background:var(--btn-bg); color:#fff; border:1px solid var(--border-strong); border-radius:4px;
	font-family:var(--font); font-size:11.5px; font-weight:600; letter-spacing:.4px; cursor:pointer;
	transition:background .15s ease, transform .1s ease; }
.sqItem input[type="submit"]:hover{ background:var(--btn-bg-hi); }
.sqItem input[type="submit"]:active{ background:var(--btn-bg-active); transform:translateY(1px); }
.sqItem .prodPrice{ font-size:1.25em; color:var(--accent); font-weight:700; margin:2px 0 4px 0; }
.sqItem .prodMeta{ color:var(--ink-dim); font-size:11px; letter-spacing:.3px; text-transform:uppercase; }
.sqItem input[type="submit"]:disabled{ background:#2a2a2a; color:var(--ink-soft); cursor:not-allowed; }
.searchRow .searchLbl{ color:var(--ink-dim); }
.searchRow .goBtn{ width:34px; height:var(--ctrl-h); margin:0; padding:0; background:var(--btn-bg);
	border:1px solid var(--border-strong); border-radius:4px; cursor:pointer; }
.searchRow .goBtn:hover{ background:var(--btn-bg-hi); }

/* ===== Tabs (barra independiente sobre la tarjeta de contenido) ===== */
.ajax__tab_xp{ font-family:var(--font); }
/* Oculta el header dibujado por el TabControl: elimina su franja/borde por defecto */
.ajax__tab_xp .ajax__tab_header{ display:none !important; }
.ajax__tab_xp .ajax__tab_body{ background:var(--bg) !important; border:1px solid var(--border); padding:14px;
	border-radius:var(--radius); }

/* Barra de Tabs propia (Desktop) — sin ningún borde dibujado por el control */
.topTabs{ display:none; align-items:center; gap:6px; padding:6px; margin:0 0 14px 0;
	background:var(--card); border:none; border-radius:var(--radius); }
.topTabs .ttItem{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px;
	font-family:var(--font); font-size:12.5px; font-weight:600; letter-spacing:.3px;
	color:var(--ink-dim); background:transparent; border:none; border-radius:6px; cursor:pointer;
	transition:color .15s ease, background .15s ease, border-color .15s ease; }
.topTabs .ttItem:hover{ color:var(--ink); background:var(--card-hi); }
.topTabs .ttItem.active{ color:var(--accent); font-weight:700;
	background:rgba(151,190,19,.14); border:1px solid var(--accent); }
.topTabs .ttIcon{ font-size:16px; }

/* ===== CLIENTE Y PAGO: formulario POS cohesivo ===== */
.orderForm{ width:100%; max-width:1280px; margin:0 auto; color:var(--ink); }
.orderLayout{ display:grid; grid-template-columns: 1fr 1.35fr 1fr; gap:var(--gap-sec); align-items:start; }
.orderCard{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.orderCard .cardHead{ display:flex; align-items:center; gap:var(--gap-ctl); background:var(--panel,#0f0f0f); color:var(--ink);
	font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:1px; padding:12px 14px; border-bottom:1px solid var(--border); }
.orderCard .cardIcon{ font-size:1.1em; color:var(--accent); }
.orderCard .cardBody{ padding:14px; display:flex; flex-direction:column; gap:12px; }
.orderCard .row{ display:flex; align-items:center; gap:12px; }
.orderCard .lbl{ flex:0 0 40%; color:var(--ink-dim); font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
.orderCard .fld{ flex:1; display:flex; flex-wrap:wrap; gap:var(--gap-ctl); align-items:center; }
.orderCard .fldValue{ color:var(--ink); font-size:1.05em; }

/* Controles uniformes para toda la aplicación */
.orderCard .fld input[type="text"], .orderCard .fld input[type="number"], .orderCard .fld input[type="password"],
.orderCard .fld select,
.searchRow input[type="text"], .searchRow input[type="number"], .searchRow select{ margin-top:0; box-sizing:border-box;
	height:var(--ctrl-h); padding:0 10px; font-size:13px; color:var(--ink); background:var(--bg-panel,#0f0f0f);
	border:1px solid var(--border); border-radius:6px; transition:border-color .15s ease; }
.orderCard .fld input:focus, .orderCard .fld select:focus,
.searchRow input:focus, .searchRow select:focus{ outline:none; border-color:var(--accent); }
.orderCard .fld input:disabled{ background:#1d1d1d; color:var(--ink-soft); border-color:var(--border); }
.orderCard .fld select, .searchRow select{ padding-right:8px; color:var(--ink); }
.orderCard .fld select option, .searchRow select option{ background:#0f0f0f; }

/* Botones: mismos colores, altura, borde, radio y tipografía */
input[type="button"], input[type="submit"], .btn, .btnP, .btnAct{
	box-sizing:border-box; color:#fff; font-family:var(--font); font-size:12px; font-weight:600;
	background:var(--btn-bg); border:1px solid var(--border-strong); border-radius:4px; cursor:pointer;
	transition:background .15s ease, transform .1s ease; }
input[type="button"]:hover, input[type="submit"]:hover, .btn:hover, .btnP:hover, .btnAct:hover{ background:var(--btn-bg-hi); }
input[type="button"]:active, input[type="submit"]:active, .btn:active{ background:var(--btn-bg-active); transform:translateY(1px); }
input[type="button"]:disabled, input[type="submit"]:disabled, .btn:disabled{ background:var(--border); color:var(--ink-dim); cursor:not-allowed; }
.btn{ height:42px; }
.btnP{ height:42px; }

.btnSelect{ width:100%; height:42px; margin:0; padding:0 10px; font-size:11px; text-transform:uppercase;
	background:var(--border); color:var(--ink); border:1px solid var(--border-strong); }
.btnSelect:hover{ background:var(--accent) !important; color:#070; }

.btnPayAll{ height:42px; margin:0; padding:0 14px; font-size:12px; text-transform:uppercase;
	background:var(--btn-bg); color:#fff; border:1px solid var(--accent); }
.btnPayAll:hover{ background:var(--btn-bg-hi); }
.btnPayAll:active{ transform:translateY(1px); }

/* TOTAL principal dentro de la tarjeta de pago */
.totalBox{ text-align:center; padding:16px; margin-bottom:6px; background:#0f0f0f;
	border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:6px; }
.totalBox .totalLbl{ display:block; color:var(--ink-dim); font-size:10px; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:4px; }
.totalBox .totalVal{ font-size:28px; font-weight:800; color:var(--accent); }

.orderCard.pay .payValue{ width:100%; height:42px; font-size:16px; font-weight:700; color:var(--accent); text-align:center; }
.orderCard.pay .changeVal{ color:var(--ink); font-weight:600; }
.orderCard.pay .changeVal.pending, .orderCard.pay .changeVal .pending{ color:var(--warn); }

/* Switch (CheckBox estilizado) */
.orderCard .chkSel input[type="checkbox"]{ -webkit-appearance:none; appearance:none; width:46px; height:24px;
	background:#555; border:1px solid var(--border); border-radius:12px; position:relative; cursor:pointer;
	display:inline-block; vertical-align:middle; transform:none !important; -ms-transform:none !important;
	padding:0; -webkit-transform:none !important; transition:background .18s ease; }
.orderCard .chkSel input[type="checkbox"]::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
	background:#fff; border-radius:50%; transition:left .18s ease; }
.orderCard .chkSel input[type="checkbox"]:checked{ background:var(--accent); }
.orderCard .chkSel input[type="checkbox"]:checked::after{ left:24px; }
.orderCard .switchRow .fld{ gap:10px; }
.orderCard .chkSel span, .orderCard .chkSel label{ color:#e6e6e6; font-size:12px; letter-spacing:.3px;
	-webkit-transform:none; -ms-transform:none; }

/* Footer: botón principal ancho */
.orderFooter{ margin-top:var(--gap-sec); display:flex; align-items:center; gap:var(--gap-sec); }
.orderFooter .btnOK{ flex:1; height:50px; font-size:14px; font-weight:800; letter-spacing:1px;
	background:var(--btn-bg); color:#fff; border:1px solid var(--accent); border-radius:4px; cursor:pointer;
	transition:background .15s ease, transform .1s ease; }
.orderFooter .btnOK:hover{ background:var(--btn-bg-hi); }
.orderFooter .btnOK:disabled{ background:var(--border); cursor:not-allowed; transform:none; }
.orderFooter .btnOK:active{ transform:translateY(1px); }

@media screen and (min-width:1200px){ .orderCard .lbl{ flex:0 0 130px; } }
@media screen and (max-width:900px){
	.orderLayout{ grid-template-columns:1fr; }
	.orderFooter{ flex-direction:column; }
	.prodGrid{ grid-template-columns:repeat(2,1fr); }
}
@media screen and (max-width:560px){
	.prodGrid{ grid-template-columns:1fr; }
	.searchRow{ flex-direction:column; align-items:stretch; }
}
/* =====================================================================
   NAVEGACIÓN RESPONSIVE — Tabs (≥900px) / Bottom Nav (<900px)
   ===================================================================== */
/* Bottom Navigation Bar (oculta en escritorio) */
.bottomNav{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:1000; height:64px;
	background:#1B1B1B; border-top:1px solid var(--border); justify-content:space-around;
	align-items:stretch; box-shadow:0 -2px 10px rgba(0,0,0,.35); padding-bottom:env(safe-area-inset-bottom);
	font-family:var(--font); box-sizing:content-box; }
.bottomNav .bnItem{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:3px; background:transparent; border:none; color:#9a9a9a; cursor:pointer; padding:6px 2px;
	position:relative; font-family:var(--font); transition:color .18s ease; }
.bottomNav .bnIcon{ font-size:24px; line-height:1; transition:transform .18s ease; }
.bottomNav .bnText{ font-size:10px; letter-spacing:.3px; text-transform:uppercase; }
/* Indicador superior luminoso del elemento seleccionado */
.bottomNav .bnItem::before{ content:""; position:absolute; top:0; left:15%; right:15%; height:3px;
	background:var(--accent); border-radius:0 0 3px 3px; opacity:0; transform:scaleX(.4);
	transition:opacity .18s ease, transform .18s ease; }
.bottomNav .bnItem.active{ color:var(--accent); }
.bottomNav .bnItem.active .bnIcon{ transform:translateY(-1px); }
.bottomNav .bnItem.active::before{ opacity:1; transform:scaleX(1); }
.bottomNav .bnItem:active .bnIcon{ transform:scale(.92); }

/* Animación Fade al cambiar de vista */
.ajax__tab_body.tab-fade{ animation:orderFade .18s ease; }
@keyframes orderFade{ from{ opacity:.35; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* ===== FAB "Nueva Orden" (solo móvil) ===== */
.fab{ position:fixed; right:20px; bottom:80px; z-index:1001;
	display:none; align-items:center; justify-content:center;
	width:56px; height:56px; border-radius:12px; box-sizing:border-box;
	background:#FFC107; color:#1B1B1B; border:1px solid #FFD54F;
	font-family:var(--font); font-size:30px; font-weight:700; line-height:1;
	text-decoration:none; cursor:pointer;
	box-shadow:0 4px 12px rgba(0,0,0,.45);
	transition:background .15s ease, transform .1s ease, box-shadow .15s ease; }
.fab:hover{ background:#FFCA2B; }
.fab:active{ background:#F0B400; transform:scale(.94); box-shadow:0 2px 6px rgba(0,0,0,.4); }

/* ===== Responsive switch ===== */
@media (max-width:899px){
	/* Móvil / tablet vertical */
	.topTabs{ display:none; }
	.bottomNav{ display:flex; }
	.ajax__tab_xp .ajax__tab_body{ border:none; padding:12px 10px; }
	#secBody, .dBody{ padding-bottom:80px; }
	.orderFooter .btnOK{ min-height:50px; }
	.fab{ display:flex; }
	.dskOnly, #btnNewOrder{ display:none; }
}
@media (min-width:900px){
	.topTabs{ display:flex; }
	.bottomNav{ display:none !important; }
	.fab{ display:none !important; }
}

/* ===== Login desktop (solo >=900px): centrado vertical y footer abajo ===== */
@media (min-width:900px){
	form:has(.loginPage){ min-height:100vh; display:flex; flex-direction:column; box-sizing:border-box; }
	form:has(.loginPage) .dBody{ flex:1; display:flex; flex-direction:column; }
	form:has(.loginPage) #secBody{ flex:1; display:flex; }
	form:has(.loginPage) .loginPage{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 0; box-sizing:border-box; }
	form:has(.loginPage) .loginPage .lfLogoWrap{ text-align:center; margin-bottom:20px; }
	form:has(.loginPage) .loginPage .lfLogo{ max-width:220px; }
	form:has(.loginPage) .loginPage .lfBrand{ display:block; color:#97BE13; font-weight:700; font-size:16px;
		letter-spacing:.5px; margin-top:6px; }
	form:has(.loginPage) .loginPage .lfTitle{ display:block; text-align:center; font-weight:700; font-size:15px;
		letter-spacing:1px; text-transform:uppercase; margin-bottom:16px; color:#fff; }
	form:has(.loginPage) .loginPage #dLogin{ width:330px; max-width:100%; margin:0 auto; text-align:left;
		box-sizing:border-box; padding:16px 18px; border-radius:8px;
		background:transparent; border:1px solid #3A3A3A; }
	form:has(.loginPage) .loginPage #dLogin table{ width:100%; }
	form:has(.loginPage) .loginPage #dLogin table td{ display:block; text-align:left; }
	form:has(.loginPage) .loginPage #dLogin br{ display:none; }
	form:has(.loginPage) .loginPage #dLogin .lfLabel{ display:block; font-size:12px; text-transform:uppercase;
		letter-spacing:.5px; color:var(--ink-dim); margin:0 0 4px 0; }
	form:has(.loginPage) .loginPage #dLogin .lfLabel::after{ content:none; }
	form:has(.loginPage) .loginPage #dLogin input[type="text"]{ margin-bottom:12px; }
	form:has(.loginPage) .loginPage #dLogin input[type="text"], form:has(.loginPage) .loginPage #dLogin input[type="password"]{
		width:100%; box-sizing:border-box; text-align:left !important; height:38px; padding:5px 8px; }
	form:has(.loginPage) .loginPage #dLogin .lfPass input[type="password"]{ padding:0 44px 0 8px; }
	form:has(.loginPage) .loginPage .lfPass{ position:relative; margin-bottom:12px; }
	form:has(.loginPage) .loginPage .lfEye{ display:flex; align-items:center; justify-content:center; position:absolute;
		top:0; right:0; width:38px; height:38px; padding:0; background:transparent;
		border:none; color:#999; font-size:18px; cursor:pointer; }
	form:has(.loginPage) .loginPage #dLogin input[type="checkbox"]{ display:inline-block; width:auto; height:auto;
		margin:0 6px 0 0; vertical-align:middle; }
	form:has(.loginPage) .loginPage #dLogin label{ display:inline-block; color:var(--ink); font-size:13px;
		vertical-align:middle; }
	form:has(.loginPage) .loginPage #dLogin label br{ display:none; }
	form:has(.loginPage) .loginPage .lfBtn{ width:100%; margin-top:10px; }
	form:has(.loginPage) .Footer{ flex:0 0 auto; }
}

/* ===== Lista de órdenes como tarjetas (solo móvil) ===== */
@media (max-width:899px){
	/* Pull-to-refresh móvil tipo Flutter: pequeño círculo superior, sin texto */
	.ptrIndicator{ position:fixed; top:58px; left:0; right:0; height:0; overflow:visible; z-index:1200;
		display:flex; justify-content:center; pointer-events:none;
		transform:translateY(-8px); transition:transform .2s ease; }
	.ptrIndicator .ptrSpin{ width:28px; height:28px; box-sizing:border-box;
		border:3px solid rgba(0,0,0,0); border-top-color:var(--accent); border-radius:50%;
		background:var(--panel); box-shadow:0 2px 8px rgba(0,0,0,.4);
		opacity:0; transition:opacity .18s ease; }
	.ptrIndicator.pulling .ptrSpin{ opacity:1; }
	.ptrIndicator.refreshing .ptrSpin{ opacity:1; animation:ptrSpin .8s linear infinite; }
	@keyframes ptrSpin{ to{ transform:rotate(360deg); } }

	.gvwCards{ table-layout:fixed; width:100% !important; border:none !important;
		border-collapse:collapse; background:transparent; box-shadow:none; }
	.gvwCards .ListHeader{ display:none; }
	.gvwCards tr{ display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto auto;
		align-items:center; gap:2px 10px; background:#1F1F1F; border:1px solid #3A3A3A;
		border-radius:8px; padding:8px 12px; margin:0 8px 8px 8px; }
	.gvwCards td{ display:block; width:auto !important; padding:0 !important;
		border:none !important; text-align:left !important; }
	.gvwCards td:nth-child(1){ grid-column:1; grid-row:1; font-size:16px; font-weight:800;
		color:#fff; line-height:1.1; }
	.gvwCards td:nth-child(1)::before{ content:"ORDEN ID"; display:block; font-size:9px; font-weight:700;
		color:var(--accent); letter-spacing:1px; margin-bottom:1px; }
	.gvwCards td:nth-child(2){ grid-column:2; grid-row:1; font-size:12px; text-align:right !important;
		color:var(--ink-dim); }
	.gvwCards td:nth-child(2)::before{ content:"◷ "; color:var(--accent); }
	.gvwCards td:nth-child(5){ grid-column:2; grid-row:2; font-size:14px; font-weight:600; color:var(--ink);
		text-align:right !important; }
	.gvwCards td:nth-child(5) .estChip{ font-size:0; line-height:1; }
	.gvwCards td:nth-child(5) .estChip::before{ content:"🏪 " attr(data-val); font-size:14px; font-weight:600;
		color:var(--ink); }
	.gvwCards td:nth-child(5) .estChip[data-val="DOMICILIO"]::before,
	.gvwCards td:nth-child(5) .estChip[data-val^="DOMICILIO"]::before{ content:"🛵 Domicilio"; color:var(--accent); }
	.gvwCards td:nth-child(5) .estChip[data-val="RETIRA_LOC"]::before,
	.gvwCards td:nth-child(5) .estChip[data-val^="RETIRA_LOC"]::before{ content:"🏪 Retiro en el local"; color:var(--accent); }
	.gvwCards td:nth-child(5) .estChip[data-val^="0"]::before,
	.gvwCards td:nth-child(5) .estChip[data-val^="1"]::before,
	.gvwCards td:nth-child(5) .estChip[data-val^="2"]::before,
	.gvwCards td:nth-child(5) .estChip[data-val^="3"]::before,
	.gvwCards td:nth-child(5) .estChip[data-val^="4"]::before,
	.gvwCards td:nth-child(5) .estChip[data-val^="5"]::before,
	.gvwCards td:nth-child(5) .estChip[data-val^="6"]::before,
	.gvwCards td:nth-child(5) .estChip[data-val^="7"]::before,
	.gvwCards td:nth-child(5) .estChip[data-val^="8"]::before,
	.gvwCards td:nth-child(5) .estChip[data-val^="9"]::before{ content:"🍽️ Mesa " attr(data-val); color:var(--ink); }
	.gvwCards td:nth-child(4){ grid-column:1; grid-row:2; font-size:14px; font-weight:600; color:var(--ink);
		text-align:left !important; }
	.gvwCards td:nth-child(3){ grid-column:1; grid-row:3; font-size:12px; font-weight:700;
		text-transform:uppercase; letter-spacing:.5px; }
	.gvwCards td:nth-child(3)::before{ content:"● "; }
	.gvwCards td:nth-child(6){ grid-column:2; grid-row:3; text-align:right !important; }
	.gvwCards td:nth-child(6) input[type="submit"]{ height:42px; min-height:42px; margin:0; padding:0 18px;
		font-size:14px; letter-spacing:.4px; }
}

/* ===== Login móvil (solo mobile) ===== */
@media (max-width:899px){
	.lfLogoWrap{ text-align:center; margin:24px 0 20px 0; }
	.lfLogo{ max-width:110px; margin:0 auto 10px auto; }
	.lfBrand{ display:block; color:var(--accent); font-weight:700; font-size:14px;
		letter-spacing:.8px; text-transform:uppercase; }
	.lfTitle{ display:block; text-align:center; color:#fff; font-weight:700;
		font-size:13px; letter-spacing:1px; text-transform:uppercase; margin-bottom:16px; }

	#dLogin{ position:relative; width:90%; max-width:400px; margin:0 auto 44px auto;
		padding:22px 18px; box-sizing:border-box; text-align:left; border-radius:8px;
		background:#1F1F1F; border:1px solid #3A3A3A; box-shadow:0 10px 28px rgba(0,0,0,.5); }
	#dLogin table{ width:100%; }
	#dLogin table td{ display:flex; flex-direction:column; align-items:stretch; text-align:left; }
	#dLogin br{ display:none; }
	#dLogin .lfLabel{ display:block; font-size:12px; text-transform:uppercase;
		letter-spacing:.5px; color:var(--ink-dim); margin:2px 0 6px 0; }
	#dLogin .lfLabel::after{ content:none; }
	#dLogin .lfPass{ position:relative; margin-bottom:16px; }
	#dLogin input[type="text"], #dLogin input[type="password"]{
		width:100% !important; height:44px; margin:0; box-sizing:border-box;
		text-align:left !important; font-size:15px; padding:0 12px;
		border:1px solid var(--border); border-bottom:solid 2px var(--border-strong);
		border-radius:6px; background:var(--panel); color:#fff; }
	#dLogin input[type="text"]{ margin-bottom:16px; }
	#dLogin .lfPass input[type="password"]{ padding:0 44px 0 12px; }
	#dLogin .lfEye{ display:flex; align-items:center; justify-content:center;
		position:absolute; top:0; right:0; width:44px; height:44px; padding:0;
		background:transparent; border:none; color:var(--ink-dim); font-size:18px;
		cursor:pointer; }
	#dLogin .lfEye.on{ color:var(--accent); }
	#dLogin input[type="checkbox"]{ position:absolute; opacity:0; pointer-events:none; }
	#dLogin label{ display:flex; align-items:center; gap:10px; cursor:pointer;
		padding:8px 2px; margin-bottom:8px; font-size:13px; color:var(--ink); }
	#dLogin label br{ display:none; }
	#dLogin label::before{ content:""; width:22px; height:22px; flex:0 0 22px; border-radius:5px;
		border:1px solid var(--border-strong); background:var(--panel);
		display:flex; align-items:center; justify-content:center; font-size:13px; color:#070; }
	#dLogin input[type="checkbox"]:checked + label::before{ content:"\2713"; background:var(--accent);
		border-color:var(--accent); }
	#dLogin input[type="submit"]{ width:100% !important; height:48px; margin:10px 0 0 0;
		font-size:14px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
		background:var(--btn-bg); border:1px solid var(--accent); border-radius:6px; }
	#dLogin input[type="submit"]:hover{ background:var(--btn-bg-hi); }
	#dLogin input[type="submit"]:active{ background:var(--btn-bg-active); transform:translateY(1px); }
	#dLogin input:focus{ outline:none; border-color:var(--accent); }
}

/* =====================================================================
   CABECERA MÓVIL INDEX — App Bar + Panel de control + Buscador (solo <900px)
   Desktop conserva su estructura original (#secTitle + pnlB inline).
   ===================================================================== */
.mAppBar, .mPageHead, .mSearchIcon, .mAppDrop{ display:none; }
.mSearchBox{ display:block; }
.mSearchDeskLbl{ display:inline; }
.mSearchInput{ }
.mSearchBtn{ }

@media (max-width:899px){
	/* ----- App Bar fijo ----- */
	.mAppBar{ display:flex; align-items:center; gap:8px; position:fixed; top:0; left:0; right:0;
		height:54px; padding:0 10px; box-sizing:border-box; z-index:1100;
		background:#1B1B1B; border-bottom:1px solid var(--border);
		box-shadow:0 2px 10px rgba(0,0,0,.35); font-family:var(--font); }
	.mAppMenu{ width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center;
		background:transparent; border:none; color:var(--ink); font-size:24px; line-height:1;
		padding:0; cursor:pointer; border-radius:8px; }
	.mAppMenu:active{ background:var(--card-hi); }
	.mAppTitle{ flex:1; min-width:0; text-align:center; color:#fff; font-size:15px; font-weight:700;
		letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
	.mAppAvatar{ width:34px; height:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:center;
		background:var(--btn-bg); color:#d6ff9e; border:2px solid var(--accent); border-radius:50%;
		font-size:12px; font-weight:800; letter-spacing:.3px; padding:0; font-family:var(--font);
		line-height:1; cursor:pointer; }
	.mAppAvatar:active{ background:var(--btn-bg-active); }

	/* ----- Dropdown del menú ☰ ----- */
	.mAppDrop{ display:none; position:fixed; top:58px; right:10px; min-width:190px; z-index:1200;
		background:var(--card); border:1px solid var(--border); border-radius:10px;
		box-shadow:0 8px 24px rgba(0,0,0,.5); padding:8px 0; }
	.mAppDrop.open{ display:block; }
	.mAppDropUser{ padding:8px 16px 10px 16px; color:var(--ink-dim); font-size:12px; font-weight:600;
		border-bottom:1px solid var(--border); margin-bottom:6px; }
	.mAppDropItem{ display:block; padding:12px 16px; color:var(--ink); font-size:13px; font-weight:600;
		text-decoration:none; }
	.mAppDropItem:hover{ background:var(--card-hi); color:var(--accent-hi); }

	/* ----- Panel de control ----- */
	.mPageHead{ display:block; padding:18px 16px 2px 16px; }
	.mKicker{ display:block; color:var(--accent); font-size:10px; font-weight:700; letter-spacing:1.4px;
		text-transform:uppercase; margin-bottom:2px; }
	.mTitleRow{ display:flex; align-items:center; gap:10px; }
	.mTitle{ margin:0; font-size:20px; font-weight:700; color:var(--ink); letter-spacing:.3px; }
	.mBadge{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:12px;
		background:#0B3D00; border:1px solid #2F8A00; color:#B9E28A; font-size:11px; font-weight:700;
		letter-spacing:.3px; white-space:nowrap; }

	/* ----- Buscador móvil ----- */
	.mSearchBox{ display:flex; align-items:center; gap:8px; height:48px; margin:12px 16px 0 16px;
		padding:0 12px; box-sizing:border-box; background:var(--card);
		border:1px solid var(--border); border-radius:12px; }
	.mSearchBox:focus-within{ border-color:var(--accent); }
	.mSearchDeskLbl{ display:none; }
	.mSearchIcon{ display:flex; align-items:center; justify-content:center; color:var(--ink-dim);
		font-size:16px; cursor:pointer; }
	.mSearchInput{ flex:1; min-width:0; height:46px; margin:0; padding:0; box-sizing:border-box;
		border:none; background:transparent; color:var(--ink); font-size:14px; }
	.mSearchInput::placeholder{ color:var(--ink-soft); font-style:italic; }
	.mSearchInput:-ms-input-placeholder{ color:var(--ink-soft); font-style:italic; }
	.mSearchInput:focus{ outline:none; border:none; box-shadow:none; }
	.mSearchBtn{ display:none; }
}

/* =====================================================================
   DETALLE DE ORDEN MÓVIL (solo <900px) — tarjetas sobre datos ya cargados.
   Reusa .mAppBar/.mAppMenu/.mAppAvatar y .orderCard/.cardHead/.cardIcon.
   Desktop (>=900px) conserva la grilla: .mobDetail queda display:none.
   ===================================================================== */
.mobDetail{ display:none; }

@media (max-width:899px){
	/* Al leer una orden (mobDetail presente) se oculta la cabecera/grid de escritorio */
	form:has(.mobDetail) #secTitle{ display:none !important; }
	form:has(.mobDetail) #secBody{ padding-top:64px; }
	form:has(.mobDetail) .divTotal,
	form:has(.mobDetail) .ajax__tab_xp{ display:none !important; }

	.mobDetail{ display:block; padding:12px 10px 30px 10px; }

	/* Encabezado de la orden: #nro + estado + hora */
	.mobHead{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
		padding:14px 14px 12px 14px; margin-bottom:12px; }
	.mobHeadTop{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
	.mobNoLabel{ font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
		color:var(--ink-soft); }
	.mobNo{ font-size:22px; font-weight:800; color:var(--ink); letter-spacing:.3px; }
	.mobEstado{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:12px;
		background:#0B3D00; border:1px solid #2F8A00; color:#B9E28A; font-size:11px; font-weight:700;
		letter-spacing:.3px; text-transform:uppercase; white-space:nowrap; }
	.mobHeadTime{ display:flex; align-items:center; gap:6px; margin-top:10px;
		color:var(--ink-dim); font-size:12px; }
	.mobTimeIcon{ color:var(--accent); font-size:14px; }

	/* Cards de detalle */
	.mobCards .orderCard{ margin-bottom:12px; }
	.mobRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
	.mobRowLbl{ flex:0 0 42%; color:var(--ink-dim); font-size:11px; text-transform:uppercase;
		letter-spacing:.5px; padding-top:1px; }
	.mobRowVal{ flex:1; color:var(--ink); font-size:13px; font-weight:600; text-align:right;
		word-break:break-word; }

	/* Filas de productos: nombre izquierda, precio derecha, cantidad debajo */
	.mobProd{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
		padding:10px 0; border-bottom:1px solid var(--border); }
	.mobProd:last-of-type{ border-bottom:none; }
	.mobProdMain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
	.mobProdName{ color:var(--ink); font-size:14px; font-weight:600; line-height:1.25; }
	.mobProdCant{ color:var(--ink-soft); font-size:11px; letter-spacing:.3px; }
	.mobProdPrice{ color:var(--accent); font-size:14px; font-weight:700; white-space:nowrap; }

	/* Total destacado */
	.mobTotal{ display:flex; align-items:baseline; justify-content:space-between;
		padding:14px 2px 2px 2px; }
	.mobTotalLbl{ font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
		color:var(--ink-dim); }
	.mobTotalVal{ font-size:20px; font-weight:800; color:var(--accent); }

	/* Acción volver */
	.mobActions{ margin-top:16px; }
	.mobActions .btnMobBack{ display:flex; align-items:center; justify-content:center;
		width:100%; height:48px; font-size:13px; font-weight:800; letter-spacing:.5px; }
	.mobActions .btnMobBack:hover{ background:var(--btn-bg-hi); }
}