/*
 * Estilos del dashboard del Portal del Cliente ([asseo_portal]).
 *
 * 2026-07-29: portado 1:1 del bloque real "PORTAL CLIENTE" en
 * Aurora Integral.dc.html (glassmorphism: fondo con gradientes radiales,
 * topbar/sidebar/cards en vidrio con backdrop-filter). Unico cambio de
 * color pedido: primario #0B5D52 -> #006B6B (var(--asseo-primary-rgb) en
 * login.css). El resto de acentos categoricos (verde/purpura/amarillo)
 * se dejaron igual que en la fuente.
 */

/*
 * Full-bleed real: con la pagina en plantilla "Elementor Canvas" (sin
 * header/footer/contenedor del tema), este wrap SI puede ocupar todo el
 * viewport, como el "position:fixed;inset:0" del diseno original.
 */
.asseo-portal-wrap {
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	padding: clamp(12px, 3vw, 24px);
	/*
	 * "overflow-x: hidden" (2026-08-20, reportado con captura: texto y
	 * bordes de tarjetas cortados contra el borde derecho de la
	 * pantalla en movil) — es el wrapper MAS EXTERNO de todo el Portal
	 * Cliente, asi que cualquier hijo que llegara a medir mas de 100%
	 * de ancho (por defaults de flexbox que no siempre se pueden
	 * eliminar del todo mas abajo en la cadena) termina de raiz sin
	 * poder generar scroll horizontal de pagina — pasa a quedar
	 * recortado prolijo en vez de asomarse fuera de la pantalla.
	 */
	overflow-x: hidden;
	background:
		radial-gradient(900px 500px at 88% -8%, rgba(23, 174, 162, 0.18), transparent 60%),
		radial-gradient(700px 500px at 4% 105%, rgba(46, 125, 50, 0.1), transparent 55%),
		linear-gradient(160deg, #f3fbfa 0%, #e1f7f2 55%, #e6f5f0 100%);
}

/*
 * Envoltorio exclusivo del dashboard de Portal Cliente (Panel Admin usa
 * ".asseo-portal" sin este wrapper, asi que no lo afecta) para que
 * header + sidebar + contenido se vean como una sola tarjeta: un unico
 * max-width (antes topbar y .asseo-portal ya coincidian en 1440px por
 * separado — dos fuentes de verdad que por ahora daban el mismo numero
 * de casualidad, esto lo deja en una sola), un unico border-radius, y
 * "overflow:hidden" para que los hijos queden recortados en las esquinas
 * sin tener que calcular a mano radios complementarios en cada uno.
 */
.asseo-portal-dashboard__card {
	max-width: 1440px;
	margin: 0 auto;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(43, 181, 175, 0.14);
}

.asseo-portal-dashboard__card .asseo-portal__topbar {
	max-width: none;
	margin: 0;
	border-radius: 16px 16px 0 0;
}

.asseo-portal-dashboard__card .asseo-portal {
	max-width: none;
	margin: 0;
	padding: 24px;
}

/*
 * Topbar (vidrio sobre el fondo degradado). "position:relative" +
 * "z-index" (2026-08-21, reportado con captura: "el componente perfil
 * se queda por debajo" al abrir el dropdown de cuenta) — el
 * "backdrop-filter" de aca abajo crea su PROPIO contexto de apilamiento
 * (igual que "filter"/"transform"/"opacity<1"), lo que ATRAPA el
 * "z-index:20" del dropdown DENTRO de este header — ese z-index solo
 * compite contra otros elementos DENTRO del header, no contra
 * ".asseo-portal" (el sidebar+contenido, hermano de este header en el
 * DOM). Como ninguno de los 2 tenia z-index propio, ganaba el orden de
 * aparicion normal: ".asseo-portal" viene DESPUES en el HTML, asi que
 * pintaba encima del header (y de cualquier cosa dentro, incluido el
 * dropdown) donde se superponen. "z-index" aca arriba, en el header
 * COMPLETO (no en el dropdown), es lo que de verdad soluciona esto —
 * hace falta "position:relative" porque un "z-index" no hace nada en un
 * elemento "position:static".
 */
.asseo-portal__topbar {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	max-width: 1440px;
	margin: 0 auto 20px;
	background: rgba(var(--asseo-primary-rgb), 0.62);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border-radius: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 16px 28px;
}

.asseo-portal__brand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.asseo-portal__logo-img {
	height: 34px;
	width: auto;
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.asseo-logo {
	font-weight: 800;
	font-size: 22px;
	color: #fff;
	display: inline-flex;
	align-items: center;
}

.asseo-logo__drop {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 2px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(45deg);
	background: linear-gradient(135deg, var(--asseo-mint), var(--asseo-accent));
}

.asseo-portal__topbar-divider {
	width: 1px;
	height: 26px;
	background: rgba(255, 255, 255, 0.18);
}

.asseo-portal__topbar-title {
	font-weight: 700;
	color: rgba(255, 255, 255, 0.8);
	font-size: 22px;
}

.asseo-portal__topbar-right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.asseo-portal__bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	flex-shrink: 0;
}

/*
 * Hamburguesa del menu movil (2026-08-21): solo visible <768px (ver
 * @media mas abajo, donde pasa a "display:inline-flex") — en escritorio
 * el sidebar sigue siendo la unica navegacion, este boton no aplica ahi.
 * "!important" en todas las propiedades visuales por el mismo motivo de
 * siempre en este plugin: "[type=button],button{...}" del reset de
 * Hello Elementor empata en especificidad con una sola clase.
 */
.asseo-portal__hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	/*
	 * "!important" en "width/height" (2026-08-21, reportado con captura:
	 * boton angosto/deforme) — bug real: el reset de Hello Elementor
	 * trae "[type=button],[type=submit],button{width:auto}" con la
	 * MISMA especificidad (0,1,0) que un solo ".asseo-portal__hamburger"
	 * sin !important. Como este es un <button> (la campana es un <a>,
	 * ese reset no la toca), sin blindar el ancho quedaba en "auto"
	 * (se achica al tamano del icono, ~20px) mientras el alto se
	 * quedaba fijo en 38/44px — un rectangulo angosto y alto en vez de
	 * un cuadrado, exactamente lo reportado.
	 */
	width: 38px !important;
	height: 38px !important;
	border-radius: 11px !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
	cursor: pointer;
	font-family: inherit !important;
	/*
	 * Bug real corregido (2026-08-21, reportado con captura: "el texto
	 * no esta alineado") — a este boton nunca se le puso "padding:0"
	 * (a diferencia de ".asseo-portal__profile-toggle", que si lo
	 * tiene desde que se creo). Sin eso, el reset de botones de Hello
	 * Elementor ("padding:.5rem 1rem", asimetrico) se aplicaba sin
	 * competencia — nada mas en la cascada declaraba "padding" para
	 * esta clase — empujando el icono fuera del centro real de la
	 * caja de 44x44 en movil.
	 */
	padding: 0 !important;
	flex-shrink: 0;
}

.asseo-portal__hamburger:active {
	transform: scale(0.94);
}

/*
 * Contenido DENTRO de la caja de la campana (2026-08-21, reportado:
 * "los botones no tienen la misma proporcion" — el hamburguesa y la
 * campana miden exactamente lo mismo en el codigo, pero este badge
 * sobresaliendo del borde ("top/right" negativos) hacia que la campana
 * se viera mas grande/irregular que el cuadrado limpio del
 * hamburguesa). "top/right" positivos + tamano mas chico = badge
 * metido en la esquina, sin salirse del boton.
 */
.asseo-portal__bell-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	background: var(--asseo-danger);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	min-width: 14px;
	height: 14px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/*
 * !important en "color" a proposito: esta pill es un <a>, y el reset del
 * tema/Kit de Elementor define color para <a> con la misma especificidad
 * (0,1,1) que ".asseo-portal__profile-pill a"... aca en cambio la clase
 * sola tiene (0,1,0), asi que sin !important el Kit le gana y el texto
 * queda en su mint claro (#B1DACF) en vez de blanco — casi invisible
 * sobre el fondo translucido del topbar (el bug reportado).
 */
.asseo-portal__profile-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	padding: 6px 12px 6px 6px;
	color: #ffffff !important;
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
	transition: background 0.2s;
	flex-shrink: 0;
}

.asseo-portal__profile-pill:hover {
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff !important;
}

.asseo-portal__profile-name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.asseo-portal__profile-avatar {
	background: var(--asseo-accent);
	color: var(--asseo-primary);
	/*
	 * "!important" en width/height (2026-08-21, reportado con captura:
	 * el avatar se ve aplastado/ovalado) — segundo caso real del mismo
	 * bug que ".asseo-portal__hamburger" (ver comentario ahi): el avatar
	 * del Portal Cliente ahora es un "<button type="button">" (antes
	 * era un <span> decorativo, ver comentario de
	 * ".asseo-portal__profile-toggle" mas abajo) — el reset de Hello
	 * Elementor "[type=button],[type=submit],button{width:auto}" tiene
	 * la MISMA especificidad (0,1,0) que este "width" sin blindar, y
	 * puede ganarle dejando el ancho en "auto" (se achica al contenido)
	 * mientras el alto (no tocado por ese reset) se queda fijo — circulo
	 * deformado. El "flex-shrink:0" de mas abajo resuelve un problema
	 * PARECIDO pero distinto (achique por falta de espacio en el
	 * flexbox); este "!important" resuelve el reset de Elementor —
	 * hacen falta los 2, no son intercambiables.
	 */
	width: 28px !important;
	height: 28px !important;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Escopado con clases propias (no ".asseo-portal__profile-pill"/
   "__profile-avatar" a secas) porque esas 2 clases base tambien las usa
   el pill del Panel Administrador, con otro icono y otro tamano — no se
   quiere tocar ese. */
.asseo-portal__profile-pill--iniciales {
	padding: 6px 16px;
}

.asseo-portal__profile-avatar--iniciales {
	width: 32px !important;
	height: 32px !important;
	background: #fff;
	color: #075c5d;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.2px;
}

/*
 * Header del Portal Cliente consolidado en una sola fila (2026-08-21,
 * pedido explicito): hamburguesa → logo → spacer → campana → avatar,
 * sin envolver a una 2da linea, altura maxima 64px, mismos colores de
 * siempre. Solo afecta a ESTE header (".asseo-portal__topbar--cliente",
 * modificador propio) — la clase base ".asseo-portal__topbar" sigue
 * intacta para el Panel Administrador, que la reusa con su propio
 * titulo/divisor/pill-con-nombre/"Volver al sitio" sin cambios.
 * "!important" en las 4 porque hay una regla de la clase base DENTRO de
 * "@media (max-width:640px)" mas abajo en este archivo
 * (".asseo-portal__topbar{padding:12px 16px}") que, sin esto, le
 * ganaria por orden de aparicion al tener la misma especificidad.
 */
.asseo-portal__topbar--cliente {
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	height: 64px !important;
	padding: 0 20px !important;
}

.asseo-portal__topbar-spacer {
	flex: 1 1 auto;
}

/*
 * El avatar pasa de <span> decorativo (dentro de un <a> "pill" con el
 * nombre al lado) a <button> real que abre el menu de cuenta — a
 * diferencia del span de antes, un <button type="button"> empata en
 * especificidad con el reset "[type=button],button{border:1px solid
 * #c36;...}" de Hello Elementor (mismo bug de siempre en este plugin,
 * ver ".asseo-portal__hamburger" arriba, que ya se protege igual).
 */
.asseo-portal__profile-toggle {
	border: none !important;
	cursor: pointer;
	font-family: inherit !important;
	padding: 0 !important;
}

.asseo-portal__profile-menu {
	position: relative;
	display: flex;
	align-items: center;
}

.asseo-portal__profile-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 210px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 45px rgba(7, 92, 93, 0.25);
	padding: 8px;
	z-index: 20;
	display: flex;
	flex-direction: column;
}

.asseo-portal__profile-dropdown[hidden] {
	display: none !important;
}

