/* ==========================================================================
 * AL MAYOREO · notices.css — repinte de marca de los AVISOS de WooCommerce.
 *
 * Problema: WooCommerce/Storefront sirven el notice default (barra verde plana
 * "de colegio": fondo #0f834d saturado, esquinas de 2px, borde-izq de 9px,
 * botón "Ver carrito" cuadrado). El tema no estilaba ningún notice.
 *
 * Alcance DURO (solo presentación): re-diseña
 *   - .woocommerce-message   → ÉXITO (add-to-cart, prioridad)   [role=alert]
 *   - .woocommerce-info      → info
 *   - .woocommerce-error     → error (es un <ul>)
 *   - .wc-block-components-notice-banner (.is-success/.is-error/.is-info) →
 *     variante de bloques (carrito/checkout por bloques)
 *   - el botón .button.wc-forward ("Ver carrito") para que combine.
 * NO toca texto, markup/templates, role/aria ni comportamiento.
 *
 * Consume SOLO tokens de tokens.css (regla A3: cero color/fuente literal).
 * Se encola site-wide (los notices salen en producto/shop/carrito): functions.php.
 *
 * Especificidad: WooCommerce imprime su CSS DESPUÉS de esta hoja (ver nota en
 * checkout.css). Para ganar el cascade SIN !important ni pelear hooks, cada
 * selector base auto-encadena su clase (`.x.x` → 0,2,0) y así supera las reglas
 * de una sola clase (0,1,0) del core/Storefront, sin depender del orden de carga.
 * ========================================================================== */

/* --- Base compartida: panel premium (card cálida + badge + acento) --------- */
.woocommerce-message.woocommerce-message,
.woocommerce-info.woocommerce-info,
.woocommerce-error.woocommerce-error {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 0.95rem;
	row-gap: 0.6rem;

	position: relative;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--oresa-color-border);
	border-inline-start-width: 4px;
	border-radius: var(--oresa-radius);
	box-shadow: var(--oresa-shadow-soft);

	background: var(--oresa-color-surface);
	color: var(--oresa-color-text);
	font-family: var(--oresa-font-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
	list-style: none;
}

/* Badge circular (reemplaza el ::before del icon-font de WooCommerce por un
 * glifo unicode nítido, sin depender de la webfont "WooCommerce"). */
.woocommerce-message.woocommerce-message::before,
.woocommerce-info.woocommerce-info::before,
.woocommerce-error.woocommerce-error::before {
	content: "";
	position: static;
	flex: 0 0 auto;
	inline-size: 1.85rem;
	block-size: 1.85rem;
	margin: 0;
	left: auto;
	top: auto;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	font-family: var(--oresa-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
}

/* El texto (nodo suelto) ocupa el espacio central; empuja el CTA al final. */
.woocommerce-message.woocommerce-message {
	border-inline-start-color: var(--oresa-color-success);
	background: var(--oresa-color-success-soft);
}
.woocommerce-message.woocommerce-message::before {
	content: "\2713"; /* ✓ */
	background: var(--oresa-color-success);
}

.woocommerce-info.woocommerce-info {
	border-inline-start-color: var(--oresa-color-navy);
	background: var(--oresa-color-info-soft);
}
.woocommerce-info.woocommerce-info::before {
	content: "\69"; /* i */
	font-style: normal;
	background: var(--oresa-color-navy);
}

.woocommerce-error.woocommerce-error {
	border-inline-start-color: var(--oresa-color-rust);
	background: var(--oresa-color-error-soft);
	padding-inline-start: 1.25rem;
}
.woocommerce-error.woocommerce-error::before {
	content: "\21"; /* ! */
	background: var(--oresa-color-rust-deep);
}
/* El error nativo es un <ul>; sus <li> quedan como texto plano en la fila. */
.woocommerce-error.woocommerce-error li {
	flex: 1 1 auto;
	margin: 0;
	list-style: none;
}

/* --- Botón "Ver carrito" (.wc-forward) — pill de marca, target ≥24px ------- */
.woocommerce-message.woocommerce-message a.button,
.woocommerce-info.woocommerce-info a.button {
	margin-inline-start: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.5rem;
	padding: 0.5rem 1.35rem;
	border: 0;
	border-radius: var(--oresa-radius-pill);
	background: var(--oresa-color-button-bg);
	color: var(--oresa-color-button-text);
	font-family: var(--oresa-font-heading);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.woocommerce-message.woocommerce-message a.button:hover,
.woocommerce-message.woocommerce-message a.button:focus,
.woocommerce-info.woocommerce-info a.button:hover,
.woocommerce-info.woocommerce-info a.button:focus {
	background: var(--oresa-color-button-hover-bg);
	color: var(--oresa-color-button-text);
	transform: translateY(-1px);
}

/* Foco visible (WCAG SC 2.4.7 / 2.4.11) — no obstruido, alto contraste. */
.woocommerce-message.woocommerce-message a.button:focus-visible,
.woocommerce-info.woocommerce-info a.button:focus-visible {
	outline: 2px solid var(--oresa-color-navy);
	outline-offset: 2px;
}
.woocommerce-message.woocommerce-message:focus-visible,
.woocommerce-info.woocommerce-info:focus-visible,
.woocommerce-error.woocommerce-error:focus-visible {
	outline: 2px solid var(--oresa-color-navy);
	outline-offset: 2px;
}

/* --- Móvil: apila badge/texto/CTA sin romper la fila --------------------- */
@media (max-width: 560px) {
	.woocommerce-message.woocommerce-message a.button,
	.woocommerce-info.woocommerce-info a.button {
		margin-inline-start: 0;
		inline-size: 100%;
	}
}

/* ==========================================================================
 * Variante de bloques (.wc-block-components-notice-banner) — carrito/checkout
 * por bloques. Auto-encadenada para superar el CSS de wc-blocks (0,1,0/0,2,0).
 * Mantiene su SVG propio; solo re-armoniza superficie, borde y acento a marca.
 * ========================================================================== */
.wc-block-components-notice-banner.wc-block-components-notice-banner {
	border-radius: var(--oresa-radius);
	border: 1px solid var(--oresa-color-border);
	border-inline-start-width: 4px;
	box-shadow: var(--oresa-shadow-soft);
	color: var(--oresa-color-text);
	font-family: var(--oresa-font-body);
}
.wc-block-components-notice-banner.wc-block-components-notice-banner.is-success {
	background: var(--oresa-color-success-soft);
	border-inline-start-color: var(--oresa-color-success);
}
.wc-block-components-notice-banner.wc-block-components-notice-banner.is-info {
	background: var(--oresa-color-info-soft);
	border-inline-start-color: var(--oresa-color-navy);
}
.wc-block-components-notice-banner.wc-block-components-notice-banner.is-error {
	background: var(--oresa-color-error-soft);
	border-inline-start-color: var(--oresa-color-rust);
}
/* El icono SVG de la banda toma el color del acento por tipo. */
.wc-block-components-notice-banner.is-success svg { fill: var(--oresa-color-success); }
.wc-block-components-notice-banner.is-info svg { fill: var(--oresa-color-navy); }
.wc-block-components-notice-banner.is-error svg { fill: var(--oresa-color-rust-deep); }