/*
 * Estilos base del login del Portal del Cliente.
 *
 * 2026-07-29 (2da correccion): el usuario pidio portar el bloque real
 * "PORTAL CLIENTE" de Aurora Integral.dc.html (glassmorphism, gradientes,
 * cards de KPI) con un solo cambio de color explicito: primario -> #006B6B
 * (--asseo-primary-rgb queda en "0, 107, 107" para poder armar los rgba()
 * de vidrio que usa ese diseño). El resto de acentos categoricos
 * (verde/purpura/amarillo de las otras tarjetas) se mantienen igual que
 * en la fuente, no se pidio cambiarlos. Fuente sigue siendo Poppins (la
 * real del sitio, confirmada contra el Kit de Elementor — ver historial
 * de esta nota mas abajo en la memoria del proyecto).
 */

/*
 * 2026-07-31: paleta oficial del manual de marca de Asseo (PDF entregado
 * el 2026-07-28, ver memoria del proyecto), reemplaza los teales
 * aproximados que se venian usando desde el 2026-07-29 (#006B6B, #0D7A6C,
 * #1DBFA6 no son colores de marca reales, eran un placeholder). Los 5
 * hex oficiales:
 *   #075C5D verde oscuro principal -> headers, textos importantes,
 *           botones primarios activos, sidebar activo (--asseo-primary)
 *   #2BB5AF verde teal medio -> iconos, acentos, bordes de cards
 *           seleccionadas (--asseo-teal)
 *   #17AEA2 verde teal vibrante -> hover de botones, highlights
 *           (--asseo-accent; coincide con --asseo-link, que ya tenia
 *           este valor desde antes)
 *   #78C6BE verde teal intermedio -> estados intermedios, badges
 *           (--asseo-teal-mid, variable nueva)
 *   #B1DACF verde menta claro -> fondos de cards, backgrounds suaves,
 *           secciones alternadas (--asseo-mint; no cambio, ya coincidia)
 * --asseo-input-text (#1a1a1a, negro de texto normal) NO se toca, el
 * usuario pidio explicitamente mantenerlo.
 */
:root {
	--asseo-primary: #075c5d;
	--asseo-primary-rgb: 7, 92, 93;
	--asseo-dark: #075c5d;
	--asseo-teal: #2bb5af;
	--asseo-teal-rgb: 43, 181, 175;
	--asseo-link: #17aea2;
	--asseo-accent: #17aea2;
	--asseo-accent-rgb: 23, 174, 162;
	--asseo-teal-mid: #78c6be;
	--asseo-teal-mid-rgb: 120, 198, 190;
	--asseo-mint: #b1dacf;
	--asseo-bg-light: #f3fbfa;
	--asseo-bg-light-2: #e1f7f2;
	--asseo-warning-bg: #fff7dc;
	--asseo-warning-text: #8a6d1a;
	--asseo-success-bg: #e9f7ec;
	--asseo-success-text: #2e7d32;
	--asseo-danger: #c0392b;
	/* Rojo especifico para "cancelado/negativo" (boton cancelar, badge
	   "Cancelada", montos negativos de saldo) — deliberadamente distinto
	   de --asseo-danger (errores genericos de formulario). Antes vivia
	   como hex suelto (#cc0000/#a00000) repetido en ~10 lugares de
	   portal.css; se formaliza aca sin cambiar el valor. */
	--asseo-cancelado: #cc0000;
	--asseo-cancelado-hover: #a00000;
	--asseo-star: #f6c915;
	--asseo-whatsapp: #25d366;
	--asseo-text-secondary: #596579;
	--asseo-text-tertiary: #9aa6b8;
	--asseo-label-dark: #075c5d;
	--asseo-input-text: #1a1a1a;
}

.asseo-login,
.asseo-portal,
.asseo-wizard-wrap {
	font-family: "Poppins", system-ui, sans-serif;
}

/*
 * 2026-07-29 (3ra pasada, modal de autenticacion): portado 1:1 del bloque
 * "MODAL INICIAR SESIÓN / REGISTRARSE" de Aurora Integral.dc.html —
 * tarjeta de vidrio sobre fondo oscuro degradado, pestañas Iniciar
 * sesion/Registrarse, formulario de registro completo. Como esta pagina
 * es real (no un overlay JS), el fondo ocupa toda la pantalla via
 * .asseo-auth-backdrop en vez de position:fixed.
 */