.asseo-portal__profile-dropdown-nombre {
	padding: 8px 12px 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--asseo-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * "!important" en "color" (2026-08-21, reportado con captura: "Mi
 * perfil"/"Volver al sitio" se veian en un mint palido casi ilegible) —
 * mismo bug ya documentado varias veces en este plugin (ver
 * ".asseo-portal__nav a" mas arriba): el Kit de Elementor define
 * "a{color:#B1DACF}" con la MISMA especificidad (0,1,1) que este
 * selector, y se carga despues — sin !important gana el Kit. "Cerrar
 * sesion" no se veia afectado porque ".asseo-portal__profile-dropdown-
 * logout" (mas abajo) ya tiene su propio "!important" en color.
 */
.asseo-portal__profile-dropdown a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	color: var(--asseo-primary) !important;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

.asseo-portal__profile-dropdown a:hover {
	background: var(--asseo-bg-light-2);
}

.asseo-portal__profile-dropdown-logout {
	margin-top: 4px;
	border-top: 1px solid #e0f5f5;
	border-radius: 0 0 8px 8px !important;
	padding-top: 13px !important;
	color: var(--asseo-cancelado) !important;
}

.asseo-portal {
	display: flex;
	gap: 24px;
	align-items: stretch;
	flex-wrap: wrap;
	max-width: 1440px;
	margin: 0 auto;
}

.asseo-portal__sidebar {
	flex: 0 0 230px;
	background: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	/* Borde oscurecido un poco (2026-08-13, pedido explicito) — antes
	   rgba(255,255,255,.5), casi invisible contra el fondo degradado
	   claro detras. Tinte teal en vez de gris/negro para quedarse dentro
	   de la paleta de marca. Clase compartida con el Panel Admin, que la
	   reusa sin overrides propios — el cambio se ve igual en los 2. */
	border: 1px solid rgba(7, 92, 93, 0.18);
	border-radius: 18px;
	padding: 18px 12px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* Escopado a ".asseo-portal-dashboard__card" (exclusivo del dashboard de
   Portal Cliente, ver mas arriba) para no afectar el sidebar del Panel
   Admin, que reusa la misma clase ".asseo-portal__sidebar" sin este
   divisor. */
.asseo-portal-dashboard__card .asseo-portal__sidebar {
	border-right: 2px solid #e0f0f0;
}

.asseo-portal__nav {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/*
 * !important a proposito: ".asseo-portal__nav a" (1 clase + 1 tag,
 * especificidad 0,1,1) empata con ".elementor-kit-832 a { color:
 * #B1DACF }" (el mismo bug ya documentado en login.css/wizard.css, esta
 * vez en los links del sidebar) — el Kit se carga despues en el <head>,
 * asi que sin !important gana el mint claro del Kit en vez de nuestro
 * color, que es justo el "teal claro casi ilegible" que se reporto. El
 * icono no necesita su propia regla: el SVG usa stroke="currentColor",
 * asi que hereda automaticamente el color que gane aca en el <a>.
 */
.asseo-portal__nav a,
.asseo-portal__nav-bottom a {
	display: flex;
	align-items: center;
	gap: 11px;
	color: #075c5d !important;
	padding: 12px 14px;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	transition: background 0.2s, color 0.2s;
}

.asseo-portal__nav a.is-active,
.asseo-portal__nav-bottom a.is-active {
	background: var(--asseo-accent);
	color: #fff !important;
}

.asseo-portal__nav a:not(.is-active):hover,
.asseo-portal__nav-bottom a:not(.is-active):hover {
	background: rgba(7, 92, 93, 0.08);
}

.asseo-portal__nav a svg,
.asseo-portal__nav-bottom a svg {
	flex: none;
}

.asseo-portal__nav-bottom {
	margin-top: auto;
	padding-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.asseo-portal__logout {
	color: var(--asseo-danger) !important;
}

.asseo-portal__logout:hover {
	background: rgba(192, 57, 43, 0.08) !important;
}

.asseo-portal__content {
	flex: 1;
	min-width: 260px;
	padding: 4px 8px;
	box-sizing: border-box;
	max-width: 100%;
}

/*
 * 2026-07-30: sin font-size explicito, estos titulos heredaban la
 * tipografia global de encabezados del Kit de Elementor del sitio (mucho
 * mas grande que el resto de la app), asi que se veian desproporcionados
 * frente al topbar. Se fija una escala propia, calcada de los tamaños
 * inline reales de Aurora Integral.dc.html (h2:24px, h3:19px), en vez de
 * heredar lo que sea que el tema tenga configurado.
 *
 * !important a proposito: ".asseo-portal__content h2/h3" tiene la MISMA
 * especificidad CSS que ".elementor-kit-832 h2/h3" (1 clase + 1 tag en
 * ambos casos) — sin esto, cual de las dos gana queda a la suerte del
 * orden de los <link> en el <head>, no de cual se escribio despues en el
 * codigo. Mismo problema (y misma solucion) que .asseo-btn ya tenia.
 */
.asseo-portal__content h2 {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 24px !important;
	line-height: 1.3 !important;
	/* Respaldo (2026-08-20, ver ".asseo-portal-wrap"/".asseo-portal__
	   content" mas arriba): si el nombre del cliente fuera una sola
	   palabra muy larga sin espacios, esto le permite partirse en vez
	   de forzar el titulo entero a una sola linea mas ancha que la
	   pantalla. */
	overflow-wrap: break-word;
}

.asseo-portal__content h3 {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 19px !important;
	line-height: 1.3 !important;
	margin: 28px 0 12px;
}

.asseo-portal__placeholder {
	color: var(--asseo-text-secondary);
}

/* "Mi saldo": card del monto (etiqueta gris arriba, monto grande abajo)
   — el boton "Agregar saldo" va DEBAJO, no adentro (por eso el
   margin-bottom en vez de meterlo dentro de la card). */
.asseo-portal__balance-card {
	background: #e8f5f5;
	border-left: 4px solid #075c5d;
	border-radius: 12px;
	padding: 20px;
	margin: 12px 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.asseo-portal__balance-card-texto {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.asseo-portal__balance-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--asseo-text-secondary);
}

.asseo-portal__balance-monto {
	font-size: 32px;
	font-weight: 800;
	color: #075c5d;
	/* Cifras tabulares (2026-08-20, /ui-ux-pro-max) — el ancho de cada
	   digito queda fijo, asi el monto no "tiembla" de ancho cada vez que
	   sube/baja el saldo (mismo criterio en ".movement-monto" mas abajo). */
	font-variant-numeric: tabular-nums;
}

/* Icono a la derecha del monto (2026-08-20, /ui-ux-pro-max: "mas
   profesional y organizado") — mismo tratamiento que
   ".asseo-kpi-tile__icon" (circulo/cuadrado blanco solido, icono en el
   color de marca) para que esta tarjeta y el KPI de saldo de Inicio se
   sientan del mismo lenguaje visual, en vez de que una tenga icono y la
   otra no. */
.asseo-portal__balance-card-icono {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #fff;
	color: var(--asseo-teal);
	display: flex;
	align-items: center;
	justify-content: center;
}

.asseo-portal__balance-boton {
	margin-bottom: 20px;
}

/* Tarjetas "Agregar saldo" / "Historial de movimientos" (2026-08-19,
   /ui-ux-pro-max, pedido explicito: "algo mas profesional") — mismo
   radio/espaciado que ".balance-card" arriba, pero fondo blanco + borde
   sutil en vez de relleno mint (esta si es una accion/listado, no el
   dato hero de la pantalla). Antes esto vivia suelto sobre el fondo
   blanco de la pagina, sin ningun contenedor que lo agrupe (regla
   "visual-hierarchy": jerarquia con espaciado/contraste real, no solo
   texto flotando). */
.asseo-portal__saldo-card {
	background: #fff;
	border: 1px solid #e5eceb;
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(7, 92, 93, 0.06);
}

.asseo-portal__saldo-card-titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	margin: 0 0 16px !important;
}

.asseo-portal__saldo-card-titulo svg {
	flex: none;
}

.asseo-portal__saldo-card--historial {
	padding-top: 20px;
}

/* Resumen del periodo: 2 chips en fila, sobre los movimientos visibles. */
.asseo-portal__saldo-resumen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.asseo-portal__saldo-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
}

.asseo-portal__saldo-chip svg {
	flex: none;
}

.asseo-portal__saldo-chip--recargado {
	background: #e8f5e9;
	color: #2e7d32;
}

.asseo-portal__saldo-chip--consumido {
	background: #fdecea;
	color: var(--asseo-cancelado);
}

/* "Total consumido" en $0 (2026-08-18, pedido explicito) — el rojo de
   ".consumido" arriba implica "algo que atender"; en $0 no hay nada que
   atender, asi que se pinta neutro en vez de rojo. El pedido decia
   "igual al badge 'Total recargado'", pero ese badge hoy es VERDE
   (#e8f5e9/#2e7d32, ver arriba) — copiarlo tal cual ademas confundiria
   (el verde ya significa "dinero recargado" en este mismo resumen). Se
   usa un gris neutro real en su lugar: fondo gris claro (sin token
   existente en :root para esto, se define aca) + texto con
   --asseo-text-secondary, el mismo gris oscuro que ya usa el resto del
   plugin para texto secundario (ver login.css). */
.asseo-portal__saldo-chip--consumido-cero {
	background: #eef0f2;
	color: var(--asseo-text-secondary);
}

.asseo-portal__saldo-filtro-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 0;
}

.asseo-portal__saldo-filtro-head h3 {
	margin: 0 !important;
}

.asseo-portal__saldo-filtro select {
	border: 1.5px solid var(--asseo-mint);
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--asseo-primary);
	background: #fff;
	cursor: pointer;
}

/* Estado vacio del historial (sin movimientos en el periodo elegido). */
.asseo-portal__saldo-vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 32px 16px;
	color: var(--asseo-text-secondary);
	text-align: center;
}

.asseo-portal__saldo-vacio-icono {
	color: #c7c7c7;
}

.asseo-portal__saldo-vacio p {
	margin: 0;
	font-size: 13.5px;
}

.asseo-portal__wompi-monto-form {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

/* "flex: 0 0 100%" (2026-08-19, reportado con captura: la etiqueta no
   quedaba alineada con el campo) — sin esto, en ciertos anchos de
   pantalla el flex-wrap del formulario dejaba la etiqueta y el campo en
   la MISMA fila; como ".wompi-monto-form" usa "align-items: flex-end",
   una etiqueta corta de una sola linea quedaba pegada abajo del campo
   (mas alto por su padding) en vez de a la altura de su texto — se veia
   descolgada hacia arriba. Forzar el 100% de ancho la manda SIEMPRE a
   su propia fila, sin depender de en que momento decide envolver el
   flex-wrap. */
.asseo-portal__wompi-monto-form label {
	display: block;
	flex: 0 0 100%;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--asseo-primary);
	margin-bottom: 6px;
}

/* El input de monto no tenia NINGUN estilo propio (2026-08-19,
   /ui-ux-pro-max) — heredaba el numero nativo del navegador (borde de
   1px gris generico, sin radio, sin padding) mientras el resto del
   plugin (".asseo-profile-form"/".asseo-wizard__step") si define borde/
   radio/padding propios para sus campos. Se le da la MISMA identidad
   visual que ya usa el select de "Historial" en esta misma pestaña
   (borde mint 1.5px) para que la pestaña completa se sienta consistente
   (regla "consistency": un solo lenguaje visual en toda la interfaz). */
.asseo-portal__monto-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 220px;
	min-width: 220px;
}

/* "top: 50%; transform: translateY(-50%)" (2026-08-19, reportado con
   captura: el texto no quedaba alineado) — un elemento "position:
   absolute" sale del flujo flex del contenedor, asi que el
   "align-items: center" de ".monto-input-wrap" deja de aplicarle: sin
   esto, el "$"/"COP" se quedaban en su posicion vertical "estatica" (la
   que tendrian si no fueran absolute), NO centrados con el texto del
   input. Centrado explicito, independiente del contenedor. */
.asseo-portal__monto-prefijo,
.asseo-portal__monto-sufijo {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 700;
	color: var(--asseo-text-secondary);
	pointer-events: none;
	line-height: 1;
}

.asseo-portal__monto-prefijo {
	left: 14px;
	font-size: 15px;
}

.asseo-portal__monto-sufijo {
	right: 14px;
	font-size: 12px;
	letter-spacing: 0.02em;
}

/* "input[type='text']", no "number" (2026-08-19, pedido explicito) —
   el campo paso de type="number" a type="text" (con inputmode="numeric"
   para el teclado en mobile) para poder mostrar los puntos de miles
   mientras se escribe, ver saldo.js. */
.asseo-portal__wompi-monto-form input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 52px 11px 28px;
	border: 1.5px solid var(--asseo-mint);
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--asseo-primary);
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.asseo-portal__wompi-monto-form input[type="text"]:focus {
	outline: none;
	border-color: var(--asseo-teal);
	box-shadow: 0 0 0 3px rgba(43, 181, 175, 0.18);
}

.asseo-portal__wompi-monto-form input[aria-invalid="true"] {
	border-color: var(--asseo-danger) !important;
}

/* Contenedor del boton que inyecta widget.js de Wompi (2026-08-18,
   reportado con captura: el boton quedaba cortado). "overflow: visible"
   (el widget externo puede pintar su boton mas alto de lo esperado, o
   con su propio dropdown/iframe) + "min-height" de respaldo mientras
   widget.js carga de forma asincrona y todavia no inyecto nada — SIN
   max-height, para no volver a limitar de otra forma lo mismo que este
   fix esta resolviendo. */
.asseo-portal__wompi-widget {
	overflow: visible;
	min-height: 80px;
	display: flex;
	align-items: center;
}

/* "Paga con Wompi" se ve descuadrado/cortado (2026-08-18, reportado con
   captura) — el boton lo inyecta widget.js con su propio icono + "Paga
   con" + logo en una fila, pero el reset agresivo de botones del tema
   (Elementor/Hello Elementor, el mismo problema ya visto varias veces
   en este plugin con !important en "button"/"[type=button]") le pisa el
   layout interno: fuerza su propio "width"/"white-space"/"overflow" en
   vez del que widget.js necesita para acomodar sus 3 elementos en fila
   sin recortarlos. Se reinforzan SOLO esas propiedades de layout (no
   color/padding/fuente — esos son de Wompi, no se toca su marca) con
   !important, mismo criterio ya aplicado antes en este plugin para
   ganarle en especificidad al tema. No pude confirmarlo visualmente
   (sin acceso a navegador) — si sigue viendose mal, un screenshot nuevo
   ayuda a afinar esto. */
