/* ==========================================================================
   MegaImporter · Directorio de mayoristas
   (archivo /mayoristas/, sectores y fichas). Usa las variables de base.css.
   --------------------------------------------------------------------------
   1. Cabeceras (hero del archivo y cabecera de sector/ficha) y migas
   2. Cifras
   3. Aviso, buscador y chips de sector
   4. Grupos y cuadrícula de tarjetas
   5. Tarjeta de mayorista
   6. Ficha: estructura con ficha rápida
   7. Ficha: texto, pasos, CTA intermedio, enlaces a plataformas
   8. Secciones del archivo (proveedor que no aparece, cómo encaja)
   9. Sector: cuenta, otros sectores, volver
   10. Similares y avisos
   11. Responsive (999.98px y 689.98px)
   ========================================================================== */

.mi-dir {
	font-family: var(--mi-cuerpo);
	color: var(--mi-texto);
}
.mi-dir a {
	color: var(--mi-azul-texto);
}
.mi-dir a:hover {
	color: var(--mi-navy);
}
.mi-dir .mi-btn--pri,
.mi-dir .mi-btn--pri:hover,
.mi-dir .mi-btn--sec,
.mi-dir a.mi-tag {
	color: var(--mi-navy);
}
.mi-dir .mi-btn--sec:hover,
.mi-dir .mi-btn--claro {
	color: var(--mi-blanco);
}
.mi-dir .mi-btn--claro:hover {
	color: var(--mi-navy);
}
.mi-dir h2,
.mi-dir h3 {
	letter-spacing: normal;
}