.asseo-auth-backdrop {
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 40px);
	background: radial-gradient(1100px 700px at 85% -10%, rgba(23, 174, 162, 0.22), transparent 60%),
		radial-gradient(900px 700px at 0% 110%, rgba(7, 92, 93, 0.35), transparent 55%),
		var(--asseo-dark);
}

.asseo-login {
	position: relative;
	width: min(600px, 100%);
	max-height: 92vh;
	overflow-y: auto;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(22px) saturate(160%);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 24px;
	padding: 36px;
	box-shadow: 0 30px 70px rgba(7, 92, 93, 0.28);
	box-sizing: border-box;
}

/*
 * !important a proposito: es un <a> con una sola clase (0,1,0), MENOS
 * especificidad que ".elementor-kit-832 a" (0,1,1) del Kit global de
 * Elementor, que fija color:#B1DACF (mint claro) para TODOS los enlaces
 * del sitio — sin esto el Kit gana siempre y el icono queda desvaido.
 */
.asseo-login__close {
	position: absolute;
	top: 18px;
	right: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	border: 1px solid rgba(7, 92, 93, 0.14);
	background: #fff;
	color: var(--asseo-primary) !important;
	text-decoration: none;
}

/*
 * !important a proposito: este h2 lleva una sola clase (0,1,0), MENOS
 * especificidad que ".elementor-kit-832 h2" (0,1,1) del Kit global de
 * Elementor del sitio — sin esto, el Kit gana siempre, no solo a veces.
 * Mismo mecanismo que .asseo-btn, wizard.css y portal.css ya necesitaron.
 */
.asseo-login__title {
	text-align: center !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	color: var(--asseo-primary) !important;
	margin: 0 !important;
}

.asseo-login__subtitle {
	margin-top: 4px;
	font-size: 13.5px;
	color: var(--asseo-text-secondary);
}

.asseo-login__tabs {
	display: flex;
	gap: 8px;
	margin-top: 16px;
	padding: 5px;
	background: var(--asseo-bg-light);
	border-radius: 100px;
}

/*
 * !important a proposito: la pestaña inactiva ("Registrarse" cuando
 * "Iniciar sesion" esta activa) es un <a> con una sola clase (0,1,0),
 * MENOS especificidad que ".elementor-kit-832 a" (0,1,1) del Kit de
 * Elementor, que fija color:#B1DACF (mint claro) para TODOS los enlaces
 * del sitio. Sin esto el Kit gana siempre — es exactamente por que
 * "Registrarse" se veia casi invisible sobre el fondo tambien claro del
 * modal. La pestaña ACTIVA no tenia este problema porque ".is-active"
 * suma una segunda clase (0,2,0), ya mas especifica que el Kit.
 */
.asseo-login__tab {
	flex: 1;
	padding: 10px;
	border-radius: 100px;
	font-weight: 700;
	font-size: 13.5px;
	text-align: center;
	text-decoration: none;
	color: var(--asseo-primary) !important;
}

.asseo-login__tab.is-active {
	background: var(--asseo-primary);
	color: #fff !important;
}

.asseo-login__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 20px;
}

.asseo-login__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Direccion estructurada formato colombiano (2026-08-08): select tipo de
   via + numero + complemento en una fila, apto/referencias en la
   siguiente. Compartido por los 6 formularios del plugin que capturan
   una direccion — ver
   Asseo_App_Portal_Dashboard::render_campos_direccion_estructurada(). */
.asseo-direccion-fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.asseo-direccion-fields__row {
	display: flex;
	gap: 20px;
}

.asseo-direccion-fields__row > label {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Mismo fix que wizard.css: el aviso es una aclaracion de Referencias
   puntualmente, se acerca ese campo a 6px (!important por el empate de
   especificidad con la regla generica de inputs). */
.asseo-direccion-fields [data-direccion-referencias] {
	margin-bottom: 2px !important;
}

/* "margin-bottom: 14px" (2026-08-12, pedido explicito, mismo fix que
   wizard.css) — antes "margin: 0" dejaba el campo siguiente pegado al
   ultimo renglon del aviso, sin aire entre ellos. */
.asseo-direccion-fields__ayuda {
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--asseo-text-secondary);
}

