/**
 * Portal de Auxiliares de Limpieza (2026-08-18, pedido explicito).
 *
 * Mobile-first a proposito: las auxiliares usan el portal desde el
 * celular (pedido explicito), asi que el CSS base de este archivo es
 * para pantallas chicas (<=480px) y las media queries SOLO agregan
 * comodidades de pantalla grande (max-width del contenido, grid de
 * varias columnas) — nunca al reves.
 *
 * Variables de color: reusa las MISMAS --asseo-* ya definidas en
 * portal-cliente/login.css (--asseo-primary #075c5d, --asseo-teal
 * #2bb5af, etc. — login.css se enqueue como dependencia de este archivo,
 * ver Asseo_App_Portal_Auxiliar::enqueue_assets()) mas el literal
 * #e8f5f5 pedido explicito para fondos claros — el mismo hex que ya usa
 * Panel Admin para badges/tarjetas claras, no una variable centralizada
 * hoy en el plugin.
 */

/* Fondo de pagina (2026-08-18, "hay que se distinga el fondo con el
   modulo") — antes esta pagina era blanca lisa y la card usaba un
   fondo casi igual de claro (#f0fafa), por eso apenas se notaba el
   limite de la card. Se probo un degradado teal (igual al Portal del
   Cliente) el mismo dia, pero se revirtio a solido #e8f5f5 por pedido
   explicito. La card pasa a fondo blanco solido + sombra (ver
   ".asseo-aux-card" mas abajo) para que quede claramente "elevada"
   sobre ese fondo.
   "Mas redondeado y estetico" (2026-08-18, /ui-ux-pro-max, mismo dia)
   — se mantiene el #e8f5f5 solido como base (no se vuelve a tocar esa
   decision), pero se le suman 2 manchas de color difuminadas (glass-
   morphism sutil, mismos tonos --asseo-accent/--asseo-mint que ya usa
   el Portal del Cliente en ".asseo-portal-wrap") para darle profundidad
   sin perder el tono plano pedido. Son 2 capas de radial-gradient ANTES
   del color solido (ultima capa = la de mas atras). */
.asseo-aux-wrap {
	max-width: 480px;
	margin: 0 auto;
	min-height: 100vh;
	min-height: 100dvh;
	box-sizing: border-box;
	padding: 16px 16px 32px;
	font-family: "Poppins", sans-serif;
	color: #1a1a1a;
	/* Esquinas redondeadas (2026-08-18, pedido explicito) — antes este
	   fondo era un rectangulo de esquinas rectas contra el blanco de la
	   pagina real detras. */
	border-radius: 24px;
	background:
		radial-gradient(600px 380px at 92% -8%, rgba(23, 174, 162, 0.22), transparent 62%),
		radial-gradient(520px 360px at 2% 108%, rgba(177, 218, 207, 0.55), transparent 58%),
		#e8f5f5;
}

@media (min-width: 768px) {
	.asseo-aux-wrap {
		max-width: 720px;
		padding: 24px 24px 48px;
	}

	/* Restaura el comportamiento "una sola linea con puntos suspensivos"
	   pedido originalmente para ".asseo-aux-saludo" — en escritorio
	   (720px de ancho de card) la frase completa entra de sobra. */
	.asseo-aux-saludo {
		font-size: 28px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ================= TOPBAR ================= */

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

.asseo-aux-topbar__usuario {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Avatar circular con iniciales (2026-08-18, pedido explicito) — mismo
   patron estructural que ".asseo-portal__profile-avatar--iniciales" del
   Portal del Cliente (circulo + iniciales centradas), colores propios
   (fondo #2bb5af / texto blanco) pedidos para este portal. */
.asseo-aux-topbar__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--asseo-teal);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}

.asseo-aux-topbar__saludo {
	font-size: 15px;
	font-weight: 700;
	color: var(--asseo-primary);
}

.asseo-aux-topbar__logout {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--asseo-text-secondary, #6b6b6b) !important;
	text-decoration: none !important;
}

/* ================= TABS ================= */

.asseo-aux-tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin-bottom: 20px;
	padding: 4px;
	/* Blanco transparente (2026-08-18, pedido explicito) — antes #e8f5f5,
	   que se veia "de fondo" en cada tab inactivo (son transparentes,
	   dejan ver el fondo del contenedor). */
	background: transparent;
	border-radius: 20px;
}

.asseo-aux-tab {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 2px;
	padding: 8px 4px !important;
	border-radius: 14px !important;
	border-bottom: 2px solid transparent !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	text-align: center;
	color: var(--asseo-primary) !important;
	text-decoration: none !important;
	background: transparent !important;
}

.asseo-aux-tab.is-active {
	background: var(--asseo-primary) !important;
	color: #fff !important;
	/* Indicador adicional (2026-08-18) — pedido originalmente en el
	   mismo #075c5d del fondo solido de este tab, pero ese color no
	   aporta contraste propio ahi (se funde con el relleno). Se usa
	   var(--asseo-mint) en su lugar, confirmado con el usuario, para que
	   el borde SI se note sobre el fondo solido. */
	border-bottom: 2px solid var(--asseo-mint) !important;
}

/* ================= BOTONES / CAMPOS ================= */

.asseo-aux-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px;
	width: 100%;
	padding: 12px 18px !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: "Poppins", sans-serif;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: opacity 0.15s ease;
}