/* 1. Cabeceras y migas ===================================================== */
.mi-hero {
	padding-block: clamp(56px, 7vw, 88px) clamp(48px, 6vw, 64px);
	background: var(--mi-fondo);
	border-bottom: 1px solid var(--mi-borde);
}
.mi-hero__col {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.mi-hero__txt {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 900px;
}
.mi-cab {
	padding-block: clamp(32px, 4vw, 48px) clamp(40px, 5vw, 56px);
	background: var(--mi-fondo);
	border-bottom: 1px solid var(--mi-borde);
}
.mi-cab__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.mi-cab__fila {
	display: flex;
	align-items: center;
	gap: 24px;
}
.mi-cab__txt {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.mi-cab .mi-tag {
	background: var(--mi-blanco);
	font-size: 14px;
	line-height: 20px;
	padding: 4px 10px;
}
.mi-cab .mi-tag--ds {
	background: var(--mi-navy);
}
.mi-sector .mi-h1 {
	max-width: 900px;
}
.mi-av--xl {
	position: relative;
	width: 96px;
	height: 96px;
	font-size: 32px;
}
.mi-av__px {
	position: absolute;
	right: -4px;
	bottom: 6px;
	width: 10px;
	height: 10px;
	background: var(--mi-azul);
	box-shadow: 12px -12px 0 var(--mi-navy);
}
.mi-migas ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	line-height: 20px;
	color: var(--mi-sec);
}
.mi-migas li {
	margin: 0;
}
.mi-migas a {
	display: inline-block;
	padding: 12px 0;
}
.mi-migas [aria-current="page"] {
	color: var(--mi-texto);
	font-weight: 500;
}
.mi-aviso-corto {
	margin: 4px 0 0;
	max-width: 860px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 22px;
	color: var(--mi-sec);
}
.mi-aviso-corto svg {
	flex: none;
	margin-top: 2px;
}
.mi-aviso-corto strong {
	font-weight: 600;
	color: var(--mi-texto);
}

/* 2. Cifras ================================================================ */
.mi-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.mi-stat {
	background: var(--mi-blanco);
	border: 1px solid var(--mi-borde);
	border-radius: var(--mi-radio);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mi-stat b {
	font-family: var(--mi-titulo);
	font-weight: 700;
	font-size: 32px;
	line-height: 38px;
	color: var(--mi-navy);
	letter-spacing: -0.01em;
}
.mi-stat span {
	font-size: 15px;
	line-height: 22px;
	color: var(--mi-sec);
}

/* 3. Aviso, buscador y chips ============================================== */
.mi-filtros {
	padding-top: clamp(40px, 5vw, 56px);
}
.mi-filtros__col,
.mi-filtros__controles {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.mi-filtros__col {
	gap: 24px;
}
.mi-nota {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 18px 22px;
	border-radius: 12px;
	background: var(--mi-fondo);
	border: 1px solid var(--mi-borde);
}
.mi-nota svg {
	flex: none;
	margin-top: 1px; /* (24 px de línea - 22 px de icono) / 2 */
}
.mi-nota p {
	margin: 0;
	font-size: 15px;
	line-height: 24px;
}
.mi-nota strong {
	font-weight: 600;
	color: var(--mi-navy);
}
.mi-buscar {
	margin: 0;
	max-width: 420px;
}
.mi-buscar__caja {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--mi-sec);
	border-radius: 10px;
	background: var(--mi-blanco);
}
.mi-buscar__caja:focus-within {
	border-color: var(--mi-navy);
	box-shadow: 0 0 0 3px rgba(2, 178, 254, 0.35);
}
.mi-buscar__caja svg {
	flex: none;
}
.mi-buscar__caja input[type="search"] {
	flex: 1;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 12px 0;
	border: 0;
	outline: 0;
	box-shadow: none;
	background: transparent;
	font: 400 16px/24px var(--mi-cuerpo);
	color: var(--mi-texto);
}
.mi-buscar__caja input::placeholder {
	color: var(--mi-sec);
	opacity: 1;
}
.mi-dir a.mi-chip,
.mi-dir a.mi-chip:hover {
	color: var(--mi-navy);
}
.mi-dir a.mi-chip.is-on,
.mi-dir a.mi-chip.is-on:hover {
	color: var(--mi-blanco);
}
.mi-estado {
	margin: 0;
	min-height: 22px;
	font-size: 14px;
	line-height: 22px;
	color: var(--mi-sec);
}

/* 4. Grupos y cuadrícula =================================================== */
.mi-listado {
	padding-block: clamp(40px, 5vw, 56px) clamp(64px, 8vw, 96px);
}
.mi-grupos {
	display: flex;
	flex-direction: column;
	gap: 56px;
}
.mi-grupo {
	display: flex;
	flex-direction: column;
	gap: 20px;
	scroll-margin-top: 24px;
}
.mi-grupo[hidden],
.mi-may[hidden],
.mi-vacio[hidden] {
	display: none;
}
.mi-grupo__cab {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mi-borde);
}
.mi-grupo__cab h2 {
	margin: 0;
	font-family: var(--mi-titulo);
	font-weight: 700;
	font-size: clamp(22px, 0.6vw + 18px, 26px);
	line-height: 1.3;
	color: var(--mi-navy);
}
.mi-grupo__cab a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-weight: 600;
	font-size: 15px;
}
.mi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}
.mi-grid--4 {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.mi-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mi-grid--4c {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mi-grid--4c .mi-may {
	padding: 22px;
}
.mi-grid--4c .mi-av {
	width: 48px;
	height: 48px;
	font-size: 17px;
}
.mi-grid--4c .mi-may__nombre {
	font-size: 18px;
	line-height: 24px;
}
.mi-vacio {
	padding: 24px;
	border: 1px dashed var(--mi-borde);
	border-radius: var(--mi-radio);
	background: var(--mi-fondo);
}
.mi-vacio p {
	margin: 0;
}

/* 5. Tarjeta de mayorista ================================================== */
.mi-may {
	background: var(--mi-blanco);
	border: 1px solid var(--mi-borde);
	border-radius: var(--mi-radio);
	box-shadow: var(--mi-sombra);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mi-may__cab {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.mi-may__nombre {
	margin: 0 0 8px;
	font-family: var(--mi-titulo);
	font-weight: 600;
	font-size: 20px;
	line-height: 26px;
	color: var(--mi-navy);
}
.mi-may__sede {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 14px;
	line-height: 20px;
	color: var(--mi-sec);
}
.mi-may__sede svg {
	flex: none;
	margin-top: 1px; /* (20 px de línea - 18 px de icono) / 2: el icono queda en la primera línea */
}
.mi-may .mi-btn {
	align-self: flex-start;
	margin-top: auto;
}

/* 6. Ficha: estructura con ficha rápida ==================================== */
.mi-cuerpo {
	padding-block: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 80px);
}
.mi-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	grid-template-areas: "main aside";
	gap: 56px;
	align-items: start;
}
.mi-layout__principal {
	grid-area: main;
	min-width: 0;
}
.mi-layout__lateral {
	grid-area: aside;
	position: sticky;
	top: 24px;
}
.admin-bar .mi-layout__lateral {
	top: 56px;
}
.mi-rapida {
	background: var(--mi-blanco);
	border: 1px solid var(--mi-borde);
	border-radius: var(--mi-radio);
	box-shadow: var(--mi-sombra);
	overflow: hidden;
}
.mi-rapida__titulo {
	margin: 0;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	background: var(--mi-navy);
	color: var(--mi-blanco);
	font: 600 16px/22px var(--mi-titulo);
}
.mi-rapida__titulo::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-right: 20px;
	background: var(--mi-azul);
	box-shadow: 10px -5px 0 var(--mi-turquesa);
	transform: translateY(2px);
}
.mi-rapida dl {
	margin: 0;
	padding: 8px 20px 4px;
}
.mi-rapida__fila {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--mi-borde);
	font-size: 15px;
	line-height: 22px;
}
.mi-rapida__fila:last-child {
	border-bottom: 0;
}
.mi-rapida dt {
	color: var(--mi-sec);
	font-weight: 400;
}
.mi-rapida dd {
	margin: 0;
	color: var(--mi-texto);
	font-weight: 500;
	overflow-wrap: anywhere;
}
.mi-rapida dd a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: -11px 0;
}
.mi-ok {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mi-navy);
	font-weight: 600;
}
.mi-rapida__pie {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: var(--mi-fondo);
	border-top: 1px solid var(--mi-borde);
	font-size: 13px;
	line-height: 18px;
	color: var(--mi-sec);
}