.asseo-portal__wompi-widget button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	white-space: nowrap !important;
	width: auto !important;
	max-width: none !important;
	overflow: visible !important;
}

/* flex-basis: 100% para que ocupe una fila propia debajo del campo, sin
   depender de una envoltura extra alrededor de label+input (el form ya
   es flex-wrap, ver arriba). */
.asseo-portal__field-error {
	flex-basis: 100%;
	margin: 0;
	color: var(--asseo-danger);
	font-size: 12.5px;
	font-weight: 600;
}

.asseo-portal__hint {
	background: var(--asseo-warning-bg);
	color: var(--asseo-warning-text);
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	margin-top: 8px;
}

.asseo-portal__notice--ok {
	background: var(--asseo-success-bg);
	color: var(--asseo-success-text);
	padding: 10px 14px;
	border-radius: 10px;
	display: inline-block;
}

.asseo-portal__notice--error {
	background: #fdecea;
	color: var(--asseo-danger);
	padding: 10px 14px;
	border-radius: 10px;
	display: inline-block;
	margin-bottom: 14px;
}

/* 2026-08-26, "Agregar cliente": caso intermedio real (la cuenta SI se
   crea pero la propiedad falla al guardar) que no es ni exito total
   (verde, "--ok") ni fallo total (rojo, "--error") — mismas variables
   --asseo-warning-* ya usadas en el resto del plugin, no un amarillo
   nuevo. */
.asseo-portal__notice--warning {
	background: var(--asseo-warning-bg);
	color: var(--asseo-warning-text);
	padding: 10px 14px;
	border-radius: 10px;
	display: inline-block;
	margin-bottom: 14px;
}

/* ============ Mi perfil: secciones ============ */

.asseo-profile-form {
	/* Ancho completo (2026-08-20, pedido explicito: "el contenido debe
	   ocupar el 100% del ancho disponible del modulo") — antes tenia
	   "max-width: 620px" a proposito (angosto, tipo formulario clasico);
	   se saca del todo, el ancho real ahora lo sigue limitando el layout
	   general del portal (".asseo-portal"/".asseo-portal__topbar", tope
	   de 1440px), no este formulario en particular. */
	max-width: none;
}

/*
 * "Datos personales"/"Datos de contacto" en 2 columnas en desktop
 * (2026-08-20, pedido explicito) — grid con las 2 secciones como items
 * directos (ver el nuevo contenedor ".asseo-profile__2col" en el PHP).
 * "margin-bottom" de ".asseo-profile__section" (mas abajo en este mismo
 * archivo) queda a 0 SOLO dentro de este contenedor — el espaciado
 * vertical entre columnas ya lo da el "gap" del grid, sumar los dos
 * hubiera dejado un espacio doble.
 */
.asseo-profile__2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.asseo-profile__2col .asseo-profile__section {
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.asseo-profile__2col {
		grid-template-columns: 1fr;
	}
}

/* Base de campos: hasta ahora este formulario no tenia NINGUN estilo
   propio de input/select/textarea (se veian con la apariencia default
   del navegador — borde gris fino, radio casi recto, flecha nativa del
   select), lo que rompia el lenguaje visual redondeado/de marca del
   resto de la app. Esto es lo que realmente hacia sentir "poco
   profesional" la seccion, mas alla del layout. */
.asseo-profile-form p {
	margin: 0 0 16px;
}

/*
 * "Datos de contacto" (2026-08-10, pedido explicito): separacion clara
 * entre cada grupo de campos (Correo, Teléfono, fila de dirección, Tipo
 * de inmueble, Referencias, Ciudad/Barrio) — antes se veian apilados,
 * con solo 16px entre los <p> sueltos (Correo/Teléfono) y NADA entre
 * ".asseo-direccion-fields"/".asseo-profile__row" (son <div>, no <p>,
 * asi que ".asseo-profile-form p" arriba no les aplicaba). Escopado a
 * ".asseo-profile__section--contacto" (clase nueva en el PHP) para no
 * afectar el resto de secciones de "Mi perfil" ni el modal de "Mis
 * propiedades" (mismo ".asseo-profile-form" reusado ahi, sin esta
 * clase). Selector con ".asseo-profile-form" delante a proposito: misma
 * especificidad que ".asseo-profile-form p" de arriba (0,1,1 cada uno)
 * no alcanzaria para ganarle de forma confiable sin depender del orden
 * en el archivo.
 */
.asseo-profile-form .asseo-profile__section--contacto p,
.asseo-profile-form .asseo-profile__section--contacto .asseo-direccion-fields,
.asseo-profile-form .asseo-profile__section--contacto .asseo-profile__row {
	margin-bottom: 20px;
}

/* Filas internas de ".asseo-direccion-fields" (fila de dirección / Tipo
   de inmueble / Referencias) — mismo criterio, 20px en vez del "gap:
   12px" generico de la regla base (ver mas abajo), solo aca. */
.asseo-profile-form .asseo-profile__section--contacto .asseo-direccion-fields {
	gap: 20px;
}

.asseo-profile-form label {
	display: block;
	font-weight: 700;
	font-size: 13px;
	color: var(--asseo-primary);
	margin-bottom: 6px;
}

.asseo-profile-form input[type="text"],
.asseo-profile-form input[type="email"],
.asseo-profile-form input[type="password"],
.asseo-profile-form input[type="number"],
.asseo-profile-form select,
.asseo-profile-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	/* #cbd5e0 (2026-08-10, antes #dceded, casi invisible contra el fondo
	   blanco — mismo pedido y mismo color que ".asseo-profile__section"
	   arriba, para que toda "Mi perfil" (y el modal de "Mis propiedades",
	   que reusa esta misma clase) use un solo tono de borde). */
	border: 1.5px solid #cbd5e0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 14px;
	color: var(--asseo-primary);
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.asseo-profile-form input::placeholder,
.asseo-profile-form textarea::placeholder {
	color: var(--asseo-text-tertiary);
}

/* #94a3b8 (2026-08-10, antes var(--asseo-mint), un verde menta que ya no
   combinaba con el nuevo borde base gris-azulado #cbd5e0 — quedaba como
   un salto de color en vez de un oscurecimiento del mismo tono). */
.asseo-profile-form input:hover,
.asseo-profile-form select:hover,
.asseo-profile-form textarea:hover {
	border-color: #94a3b8;
}

.asseo-profile-form textarea {
	resize: vertical;
	min-height: 72px;
}

/* Flecha nativa del <select> reemplazada por una propia en teal — la
   flecha default del sistema operativo no combinaba con el resto de los
   campos ya restyleados. */
.asseo-profile-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 36px;
	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 12px center;
	background-size: 14px;
	cursor: pointer;
}

/* Cada grupo ("Datos personales", "Datos de contacto", etc.) es una card
   propia — aplicado a TODAS las secciones (incluidas Facturacion y
   Seguridad, que el pedido no menciono por nombre) para que no quede una
   mezcla inconsistente de secciones con card y sin card. */
/* Borde mas oscuro (2026-08-10, pedido explicito con screenshot: "los
   margenes" — las cards de cada seccion de Mi perfil — no se distinguian
   bien contra el fondo blanco con el teal clarisimo anterior). Mismo
   color que ".asseo-profile-form input/select/textarea" mas abajo, para
   que toda la pagina use un solo tono de borde consistente. */
.asseo-profile__section {
	margin-bottom: 20px;
	background: #fff;
	border: 1px solid #cbd5e0;
	border-radius: 12px;
	padding: 24px;
	box-sizing: border-box;
}

.asseo-profile__section-title {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 15.5px !important;
	margin: 0 0 8px !important;
}

.asseo-profile__divider {
	border: none;
	border-top: 1px solid rgba(7, 92, 93, 0.14);
	margin: 0 0 16px;
}

.asseo-profile__row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* 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;
}

/*
 * display:flex + flex-direction:column (2026-08-10, reemplaza el
 * "display:block" heredado de ".asseo-profile-form label") — antes el
 * texto del label y su <select>/<input> eran ambos contenido INLINE
 * (un <input>/<select> es "inline-block" por defecto en el navegador),
 * asi que en la fila --principal (con "white-space:nowrap", ver mas
 * abajo) el campo intentaba quedar en la MISMA linea que el texto en
 * vez de pasar a su propia linea como si hacia "Telefono"/"Tipo de vía"
 * (que casualmente tenian mas espacio disponible y no se notaba tanto).
 * El resultado real reportado con screenshot: "Número"/"# Complemento"
 * quedaban angostos, desalineados verticalmente con el resto de la
 * fila, y el segundo se salia del contenedor. Con flex-direction:column
 * el campo SIEMPRE pasa a su propia linea debajo del texto, sin
 * depender de si hay espacio o no en la linea de arriba.
 */
.asseo-direccion-fields__row > label {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Texto del label separado a su propio <span> (ver PHP) para poder
   aplicarle "white-space:nowrap" SOLO a el, sin que afecte a si el
   campo pasa o no a su propia linea (eso ya lo garantiza flex-direction:
   column arriba, sin depender de nowrap). */
.asseo-direccion-fields__label-text {
	white-space: nowrap;
}

/* 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);
}

.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
   (150px, pedido explicito 2026-08-10 con screenshot de "Agregar
   propiedad" — antes 140px; mismo valor replicado en wizard.css/
   login.css por consistencia con el resto del componente compartido). */
.asseo-direccion-fields__row--principal > label:first-child select {
	min-width: 150px;
}

/*
 * "Número"/"# Complemento" en "Mi perfil" (2026-08-10, pedido explicito
 * con screenshot): se veian como texto plano, sin el contenedor de los
 * demas inputs del formulario, pese a compartir la regla generica
 * ".asseo-profile-form input[type='text']" de mas abajo con el resto de
 * campos de esta misma fila — valores exactos pedidos, aplicados aca de
 * forma explicita para no depender de esa regla. Escopado por ID (los
 * unicos 2 campos con este prefijo son los de "Mi perfil" — el mismo
 * selector compartido para "Mis propiedades" usa el prefijo
 * "asseo_prop_modal", no le pega esta regla) en vez de por clase, para
 * no afectar ningun otro de los 6 formularios que reusan
 * render_campos_direccion_estructurada().
 */
#asseo_perfil_dir_numero,
#asseo_perfil_dir_complemento {
	border: 1px solid #cbd5e0;
	border-radius: 8px;
	padding: 10px 14px;
	background: #fff;
}

/* Mismo caso que "Mi perfil" arriba, ahora reportado en "Agregar
   propiedad" (2026-08-10, con screenshot): "Número"/"# Complemento" sin
   borde visible pese a la regla generica ".asseo-profile-form
   input[type='text']" de mas arriba. Escopado por ID (prefijo
   "asseo_prop_modal", exclusivo de este modal) por el mismo motivo que
   arriba — no afectar los otros 5 formularios que reusan
   render_campos_direccion_estructurada(). */
#asseo_prop_modal_numero,
#asseo_prop_modal_complemento {
	border: 1px solid #cbd5e0;
	border-radius: 8px;
	padding: 10px 14px;
	background: #fff;
}

@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-profile__row > p {
	flex: 1;
	min-width: 180px;
}

.asseo-profile__char-count {
	display: block;
	text-align: right;
	font-size: 12px;
	color: var(--asseo-text-secondary);
	margin-top: 4px;
}

/* Avatar circular 80px: foto o iniciales sobre fondo mint. La insignia
   de camara es HERMANA del circulo (".asseo-profile__avatar"), no hija
   — si fuera hija, el swap de preview de perfil.js (que hace
   "preview.innerHTML = ''" al elegir una foto nueva) la borraria. */
.asseo-profile__avatar-wrap {
	position: relative;
	width: 80px;
	height: 80px;
	margin-bottom: 18px;
}

.asseo-profile__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #e8f5f5;
	color: #075c5d;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(7, 92, 93, 0.16);
}

.asseo-profile__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.asseo-profile__avatar-iniciales {
	font-weight: 800;
	font-size: 26px;
}

/* La insignia visible es de 20px (pedido explicito), pero el <label>
   clickeable mide 40px reales — un badge de 20px como unico punto para
   cambiar la foto queda por debajo del tamaño minimo de touch target
   (44x44), asi que se agranda el area de clic sin agrandar lo que se ve. */
.asseo-profile__avatar-camara {
	position: absolute;
	right: -8px;
	bottom: -8px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.asseo-profile__avatar-camara-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid #075c5d;
	color: #075c5d;
	box-shadow: 0 2px 6px rgba(7, 92, 93, 0.25);
	transition: background 0.15s ease, color 0.15s ease;
}

.asseo-profile__avatar-camara:hover .asseo-profile__avatar-camara-badge {
	background: #075c5d;
	color: #fff;
}

/* Fecha de nacimiento: 3 selects en fila (Dia/Mes/Año). */
.asseo-profile__fecha-row {
	display: flex;
	gap: 10px;
}

.asseo-profile__fecha-row select {
	flex: 1;
	min-width: 0;
}

/* Correo deshabilitado: solo lectura, "contacta a soporte" para cambiarlo. */
.asseo-profile__input--readonly {
	background: #f2f2f2;
	color: var(--asseo-text-secondary);
	cursor: not-allowed;
}