/* Texto del label en su propio <span> (ver PHP) para poder aplicarle
   "white-space:nowrap" SOLO a el, sin que el <input>/<select> intente
   quedarse en la misma linea — eso es lo que garantiza el
   flex-direction:column de arriba. Mismo fix que portal.css/wizard.css
   (2026-08-10): esta copia en login.css se habia quedado con la version
   vieja (nowrap en el <label> completo), que en Registro nunca se llego
   a reportar con screenshot pero tiene la misma causa raiz. */
.asseo-direccion-fields__label-text {
	white-space: nowrap;
}

.asseo-direccion-fields__row--principal > label:first-child {
	flex: 1.3;
}

.asseo-direccion-fields__row--principal > label:last-child {
	flex: 1.4;
}

/* Ancho minimo para que el placeholder "— Tipo de vía —" no se corte. */
.asseo-direccion-fields__row--principal > label:first-child select {
	min-width: 150px;
}

@media (max-width: 640px) {
	.asseo-direccion-fields__row {
		flex-wrap: wrap;
	}

	.asseo-direccion-fields__row > label {
		flex: 1 1 100%;
	}

	.asseo-direccion-fields__label-text {
		white-space: normal;
	}
}

.asseo-login__error {
	color: var(--asseo-danger);
	background: #fdecea;
	padding: 10px 14px;
	border-radius: 10px;
	margin-top: 14px;
	margin-bottom: 0;
	font-size: 13.5px;
}

/*
 * 2026-07-30: etiquetas mas oscuras a pedido explicito (el fondo del modal
 * es claro, #E8F5F5-ish, y el teal --asseo-primary #006B6B quedaba corto
 * de contraste comparado con lo que se pidio). --asseo-label-dark:#004F4F
 * es mas oscuro que --asseo-primary a proposito.
 */
.asseo-login label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-weight: 600;
	color: var(--asseo-label-dark);
	font-size: 13.5px;
}

.asseo-login__optional {
	color: var(--asseo-text-secondary) !important;
	font-size: 13px !important;
}

.asseo-login .field {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid rgba(7, 92, 93, 0.16);
	border-radius: 13px;
	background: var(--asseo-bg-light);
	color: var(--asseo-input-text);
	font-family: inherit;
	font-size: 14.5px;
	box-sizing: border-box;
	transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;
}

/* Hover como affordance de que el campo es interactivo, antes de que el
   usuario llegue a hacer foco/click (2026-08-09, seleccionadores). */
.asseo-login .field:hover {
	border-color: rgba(7, 92, 93, 0.32);
}

/* Flecha nativa del <select> reemplazada por una propia en teal — nunca
   habia recibido este tratamiento (a diferencia de ".asseo-profile-form
   select" en Mi perfil), asi que el texto largo de un placeholder (ej.
   "— Seleccione el metraje —") chocaba visualmente contra la flecha del
   sistema operativo. Mismo SVG/color que el resto del plugin. */
.asseo-login select.field {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23075c5d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
	cursor: pointer;
}

/* Flecha en el color de acento mientras el select tiene foco/esta abierto
   — mismo SVG, solo cambia el "stroke" a --asseo-accent (2026-08-09). */
.asseo-login select.field:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2317aea2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Color de las opciones dentro del popup nativo del <select>. Techo real:
   un <select> nativo delega el render del popup abierto al sistema
   operativo/navegador — Chrome/Firefox en Windows respetan background/color
   por <option> (incluida la fila resaltada al pasar el mouse o ya
   seleccionada), pero Safari en macOS lo ignora casi por completo y usa su
   propio menu nativo. No hay forma de aplicarle radio de borde ni sombra al
   popup en si con CSS estandar — para eso se necesitaria reconstruir el
   select como un listbox propio en JS, fuera del alcance de este ajuste. */
.asseo-login select.field option {
	background-color: #ffffff;
	color: var(--asseo-input-text);
	padding: 10px 14px;
}

.asseo-login select.field option:checked,
.asseo-login select.field option:hover {
	background-color: var(--asseo-primary);
	color: #ffffff;
}

