/* Portal de socios (Fase B2): acceso, inicio, detalle y Mi cuenta. Mismo lenguaje que la ficha de
   producto: verde #25A239, grises neutros, tarjetas blancas sobre #f4f5f3. Sin frameworks. */

body.hb-portal {
	--hbp-verde: #25a239;
	--hbp-verde-oscuro: #1d8a2f;
	--hbp-fondo: #f4f5f3;
	--hbp-borde: #e3e5e0;
	--hbp-texto: #262626;
	--hbp-suave: #6b6f68;
	--hbp-aviso: #c27c0e;
	--hbp-fuente: "SF Pro Display", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin: 0;
	background: var(--hbp-fondo);
	color: var(--hbp-texto);
	font-family: var(--hbp-fuente);
	font-size: 16px;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.hb-portal *,
.hb-portal *::before,
.hb-portal *::after {
	box-sizing: border-box;
}

.hb-portal a {
	color: var(--hbp-verde-oscuro);
}

.hb-portal h1,
.hb-portal h2,
.hb-portal h3 {
	font-family: var(--hbp-fuente);
	color: #000;
	line-height: 1.25;
	margin: 0 0 12px;
}

.hb-portal h1 {
	font-size: 28px;
	font-weight: 600;
}

.hb-portal h2 {
	font-size: 20px;
	font-weight: 600;
}

.hb-portal h3 {
	font-size: 17px;
	font-weight: 600;
}

.hb-portal p {
	margin: 0 0 12px;
}

/* Barra superior -------------------------------------------------------------- */
.hbp-barra {
	background: #fff;
	border-bottom: 1px solid var(--hbp-borde);
}

.hbp-barra__dentro {
	max-width: 1180px;
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.hb-portal .hbp-marca {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: #000;
}

.hbp-marca img {
	display: block;
	height: 40px;
	width: auto;
}

.hbp-marca__area {
	font-weight: 600;
	padding-left: 12px;
	border-left: 1px solid var(--hbp-borde);
}

.hbp-barra__volver {
	margin-left: auto;
	font-size: 15px;
}

.hbp-nav {
	display: flex;
	gap: 20px;
}

.hb-portal .hbp-nav a {
	color: var(--hbp-texto);
	text-decoration: none;
	font-weight: 500;
}

.hb-portal .hbp-nav a:hover {
	color: var(--hbp-verde);
}

.hbp-barra__usuario {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
}

.hb-portal .hbp-campana {
	position: relative;
	color: var(--hbp-texto);
	display: inline-flex;
}

.hbp-campana__n {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--hbp-aviso);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.hb-portal .hbp-yo {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--hbp-texto);
	text-decoration: none;
	font-size: 14px;
}

.hbp-avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--hbp-verde);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
}

/* Contenido ------------------------------------------------------------------- */
.hbp-main {
	flex: 1;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 28px 20px 48px;
}

.hbp-main--estrecho {
	max-width: 760px;
}

.hbp-tarjeta {
	background: #fff;
	border: 1px solid var(--hbp-borde);
	border-radius: 8px;
	padding: 24px 28px;
	margin-bottom: 20px;
}

.hbp-tarjeta__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.hbp-tarjeta__cabecera h2 {
	margin: 0;
}

.hbp-rejilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.hbp-rejilla > .hbp-tarjeta {
	margin-bottom: 0;
}

.hbp-rejilla--destacada {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	align-items: start;
	margin-bottom: 20px;
}

.hbp-rejilla--detalle {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	align-items: start;
}

.hbp-columna > .hbp-tarjeta:last-child {
	margin-bottom: 0;
}

.hbp-columna--lateral .hbp-tarjeta {
	margin-bottom: 20px;
}

.hbp-suave {
	color: var(--hbp-suave);
	font-size: 14px;
}

.hbp-nota {
	color: var(--hbp-suave);
	font-size: 13px;
	margin: 0;
}