/* 7. Ficha: texto ========================================================== */
.mi-post {
	font-size: 18px;
	line-height: 31px;
	color: var(--mi-texto);
}
.mi-post > * {
	margin: 0 0 24px;
}
.mi-post > :last-child {
	margin-bottom: 0;
}
.mi-post__lead {
	font-size: 20px;
	line-height: 33px;
}
.mi-post h2 {
	margin: 48px 0 16px;
	font-family: var(--mi-titulo);
	font-weight: 700;
	font-size: clamp(24px, 0.8vw + 18px, 30px);
	line-height: 1.27;
	letter-spacing: -0.01em;
	color: var(--mi-navy);
}
.mi-post > h2:first-child {
	margin-top: 0;
}
.mi-post ul {
	list-style: none;
	padding: 0;
}
.mi-post ul li {
	position: relative;
	padding-left: 32px;
	margin: 0 0 10px;
}
.mi-post ul li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 12px;
	width: 8px;
	height: 8px;
	background: var(--mi-azul);
}
.mi-pasos {
	list-style: none;
	padding: 0;
	counter-reset: mi-n;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mi-pasos li {
	counter-increment: mi-n;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--mi-borde);
	border-radius: 12px;
	background: var(--mi-blanco);
}
.mi-pasos li::before {
	content: counter(mi-n, decimal-leading-zero);
	font: 700 28px/32px var(--mi-titulo);
	color: var(--mi-azul-texto);
	letter-spacing: -0.02em;
}
.mi-pasos li span {
	font-size: 17px;
	line-height: 28px;
}
.mi-plataformas {
	font-size: 16px;
	line-height: 26px;
	color: var(--mi-sec);
}
.mi-cta-mitad {
	position: relative;
	margin: 40px 0;
	background: var(--mi-navy);
	border-radius: 20px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.mi-cta-mitad p {
	margin: 0;
	max-width: 560px;
	font: 600 22px/31px var(--mi-titulo);
	color: var(--mi-blanco);
}
.mi-cta-mitad .mi-btn {
	align-self: flex-start;
}

/* 8. Secciones del archivo ================================================= */
.mi-dos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px 64px;
}
.mi-dos__txt {
	flex: 1 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.mi-dos__txt p {
	margin: 0;
}
.mi-dos__txt .mi-btns {
	margin-top: 4px;
}
.mi-dos .mi-caja {
	flex: 1 1 400px;
	min-width: 0;
}
.mi-encaja {
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.mi-encaja__pasos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
}
.mi-encaja__pasos li {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.mi-encaja__num {
	font-family: var(--mi-titulo);
	font-weight: 700;
	font-size: clamp(44px, 1vw + 36px, 56px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--mi-azul);
}
.mi-encaja__pasos h3 {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--mi-titulo);
	font-weight: 600;
	font-size: 22px;
	line-height: 28px;
	color: var(--mi-blanco);
}
.mi-preguntas {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* 9. Sector ================================================================ */
.mi-listado__col {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.mi-sector .mi-listado {
	padding-block: clamp(48px, 6vw, 64px);
}
.mi-cuenta {
	margin: 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--mi-sec);
}
.mi-cuenta strong {
	color: var(--mi-navy);
	font-weight: 600;
}
.mi-otros {
	padding-bottom: clamp(64px, 8vw, 96px);
}
.mi-otros__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 40px;
	border-top: 1px solid var(--mi-borde);
}
.mi-h2--px {
	display: flex;
	align-items: center;
	font-size: clamp(24px, 0.8vw + 18px, 30px);
	margin-bottom: 24px;
}
.mi-h2--px::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-right: 22px;
	background: var(--mi-azul);
	box-shadow: 10px -5px 0 var(--mi-navy);
	transform: translateY(2px);
}
.mi-h2--peq {
	font-size: clamp(22px, 0.6vw + 18px, 26px);
	line-height: 1.3;
	margin-bottom: 0;
}
.mi-volver {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-weight: 600;
}
.mi-sector .mi-sec--cta {
	padding-top: 0;
}

