/**
 * PatanRex — Avisos de la Academia
 *
 * Tokens tomados de `patan-mi-cuenta` para que la tarjeta no se note pegada:
 * azul oscuro del sitio (#001D3D), escalón #003566, amarillo de acción.
 *
 * Reglas heredadas del sistema:
 *   · Plano en reposo. La jerarquía la da el escalón de fondo, no la sombra.
 *   · El amarillo aparece como máximo dos veces y siempre es acción.
 *   · Ningún estado se comunica solo con color: forma + palabra.
 *   · Ni #fff ni #000.
 *
 * 🛑 La tipografía se DECLARA, no se hereda: un <h3> nuestro dentro de un
 * widget de Elementor cae en el stack del sistema y sale en Segoe UI.
 *
 * Todo cuelga de `.prx-av`, incluidos los estados de los botones: el reset del
 * theme pinta cualquier <button> de fucsia (#c36) en :hover, :focus,
 * :focus-visible y :active, así que los cuatro se declaran.
 */

.prx-av-cartel,
.prx-av {
	--pav-ink: #001D3D;
	--pav-ink-2: #003566;
	--pav-line-dark: rgba(255, 255, 255, 0.14);
	--pav-paper: #FCFDFE;
	--pav-sky: #F4F7F9;
	--pav-line: #DBE4EA;
	--pav-body: #3C5666;
	--pav-mute: #5D7280;
	--pav-on-dark: #C3D5DE;
	/* 7,67:1 sobre el navy (AAA). Antes era #88A0AD, que da 6,18:1: pasaba AA
	   justo, y encima lo llevaba la nota al pie, que es el texto más largo y
	   más chico del bloque. Medido el 17/9/2026. */
	--pav-mute-dark: #9DB2BD;
	--pav-yellow: #FCD752;
	--pav-yellow-press: #E8BE33;
	--pav-data: #087DBD;

	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pav-body);
}

.prx-av-cartel *,
.prx-av *,
.prx-av-cartel *::before,
.prx-av *::before,
.prx-av-cartel *::after,
.prx-av *::after {
	box-sizing: border-box;
}

.prx-av-cartel[hidden] {
	display: none;
}

/* Sin avisos no queda una caja vacía ni espacio reservado: el contenedor sigue
   oculto y el escritorio arranca donde arrancaba. */
.prx-av-cartel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 16px;
}

/* ---------------------------------------------------------------- TARJETA */

.prx-av-card {
	background: var(--pav-ink);
	border-radius: 10px;
	padding: 20px 22px;
	color: var(--pav-on-dark);
}

.prx-av-card__tag {
	display: inline-block;
	font-family: Inter, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pav-mute-dark);
	margin: 0 0 6px;
}

.prx-av-card__tag--importante {
	color: var(--pav-yellow);
}

/* 🛑 ESTA ESPECIFICIDAD NO ES CAPRICHO, Y NO SE BAJA.
 *
 * `patan-mi-cuenta` tiene viva esta regla, con especificidad (0,3,2):
 *
 *   body.woocommerce-account .woocommerce-MyAccount-content h3:not(:where(.prx-acct *))
 *     { color: var(--px-body); font-size: 14.5px; font-weight: 400; ... }
 *
 * El `:not()` exime a los encabezados de SU escritorio (`.prx-acct`). Nuestra
 * tarjeta cuelga de `.woocommerce-MyAccount-content` pero queda FUERA de
 * `.prx-acct`, así que la regla nos agarra de lleno: el título salía en
 * #3C5666 (tinta oscura) sobre el navy, a 14,5px y sin negrita. Eso es
 * **2,18:1, reprueba AA**: no era un gusto, era ilegible. Medido en producción
 * el 17/9/2026 sobre el CSS servido, no sobre el de disco.
 *
 * Se gana desde acá, en nuestra hoja, para no tener que versionar y volver a
 * desplegar `patan-mi-cuenta` por un problema que es nuestro. Cuatro clases
 * (0,4,0) le ganan a (0,3,2) por conteo de clases. Se duplica la clase del
 * título en vez de usar `!important`, que es el mismo recurso que ya usa la
 * hoja vecina en `.prx-note.prx-note`.
 *
 * Los dos selectores son la tarjeta y el modal. El modal cuelga de `<body>` y
 * hoy la regla vecina no lo alcanza, pero se le da el mismo trato para que los
 * dos títulos no puedan divergir. */
.prx-av-cartel .prx-av .prx-av-card__title.prx-av-card__title,
.prx-av-fondo .prx-av .prx-av-card__title.prx-av-card__title,
.prx-av-card__title {
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--pav-paper);
	max-width: 40ch;
	margin: 0 0 10px;
}

/* El renglón largo es lo que más cansa en un bloque ancho: en el escritorio la
   tarjeta ocupa todo el contenido y el mensaje corría a más de 100 caracteres.
   68ch lo deja en la franja cómoda sin tocar el ancho de la tarjeta. */
.prx-av-card__body {
	font-size: 15px;
	line-height: 1.6;
	max-width: 68ch;
	margin: 0;
}

.prx-av-card__body p {
	margin: 0 0 10px;
}

.prx-av-card__body p:last-child {
	margin-bottom: 0;
}

