.apr-avisos-wrapper {
	--apr-normal: #2e7d32;
	--apr-atencion: #9a6700;
	--apr-programado: #d97706;
	--apr-emergencia: #c62828;
	--apr-background: #ffffff;
	--apr-soft-background: #f7faf9;
	--apr-text: #222222;
	--apr-muted: #586069;
	--apr-border: #e1e4e8;
	color: var(--apr-text);
	display: grid;
	font-family: inherit;
	gap: 16px;
	width: 100%;
}

.apr-avisos-wrapper * {
	box-sizing: border-box;
}

.apr-avisos-estado,
.apr-avisos-card,
.apr-avisos-vacio {
	background: var(--apr-background);
	border: 1px solid var(--apr-border);
	border-radius: 8px;
	padding: 16px;
}

.apr-avisos-estado {
	align-items: flex-start;
	display: flex;
	gap: 14px;
}

.apr-avisos-estado-icono {
	align-items: center;
	border-radius: 6px;
	color: #fff;
	display: flex;
	flex: 0 0 34px;
	font-size: 13px;
	font-weight: 700;
	height: 34px;
	justify-content: center;
	line-height: 1;
	width: 34px;
}

.apr-avisos-estado h2,
.apr-avisos-card h3,
.apr-avisos-titulo-seccion {
	color: inherit;
	font-family: inherit;
	letter-spacing: 0;
	line-height: 1.25;
	margin: 0 0 8px;
}

.apr-avisos-estado h2 {
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.28rem);
	text-transform: uppercase;
}

.apr-avisos-estado p,
.apr-avisos-card p,
.apr-avisos-vacio p {
	margin: 0 0 8px;
}

.apr-avisos-estado-normal {
	border-left: 4px solid var(--apr-normal);
}

.apr-avisos-estado-normal .apr-avisos-estado-icono {
	background: var(--apr-normal);
}

.apr-avisos-estado-atencion {
	border-left: 4px solid var(--apr-atencion);
}

.apr-avisos-estado-atencion .apr-avisos-estado-icono {
	background: var(--apr-atencion);
}

.apr-avisos-estado-programado {
	border-left: 4px solid var(--apr-programado);
}

.apr-avisos-estado-programado .apr-avisos-estado-icono {
	background: var(--apr-programado);
}

.apr-avisos-estado-emergencia {
	border-left: 4px solid var(--apr-emergencia);
}

.apr-avisos-estado-emergencia .apr-avisos-estado-icono {
	background: var(--apr-emergencia);
}

.apr-avisos-estado-emergencia {
	background: #fffafa;
}

.apr-avisos-lista,
.apr-avisos-historial {
	display: grid;
	gap: 14px;
}

.apr-avisos-card {
	border-left: 4px solid var(--apr-border);
}

.apr-avisos-card-activo {
	border-left-color: var(--apr-atencion);
}

.apr-avisos-card-programado {
	border-left-color: var(--apr-programado);
}

.apr-avisos-card-finalizado {
	background: var(--apr-soft-background);
}

.apr-avisos-card-destacado {
	background: #fcfdfd;
}

.apr-avisos-card-cabecera {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	margin-bottom: 8px;
}

.apr-avisos-tipo,
.apr-avisos-badge {
	border-radius: 4px;
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	padding: 5px 8px;
	text-transform: uppercase;
}

.apr-avisos-tipo {
	background: #e8f3f0;
	color: #164b3f;
}

.apr-avisos-badge {
	background: #f4f4f5;
	color: #3f3f46;
}

.apr-avisos-card h3 {
	font-size: clamp(1rem, 0.96rem + 0.22vw, 1.18rem);
}

.apr-avisos-mensaje {
	line-height: 1.6;
	margin: 10px 0;
}

.apr-avisos-detalles {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin: 14px 0 0;
}

.apr-avisos-detalles div {
	min-width: 0;
}

.apr-avisos-detalles dt {
	color: var(--apr-muted);
	font-size: 0.82rem;
	font-weight: 700;
	margin: 0 0 2px;
	text-transform: uppercase;
}

.apr-avisos-detalles dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.apr-avisos-link {
	align-items: center;
	background: #164b3f;
	border-radius: 4px;
	color: #fff;
	display: inline-flex;
	font-weight: 700;
	margin-top: 16px;
	padding: 9px 12px;
	text-decoration: none;
}

.apr-avisos-link:focus,
.apr-avisos-link:hover {
	background: #0f382f;
	color: #fff;
	outline: 2px solid #0f382f;
	outline-offset: 2px;
}

.apr-avisos-vacio {
	background: var(--apr-soft-background);
}

@media (prefers-reduced-motion: reduce) {
	.apr-avisos-wrapper *,
	.apr-avisos-wrapper *::before,
	.apr-avisos-wrapper *::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		scroll-behavior: auto;
		transition-duration: 0.01ms;
	}
}

@media (max-width: 600px) {
	.apr-avisos-estado {
		flex-direction: column;
	}

	.apr-avisos-estado,
	.apr-avisos-card,
	.apr-avisos-vacio {
		padding: 16px;
	}

	.apr-avisos-detalles {
		grid-template-columns: 1fr;
	}
}