/* One Kosher Buscador 1.0.0
   Todo va dentro de .okb para no pelearse con los estilos del tema. */

.okb{
	--okb-tinta:#0f1e2e;
	--okb-suave:#4a5a6b;
	--okb-linea:#e2e7ec;
	--okb-marca:#003ca6;
	--okb-marca-fuerte:#002d7c;
	--okb-oro:#6b7f00;
	--okb-verde:#1b7a4b;
	--okb-verde-bg:#e8f5ee;
	--okb-ambar:#a8501a;
	--okb-ambar-bg:#fdf0e6;
	--okb-rojo:#a32020;
	--okb-rojo-bg:#fbeaea;
	--okb-verde-marca:#92d400;
	--okb-verde-marca-fuerte:#84c000;
	--okb-verde-texto:#003ca6;
	color:var(--okb-tinta);
	max-width:1060px;
	margin:0 auto;
}
.okb *{box-sizing:border-box}

.okb-titulo{margin:0 0 18px;font-size:1.6em;line-height:1.25}

.okb-tabs{display:flex;gap:4px;border-bottom:1px solid var(--okb-linea);margin:0 0 20px}
.okb nav.okb-tabs button{
	appearance:none;background:none;border:0;border-bottom:3px solid transparent;
	padding:13px 16px;font:inherit;font-weight:600;color:var(--okb-suave);cursor:pointer;
	border-radius:0;
}
.okb nav.okb-tabs button:hover{color:var(--okb-marca);background:none}
.okb nav.okb-tabs button[aria-selected="true"]{color:var(--okb-marca);border-bottom-color:var(--okb-marca)}
.okb-tabs button:focus-visible{outline:2px solid var(--okb-marca);outline-offset:-2px}

.okb-panel[hidden]{display:none}