.asseo-aux-btn--primario {
	background: var(--asseo-primary) !important;
	color: #fff !important;
}

.asseo-aux-btn--primario:hover {
	opacity: 0.9;
}

.asseo-aux-btn--outline {
	background: #fff !important;
	color: var(--asseo-primary) !important;
	border: 1.5px solid var(--asseo-teal) !important;
}

.asseo-aux-field,
.asseo-aux-form select,
.asseo-aux-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	margin-top: 4px;
	border: 1.5px solid var(--asseo-teal);
	border-radius: 14px;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	color: #1a1a1a;
}

.asseo-aux-form label {
	display: block;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--asseo-primary);
}

.asseo-aux-notice {
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 14px;
}

.asseo-aux-notice--error {
	background: rgba(192, 57, 43, 0.1);
	color: var(--asseo-danger);
}

.asseo-aux-notice--ok {
	background: var(--asseo-success-bg, #e9f7ec);
	color: var(--asseo-success-text, #2e7d32);
}

/* ================= LOGIN / CAMBIO DE CONTRASEÑA ================= */

.asseo-aux-login-wrap {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	/* Mismo fondo que ".asseo-aux-wrap" (2026-08-18, incluidas las
	   manchas difuminadas y las esquinas redondeadas) — login y
	   dashboard comparten el mismo fondo de pagina, consistencia entre
	   las 2 pantallas de este portal. */
	border-radius: 24px;
	background:
		radial-gradient(600px 380px at 92% -8%, rgba(23, 174, 162, 0.22), transparent 62%),
		radial-gradient(520px 360px at 2% 108%, rgba(177, 218, 207, 0.55), transparent 58%),
		#e8f5f5;
	box-sizing: border-box;
}

.asseo-aux-login {
	width: 100%;
	max-width: 380px;
	background: #fff;
	border-radius: 28px;
	padding: 28px 22px;
	box-sizing: border-box;
	box-shadow: 0 10px 30px rgba(7, 92, 93, 0.12);
}

/* ================= SALUDO / VACIO ================= */

/* "!important" en tamaño/peso (2026-08-18, pedido explicito: "reducir a
   28px/600") — mismo motivo ya documentado muchas veces en este plugin
   para "h1"-"h6"/"button": el reset de Hello Elementor y el Kit de
   Elementor traen su propia regla para "h2" con la MISMA o mayor
   especificidad que una sola clase, y ganaban la cascada — por eso se
   veia mas grande/mas bold que lo que este archivo ya declaraba antes
   de este cambio. */
.asseo-aux-saludo {
	margin: 0 0 18px;
	/* Tamaño reducido en movil (auditoria de responsividad, 2026-08-19):
	   el h2 no contiene solo el nombre, sino la frase completa
	   ("¡Hola, Maria! Hoy tienes 3 servicios.") — a 28px con nowrap/
	   ellipsis esa frase no entraba en el ancho de pantalla chico y el
	   ellipsis se comia justo el dato de cuantos servicios hay hoy. En
	   movil se permite el salto de linea; el nowrap/ellipsis pedido
	   originalmente se restaura en escritorio (ver @media abajo), donde
	   si hay ancho de sobra para una sola linea. */
	font-size: 19px !important;
	font-weight: 600 !important;
	line-height: 1.3;
	color: var(--asseo-primary);
	white-space: normal;
	overflow: visible;
	text-overflow: initial;
}

.asseo-aux-seccion-titulo {
	margin: 0 0 16px;
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--asseo-primary);
}

.asseo-aux-vacio {
	padding: 18px;
	/* Blanco (2026-08-18, mismo ajuste que ".asseo-aux-card") — #e8f5f5
	   quedaba casi igual de claro que el nuevo fondo de pagina con
	   degradado y se perdia el limite de esta caja. */
	background: #fff;
	border: 1px solid var(--asseo-mint);
	border-radius: 20px;
	font-size: 13.5px;
	color: var(--asseo-text-secondary, #6b6b6b);
	text-align: center;
}

/* ================= CARDS DE SERVICIO ================= */

.asseo-aux-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.asseo-aux-card {
	/* Blanco solido + sombra (2026-08-18, ampliado el mismo dia: "hay
	   que se distinga el fondo con el modulo") — la version anterior
	   (#f0fafa sin sombra) quedaba casi igual de clara que el fondo de
	   pagina de ese momento y no se notaba el limite. Ahora que la
	   PAGINA lleva el lavado de color (ver ".asseo-aux-wrap" arriba), la
	   card blanca + elevacion es lo que la separa con claridad, sin
	   depender de que 2 tonos de teal muy parecidos se noten distintos. */
	background: #fff;
	border: 1px solid var(--asseo-mint);
	border-radius: 20px;
	padding: 16px;
	box-shadow: 0 4px 16px rgba(7, 92, 93, 0.1);
}

.asseo-aux-cards--compacto .asseo-aux-card {
	padding: 12px;
}

.asseo-aux-card__hora {
	font-size: 13px;
	font-weight: 800;
	color: var(--asseo-primary);
	margin-bottom: 6px;
}

.asseo-aux-card__cliente {
	margin: 0 0 6px;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #1a1a1a;
}

.asseo-aux-card__direccion {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--asseo-text-secondary, #6b6b6b);
}

.asseo-aux-card__direccion svg {
	flex: none;
	margin-top: 2px;
	color: var(--asseo-teal);
}

/* Pastilla de ciudad, en SU PROPIO parrafo (2026-08-22, pedido
   explicito: "mejorame la ubicacion" + ajuste el mismo dia "alinea todo
   hacia la izquierda") — a proposito FUERA de ".asseo-aux-card__direccion"
   (esa fila tiene el icono de pin antes del texto, y cualquier elemento
   metido ahi adentro queda corrido a la derecha por el ancho del icono);
   este parrafo arranca en el mismo margen izquierdo real de la tarjeta,
   igual que el titulo del cliente y los chips de tipo/modalidad de mas
   abajo. Mismo lenguaje visual que ".asseo-aux-chip" (pastilla clara con
   borde) para que la ciudad se lea como un dato de contexto aparte, no
   como una 3ra clausula pegada a la calle con un "·" mas. */
.asseo-aux-card__direccion-ciudad-fila {
	margin: 0 0 8px;
}

.asseo-aux-card__direccion-ciudad {
	display: inline-flex;
	padding: 2px 9px;
	border-radius: 999px;
	background: #e8f5f5;
	border: 1px solid var(--asseo-mint);
	color: var(--asseo-primary);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.asseo-aux-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

.asseo-aux-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
}

/* Tipo de servicio (2026-08-18, pedido explicito: "diferenciar los
   badges") — relleno solido, mas peso visual que el de modalidad. */
.asseo-aux-chip--tipo {
	background: var(--asseo-primary);
	color: #fff;
}

/* Modalidad — claro con borde, subordinado al de tipo de servicio. */
.asseo-aux-chip--modalidad {
	background: #e8f5f5;
	color: var(--asseo-primary);
	border: 1px solid var(--asseo-mint);
}

.asseo-aux-card__nota {
	margin: 0 0 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #1a1a1a;
}

/* Ancho completo (2026-08-22, pedido explicito: "mejorame la ubicacion
   del boton de copiar informacion") — antes vivia alineado a la derecha,
   angosto (solo el ancho de su propio texto, ver historial abajo): en
   una card donde TODO lo demas (titulo, ubicacion, chips) arranca pegado
   al margen izquierdo, era el UNICO elemento corrido a la derecha —
   quedaba visualmente suelto/descolgado en vez de sentirse parte de la
   misma tarjeta. Ancho completo lo integra como una accion mas de la
   card (mismo criterio que el resto de botones de este portal,
   ".asseo-aux-btn" ya es "width:100%" por defecto — antes este boton
   era la UNICA excepcion) y de paso agranda el area de toque real.
   Historial: "display:flex, justify-content:flex-end" fue un pedido
   explicito del 2026-08-18 — se reemplaza a proposito por este pedido
   mas reciente, no es un descuido. */
.asseo-aux-card__copiar-fila {
	margin-top: 16px;
}

/* Estado "Copiado" (2 segundos, ver portal-auxiliar.js) — mismo verde de
   "exito" ya usado en el resto del plugin, no un color nuevo. */
.asseo-aux-card__copiar.is-copiado {
	background: var(--asseo-success-text, #2e7d32) !important;
	border-color: var(--asseo-success-text, #2e7d32) !important;
	color: #fff !important;
}

/* ================= PROXIMAS AGENDAS ================= */

.asseo-aux-grupo-fecha {
	margin-bottom: 20px;
}

.asseo-aux-grupo-fecha__encabezado {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.asseo-aux-grupo-fecha__fecha {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--asseo-primary);
	text-transform: capitalize;
}

.asseo-aux-badge-dias {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--asseo-warning-bg, #fff7dc);
	color: var(--asseo-warning-text, #8a6d1a);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

/* ================= MI PERFIL ================= */

.asseo-aux-perfil-datos {
	/* Blanco (2026-08-18, mismo ajuste que ".asseo-aux-card"/".asseo-aux-vacio"). */
	background: #fff;
	border: 1px solid var(--asseo-mint);
	border-radius: 20px;
	padding: 16px;
	margin-bottom: 12px;
}

.asseo-aux-perfil-datos p {
	margin: 0 0 8px;
	font-size: 13.5px;
	color: #1a1a1a;
}

.asseo-aux-perfil-datos p:last-child {
	margin-bottom: 0;
}

/* Contenedor visual del bloque "Cambiar contraseña" en Mi perfil. */
[data-aux-cambio-password].asseo-aux-form {
	background: #fff;
	border: 1.5px solid var(--asseo-teal);
	border-radius: 20px;
	padding: 16px;
}