.hbp-dato {
	font-size: 17px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.hbp-migas {
	font-size: 14px;
	margin-bottom: 16px;
}

.hbp-antetitulo {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 13px;
	font-weight: 600;
	color: var(--hbp-verde-oscuro);
}

/* Etiquetas y estados ---------------------------------------------------------- */
.hbp-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.hbp-etiqueta {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.hbp-etiqueta--verde {
	background: #e3f3e5;
	color: var(--hbp-verde-oscuro);
}

.hbp-etiqueta--aviso,
.hbp-estado--nueva {
	background: #fbecd3;
	color: #8a5507;
}

.hbp-estado {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.hbp-estado--leida {
	background: #eef0ec;
	color: var(--hbp-suave);
}

.hbp-respuesta {
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}

.hbp-respuesta--si {
	color: var(--hbp-verde-oscuro);
}

.hbp-respuesta--delega {
	color: #2c6db3;
}

.hbp-respuesta--no {
	color: #b03a2e;
}

.hbp-respuesta--sin {
	color: var(--hbp-suave);
	font-weight: 400;
}

/* Botones ---------------------------------------------------------------------- */
.hbp-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hb-portal .hbp-boton,
.hb-portal button.hbp-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 2px solid var(--hbp-verde);
	border-radius: 4px;
	background: #fff;
	color: var(--hbp-verde-oscuro);
	font-family: var(--hbp-fuente);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.hb-portal .hbp-boton:hover,
.hb-portal .hbp-boton:focus-visible {
	background: var(--hbp-verde);
	color: #fff;
}

.hb-portal .hbp-boton--principal,
.hb-portal button.hbp-boton--principal {
	background: var(--hbp-verde);
	color: #fff;
}

.hb-portal .hbp-boton--principal:hover,
.hb-portal .hbp-boton--principal:focus-visible {
	background: var(--hbp-verde-oscuro);
	border-color: var(--hbp-verde-oscuro);
}

.hb-portal .hbp-boton--texto {
	border-color: transparent;
	background: none;
	color: var(--hbp-suave);
}

.hb-portal .hbp-boton--texto:hover {
	background: none;
	color: var(--hbp-texto);
	text-decoration: underline;
}

.hbp-boton--ancho {
	width: 100%;
}

/* Formularios ------------------------------------------------------------------- */
.hbp-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hbp-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
}

.hbp-campo[hidden] {
	display: none;
}

.hb-portal .hbp-campo input,
.hb-portal .hbp-campo textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cfd3cb;
	border-radius: 4px;
	background: #fff;
	font: 400 16px/1.4 var(--hbp-fuente);
	color: var(--hbp-texto);
}

.hb-portal .hbp-campo input:focus,
.hb-portal .hbp-campo textarea:focus {
	outline: 2px solid var(--hbp-verde);
	outline-offset: 1px;
	border-color: var(--hbp-verde);
}

.hbp-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.hbp-opciones {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hbp-opciones legend {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
	padding: 0;
}

.hbp-opciones label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid var(--hbp-borde);
	border-radius: 6px;
	cursor: pointer;
}

.hbp-opciones label:has(input:checked) {
	border-color: var(--hbp-verde);
	background: #f0f8f1;
}

.hbp-aviso {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 15px;
}

.hbp-aviso--ok {
	background: #e3f3e5;
	color: #17652a;
}

.hbp-aviso--error {
	background: #fbe4e1;
	color: #8f2a1f;
}

/* Acceso ------------------------------------------------------------------------ */
.hbp-acceso {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 48px;
	align-items: center;
	padding-top: 64px;
	padding-bottom: 64px;
}

.hbp-acceso__texto h1 {
	font-size: 34px;
	margin-bottom: 16px;
}

.hbp-acceso__texto p {
	font-size: 17px;
	max-width: 520px;
}

.hbp-acceso__tarjeta {
	margin: 0;
	padding: 32px;
}

.hbp-acceso__olvido {
	text-align: center;
	font-size: 14px;
	margin: 0;
}

/* Destacada y listas ------------------------------------------------------------------ */
.hbp-destacada h1 {
	font-size: 26px;
}

.hbp-destacada__fecha {
	font-size: 17px;
	font-weight: 600;
	color: var(--hbp-texto);
}

.hbp-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbp-lista li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-top: 1px solid var(--hbp-borde);
	font-size: 14px;
}

.hbp-lista li:first-child {
	border-top: 0;
}

.hbp-contadores {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: 10px;
}

.hbp-contadores > div {
	background: var(--hbp-fondo);
	border-radius: 6px;
	padding: 10px;
	text-align: center;
	font-size: 13px;
	color: var(--hbp-suave);
}

.hbp-contador {
	display: block;
	font-size: 26px;
	font-weight: 700;
	color: #000;
}

