/* =========================================================================
   B2B Export Directory — estilos (responsive, mobile-first)
   Usa variables del tema con valores de respaldo.
   ========================================================================= */
:root {
	--b2b-primary: #0e6e5c;
	--b2b-primary-d: #0a5042;
	--b2b-accent: #e8a33d;
	--b2b-ink: #14201c;
	--b2b-muted: #5b6b65;
	--b2b-surface: #ffffff;
	--b2b-bg: #f4f6f4;
	--b2b-border: #e2e8e4;
	--b2b-radius: 14px;
	--b2b-shadow: 0 1px 2px rgba(20,32,28,.06), 0 8px 24px rgba(20,32,28,.06);
}

.b2b-directory, .b2b-auth, .b2b-profile, .b2b-single, .b2b-dash__header {
	color: var(--b2b-ink);
	max-width: 1100px;
	margin-inline: auto;
}

/* ---------- Botones ---------- */
.b2b-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	padding: .7rem 1.25rem;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.b2b-btn:hover { transform: translateY(-1px); }
.b2b-btn:focus-visible { outline: 3px solid var(--b2b-accent); outline-offset: 2px; }
.b2b-btn--primary { background: var(--b2b-primary); color: #fff; }
.b2b-btn--primary:hover { background: var(--b2b-primary-d); color: #fff; }
.b2b-btn--ghost { background: transparent; color: var(--b2b-primary); border-color: var(--b2b-border); }
.b2b-btn--ghost:hover { border-color: var(--b2b-primary); }
.b2b-btn--sm { padding: .45rem .85rem; font-size: .85rem; }

/* ---------- Avisos ---------- */
.b2b-notice { padding: .85rem 1.1rem; border-radius: 10px; margin: 1rem 0; font-size: .95rem; border:1px solid var(--b2b-border); }
.b2b-notice ul { margin: 0; padding-left: 1.2rem; }
.b2b-notice--success { background: #eaf7ef; border-color:#bfe6cd; color:#1c6b3f; }
.b2b-notice--error { background: #fdecec; border-color:#f5c2c2; color:#a32424; }
.b2b-notice--info { background: #eef3fb; border-color:#cdddf2; color:#28527a; }

/* ---------- Formularios ---------- */
.b2b-form { display: block; }
.b2b-field { margin-bottom: 1rem; display:flex; flex-direction:column; gap:.35rem; }
.b2b-field label { font-weight: 600; font-size: .9rem; }
.b2b-form input[type="text"],
.b2b-form input[type="email"],
.b2b-form input[type="url"],
.b2b-form input[type="password"],
.b2b-form input[type="search"],
.b2b-form input[type="tel"],
.b2b-form textarea,
.b2b-form select {
	width: 100%;
	padding: .7rem .85rem;
	border: 1.5px solid var(--b2b-border);
	border-radius: 10px;
	font: inherit;
	background: var(--b2b-surface);
	color: var(--b2b-ink);
}
.b2b-form input:focus, .b2b-form textarea:focus, .b2b-form select:focus {
	outline: none;
	border-color: var(--b2b-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--b2b-primary) 18%, transparent);
}
.b2b-help { color: var(--b2b-muted); font-size: .85rem; margin:.2rem 0 .6rem; }
.b2b-grid2 { display:grid; grid-template-columns: 1fr; gap: 0 1rem; }
.b2b-form__actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }

.b2b-card {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-border);
	border-radius: var(--b2b-radius);
	padding: 1.25rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--b2b-shadow);
}
.b2b-card h3 { margin: 0 0 1rem; font-size: 1.1rem; }

/* ---------- Auth ---------- */
.b2b-auth { max-width: 440px; }
.b2b-auth__title { margin-bottom:.25rem; }
.b2b-auth__sub { color: var(--b2b-muted); margin-top:0; }
.b2b-auth__alt { margin-top: 1rem; font-size:.9rem; color:var(--b2b-muted); }
.b2b-roleselect { border:0; padding:0; margin:0 0 1.25rem; display:grid; gap:.6rem; }
.b2b-roleselect legend { font-weight:600; margin-bottom:.5rem; padding:0; }
.b2b-rolecard { display:flex; gap:.7rem; align-items:flex-start; border:1.5px solid var(--b2b-border); border-radius:12px; padding:.85rem 1rem; cursor:pointer; }
.b2b-rolecard:has(input:checked) { border-color: var(--b2b-primary); background: color-mix(in srgb, var(--b2b-primary) 6%, transparent); }
.b2b-rolecard input { margin-top:.25rem; }
.b2b-rolecard__body { display:flex; flex-direction:column; }
.b2b-rolecard__body small { color: var(--b2b-muted); }

/* ---------- Dashboard ---------- */
.b2b-dash__header { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.b2b-dash__header h2 { margin:0; }

/* ---------- Checkgrid / chips ---------- */
.b2b-checkgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:.5rem; }
.b2b-chip-check { display:flex; align-items:center; gap:.5rem; border:1.5px solid var(--b2b-border); border-radius:999px; padding:.45rem .85rem; cursor:pointer; font-size:.9rem; }
.b2b-chip-check:has(input:checked) { border-color: var(--b2b-primary); background: color-mix(in srgb, var(--b2b-primary) 8%, transparent); font-weight:600; }
.b2b-chip-check input { accent-color: var(--b2b-primary); }

/* ---------- Productos (editor) ---------- */
.b2b-product { border:1.5px dashed var(--b2b-border); border-radius:12px; padding:1rem; margin-bottom:1rem; }
.b2b-product--hidden { display:none; }
.b2b-product__head { display:flex; gap:.6rem; align-items:center; margin-bottom:.6rem; }
.b2b-product__num { flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--b2b-primary); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9rem; }
.b2b-product__head input { flex:1; }
.b2b-product__imgs { display:grid; grid-template-columns: repeat(3, 1fr); gap:.6rem; margin-top:.6rem; }
.b2b-imgslot { border:1px solid var(--b2b-border); border-radius:10px; padding:.5rem; text-align:center; }
.b2b-imgslot img, .b2b-preview { width:100%; height:80px; object-fit:cover; border-radius:6px; margin-bottom:.4rem; display:block; }
.b2b-imgslot input[type="file"] { font-size:.75rem; width:100%; }
.b2b-logo-preview { max-width:120px; border-radius:10px; border:1px solid var(--b2b-border); margin-bottom:.5rem; }

