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; }
.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; }

/* 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: 10px; 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; }
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; }

#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; }

.divProcesando { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 9999;
	background: rgba(0,0,0,0.88); color: #fff; border: solid 1px #6ecc43; border-radius: 6px;
	padding: 8px 16px; font-size: 0.9em; }
.spinnerProcesando { display: inline-block; width: 14px; height: 14px; vertical-align: middle;
	border: 2px solid #6ecc43; border-top-color: transparent; border-radius: 50%;
	animation: spinProcesando 0.8s linear infinite; }
@keyframes spinProcesando { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.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; }
	#dLogin img {max-width:200px; margin:10px 0; }
.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 { height:50px; line-height:30px; font-size: 1em;}
.pnlButtons { margin-bottom: 10px; }
.tabForm { text-align: left; }
.tdL { text-align: right; background: #333; width:30%; padding: 5px; }
.ctlP { width: 100px; }
.ctlN { width: 180px; }
.ctlG { width: 300px; }
#divName { font-weight:bold; }
/*.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; }

.ajaxCal .ajax__calendar_container   {
background-color: #333;
border:solid 1px #fff;
}
.ajaxCal .ajax__calendar_container, .ajaxCal .ajax__calendar_body {width: 210px; }
.ajaxCal .ajax__calendar_body { height: 190px; }
.ajaxCal .ajax__calendar_container { height: 240px; }
.ajaxCal .ajax__calendar_day { color:#080;  font-size: 14px; padding: 5px; border: solid 1px #444; }
.ajaxCal .ajax__calendar_invalid .ajax__calendar_day { color:#555; text-decoration:line-through;}
.ajaxCal .ajax__calendar_other .ajax__calendar_day { color:#585; }

@media screen and (min-width:600px) {
	.T12 { font-size:1em;}
	.T16  { font-size:1.6em;}
	#secTitle { height:35px; width:99%; padding:10px; }
	.dtgQ { width:80%; }
	.tdL { width:25%; }
	select { width: 50%; }
}

/* Screen > 760 */
@media screen and (min-width:760px) {
	body, table { font-size: 100%; /*ampliar a más tamaño*/ }
	#secTitle { width:97%; }
	#divHome { width:6%; }
	#divTitle { width:76%; }
	#mainMenu { width: 10%; }
	#mainMenu a { font-size:1em; }
	.dAd { margin-bottom: 5px; }
	.dAd img { max-height:200px; }
	#secBody {display:block; }
	#secBodyL {display:inline-block; width:45%; margin-right:3%; vertical-align:top; }
	#secBodyR {display:inline-block; width:47%; margin-right:3%; vertical-align:top; }
	.dTitleBar {font-size:1.0em; margin-top:15px; }
	.ctlP { width: 150px; }
	.ctlN { width: 300px; }
	.ctlG { width: 500px; }
	.dtgQ { width:60%; }
	input[type="button"], input[type="submit"]{padding:6px 10px;}
	.dBody {}
	.btnAct { width: 500px; }
}

/* Screen > 1200px */
@media screen and (min-width:1200px) {
	body, table { }
	#secTitle { width:100%; }
	#dLogin { margin-top: 50px; }
}

/* =====================================================================
   TOKENS DE DISEÑO — identidad visual compartida con el módulo Waiter.
   Solo se consumen en los estilos <900px; Desktop conserva su CSS actual.
   ===================================================================== */
: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;
	--btn-bg:#0b5b00;
	--btn-bg-hi:#0d7a00;
	--btn-bg-active:#085700;
	--danger:#c0392b;
	--warn:#e8a23a;
	--radius:8px;
	--font:'Segoe UI', Tahoma, 'Monda', sans-serif;
}

/* Estructuras móviles ocultas en Desktop */
.mAppBar, .mSearchBox, .mSearchIcon, .mAppDrop{ display:none; }

/* =====================================================================
   RESPONSIVE <900px — Gestión de Órdenes estilo Waiter.
   App Bar + panel de información + buscador + órdenes como tarjetas.
   Desktop (>=900px) conserva intacto su diseño actual.
   ===================================================================== */