.asseo-profile__field-hint {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--asseo-text-secondary);
}

/* Foco visible en TODOS los campos de este formulario (no en login ni
   registro, que tienen su propio estado de foco por defecto). */
.asseo-profile-form input:focus,
.asseo-profile-form select:focus,
.asseo-profile-form textarea:focus {
	outline: none;
	border-color: #075c5d;
	box-shadow: 0 0 0 3px #e8f5f5;
}

/* Facturacion en "Mi perfil": mismo mecanismo :has() que el registro
   (ver login.css, ".asseo-login__facturacion:has(...)"), pero escopado a
   esta clase propia en vez de ".asseo-login__facturacion" porque este
   formulario vive en el contexto de ".asseo-portal", no del modal de
   login/registro. */
.asseo-profile__facturacion:has(input[name="asseo_facturacion_modo"][value="diferente"]:checked) .asseo-login__slide-wrap {
	grid-template-rows: 1fr;
}

/* Barra de "Guardar cambios": sticky al fondo mientras se hace scroll de
   la pagina, con fondo blanco propio para no dejar ver el contenido
   pasando "debajo" del boton. */
.asseo-profile__submit-bar {
	position: sticky;
	bottom: 0;
	background: #fff;
	padding: 14px 0;
	display: flex;
	justify-content: center;
	z-index: 5;
}

.asseo-profile__submit {
	margin: 0;
}

/* Modal "Cambiar contraseña": mismo lenguaje visual que
   ".asseo-reserva-modal-overlay/.asseo-reserva-modal" (overlay + card
   centrada), pero con su propio nombre de clase — es un componente
   propio de "Mi perfil", no una variante del modal de reservas. */
.asseo-password-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(7, 92, 93, 0.6);
}

.asseo-password-modal-overlay[hidden] {
	display: none !important;
}

.asseo-password-modal {
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 30px 70px rgba(7, 92, 93, 0.35);
	box-sizing: border-box;
}

.asseo-password-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.asseo-password-modal__header h3 {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 18px !important;
	margin: 0 !important;
}

.asseo-password-modal__error {
	background: rgba(198, 40, 40, 0.08);
	color: #c62828;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 12px;
	border-radius: 10px;
	margin: 0 0 14px;
}

.asseo-password-modal__error[hidden] {
	display: none;
}

.asseo-password-modal__guardar {
	width: 100%;
	margin-top: 4px;
}

/* ============ Mis propiedades ============ */

.asseo-propiedad-agregar-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.asseo-portal__propiedades-vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 40px 16px;
	color: var(--asseo-text-secondary);
	text-align: center;
}

.asseo-portal__propiedades-vacio-icono {
	color: #c7c7c7;
}

.asseo-portal__propiedades-vacio p {
	margin: 0;
	font-size: 13.5px;
}

.asseo-propiedades-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin-top: 4px;
}

.asseo-propiedad-card {
	background: #fff;
	/* #cbd5e0 (2026-08-10, antes #e0f5f5, casi invisible contra el fondo
	   blanco — mismo pedido y mismo color que ".asseo-profile__section"). */
	border: 1px solid #cbd5e0;
	border-radius: 14px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.asseo-propiedad-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.asseo-propiedad-card__nombre {
	margin: 0 !important;
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 15.5px !important;
}

.asseo-propiedad-card__direccion {
	margin: 0;
	color: var(--asseo-text-secondary);
	font-size: 13px;
}

.asseo-propiedad-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.asseo-propiedad-badge {
	background: #e8f5f5;
	color: var(--asseo-primary);
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
}

/* Amarillo de advertencia: reusa las mismas variables que "Pendiente"
   (--asseo-warning-*) en vez de un amarillo nuevo, para no sumar un
   tercer tono de advertencia a la paleta ya establecida. El icono
   sustituye al emoji ⚠️ del pedido original (regla del proyecto: SVG,
   no emojis — ver notificacion_tipo_visual() para el mismo criterio). */
.asseo-propiedad-card__alerta {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	background: var(--asseo-warning-bg);
	color: var(--asseo-warning-text);
	font-size: 12.5px;
	font-weight: 600;
	padding: 10px 12px;
	border-radius: 10px;
	line-height: 1.4;
}

.asseo-propiedad-card__alerta svg {
	flex: none;
	margin-top: 1px;
}

.asseo-propiedad-card__acciones {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
	flex-wrap: wrap;
}

/* Mismo motivo de !important que ".asseo-reserva-card__cancelar-btn"
   (empate de especificidad con el reset de boton de Hello Elementor). */
.asseo-propiedad-card__eliminar {
	display: inline-flex !important;
	align-items: center;
	border: none !important;
	background: none !important;
	padding: 0 !important;
	margin-left: auto;
	color: var(--asseo-cancelado);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.asseo-propiedad-card__eliminar:hover {
	color: var(--asseo-cancelado-hover);
}

/* Modal compartido "Agregar propiedad"/"Editar" — mismo lenguaje visual
   que ".asseo-password-modal" (ver mas arriba), con su propio nombre de
   clase por la misma razon (componente propio, no una variante de otro). */
.asseo-propiedad-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(7, 92, 93, 0.6);
}

.asseo-propiedad-modal-overlay[hidden] {
	display: none !important;
}

.asseo-propiedad-modal {
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 30px 70px rgba(7, 92, 93, 0.35);
	box-sizing: border-box;
}

.asseo-propiedad-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.asseo-propiedad-modal__header h3 {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 18px !important;
	margin: 0 !important;
}

.asseo-propiedad-modal__error {
	background: rgba(198, 40, 40, 0.08);
	color: #c62828;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 12px;
	border-radius: 10px;
	margin: 0 0 14px;
}

.asseo-propiedad-modal__error[hidden] {
	display: none;
}

/* El modal reusa ".asseo-profile-form" solo para heredar el estilo de
   inputs/labels/foco ya definido para Mi perfil — no es un <form> real
   (el guardado es AJAX via fetch, no submit), asi que no hereda nada de
   comportamiento, solo la apariencia visual de los campos. */
.asseo-propiedad-modal .asseo-profile-form {
	max-width: none;
}

/* Centrado (2026-08-10, pedido explicito con screenshot: se veia
   pegado a la izquierda). ".asseo-btn" (login.css) trae
   "display: inline-block" con la MISMA especificidad que esta regla
   (0,1,0 cada una) — un empate de especificidad se resuelve por orden de
   carga, y "width: 100%" tampoco se estaba viendo (mismo motivo), asi
   que se agrega "!important" para no depender de en que orden se
   encolen los 2 archivos. Un inline-block no se centra solo con
   "margin: auto"; por eso el cambio a "display: block" tambien. */
.asseo-propiedad-modal__guardar {
	display: block !important;
	width: auto;
	margin: 4px auto 0 !important;
}

/* Confirmacion de "Eliminar propiedad" — mismo lenguaje visual que
   ".asseo-cancelar-modal" (ver mas abajo), clase propia por la misma
   razon que el resto de los modales de esta seccion. */
.asseo-eliminar-propiedad-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(7, 92, 93, 0.6);
}

.asseo-eliminar-propiedad-modal-overlay[hidden] {
	display: none !important;
}

.asseo-eliminar-propiedad-modal {
	width: min(420px, 100%);
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 30px 70px rgba(7, 92, 93, 0.35);
	text-align: center;
	box-sizing: border-box;
}

.asseo-eliminar-propiedad-modal__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	color: #e8820c;
}

.asseo-eliminar-propiedad-modal h3 {
	color: #075c5d !important;
	font-weight: 800 !important;
	font-size: 19px !important;
	margin: 0 0 10px !important;
}

.asseo-eliminar-propiedad-modal p {
	color: var(--asseo-text-secondary);
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0 0 24px;
}

.asseo-eliminar-propiedad-modal__error {
	background: #fdecea;
	color: var(--asseo-cancelado) !important;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 16px;
	text-align: left;
}

.asseo-eliminar-propiedad-modal__error[hidden] {
	display: none !important;
}

.asseo-eliminar-propiedad-modal__botones {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.asseo-eliminar-propiedad-modal__mantener {
	width: 100%;
	border: 2px solid #075c5d;
	background: #fff;
	color: #075c5d;
	border-radius: 999px;
	padding: 13px 20px;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	order: 1;
}

.asseo-eliminar-propiedad-modal__mantener:hover {
	background: #075c5d;
	color: #fff;
}

.asseo-eliminar-propiedad-modal__confirmar {
	width: auto;
	align-self: center;
	border: none;
	background: var(--asseo-cancelado);
	color: #fff;
	border-radius: 999px;
	padding: 8px 20px;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	order: 2;
}

.asseo-eliminar-propiedad-modal__confirmar:hover {
	background: var(--asseo-cancelado-hover);
}

.asseo-eliminar-propiedad-modal__mantener:disabled,
.asseo-eliminar-propiedad-modal__confirmar:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Toast de "Cambios guardados": oculto por defecto (perfil.js lo muestra
   y lo auto-oculta), fixed en la esquina para no empujar el layout. */
.asseo-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--asseo-primary);
	color: #fff;
	padding: 12px 18px;
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(7, 92, 93, 0.3);
	font-weight: 600;
	font-size: 14px;
	z-index: 1000;
	animation: asseoToastIn 0.25s ease-out;
}

.asseo-toast[hidden] {
	display: none !important;
}

@keyframes asseoToastIn {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.asseo-toast {
		animation: none;
	}
}

.asseo-portal__movements {
	list-style: none;
	padding: 0;
	margin-top: 12px;
}

.asseo-portal__movements li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 8px;
	margin: 0 -8px;
	border-radius: 10px;
	border-bottom: 1px solid #e0f5f5;
	font-size: 14px;
	transition: background 0.15s ease;
}

/* Hover sutil (2026-08-20, /ui-ux-pro-max) — pulido barato, sin cambiar
   nada de layout (ver "transform-performance": solo color, nunca
   width/height). Confirma que cada fila es una unidad propia, no una
   lista de texto plano. */
.asseo-portal__movements li:hover {
	background: rgba(7, 92, 93, 0.03);
}

.asseo-portal__movements li:last-child {
	border-bottom: none;
}

/* Circulo de icono: verde para recargas, rojo para consumos — mismo par
   de colores que ".saldo-chip"/".movement-monto" de al lado, para que
   los 3 (icono, monto, chip del resumen) cuenten la misma historia. */
.asseo-portal__movement-icono {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.asseo-portal__movement-icono.is-positive {
	background: #e8f5e9;
	color: #2e7d32;
}

.asseo-portal__movement-icono.is-negative {
	background: #fdecea;
	color: var(--asseo-cancelado);
}

.asseo-portal__movement-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.asseo-portal__movement-desc {
	font-weight: 600;
	color: var(--asseo-primary);
}

.asseo-portal__movement-fecha {
	font-size: 12px;
	color: var(--asseo-text-secondary);
}

.asseo-portal__movement-monto {
	flex: none;
	font-size: 14.5px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.asseo-portal__movement-monto.is-positive {
	color: #2e7d32;
}

.asseo-portal__movement-monto.is-negative {
	color: var(--asseo-cancelado);
}

.asseo-portal__catalogo,
.asseo-portal__promos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.asseo-portal__card {
	border: 1.5px solid var(--asseo-mint);
	border-radius: 16px;
	padding: 16px;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s;
}

.asseo-portal__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 30px rgba(43, 181, 175, 0.12);
}

.asseo-portal__precio {
	font-weight: 700;
	color: var(--asseo-primary);
	margin-top: 8px;
}

.asseo-btn[disabled] {
	opacity: 0.5 !important;
	cursor: not-allowed;
	transform: none !important;
}

.asseo-portal__subtitle {
	color: var(--asseo-text-secondary);
	margin-top: -8px;
	margin-bottom: 4px;
	overflow-wrap: break-word;
}

/* KPI tiles (Inicio) */
.asseo-kpi-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 18px 0 26px;
}

/*
 * 2026-08-04: las 3 cards KPI unificaron su fondo (antes cada una tenia
 * un tinte propio via rgba — teal, verde oscuro, primary — sobre un
 * glassmorphism con blur). La diferenciacion entre "Saldo disponible" /
 * "Proxima reserva" / "Reservas completadas" ahora viene solo del icono y el
 * contenido, no del color de fondo de la card. backdrop-filter se quito
 * junto con el fondo transparente: con un fondo solido no tiene nada
 * detras que desenfocar, hubiera quedado como CSS muerto.
 */
.asseo-kpi-tile {
	border-radius: 18px;
	padding: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: #e8f5f5;
	border: 1px solid #b1dacf;
}

.asseo-kpi-tile__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.asseo-kpi-tile--saldo .asseo-kpi-tile__label {
	color: var(--asseo-teal);
}

.asseo-kpi-tile--reserva .asseo-kpi-tile__label {
	color: var(--asseo-success-text);
}

.asseo-kpi-tile--completadas .asseo-kpi-tile__label {
	color: var(--asseo-primary);
}

.asseo-kpi-tile__label {
	font-size: 13px;
	font-weight: 600;
}

.asseo-kpi-tile__value {
	font-family: "Poppins", sans-serif;
	font-size: 26px;
	font-weight: 800;
	color: var(--asseo-primary);
}