.asseo-login .field:focus {
	outline: none;
	border-color: var(--asseo-accent);
	box-shadow: 0 0 0 4px rgba(23, 174, 162, 0.22);
}

.asseo-login .field:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.asseo-login .field::placeholder {
	color: var(--asseo-text-secondary);
	opacity: 1;
}

.asseo-login__persona-toggle {
	display: flex;
	gap: 10px;
}

.asseo-login__persona-option {
	flex: 1;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 8px !important;
	padding: 12px;
	border-radius: 13px;
	border: 1.5px solid var(--asseo-mint);
	cursor: pointer;
	font-weight: 600 !important;
	font-size: 13.5px !important;
}

.asseo-login__persona-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.asseo-login__persona-option:has(input:checked) {
	border-color: var(--asseo-accent);
	background: var(--asseo-bg-light-2);
}

.asseo-login__persona-option span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/*
 * Seccion de facturacion (antes del boton "Crear cuenta"). El toggle
 * Si/No reusa ".asseo-login__persona-option" (misma tarjeta con borde
 * mint/acento) pero apilado en columna, porque el texto de las 2 opciones
 * es mas largo que "Persona Natural/Juridica" y no entra comodo lado a
 * lado sin recortarse en movil.
 */
.asseo-login__facturacion {
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px dashed rgba(7, 92, 93, 0.16);
}

/* Seccion "Tu propiedad" al final del registro: mismo separador
   punteado que ".asseo-login__facturacion" arriba, y el mismo
   "display:flex;gap:14px" que ".asseo-login__slide-inner" mas abajo —
   sin esto, los campos quedaban pegados: ".asseo-login__form" solo le
   da su gap de 14px a sus hijos DIRECTOS, y este wrapper le agrega un
   nivel de anidamiento que rompe esa cadena (mismo motivo por el que
   ".asseo-login__slide-inner" necesita declarar su propio gap). */