.okb-search{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.okb-search input[type="search"]{
	flex:1 1 260px;min-width:0;padding:13px 15px;font:inherit;color:var(--okb-tinta);
	border:1px solid var(--okb-linea);border-radius:12px;background:#fff;
	box-shadow:0 1px 2px rgba(15,30,46,.05);
}
.okb-search input[type="search"]:focus{outline:2px solid var(--okb-marca);outline-offset:1px;border-color:var(--okb-marca)}
.okb button.okb-btn{
	padding:13px 22px;font:inherit;font-weight:650;color:#fff;
	background:var(--okb-marca);border:0;border-radius:12px;cursor:pointer;
}
.okb button.okb-btn:hover{background:var(--okb-marca-fuerte);color:#fff}

.okb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.okb .okb-chip{
	padding:7px 13px;border:1px solid var(--okb-linea);background:#fff;border-radius:999px;
	font:inherit;font-size:.9em;color:var(--okb-suave);cursor:pointer;
}
.okb .okb-chip[aria-pressed="true"]{background:var(--okb-marca);border-color:var(--okb-marca);color:#fff}

.okb-meta{font-size:.9em;color:var(--okb-suave);margin:0 0 14px}
.okb-meta strong{color:var(--okb-tinta)}

.okb-lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.okb-card{
	background:#fff;border:1px solid var(--okb-linea);border-radius:14px;padding:16px 18px;
	box-shadow:0 1px 2px rgba(15,30,46,.05),0 8px 24px rgba(15,30,46,.05);margin:0;
}
.okb-card-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.okb-card h3{margin:0;font-size:1.05em;line-height:1.35;font-weight:650;color:var(--okb-tinta)}
.okb-marca{
	margin:0 0 3px;font-size:.78em;letter-spacing:.06em;text-transform:uppercase;
	color:var(--okb-oro);font-weight:650;
}
.okb-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:12px 0 0;font-size:.9em}
.okb-card dt{color:var(--okb-suave);margin:0}
.okb-card dd{margin:0}
.okb-folio{font-variant-numeric:tabular-nums}

.okb-badges{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.okb-badge{font-size:.78em;font-weight:650;padding:4px 10px;border-radius:999px;white-space:nowrap;line-height:1.5}
.okb-b-neutro{background:#eef3f7;color:var(--okb-marca)}
.okb-b-vigente{background:var(--okb-verde-bg);color:var(--okb-verde)}
.okb-b-porvencer{background:var(--okb-ambar-bg);color:var(--okb-ambar)}
.okb-b-vencido{background:var(--okb-rojo-bg);color:var(--okb-rojo)}

.okb-link{
	display:inline-block;margin-top:12px;font-size:.9em;font-weight:600;
	color:var(--okb-marca);text-decoration:none;
}
.okb-link:hover{text-decoration:underline;color:var(--okb-marca-fuerte)}
.okb-ligas{display:flex;gap:18px;flex-wrap:wrap}

.okb-pager{display:flex;justify-content:center;align-items:center;gap:10px;margin:22px 0 0}
.okb .okb-pager button{
	padding:10px 16px;font:inherit;background:#fff;border:1px solid var(--okb-linea);
	border-radius:10px;cursor:pointer;color:var(--okb-tinta);
}
.okb-pager button:disabled{opacity:.45;cursor:default}
.okb-pager span{font-size:.9em;color:var(--okb-suave)}

.okb-estado{
	background:#fff;border:1px dashed var(--okb-linea);border-radius:14px;
	padding:34px 20px;text-align:center;color:var(--okb-suave);font-size:.95em;
}
.okb-estado strong{display:block;color:var(--okb-tinta);font-size:1.05em;margin-bottom:6px}
.okb-error{border-color:#eec9c9;background:var(--okb-rojo-bg);color:#7d1d1d}
.okb-spinner{
	display:block;width:20px;height:20px;margin:0 auto 12px;border-radius:50%;
	border:2.5px solid #cdd8e1;border-top-color:var(--okb-marca);
	animation:okb-giro .7s linear infinite;
}
@keyframes okb-giro{to{transform:rotate(360deg)}}

@media (max-width:560px){
	.okb-card dl{grid-template-columns:1fr;gap:2px}
	.okb-card dt{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
	.okb-spinner{animation:none}
}

.okb-nota{display:block;margin-top:3px;font-size:.85em;color:var(--okb-suave);opacity:.85}

/* ---------- Acceso rapido en el celular ---------- */
.okb-app{
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;
	background:#f2f6f9;border:1px solid var(--okb-linea);border-radius:14px;
	padding:12px 14px;margin:0 0 18px;
}
.okb-app[hidden]{display:none}
.okb-app-icono{width:44px;height:44px;border-radius:10px;flex:0 0 auto;display:block}
.okb-app-texto{flex:1 1 180px;min-width:0;line-height:1.35}
.okb-app-texto strong{display:block;font-size:.95em;color:var(--okb-tinta)}
.okb-app-texto span{font-size:.85em;color:var(--okb-suave)}
.okb button.okb-app-btn{
	flex:0 0 auto;padding:11px 18px;font:inherit;font-weight:700;font-size:.9em;
	color:var(--okb-verde-texto);background:var(--okb-verde-marca);
	border:0;border-radius:10px;cursor:pointer;
}
.okb button.okb-app-btn:hover{background:var(--okb-verde-marca-fuerte);color:var(--okb-verde-texto)}
.okb button.okb-app-btn:disabled{opacity:.6;cursor:default}

.okb-modal{
	position:fixed;inset:0;z-index:99999;display:flex;align-items:flex-end;justify-content:center;
	background:rgba(8,20,32,.55);padding:0;
}
.okb-modal[hidden]{display:none}
.okb-modal-caja{
	position:relative;background:#fff;width:100%;max-width:460px;
	border-radius:18px 18px 0 0;padding:26px 22px calc(26px + env(safe-area-inset-bottom,0px));
	max-height:88vh;overflow-y:auto;
}
.okb-modal-caja h3{margin:0 0 14px;font-size:1.15em;color:var(--okb-tinta);padding-right:30px}
.okb-modal-x{
	position:absolute;top:10px;right:12px;width:36px;height:36px;font-size:24px;line-height:1;
	background:none;border:0;color:var(--okb-suave);cursor:pointer;border-radius:50%;
}
.okb-modal-x:hover{background:#f0f3f6;color:var(--okb-tinta)}
.okb-modal-tabs{display:flex;gap:4px;border-bottom:1px solid var(--okb-linea);margin:0 0 16px}
.okb-modal-tabs button{
	appearance:none;background:none;border:0;border-bottom:3px solid transparent;
	padding:9px 14px;font:inherit;font-size:.9em;font-weight:600;color:var(--okb-suave);cursor:pointer;
}
.okb-modal-tabs button[aria-selected="true"]{color:var(--okb-marca);border-bottom-color:var(--okb-marca)}
.okb-pasos{margin:0;padding-left:22px}
.okb-pasos[hidden]{display:none}
.okb-pasos li{margin:0 0 12px;font-size:.95em;line-height:1.5}
.okb-pasos strong{color:var(--okb-marca)}
.okb-modal-nota{margin:16px 0 0;font-size:.82em;color:var(--okb-suave);line-height:1.5}

@media (min-width:600px){
	.okb-modal{align-items:center;padding:20px}
	.okb-modal-caja{border-radius:18px}
}

.okb-paso-img{
	display:block;margin:10px 0 4px;width:100%;max-width:300px;height:auto;
	border:1px solid var(--okb-linea);border-radius:12px;
	box-shadow:0 2px 10px rgba(15,30,46,.08);
}

.okb-app-qr{
	width:150px;height:150px;flex:0 0 auto;display:block;
	border:1px solid var(--okb-linea);border-radius:14px;background:#fff;padding:8px;
	box-shadow:0 2px 10px rgba(0,60,166,.08);
}
/* En computadora el aviso respira mas, porque el QR manda */
.okb-app-escritorio{gap:18px;padding:16px 18px;align-items:center}
.okb-app-escritorio .okb-app-texto strong{font-size:1.05em;margin-bottom:2px}
.okb-app-escritorio .okb-app-texto span{font-size:.9em;max-width:42ch;display:block}
.okb-app-qr[hidden]{display:none}
.okb button.okb-app-btn-sec{background:#fff;color:var(--okb-marca);border:1px solid var(--okb-marca);font-weight:600}
.okb button.okb-app-btn-sec:hover{background:var(--okb-marca);color:#fff}