.asseo-kpi-tile__value--muted {
	font-size: 14px;
	font-weight: 600;
}

.asseo-kpi-tile__sub {
	font-size: 13px;
	color: var(--asseo-text-secondary);
}

.asseo-kpi-tile__link {
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.asseo-kpi-tile--completadas .asseo-kpi-tile__link {
	color: var(--asseo-primary);
}

.asseo-kpi-tile__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.asseo-kpi-tile--saldo .asseo-kpi-tile__icon {
	color: var(--asseo-teal);
}

.asseo-kpi-tile--reserva .asseo-kpi-tile__icon {
	color: var(--asseo-success-text);
}

.asseo-kpi-tile--completadas .asseo-kpi-tile__icon {
	color: var(--asseo-primary);
}

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

/*
 * !important a proposito: ".clase h3" tiene la MISMA especificidad que
 * ".elementor-kit-832 h3" del Kit global de Elementor del sitio (1 clase +
 * 1 tag en ambos casos), asi que sin esto el ganador queda a la suerte del
 * orden de los <link> en el <head> — el mismo problema ya resuelto antes
 * para .asseo-btn, aplicado aca a los h2/h3/h4 (ver wizard.css, login.css).
 */
.asseo-portal__section-head h3 {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	margin: 0 !important;
}

/* Tarjetas de reservas */
.asseo-reserva-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 20px;
}

.asseo-reserva-card {
	position: relative;
	background: #fff;
	border: 1px solid #e0f5f5;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	display: flex;
	gap: 16px;
	align-items: flex-start;
	flex-wrap: wrap;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.asseo-reserva-card:not(.asseo-reserva-card--cancelada):hover {
	box-shadow: 0 6px 20px rgba(7, 92, 93, 0.12);
	border-color: var(--asseo-mint);
}

/* Card "apagada": solo para reservas Canceladas (no Completadas), para que
   se lean como algo que ya no requiere atencion del cliente. */
.asseo-reserva-card--cancelada {
	opacity: 0.6;
	background: #f9f9f9;
}

/* Titulo de cada bloque dentro de "Mis reservas" (Proximas reservas / dentro
   del <summary> de Historial). El !important es necesario: el Kit de
   Elementor define h1-h6 con la misma especificidad (0,1,1) y carga
   despues del CSS del plugin. */
.asseo-reserva-section-title {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 15px !important;
	margin: 24px 0 12px !important;
}

/* Historial colapsable DENTRO de "Mis reservas" (agrupa por ESTADO
   cancelada/completada, cerrado por defecto). No confundir con el tab
   "Historial" del menu principal, que agrupa por FECHA pasada sin
   importar el estado. */
.asseo-reserva-historial {
	margin-top: 16px;
}

/*
 * Antes era solo texto en negrita + icono flotando sobre la lista, sin
 * fondo ni borde — no se leia como algo clickeable (reportado con
 * screenshot). Ahora es un chip real: fondo, padding generoso y
 * min-height:44px (area tactil minima recomendada), con hover para dar
 * feedback de que responde al clic.
 */
.asseo-reserva-historial__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	color: var(--asseo-primary);
	font-weight: 800;
	font-size: 14px;
	padding: 12px 18px;
	min-height: 44px;
	box-sizing: border-box;
	background: #e8f5f5;
	border-radius: 10px;
	user-select: none;
	transition: background 0.2s ease;
}

.asseo-reserva-historial__toggle:hover {
	background: #d9efee;
}

.asseo-reserva-historial__toggle::-webkit-details-marker {
	display: none;
}

.asseo-reserva-historial__toggle svg {
	transition: transform 0.2s ease;
}

.asseo-reserva-historial[open] .asseo-reserva-historial__toggle svg {
	transform: rotate(180deg);
}

.asseo-reserva-historial .asseo-reserva-list {
	margin-top: 12px;
}

/* Boton "Cancelar reserva" visible — solo texto rojo subrayado, sin fondo
   ni borde, debajo de "Ver detalles".
   !important a proposito: el reset de Hello Elementor define
   [type=button],button { padding:.5rem 1rem; border:1px solid #c36 }
   con la misma especificidad (0,1,0) que este selector de una clase, y
   carga despues — sin !important gana el reset y el boton se ve grande
   y con borde. Mismo bug ya visto en otros botones del plugin. */
/*
 * 2026-08-04: paso de link rojo subrayado (texto plano, deliberadamente
 * subordinado a "Ver detalles") a boton outline rojo del mismo tamano y
 * forma que "Ver detalles" (".asseo-btn--outline.asseo-btn--sm") — pedido
 * explicito, "Cancelar reserva" ahora tiene el mismo peso visual que su par.
 * border-radius 20px y padding 6px 16px son los valores EXACTOS pedidos,
 * no el 999px pill que hereda ".asseo-btn" base. "margin-top" se mantiene
 * para separarlo un poco de la fila badge+"Ver detalles" de arriba.
 */
.asseo-reserva-card__cancelar-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: #fff !important;
	border: 1px solid var(--asseo-cancelado) !important;
	border-radius: 20px !important;
	padding: 6px 16px !important;
	margin-top: 6px !important;
	color: var(--asseo-cancelado) !important;
	text-decoration: none !important;
	font-family: "Poppins", sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.asseo-reserva-card__cancelar-btn:hover {
	background: var(--asseo-cancelado) !important;
	color: #fff !important;
}

/* "Reprogramar" (2026-08-12) — mismo patron que "Cancelar reserva"
   arriba (mismo motivo de "!important": Hello Elementor trae un reset
   de "[type=button]" con la misma especificidad, ver wizard.css para el
   detalle completo de este mismo problema), tono teal en vez de rojo
   para distinguirlo visualmente de una accion destructiva. */
.asseo-reserva-card__reprogramar-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: #fff !important;
	border: 1px solid var(--asseo-primary) !important;
	border-radius: 20px !important;
	padding: 6px 16px !important;
	margin-top: 6px !important;
	color: var(--asseo-primary) !important;
	text-decoration: none !important;
	font-family: "Poppins", sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.asseo-reserva-card__reprogramar-btn:hover {
	background: var(--asseo-primary) !important;
	color: #fff !important;
}

/*
 * "Ver detalles" no alineado con "Reprogramar"/"Cancelar reserva"
 * (2026-08-21, reportado con captura). Causa real: ".asseo-btn--sm"
 * conserva el "border-radius:999px" (pill completo) que hereda de la
 * clase base ".asseo-btn" — mientras que "Reprogramar"/"Cancelar
 * reserva" ya usaban a proposito un radius de 20px (ver comentario de
 * "Cancelar reserva" mas arriba: "NO el pill de 999px que hereda de
 * .asseo-btn", pedido explicito para que los 3 combinen). O sea la
 * intencion de match ya existia, pero "Ver detalles" nunca se
 * actualizo cuando se creo "Reprogramar" — quedaron 2 formas distintas
 * en la misma columna. Se sobreescribe SOLO aca (scoped a
 * ".asseo-reserva-card__side", ".asseo-btn--outline.asseo-btn--sm" se
 * sigue usando sin tocar en Wompi/Panel Admin) para que combine
 * exactamente con sus 2 pares. "min-width" + "justify-content:center"
 * en los 3 (regla de abajo) es lo que ademas empareja el ANCHO — antes,
 * al ser ".asseo-reserva-card__side" flex-column con "align-items:
 * flex-end", cada boton solo ocupaba el ancho de su propio texto y
 * quedaban alineados por la derecha, con el borde IZQUIERDO de cada
 * uno en un punto distinto (la desalineacion real reportada).
 */
.asseo-reserva-card__side .asseo-btn--outline.asseo-btn--sm {
	border-radius: 20px !important;
	border-width: 1px !important;
	padding: 6px 16px !important;
	font-weight: 600 !important;
}

.asseo-reserva-card__side .asseo-btn--outline.asseo-btn--sm,
.asseo-reserva-card__reprogramar-btn,
.asseo-reserva-card__cancelar-btn {
	min-width: 172px;
	justify-content: center;
	box-sizing: border-box;
}

.asseo-reserva-card__media {
	flex: none;
	width: 90px;
	height: 70px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--asseo-bg-light-2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--asseo-primary);
}

.asseo-reserva-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.asseo-reserva-card__media-iniciales {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #2bb5af;
	color: #fff;
	font-weight: 800;
	font-size: 18px;
}

/* Sin auxiliar de limpieza asignada: circulo de 56px (no el rectangulo de 90x70 de
   arriba) con "Por asignar" — el contenedor padre pierde su fondo propio
   para no dejar un rectangulo detras del circulo. */
.asseo-reserva-card__media--porasignar {
	background: none;
}

.asseo-reserva-card__media-porasignar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #e0f5f5;
	color: #075c5d;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.2;
	padding: 4px;
}

.asseo-reserva-card__body {
	flex: 1 1 260px;
	min-width: 200px;
}

.asseo-reserva-card__title-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.asseo-reserva-card__body h4 {
	margin: 0 !important;
	color: var(--asseo-primary) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
}

.asseo-reserva-card__desc {
	color: var(--asseo-text-secondary);
	font-size: 13px;
	margin: 6px 0 0;
}

/*
 * "margin-left:40px" (aca, en ".desc" y en ".banner" mas abajo) era de
 * cuando el titulo tenia un icono al lado en ".title-row" — indentaban
 * el resto para alinearse con el TEXTO del titulo, no con el icono. Ese
 * icono se quito en un cambio posterior (ver ".asseo-reserva-card__body
 * h4"), pero el margen quedo sin actualizar: el titulo volvio a
 * empezar en el borde izquierdo de la card y el resto del contenido
 * seguia indentado 40px de mas, desalineado (reportado con screenshot).
 */
.asseo-reserva-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 12.5px;
	color: var(--asseo-text-secondary);
	margin: 8px 0 0;
}

.asseo-reserva-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}

.asseo-reserva-card__meta svg {
	color: var(--asseo-teal);
}

.asseo-reserva-card__banner {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	border-radius: 11px;
	padding: 10px 12px;
	font-size: 12.5px;
	margin: 10px 0 0;
	max-width: 420px;
}

.asseo-reserva-card__banner.is-ok {
	background: var(--asseo-success-bg);
	color: var(--asseo-success-text);
}

.asseo-reserva-card__banner.is-warn {
	background: var(--asseo-warning-bg);
	color: var(--asseo-warning-text);
}

.asseo-reserva-card__banner strong {
	display: block;
}

/*
 * "Seguridad social"/"ARL" descargables (2026-08-22) — mismo lenguaje
 * visual que ".asseo-portal__badge" (pill suave) pero clickeable, para
 * que se lea como una accion (descargar) y no como un simple estado.
 * "!important" en color/text-decoration por el mismo motivo de siempre
 * en este plugin: es un <a>, y el Kit de Elementor define ambos con la
 * misma especificidad.
 */
.asseo-reserva-card__documentos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
}

.asseo-reserva-card__documento-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #e8f5f5;
	color: #075c5d !important;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background 0.2s;
}

.asseo-reserva-card__documento-link:hover {
	background: #d9efee;
}

/*
 * "Pagar ahora" (2026-08-19, pedido explicito) — bloque de reintento de
 * pago en la tarjeta de una reserva sin pago aprobado. ".asseo-btn" y
 * ".asseo-btn--outline" ya vienen protegidas contra el reset de Hello
 * Elementor desde otros lugares del plugin (login.css), no hace falta
 * repetir ese blindaje aca.
 */
.asseo-reserva-card__pagar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 10px 0 0;
	padding: 12px;
	background: var(--asseo-bg-light-2, #f5f8f8);
	border-radius: 11px;
	max-width: 420px;
}

.asseo-reserva-card__pagar-titulo {
	flex: 1 1 100%;
	margin: 0 0 2px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--asseo-primary);
}

/*
 * Bug real corregido (2026-08-20, reportado con captura: "se sale del
 * modulo y no es acorde") — este boton (".asseo-btn.asseo-btn--outline")
 * no tenia NINGUN ancho definido: es "display:inline-block" con forma
 * de pildora ("border-radius:999px" heredado de ".asseo-btn" base), asi
 * que con el texto largo real ("Pagar con mi saldo ($582.000 COP
 * disponible)") el ovalo crecia libre segun su contenido — se pasaba
 * del ancho de la tarjeta (420px) sin ningun tope, y quedaba con un
 * ancho distinto al boton solido de Wompi de al lado (que si ocupa toda
 * la fila). Ancho completo + texto que envuelve si no entra en una
 * linea: nunca desborda la tarjeta, y los 2 metodos de pago quedan del
 * mismo ancho entre si.
 */
.asseo-reserva-card__pagar-saldo-form {
	margin: 0;
	flex: 1 1 100%;
}

.asseo-reserva-card__pagar-saldo-form .asseo-btn {
	display: flex !important;
	width: 100%;
	box-sizing: border-box;
	justify-content: center;
	text-align: center;
	white-space: normal;
	line-height: 1.3;
}

.asseo-reserva-card__pagar-wompi-widget {
	flex: 1 1 100%;
}