.prx-av-card__body a {
	color: var(--pav-yellow);
	text-decoration: underline;
}

/* La negrita es el ÚNICO resalte del mensaje, así que tiene que resaltar de
   verdad: sube al blanco del título. No hay colores libres en el editor a
   propósito (la tarjeta es oscura y un color elegido a ojo reprueba contraste
   sin que nadie se entere), y el amarillo está reservado para las acciones. */
.prx-av-card__body strong,
.prx-av-card__body b {
	color: var(--pav-paper);
	font-weight: 600;
}

.prx-av-card__body ul,
.prx-av-card__body ol {
	margin: 0 0 10px;
	padding-left: 20px;
}

.prx-av-card__body li {
	margin: 0 0 4px;
}

.prx-av-card__body li::marker {
	color: var(--pav-mute-dark);
}

/* ------------------------------------------------------------ HORA LOCAL */

.prx-av-fecha {
	border-top: 1px solid var(--pav-line-dark);
	margin: 16px 0 0;
	padding: 14px 0 0;
	max-width: 68ch;
}

.prx-av-fecha__main {
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--pav-paper);
	margin: 0;
}

.prx-av-fecha__ref,
.prx-av-fecha__zona {
	font-size: 12.5px;
	color: var(--pav-mute-dark);
	margin: 2px 0 0;
}

.prx-av-fecha__zona button {
	background: none;
	border: 0;
	padding: 0 0 0 6px;
	font: inherit;
	color: var(--pav-on-dark);
	text-decoration: underline;
	cursor: pointer;
	min-height: 0;
}

.prx-av-fecha__zona button:hover,
.prx-av-fecha__zona button:focus,
.prx-av-fecha__zona button:focus-visible,
.prx-av-fecha__zona button:active {
	background: none;
	color: var(--pav-yellow);
}

.prx-av-zonapick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 8px 0 0;
}

.prx-av-zonapick input {
	flex: 1 1 200px;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--pav-line-dark);
	border-radius: 8px;
	background: var(--pav-ink-2);
	color: var(--pav-paper);
	font: inherit;
}

/* ------------------------------------------------------------- ACCIONES */

.prx-av-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
}

.prx-av-btn,
a.prx-av-btn,
button.prx-av-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--pav-yellow);
	color: var(--pav-ink);
	font-family: Poppins, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

/* Los cuatro estados, porque el reset del theme pinta el <button> de fucsia. */
.prx-av-btn:hover,
.prx-av-btn:focus,
.prx-av-btn:focus-visible,
.prx-av-btn:active,
a.prx-av-btn:hover,
a.prx-av-btn:focus,
a.prx-av-btn:focus-visible,
a.prx-av-btn:active,
button.prx-av-btn:hover,
button.prx-av-btn:focus,
button.prx-av-btn:focus-visible,
button.prx-av-btn:active {
	background: var(--pav-yellow-press);
	color: var(--pav-ink);
	text-decoration: none;
}

.prx-av-btn:focus-visible,
a.prx-av-btn:focus-visible,
button.prx-av-btn:focus-visible {
	outline: 2px solid var(--pav-paper);
	outline-offset: 2px;
}

.prx-av-btn--fantasma,
a.prx-av-btn--fantasma,
button.prx-av-btn--fantasma {
	background: transparent;
	border: 1px solid var(--pav-line-dark);
	color: var(--pav-on-dark);
}

.prx-av-btn--fantasma:hover,
.prx-av-btn--fantasma:focus,
.prx-av-btn--fantasma:focus-visible,
.prx-av-btn--fantasma:active,
a.prx-av-btn--fantasma:hover,
a.prx-av-btn--fantasma:focus,
a.prx-av-btn--fantasma:focus-visible,
a.prx-av-btn--fantasma:active,
button.prx-av-btn--fantasma:hover,
button.prx-av-btn--fantasma:focus,
button.prx-av-btn--fantasma:focus-visible,
button.prx-av-btn--fantasma:active {
	background: var(--pav-ink-2);
	color: var(--pav-paper);
}

.prx-av-nota {
	font-size: 13px;
	line-height: 1.55;
	max-width: 62ch;
	color: var(--pav-mute-dark);
	margin: 12px 0 0;
}

/* --------------------------------------------------------------- MODAL */

.prx-av-fondo {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 12, 26, 0.72);
}

.prx-av-modal {
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	background: var(--pav-ink);
	border-radius: 12px;
	padding: 22px;
	position: relative;
	color: var(--pav-on-dark);
}

.prx-av-modal__x {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: var(--pav-mute-dark);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.prx-av-modal__x:hover,
.prx-av-modal__x:focus,
.prx-av-modal__x:focus-visible,
.prx-av-modal__x:active {
	background: var(--pav-ink-2);
	color: var(--pav-paper);
}

.prx-av-modal .prx-av-card__title {
	padding-right: 40px;
	font-size: 19px;
}

.prx-av-error {
	font-size: 12.5px;
	color: var(--pav-yellow);
	margin: 10px 0 0;
}

@media (max-width: 420px) {
	.prx-av-acts .prx-av-btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.prx-av-fondo {
		animation: prx-av-entra .18s ease-out;
	}
}

@keyframes prx-av-entra {
	from { opacity: 0; }
	to { opacity: 1; }
}