/* ---------- Directorio: filtros ---------- */
.b2b-filterbar { margin-bottom:1.25rem; }
.b2b-filterbar__search { display:grid; grid-template-columns: 1fr; gap:.6rem; margin-bottom:.9rem; }
.b2b-catscroll { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.4rem; -webkit-overflow-scrolling:touch; }
.b2b-cat-pill { white-space:nowrap; border:1.5px solid var(--b2b-border); border-radius:999px; padding:.45rem .9rem; font-size:.85rem; text-decoration:none; color:var(--b2b-ink); background:var(--b2b-surface); }
.b2b-cat-pill.is-active { background:var(--b2b-primary); color:#fff; border-color:var(--b2b-primary); }
.b2b-results-count { color:var(--b2b-muted); font-size:.9rem; margin:.5rem 0 1rem; }

/* ---------- Directorio: grid de tarjetas ---------- */
.b2b-grid { display:grid; grid-template-columns: 1fr; gap:1.1rem; }
.b2b-card-co { display:flex; flex-direction:column; background:var(--b2b-surface); border:1px solid var(--b2b-border); border-radius:var(--b2b-radius); overflow:hidden; text-decoration:none; color:var(--b2b-ink); box-shadow:var(--b2b-shadow); transition:transform .15s ease, box-shadow .2s ease; }
.b2b-card-co:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(20,32,28,.12); }
.b2b-card-co__media { position:relative; aspect-ratio: 16/10; background: color-mix(in srgb, var(--b2b-primary) 8%, #fff); display:grid; place-items:center; }
.b2b-card-co__media img { width:100%; height:100%; object-fit:cover; }
.b2b-card-co__placeholder { font-size:2.5rem; font-weight:800; color:var(--b2b-primary); }
.b2b-badge { position:absolute; top:.6rem; left:.6rem; background:var(--b2b-surface); color:var(--b2b-primary); font-size:.72rem; font-weight:700; padding:.25rem .55rem; border-radius:999px; box-shadow:var(--b2b-shadow); }
.b2b-card-co__body { padding:1rem; display:flex; flex-direction:column; gap:.45rem; }
.b2b-card-co__title { margin:0; font-size:1.05rem; }
.b2b-card-co__loc { margin:0; font-size:.85rem; color:var(--b2b-muted); }
.b2b-card-co__offer { margin:0; font-size:.9rem; color:var(--b2b-muted); }
.b2b-card-co__cats { display:flex; flex-wrap:wrap; gap:.35rem; }
.b2b-tag { font-size:.75rem; background: color-mix(in srgb, var(--b2b-primary) 10%, #fff); color:var(--b2b-primary-d); padding:.2rem .55rem; border-radius:999px; text-decoration:none; }
.b2b-tag--cert { background: color-mix(in srgb, var(--b2b-accent) 18%, #fff); color:#8a5a12; }

.b2b-empty { text-align:center; padding:2.5rem 1rem; }
.b2b-pagination { display:flex; gap:.4rem; justify-content:center; margin-top:1.5rem; flex-wrap:wrap; }
.b2b-pagination .page-numbers { padding:.45rem .8rem; border:1px solid var(--b2b-border); border-radius:8px; text-decoration:none; color:var(--b2b-ink); }
.b2b-pagination .current { background:var(--b2b-primary); color:#fff; border-color:var(--b2b-primary); }

/* ---------- Ficha individual ---------- */
.b2b-single__meta { display:flex; flex-wrap:wrap; gap:1rem; color:var(--b2b-muted); margin-bottom:.85rem; }
.b2b-single__meta a { color:var(--b2b-primary); text-decoration:none; }
.b2b-single__about { margin:1rem 0 1.5rem; }
.b2b-specs { display:grid; grid-template-columns: auto 1fr; gap:.4rem 1rem; margin:.8rem 0 0; }
.b2b-specs dt { font-weight:600; color:var(--b2b-muted); }
.b2b-specs dd { margin:0; }
.b2b-prodgrid { display:grid; grid-template-columns: 1fr; gap:1.1rem; }
.b2b-prod { border:1px solid var(--b2b-border); border-radius:12px; padding:1rem; }
.b2b-prod__gallery { display:grid; grid-template-columns: repeat(3, 1fr); gap:.4rem; margin-bottom:.7rem; }
.b2b-prod__gallery img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; }
.b2b-prod h4 { margin:.2rem 0; }
.b2b-prod p { margin:0; color:var(--b2b-muted); font-size:.9rem; }

/* ---------- Leads ---------- */
.b2b-leads { list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.b2b-lead { border:1px solid var(--b2b-border); border-radius:10px; padding:.9rem 1rem; }
.b2b-lead__top { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:.9rem; margin-bottom:.4rem; }
.b2b-lead__top time { margin-left:auto; color:var(--b2b-muted); font-size:.8rem; }

/* ---------- Responsive: tablet ---------- */
@media (min-width: 640px) {
	.b2b-grid2 { grid-template-columns: 1fr 1fr; }
	.b2b-filterbar__search { grid-template-columns: 2fr 1fr auto; }
	.b2b-grid { grid-template-columns: repeat(2, 1fr); }
	.b2b-prodgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Responsive: laptop ---------- */
@media (min-width: 1000px) {
	.b2b-grid { grid-template-columns: repeat(3, 1fr); }
	.b2b-prodgrid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Accesibilidad: movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
	.b2b-btn, .b2b-card-co { transition: none; }
	.b2b-btn:hover, .b2b-card-co:hover { transform: none; }
}