/*
 * "Paga con Wompi" descuadrado/cortado en "Pagar esta reserva"
 * (2026-08-20, reportado con captura) — MISMO bug ya documentado y
 * corregido en ".asseo-portal__wompi-widget button" (Mi saldo, arriba
 * en este archivo): el reset de botones de Hello Elementor le pisa el
 * layout interno al boton que widget.js inyecta (icono + "Paga con" +
 * logo en una fila). Se me habia pasado copiar esa misma proteccion a
 * este 2do widget (reservas) cuando se construyo — mismas propiedades,
 * mismo criterio, ahora en los 2 lugares.
 */
.asseo-reserva-card__pagar-wompi-widget button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	white-space: nowrap !important;
	width: auto !important;
	max-width: none !important;
	overflow: visible !important;
}

/*
 * Modal "Pagar ahora con Wompi" (2026-08-20) — el icono de exito
 * (check-circle) heredaba el naranja de advertencia de
 * ".asseo-cancelar-modal__icono" (pensado para el alert-triangle del
 * modal de cancelar) — semanticamente incorrecto para un momento de
 * exito. Modificador aparte con el token real de exito ya existente en
 * el plugin ("--asseo-success-text", login.css), no un color inventado.
 * (El boton "Pagar despues" que vivio aca brevemente se quito a pedido
 * explicito — ver render_pagar_reserva_wompi_pendiente_modal() en
 * class-portal-dashboard.php para el aviso que lo reemplaza.)
 */
.asseo-modal-icono--exito {
	color: var(--asseo-success-text) !important;
}

/* "Califica tu servicio" (2026-08-13, Historial) — mismo caracter "★"
   literal ya usado en el resto del plugin para calificaciones, no un
   icono SVG de Asseo_App_Portal_Dashboard::icon(). */
.asseo-reserva-card__calificacion {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--asseo-primary);
}

.asseo-estrellas {
	display: inline-flex;
	gap: 2px;
	font-size: 15px;
	line-height: 1;
	color: #d8dde0;
}

.asseo-estrella {
	color: inherit;
}

.asseo-estrella.is-llena {
	color: #f6c915;
}

.asseo-estrellas--elegible {
	gap: 3px;
}

.asseo-estrellas--elegible .asseo-estrella {
	background: none !important;
	border: none;
	padding: 2px;
	font-size: 18px;
	cursor: pointer;
	color: #d8dde0 !important;
	line-height: 1;
}

.asseo-estrellas--elegible .asseo-estrella.is-hover {
	color: #f6c915 !important;
}

.asseo-estrellas--elegible .asseo-estrella[disabled] {
	cursor: default;
	opacity: 0.6;
}

.asseo-reserva-card__calificacion-error {
	width: 100%;
	margin: 0;
	color: var(--asseo-danger);
	font-size: 12px;
	font-weight: 500;
}

.asseo-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.asseo-reserva-card__side {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

/*
 * Tarjeta de reserva en movil angosto (2026-08-21, reportado con
 * captura: "centrame toda la informacion, bien organizada"). El layout
 * base es una fila (avatar + texto + acciones lado a lado) pensada para
 * escritorio/tablet; en un telefono angosto ".body" y ".side" no caben
 * al lado del avatar y "flex-wrap:wrap" los baja cada uno a su propia
 * fila — pero sin este bloque quedaban alineados a la IZQUIERDA (el
 * comportamiento por defecto de flex-wrap), avatar y texto pegados al
 * borde. Se fuerza el apilado en columna centrada a proposito (en vez
 * de depender del wrap organico) para que el orden y la alineacion sean
 * siempre los mismos, no algo que varie segun cuanto texto tenga cada
 * reserva.
 */
@media (max-width: 640px) {
	.asseo-reserva-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	/*
	 * Bug real corregido (2026-08-21, reportado con captura: "espacio
	 * en blanco sin info") — ".asseo-reserva-card__body" trae
	 * "flex: 1 1 260px" desde la regla base (pensado como ANCHO para
	 * el layout de escritorio, fila: avatar + body + side lado a
	 * lado). Aca arriba la card pasa a "flex-direction:column" — en
	 * ese modo el flex-basis de un item deja de ser un ancho y pasa a
	 * ser una ALTURA minima reservada, sin importar si el contenido
	 * real (titulo/fecha/direccion/banner) es mucho mas corto que
	 * 260px. Resultado: un hueco vacio fijo de ~260px antes del
	 * badge/botones, que es justo lo que se veia en la captura. Se
	 * anula el flex-basis/flex-grow aca (columna) para que el bloque
	 * solo ocupe la altura real de su contenido.
	 */
	.asseo-reserva-card__body {
		width: 100%;
		flex: 0 1 auto;
	}

	.asseo-reserva-card__title-row,
	.asseo-reserva-card__meta {
		justify-content: center;
	}

	/* El banner "Te visitara"/"Pendiente de asistente" se queda con su
	   icono y texto alineados a la izquierda DENTRO de su propia caja
	   (mismo criterio que un aviso/alerta comun) — solo se centra la
	   caja en si, no el contenido de adentro. */
	.asseo-reserva-card__banner {
		text-align: left;
		margin-left: auto;
		margin-right: auto;
	}

	.asseo-reserva-card__side {
		width: 100%;
		align-items: center;
	}
}

/* Modal de "Ver detalles" de una reserva — mismo lenguaje visual que los
   demas modales del plugin (overlay oscuro + tarjeta blanca + fade-in). */
.asseo-reserva-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(7, 92, 93, 0.6);
	animation: asseoReservaModalFadeIn 0.2s ease both;
}

.asseo-reserva-modal-overlay[hidden] {
	display: none !important;
}

@keyframes asseoReservaModalFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asseo-reserva-modal-overlay {
		animation: none;
	}
}

.asseo-reserva-modal {
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 30px 70px rgba(7, 92, 93, 0.35);
	box-sizing: border-box;
}

.asseo-reserva-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.asseo-reserva-modal__header h3 {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 18px !important;
	margin: 0 !important;
}

/* !important en color/background a proposito: es un <button>, mismo
   conflicto de especificidad con el reset de Hello Elementor que en
   ".asseo-reserva-card__cancelar-btn" (ver comentario ahi). */
.asseo-reserva-modal__cerrar-x {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border: none !important;
	background: none !important;
	border-radius: 8px;
	color: var(--asseo-text-secondary);
	cursor: pointer;
	padding: 0 !important;
}

.asseo-reserva-modal__cerrar-x:hover {
	background: var(--asseo-bg-light-2) !important;
	color: var(--asseo-primary);
}

.asseo-reserva-modal__lista {
	margin: 0 0 20px;
}

.asseo-reserva-modal__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #e0f5f5;
}

.asseo-reserva-modal__fila:last-child {
	border-bottom: none;
}

.asseo-reserva-modal__fila-label {
	font-size: 12px;
	color: var(--asseo-text-secondary);
	flex: none;
}

.asseo-reserva-modal__fila-valor {
	margin-left: auto;
	font-weight: 700;
	color: #075c5d;
	font-size: 14px;
	text-align: right;
	max-width: 60%;
	overflow-wrap: break-word;
}

.asseo-reserva-modal__auxiliar-valor {
	display: flex;
	align-items: center;
	gap: 8px;
}

.asseo-reserva-modal__auxiliar-avatar {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--asseo-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 13px;
}

.asseo-reserva-modal__auxiliar-avatar[hidden] {
	display: none;
}

.asseo-reserva-modal__auxiliar-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.asseo-reserva-modal__estado-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: capitalize;
}

.asseo-reserva-modal__estado-badge--confirmada,
.asseo-reserva-modal__estado-badge--completada {
	background: #e8f5e9;
	color: #2e7d32;
}

.asseo-reserva-modal__estado-badge--cancelada {
	background: #ffebee;
	color: var(--asseo-cancelado);
}

.asseo-reserva-modal__estado-badge--pendiente {
	background: #fff9e6;
	color: #7d5a00;
}

.asseo-reserva-modal__botones {
	display: flex;
	justify-content: center;
	gap: 12px;
}

/*
 * ".asseo-btn" de base es "display:inline-block" (sin flex), pensado
 * para texto solo — al agregarle el icono de calendario, sin esto el
 * SVG y el texto no quedan centrados entre si en la misma linea.
 * "gap"/"align-items" via inline-flex resuelve el alineado icono+texto,
 * igual que ya hacen ".asseo-btn--outline"/".asseo-btn--sm" en otros
 * botones del plugin.
 */
.asseo-reserva-modal__reagendar-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
}

/* Confirmacion de "Cancelar reserva" (reemplaza confirm() nativo). Mismo
   overlay/animacion que el resto de los modales del plugin. */
.asseo-cancelar-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(7, 92, 93, 0.6);
	animation: asseoReservaModalFadeIn 0.2s ease both;
}

.asseo-cancelar-modal-overlay[hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.asseo-cancelar-modal-overlay {
		animation: none;
	}
}

.asseo-cancelar-modal {
	width: min(420px, 100%);
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 30px 70px rgba(7, 92, 93, 0.35);
	text-align: center;
}

.asseo-cancelar-modal__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	color: #e8820c;
}

.asseo-cancelar-modal h3 {
	color: #075c5d !important;
	font-weight: 800 !important;
	font-size: 19px !important;
	margin: 0 0 10px !important;
}

.asseo-cancelar-modal__error {
	background: #fdecea;
	color: var(--asseo-cancelado) !important;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 16px;
	text-align: left;
}

.asseo-cancelar-modal__error[hidden] {
	display: none !important;
}

.asseo-cancelar-modal p {
	color: var(--asseo-text-secondary);
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0 0 24px;
}

.asseo-cancelar-modal__botones {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* "No, mantener reserva" es la opcion prominente a proposito (evitar
   cancelaciones accidentales): va primero, ocupa todo el ancho y tiene
   mas peso visual que "Si, cancelar". */
/*
 * Bug real encontrado (2026-08-20, mientras se armaba el modal de "Pagar
 * ahora con Wompi") — MISMO bug del reset de botones de Hello Elementor
 * ya documentado varias veces en este archivo, esta vez afectando un
 * boton mas antiguo que nunca se habia revisado: este boton SI tiene
 * "type=button", que empata en especificidad con el selector
 * "[type=button]" del reset del tema — sin "!important", el ORDEN en
 * el DOM decide, y el borde rosa (#c36) del tema le gana al borde teal
 * de aca. Nunca se habia notado a simple vista porque con fondo blanco
 * (estado normal) un borde de 2px rosa encima de uno teal es sutil; se
 * hizo visible recien al reusar esta clase para "Pagar despues" (ver
 * mas abajo, "asseo-pagar-wompi-modal__despues" — de ahi se descarto
 * seguir reusando esta clase, tiene semantica de "opcion prominente a
 * proposito" que no aplica ahi).
 */
.asseo-cancelar-modal__mantener {
	width: 100%;
	border: 2px solid #075c5d !important;
	background: #fff;
	color: #075c5d;
	border-radius: 999px;
	padding: 13px 20px;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	order: 1;
}

.asseo-cancelar-modal__mantener:hover {
	background: #075c5d;
	color: #fff;
	border-color: #075c5d !important;
}

/* Solida y roja tal como se pidio, pero mas chica y angosta que "No,
   mantener reserva" (arriba, ancho completo) para que esa siga leyendose
   como la opcion principal pese a que esta tiene relleno solido. */
.asseo-cancelar-modal__confirmar {
	width: auto;
	align-self: center;
	border: none;
	background: var(--asseo-cancelado);
	color: #fff;
	border-radius: 999px;
	padding: 8px 20px;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	order: 2;
}

.asseo-cancelar-modal__confirmar:hover {
	background: var(--asseo-cancelado-hover);
}

.asseo-cancelar-modal__mantener:disabled,
.asseo-cancelar-modal__confirmar:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* "Devolver a mi billetera"/"Devolver a mi cuenta bancaria" (2026-08-12)
   — 2 botones grandes en vez del unico "Si, cancelar" de antes: elegir
   uno ES la confirmacion (dispara el AJAX directo), asi que necesitan
   mas presencia que un boton de texto secundario. */
.asseo-cancelar-modal__opciones {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.asseo-cancelar-modal__opcion {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start !important;
	gap: 2px;
	width: 100%;
	border: 1.5px solid var(--asseo-mint) !important;
	border-radius: 12px !important;
	background: #fff !important;
	padding: 12px 16px !important;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.asseo-cancelar-modal__opcion strong {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--asseo-primary);
}

.asseo-cancelar-modal__opcion span {
	font-size: 12.5px;
	color: var(--asseo-text-secondary);
}

.asseo-cancelar-modal__opcion:hover {
	border-color: var(--asseo-accent) !important;
	background: var(--asseo-bg-light-2) !important;
}

.asseo-cancelar-modal__opcion:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Formulario de datos bancarios (2026-08-22, pedido explicito: "un
   pequeño formulario para la recopilacion de estos datos de devolucion
   de plata") — se revela SOLO tras elegir "Devolver a mi cuenta
   bancaria" (ver reservas.js), reemplazando a ".asseo-cancelar-modal__
   opciones" en pantalla. "text-align:left" a proposito: el modal base
   es "text-align:center" (pensado para el icono/titulo/texto corto de
   arriba), pero un formulario real con labels se lee mal centrado. */
.asseo-cancelar-modal__form-banco {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
	text-align: left;
}

.asseo-cancelar-modal__form-banco label {
	display: block;
	font-family: "Poppins", sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--asseo-primary);
}

.asseo-cancelar-modal__form-banco input,
.asseo-cancelar-modal__form-banco select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 4px;
	padding: 10px 12px;
	border: 1.5px solid var(--asseo-mint);
	border-radius: 10px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	color: #1a1a1a;
}

.asseo-cancelar-modal__form-banco input:focus,
.asseo-cancelar-modal__form-banco select:focus {
	outline: none;
	border-color: var(--asseo-accent);
	box-shadow: 0 0 0 3px rgba(23, 174, 162, 0.18);
}

/* Boton "Confirmar devolucion a esta cuenta" — a diferencia de
   ".asseo-cancelar-modal__opcion" (una card seleccionable), esta es la
   accion final del formulario: solido, ancho completo, mismo lenguaje
   visual que un submit primario. */
.asseo-cancelar-modal__opcion--confirmar {
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	background: var(--asseo-primary) !important;
	color: #fff !important;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 700;
}

.asseo-cancelar-modal__opcion--confirmar:hover {
	opacity: 0.9;
	background: var(--asseo-primary) !important;
}

.asseo-cancelar-modal__exito {
	background: var(--asseo-success-bg);
	color: var(--asseo-success-text) !important;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 16px;
	text-align: left;
}

.asseo-cancelar-modal__exito[hidden] {
	display: none !important;
}

/* Modal de aviso de cargo (reprogramacion tardia) y de aviso informativo
   (reserva creada con menos de 20 horas de anticipacion) — mismo
   contenedor/animacion que ".asseo-cancelar-modal", los botones de
   adentro reusan directamente ".asseo-cancelar-modal__mantener"/
   "__confirmar" (ver PHP), asi que no necesitan su propio CSS. */
.asseo-cargo-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(7, 92, 93, 0.6);
	animation: asseoReservaModalFadeIn 0.2s ease both;
}