.asseo-login__propiedad {
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px dashed rgba(7, 92, 93, 0.16);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.asseo-login__facturacion-question {
	margin: 0 0 10px;
	font-weight: 600;
	color: var(--asseo-label-dark);
	font-size: 13.5px;
}

.asseo-login__facturacion-toggle {
	flex-direction: column;
}

.asseo-login__facturacion-toggle .asseo-login__persona-option {
	justify-content: flex-start;
	text-align: left;
}

/*
 * Animacion slide-down SIN JS, reutilizable para cualquier campo
 * condicional del formulario (facturacion, canal de origen, lo que venga
 * despues): ".asseo-login__slide-wrap" es un grid de una sola fila que
 * anima "grid-template-rows" de 0fr a 1fr — a diferencia de max-height,
 * esto anima a la altura real del contenido sin adivinar/medir un valor
 * fijo en px. Quien la usa solo necesita agregar su propio selector
 * ":has(...)" apuntando a ".asseo-login__slide-wrap" (ver mas abajo:
 * ".asseo-login__facturacion:has(...)" y ".asseo-login__canal-origen-group:has(...)").
 */
.asseo-login__slide-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.asseo-login__slide-inner {
	overflow: hidden;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.asseo-login__slide-inner > label:first-child {
	margin-top: 16px;
}

.asseo-login__facturacion:has(input[value="diferente"]:checked) .asseo-login__slide-wrap {
	grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
	.asseo-login__slide-wrap {
		transition: none;
	}
}

/*
 * Campo "¿Quien te recomendo?" — aparece solo cuando el <select> de
 * "Canal de origen" tiene seleccionada la opcion "recomendado". Mismo
 * mecanismo ":has()" + ".asseo-login__slide-wrap" que la seccion de
 * facturacion, sin JS.
 */
.asseo-login__canal-origen-group:has(option[value="recomendado"]:checked) .asseo-login__slide-wrap {
	grid-template-rows: 1fr;
}

/*
 * 2026-07-30: toggle Persona Natural/Juridica — los campos de Natural
 * (nombres/apellidos/documento/pais/celular + el toggle de facturacion
 * Si/No) y los de Juridica (empresa + representante legal + su campo
 * unico de facturacion) son mutuamente excluyentes. Los 2 usan
 * ".asseo-login__slide-wrap"/".asseo-login__slide-inner" (misma
 * animacion generica), pero arrancan en estados opuestos: Natural abierto
 * por default (es la opcion marcada de entrada en el toggle), Juridica
 * cerrado por default (el default generico de ".asseo-login__slide-wrap"
 * ya es 0fr, no hace falta repetirlo).
 */
.asseo-login__natural-fields {
	grid-template-rows: 1fr;
}

.asseo-login__form:has(input[name="asseo_reg_tipo_persona"][value="juridica"]:checked) .asseo-login__natural-fields {
	grid-template-rows: 0fr;
}

.asseo-login__form:has(input[name="asseo_reg_tipo_persona"][value="juridica"]:checked) .asseo-login__juridica-fields {
	grid-template-rows: 1fr;
}

.asseo-login__section-heading {
	margin: 4px 0 0;
	padding-top: 14px;
	border-top: 1px dashed rgba(7, 92, 93, 0.16);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--asseo-label-dark);
}

.asseo-login__slide-inner > .asseo-login__section-heading:first-child,
.asseo-login__propiedad > .asseo-login__section-heading:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* NIT + digito de verificacion: 2 inputs unidos visualmente con un guion,
   formato pedido "000.000.000-0". */
.asseo-login__nit-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.asseo-login__nit-group .field {
	width: auto !important;
	flex: 1;
}

.asseo-login__nit-dash {
	font-weight: 700;
	color: var(--asseo-label-dark);
	flex: none;
}

.asseo-login__nit-dv {
	flex: 0 0 44px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: center;
}

/*
 * 2026-07-30: validacion en tiempo real del registro
 * (assets/js/portal-cliente/register-validation.js). El JS crea este
 * <p> despues de cada campo con reglas y le agrega/saca las clases
 * "is-valid"/"is-invalid" — el borde del propio campo tambien cambia de
 * color para reforzar la señal, no solo el texto de abajo (por
 * accesibilidad: nunca depender solo del color, ver "color-not-only" en
 * la guia de UX).
 */
.asseo-login__field-feedback {
	display: none;
	align-items: center;
	gap: 5px;
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 600;
}

.asseo-login__field-feedback.is-valid,
.asseo-login__field-feedback.is-invalid {
	display: flex;
}

.asseo-login__field-feedback.is-valid {
	color: var(--asseo-success-text);
}

.asseo-login__field-feedback.is-invalid {
	color: var(--asseo-danger);
}

.asseo-login .field.is-valid {
	border-color: var(--asseo-success-text) !important;
}

.asseo-login .field.is-invalid {
	border-color: var(--asseo-danger) !important;
}

.asseo-login .field.is-valid:focus {
	box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.18);
}

.asseo-login .field.is-invalid:focus {
	box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.18);
}

/*
 * Boton "Crear cuenta" deshabilitado hasta que todo el formulario sea
 * valido: gris, sin el estilo teal de ".asseo-btn" (que usa !important
 * en background/color, asi que el estado disabled tambien necesita
 * !important para poder pisarlo).
 */
.asseo-login__submit:disabled {
	background: #d9dde1 !important;
	color: #8a8f98 !important;
	cursor: not-allowed;
	transform: none !important;
	filter: none !important;
}

.asseo-login__submit {
	margin-top: 6px;
	width: 100%;
	text-align: center;
}

.asseo-login__remember label {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5em;
	font-weight: 400;
	color: var(--asseo-text-secondary);
}

.asseo-login--logged-in {
	text-align: center;
}

/*
 * 2026-07-30: responsive real pedido explicitamente (antes solo achicaba
 * el padding y colapsaba el grid de 2 columnas del registro). Ademas de
 * eso: el modal pasa a ocupar el 95% del ancho de pantalla (no el
 * "min(520px,100%)" pensado para desktop), los campos de correo/contrasena
 * suben a 48px de alto minimo (area de toque comoda en movil, siguiendo el
 * estandar de accesibilidad tactil de 44-48px), y el boton "Iniciar
 * Sesion"/"Crear cuenta" queda ancho completo con la misma altura minima
 * (ya era width:100% en desktop, pero se refuerza aca a proposito para que
 * quede explicito y no dependa de heredar el valor de arriba).
 */