@media (max-width:899px){
	.dskOnly{ display:none !important; }

	/* ----- 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 información (usuario / estación / filtros) ----- */
	.mInfoPanel{ padding:14px 16px; margin:8px 0 0 0; background:var(--card);
		border:1px solid var(--border); border-radius:var(--radius); }
	.mInfoGreet{ font-size:13px; font-weight:700; color:var(--accent); line-height:1.5; }
	.mInfoDate{ display:block; margin-top:2px; color:var(--ink-dim); font-size:12px; font-weight:400; }
	.mInfoRow{ margin-top:12px; display:flex; flex-direction:column; align-items:stretch; gap:10px; }
	.mInfoChk{ display:flex; align-items:center; gap:8px; color:var(--ink); font-size:13px; }
	.mInfoChk input[type="checkbox"]{ width:18px; height:18px; margin:0; accent-color:var(--accent); }
	.mInfoRow .btn{ width:100%; height:44px; min-height:44px; margin:0; font-size:13px; font-weight:800;
		letter-spacing:.4px; text-transform:uppercase; background:var(--btn-bg);
		border:1px solid var(--accent); border-radius:6px; }
	.mInfoErr{ margin-top:2px; }

	/* ----- 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; }

	/* Ajuste de especificidad: el selector global input[type="text"] (bg/padding/borde)
	   no debe tocar el buscador móvil */
	.mSearchBox input.mSearchInput{ background:transparent !important; border-bottom:none !important; padding:0 !important; }

	/* ----- Pull-to-refresh móvil (igual a Waiter) ----- */
	.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); } }

	/* ----- Listado de órdenes como tarjetas (Grid + Flexbox responsive) ----- */
	.gvwCards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:0;
		padding:12px 4px 4px 4px; width:100% !important; margin:0; border:none !important;
		background:transparent; box-sizing:border-box; }
	.gvwCards tbody, .gvwCards thead{ display:contents; }
	.gvwCards .ListHeader{ display:none; }
	.gvwCards tr{ display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto auto auto auto;
		align-items:center; gap:2px 12px; background:#1F1F1F; border:1px solid #3A3A3A;
		border-radius:8px; padding:12px; margin:0 4px 8px 4px; box-sizing:border-box; }
	.gvwCards td{ display:block; width:auto !important; padding:0; border:none;
		text-align:left; height:auto; line-height:1.4; }
	.gvwCards td[colspan]{ grid-column:1/-1; padding:16px 8px !important; text-align:center !important;
		color:var(--ink-dim); }

	/* ORDEN + ESTADO (badge dinámico, color según estado existente) */
	.gvwCards .ocNro{ grid-column:1; grid-row:1; font-size:16px; font-weight:800; color:#fff; line-height:1.2; }
	.gvwCards .ocNro::before{ content:"ORDEN"; display:block; font-size:9px; font-weight:700;
		color:var(--accent); letter-spacing:1px; margin-bottom:1px; }
	.gvwCards .ocEstado{ grid-column:2; grid-row:1; justify-self:end; display:inline-flex; align-items:center;
		padding:3px 10px; border-radius:12px; background:#0B3D00; border:1px solid #2F8A00;
		font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; white-space:nowrap;
		color:#fff !important; }
	.gvwCards .ocEstado::before{ content:"● "; font-size:9px; color:var(--accent); }

	/* FECHA / ITEMS PENDIENTES */
	.gvwCards .ocFecha{ grid-column:1; grid-row:2; font-size:13px; font-weight:600; color:var(--ink); }
	.gvwCards .ocFecha::before{ content:"FECHA"; display:block; font-size:9px; font-weight:700;
		color:var(--accent); letter-spacing:1px; margin-bottom:1px; }
	.gvwCards .ocPend{ grid-column:2; grid-row:2; justify-self:end; text-align:right !important;
		font-size:13px; font-weight:600; color:var(--ink); }
	.gvwCards .ocPend::before{ content:"ITEMS PEND."; display:block; font-size:9px; font-weight:700;
		color:var(--accent); letter-spacing:1px; margin-bottom:1px; text-align:right; }

	/* CLIENTE / ESTACIÓN */
	.gvwCards .ocCliente{ grid-column:1/-1; grid-row:3; font-size:14px; font-weight:600; color:var(--ink);
		white-space:normal; overflow-wrap:break-word; word-break:break-word; }
	.gvwCards .ocCliente::before{ content:"CLIENTE"; display:block; font-size:9px; font-weight:700;
		color:var(--accent); letter-spacing:1px; margin-bottom:1px; }
	.gvwCards .ocEst{ grid-column:1/-1; grid-row:4; font-size:13px; font-weight:600; color:var(--ink);
		white-space:normal; overflow-wrap:break-word; word-break:break-word; }
	.gvwCards .ocEst::before{ content:"ESTACIÓN"; display:block; font-size:9px; font-weight:700;
		color:var(--accent); letter-spacing:1px; margin-bottom:1px; }

	/* Rápido y Registrado por: información de escritorio, se ocultan en cards compactas */
	.gvwCards .ocRapido{ display:none; }
	.gvwCards .ocUser{ display:none; }

	/* Botón ABRIR touch-friendly */
	.gvwCards .ocAct{ grid-column:1/-1; grid-row:5; margin-top:6px; padding-top:8px;
		border-top:1px solid var(--border); }
	.gvwCards .ocAct input[type="submit"]{ width:100%; min-height:42px; height:42px; margin:0; padding:0;
		font-size:13px; font-weight:800; letter-spacing:.5px; background:var(--btn-bg);
		border:1px solid var(--border-strong); border-radius:6px; }
}