.asseo-cargo-modal-overlay[hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.asseo-cargo-modal-overlay {
		animation: none;
	}
}

.asseo-cargo-modal {
	width: min(440px, 100%);
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 30px 70px rgba(7, 92, 93, 0.35);
	text-align: center;
}

.asseo-cargo-modal h3 {
	color: #075c5d !important;
	font-weight: 800 !important;
	font-size: 19px !important;
	margin: 0 0 10px !important;
}

.asseo-cargo-modal p {
	color: var(--asseo-text-secondary);
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0 0 24px;
}

.asseo-cargo-modal__error {
	background: #fdecea;
	color: var(--asseo-cancelado) !important;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 16px;
	text-align: left;
}

.asseo-cargo-modal__error[hidden] {
	display: none !important;
}

/* Modal "Reprogramar reserva" — mismo shell que ".asseo-reserva-modal"
   (Ver detalles), reusa sus clases de header/botones de cierre. */
.asseo-reprogramar-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(7, 92, 93, 0.6);
	animation: asseoReservaModalFadeIn 0.2s ease both;
}

.asseo-reprogramar-modal-overlay[hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.asseo-reprogramar-modal-overlay {
		animation: none;
	}
}

.asseo-reprogramar-modal {
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 30px 70px rgba(7, 92, 93, 0.35);
	box-sizing: border-box;
}

.asseo-reprogramar-modal__servicio {
	font-weight: 700 !important;
	color: var(--asseo-primary) !important;
	margin: 0 0 10px !important;
}

.asseo-reprogramar-modal__error {
	background: #fdecea;
	color: var(--asseo-cancelado) !important;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	margin: 12px 0 0;
	text-align: left;
}

.asseo-reprogramar-modal__error[hidden] {
	display: none !important;
}

.asseo-reprogramar-modal__botones {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.asseo-reprogramar-modal__botones .asseo-btn {
	flex: 1;
	text-align: center;
}

/* Calendario propio (2026-08-12) — MISMA copia que ".asseo-wizard__
   calendario*" en wizard.css (mismo componente, distinta pagina/
   stylesheet, ver comentario extenso en ese archivo sobre por que un
   <input type="date"> nativo no alcanza). Hello Elementor (reset.css)
   trae "[type=button], [type=submit], button" con la misma
   especificidad (0,1,0) que estas clases — de ahi el "!important". */
.asseo-wizard__calendario {
	border: 1.5px solid var(--asseo-mint);
	border-radius: 14px;
	padding: 14px;
	margin: 6px 0;
}

.asseo-wizard__calendario-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.asseo-wizard__calendario-mes {
	font-weight: 700;
	font-size: 14px;
	color: var(--asseo-primary);
	text-transform: capitalize;
}

.asseo-wizard__calendario-nav {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	border: 1.5px solid var(--asseo-mint) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--asseo-primary) !important;
	cursor: pointer;
}

.asseo-wizard__calendario-nav:hover {
	border-color: var(--asseo-accent) !important;
	background: #fff !important;
	color: var(--asseo-primary) !important;
}

.asseo-wizard__calendario-dias-semana,
.asseo-wizard__calendario-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	text-align: center;
}

.asseo-wizard__calendario-dias-semana {
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--asseo-text-secondary);
	text-transform: uppercase;
}

.asseo-wizard__calendario-vacio {
	aspect-ratio: 1;
}

.asseo-wizard__calendario-dia {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	aspect-ratio: 1;
	width: 100%;
	padding: 0 !important;
	border: 1.5px solid transparent !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: var(--asseo-primary) !important;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
}

button.asseo-wizard__calendario-dia {
	cursor: pointer;
}

button.asseo-wizard__calendario-dia:hover {
	border-color: var(--asseo-mint) !important;
	background: var(--asseo-bg-light-2) !important;
}

.asseo-wizard__calendario-dia.is-selected {
	border-color: var(--asseo-accent) !important;
	background: var(--asseo-accent) !important;
	color: #fff !important;
}

span.asseo-wizard__calendario-dia.is-disabled {
	color: #b9c4c4 !important;
	cursor: not-allowed;
}

.asseo-wizard__calendario-seleccionada {
	margin: 8px 0 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--asseo-teal) !important;
}

/* Banner de promociones */
/*
 * 2026-08-04: franja delgada de 48px (antes una card alta de 2 lineas de
 * texto + icono en caja 44x44) — el mensaje se compacto a una sola linea
 * ("white-space:nowrap" + "text-overflow:ellipsis" en vez de recortar
 * texto en el PHP: si el titulo de una promo real es mas largo, se corta
 * con "..." en vez de desbordar la franja). El icono ya no lleva caja de
 * fondo propia, solo el glifo a tamano chico al lado del texto.
 */
.asseo-portal__promo-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 48px;
	box-sizing: border-box;
	background: linear-gradient(135deg, var(--asseo-teal), var(--asseo-primary));
	color: #fff;
	border-radius: 12px;
	padding: 0 18px;
}

/*
 * Bug real corregido (2026-08-21, reportado con captura: "el mensaje se
 * corta") — "overflow"/"white-space"/"text-overflow" estaban en ESTE
 * contenedor (el flex row completo, con 2 hijos: icono + texto), no en
 * el texto en si. Limite real de CSS: "text-overflow:ellipsis" solo
 * funciona de forma confiable cuando el elemento con "overflow:hidden"
 * es el que de verdad contiene el contenido de texto que se desborda —
 * puesto en un contenedor flex con MAS de un hijo, el navegador recorta
 * el contenido pero no logra mostrar los puntos suspensivos ("…"), que
 * es exactamente lo que se veia en la captura (texto cortado a lo
 * bruto, sin "…"). Se mueve el manejo de desborde al span del mensaje
 * en si (".asseo-portal__promo-banner-mensaje" mas abajo) — este
 * contenedor solo se queda con el layout (flex row + gap).
 */
.asseo-portal__promo-banner-text {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 12.5px;
}