@media (max-width: 768px) {
	.asseo-auth-backdrop {
		padding: 10px;
	}

	.asseo-login {
		width: 100%;
		padding: 26px 20px;
	}

	.asseo-login__row {
		grid-template-columns: 1fr;
	}

	.asseo-login .field {
		min-height: 48px;
	}

	.asseo-login__submit {
		width: 100%;
		min-height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
}

/*
 * El Kit global de Elementor del sitio (.elementor-kit-832) define reglas
 * para "button" y "a" con mas especificidad que un simple ".asseo-btn"
 * (".elementor-kit-832 button" y ".elementor-kit-832 a" pisan el color de
 * texto). Se fuerza aca con !important a proposito: es la unica forma de
 * garantizar que el boton se vea igual sin importar el Kit activo del
 * sitio, y el override queda acotado a esta sola clase, no a button/a
 * en general.
 */
.asseo-btn {
	display: inline-block;
	background: var(--asseo-primary) !important;
	color: #fff !important;
	font-weight: 700;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 15px;
	padding: 0.8em 1.8em;
	border-radius: 999px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.asseo-btn:hover,
.asseo-btn:focus {
	transform: translateY(-2px) scale(1.02);
	filter: brightness(1.08);
	color: #fff !important;
}

.asseo-btn--header {
	background: #fff !important;
	color: var(--asseo-primary) !important;
	padding: 0.6em 1.4em;
	font-size: 14px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.asseo-btn--header:hover {
	color: var(--asseo-primary) !important;
}

/*
 * "asseo-nav-login-btn" (2026-08-19, pedido explicito, 3ra ronda) — clase
 * PROPIA del link "Iniciar sesion"/"Mi cuenta" dentro del menu real del
 * header (produccion, ver filtrar_item_login_menu() en
 * class-portal-cliente.php — este item ya NO se inyecta suelto por
 * wp_body_open, vive adentro del <ul> del menu junto a Servicios/Cotizar
 * Ahora/Contacto). "!important" en TODAS las propiedades visuales, no
 * solo fondo/color: el widget de menu real (ElementsKit) trae su propia
 * tipografia/padding para cada item via selectores mas especificos que
 * una sola clase, sin esto el padding/radio/tamaño de fuente podrian
 * perder la cascada aunque el fondo/color si ganen. "--asseo-primary" ya
 * vale exactamente #075C5D, se deja la variable en vez de repetir el hex
 * literal. Ya NO comparte ".asseo-btn"/".asseo-btn--header" (esas 2
 * siguen existiendo para "Volver al sitio" en los topbars oscuros del
 * Portal/Reservas/Panel Admin/Portal Auxiliar, un elemento distinto que
 * este link nunca reemplaza).
 */
.asseo-nav-login-btn {
	display: inline-block !important;
	background: var(--asseo-primary) !important;
	color: #fff !important;
	border-radius: 20px !important;
	padding: 8px 20px !important;
	font-weight: 700 !important;
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 14px !important;
	text-decoration: none !important;
	border: none !important;
	box-shadow: none !important;
}

.asseo-nav-login-btn:hover {
	color: #fff !important;
	text-decoration: none !important;
}

/*
 * Aviso de politica de cancelacion: aparece en 2 lugares (paso 5 del
 * wizard de Reservas y el detalle de cada reserva activa en "Mis reservas" del
 * Portal Cliente), por eso vive aca en login.css — es dependencia
 * compartida de ambas paginas, en vez de duplicar la regla en
 * wizard.css y portal.css por separado. Colores literales (no las
 * variables --asseo-warning-*) porque se pidieron valores exactos
 * (#FFF9E6/#F0C040) distintos del amarillo de advertencia que ya usa el
 * resto del plugin.
 */
.asseo-policy-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	padding: 12px 16px;
	background: #fff9e6;
	border: 1px solid #f0c040;
	border-radius: 12px;
	color: var(--asseo-warning-text);
	font-size: 13px;
	line-height: 1.5;
}

.asseo-policy-notice svg {
	flex: none;
	margin-top: 1px;
	color: #f0c040;
}

.asseo-policy-notice strong {
	font-weight: 700;
}