.hbp-comentarios {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbp-comentario {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var(--hbp-borde);
}

.hbp-comentario:first-child {
	border-top: 0;
	padding-top: 0;
}

.hbp-comentario__quien {
	font-size: 14px;
	margin-bottom: 4px;
}

.hbp-comentario__texto {
	white-space: pre-line;
	margin: 0;
}

.hbp-dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	margin: 0 0 16px;
	font-size: 15px;
}

.hbp-dl dt {
	color: var(--hbp-suave);
}

.hbp-dl dd {
	margin: 0;
	font-weight: 600;
}

.hbp-cuenta > h2 {
	margin-top: 8px;
}

/* Tabla de convocatorias ----------------------------------------------------------- */
.hbp-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hb-portal .hbp-filtros a {
	padding: 5px 12px;
	border: 1px solid var(--hbp-borde);
	border-radius: 999px;
	font-size: 14px;
	color: var(--hbp-texto);
	text-decoration: none;
}

.hb-portal .hbp-filtros a[aria-current] {
	background: var(--hbp-verde);
	border-color: var(--hbp-verde);
	color: #fff;
}

.hbp-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.hbp-tabla th {
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--hbp-suave);
	font-weight: 600;
	padding: 8px 10px;
	border-bottom: 1px solid var(--hbp-borde);
}

.hb-portal .hbp-tabla,
.hb-portal .hbp-tabla th,
.hb-portal .hbp-tabla td,
.hb-portal .hbp-tabla tr {
	border: 0;
	background: none;
}

.hb-portal .hbp-tabla th {
	border-bottom: 1px solid var(--hbp-borde);
}

.hb-portal .hbp-tabla td {
	padding: 12px 10px;
	border-bottom: 1px solid var(--hbp-borde);
	vertical-align: top;
}

.hbp-fila--nueva .hbp-tabla__doc a {
	font-weight: 700;
}

.hbp-tabla__fecha {
	white-space: nowrap;
}

.hbp-ver-todas {
	margin: 14px 0 0;
	font-size: 14px;
}

/* Pie ------------------------------------------------------------------------------ */
.hbp-pie {
	border-top: 1px solid var(--hbp-borde);
	background: #fff;
	font-size: 13px;
	color: var(--hbp-suave);
}

.hbp-pie__dentro {
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.hb-portal .hbp-pie a {
	color: var(--hbp-suave);
}

/* Móvil ---------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.hbp-rejilla,
	.hbp-rejilla--destacada,
	.hbp-rejilla--detalle,
	.hbp-acceso {
		grid-template-columns: minmax(0, 1fr);
	}

	.hbp-acceso {
		gap: 24px;
		padding-top: 28px;
		padding-bottom: 28px;
	}

	.hbp-acceso__texto h1 {
		font-size: 26px;
	}
}

@media (max-width: 640px) {
	.hbp-barra__dentro {
		padding: 10px 16px;
		gap: 12px;
		flex-wrap: wrap;
	}

	.hbp-marca img {
		height: 32px;
	}

	.hbp-marca__area {
		font-size: 14px;
		padding-left: 8px;
	}

	.hbp-yo__nombre {
		display: none;
	}

	.hbp-nav {
		order: 3;
		width: 100%;
		gap: 16px;
		font-size: 15px;
	}

	.hbp-main {
		padding: 16px 16px 32px;
	}

	.hbp-tarjeta {
		padding: 18px 16px;
	}

	.hb-portal h1,
	.hbp-destacada h1 {
		font-size: 22px;
	}

	.hbp-botones .hbp-boton {
		width: 100%;
	}

	/* La tabla pasa a filas de dos líneas: documento, y debajo fecha y estado. */
	.hbp-tabla thead {
		display: none;
	}

	.hbp-tabla,
	.hbp-tabla tbody {
		display: block;
	}

	.hb-portal .hbp-tabla tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 2px 10px;
		padding: 10px 0;
		border-bottom: 1px solid var(--hbp-borde);
	}

	.hb-portal .hbp-tabla td {
		padding: 0;
		border: 0;
	}

	.hbp-tabla__doc {
		grid-column: 1 / -1;
		order: -1;
	}

	.hbp-tabla__tipo,
	.hbp-tabla__resp {
		display: none;
	}

	.hbp-tabla__fecha {
		font-size: 13px;
		color: var(--hbp-suave);
	}
}