/* 10. Similares y avisos =================================================== */
.mi-similares {
	padding-block: clamp(48px, 6vw, 72px) 8px;
	background: var(--mi-fondo);
	border-top: 1px solid var(--mi-borde);
}
.mi-aviso-pie {
	padding-block: 32px;
}
.mi-similares + .mi-aviso-pie {
	background: var(--mi-fondo);
}
.mi-aviso {
	margin-block: 0;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 20px;
	border-radius: 12px;
	border: 1px solid var(--mi-borde);
	background: var(--mi-blanco);
	font-size: 14px;
	line-height: 22px;
	color: var(--mi-sec);
}
.mi-aviso svg {
	flex: none;
	margin-top: 2px;
}
.mi-ficha .mi-sec--cta {
	padding-top: 32px;
}

/* 11. Responsive =========================================================== */
@media (max-width: 999.98px) {
	.mi-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "aside" "main";
		gap: 32px;
	}
	.mi-layout__lateral {
		position: static;
	}
	.mi-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mi-grid--3,
	.mi-grid--4c {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 689.98px) {
	.mi-cab__fila {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.mi-av--xl {
		width: 72px;
		height: 72px;
		font-size: 24px;
	}
	.mi-grid,
	.mi-grid--3,
	.mi-grid--4c,
	.mi-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
	.mi-stat b {
		font-size: 26px;
		line-height: 32px;
	}
	.mi-post {
		font-size: 17px;
		line-height: 29px;
	}
	.mi-post__lead {
		font-size: 18px;
		line-height: 30px;
	}
	.mi-cta-mitad {
		padding: 28px 20px;
	}
	.mi-cta-mitad .mi-btn {
		width: 100%;
	}
	.mi-filtros .mi-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.mi-filtros .mi-chips::-webkit-scrollbar {
		display: none;
	}
	.mi-filtros .mi-chip {
		flex: none;
	}
	.mi-rapida__fila {
		grid-template-columns: 110px minmax(0, 1fr);
	}
}