.asseo-portal__promo-banner-mensaje {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*
 * "Sigue igual" tras el fix anterior (2026-08-21) — el "…" ya se veia
 * bien, pero eso no resolvia el problema de fondo: el mensaje real
 * ("💰 Recarga tu saldo antes de agendar y obtén un 5% de descuento en
 * tu próximo servicio.") simplemente NO entra en una sola linea de
 * 48px junto al boton, sin importar cuanto se ajuste el CSS — es un
 * problema de contenido/espacio, no de "…" mal puesto. En pantallas
 * angostas, en vez de truncar el mensaje que es justo lo que se quiere
 * anunciar, el banner se apila: texto arriba (puede usar 2-3 lineas
 * completas, sin truncar), boton abajo a ancho completo — mismo
 * criterio ya usado para "Continuar sin adicionales"/"Confirmar
 * selección" en el wizard (ver wizard.css).
 */
@media (max-width: 480px) {
	.asseo-portal__promo-banner {
		flex-direction: column;
		align-items: stretch;
		height: auto;
		padding: 14px 16px;
		gap: 10px;
	}

	.asseo-portal__promo-banner-text {
		align-items: flex-start;
	}

	.asseo-portal__promo-banner-mensaje {
		overflow: visible;
		white-space: normal;
		text-overflow: unset;
		line-height: 1.4;
	}

	.asseo-portal__promo-banner .asseo-btn {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

.asseo-portal__promo-banner-icon {
	color: var(--asseo-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

/* Boton compacto solo dentro de esta franja — no se toca ".asseo-btn--header"
   en general porque tambien lo usa "Volver al sitio" en el topbar, a
   tamano normal. */
.asseo-portal__promo-banner .asseo-btn {
	flex: none;
	padding: 0.4em 1em !important;
	font-size: 12.5px !important;
}

/*
 * .asseo-btn (login.css) trae ":hover, :focus { color: #fff !important }"
 * generico para el boton solido (fondo teal de base), pero nunca toca
 * "background" en hover — asi que en la variante --outline (fondo blanco)
 * ese hover heredaba el fondo blanco de siempre + el color:#fff!important
 * del hover generico: texto blanco sobre fondo blanco, invisible (el bug
 * reportado en "Ver todas mis reservas"). Se fija aca con su propia regla de
 * hover completa (fondo Y texto), no solo el borde como antes.
 */
.asseo-btn--outline {
	background: #fff !important;
	color: var(--asseo-primary) !important;
	border: 1.5px solid var(--asseo-primary) !important;
	box-shadow: none;
}

.asseo-btn--outline:hover {
	background: var(--asseo-primary) !important;
	color: #fff !important;
	border-color: var(--asseo-primary) !important;
}

.asseo-btn--sm {
	padding: 0.5em 1.1em !important;
	font-size: 13px !important;
}

.asseo-btn--header,
.asseo-btn--outline,
.asseo-btn--sm {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Sin text-transform: los textos de estado ya vienen bien escritos
   ("Confirmada", "Pendiente de asistente") — "capitalize" los rompia
   poniendo mayuscula en CADA palabra ("Pendiente De Asistente"). */
.asseo-portal__badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--asseo-bg-light-2);
	color: var(--asseo-primary);
	border-radius: 999px;
	padding: 5px 13px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.asseo-portal__badge--confirmada {
	background: var(--asseo-success-bg);
	color: var(--asseo-success-text);
}

/* Verde exacto pedido para "Completada", distinto del verde generico de
   --asseo-success-* que usa "Confirmada". */
.asseo-portal__badge--completada {
	background: #e8f5e9;
	color: #2e7d32;
}

/* Rojo exacto pedido para el estado "Cancelada" (--asseo-cancelado),
   distinto del --asseo-danger generico que usan otros mensajes de error. */
.asseo-portal__badge--cancelada {
	background: #fdecea;
	color: var(--asseo-cancelado);
}

.asseo-portal__badge--pendiente {
	background: var(--asseo-warning-bg);
	color: var(--asseo-warning-text);
}

/*
 * "Agendar servicio" (2026-08-10): la card "Tu último servicio" con los
 * botones "Reservar igual"/"Nueva reserva" se elimino a pedido explicito
 * (junto con todas las reglas ".asseo-portal__repetir-*" que la
 * estilizaban) — un solo boton centrado "Empezar reserva" la reemplaza,
 * ver ".asseo-portal__agendar-empezar" mas abajo.
 */

/* Mini-resumen de los 5 pasos del wizard de Reservas (solo informativo,
   no tiene estado activo/completado como el stepper real dentro del
   wizard). La linea punteada usa los mismos insets "10%/10%" que ya usa
   ".asseo-wizard__stepper-line-track" para 5 items en flex:1 — el
   centro del primer/ultimo circulo cae ahi, no en el 0%/100%. */
.asseo-portal__agendar-pasos {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin: 16px 0 24px;
	padding: 0 4px;
}

.asseo-portal__agendar-pasos::before {
	content: '';
	position: absolute;
	top: 20px;
	left: 10%;
	right: 10%;
	border-top: 2px dashed #b1dacf;
	z-index: 0;
}

.asseo-portal__agendar-paso {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.asseo-portal__agendar-paso-icono {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #e8f5f5;
	color: #075c5d;
	display: flex;
	align-items: center;
	justify-content: center;
}

.asseo-portal__agendar-paso-texto {
	font-size: 11px;
	font-weight: 600;
	color: var(--asseo-text-secondary);
	text-align: center;
	line-height: 1.3;
	max-width: 84px;
}

/* "Empezar reserva" (2026-08-10, reemplaza la card "Tu último servicio"
   y sus 2 botones): un solo boton, centrado, mismo espaciado que el
   resto de bloques de esta pestaña. */
.asseo-portal__agendar-empezar {
	margin: 20px 0 0;
	text-align: center;
}

@media (max-width: 640px) {
	/* Colapsa a 2 filas (3 arriba, 2 abajo) — la linea punteada, pensada
	   para una sola fila recta, no tiene sentido partida en 2 filas. */
	.asseo-portal__agendar-pasos {
		flex-wrap: wrap;
		row-gap: 16px;
	}

	.asseo-portal__agendar-pasos::before {
		display: none;
	}

	.asseo-portal__agendar-paso {
		flex: 0 0 33.333%;
	}
}

/* Promociones */
.asseo-portal__promo-card {
	border: 1.5px solid var(--asseo-mint);
	border-radius: 16px;
	padding: 16px;
}

.asseo-portal__promo-codigo {
	display: inline-block;
	background: var(--asseo-bg-light-2);
	color: var(--asseo-primary);
	font-weight: 800;
	letter-spacing: 0.05em;
	padding: 4px 10px;
	border-radius: 8px;
	margin-top: 8px;
}

.asseo-portal__promo-vigencia {
	color: var(--asseo-text-tertiary);
	font-size: 12px;
	margin-top: 6px;
}

/* Notificaciones */
/* !important en todo el bloque: el selector de reset de Hello Elementor
   "[type=button],[type=submit],button" empata en especificidad con esta
   clase y carga despues en el <head>, asi que sin !important gana el y
   convierte el link en un boton pill relleno (ver Adicionales/otros
   botones del portal para el mismo patron). */
.asseo-portal__notif-marcar-todas {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	color: #075c5d !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	line-height: 1 !important;
	text-transform: none !important;
	text-decoration: underline !important;
	cursor: pointer !important;
}

.asseo-portal__notif-marcar-todas:hover {
	color: #054443 !important;
}

/* Separador de seccion por fecha (Hoy/Ayer/Esta semana/Anteriores) —
   !important por el mismo motivo que ".asseo-portal__content h2/h3" mas
   arriba (empate de especificidad con el Kit de Elementor). */
.asseo-portal__notif-seccion {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 12.5px !important;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin: 20px 0 10px !important;
}

.asseo-portal__notif-seccion:first-of-type {
	margin-top: 8px !important;
}

.asseo-portal__notificaciones {
	list-style: none;
	padding: 0;
	margin: 0 0 4px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* El color de "border-left" y del icono vienen inline (data-driven por
   tipo de notificacion, ver notificacion_tipo_visual()) — aca solo el
   grosor/estilo del borde y el resto de la tarjeta. */
.asseo-portal__notif {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fff;
	border: 1.5px solid var(--asseo-mint);
	border-left-width: 4px;
	border-left-style: solid;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 13.5px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.asseo-portal__notif.is-unread {
	background: #e8f5f5;
}

/* Punto de "no leida": desaparece solo (junto con toda la clase
   "is-unread") cuando notificaciones.js la marca como leida, sin volver
   a pintar el resto de la card. */
.asseo-portal__notif.is-unread::after {
	content: '';
	position: absolute;
	top: 12px;
	right: 12px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #075c5d;
}

.asseo-portal__notif-icono {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.04);
}

.asseo-portal__notif-cuerpo {
	flex: 1;
	min-width: 0;
	padding-right: 16px;
}

.asseo-portal__notif-cuerpo strong {
	display: block;
	color: var(--asseo-primary);
	font-weight: 700;
	font-size: 14px;
}

.asseo-portal__notif-cuerpo p {
	margin: 4px 0 0;
	color: var(--asseo-text-secondary);
}

.asseo-portal__notif-time {
	color: var(--asseo-text-tertiary);
	font-size: 11.5px;
	display: block;
	margin-top: 6px;
}

/* Flecha de "esta notificacion navega a algo" (2026-08-23) — solo
   presente cuando la notificacion trae "enlace" (ver PHP), asi que no
   todas las cards la tienen. */
.asseo-portal__notif-flecha {
	flex: none;
	align-self: center;
	color: var(--asseo-text-tertiary);
}

.asseo-portal__notif-vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 40px 16px;
	color: var(--asseo-text-secondary);
	text-align: center;
}

.asseo-portal__notif-vacio-icono {
	color: #c7c7c7;
}

.asseo-portal__notif-vacio p {
	margin: 0;
	font-size: 13.5px;
}

/* Ayuda y soporte (rediseño 2026-08-18, /ui-ux-pro-max) — los 3 datos de
   contacto pasan de filas sueltas con borde propio (se leian como inputs
   deshabilitados) a una sola tarjeta con divisores internos entre items,
   icono real en circulo + jerarquia etiqueta/valor. */
.asseo-portal__ayuda-subtitulo {
	margin: -6px 0 20px;
	font-size: 13.5px;
	color: var(--asseo-text-secondary);
}

.asseo-portal__ayuda-card {
	background: #fff;
	border: 1px solid var(--asseo-mint);
	border-radius: 16px;
	padding: 4px 16px;
	margin-bottom: 20px;
	box-shadow: 0 2px 12px rgba(7, 92, 93, 0.06);
}

.asseo-portal__ayuda-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
}

.asseo-portal__ayuda-item + .asseo-portal__ayuda-item {
	border-top: 1px solid var(--asseo-bg-light-2);
}

.asseo-portal__ayuda-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--asseo-bg-light-2);
	color: var(--asseo-primary);
}

.asseo-portal__ayuda-texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.asseo-portal__ayuda-label {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--asseo-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.asseo-portal__ayuda-valor {
	font-size: 14.5px;
	font-weight: 600;
	color: #1a1a1a;
	overflow-wrap: anywhere;
}

.asseo-portal__ayuda-pendiente {
	flex: none;
	color: var(--asseo-warning-text);
	background: var(--asseo-warning-bg);
	font-size: 12px;
	padding: 2px 10px;
	border-radius: 999px;
	font-weight: 700;
}

.asseo-btn--whatsapp {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px;
	background: var(--asseo-whatsapp) !important;
}

/*
 * Responsive real: en pantallas angostas el sidebar se convierte en una
 * barra horizontal con scroll (patron estandar para sidebars de dashboard
 * en movil) en vez de una lista larga apilada que empuja el contenido muy
 * abajo. El topbar aprieta espaciados y esconde el texto de "Portal de
 * Cliente" para dejar lugar a los botones de la derecha.
 */
@media (max-width: 900px) {
	.asseo-portal {
		flex-direction: column;
	}

	.asseo-portal__sidebar {
		flex: none;
		width: 100%;
		box-sizing: border-box;
		flex-direction: row;
		align-items: stretch;
		padding: 10px;
		gap: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.asseo-portal__nav {
		flex-direction: row;
		gap: 6px;
	}

	.asseo-portal__nav a,
	.asseo-portal__nav-bottom a {
		white-space: nowrap;
		padding: 10px 14px;
		font-size: 13px;
	}

	.asseo-portal__nav-bottom {
		flex-direction: row;
		margin-top: 0;
		padding-top: 0;
		padding-left: 6px;
		border-top: none;
		border-left: 1px solid rgba(7, 92, 93, 0.15);
	}
}

@media (max-width: 640px) {
	.asseo-portal__topbar {
		padding: 12px 16px;
	}

	.asseo-portal__topbar-title {
		display: none;
	}

	.asseo-portal__profile-name {
		display: none;
	}

	.asseo-btn--header {
		padding: 0.5em 0.9em !important;
	}

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

	/* "Mis propiedades" (auditoria de responsividad, 2026-08-19): con
	   "minmax(260px, 1fr)" el grid no se encoge por debajo de 260px —
	   sumado al padding fijo acumulado del layout (wrap + card +
	   content), eso fuerza scroll horizontal en viewports <= 347px
	   (ej. 320px, gama baja). Una sola columna elimina la dependencia
	   del ancho exacto de pantalla. */
	.asseo-propiedades-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	/* 6. Sidebar oculto por completo en movil, reemplazado por el menu
	   hamburguesa de mas arriba (icono en el topbar). */
	.asseo-portal__sidebar {
		display: none !important;
	}

	/*
	 * "min-width: 0" en vez de los 260px de escritorio (2026-08-20,
	 * reportado con captura: contenido cortado contra el borde derecho
	 * de la pantalla) — esos 260px existen para el layout de ESCRITORIO
	 * (contenido al lado del sidebar, nunca debe apretarse mas de eso).
	 * En movil ".asseo-portal" pasa a "flex-direction:column" (un solo
	 * hijo real por fila, el sidebar ya esta oculto arriba), asi que ese
	 * piso de 260px no protege nada — solo puede forzar que el
	 * contenido pida mas ancho del que la pantalla real tiene. "min-
	 * width:0" es el valor que de verdad permite que un item flex se
	 * achique/envuelva su texto en vez de imponer un minimo.
	 */
	.asseo-portal__content {
		min-width: 0;
	}

	/* 0. Hamburguesa del menu (2026-08-21): solo se muestra en movil,
	   misma area tactil 44x44 que el resto de iconos del topbar.
	   "!important" en width/height por el mismo motivo que en la
	   version de escritorio (ver comentario ahi, mas arriba). */
	.asseo-portal__hamburger {
		display: inline-flex;
		width: 44px !important;
		height: 44px !important;
	}

	/* 1. El separador que hoy vive entre el logo y el titulo "Portal de
	   Cliente" queda, con el titulo oculto (ver @media 640px de arriba),
	   como si separara el logo de los iconos de la derecha. Se oculta
	   solo ese (el de ".asseo-portal__brand"), no el que separa
	   campana/perfil dentro de ".asseo-portal__topbar-right". */
	.asseo-portal__brand .asseo-portal__topbar-divider {
		display: none;
	}

	/* 2. "Volver al sitio": solo icono, area tactil 44x44. El texto sigue
	   en el DOM via aria-label (ver PHP) para lectores de pantalla. */
	.asseo-portal__volver-texto {
		display: none;
	}

	.asseo-portal__volver-btn {
		width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 0;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	/* 3. Campana: area tactil 44x44 y badge visible con el teal de marca
	   (no el rojo generico que usa en desktop) — contenido dentro de la
	   caja de 44x44, mismo criterio que la version de escritorio de
	   arriba (ver comentario ahi). */
	.asseo-portal__bell {
		width: 44px;
		height: 44px;
	}

	.asseo-portal__bell-badge {
		background: #075c5d;
		color: #fff;
		font-size: 10px;
		font-weight: 800;
		min-width: 16px;
		height: 16px;
		top: 3px;
		right: 3px;
		padding: 0 3px;
	}

	/* 4. Avatar CP: minimo 44x44. */
	.asseo-portal__profile-avatar--iniciales {
		width: 44px !important;
		height: 44px !important;
		font-size: 16px;
	}

	.asseo-portal__profile-pill--iniciales {
		padding: 4px;
	}
}

/*
 * Menu movil (drawer/hoja que abre el hamburguesa del topbar, <768px):
 * reemplaza al sidebar de escritorio por completo (2026-08-21, pedido
 * explicito "hazlo tipo hamburguesa, reemplazando TODO el bottom nav").
 * Antes solo agrupaba 2 pestañas sueltas ("Mis propiedades"/"Ayuda") que
 * no entraban en una barra de 4 items; ahora repite el MAIN_NAV completo
 * (7 items) + Ayuda + Cerrar sesion, mismo lenguaje visual que
 * ".asseo-password-modal-overlay/.asseo-password-modal" (overlay +
 * card), anclada abajo (bottom sheet) en vez de centrada, mas natural en
 * movil — el trigger que la abre solo existe en el topbar movil, que ya
 * esta oculto en desktop, asi que no hace falta repetir el
 * "display:none" de escritorio aca.
 */
.asseo-portal__mas-overlay {
	position: fixed;
	inset: 0;
	z-index: 600;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(7, 92, 93, 0.6);
}

.asseo-portal__mas-overlay[hidden] {
	display: none !important;
}

.asseo-portal__mas-modal {
	width: 100%;
	max-width: 480px;
	max-height: 80vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 20px 20px 0 0;
	padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
	box-shadow: 0 -10px 40px rgba(7, 92, 93, 0.25);
	box-sizing: border-box;
}

/*
 * ".asseo-portal__nav { flex-direction: row }" (@media 900px, mas
 * arriba en este archivo) es para el sidebar-como-barra-horizontal de
 * tablet — <900px sigue activo tambien en el rango <768px de esta hoja,
 * y sin este override los 7 items de MAIN_NAV quedarian en una sola
 * fila "nowrap" desbordando el ancho del bottom sheet. 2 clases
 * (0,2,0) le gana sin depender del orden en el archivo.
 */
.asseo-portal__mas-modal .asseo-portal__nav {
	flex-direction: column;
	gap: 3px;
}

.asseo-portal__mas-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.asseo-portal__mas-modal__header h3 {
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	margin: 0 !important;
}

.asseo-portal__mas-modal__cerrar {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: rgba(7, 92, 93, 0.06) !important;
	border: none !important;
	border-radius: 50%;
	color: #075c5d !important;
	cursor: pointer;
	flex: none;
}

.asseo-portal__mas-modal .asseo-portal__nav-bottom {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid rgba(7, 92, 93, 0.1);
}